一、基础概念
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、网页的基本结构如下：
4、HTML注释
1、特点：注释的内容会被浏览器所忽略，不会呈现到页面中，但源代码中依然可见
2、作用：对代码进行解释和说明
3、写法：
4、注释不可以嵌套
5、HTML文档声明
1、作用：告诉浏览器当前网页的版本
2、写法：
旧写法：要依网页所用的HTML版本而定，写法有很多，具体写法请参考：W3C官网-文档声明。
新写法：
3、注意：文档声明，必须在网页的第一行，且在html标签的外侧。
6、HTML字符编码
1、计算机对数据的操作：
存储时，对数据进行：编码
读取时，对数据进行：解码
2、编码、解码，会遵循一定的规范 -- 字符集
3、字符集有很多，常见的有：
4、使用原则：
原则1：存储时务必使用合适的字符编码，否则无法存储，数据会丢失！
原则2：存储时采用哪种方式编码，读取时就采用哪种方式解码。否则数据会错乱，乱码。
5、总结：
平时写代码时，统一采用UTF-8编码 最稳妥。
为了让浏览器在渲染html文件时，不犯错误，可以通过meta标签配合 charset属性指定字符集：
7、HTML设置语言
长按 shift + 网页左上角刷新按钮，可以强刷页面。
1、主要作用：让浏览器显示对应的翻译提示，有利于搜索引擎优化。
2、具体写法：
3、扩展知识：lang属性的编写规则
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 标题标签：
<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）备注说明：
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 | 地址信息 | 双 |
后面两个是块元素，前面的都是行内元素！
备注：
<!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 | 单 |
总结：
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 常见的图片格式
图片格式非常多，上面只是一些常见的！
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>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>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>
<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相同 | 双 |
注意点：
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）表单的常用控件
<!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属性 即可禁用表单控件。
4）label 标签
label 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。
两种与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. | 双 |
<!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>
