一、基础概念
1、浏览器相关知识
这五个浏览器市场份额都非常大，且都有自己的内核。
什么是内核：
内核是浏览器的核心，用于处理浏览器所得到的各种资源。
例如，服务器发送图片、视频、音频的资源，浏览器就需要使用内核来进行处理这些资源。内核处理完这些资源之后，我们才能看到页面。这五大浏览器都有自己的内核。
五大浏览器，四大内核。不在这五个之中的统称为其他浏览器。其他浏览器就是在上述的内核的基础上，加上了一些精美的UI界面，实用的小功能等等。
2、网页相关概念
一个网页由那几部分组成：
结构：HTML用于搭建网页的结构。
表现：CSS让结构都具有表现力
行为：JavaScript 让网页由交互的效果。
3、HTML是什么
全称：HyperText Markup Language
译为：超文本标记语言
超文本：可以理解为：暂时理解为 ’超级的文本‘，和普通文本比，内容更丰富。
标记：文本变成超文本，就需要用到各种标记符号
语言：每一个标记的写法、读音、使用规则，构成标记语言。
4、HTML发展史
二、HTML基础
1、 html标签：
标签又称元素，是html的基本组成单位。
标签名不区分大小写！但是推荐使用小写。
标签有单标签和双标签，单标签比较少！
标签也可以进行嵌套！
2、HTML属性：
1）用于给标签提供附加信息。
2）可以写在：其实其实标签 或 单标签中，形式如下：
3）有些特殊属性，没有属性名，只有属性值。
例如：<imput disabled>
4）注意点：
1、不同的标签，有不同的属性，也有一些通用的属性在任何标签中都能写。
2、属性名、属性值不能乱写。都是w3c规定好的
3、属性名、属性值，都不区分大小写，但推荐小写。
4、双引号，也可以写成单引号，甚至不写都行，但还是推荐写双引号
5、标签中不要出现同名属性，否则后写的会失效，
3、HTML基本结构：
1、在网页中，点击鼠标右键，选择检查，可以查看某段具体代码
2、检查 和 查看网页源代码 的区别：
查看网页源代码看到的是：程序员编写的源代码。
检查看到的是：经过浏览器处理后的源代码
备注：日常开发中，检查用的最多
3、网页的基本结构如下：
1、想要呈现在网页中的内容写在body标签中
2、head标签中的内容不会出现在网页中
3、head标签中的title标签可以指定网页的标题。
4、图示：
4、HTML注释
1、特点：注释的内容会被浏览器所忽略，不会呈现到页面中，但源代码中依然可见
2、作用：对代码进行解释和说明
3、写法：
<!-- 下面的文字只能滚动一次 -->
<marquee loop="1" > hello world! </marquee>
4、注释不可以嵌套
5、HTML文档声明
1、作用：告诉浏览器当前网页的版本
2、写法：
旧写法：要依网页所用的HTML版本而定，写法有很多，具体写法请参考：W3C官网-文档声明。
新写法：
<!DOCTYPE html> 生命这个就代表这个代码是h5版本的。
3、注意：文档声明，必须在网页的第一行，且在html标签的外侧。
6、HTML字符编码
1、计算机对数据的操作：
存储时，对数据进行：编码
读取时，对数据进行：解码
2、编码、解码，会遵循一定的规范 -- 字符集
3、字符集有很多，常见的有：
ASCII：大写字母、小写字母、数字、一些符号，共计128个。
ISO 8859-1:在ASCII基础上，扩充了一些希腊字符等，共计是256个。
GB2312:继续扩充，收录了6773个常用汉字，682个字符
GBK：收录了的汉字和符号达到20000+，支持繁体中文。
UTF-8:包含世界上所有的语言，所有文字与符号。-- 很常用
4、使用原则：
原则1：存储时务必使用合适的字符编码，否则无法存储，数据会丢失！
原则2：存储时采用哪种方式编码，读取时就采用哪种方式解码。否则数据会错乱，乱码。
5、总结：
平时写代码时，统一采用UTF-8编码 最稳妥。
为了让浏览器在渲染html文件时，不犯错误，可以通过meta标签配合 charset属性指定字符集：
<head>
<meta charset="UTF-8"/>
</head>
7、HTML设置语言
长按 shift + 网页左上角刷新按钮，可以强刷页面。
1、主要作用：让浏览器显示对应的翻译提示，有利于搜索引擎优化。
2、具体写法：
<html lang"zh-CN">
3、扩展知识：lang属性的编写规则
第一种写法(语言-国家/地区)：
zh-CN：中文-中国大陆（简体中文）
zh-TW：中文-中国台湾（繁体中文）
zh：中文
en-U：英语-美国
en-GB：英语-英国
第二种写法（语言-具体种类）以不推荐使用：
zh-Hans：中文-简体
zh-Hant：中文-繁体
w3School上的说明：语言代码参考手册
w3c官网上的说明：略
8、HTML标准结构
在vscode中，输入 ! 再回车可以直接生成标准结构：
<!DOCTYPE html> <!-- 文档声明，代表这是h5页面 -->
<html lang="zh-CN"> <!-- 设置语言为中文，可以在设置红调整该选项 -->
<head>
<meta charset="UTF-8"> <!-- 设置字符编码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 暂未用到，跟移动端网页有关 -->
<title>这是一个标题</title> <!-- 标题，在网页上面显示的网页名称 -->
</head>
<body>
<h1> hello world！ </h1>
</body>
</html>9、超文本的真正含义
是一种组织信息的方式，通过超链接将不同空间的文字、图片、等各种信息组织在一起，能从当前阅读的内容，跳转到超链接所指向的内容。
内容是指：页面、文件、锚点、应用等。
10、开发者文档学习网站
推荐 MDN：https://developer.mozilla.org/zh-CN/
可以查看相关html标签！
三、HTML常用标签
1、排版标签
h1 - h6 标题标签：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p> 段落标签
<p>我是一个段落！</p>
<p>我是一个段落！</p>
<p>我是一个段落！</p>
<div> 块标签，没有任何含义，用于整体布局（生活中的包装袋）。
1）h1 最好写一个
2）h1 - h6 不能互相嵌套，例如 h1 标签中最好不要写 h2 标签了。
3）p标签很特殊，它里面不能有：h1 - h6 、 p 、 div标签。
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>排版标签</title>
</head>
<body>
<h1>把个人信息安全"安全提"筑牢</h1>
<p> 2022-06-21 07:34 · 1347条评论</p>
<div>
<p>置身移动互联网时代，人们在享受只能设备带来的便利的同时，也在一些场景中面临个人信息泄露风险，随着时间推移，这样的风险日益呈现出新的表现形式。</p>
<p>一些app生成看视频，玩游戏甚至走路都能赚钱，但用户想提现却难上加难，还容易泄露个人信息；新型不法软件图标透明，没有名称，在手机屏幕上十分隐蔽，不仅不停推送广告，还会收集并转卖用户隐私信息；个人信息和隐私保护话题引发关注，正说明其涉及群众切身利益，问题不容小觑</p>
</div>
</body>
</html>
2、语义化标签
概念：用特定的标签，去表达特定的含义。
原则：标签的默认效果不重要（后期可以通过CSS随便控制效果），语义最重要！
举例：对于h1标签，效果是文字很大，语义是网页主要内容。
优势：
1）代码结构清晰可读性强。
2）有利于SEO（搜索引擎优化）
3）方便设备解析（如屏幕阅读器，盲人阅读）
意思就是说，h1标签的实现效果就加粗文字，但其实文字的粗细程度并不是h1标签的主要功能，而是说，h1 代表的是一个网页最重要的信息，所以它的语义比较重要。当在网页中使用 h1 就代表它是这个网页的标题之类的最显著的信息。
3、块级元素与行内元素
1）块级元素：独占一行（排版标签都是块级元素）
2）行内元素：不独占一行（目前只学了input ，稍后会学习更多）
3）一些特定的规则： h1 - h6 不能互相嵌套 ，p中不要写块级元素，以后还会有更多特殊的规则，但不会很多。
4）备注说明：
marquee元素设计的初衷是：让文字有动画效果，但如今我们可以通过css来实现了，而且还可以实现的更加炫酷，所以marquee 标签已经过时了，不推荐使用，我们只是在开篇的时候，用他做了一个引子而已，在后续的学习过程中，这些已经废弃的标签，我们直接跳过。
4、文本标签
1）用于包裹：词汇，短语等。
2）通常写在排版标签里面。例如 h1 - h6 ，p，div
3）排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）。
4）文本标签通常都是行内元素。
常用的：
| 标签名 | 标签语义 | 单/双 标签 |
| em | 要着重阅读的内容 | 双 |
| strong | 十分重要的内容（语气比em要强） | 双 |
| span | 没有语义，用于包裹短语的通用容器 | 双 |
em标签的效果是可以让文本更突出，文字变成斜体，但其实这个标签的功能并不是最重要的，重要是的如果你的文本中有这种标签，就代表这个非常重要的部分，重要的是这个语义！
strong标签 也是突出十分重要的内容，但其实语气比em要更强一点。但其实日常使用过程中，只要表达的东西是重要的em 跟 strong 都行。字体会加粗。
span其实没有任何的语义，就是起到一个包裹的作用，可以理解为 div是大包装袋，span是小包装袋。用排版标签时使用 div ，用文本标签时使用 span。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>常用文本标签</title>
<style>
span{
color: red;
}
</style>
</head>
<body>
<p>预防电信诈骗，请安装：<em>国家反炸中心app。</em></p>
<p>当我们出门的时候，一定要<strong>关好门窗！</strong></p>
<p>前端三个框架为：<span>Angular,React,Vue。</span></p>
</body>
</html> 
不常用的：
| 标签名 | 标签语义 | 单/双 标签 |
| cite | 作品标题（书籍、歌曲、电影、电视节目、绘画、雕塑等） | 双 |
| dfn | 特殊术语，或专属名词 | 双 |
| del 与 ins | 删除的文本 与 插入的文本 | 双 |
| sub 与 sup | 下标文字 与 上标文字 | 双 |
| code | 一段代码 | 双 |
| kbd | 键盘文本，便是文本是通过键盘输入的，经常用在与计算机相关的手册中 | 双 |
| abbr | 缩写，最好配合上title属性 | 双 |
| bdo | 更改文本方向，要配合dir属性，可选值：ltr（默认值）、rtl | 双 |
| var | 标记变量，可以与code标签一起使用 | 双 |
| small | 附属细则，例如：包括版权、法律文本。--很少使用 | 双 |
| b | 摘要中的关键字、评论中的产品名称 -- 很少使用 | 双 |
| i | 本意是：人物的思想活动、所说的话等等。 现在多用于：呈现字体图标（后面要讲的内容） | 双 |
| u | 与正常内容有反差文本，例如：错的单词、不合适的描述等。--很少使用 | 双 |
| q | 短引用 -- 很少使用 | 双 |
| blockquote | 长引用 -- 很少使用 | 双 |
| address | 地址信息 | 双 |
后面两个是块元素，前面的都是行内元素！
备注：
1、这些不常用的文本标签，编码时不用过于纠结（酌情而定，不用也没毛病）。
2、blockquote 与 address 是块级元素，其他的文本标签，都是行内元素。3、有些语义感不强的标签，我们很少使用，例如：small、b、u、q、blockquote
4、HTML标签太多了！记住那些：重要的、语义感强的标签即可：例如：
h1 - h6 ，p，div，em，strong，span
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>不常用的文本标签</title>
</head>
<body>
<p>这首<cite>《光辉岁月》</cite>，非常的好听！</p>
<p><dfn>耗子尾汁</dfn>，是一个网络流行语，意思同<dfn>好自为之</dfn>。</p>
<p>商品原价：<del>199</del>,显示秒杀：<ins>99</ins>!</p>
<p>水的化学方程式是：H<sub>2</sub>O,8的三次方是这么写的：8<sup>3</sup></p>
<p>等过了一段我们学习了JS，你就会发现这段代码很有意思：<code>alert(1)</code></p>
<p>手机突然提示，<samp>支付宝到账100万元！</samp></p>
<p>保存的快捷键是：<kbd>ctrl + s</kbd></p>
<p><abbr title="英雄联盟">LOL</abbr>这个游戏非常好玩！</p>
<p>你是年少的欢喜，这句话反过来念就是：<bdo dir="rtl">你是年少的欢喜</bdo></p>
<p>等过一段我们学习了JS，我们就知道要这样定义变量了：<code>let <var>a</var> = 1</code></p>
<p><small>本网站所有资料、图表仅供参考，涉及投资项目所造成的盈亏与本网站无关。</small></p>
<p>我也买过<b>罗技GPW二代</b>这个鼠标，确实好用！</p>
<p>猪头声嘶力竭的喊着：<i>“燕子，没有你我怎么活啊！”</i></p>
<p>张三把“你好”的英文写成了：<u>heelo</u>，这是不对的！</p>
<p>屈原曾经说过：<q>路漫漫其修远兮，吾将上下而求索。</q></p>
<p>有一首歌，歌词是这样的：<blockquote>后来，我总算学会了如何去爱，可惜你早已远去消失在人海，后来终于在眼泪中明白，有些人一旦错过就不在。</blockquote></p>
<p>我们学校的地址是：<address>北京科技园</address></p>
</body>
</html>
5、图片标签
1）基本使用：
| 标签名 | 标签语义 | 常用属性 | 单/双 标签 |
| img | 图片 | src:图片路径（又称：图片地址），图片的具体位置 alt:图片描述 width:图片宽度，单位是像素，例如：200px 或 200 height:图片高度，单位是像素，例如：200px 或 200 | 单 |
总结：
1、像素 px 是一种单位，学到css时，我们会详细讲解
2、尽量不同时修改图片的宽和高，可能会造成比例失调。
3、暂且认为img是行内元素（学到css时，会认识到一个新的元素分类，目前咱们只知道：块、行内）。
3、alt属性的作用：
- 搜索引擎通过alt属性，得知图片的内容。 -- 最主要的作用
- 当图片无法展示的时候，有些浏览器会呈现alt属性的值。
- 盲人阅读器会朗读alt属性的值。
2) 路径的分类：
1 相对路径：以当前位置作为参考点，去建立路径。
| 已有结构 | 符号 | 含义 | 举例 |
 | ./ | 同级 | 引入 灰太狼.jpeg ： <img src="./灰太狼.jpeg" alt="灰太狼"> |
| / | 下一级 | 引入喜羊羊： <img src="./a/喜羊羊.jpeg" alt="喜羊羊"> | |
| ../ | 上一级 | 引入 aaa.jpg ： <img src="../aaa.jpg" alt="一个头像"> |
注意点：
- 相对路径的 ./ 可以省略不写
- 相对路径依赖的是当前位置，后期若调整了文件位置，那么文件中的路径也要修改。
2 绝对路径 : 以根位置作为参考点，去建立路径。
本地绝对路径：E:a/b/c/奥特曼.jpg (很少使用)
网络绝对路径：http://www.aaa.com/images/index_new/aaa.png 。
注意点：
使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用
使用网络绝对路径，确实方便，但要注意：若服务器开启了防盗链，会造成图片引入失败。
3 常见的图片格式
1、jpg 格式
概述：扩展名为 .jpg 或 .jpeg ，是一种有损的压缩格式（把肉眼不容易观察出来的细节丢弃了）。
主要特点：支持的颜色丰富，占用空间较小，不支持透明背景、不支持动态图。
使用场景：对图片细节没有极高要求的场景，例如：网站的产品宣传图等。 -- 该格式网页中很常见。
2、png 格式：
概述：扩展名为 .png ,是一种无损的压缩格式，能够更高质量的保存图片
主要特点：支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。
使用场景：1、想让图片有透明背景 ；2、想更高质量的呈现图片 ；例如：公司logo图、重要配图等。
3、bmp 格式：
概述：扩展名为 .bmp ，不进行压缩的一种格式，在最大程度上保留图片更多细节。
主要特点：支持的颜色丰富、保留的细节更多，占用空间极大、不支持透明背景、不支持动态图。
使用场景：对图片细节要求极高的场景，例如：一些大型游戏公司中的图片。（网页中很少使用）4、gif 格式：
概述：扩展名为 .gif ，仅支持256中颜色，色彩呈现不是很完整。
主要特点：支持的颜色较少、支持简单透明背景、支持动态图。
使用场景：网页中的动态图片。
5、webapp格式：概述：扩展名为 .webp，谷歌推出的一种格式，专门用来在网页中呈现图片。
主要特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。
使用场景：网页中的各种图片。
6、base64格式：
1、本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。
2、原理：把图片进行base64编码，形成一串文本。
3、如何生成：靠一些工具或网站。
4、如何使用：直接作为img标签的src属性的值即可，并且不受文件位置的影响。
5、使用场景：一些较小的图片，或者需要网页一起加载的图片。
图片格式非常多，上面只是一些常见的！
6、超链接：
主要作用：从当前页面进行跳转。
| 标签名 | 标签语义 | 常用属性 | 单\双 标签 |
| a | 超链接 | href：要跳转的具体位置 target：跳转时如何打开页面，常用值如下： _self：在本页签中打开 _blank：在新页签中打开 | 双 |
1) 跳转到页面
<!-- 在本页面中打开-->
<a href="https://www.baidu.com" target="_self">本页面打开百度！</a>
<!-- 在其他页面打开 -->
<a href="https://www.baidu.com" target="_blank">新页面打开百度！</a>注意点：
1、代码中的多个空格，多个回车，都会被浏览器解析成一个空格！
2、虽然a是行内元素，但a元素可以包括除它自身外的任何元素！
想展示多个回车或空格，后面会说！
2）跳转到文件
<!-- 浏览器能直接打开的文件-->
<a href="./resource/灰太狼.jpeg" target="_blank">一个图片</a>
<a href="./resource/git动图.gif" target="_blank">一个动图</a>
<a href="./resource/pdf文件.pdf" target="_blank">一个pdf</a>
<!-- 浏览器不能打开的文件，就会自动触发下载-->
<a href="./resource/压缩文件.zip"></a>
<!-- 强制触发下载-->
<a href="./resource/pdf文件.pdf" download="一个pdf.pdf" >下载pdf文件</a>注意：
1、若浏览器无法打开文件，则会引导用户下载。
2、若想强制触发下载，请使用 download 属性，属性值即为下载文件的名称。
3）跳转锚点
什么是描点？-- 网页中的一个标记点。
具体使用方式：
第一步：设置锚点
第一种方式，a标签配合name属性！
<a name="htl"></a>
第二种方式，其他标签配合id属性
<p id="dt">一个动图</p>
注意：
1、具有href 属性的 a 标签是超链接，具有 name属性 的 a 标签是锚点！
2、name 和 id 都是区分大小写的，且 id 最好别是数字开头。
第二步：跳转锚点
跳转到 htl 、dt 对应的锚点。
<a href="#htl">看灰太狼</a><a href="#dt">看一个动图</a>
跳转到本页顶部<a href="#">回到顶部</a>
跳转到其他页面锚点
<a href="./图片标签.html#tp">看其他页面图片</a>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跳转锚点</title>
</head>
<body>
<a href="#htl">看灰太狼</a>
<a href="#dt">看一个动图</a>
<p>喜羊羊图片</p>
<img src="./path_test/a/喜羊羊.jpeg" alt="喜羊羊">
<p>一个头像图片</p>
<img src="./aaa.jpg" alt="一个头像">
<a name="htl"></a>
<p>灰太狼图片</p>
<img src="./path_test/灰太狼.jpeg" alt="灰太狼">
<p id="dt">一个动图</p>
<img src="./resource/git动图.gif">
<p>全部都看完了！</p>
<a href="#">回到顶部</a>
<a href="">刷新页面</a>
<a href="./图片标签.html#tp">看其他页面图片</a>
<a href="javascript:alert(666);">点我弹窗</a>
</body>
</html> 4）唤起指定应用
通过a标签，可以唤起设备应用程序。
<a href="tel:10086">电话联系</a>
<a href="mailto:10086@qq.com">邮件联系</a>
<a href="sms:10086">短信联系</a>7、列表：
1）有序列表：
概念：有顺序或侧重顺序的列表。
<!-- 有序列表-->
<h2>把大象放入冰箱需要几步？</h2>
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
<!-- 列表嵌套超链接-->
<li>
<a href="https://www.baidu.com">去百度</a>
</li>
</ol> 2）无序列表
概念：无顺序或不侧重顺序的列表。
<!-- 无序列表-->
<h2>我想去的几个城市</h2>
<ul>
<li>成都</li>
<!-- 列表进行嵌套 -->
<li>
<span>上海</span>
<ul>
<li>外滩</li>
<li>
<span>东方明珠</span>
<ul>
<li>xxx</li>
<li>xxx</li>
</ul>
</li>
<li>迪士尼乐园</li>
</ul>
</li>
<li>北京</li>
<li>广州</li>
</ul> 3）列表嵌套
概念：列表中的某项内容，有包含一个列表（注意：嵌套时，请务必把结构写完整）
注意：li标签最好写在 ul 或 ol中，不要单独使用。
4）自定义列表
概念：所谓自定义列表，就是一个包含 术语名称 以及 术语描述 的列表。
一个dl 就是一个自定义列表，一个dt 就是一个术语名称，一个dd就是术语描述（可以有多个）。
<!-- 自定义列表 -->
<h2>如果更好学习</h2>
<dl>
<dt>做好笔记</dt>
<dd>笔记是我们以后复习的一个抓手</dd>
<dd>笔记可以是电子版，也可以是纸质版</dd>
<dt>多加练习</dt>
<dd>只有敲出来的代码，才是自己的</dd>
<dt>别怕出错</dt>
<dd>错很正常，改正后并记住，就是经验</dd>
</dl><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表</title>
</head>
<body>
<!-- 有序列表-->
<h2>把大象放入冰箱需要几步？</h2>
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
<!-- 列表嵌套超链接-->
<li>
<a href="https://www.baidu.com">去百度</a>
</li>
</ol>
<!-- 无序列表-->
<h2>我想去的几个城市</h2>
<ul>
<li>成都</li>
<!-- 列表进行嵌套 -->
<li>
<span>上海</span>
<ul>
<li>外滩</li>
<li>
<span>东方明珠</span>
<ul>
<li>xxx</li>
<li>xxx</li>
</ul>
</li>
<li>迪士尼乐园</li>
</ul>
</li>
<li>北京</li>
<li>广州</li>
</ul>
<!-- 自定义列表 -->
<h2>如果更好学习</h2>
<dl>
<dt>做好笔记</dt>
<dd>笔记是我们以后复习的一个抓手</dd>
<dd>笔记可以是电子版，也可以是纸质版</dd>
<dt>多加练习</dt>
<dd>只有敲出来的代码，才是自己的</dd>
<dt>别怕出错</dt>
<dd>错很正常，改正后并记住，就是经验</dd>
</dl>
</body>
</html>8、表格
1）基本结构：
一个完整的表格由：表格标题、表格头部、表格主体、表格脚注。四部分组成。
2）表格涉及的标签：
table：表格
caption：表格标题
thead：表格头部
tbody：表格主体
tfoot：表格注脚
tr：每一行
th、td：每一个单元格（备注：表格头部中用th,表格主体、表格脚注中用：td）
3）具体代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
</head>
<body>
<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>
<tr>
<td>王五</td>
<td>男</td>
<td>19</td>
<td>回族</td>
<td>党员</td>
</tr>
<tr>
<td>赵六</td>
<td>女</td>
<td>21</td>
<td>壮族</td>
<td>团员</td>
</tr>
</tbody>
<!-- 表格属性-->
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计：4人</td>
</tr>
</tfoot>
</table>
</body>
</html>4）常用属性
| 标签名 | 标签语义 | 常用属性 | 单\双 标签 |
| table | 表格 | width：设置表格宽度 height：设置表格最小高度，表格最终高度可能比设置的值大。 border：色湖之表格边框宽度。 cellspacing：设置单元格之间的间距。 | 双 |
| thead | 表格头部 | height：设置表格头部高度 align：设置单元格的水平对齐方式，可选值如下： 1、left:左对齐 2、center：中间对齐 3、right：右对齐 valign:设置单元格的垂直对齐方式，可选值如下： 1、top：顶部对齐 2、middle:中间对齐 3、bottom：底部对齐 | 双 |
| tbody | 表格主体 | 常用属性与thead相同。 | 双 |
| tr | 行 | 常用属性与thead相同 | 双 |
| tfoot | 表格脚注 | 常用属性与thead相同 | 双 |
| td | 普通单元格 | width：设置单元格的宽度，同列所有单元格全都受影响 heigth:设置单元格的高度，同行所有单元格全都受影响。 align:设置单元格的水平对齐方式 valign:设置单元格的垂直对齐方式 rowspan:指定要跨的行数 coslspan：指定要跨的列数。 | 双 |
| th | 表头单元格 | 常用属性与td相同 | 双 |
注意点：
1、<table>元素的border属性可以控制表格边框，单border值的大小，并不控制单元格边框的宽度。只能控制表格最外侧边框的宽度。这个问题后期要靠CSS解决。
2、给某个th 或 td 设置宽度之后，他们所在的那一列的宽度就确定了。
3、给某人 th 或td 设置了高度之后，他们所在那一行的高度就确定了。
5）跨行跨列
rowspan：指定要跨的行数。
colspan：指定要跨的列数。
课程表效果：
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格-跨行与跨列</title>
</head>
<body>
<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>
</body>
</html>
9、常用标签补充
| 标签名 | 标签含义 | 单/双 标签 |
| br | 换行 | 单 |
| hr | 分割 | 单 |
| pre | 按原文显示（一般用于在页面中嵌入一大段代码） | 双 |
注意点：
1 不要使用 br 来增加文本之间的行间隔，后面使用css 来实现。
2 hr 的语义使分割，如果不想要语义，只想画一条水平线，那么应当使用css完成。
10、表单
1）基本结构：
| 标签名 | 标签语义 | 常用属性 | 单/双 标签 |
| form | 表单 | action:用于指定表单的提交地址（需要与后端人员沟通后确定）。 target：用于控制表单提交后，如何打开网页，常用值如下： _self：在本窗口打开。 _blank：在新窗口打开。 method：用于控制表单的提交方式，暂时只需了解，在后面的ajax中会详细讲。 | 双 |
| input | 输入框 | type：设置输入框的类型，目前用到的值使text，表示普通文本。 name：用于指定提交数据的名字，（需要与后端人员沟通后确定） | 单 |
| button | 按钮 | 双 |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单-基本概念</title>
</head>
<body>
<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<button>搜索</button>
</form>
<hr>
<form action="https://search.jd.com/search" target="_blank" method="get">
<input type="text" name="keyword">
<button>去京东搜索</button>
</form>
</body>
</html>2）表单的常用控件
文本输入框：
<input type="text" name="account" value="zhangsan" maxlength="10"><br>
常用属性如下：
name属性：数据的名称。
value属性：输入框的默认输入值。
maxlength属性：输入框最大可输入长度。
密码输入框：
<input type="password" name="pwd" maxlength="6">
常用属性如下：
name：数据的名称
value属性：输入框的默认输入值（密码输入框一般不用，没有意义）
maxlength:输入框最大可输入长度。
单选框：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="famale" checked>女
name属性:数据的名称，注意：想要单选效果，多个radio的name属性值要保持一致
value属性：提交时的参数名。
checked属性：默认选中的选项
复选框：<input type="checkbox" name="hobby" value="smoke" checked>抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm" checked>烫头
name属性:数据的名称，多个checkbox的name属性值要保持一致
value属性：提交时的参数名。
checked属性：默认选中的选项
隐藏域：
<input type="hidden" name="tag" value="123">
name属性：指定数据的名称。
value属性：指定的是真正提交的数据。
提交按钮：<button>确认</button>
<input type="submit" value="确认">
button标签type属性的默认值是submit，不要指定name属性。
input 标签编写的按钮，使用value属性指定按钮文字。
重置按钮：<button type="reset">重置</button>
<input type="reset" value="重置">
与提交按钮只有 type 类型不一致，其他一样。
普通按钮：<button type="button">检测账户是否被注册</button>
普通按钮的type 值为 button ，若不写type属性时，默认是submit会引起表单提交。
文本域：
<textarea name="other" cols="23" rows="3"></textarea><br>
rows属性：指定默认的行数，会影响文本域的高度
cols属性：指定默认显示的列数，会影响文本域的宽度。
没有type属性，其他属性与普通文本输入框一致。
下拉框：<select name="place">
<option value="冀">河北</option>
<option value="鲁">山东</option>
<option value="沪" selected>上海</option>
<option value="京">北京</option>
</select>
name属性：指定数据的名称。
option标签：value属性，如果没有value属性，提交的数据时option中间的文字，如果设置了value属性，提交的数据就是value值。设置selected，表示默认选中。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单-常用控件</title>
</head>
<body>
<form action="https://search.jd.com/search" >
<!-- 输入框 -->
<!-- type = text 代表输入类型是输入框
name = account 当表单提交时，输入框中值，会拼接在 account = xxx 进行提交代表后端的字段。
value = zhangsan 代表输入框的默认值
maxlength = 10 代表输入的最大长度是 10 -->
账户：<input type="text" name="account" value="zhangsan" maxlength="10"><br>
<!-- type = password 代表这个输入框就是要输密码的，在页面会显示成黑点，隐藏输入值-->
密码：<input type="password" name="pwd" maxlength="6"><br>
<!-- 单选按钮 -->
<!-- 单选按钮也要使用 input 输入框标签，但是type要选择 radio
name 属性代表关联属性，统一个name属性 代表统一个单选
value 属性代表参数值，伴随表单提交时的参数值，参数值就是后端接收的参数
checked 代表默认选项-->
性别：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="famale" checked>女
<br>
<!-- 多选框-->
<!-- 多选框也是 input，type选择 checkbox，name、value、checked 与单选框一致-->
爱好：
<input type="checkbox" name="hobby" value="smoke" checked>抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm" checked>烫头
<br>
<!-- 文本域 -->
<!-- textarea 标签代表文本域 ，cols 代表宽度，也就是列数 rows 代表高度也就是行数
textarea 没有type属性，也就代表只能代表 输入文本
name = other 就代表，参数名，可以带着表单一起提交。-->
其他：
<textarea name="other" cols="23" rows="3"></textarea><br>
<!-- 下拉框 -->
<!-- select 代表多选框，其中option 是每个选项
select 中的name值代表 参数名 ，option中 value 代表属性值。
selected 代表默认选择的。-->
籍贯：
<select name="place">
<option value="冀">河北</option>
<option value="鲁">山东</option>
<option value="沪" selected>上海</option>
<option value="京">北京</option>
</select>
<br>
<!-- 隐藏域 -->
<!-- 页面上看不到的部分，可以设置默认值跟随表单一起提交-->
<input type="hidden" name="tag" value="123">
<!-- 确认按钮 第一种写法 -->
<!-- button 标签的默认属性就是 type = submit 代表提交-->
<!-- <button>确认</button> -->
<!-- 确认按钮 第二种写法 -->
<!-- 当input标签的 type类型是 submit 时，代表这个是一个提交按钮
value值代表按钮的名字，不要带name属性，带上name属性就当成 name = value 参数值一起提交 -->
<input type="submit" value="确认">
<!-- 重置按钮 第一种写法-->
<!-- type = reset 时，代表重置按钮
重置按钮会清空页面的操作，相当于一次刷新-->
<!-- <button type="reset">重置</button> -->
<!-- 重置按钮 第二种写法 -->
<!-- input标签 当type = reset 就是重置按钮 value时按钮的名字！-->
<input type="reset" value="重置">
<!-- 普通按钮 -->
<!-- type = button 时代表普通按钮 -->
<button type="button">检测账户是否被注册</button>
</form>
</body>
</html> 3）禁用表单控件
表单控件的标签中添加 disabled属性 即可禁用表单控件。
imput、textarea、button、select、option 都可以设置 disabled 属性。
4）label 标签
label 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。
两种与label 关联方式如下：
1、让 label 标签的 for 属性值等于表单控件的 id。
2、把表单控件套在 label 标签的里面。
<!-- label标签 获取焦点，label 通过for标签中的值 与 对应标签中的id值对应，
当点击label标签中的文字时，会自动跳转到对应标签的输入框或者选项上-->
<label for="zhanghu">账户：</label><input id="zhanghu" type="text" name="account" value="zhangsan" maxlength="10"><br>
<!-- label中的第二种方式，直接将关联的元素包裹在 label标签内，
这样选到密码时，也会自动选到输入框中-->
<label>
密码：<input id="mima" type="password" name="pwd" maxlength="6" ><br>
</label>
性别：
<input type="radio" name="gender" value="male" id="nan">
<label for="nan">男</label>
<input type="radio" name="gender" value="famale" id="nv">
<label for="nv">女</label>
<br>
爱好：
<label>
<input type="checkbox" name="hobby" value="smoke" >抽烟
</label>
<label>
<input type="checkbox" name="hobby" value="drink" >喝酒
</label>
<label>
<input type="checkbox" name="hobby" value="perm" >烫头
</label>
<br>
<label for="qita">其他：</label>
<textarea name="other" cols="23" rows="3" id="qita"></textarea><br>5）fieldset 与 legend 的使用（了解）
fieldset 可以为表单控件分组 ， legend 标签是分组的标题。
<form action="https://search.jd.com/search" >
<fieldset>
<legend>主要信息</legend>
<label for="zhanghu">账户：</label><input id="zhanghu" type="text" name="account" value="zhangsan" maxlength="10"><br>
<label>
密码：<input id="mima" type="password" name="pwd" maxlength="6" ><br>
</label>
性别：
<input type="radio" name="gender" value="male" id="nan">
<label for="nan">男</label>
<input type="radio" name="gender" value="famale" id="nv">
<label for="nv">女</label>
<br>
</fieldset>
<fieldset>
爱好：
<label>
<input type="checkbox" name="hobby" value="smoke" >抽烟
</label>
<label>
<input type="checkbox" name="hobby" value="drink" >喝酒
</label>
<label>
<input type="checkbox" name="hobby" value="perm" >烫头
</label>
<br>
<label for="qita">其他：</label>
<textarea name="other" cols="23" rows="3" id="qita"></textarea><br>
籍贯：
<select name="place" >
<option value="冀" >河北</option>
<option value="鲁">山东</option>
<option value="沪" >上海</option>
<option value="京">北京</option>
</select>
<br>
</fieldset>
<input type="hidden" name="tag" value="123">
<input type="submit" value="确认" >
<input type="reset" value="重置">
<button type="button" >检测账户是否被注册</button>
</form> 
|
标签名
| 标签语义 | 常用属性 | 单/双 标签 |
| form | 表单 | action属性：表单要提交的地址。 target属性：跳转的新地址的打开方式；值_self、_blank method属性：请求方式，可选值：get、post | 双 |
| input | 多种形式的表单控件 | type属性：指定表单控件的类型。 | 单 |
| textarea | 文本域 | name属性：指定数据名称 rows属性：指定默认显示的行数，影响文本域的高度。 cols属性：自定默认显示的列数，影响文本域的宽度。 disabled属性：设置表单控件不可用。 | 双 |
| select | 下拉框 | name属性：指定数据名称 disabled属性：设置整个下拉框不可用。 | 双 |
| option | 下拉框的选项 | disabled属性：设置下拉选项不可用 value属性：该选项事件提交的数据（不指定value，会把标签中的内容作为提交数据） selected：默认选中。 | 双 |
| button | 下拉框的选项 | disabled属性：设置按钮不可用。 type属性：设置按钮的类型，值：submit（默认）、reset、button | 双 |
| label | 与表单控件做关联 | for属性：要与关联的表单控件的id值相同。 | 双 |
| fieldset | 表单控件分组 | 双 | |
| legend | 分组名称 | 双 |
11、框架标签
| 标签名 | 功能和语义 | 属性 | 单/双 标签 |
| iframe | 框架（在网页中嵌入其他文件） | name：框架名字，可以与target属性配合。 width：框架的宽。 height：框架的高度。 f'rameborder：是否显示边框，值：0或者1. | 双 |
iframe标签的实际应用：
1、在网页中嵌入广告
2、与超链接或表单的target配合，展示不同的内容。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>框架标签</title>
</head>
<body>
<!-- 使用iframe标签嵌入一个普通网页 -->
<!-- src 是嵌入网页的地址， width是嵌入网页的宽 height 是高 frameborder 是嵌入网页是否右边框 -->
<iframe src="https://www.taobao.com/" width="900" height="300" frameborder="0"></iframe><br>
<!-- 使用iframe 嵌入图片-->
<iframe src="./resource/git动图.gif" frameborder="0"></iframe><br>
<!-- 与超链接的 target 属性配合，做成点击超链接进入嵌入网页-->
<a href="https://www.taobao.com/" target="bb">点我看淘宝</a><br>
<a href="https://www.tmall.com/" target="bb">点我看天猫</a><br>
<!-- 与表单的target属性配合使用 使用表单提交的数据会直接 调用别的网页的接口，并将网页嵌入到自己的iframe 当中-->
<form action="https://so.toutiao.com/search" target="bb">
<input type="text" name="keyword">
<input type="submit" value="搜索">
</form>
<iframe name="bb" frameborder="0" width="300"></iframe>
</body>
</html>
