当前位置: 首页 > news >正文

一篇讲完HTML核心内容

一、HTML


1、 HTML概念

网页,是网站中的一个页面,通常是网页是构成网站的基本元素,是承载各种网站应用的平台。通俗的说,网站就是由网页组成的。通常我们看到的网页都是以htm或html后缀结尾的文件,俗称 HTML文件。

2、 什么是HTML

HTML全称:Hyper Text Markup Language(超文本标记语言)

  • 超文本:页面内可以包含图片、链接,甚至音乐、程序等非文字元素

  • 标记:标签,不同的标签实现不同的功能

  • 语言:人与计算机的交互工具

3、 HTML能做什么

HTML使用标记标签来描述网页,展示信息给用户

  • 展现音频,视频,图片

  • 表格,列表

  • 超链接

4、 HTML书写规范

  • HTML标签是以尖括号包围的关键字 例如<a> <img>

  • HTML标签通常是成对出现的,有开始就有结束

  • HTML通常都有属性,格式:属性=‘属性值’(多个属性之间空格隔开)

    • 属性放在开标签内

    • <a href="" target=""> </a>

  • HTML标签不区分大小写,建议全小写

  • HTML标签支持合理的嵌套

  • 开闭标签之间加要展示的内容

  • 文件后缀是html,写完后使用浏览器打开

<!-- 例如 -->
<a href="http://www.baidu.com" target="_blank">超链接</a>

5、 开发工具

  • VSCode (微软) (我们使用这款)

  • HBuilderX (国产)

  • WebStorm (IDEA家族的)

  • Dreamweaver (考古队)

5.1 安装 VSCode

默认下一步下一步就可以.

image-20230306175553697

建议勾选12345,这样可以在右键时有 一个提示"使用VSCode打开文件"

5.2 插件

安装插件

  • Chinese (Simplified)(简体中文)

  • Auto rename tag (自动改标签名)

  • Material lcon Theme (图标样式)

  • open in browser (快速使用浏览器打开页面)

image-20230306175911196

以上几个是非常墙裂建议安装!,在应用商店,输入以上几个的名字即可

image-20230306175937001

5.3 使用vscode

使用VSCode,最好的方式

  • 先在本地磁盘创建好一个前端项目(文件夹)

  • 使用VSCode打开该文件夹

  • 创建页面文件

image-20230306180220055

image-20230306180240350

image-20230306180252280

5.4 运行

1 在磁盘中找到文件,使用浏览器打开

2 或者使用刚才我们安装的插件,有快捷键 alt+b,就会使用电脑的默认浏览器打开

二、HTML基本标签


1、 结构(骨架)标签[重要]

<html>:根标签       <head>:网页头标签<title></title>:页面的标题      </head>      <body></body>:网页正文
</html> 

以下属性了解

属性名代码描述
text< body text="#f00"></ body>设置网页正文中所有文字的颜色
bgcolor< body bgcolor="#00f"></ body>设置网页的背景色
background< body background="1.png"></ body>设置网页的背景图

颜色的表示方式:

  • 第一种方式:用表示颜色的英文单词,例,red green blue

  • 第二种方式:用16进制表示颜色,例,#000000 #ffffff #325687 #377405

  • 第三种方式: 用三原色rgb(0,0,0) 数字取值0-255

2、 排版标签 [重要]

  • 可用于实现简单的页面布局

  • 注释标签:<!--注释-->

  • 换行标签:< br> (单标签,没有行间距)

  • 段落标签:< p>文本文字</ p>

    • 特点:段与段之间有空行 (行间距比较大)

    • 属性:align对齐方式(left、center、right)

  • 水平线标签:< hr/> (单标签)

    • 属性(了解):

      • width:水平线的长度(两种:第一种:像素表示;第二种,百分比表示)

        • 像素单位px,长度固定

        • 百分比单位% ,长度随着浏览器窗口会变化

      • size: 水平线的粗细 (像素表示,例如:10px)

      • color:水平线的颜色

      • align:水平线的对齐方式

  • 缩进(空格符) &nbsp;

劝学  颜真卿
-----------
三更灯火五更鸡,
正是男儿读书时.
黑发不知勤学早,
白首方悔读书迟.

要求: 古诗名标题,作者要缩进,正文前有分割线,正文四句话换行

 <h2>劝学</h2>&nbsp;&nbsp;&nbsp;&nbsp;颜真卿<hr width="130px" align="left">三更灯火五更鸡,<br>正是男儿读书时.<br>黑发不知勤学早,<br>白首方悔读书迟.<br><hr width="130px" align="left"><p>三更灯火五更鸡,</p><p>正是男儿读书时.</p><p>黑发不知勤学早,</p><p>白首方悔读书迟.</p>

3、 块标签[重要]

使用CSS+DIV是现下流行的一种布局方式

标签代码描述
div< div></ div>行级块标签,独占一行,换行
span< span></ span>行内块标签,所有内容都在同一行

ps: 会用F12 浏览器开发者工具

4、 基本文字标签

font标签处理网页中文字的显示方式

属性名代码描述
size< font size="7"></ font>用于设置字体的大小,最小1号,最大7号
color< font color="#f00"></ font>用于设置字体的颜色
face< font face="宋体"></ font>用于设置字体的样式

5、 标题标签[重要]

随着数字增大文字逐渐变小,字体是加粗的,内置字号,默认占据一行

标签代码描述
h1< h1></ h1>1号标题,最大字号
h2< h2></ h2>2号标题
h3< h3></ h3>3号标题
h4< h4></ h4>4号标题
h5< h5></ h5>5号标题
h6< h6></ h6>6号标题,最小字号

6、 列表标签[重要]

无序列表

  • 1

  • 2

  • 3


有序列表

  1. day01

  2. day02

  3. day03

无序列表:使用一组无序的符号定义, < ul>< /ul>

<ul type="circle"><li></li>
</ul>

ul标签内,有属性type

属性值描述用法举例
circle空心圆< ul type="circle">< /ul>
disc实心圆< ul type="disc">< /ul>
square黑色方块< ul type="square">< /ul>

有序列表:使用一组有序的符号定义, < ol>< /ol>

<ol type="a" start="1"><li></li>
</ol>

ol标签内,有属性type

属性值描述用法举例
1数字类型< ul type="1">< /ul>
A大写字母类型< ul type="A" >< /ul>
a小写字母类型< ul type="a">< /ul>
I大写古罗马< ul type="I">< /ul>
i小写古罗马< ul type="i">< /ul>

列表嵌套:无序列表与有序列表相互嵌套使用

代码举例:
    <ol><li></li><li></li><li><ul><li></li></ul></li></ol>

7、 图形标签[重要]

在页面指定位置处中引入一幅图片, < img />

属性名描述
src引入图片的地址
width图片的宽度
height图片的高度
border图片的边框
align与图片对齐显示方式
alt提示信息

路径问题:

  • ./ 当前文件夹 .

  • ../ 上一层文件夹

    <ol><li><img width="100px" src="../images/java1.jpg"></li><li><img width="100px" src="../images/java2.jpg"></li><li><img width="100px" src="../images/java3.jpg"></li></ol>

8、 超链接标签[重要]

  • 在页面中使用链接标签跳转到另一页面

  • 标签: < a href="">< /a>

  • 属性:href:跳转页面的地址(跳转到外网需要添加协议)

  • 设置跳转页面时的页面打开方式,target属性

    • _blank在新窗口中打开

    • _self在原页面中打开

练习: 图片加链接(点击图片能跳转页面)

   <!-- 图片背后是连接 --><a href="https://baike.baidu.com/item/Java/85979?fr=ge_ala"><img src="../images/6.jpg" width="200px"></a>

练习: 列表加链接

    <ul><li><a href="#">外长现场读宪法回应台湾问题热</a></li><li><a href="#">委员建议允许女职工哺乳期灵活办公</a></li><li><a href="#">十组数据看增进民生福祉</a></li></ul>

9、 表格标签[重要]

表格标签非常重要,用于在项目中展示数据的,例如下方这个

image-20240325161609578

普通表格(table,tr,td)

<table> <!--  表格 --><tr> <!--  table row 行 --><td></td> <!-- table data单元格数据 --></tr>
</table>

表格的列标签(th):内容有加粗和居中效果

<table><thead>  <!-- 表头,一般用在第一行--><th></th> <!-- table head--></thead>
</table>

表格的列合并属性(colspan):在同一行内同时合并多个列 column 列

<table><tr><td colspan="合并的列数"></td></tr>
</table>

表格的行合并属性(rowspan):在同一列跨多行合并

<table><tr><td rowspan="合并的行数"></td></tr>
</table>

三、HTML表单标签[最重要]


html表单用于收集不同类型的用户输入数据

1、 form元素常用属性

  • action表示动作,值为服务器的地址,把表单的数据提交到该地址上处理

  • method:请求方式:get 和post

    • get:

      • 地址栏,请求参数都在地址后拼接 path?name=张三&password=23456

      • 不安全

      • 效率高

      • get请求大小有限制,不同浏览器有不同,但是大约是2KB;一般情况用于查询数据

    • post:

      • 地址栏:请求参数单独处理。

      • 安全可靠些

      • 效率低

      • post请求大小理论上无限;一般用于插入删除修改等操作

  • enctype:表示是表单提交的类型

    • 默认值:application/x-www-form-urlencoded 普通表单

    • multipart/form-data 多部分表单(一般用于文件上传)​

2、 input元素

作为表单中的重要元素,可根据不同type值呈现为不同状态

属性值描述代码
text单行文体框< input type="text"/> 默认的
password密码框< input type="password"/>
radio单选按钮< input type="radio"/>
checkbox复选框< input type="checkbox"/>
date日期框< input type="date"/>
time时间框< input type="time"/>
datetime日期和时间框< input type="datetime"/>
email电子邮件输入< input type="email"/>
file文件上传< input type="file"/>
hidden隐藏域< input type="hidden"/>
submit表单提交按钮< input type="submit"/>
button普通按钮< input type="button"/>
reset重置按钮< input type="reset"/>

input标签中属性

  • value 输入框的值

  • name 输入框值的key,没有name属性,将来后台服务器没有办法接收数据

3、 select 元素(下拉列表)

  • 单选下拉列表:< select>< /select>

  • 默认选中属性:selected="selected"

    • ps: HTML5以后,属性名等于属性值的属性,可以简写属性即可

<select><option selected="selected">内容</option>...<option></option>
</select>
  • 多选下拉列表属性: < select></ select>

  • 多选列表:multiple="multiple"

<select multiple="multiple"><option></option>
</select>

4、 textarea元素(文本域)

多行文本框: < textarea cols="列" rows="行">< /textarea>

5、 综合示例

案例效果图

image-20230306182027262

<body><!-- input的value属性,是输入框的默认值,很重要一般用在更新数据,在输入框回显数据用的input的属性,做输入框的背景提示  
---------------------------------------------表单是干什么? 收集数据1) 点击提交按钮,就会提交数据到action指定的服务器2) 要给input,select设置name属性值,用来指定发送到服务器的数据的名字要不然,后端服务器无法获得表单中的数据3) 单选,复选,下拉框,还要设置value,用来指定数据值,否则提交到后端都是on,无意义4) 一般,在设计上,性别,学历,技能,不会设计成字符数据,都是数字例如1代表男,2代表女,这样节省数据库存储空间
------------------------------------------------method可以指定提交到服务器方式,默认是get另外一种: postget:  明文提交数据,所携带数据量较小(2-4k),快post: 隐藏提交数据,数据在请求体,携带数据大小不限,慢--><form action="/his" method="post">用户名<input type="text" value="admin" name="username" placeholder="6-10位"> <br>密码<input type="password"  name="password" value="123456"> <br>性别<input type="radio" name="sex" value="1">男<input type="radio" name="sex" value="2">女 <br>技能<input type="checkbox" name="skill" value="1">rap <input type="checkbox" name="skill" value="2">唱跳<input type="checkbox" name="skill" value="3">篮球<br>生日<input type="date" name="birthday"> <br>学历<select name="edu"><option value="1">大专</option><option value="2">本科</option><option value="3">研究生</option></select> <br><input type="reset" value="重置"> <input type="submit" value="提交"> </form>
</body>

相关文章:

一篇讲完HTML核心内容

一、HTML 1、 HTML概念 网页&#xff0c;是网站中的一个页面&#xff0c;通常是网页是构成网站的基本元素&#xff0c;是承载各种网站应用的平台。通俗的说&#xff0c;网站就是由网页组成的。通常我们看到的网页都是以htm或html后缀结尾的文件&#xff0c;俗称 HTML文件。 2、…...

2024icpc(Ⅱ)网络赛补题 G

2024icpc(Ⅱ)网络赛补题 G 题目链接&#xff1a;The 2024 ICPC Asia EC Regionals Online Contest (II) G、Game 题意&#xff1a; 给定Alice和Bob的每一轮的概率 p 0 , p 1 p_0, p_1 p0​,p1​ 给定Alice和Bob的初始数字 x , y x,y x,y。 对于每一轮&#xff1a; 如果Al…...

AIGC时代!AI的“iPhone时刻”与投资机遇

AIGC时代&#xff01;AI的“iPhone时刻”与投资机遇 前言AI的“iPhone时刻”与投资机遇 前言 AIGC&#xff0c;也就是人工智能生成内容&#xff0c;它就像是一股汹涌的浪潮&#xff0c;席卷了整个科技世界。它的出现&#xff0c;让我们看到了人工智能的无限潜力&#xff0c;也…...

Kubernetes调度单位Pod

Kubernetes调度单位Pod 1 Pod简介 不直接操作容器container。 一个 pod 可包含一或多个容器&#xff08;container&#xff09;&#xff0c;它们共享一个 namespace&#xff08;用户&#xff0c;网络&#xff0c;存储等&#xff09;&#xff0c;其中进程之间通过 localhost 本地…...

C语言指针篇

要想学好C语言&#xff0c;作为灵魂的指针那是必须要掌握的&#xff0c;而要想搞定指针&#xff0c;就不得不讲一下内存和地址之间的关系 内存和地址 计算机上的CPU&#xff08;中央处理器&#xff09;在处理数据的时候&#xff0c;需要的数据是在内存中读取的&#xff0c;处…...

Unity 使用Editor工具查找 Prefab 中的指定脚本

在 Unity 项目中&#xff0c;随着项目规模的扩大和 Prefab 数量的增加&#xff0c;管理和定位 Prefab 中的脚本变得更加复杂。为了提高开发效率&#xff0c;所以需要编写一个自定义的 Unity Editor 工具&#xff0c;帮助查找某个 Prefab 中是否使用了指定的脚本。本文将介绍如何…...

Frida-JSAPI:Interceptor使用

拦截器 Interceptor.attach(target, callbacks[, data]) 参数分析 target &#xff1a;target是一个NativePointer&#xff0c;用于指定想要拦截的函数的地址。callbacks &#xff1a;参数是一个包含一个或多个回调函数的对象。 onEnter(args) 回调函数&#xff0c;接收一个参…...

【深度学习】(3)--损失函数

文章目录 损失函数一、L1Loss损失函数1. 定义2. 优缺点3. 应用 二、NLLLoss损失函数1. 定义与原理2. 优点与注意3. 应用 三、MSELoss损失函数1. 定义与原理2. 优点与注意3. 应用 四、BCELoss损失函数1. 定义与原理2. 优点与注意3. 应用 五、CrossEntropyLoss损失函数1. 定义与原…...

git学习报告

文章目录 git学习报告如何配置vscode终端安装PowerShell安装 Microsoft.Powershell.Preview使用 git的使用关于团队合作 git指令本地命令&#xff1a;云端指令 git学习报告 如何配置vscode 安装powershell调教window终端&#xff0c;使其像Linux一样&#xff0c;通过Linux命令…...

Spring MVC的应用

目录 1、创建项目与maven坐标配置 2、核心配置 3、启动项目测试 4、不同请求参数在controller的配置 4.1 servlet API 4.2 简单类型 4.3 pojo类型 4.4 日期类型 4.5 restful风格4种操作类型 4.5.1 GET&#xff1a;获取资源 4.5.2 POST&#xff1a;新建资源 4.5.3 P…...

JavaEE: 深入探索TCP网络编程的奇妙世界(六)

文章目录 TCP核心机制TCP核心机制九: 面向字节流TCP核心机制十: 异常处理 小小的补充(URG 和 PSH)~TCP小结TCP/UDP 对比用UDP实现可靠传输(经典面试题) 结尾 TCP核心机制 上一篇文章JavaEE: 深入探索TCP网络编程的奇妙世界(五) 书接上文~ TCP核心机制九: 面向字节流 TCP是面…...

探秘 Web Bluetooth API:连接蓝牙设备的新利器

引言 随着物联网技术的快速发展&#xff0c;蓝牙设备在日常生活中扮演着越来越重要的角色。而在 Web 开发领域&#xff0c;Web Bluetooth API 的出现为我们提供了一种全新的方式来连接和控制蓝牙设备。本文将深入探讨 Web Bluetooth API 的使用方法和原理&#xff0c;帮助开发…...

Kubernetes Pod调度基础(kubernetes)

实验环境依旧是k8s快照&#xff0c;拉取本次实验所需的镜像文件&#xff1b; 然后在master节点上传已经编写好的yaml文件&#xff1b; 然后同步会话&#xff0c;导入镜像&#xff1b; pod控制器&#xff1a; 标签选择器--》标签&#xff1a; 标签&#xff1a; 在Kubernetes&…...

Angular由一个bug说起之十:npm Unsupported engine

我们在用npm下载包的时候&#xff0c;有时候会碰到这样的提示 这是npm的警告&#xff0c;说我们使用的nodejs版本与下载的包所要求的nodejs版本不一致。 这是因为有些包它对nodejs的版本有要求&#xff0c;然后就会在package.json文件里的engines字段里声明它所要求的nodejs版本…...

Android 开发高频面试题之——Flutter

Android开发高频面试题之——Java基础篇 flutter高频面试题记录 Flutter1. dart中的作用域与了解吗2. dart中. .. ...分别是什么意思?3. Dart 是不是单线程模型?如何运行的?4. Dart既然是单线程模型支持多线程吗?5. Future是什么6. Stream是什么7. Flutter 如何和原生交互…...

视频单目标跟踪研究

由于对视频单目标跟踪并不是很熟悉&#xff0c;所以首先得对该领域有个大致的了解。 视频目标跟踪是计算机视觉领域重要的基础性研究问题之一&#xff0c;是指在视频序列第一帧指定目标 后&#xff0c;在后续帧持续跟踪目标&#xff0c;即利用边界框&#xff08;通常用矩形框表…...

若依vue3.0表格的增删改查文件封装

一、因若依生成的文件没进行封装&#xff0c;维护起来比较麻烦。所以自己简单的进行封装了一下 gitee代码&#xff08;文件&#xff09;地址&#xff1a;https://gitee.com/liu_yu_ting09/ruo_yi.git 二、封装的方法&#xff08;下面绿色按钮进行全局封装一个JeecgListMixin.js…...

【已解决】如何使用JAVA 语言实现二分查找-二分搜索折半查找【算法】手把手学会二分查找【数据结构与算法】

文章目录 前言任务描述编程要求 输出样例:未查找到11元素&#xff01; 二、代码实现总结理解不了考试的时候直接背下来就好了。 前言 [TOC]二分搜索 任务描述 折半查找&#xff08;二分搜索&#xff09; 设a[low..high]是当前的查找区间&#xff0c;首先确定该区间的中点位置…...

ERROR 1524 (HY000): Plugin ‘mysql_native_password‘ is not loaded

你遇到的错误是由于 MySQL 版本不再默认支持 mysql_native_password 认证插件导致的。从 MySQL 8.0 开始&#xff0c;默认的认证插件是 caching_sha2_password&#xff0c;而不是 mysql_native_password。 解释&#xff1a; 错误 ERROR 1524 (HY000): Plugin mysql_native_pa…...

.NET 6.0 WebAPI 使用JWT生成Token的验证授权

1.引入相关程序包JwtBearer注意版本: 2.配置文件appsettings.json写相关配置参数(也可不写&#xff0c;写在程序里面&#xff0c;数据库读取也是一样的) , //JWT加密"JWTToken": {"SecretKey": "jsaduwqe6asdjewejdue7dfmsdfu0sdfmwmsd8wfsd6",…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)

引言 工欲善其事&#xff0c;必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后&#xff0c;我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集&#xff0c;就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...