HTML基础
HTML
超文本标记语言: Hyper Text Markup Language
基本结构
<html>
<head>
<title>页面标题</title>
</head>
<body>
页面内容
</body>
</html>
HTML文档声明
<!DOCTYPE html>
<!DOCTYPE html>: html5的文档声明
作用: 告诉浏览器当前网页版本。浏览器便于渲染页面。
位置: 必须写在整个页面代码的第一行。
页面编码
根据地区不同，会有不同的编码格式，如：gb2312、gbk、utf-8等。
当文件存储时就会指定一种编码格式，在读取文件时也需要以相同的编码格式读取。否则就会乱码。
乱码原因:
1.保存时文字和编码格式不匹配，出现乱码(无法补救)
选择不合适的编码格式进行存储，例如 "中国"，选择了 "iso-8859-1"(欧洲使用的文字)进行编码存储。
会出现如下乱码:
查看文本出现??则代表，保存时编码不匹配出现乱码，无法补救。
2.读取时文字和编码格式不匹配，出现乱码(可以补救)
如下图，文本内容是中文以GBK编码保存，选择了非GBK编码格式读取，就会出现乱码。再次选择GBK编码格式读取，就可以正常显示。
指定编码格式，让浏览器以指定的编码格式解析网页，以免乱码。
<head>
<meta charset="UTF-8">
</head>
如下图，以UTF-8保存页面，设置浏览器以GBK进行解码，没有出现乱码的原因是，live server插件告诉浏览器以UTF-8进行解码，因此没有出现乱码
如果打开源文件，则会出现乱码
如果以UTF-8 BOM进行编码，即使指定了meta charset="GBK"，也不会出现乱码。vscode默认以UTF-8 BOM进行编码。
页面语言
作用:
1.让浏览器显示对应的翻译提示
2.有利于搜索引擎优化
设置语言告诉浏览器当前页面的语言，以便浏览器解析。
<html lang="en">: 设置为页面语言是英语
设置格式: 语言-国家/地区
例如: zh-CN zh-TW
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<div>
页面内容 I Love You
</div>
</body>
</html>
设置页面为英语，并且页面中存在英语，那么浏览器就会出现翻译按钮，lang='en'为英语，就会展示英语翻译为中文。
设置long='ko'韩语
HTML标准结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
页面内容
</body>
</html>
修改vscode默认生成html标准结构中的lang语言
排版标签
<h1>~<h6>: 标题
<p>: 段落
<div>: 用于整体布局
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<p>段落</p>
<p>段落</p>
</body>
注意事项:
1.h1最好在整个页面中只写一个，h2~h6可以写多个，常用h1~h3
2.h1~h6不能嵌套使用，即h1下不能再使用h1~h6
3.p标签很特殊，它里面不能有h1~h6、p、div标签
HTML语义化标签
什么是语义化，例如，h1~h6: 标题的含义，p: 段落的含义，等等。
HTML标签的默认样式效果不重要，其含义最重要。标签的效果可以通过css进行设置，而标签的含义则无法改变。
语义化的好处:
1.代码可读性强，含义明了。
2.有利于SEO搜索引擎优化。搜索引擎不可能把页面所有信息都收录，只收录重要的文字。
3.方便设备解析，比如，屏幕阅读器，盲人阅读器。
块级元素和行内元素
<body>
<marquee>marquee块级元素</marquee>
<h1>h块级元素</h1>
<h1>h块级元素</h1>
<p>p块级元素</p>
<p>p块级元素</p>
<input>
<input>
<span>span行内元素</span>
<span>span行内元素</span>
</body>
块级元素: 独占一行的元素
行内元素：不独占一行的元素
规则1: 块级元素中能写块级元素和行内元素(几乎什么都能写)
规则2: 行内元素中只能写行内元素，不能写块级元素
特殊规则: h标签中不能嵌套
特殊规则: p标签中不能写块元素
注意:
a标签是行内元素，但是它能包含除自身以外的任何元素，也能包含块元素。
a标签中有div，浏览器解析时没有甩到a标签外面，仍在a标签中。
规则1中块级元素中几乎什么都可以写，但也有例外，如h标签不能写h标签
<body>
<h1>
h1元素
<h1>
h1元素中写h1
</h1>
</h1>
</body>
上面代码中块级元素h1元素中写了h1元素，浏览器识别到下一个h1元素时，就会认为上一个h1元素结束，会自动补全h1结束标签，导致浏览器识别标签范围错乱，对于调试和开发不利。
违反规则2的影响:
<body>
<span>
span元素
<div>span中的块元素</div>
</span>
<span>第二个span</span>
</body>
上面代码中，span中写了div块级元素，F12选中第一个span元素时包含了第二个span，导致浏览器识别标签范围错乱，对于调试和开发不利。
废弃标签marquee，不建议使用，可以使用css代替。
文本标签
作用: 用于包裹词汇和短语。
通常写在排版标签中。
排版标签更加宏达，一般放大段落，文本标签更加微观，放一些词语短句。
文本标签一般都是行内元素。
常用的文本标签:
em: 注重阅读的文字，斜体效果。
strong: 重要的文字，比em语义还要重要，加粗效果。
span: 没有语义，是一个通用的文本标签。
<body>
<p>
能不能行只有<em>勇敢去做</em>才知道自己
</p>
<p>
<strong>2025年是往后10年最好的一年</strong>
</p>
</body>
不常用的文本标签
| 标签 | 语义 |
|---|---|
cite |
引用或参考文献 |
dfn |
定义术语 |
del与ins |
删除的文本与插入的文本 |
sub与sup |
下标文本与上标文本 |
code |
代码 |
samp |
从正常的上下文中，将某些内容提取出来，例如，标识设备输出 |
kbd |
键盘文本，标识文本是通过键盘输入的，经常用在与计算机相关的手册中 |
abbr |
缩写或首字母缩写，最好配上title属性 |
bdo |
更改文本方向，要配合dir属性，可选值: ltr(默认值) 或 rtl |
var |
标记变量，可与code标签一起使用 |
small |
附属细则， 例如包括版权，法律文本。很少使用 |
b |
摘要中的关键字、评论中的产品名称。很少使用 |
i |
本意是人物的思想活动、所说的话等，现在多用于呈现字体图标 |
u |
与正常内容有反差的文本，例如，错误单词或句子 很少使用 |
q |
短引用 很少使用 |
blockquote |
长引用，有缩进效果 很少使用 (块元素) |
address |
地址信息 (块元素) |
<body>
<p>
<cite>cite:作品标题 黄家驹发行新歌《真的爱你》</cite>
</p>
<p>
<dfn>dfn: 专业术语</dfn>
</p>
<p>
<del>marquee</del>已经被废弃使用了，本商品价格为: <ins>100</ins>元
</p>
<p>
水的方程式是H<sub>2</sub>O，8的二次方表示: 8<sup>2</sup>
</p>
<p>
js弹出警告代码: <code>alert('hello world')</code>不使用code标签: alert('hello world')
</p>
<p>
收到钱支付宝会发出语音提醒: <samp>支付宝到账100元</samp>
</p>
<p>
mac强刷页面的快捷键: <kbd>shift + command + r</kbd>
</p>
<p>
mac强刷页面的快捷键: <kbd>shift + command + r</kbd>
</p>
<p>
<abbr title="前端基础语言">HTML</abbr>是超文本标记语言
</p>
<p>
你是年少的欢喜，这句话反过来写是:<bdo dir="rtl">你是年少的欢喜</bdo> <code>ltr</code>:left to right | <code>rtl</code>:right to left
</p>
<p>
js中定义变量a: <code>var <var>a</var> = 1;</code>
</p>
<p>
<small>版权声明: 本站资源不得传播</small>
</p>
<p>
购买的新款<b>华为pure</b>很好用
</p>
<p>
大爷说: <i>卧槽，这年轻人</i>
</p>
<p>
hello的单词拼错了: <u>helo</u>
</p>
<p>
屈原曾经说过<q>路漫漫其修远兮，吾将上下而求索</q>
</p>
<p>
孙悟空曾经说过:
<blockquote>
曾经有一份真挚的感情摆在我的面前我没有珍惜，等我失去的时候才追悔莫及，人间最痛苦的事莫过于此，你的剑在我的咽喉上刺下去吧，不用在犹豫了!如果上天能给我一次再来一次的机会，我会对哪个女孩说三个字：我爱你，如果非要在这份爱上加一个期限，我希望是一万年!
</blockquote>
blockquote是块元素
</p>
<p>
你家的地址是
<address>北京市朝阳区</address>
address是块元素
</p>
</body>
上面的标签中blockquote和address是块元素
常用的元素有: h1~h6 div p span strong em
图片标签![]()
属性:
src: 指定图片路径
alt: 图片描述
width: 指定图片宽度，只调整width时默认等比放缩
height: 指定图片高度，只调整height时默认等比放缩
尽量不同时修改图片的宽高。
alt的作用:
1.有利于ESO搜索
2.浏览器不支持图片时，alt的内容会显示在浏览器中
<body>
<img src="小狗.jpg" alt="这是一只狗">
</body>
路径
相对路径
./: 当前文件所在的目录，可以省略
例如: ./小狗图片.jpg省略为小狗图片.jpg，./a/风景.jpg省略为a/风景.jpg
../: 当前文件所在目录的上一级
绝对路径
本地绝对路径: 从盘符出发
网络绝对路径: 从网络服务器出发 例如: https://n.sinaimg.cn/xxx.jpg
有些网络图片做了防盗链，例如微信公众号中的图片，通过浏览器可以打开，如果放到自己的项目中，则不会展示
<body>
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ByIYcET99NSLgjkvVicv1ibM746t2tKTendcwhVEDPmS8icAko0ia1wia8o5ycAZ4G7yc11DSGnGtKz5nePSDgJYFOQ/640?wx_fmt=jpeg&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1" alt="">
</body>
常见的图片格式
jpg: 扩展名.jpg或.jpeg，是一种有损压缩格式
主要特点: 支持的颜色丰富，占用空间小，不支持透明，不支持动态。
使用场景: 对图片没有极高要求，网站宣传，产品图片，具有大量图片网站，使用jpg不会占用较大空间，访问量大的网站避免网络消耗，应使用空间小的jpg。
png: 扩展名.png，是一种无损压缩格式，能够更高质量保存图片
主要特点: 支持的颜色丰富，占用空间略大，支持透明，不支持动态。
使用场景: 1.想让图片有透明背景 2.更高的图片质量，例如，公司logo，重要配图等。
bmp: 扩展名.bmp，不进行压缩的格式，能够更高质量保存图片
主要特点: 支持的颜色丰富，占用空间极大，不支持透明，不支持动态。
使用场景: 对图片要求极高的场景，如大型游戏
gif: 扩展名.gif，仅支持256种颜色，色彩呈现不是很完整。
主要特点: 支持颜色较少，支持简单透明背景，支持动态。
使用场景: 网页中动图。
webp: 扩展名.webp，是谷歌推出的一种格式。
主要特点: 具有上述特点，也支持动态。有些浏览器对webp兼容性不好。 一旦使用必须解决兼容性问题。
使用场景: 网页各种图片。
京东解决webp兼容性，图片网络路径为https://xx/xx.jpg.webp
网站检测IE浏览器是否兼容webp，如果不兼容js把图片的.webp后缀删除，则图片变为.jpg格式。
base64: base64编码，是一种将二进制数据编码为文本的算法。要通过浏览器打开。
使用方式: 编码后的文本放到img标签的src属性中。
使用场景: 图片较小的图片，减少浏览器对src中的资源发起网络请求。
超链接
跳转页面
<a>: 超链接
常用属性:
href: 指定链接地址
target: 指定打开方式，_blank: 新标签打开，_self: 当前标签打开
a标签是行内元素，但是它能包含除自身以外的任何元素，也能包含块元素。
a标签中有div，浏览器解析时没有甩到a标签外面，仍在a标签中。
<body>
<a href="#" target="_blank">新标签打开</a>
<a href="#" target="_self">当前标签打开
<div>a中包含div</div>
</a>
<a href="#">
去百度
<a href="#">去京东</a>
</a>
</body>
a标签嵌套a标签会被浏览器甩出。
a标签中写img:
跳转文件
<body>
<!-- 浏览器可以打开的文件 -->
<a href="./resources/小狗图片.jpg" target="_blank">打开图片</a>
<a href="./resources/动图.gif" target="_self">打开动图</a>
<a href="./resources/文本.txt" target="_self">打开文本</a>
<!-- 浏览器打不开的文件，会触发下载，指定_blank会在新标签下载 -->
<a href="./resources/压缩包.zip" target="_blank">打开压缩包</a>
<!-- 浏览器可以打开，强制触发下载 使用download属性，指定_blank无效，仍在当前页面下载 -->
<a href="./resources/文本.txt" download="指定下载文件名" target="_blank">强制下载文本</a>
</body>
a标签的href属性可以指定各种资源，当浏览器打不开指定的文件时会触发下载。
浏览器可以打开资源，也可以触发下载，通过download属性
download: 可以指定下载时的文件名和后缀，没有设置值时，默认下载文件名是文件名
<a href="./resources/文本.txt" download>强制下载文本</a>
<a href="./resources/文本.txt" download="指定下载文件名.mp4">强制下载文本</a>
指定文件名后缀:
使用download属性，指定target="_blank"无效，仍在当前页面下载
跳转到锚点
锚点: 网页中的一个标记点
方式:
1.a元素name属性
2.元素id属性
<body>
<!-- 使用name属性作为锚点跳转，必须是a标签作为锚点 -->
<a href="#dog">小狗</a>
<!-- 使用id属性作为锚点跳转 -->
<a href="#view">风景</a>
<!-- 如果匹配到多个锚点，只跳转到第一个锚点 -->
<a href="#move-pic">动图</a>
<br>
<br>
<br>
<a name="dog"></a>
<h2>小狗</h2>
<img src="test_path/小狗图片.jpg" alt="">
<h2 id="view">风景</h2>
<img src="test_path/a/风景.jpg" alt="">
<h2 id="move-pic">动图</h2>
<img src="resources/动图.gif" alt="">
<h2 id="move-pic">动图二</h2>
<img src="resources/动图.gif" alt="">
<div style="height: 1000px;"></div>
</body>
<a name="dog"></a>: a标签name属性作为锚点，定位不是很准确。由于a标签有自身的样式占据空间，因此定位不是很准确，如下动图。
id="view": id属性作为锚点，定位更准确。h5最新最新标准推荐使用id作为锚点。
小狗使用id作为锚点，风景使用a标签的name作为锚点，id定位更准确:
注意点:
1.具有href属性为a元素为超链接，具有name属性的a元素是锚点，具有id属性的元素是锚点，也包括a标签。
2.id属性区分大小写，id属性值不能以数字开头。
锚点回到顶部/a标签刷新页面
<body>
<div>这是页面顶部</div>
<div>这是页面顶部</div>
<div>这是页面顶部</div>
<div style="height: 1000px;"></div>
<a href="#">回到顶部</a>
<a href="">刷新页面</a>
</body>
其他页面跳转到锚点
<!-- 跳转到其他页面锚点 -->
<a href="./19_超链接_跳转锚点.html#move-pic">跳转到其他页面锚点</a>
点击a标签执行js脚本
<a href="javascript:alert(555);">点击弹窗</a>
a标签唤起指定应用
<a href="tel:12345">唤起打电话</a>
<a href="mailto:12345@qq.com">唤起邮件</a>
<a href="sms:12345">唤起短信</a>
超文本真正含义
超文本: 是一种组织信息的方式，通过超链接将不同空间的文字，图片等各种信息组织在一起，能从当前阅读内容，跳转到超链接所指向的内容。
这里的内容可以是页面，文件，锚点，应用。
列表
ol有序列表: order list
ul无序列表: unorder list
dl自定义列表: definition list
li列表项: list item
dl中dt: 自定义标题: definition title
dl中dd: 自定义描述: definition description
<h2>有序列表</h2>
<ol>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
</ol>
<h2>无序列表</h2>
<ul>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
</ul>
<h2>自定义列表</h2>
<dl>
<dt>标题1</dt>
<dd>标题1描述1</dd>
<dd>标题1描述2</dd>
<dt>标题2</dt>
<dd>标题2描述1</dd>
</dl>
有序列表ol
概念: 有序或侧重顺序的列表
<ol>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
</ol>
无序列表ul
概念: 无序或不侧重顺序的列表
<ul>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
</ul>
<ul>
<li>item1
<div>内容</div>
</li>
</ul>
当鼠标移动到li任意元素上时，就会选中li
列表的嵌套
概念: 一个列表项的内容可以嵌套其他结构完整的列表
<ul>
<li>
上海
<ul>
<li>浦东</li>
<li>徐汇
<ul>
<li>美罗城</li>
<li>恒隆广场
<dl>
<dt>美食</dt>
<dd>烤鸭</dd>
<dd>绿茶</dd>
<dt>乐园</dt>
<dd>水族馆</dd>
</dl>
</li>
<li>徐家汇公园</li>
</ul>
</li>
</ul>
</li>
<li>列表项目</li>
<li>列表项目</li>
</ul>
注意:
li要写在ul或dl中，dl中也能写li，但不是不推荐。
li中嵌套其他列表时要写ul或者ol或者dl，不能只写li。
自定义列表dl
概念: 一个包含术语标题以及术语描述的列表。
<dl>
<dt>标题1</dt>
<dd>标题1描述1</dd>
<dd>标题1描述2</dd>
<dt>标题2</dt>
<dd>标题2描述1</dd>
</dl>
表格
表格结构由表格标题、表格头部、表格主体、表格脚注(可不写)组成。
涉及到的标签:
caption: 表格标题 caption
thead: 表格头部 table head
tbody: 表格主体 table body
tfoot: 表格脚注 table footer
tr: 表格行 table row
th: 表格表头 table header 表格头部中使用
td: 表格单元格 table data 表格主体、表哥脚注中使用
<!-- 表格 -->
<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>19</td>
<td>汉</td>
<td>共青团员</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>20</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>合计4</td>
</tr>
</tfoot>
</table>
表格常用属性
<table>常用属性
<table border="3" width="500" height="300" cellspacing="1" align="center">
border: 设置表格边框宽度，以及添加单元格的边框
当前border<1时，边框无效。
当前border>1时，单元格边框仍然保持1px，表格边框随之增加。
width: 设置表格宽度，单元格宽度会随表格宽度和单元格内容宽度自适应。
height: 设置表格主体中的行高。表格头部和表格脚注的行高不会随表格高度自适应。
cellspacing: 设置表格单元格(单元格边框)之间的间距。
。
设置宽度和高度并不等于真实的表格宽高，表格会根据单元格文字空间限制下限，超过下限则不会改变。
例如，都设置为1不生效，因为文字空间会撑开表格大小。
如下示例，表格高度设置300，由于表格头部设置400，所以表格真实高度一定是大于300的。
align: 整个表格在页面居中
<caption>常用属性
caption元素中添加border、width、height、cellspacing属性不生效，但可以使用css样式调整。
<thead>常用属性
<thead height="50" align="left" valign="bottom">
thead元素中添加border、width、cellspacing属性不生效，但height可以生效。
align: 设置表格头部对单元格文字水平居中方式，默认center水平居中。
值有: left、center、right
valign: 设置表格头部对单元格文字垂直居中方式，默认middle垂直居中。verticel align 垂直对齐
值有: top、middle、bottom
<tbody>常用属性
<tbody height="100" align="right" valign="bottom">
tbody元素中添加border、width、cellspacing属性不生效，但height可以生效。和thead常用属性一样。
align: 设置单元格文字水平居中方式。值有: left、center、right，默认left水平居中
valign: 设置单元格文字垂直居中方式，默认middle垂直居中。verticel align 垂直对齐。值有: top、middle、bottom，默认middle。
设置tbody高度不生效的原因:
因为设置<table>高度就是在设置<tbody>的高度
<tbody>的自身大概高度 = 表格<table>元素中的高度 - <thead>表格头部高度 - <tfoot>表格脚注高度
因此<tbody>高度设置值至少大于<tbody>的自身大概高度
<tfoot>常用属性
<tfoot height="100" align="right" valign="bottom">
tfoot元素中添加border、width、cellspacing属性不生效，但height可以生效。和thead常用属性一样。
align: 设置单元格文字水平居中方式。值有: left、center、right，默认left水平居中
valign: 设置单元格文字垂直居中方式，默认middle垂直居中。verticel align 垂直对齐。值有: top、middle、bottom，默认middle。
<tr>常用属性
<tr height="50" align="right" valign="bottom">
tr元素中添加border、cellspacing属性不生效，但width,height可以生效。
align: 设置单元格文字水平居中方式。值有: left、center、right，默认left水平居中
valign: 设置单元格文字垂直居中方式，默认middle垂直居中。verticel align 垂直对齐。值有: top、middle、bottom，默认middle。
height: 设置单元格高度，整行随之改变
<th>/<td>常用属性
<td width="50" height="50" align="right" valign="bottom">
th/td元素中添加border、cellspacing属性不生效，但width,height可以生效。
align: 设置单元格文字水平居中方式。值有: left、center、right，默认left水平居中
valign: 设置单元格文字垂直居中方式，默认middle垂直居中。verticel align 垂直对齐。值有: top、middle、bottom，默认middle。
width: 设置单元格宽度，整列随之改变
height: 设置单元格高度，整行随之改变
总结
总结各个元素属性:
table: width height align cellspacing border
caption: 无
thead: height align valign
tbody: height align valign
tfoot: height align valign
tr: height align valign
th/td: width height align valign rowspan colspan
注意:
1.<table>的border属性可以控制表格边框，但并不能控制单元格的边框。
2.给某个<th>/<td>设置宽度后，他们所在那一列的宽度就确定了。
3.给某个<th><td>设置高度后，他们所在那一行的高度就确定了。
单元格的跨行与跨列
colspan: 设置单元格跨列数 column span 列跨度
rowspan: 设置单元格跨行数 row span 行跨度
<table border="1" cellspacing="0">
<caption>课程表</caption>
<thead>
<tr>
<th>项目</th>
<th colspan="5">上课</th>
<th colspan="2">活动与休息</th>
</tr>
</thead>
<tbody>
<tr>
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期七</td>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>数学竞赛</td>
<td rowspan="4">休息</td>
</tr>
<tr>
<td>数学</td>
<td>语文</td>
<td>化学</td>
<td>英语</td>
<td>物理</td>
<td>数学竞赛</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>数学竞赛</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>数学竞赛</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>数学竞赛</td>
<td rowspan="2">休息</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>数学竞赛</td>
</tr>
</tbody>
</table>
常用标签补充
<!-- 换行标签: br -->
<a href="#">百度</a>
<br>
<a href="#">京东</a>
<!-- 分割线标签: hr -->
<h2>第一章</h2>
<p>小马过河的故事讲的是 xxx</p>
<hr>
<h2>第二章</h2>
<p>马白王子 xxx</p>
<!-- 按原文显示标签: pre -->
<div>
I Love You
I Love I
You
</div>
<!-- 按原文显示标签: pre -->
<pre>
I Love You
I Love I
You
</pre>
br: 换行
hr: 分割线
pre: 按原文显示(一般用于代码显示，如层级有缩进就会保留缩进)
注意:
1.不能用br增加行距，应使用css样式。
2.hr的语义是分隔，如果不想要语义，只想画一条水平线应使用css样式。
表单
表单基本结构
<!-- 新标签页打开百度搜索结果 -->
<form action="https://baidu.com/s" target="_blank" method="get">
<input type="text" name="wd">
<button>百度搜索</button>
</form>
<form action="https://search.jd.com/search">
<input type="text" name="keyword">
<button>京东搜索</button>
</form>
form标签属性:
action: 表单提交的地址，action=""时，默认提交到当前页面
target: 表单提交后打开的页面，默认为当前页面，_blank为新标签页打开
method: 表单提交方式，默认为get，get提交数据在地址栏显示，post提交数据不显示，但可以提交大文件，post提交数据会自动缓存，get提交数据不会缓存。
文本框与密码框
<input>: 单标签或双标签，<input>或<input></input>
文本输入框:
<input type="text" name="acount" value="默认值" maxlength="10">
密码输入框:
<input type="password" name="password" value="123456" maxlength="10">
name: 表单提交时，提交数据的key
value: 默认值(密码一般没有默认值)
maxlength: 最大长度
单选框与多选框
单选框:
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female" checked>女
复选框:
<input type="checkbox" name="favorite" value="1">喝茶
<input type="checkbox" name="favorite" value="2" checked>聊天
<input type="checkbox" name="favorite" value="3">跑步
name: 表单提交时，提交数据的key
value: 表单提交时，提交数据的value，当不指定value值时，默认为on，如下图单选框gender没有指定value属性值，提交gender对应的值是on。
checked: 选中
请求数据浏览器携带默认值gender=on:
复选框提交的数据格式:
隐藏域
<input type="hidden" name="hidden" value="隐藏域中的值">
name: 表单提交时，提交数据的key
value: 表单提交时，提交数据的value，当不指定value值时，默认为空字符串。
提交与重置
确认提交表单按钮的写法:
<!-- 确认按钮第一种写法 -->
<button>button确认</button>
<!-- 确认按钮第二种写法 -->
<input type="submit" value="input指定确认按钮名称为确认">
<button>: 在<form>中button有默认属性type="submit"。
<input type="submit">: 默认按钮文字为提交，可以指定value="确认"。
重置按钮:
<!-- 重置按钮第一种写法 -->
<button type="reset">button重置</button>
<!-- 重置按钮第二种写法 -->
<input type="reset" value="input指定重置按钮名称为重置">
表单中的普通按钮
<!-- 普通按钮写法 -->
<button type="button">button表单中普通按钮</button>
<input type="button" value="input的普通按钮">
普通按钮的type=button，在<form>标签中，如果不写type属性，button默认为type=submit。
文本域和下拉框
文本域:
<textarea name="other" cols="2" rows="3"></textarea>
属性:
cols: 文本域展示大概宽度，大概容纳两个字符
rows: 文本域展示大概高度，大概容纳三个字符
他们不能控制文本域内容的长度。
不能写type属性，其他属性与普通文本框一样。
默认值:
<textarea name="other" cols="2" rows="3">默认值</textarea>
下拉框:
<select name="province">
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
</select>
属性:
value: 选项的值，提交表单时province=value。
selected: 默认选中
如果option没有value属性，那么默认提交选中的option的内容。
<select name="province">
<option>北京</option>
<option>上海</option>
</select>
禁用表单控件
属性值: disabled
input、select、option、textarea、button等表单控件，禁用属性值disabled，禁用后无法操作。
置灰不可点击或选中:
label标签
<input id="nan" type="radio" name="gender" value="male">
<label for="nan">男</label>
<label>
<input type="radio" name="gender" value="female">女
</label>
表单分类标签fieldset和legend
fieldset标签: 可以为表单控件分组
legend: 分组名称
也可以对其他元素进行分组。
<form action="https://search.jd.com/search" method="get">
<fieldset>
<legend>主要信息</legend>
<label for="xingming">账户:</label>
<input id="xingming" type="text" name="acount" value="默认值" maxlength="10">
<br>
<span>密码:</span>
<input type="password" name="password" value="123456" maxlength="10">
<br>
<span>性别:</span>
<input id="nan" type="radio" name="gender" value="male">
<label for="nan">男</label>
<label>
<input type="radio" name="gender" value="female">女
</label>
</fieldset>
<fieldset>
<legend>其他信息</legend>
<span>爱好:</span>
<input type="checkbox" name="favorite" value="1">喝茶
<input type="checkbox" name="favorite" value="2" checked>聊天
<input type="checkbox" name="favorite" value="3">跑步
<br>
<span>其他:</span>
<textarea name="other" cols="2" rows="3"></textarea>
<br>
<span>籍贯</span>
<select name="province">
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
</select>
</fieldset>
<!-- 隐藏域 -->
<input type="hidden" name="hidden">
<br>
<!-- 确认按钮第一种写法 -->
<button>button确认</button>
<!-- 确认按钮第二种写法 -->
<input type="submit" value="input指定确认按钮名称为确认">
<!-- 重置按钮第一种写法 -->
<button type="reset">button重置</button>
<!-- 重置按钮第二种写法 -->
<input type="reset" value="input指定重置按钮名称为重置">
<!-- 普通按钮写法 -->
<button type="button">button表单中普通按钮</button>
<!-- 禁用表单 -->
<input type="button" disabled value="input的普通按钮">
</form>
<fieldset>
<legend>测试</legend>
<div>div元素</div>
</fieldset>
表单总结
<form>: 表单
常用属性:
action: 表单要提交的地址
target: 要跳转的新地址打开位置; 值: _self 、 _blank
method: 请求方式，值: get 、 post
<input>: 多种形式的表单控件
常用属性:
type: 表单控件类型，值: text 、 password 、 radio 、 checkbox 、 submit 、 reset 、 button 、 hidden
name: 表单控件名称，提交表单时，name=value
value: 表单控件值，根据不同type类型其含义不同
对于text/password，value为默认值
对于radio/checkbox，value为选中的值，也就是提交的数据
对于submit/reset/button，value为按钮名称
disabled: 设置表单控件不可用
maxlength: 用于输入框，设置最大可输入长度
checked: 用于单选按钮和复选框，默认选中
<textarea>: 文本域
常用属性:
name: 指定数据名称
cols: 文本域展示大概宽度，大概容纳两个字符
rows: 文本域展示大概高度，大概容纳三个字符
disabled: 设置整个文本域不可用
<select>: 下拉框
常用属性:
name: 指定数据名称
disabled: 设置整个下拉框不可用
<option>: 下拉框选项
常用属性:
value: 选项的值，提交表单时province=value。
不指定value，会把标签中的内容作为提交数据
selected: 默认选中
disabled: 设置选项不可用
<button>: 按钮
常用属性:
type: 按钮类型，值: submit(在<form>元素中默认值) 、 reset 、 button(不在<form>元素中默认值)
disabled: 设置按钮不可用
<label>: 与表单控件做关联
常用属性:
for: 与表单控件的id值相同，这样点击label标签文字，就会让与之对应的表单控件获取焦点。
<fieldset>: 表单边框
<legend>: 表单边框名称，写在fieldset标签中
框架标签<iframe>
语义: 框架(在网页中嵌入其他文件)
常用属性:
name: 框架名称 可以<a>或<form>的target属性值一样，用于填充iframe内容
width: 框架宽度
height: 框架的高度
frameborder: 边框宽度，值: 0(无边框) 、 1(有边框) ，如下图有边框
<!-- 嵌入一个网站 -->
<iframe src="https://taobao.com" width="1000" height="500" frameborder="0"></iframe>
<!-- 嵌入一个广告 -->
<iframe width="300" height="250" frameborder="0"
src="https://pos.baidu.com/mcpm?conwid=300&conhei=250&rdid=5841072&dc=3&di=u5841072&s1=3378208340&s2=2193082055&dri=0&dis=0&dai=1&ps=2207x1188&enu=encoding&exps=110277,110275,110261,110252,110011&ant=0&psi=d697f9587e2d0c27&dcb=___adblockplus_&dtm=HTML_POST&dvi=0.0&dci=-1&dpt=none&tpr=1742961707914&ti=%E7%BD%91%E6%98%93%E6%96%B0%E9%97%BB&ari=2&ver=0109&kws=%E6%96%B0%E9%97%BB%2C%E6%96%B0%E9%97%BB%E4%B8%AD%E5%BF%83%2C%E6%96%B0%E9%97%BB%E9%A2%91%E9%81%93%2C%E6%97%B6%E4%BA%8B%E6%8A%A5%E9%81%93&dps=%E6%96%B0%E9%97%BB%2C%E6%96%B0%E9%97%BB%E4%B8%AD%E5%BF%83%2C%E5%8C%85%E5%90%AB%E6%9C%89%E6%97%B6%E6%94%BF%E6%96%B0%E9%97%BB%2C%E5%9B%BD%E5%86%85%E6%96%B0%E9%97%BB%2C%E5%9B%BD%E9%99%85%E6%96%B0%E9%97%BB%2C%E7%A4%BE%E4%BC%9A%E6%96%B0%E9%97%BB%2C%E6%97%B6%E4%BA%8B%E8%AF%84%E8%AE%BA%2C%E6%96%B0%E9%97%BB%E5%9B%BE%E7%89%87%2C%E6%96%B0%E9%97%BB%E4%B8%93%E9%A2%98%2C%E6%96%B0%E9%97%BB%E8%AE%BA%E5%9D%9B%2C%E5%86%9B%E4%BA%8B%2C%E5%8E%86%E5%8F%B2%2C%E7%9A%84%E4%B8%93%E4%B8%9A&dbv=2&drs=4&pcs=1777x1008&pss=1777x11468&cfv=0&cpl=5&chi=1&cce=true&cec=UTF-8&tlm=1742961601&prot=2&rw=1008<u=https%3A%2F%2Fnews.163.com%2F<r=https%3A%2F%2Fcn.bing.com%2F&lcr=https%3A%2F%2Fcn.bing.com%2F&ecd=1&dft=0&uc=1792x1095&pis=-1x-1&sr=1792x1120&tcn=1742961708&qn=c5a44a3031ca4333&ft=1"
frameborder="0"></iframe>
<!-- 嵌入其他内容 -->
<iframe src="./resources/动图.gif" width="338" height="338" frameborder="0"></iframe>
<iframe>标签的name和<a>标签或<form>标签的target属性值一样，用于填充iframe内容
<!-- iframe标签和a标签的target属性动态填充iframe内容 -->
<a href="https://taobao.com" target="showframe">加载淘宝</a>
<a href="https://news.163.com" target="showframe">加载网易</a>
<!-- iframe标签和form标签的target属性动态填充iframe内容 -->
<form action="https://so.toutiao.com/search" target="showframe">
<input type="text" name="keyword">
<input type="submit" value="头条搜索">
</form>
<iframe name="showframe" frameborder="0" width="600" height="400"></iframe>
<a>或<form>具有跳转请求功能，配合<iframe>的name属性值，可以把<a>或<form>响应结果填充到<iframe>中。
用法:
<a>: href="url" target="iframe的name属性值"
<form>: action="url" target="iframe的name属性值"
<iframe>: name="name属性值"
HTML实体符号
<!-- 空格字符 -->
<div>文字 中间有空格</div>
<!-- 空格字符编号 -->
<div>文字   中间有空格</div>
<!-- 大于号小于号 -->
<div><h1>元素左边是小于号右边是大于号</div>
<!-- &标识&符号 -->
<div>&nbsp;是空格符号</div>
<!-- &是&符号 -->
<div>&amp;是&符 表示 and</div>
<div>&yen;是¥符 表示 元</div>
<div>&copy;是©符 表示 版权所有</div>
<div>&times;是×符 表示 乘法 例如: 2 × 2</div>
<div>&divide;是÷符 表示 除法 例如: 2 ÷ 2</div>
常用实体符号:
: 空格字符 也可以用编号:  ，不推荐用编号表示字符
<: 小于号<
>: 大于号>
&: &符号
¥: 元符号
©: 版权所有符号
×: 乘号
÷: 除号
实体符号查询: MDN术语表
HTML全局属性
id: 给元素指定唯一标记，页面中id不能重复。
作用: 可以让label标签与表单控件做关联；也可以用css中选择器选择元素。
注意:
不能在以下标签中使用: <html>、<head>、<meta>、<style>、<title> 、<script>
class: 给元素指定类型，每个元素中class中值可以有多个。
style: 给元素指定样式，值: css样式代码。
dir: 设置文本方向，值: ltr(从左到右)、rtl(从右到左)
注意:
dir在标签中，作用于渲染文字方向
dir在
不能在以下标签中使用:
<html>、<head>、<meta>、<style>、<title> 、<script>
<bdo dir="rtl">
<span>你是年少的欢喜</span>
</bdo>
<div dir="rtl">
<span>你是年少的欢喜</span>
</div>
在div中指定dir="rtl"，那么div中内容就会靠右边对齐。
title: 设置元素的文字提示，一般超链接和图片用的比较多
<div title="英雄联盟">LOL</div>
<a href="" title="去京东">京东</a>
lang: 给元素指定语言
注意:
不能在以下标签中使用: <head>、<meta>、<style>、<title> 、<script>
meta元信息
1.配置字符编码
<!-- 配置字符编码 -->
<meta charset="UTF-8">
2.针对IE浏览器的兼容性设置
<!-- 针对IE浏览器的兼容性设置，如果用户使用IE浏览器，则强制使用edge浏览器模式进行渲染 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
3.针对移动设备的优化设置
<!-- 移动设备优先，针对移动设备进行优化，让页面以宽度为优先，以适配移动设备 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
作用之一: 移动端字体适应
4.配置网页关键字
<!-- 网页关键字 -->
<meta name="keywords" content="电商,购物,手机">
content: 关键字内容，多个关键字用逗号隔开
作用: 告诉搜索引擎，哪些关键字是网页的关键字，可以提高网页的排名
京东网页配置的关键字:
5.配置网页描述
<!-- 网页描述 -->
<meta name="description" content="学习html页面">
content: 网页描述内容，80字以内的网页描述
作用: 告诉搜索引擎，网页的内容是什么，可以提高网页的排名
6.针对搜索引擎爬虫配置项
<!-- 搜索引擎爬虫 -->
<meta name="robots" content="all">
content: 搜索引擎爬虫配置项
值有:
index: 允许搜索引擎爬取
noindex: 禁止搜索引擎爬取
follow: 允许搜索爬虫跟随链接爬取
nofollow: 要求搜索爬虫不能跟随此页面上的链接
all: 与index、follow等价
none: 与noindex、nofollow等价
noarchive: 要求搜索引擎不缓存页面内容
nocache: noarchive的别名
7.配置网页作者
<meta name="author" content="张三">
8.配置网页版权
<meta name="copyright" content="张三">
9.配置网页生成工具
<meta name="generator" content="Visual Studio Code">
10.配置网页自动刷新
<!-- 3s后自动跳转到百度 -->
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
<!-- 3s后自动刷新 -->
<meta http-equiv="refresh" content="3">
content: 刷新时间;url=跳转地址
浙公网安备 33010602011771号