跟着禹神学前端——HTML 基础
1. HTML 发展史#
2. HTML 标签#
-
标签 又称为 元素，是 HTML 的基本组成单位。
-
标签分为：双标签 与 单标签（绝大多数都是双标签）。
-
标签名不分区大小写，单推荐小写，因为小写更规范。
-
双标签示例：
<marquee>天龙八部</marquee> -
单标签示例：
<input> -
标签之间的关系：并列关系、嵌套关系、可以使用 tab 键进行缩进。
<marquee> 醉卧沙场君莫笑，古来征战几人回. <input> </marquee>
3. HTML标签属性#
-
用于给标签提供 附加信息。
-
可以写在：起始标签 或 单标签 中，形式如下：
例如：
<marquee loop="1" bgcolor="red">醉卧沙场君莫笑，古来征战几人回</marquee> <input type="password"> -
有些特殊的属性，没有属性名，只有属性值，例如：
<input disabled> -
注意点：
- 不同的标签，有不同的属性，也有一些通用属性（在任何标签内都能写）
- 属性名、属性值不能乱写，都是 W3C 规定好的。
- 属性名、属性值，都不区分大小写，但推荐小写。
- 双引号，也可以写成单引号，甚至不写都行，但还是推荐写双引号。
- 标签中不要出现同名属性，否则后写的会失效，例如：
<input type="text" type="password">
4. HTML 基本结构#
- 在网页中，佮查看某段结构的据图代码？——点击鼠标右键，选择 ”检查“。
- 【检查】和【查看网页源代码】的区别：
- 【查看网页源代码】看到的是程序猿编写的源代码。
- 【检查】看到的是经过浏览器”处理“后的源代码。
- 网页的基本机构如下：
- 想要呈现在网页中的内容卸载
body标签中。 head标签中的title标签可以指定网页的标题。- 代码示例：
- 想要呈现在网页中的内容卸载
<html>
<head>
<title>网页标题</title>
</head>
<body>
......
</body>
</html>
5. HTML注释#
特点：注释的内容会被浏览器所忽略，不会呈现在网页中，但源代码中依然可见。
作用：对代码进行解释和说明。
写法：
<!-- 下面的文字只能滚动一次 -->
<marquee loop="1">天龙八部</marquee>
<!-- 下面的文字可以无限滚动 -->
<marquee>天龙八部</marquee>
注意：注释不可以嵌套，以下写法是错误的：
<!-- 我是一段注释 <!-- 我是一段注释 --> -->
6. HTML文档声明#
作用：告诉浏览器当前网页的版本
写法：（W3C 推荐使用 HTML5 的写法）
<!DOCTYPE html>
或
<!DOCTYPE HTML>
或
<!doctype html>
注意：文档声明，必须在网页的第一行，且在 html 标签的外侧。
7. HTML 字符编码#
-
计算机对数据的操作：
- 存储时，对数据进行：编码。
- 读取时，对数据进行：解码。
-
编码、解码，会遵循一定的规范——字符集。
-
字符集有很多种，常见的有：
1) ASCII: 大写字母、小写字母、数字、一些符号，共计128个。 2）ISO 8859-1：在 ASCII 基础上，扩充了一些希腊字符，共计256个。 3）GB2312：继续扩从，收录了6763个常用汉字、682个字符。 4）GBK：收录了汉字和符号达到 20000+，支持繁体中文。 5）UTF-8：包含世界上所有语言的：所有文字与符号。——常用 -
使用原则：
原则 1：存储时，务必采用合适的字符编码。否则无法存储，数据会丢失！
原则 2：存储时采用哪种方式编码，读取时就采用哪种方式解码。否则数据会错乱！
8. 开发者文档#
W3C 官网：https://www.w3c.org
W3School：https://www.w3school.com.cn
MDN：https://developer.mozilla.org ——平时用的最多
9. html排版标签#
| 标签名 | 标签含义 | 单/双标签 |
|---|---|---|
| h1~h6 | 标题 | 双 |
| p | 段落 | 双 |
| div | 块，没有任何含义，用于整体布局（生活中的包装袋） | 双 |
- 一个页面只能有一个
h1，可以有多个h2-h6，h标签不允许互相嵌套。p标签很特殊，里面不能有p、div、h1~h6标签，会自定甩出来自动前后补全。
10. 语义化标签#
语义化：用特定的标签表达特定的含义。
原则：标签默认效果不重要，语义最重要！（默认效果后期可以通过CSS随便控制）。
优势：
- 代码结构清晰，可读性强。
- 有利于
SEO（搜索引擎优化），爬虫。 - 方便设备解析（如屏幕阅读机器人、盲人阅读器等） 。
11. 块级元素与行内元素#
块级元素：独占一行（排版标签都是块级元素）。
行内元素：不独占一行（目前只学了input）
使用规则：
-
块级元素中能写 行内元素 和 块级元素 （块级元素中几乎什么都能写）
-
行内元素中能写行内元素，但不能写块级元素
-
h1-h6不能相互嵌套 -
p标签中不能写块元素
12. 文本标签#
作用：用于包裹：词汇、短语等。
使用方式：通常写在排版标签里面。
排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）。
常用标签：
| 标签名 | 标签语义 | 单/双标签 |
|---|---|---|
| em | 要着重阅读的内容 | 双 |
| strong | 十分重要的内容（语气比em要强） | 双 |
| span | 没有语义，用于包裹短语的通用容器 | 双 |
生活中的例子：
div是大包装袋，span是小包装袋。
13. 常见图片格式#
-
jpg格式：
概述：扩展名为.jpg 或.jpeg, 是一种有损的压缩格式（把肉眼不容易观察出来的细节丢弃了）。
主要特点：支持的颜色丰富，占用空间较小，不支持透明背景、不支持动态图。
使用场景：对图片细节没有极高要求的场景，例如：网站的产品宣传图等。-- 改格式网页中很常见。 -
png 格式：
概述：扩展名为.png, 是一种无损的压缩格式，能够更高质量的保存图片。
主要特点：支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。
使用场景：①想让图片由透明背景；②想更高质量的呈现图片；例如：公司logo、重要配图等。 -
bmp格式：
概述：扩展名为.bmp, 不进行压缩的一种格式，在最大程度上保留图片更多的细节。
主要特点：支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图。
使用场景：对图片细节要求极高的场景，例如：一些大型游戏中的图片（）。 -
gif格式：
概述： 扩展名为：.gif，仅支持256种颜色，色彩呈现不是很完整。
主要特点：支持的颜色较少，支持简单透明背景、支持动态图。
使用场景：网页中的动态图片。 -
webp格式：
概述：扩展名为.webp，谷歌推出的一种格式，专门用来在网页中呈现图片。
主要特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。
使用场景：网页中的各种图片。 -
base64格式：
本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。
原理：把图片进行 base64 编码，形成一串文本。
生成方式：靠一些工具或网站。
使用方式：直接作为img 标签的src属性的值即可，并且不受文件位置的影响。
使用场景：一些较小的图片，或者需要和网页一起加载的图片。
图片的格式非常多，上面这些，只是一些常见的、我们前端人员常接触到的。
14. 超链接#
主要作用：从当前页面进行跳转。
| 标签名 | 标签语义 | 常用属性 | 单/双 标签 |
|---|---|---|---|
| a | 超链接 | 1. href：要跳转的具体位置。 2. target：跳转时如何打开页面，常用值如下：_self: 在本页签重打开。 _blank：在新页签中打开。 |
双 |
14.1 跳转页面#
<!-- 跳转其他网页 -->
<a href="http://www.baidu.com/" target="_blank">百度一下，你就知道</a>
<!-- 跳转本地网页 -->
<a href="./HTML排版标签.html" target="_self">京东</a>
# 注意点：
1. 代码中的多个空格、多个回车，都会被浏览器解析成一个空格！
2. 虽然 a 是行内元素，但 a 元素可以包裹除它自身外的任何元素！
14.2 跳转文件#
<!-- 浏览器能直接打开的文件 -->
<a href="./resource/自拍.jpg">看自拍</a>
<a href="./resource/小电影.mp4">看小电影</a>
<a href="./resource/小姐姐.gif">看小姐姐</a>
<a href="./resource/如何一夜暴富.pdf">点我一夜暴富</a>
<!-- 浏览器不能直接打开的文件 -->
<a href="./resource/内部资源.zip">内部资源</a>
<!-- 强制触发下载 -->
<a href="./resource/小电影.mp4" download="电影片段.mp4">下载小电影</a>
注意事项：
- 若浏览器无法打开文件，则会引导用户下载。
- 若想强制触发下载，请使用download属性，属性值即为下载文件的名称。
14.3 跳转锚点#
概念：什么是锚点？——网页中的一个标记点。
使用方式：
-
第一步：设置锚点
<!-- 第一种方式：a标签配合name属性 --> <a name="test1"></a> <!-- 第二种方式：其他标签配合id属性 --> <h2 id="test2">我是一个位置</h2># 注意点： 1. 具有`href`性的`a`标签是超链接，具有name属性的a 标签是锚点。 2. `name`和`id`都是区分大小写的，且`id`最好别是数字开头。 -
第二步：跳转锚点
<!-- 跳转到test1锚点 --> <a href="#test1">去test1锚点</a> <!-- 跳到本页面顶部 --> <a href="#">回到顶部</a> <!-- 跳转到其他页面锚点 --> <a href="demo.html#test1">去demo.html页面的test1锚点</a> <!-- 刷新本页面 --> <a href="">刷新本页面</a> <!-- 执行一段js，如果还不知道执行什么，可以留空，javascript:; --> <a href="javascript:alert(1);">点我弹窗</a>
14.4 唤起指定应用#
通过 a 标签，可以唤起设备应用程序。
<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>
<!-- 唤起设备发送邮件 -->
<a href="mailto:10010@qq.com">邮件联系</a>
<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>
15. 超文本#
超文本：是一种组织信息的方式，通过超链接将不同空间的文字、图片、等各种信息组织在一起，能从当前阅读的内容，跳转到超链接所指向的内容。
16. 列表#
16.1. 有序列表#
概念：有顺序或侧重顺序的列表。
<h2>我是有序列表</h2>
<ol>
<li>我是第一步</li>
<li>我是第二步</li>
<li>我是第三步</li>
<li>
<a href="https://www.baidu.com">百度一下，你就知道</a>
</li>
</ol>
16.2. 无序列表#
概念：无顺序或不侧重顺序的列表。
<h2>我想去的几个城市</h2>
<ul>
<li>北京</li>
<li>三亚</li>
<li>成都</li>
<li>上海</li>
</ul>
li标签最好写在
ul或ol中，不要单独使用。
16.3. 列表嵌套#
概念：列表中的某项内容，又包含一个列表（注意：嵌套是，请务必把结构写完整）。
<h2>我想去的几个城市</h2>
<ul>
<li>北京</li>
<li>三亚</li>
<li>成都</li>
<li>
<span>上海</span>
<ul>
<li>外滩</li>
<li>上海迪士尼</li>
<li>东方明珠</li>
</ul>
</li>
</ul>
16.4. 自定义列表#
概念：所谓自定义列表，就是一个包含术语名称以及术语描述的列表。
一个
dl就是一个自定义列表，一个dt就是一个术语名称，一个dd就是一个术语描述（可以有多个）。
示例：
<h2>如何更好的学习</h2>
<dl>
<dt>做好笔记</dt>
<dd>笔记是我们以后复习的一个抓手</dd>
<dt>多加练习</dt>
<dd>只有自己敲出来的代码，才是自己的</dd>
<dt>别怕出错</dt>
<dd>错很正常，改正并记住，就是经验</dd>
</dl>
17. 表格#
17.1 基本结构#
一个完整的表格由：表格标题、表格头部、表格主体、表格脚注，四部分组成。
表格涉及到的标签：
- table：表格
- caption：表格标题
- thead：表格头部
- tfoot：表格脚注
- tr：行
- th、td：每一个单元格（表格头部用：th，表格主体、表格脚注中用：td）
<table border="1">
<!-- 表格标题 -->
<caption>学生信息</caption>
<!-- 表格头部 -->
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>20</td>
<td>蒙古族</td>
<td>团员</td>
</tr>
</tbody>
<!-- 表格脚注 -->
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计：2人</td>
</tr>
</tfoot>
</table>
17.2 常用属性#
| 标签名 | 语义 | 常用属性 | 单/双标签 |
|---|---|---|---|
| table | 表格 | width：设置表格宽度。height：设置表格最小高度, 表格最终高度可能比设置值大。border：设置表格边框宽度。cellspacing：设置单元格之间的距离。 |
双 |
| thead | 表格头部 | height：设置表格头部高度。align：设置单元格的水平对齐方式，可选值：left、center、right。valign：设置单元格的垂直对齐方式，可选值：top、middle、bottom。 |
双 |
| tbody | 表格主体 | 常用属性与thead相同。 | 双 |
| tfoot | 表格脚注 | 常用属性与thead相同。 | 双 |
| tr | 行 | 常用属性与thead相同。 | 双 |
| td | 普通单元格 | width：设置单元格宽度。同列所有单元格全都受影响。height：设置单元格高度。同行所有单元格全都受影响。align：设置单元格的水平对齐方式。valign：设置单元格的垂直对齐方式。rowspan：指定要跨的行数。colspan：指定要跨的列数。 |
双 |
| th | 表头单元格 | 常用属性与td相同。 | 双 |
注意点：
<table>元素的border属性可以控制表格边框，但border值的大小，并不控制单元格边框的宽度，只能控制表格最外侧边框的宽度，这个问题如何解决？--后期靠CSS控制。- 给某个
th或td设置了宽度之后，他们所在的那一列的宽度就确定了。 - 给某个
th或td设置了高度之后，他们所在的那一行的高度就确定了。
18. 常用表情补充#
| 标签名 | 标签含义 | 单/双 标签 |
|---|---|---|
| br | 换行 | 单 |
| hr | 分割 | 单 |
| pre | 按原文显示（一般用于页面中嵌入大段代码） | 双 |
不要用
<br>来增加文本之间的行间距，应使后面即将学到的CSS margin属性。
<hr>的语义是分割，如果不想要语义，只是想画一条水平线，那么应当使用CSS完成。
19. 表单#
19.1. 基本结构#
| 标签名 | 标签语义 | 常用属性 | 单/双 标签 |
|---|---|---|---|
| form | 表单 | action：用户指定表单的提交地址（需要与后端沟通确定）。 target: 用于控制表单提交后，如何打开页面，常用值如下： _self: 在本窗口打开. _blank: 在新窗口打开. method：用户控制表单的提交方式。 |
双 |
| input | 输入框 | type：设置输入框的类型，目前用到的值是text，表示普通文本。name：用户指定提交数据的名字。（需要与后端人员沟通确定） |
单 |
| button | 按钮 | 双 |
示例：
<form action="https://www.baidu.com/s" target="_blank" method="post">
<input type="text" name="word">
<button>去百度搜索</button>
</form>
<form action="https://search.jd.com/search" target="_blank">
<input type="text" name="keyword">
<button>去京东搜索</button>
</form>
19.2. 常用表单控件#
-
文本输入框
<input type="text">常用属性如下：
- name：数据的名称。
- value：输入框的默认输入值。
- maxlength：输入框最大可输入长度。
-
密码输入框
<input type="password">常用属性如下：
-
name：数据的名称。
-
value：输入框的默认输入值（一般不用，无意义）。
-
maxlength：输入框最大可输入长度。
-
-
单选框
<input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女常用属性如下：
-
name：数据的名称，注意：想要单选效果，多个
radio的name属性值要保持一致。 -
value：提交的数据值。
-
checked：让该单选按钮默认选中。
-
-
复选框
<input type="checkbox" name="hobby" value="smoke">抽烟 <input type="checkbox" name="hobby" value="drink">喝酒 <input type="checkbox" name="hobby" value="perm">烫头常用属性如下：
- name ：数据的名称。
- value：提交的数据值。
- checked：让该复选框默认选中。
-
隐藏域
<input type="hidden" name="tag" value="100">用户不可见的一个输入区域，作用是：提交表单的时候，携带一些固定的数据。
常用属性如下：
- name 属性：指定数据的名称。
- value 属性：指定的是真正提交的数据。
-
提交按钮
<!-- 确认按钮 写法1 --> <button>确认</button> <!-- 确认按钮 写法2 --> <input type="submit" value="确认">注意：
button标签type属性的默认值是submit。button不要指定name属性.input标签编写的按钮，使用value属性指定按钮文字。
-
重置按钮
<!-- 重置按钮 写法1--> <button type="reset">点我重置</button> <!-- 重置按钮 写法2 --> <input type="reset" value="点我重置">注意：
button不要指定name属性。input标签编写的按钮，使用value属性指定按钮文字。
-
普通按钮
<input type="button" value="普通按钮"> <button type="button">普通按钮</button>注意：普通按钮的
type值为button，若不写则默认为submit会引起表单的提交。
-
文本域
<textarea name="other" cols="16" rows="3">我是文本域</textarea>常用属性如下：
rows属性：指定默认显示的行数，会影响文本域的高度。cols属性：指定默认显示的列数，会影响文本域的宽度。- 不能编写
type属性，其他属性与普通文本输入框一致。
-
下拉框
<select name="place"> <option value="河北">河北</option> <option value="山东">山东</option> <option value="北京" selected>北京</option> </select>常用属性及注意事项：
name属性：指定数据的名称。option标签设置value属性，如果没有value属性，提交的数据是option中间的文字；如果设置了value属性，提交的数据就是value的值（建议设置value属性）。option标签设置selected属性，表示默认选中。
19.3 禁用表单控件#
给表单控件的标签设置 disabled 即可禁用表单控件。
注意：input 、textarea 、button 、select、option 都可以设置 disabled 属性。
19.4 label标签#
label标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。
两种与label关联方式如下：
- 让label标签的
for属性的值等于表单控件的id。 - 把表单控件套在
label标签的里面。
19.5 fieldset与legend#
fieldset 可以为表单控件分组、legend 标签是分组的标题。
示例：
<fieldset>
<legend>主要信息</legend>
<label for="zhanghu">账户： </label><input id="zhanghu" type="text" name="account" maxlength="10"><br>
<label>密码： <input id="mima" type="password" name="pwd" maxlength="6"></label><br>
性别： <input type="radio" name="gender" value="male" id="nan">
<label for="nan">男</label>
<label><input type="radio" name="gender" value="female" id="nv">女</label>
</fieldset>
19.6 表单总结#
20. 框架标签#
| 标签名 | 功能和语义 | 属性 | 单/双 标签 |
|---|---|---|---|
| iframe | 框架（在网页中嵌入其他文件） | name ：框架名字，可以与target 属性配合。 width：框架的宽。 height ：框架的高度。 frameborder ：是否显示边框，值： 0或者1。 |
双 |
iframe 标签的实际应用：
- 在网页中嵌入广告。
- 与超链接或表单的
target配合，展示不同的内容。
21. HTML字符实体#
在 HTML中我们可以用一种特殊的形式的内容，来标识某个符号，这种特殊形式的内容，就是 HTML 实体。比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确的显示这些字符，我们必须在 HTML 源码中插入字符实体。
字符实体由三部分组成： 一个 & 和一个实体名称（或者一个 # 和一个实体编号），最后加上一个分号 ； 。
常见字符实体总结：
22.meta元信息#
- 配置字符编码
<meta charset="utf-8">
- 针对IE浏览器的兼容性配置。
<meta http-equiv="X-UA-Compatible” content="IE=edge">
- 针对移动端的配置（移动端课程中会详细讲解）
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 配置网页关键字
<meta name="keywords”content="8-12个以英文逗号隔开的单词/词语">
- 配置网页描述信息
<meta name=“description”content="80字以内的一段话，与网站内容相关">
- 针对搜索引擎爬虫配置：
<meta name="robots”content="此处可选值见下表">
| 值 | 描述 |
|---|---|
index |
允许搜索爬虫索引此页面。 |
noindex |
要求搜索爬虫不索引此页面。 |
follow |
允许搜索爬虫跟随此页面上的链接。 |
nofollow |
要求搜索爬虫不跟随此页面上的链接。 |
all |
与 index , follow 等价 。 |
none |
与 noindex , nofollow 等价 。 |
noarchive |
要求搜索引擎不缓存页面内容。 |
nocache |
noarchive 的替代名称。 |
- 配置网页作者：
<meta name="author” content="tony">
- 配置网页生成工
<meta name="generator" content="Visual Studio Code">
- 配置定义网页版权信息：
<meta name="copyright” content="2023-2027@版权所有">
- 配置网页自动刷新
<meta http-equiv="refresh" content="10;url=https://www.baidu.com">
完整的网页元信息，请参考：文档级元数据元素|MDN
作者：李商隐的猫
出处：https://www.cnblogs.com/jlukey/p/17961466
版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
前途似海，来日方长 —— 李商隐的猫
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！