【HTML5】2天搞定HTML5
一，简介
HTML 指超文本标签语言。
HTML 是通向 WEB 技术世界的钥匙。
HTML 5 是下一代的 HTML。
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
二，标签 - 标题标签 <h1 - h6>
定义和用法
<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。
<h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6>
三，标签 - 段落标签 <p>
定义和用法
<p> 标签定义段落。
p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>段落标签用法</title>
</head>
<body>
<h1> 美国政府发布命令：暂停所有中国客运航班</h1>
<p>美国交通部3日发布命令，宣布将从本月16日起暂停所有中国航空公司执飞的中美定期客运航班，涉及中国国际航空、首都航空、东方航空、南方航空、海南航空、厦门航空等多家航空公司。</p>
<p>上述命令宣称，美国交通部因中国政府“未能允许美国承运人实现往返中国的定期客运航空服务，无法行使双边权利的全部内容”，将暂停所有中国航空公司往返美国的定期航班运营。该命令将于2020年6月16日生效。根据中国各航空公司此前发布的6月份航班计划，该命令将影响国航运营的北京-洛杉矶航线、南航运营的广州-洛杉矶航线、东航运营的上海-纽约航线等多条航线。</p>
<p>美国交通部所谓的中方未能允许美国的航空公司运营往返中国的客运航线，指的是中国民航局自3月29日开始实施的“五个一”政策（一个航司一个国家只保留一条航线，一周最多执行一班）。由于该政策要求以3月12日发布的国际航班计划为基准，而美国各家航空公司已于此前暂停所有中美航班，因此始终未恢复航线。民航局运输司相关负责人此前在答记者问时曾表示，“五个一”政策主要是为了坚决阻遏疫情输入风险高发态势。</p>
</body>
</html>
四，标签 - 还行标签 <br />
定义和用法
<br> 可插入一个简单的换行符。
<br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在 XHTML 中，把结束标签放在开始标签中，也就是 <br />。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>换行标签的用法</title>
</head>
<body>
<h1>美国宣布：暂停所有中国客运航班</h1>
<p>北京时间今日凌晨消息，美国交通部3日发布命令，<br />
<h3>宣布将从本月16日起暂停所有中国航空公司执飞的中美定期客运航班，</h3>涉及中国国际航空、首都航空、东方航空、南方航空、海南航空、厦门航空等多家航空公司。</p>
<p>上述命令宣称，美国交通部因中国政府“未能允许美国承运人实现往返中国的定期客运航空服务，无法行使双边权利的全部内容”，将暂停所有中国航空公司往返美国的定期航班运营。该命令将于2020年6月16日生效。</p>
<h2>br / 是换行标签的用法：！！！这个标签属于单标签。</h2>
</body>
</html>
五，标签 - 文本格式化标签 <strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>
定义和用法
文本格式化标签包含:
1. strong 及 b 代表粗体
2. em 及 i 代表倾斜
3. del 及 s 代表删除
4. ins 及 u 代表下划线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本格式化标签</title>
<style>
.microsoft {
color:mediumblue;
font-family:"Microsoft yahei",Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>为“黑人之死”闹起来的国家，又多了一个法国！</h1>
<h3>示威者纵火、警方发射催泪弹……非裔美国人弗洛伊德之死引发全美大规模抗议仍在进行，2日晚，法国首都的反种族歧视抗议也在升级。</h3>
<h2><strong><em>“今日俄罗斯”（RT）3日报道称，</em></strong></h2>
<p class="microsoft">2日晚，数百名抗议者无视疫情禁令，走上法国首都巴黎的街头，声援美国抗议者，并要求为本国遭受警察“暴行”的受害者讨回公道。</p>
<i>法国街头的抗议活动（资料图）法国街头的抗议活动（资料图）</i>
<p>报道称，有关部门禁止疫情期举行大型集会，但这并没有阻止大批示威者出动。他们喊着“为乔治伸张正义”、“为阿达玛伸张正义”的口号上街游行。</p>
<p>据介绍，阿达玛指的是2016年24岁法国黑人阿达玛•特拉奥雷（Adama Traore）一案。这名年轻人在被警方拘留数小时后意外死亡。案件仍在调查中，有媒体称阿达玛是在警察试图制服他时窒息而死。
</p>
<p><ins><strong>RT称，抗议示威人群当天还试图封锁高速公路、设置路障、焚烧垃圾和建筑物，并与警方发生小规模冲突。警方向示威者发射催泪瓦斯，试图驱散人群。</strong></ins></p>
<p><del>这一句是故意写错的。为了体现删除下滑线效果！！</del>></p>
</body>
</html>
六，标签 - div/span标签 <div>,<span>
定义和用法
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
用法
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
<span> 标签被用来组合文档中的行内元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div,span标签</title>
</head>
<body>
<div>我是一个div盒子</div>
<span>家电 国际 生鲜 超市</span>
<h2><strong>
<p>div 标签用来布局，但是一行只能放一个div.相当于一个大的盒子容器（division的缩写）<br />
span标签用来布局，一行可以多个span.相当于n个小盒子 （span意为跨度，跨距）
</p>
</strong></h2>
</body>
</html>
七，标签 - 图像标签 <img>
定义和用法
img 元素向网页中嵌入一幅图像。
请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
<img> 标签有两个必需的属性：src 属性 和 alt 属性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>img图像标签</title> </head> <body> <h1>景瑞笑笑</h1> <div> <img src="../images/doter.jpg" /> <h5>alt代表替换文本.当图片显示不出来的时候，显示alt=后的文字</h5> <img src="../images/doter.jpg" alt="我是景瑞笑笑" /> <h5>title代表鼠标放到图片后所显示的文字</h5> <img src="../images/doter.jpg" alt="我是景瑞笑笑" title="笑笑在向你微笑！" /> <h5>width,height width代表设置图像的宽度,height代表设置图像的高度</h5> <img src="../images/doter.jpg" alt="我是景瑞笑笑" title="笑笑在向你微笑！" width="400" height="300" /> <h5>border代表设置图像边框.后期是通过css来对其进行设定的</h5> <img src="../images/doter.jpg" alt="我是景瑞笑笑" title="笑笑在向你微笑！" width="400" border="15" /> </div> <!--img 是image的缩写<br /> src 是img的必须属性，它用户指定图像的路径和文件名 img标签跟br /相同也是一个单标签 --> </body> </html>
八，标签 - 链接标签 <a>
定义和用法
<a> 标签定义超链接，用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性，它指示链接的目标。
在所有浏览器中，链接的默认外观是：
- 未被访问的链接带有下划线而且是蓝色的
- 已被访问的链接带有下划线而且是紫色的
- 活动链接带有下划线而且是红色的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>链接标签</title>
</head>
<body>
<h1>1.外部链接</h1>
<h2>景瑞笑笑百日照片</h2>
<img src="../images/IMG_20200516_105313.jpg" title="小吃货" width="400">
<br />
<a href="https://pan.baidu.com/disk/home?errmsg=Auth+Login+Sucess&errno=0&ssnerror=0&#/all?vmode=list&path=%2F%E7%AC%91%E7%AC%91%2F%E7%85%A7%E7%89%87%2F3-6%E4%B8%AA%E6%9C%88%2F%E7%99%BE%E6%97%A5%E7%85%A7"
target="_blank">百度云盘</a>
<h1>2.内部链接</h1>
<a href="04-html_文本格式化标签.html" target="_blank">新浪新闻</a>
<h2>
a标签代表超链接的意思.href=""是必须要写的里面必须是以http//或者https//开头的网址<br />
traget = ""有两个参数 _self代表当前页面打开 _blank代表新建一个窗口打开.
</h2>
</body>
</html>
九，标签 - 链接补充 <a>
定义和用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>链接标签</title>
</head>
<body>
<h1 id="home">1.外部链接</h1>
<h2>景瑞笑笑百日照片</h2>
<p id="tojingrui">景瑞笑笑个人简介: 2018年10月21日 7:20出生 性别:女 性格：开朗 </p> <br />
<img src="../images/IMG_20200516_105313.jpg" title="小吃货" width="400">
<br />
<a href="https://pan.baidu.com/disk/home?errmsg=Auth+Login+Sucess&errno=0&ssnerror=0&#/all?vmode=list&path=%2F%E7%AC%91%E7%AC%91%2F%E7%85%A7%E7%89%87%2F3-6%E4%B8%AA%E6%9C%88%2F%E7%99%BE%E6%97%A5%E7%85%A7"
target="_blank">百度云盘</a>
<h1>2.内部链接</h1>
内部链接可以链接另外一个.html的文件<br />
<a href="04-html_文本格式化标签.html" target="_blank">新浪新闻</a>
<h1>3.空链接</h1>
当网站还没有创建好的时候可以用href="#"先占位<br />
<a href="#">qq音乐</a>
<h1>4.下载链接</h1>
下载链接:下载的地址跟的是 文件 .exe .zip 等压缩包格式的文件<br />
<a href="../Git-2.26.2-64-bit.zip">下载</a>
<h1>网页元素链接</h1>
网络元素链接:可以把图片，音频，视频都可以当做一个超链接来使用<br />
<a href="https://item.jd.com/100007299145.html" target="_blank"><img
src="C:\Users\Administrator\HTML5\images\华为matePro4.jpg" width="300" title="matePro40 7988元"></a>
<h1>5.锚点链接</h1>
锚点链接:当我们点击一个链接,会快速定位到当前页面的某个位置。
语法：href="#任意编写一个名字",在定位标签中加入id="对应的名称"属性中填写的名字必须跟href指定的名字一致。<br />
<a href="#tojingrui">笑笑简介</a>
<a href="#home">
<h3>返回顶部</h3>
</a>
<!--a标签代表超链接的意思.href=""是必须要写的里面必须是以http//或者https//开头的网址<br />
traget = ""有两个参数 _self代表当前页面打开 _blank代表新建一个窗口打开.
-->
</body>
</html>
十，标签 - 注释标签及特殊符号 <!-- < --> 特殊符号参照代码解释
定义和用法
注释标签就是作文本解释的。为了让人更清楚每个标签的作用。
特殊符号解释参照代码中注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注释标签及特殊字符</title>
</head>
<body>
<h2>注释标签的使用:<!--文字部分-->这种格式就代表注释！</h2>
<h1>特殊字符</h1>
<p><h3>前面加& nbsp后面加个;号. 代表: 空格符<!-- --></h3></p>
<p><h3>前面加& lt 后面加个;号. 代表: <小于号的意思<!-- <--></h3></p>
<p><h3>前面加& gt 后面加个;号. 代表: >大于号的意思<!-- >--></h3></p>
<p><h3>前面加& amp后面加个;号. 代表: &和号的意思<!-- &--></h3></p>
<p><h3>前面加& yen后面加个;号. 代表: ¥人民币的意思<!-- --></h3></p>
<p><h3>前面加& copy后面加个;号. 代表: ©版权的意思<!-- ©--></h3></p>
<p><h3>前面加& reg后面加个;号. 代表: ®注册商标的意思<!-- ®--></h3></p>
<p><h3>前面加& deg后面加个;号. 代表: °摄氏度的意思<!-- °--></h3></p>
<p><h3>前面加& plusmn后面加个;号. 代表: ±正负号的意思<!-- ±--></h3></p>
<p><h3>前面加& times后面加个;号. 代表: ×乘号的意思<!-- ×--></h3></p>
<p><h3>前面加& divide后面加个;号. 代表: ÷除号的意思<!-- ÷--></h3></p>
<p><h3>前面加& sup2后面加个;号. 代表: ²平方2（上标2）的意思<!-- ²--></h3></p>
<p><h3>前面加& sup3后面加个;号. 代表: ³立方3（上标3）的意思<!-- ³--></h3></p>
</body>
</html>
十一，标签 - 表格标签 <table>,<th>,<tr>,<td>,<thead>,<tbody>
定义和用法
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
thead 元素应该与 tbody 和 tfoot 元素结合起来使用。
<tbody> 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。
thead 元素用于对 HTML 表格中的表头内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。
注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
</head>
<body>
<h1 id="home">表格属性介绍:</h1>
<p>1. align 属性值: left,center,right 规定表格周围元素的对齐方式<br />
<br />2. border 属性值: 1或者"" 规定表格单元是否拥有边框。默认为""表示没有边框 <br />
<br />3. cellpadding 属性值: 像素值 规定单元边沿与其内容之间的空白.默认1像素 <br />
<br />4. cellspacing 属性值: 像素值 规定单元格之间的空白.默认2像素 <br />
<br />5. width 与 height 用法是设定表格的宽与长</p>
<br />
<table align="center" border="1" cellpadding="0" cellspacing="0" width=1000 height="250">
<!-- thead和tbody是表格结构区域.是为了使我们的表格结构更加的直观清晰 -->
<thead>
<tr>
<th>商品名</th>
<th>商品编号</th>
<th>商品产地</th>
<th>操作系统</th>
</tr>
</thead>
<tbody>
<tr>
<td>华为 mate Pro40 <a href="https://item.jd.com/100007299145.html" target="_blank"><img
src="../images/华为matePro4.jpg" width="200"></a></td>
<td>100007299145</td>
<td>中国大陆</td>
<td>鸿蒙操作系统</td>
</tr>
<tr>
<td>小米（MI）小米9 Pro 5G<a href="https://item.jd.com/57631478891.html" target="_blank"><img
src="../images/小米9Pro.jpg" width="200"></a></td>
<td>57631478891</td>
<td>中国大陆</td>
<td>安卓操作系统</td>
</tr>
<tr>
<td>AppleiPhone 11<a href="https://item.jd.com/100008348508.html" target="_blank"><img
src="../images/Apple_iphone11.jpg" width="200"></a></td>
<td><a href="10-html_AppleiPhone11.html" target="_blank">100008348508</a></td>
<td>中国大陆</td>
<td>IOS操作系统</td>
</tr>
</tbody>
</table>
<a href="#home">
<h3>返回顶部</h3>
</a>
</body>
</html>
表格案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AppleiPhone11性能信息</title>
</head>
<body>
<h3>主体</h3>
<p>
<table align="left" border="1" cellpadding="0" cellspacing="0" width=400 height="100">
<tr>
<td>入网型号</td>
<td>A2217</td>
</tr>
<tr>
<td>产品名称</td>
<td>iPhone 11 Pro</td>
</tr>
<tr>
<td>上市年份</td>
<td>2019年</td>
</tr>
<tr>
<td>上市年份</td>
<td>9月</td>
</tr>
</table>
</p>
<br /><br /><br /><br /><br />
<h3>基本信息</h3>
<p>
<table align="left" border="1" cellpadding="0" cellspacing="0" width=400 height="100">
<tr>
<td>机身长度（mm）</td>
<td>144</td>
</tr>
<tr>
<td>机身重量（g）</td>
<td>188</td>
</tr>
<tr>
<td>机身材质工艺</td>
<td>亚光质感玻璃 搭配不锈钢设计</td>
</tr>
<tr>
<td>机身宽度（mm）</td>
<td>74.1</td>
</tr>
<tr>
<td>机身材质分类</td>
<td>其他</td>
</tr>
<tr>
<td>机身厚度（mm）</td>
<td>8.1</td>
</tr>
<tr>
<td>运营商标志或内容</td>
<td>无</td>
</tr>
</table>
</p>
<br /><br /><br /><br /><br />
</body>
</html>
十二，标签 - 表格合并单元格
定义和用法
使用表格中，有时候会用到单元格合并的情况。需要我们合并有用的单元格并删除没用的单元格。才能实现web中的单元格合并。跟Excel不同必须删除没用的单元格才可以。
合并单元格三步走
1. 先确定时跨行(colspan)还是跨列(rowspan)
2. 找到目标单元格.协商合并语句
3. 删除多余的单元格（这里是个考验逻辑的地方）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格合并单元格</title>
</head>
<body>
<!-- 合并单元格三步走
1. 先确定时跨行(colspan)还是跨列(rowspan)
2. 找到目标单元格.协商合并语句
3. 删除多余的单元格（这里是个考验逻辑的地方） -->
<table align="center" border="1" cellpadding="0" cellspacing="2" width=1000 height = 400>
<thead>
<tr>
<td colspan="5" align="center"><h1>个人简历</h1></td>
</tr>
</thead>
<tbody>
<tr>
<td align="center">姓名:</td>
<td align="center" width=300></td>
<td align="center">性别:</td>
<td align="center" width=300></td>
<td rowspan="4" align="center" width=150>照片</td>
</tr>
<tr>
<td align="center">婚姻状况:</td>
<td align="center"></td>
<td align="center">出生年月：</td>
<td align="center"></td>
</tr>
<tr>
<td align="center">民族：</td>
<td align="center"></td>
<td align="center">政治面貌：</td>
<td align="center"></td>
</tr>
<tr>
<td align="center">身高：</td>
<td align="center"></td>
<td align="center">学历：</td>
<td align="center"></td>
</tr>
</tbody>
</table>
</body>
</html>
十三 - 列表 - 无序列表
定义和用法
1. 列表本身主要是用来布局用的。无序列表顾名思义里面的元素是无序排列的也是开发网页中用的最多的
2. 无序列表<ul></ul>中只能包含<li></li>不能有任何的文字和其他标签
3. <li></li>是个容器可以存放任何东西。文字和其他任何标签都可以使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无序列表</title>
</head>
<body>
<!-- 无序列表的特点：
1. 列表本身主要是用来布局用的。无序列表顾名思义里面的元素是无序排列的
也是开发网页中用的最多的
2. 无序列表<ul></ul>中只能包含<li></li>不能有任何的文字和其他标签
3. <li></li>是个容器可以存放任何东西。文字和其他任何标签都可以使用 -->
<h3>我最喜欢吃的食物有：</h3>
<ul>
<li>榴莲</li>
<li>西瓜</li>
<li>海鲜</li>
<li>火锅</li>
<li>泰国菜</li>
</ul>
<!-- 很多网站中图像，包括分类的选项都是通过list无序列表来做的。非常的重要
后期可以通过CSS来进行扩展，使我们的界面更加的漂亮美观！ -->
</body>
</html>
十四 - 列表 - 有序列表
定义和用法
1. 标签为<ol></ol>，中间也是只能放标签<li></li>其他任何标签跟文字不允许使用
2. 有序列表使用的场景在于.各个元素间必须按照有序的规范排列。例如：排行，销售名次等等场景
3. 同无序列表一样。有序列表中的属性后期可以通过CSS来设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>有序列表</title>
</head>
<body>
<!-- 有序列表特点：
1. 标签为<ol></ol>，中间也是只能放标签<li></li>其他任何标签跟文字不允许使用
2. 有序列表使用的场景在于.各个元素间必须按照有序的规范排列。例如：排行，销售名次等等场景
3. 同无序列表一样。有序列表中的属性后期可以通过CSS来设置-->
<h2>王者荣耀英雄出场排行榜</h2>
<ol>
<li>裴虔虎 20000次</li>
<li>孙尚香 16000次</li>
<li>李白 10000次</li>
<li>上官婉儿 8000次</li>
<li>张飞 6000次</li>
<li>韩信 5000次</li>
</ol>
</body>
</html>
十五 - 列表 - 自定义列表
定义和用法
1. 一般大型网站的最下方会有一些关注我们，保修与退货，购物相关等列表格式的功能。这些都是通过自定义列表来做的
2. 其特点是有表头，以及表头外的选项都是围绕表头展开的
3. 标签<dl></dl>中包含<dt></dt>及<dd></dd>而<dt>为表头<dd>都是围绕<dt>展开的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义列表</title>
</head>
<body>
<!-- 自定义列表使用场景
1. 一般大型网站的最下方会有一些关注我们，保修与退货，购物相关等列表格式的功能。这些都是通过自定义列表来做的
2. 其特点是有表头，以及表头外的选项都是围绕表头展开的
3. 标签<dl></dl>中包含<dt></dt>及<dd></dd>而<dt>为表头<dd>都是围绕<dt>展开的 -->
<dl>
<dt>购物相关</dt>
<dd>购物指南</dd>
<dd>配送方式</dd>
<dd>支付方式</dd>
<dd>常见问题</dd>
</dl>
<dl>
<dt>关于我们</dt>
<dd>公司介绍</dd>
<dd>华为商城简介</dd>
<dd>华为线下门店</dd>
<dd>诚征英才</dd>
<dd>意见反馈</dd>
</dl>
</body>
</html>
十六 - 表单域与表单元素 <input type="跟具体参数">
定义和用法
表单域使用场景
1.一般表单是用来收集用户信息使用的，例如注册信息
2.表单域就是把一些表单控件及表单信息框起来把信息提交给后台服务器的领域
3.标签为<from></from>关键字有action,method,name
4.action把数据传送给服务器的链接（脚本），method有POST跟GET方法, name就是给当前表单域起一个名字
表单元素就是表单控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单域及表单元素的概念</title>
</head>
<body>
<!-- 表单域使用场景
1.一般表单是用来收集用户信息使用的，例如注册信息
2.表单域就是把一些表单控件及表单信息框起来把信息提交给后台服务器的领域
3.标签为<from></from>关键字有action,method,name
4.action把数据传送给服务器的链接（脚本），method有POST跟GET方法, name就是给当前表单域起一个名字
-->
<!-- 表单元素就是表单控件，详情如下 -->
<form action="10-html_AppleiPhone11.html" method="GET" name="first_form">
用户名: <input type="text" name ="username" value="请输入用户名"> <br />
密 码 ：<input type="password" name = "user_password"> <br />
<!-- 不会提交申请，后期结合javascript来使用 -->
<input type="button" value="获取手机验证码" /> <br />
<!-- 必须有相同的name名才能实现多选1 -->
性别 ：男<input type="radio" name="sex" value="男"/> 女<input type="radio" name="sex" value="女"/> <br />
<!-- 上面的代码简单演示了复选框的使用，可以选中任意项。
特别说明：通常情况下，利用 name 属性将表单数据提交到后台。
复选框还有其他属性，下面分别做一下介绍：
（1）.value：规定复选框的value属性值，它会被发送到服务器。
（2）.checked：规定复选框处于选中状态。
（2）.required（HTML5）：规定指定的复选框必须被选中。
（3）.form（HTML5）：规定复选框所属的一个或多个表单。
（4）.autofocus（HTML5）：规定在页面加载时，指定复选框自动地获得焦点。
（5）.disabled：规定复选框不可用。-->
出生城市 ：上 海<input type="checkbox" checked name="city" value="0"> 北京<input type="checkbox" name="city"
value="1"> 深圳<input type="checkbox" name="city" value="2"> <br />
<!-- 详情参照:https://blog.csdn.net/hyd19931002/article/details/78320503 -->
<input id="fileID1" type="file" multiple="multiple" name="file" /> <br />
<!-- <input type="file" /> <br /> -->
<br />
<!-- submit把数据提交给后台服务器 reset顾名思义重置用户输入 -->
<input type="submit" value="提交申请" />
<input type="reset" value="重新设置" />
</form>
</body>
</html>
十七 - label标签
定义和用法
Label标签是增强用户体验的。当我们要选中某一个选项时，不需要点中选框
只需要选中选框附近的字体就可以选中选框了
语法: <label for = "自定义名称">包含的字体</label>
<input type="checkbox" name="city" value="1" id = "自定义的名称">
一定两个名称要一致。不然不能交互
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Label标签的用法</label></title>
</head>
<body>
<!-- Label标签是增强用户体验的。当我们要选中某一个选项时，不需要点中选框
只需要选中选框附近的字体就可以选中选框了
语法: <label for = "自定义名称">包含的字体</label>
<input type="checkbox" name="city" value="1" id = "自定义的名称">
一定两个名称要一致。不然不能交互
-->
<form>
性别 ：<label for="man">男</label> <input type="radio" name="sex" value="男" id="man" /> <label
for="nv">女</label><input type="radio" name="sex" value="女" id="nv" /> <br />
<br />
出生城市 ：<label for="shanghai">上 海</label><input type="checkbox" checked name="city" value="0" id="shanghai">
<label for="beijing">北京</label><input type="checkbox" name="city" value="1" id="beijing"> <label
for="shenzhen">深圳</label><input type="checkbox" name="city" value="2" id="shenzhen"> <br />
<br />
<!-- <input type="reset" value="重新设置" /> -->
<input type="reset" value=" 重 置 " />
</form>
</body>
</html>
十八 - select标签
定义和用法
其实就是下拉菜单。当我们为了节约空间给用户提供一个选择的时候可以用到这种方法。
例如我们填写的籍贯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select标签的用法</title>
</head>
<body>
<!-- 当我们为了节约空间给用户提供一个选择的时候可以用到这种方法。
例如我们填写的籍贯 -->
<form>
<strong>籍贯 :</strong>
<select>
<option >北京</option>
<option>上海</option>
<option>广东</option>
<option>云南</option>
<option selected>山东</option>
<option>东北</option>
<option>江苏</option>
</select>
</form>
</body>
</html>
十九 - textarea标签
定义和用法
使用场景：主要用于用户反馈，简历中自我介绍，电子表单等场景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea的具体用法</title>
</head>
<body>
<!-- textarea主要运用场景:
1. 用户反馈
2. 简历中的自我介绍，及工作描述 等场景 -->
<form action="17-html_select标签.html" method="GET" target="_blank">
<h2>王者荣耀 举报窗口：</h2>
<label for="guaji">挂机</label><input type="checkbox" name="guaji" value="0" id="guaji">
<label for="maren">言语辱骂</label><input type="checkbox" name="maren value=" 0" id="maren>
<label for=" jujue">拒绝参团</label><input type="checkbox" name="jujue" value="0" id="jujue">
<label for="raoluan">扰乱军心</label><input type="checkbox" name="raoluan" value="0" id="raoluan">
<br />
<br />
<textarea cols="100" rows="3">如有其他情况，请填写
</textarea>
<br />
<input type="submit">
</form>
</body>
</html>
二十 - 以上综合案例演示
结合之前的标签方法完成综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>综合案例演示</title>
</head>
<body>
<h2>青春不常在，抓紧谈恋爱</h2>
<table width=1000 border="0">
<tr>
<td>性别：</td>
<td><input type="radio" name="sex" id="nan" /><label for="nan"><img src="../images/boy.jpg">
男 </label>
<input type="radio" name="sex" id="nv" /><label for="nv"><img src="../images/gril.jpg"> 女</label>
</td>
</tr>
<tr>
<td>生日：</td>
<td>
<select>
<option>--请选择年份--</option>
<option>1980年</option>
<option>1981年</option>
<option>1982年</option>
<option>1983年</option>
<option>1984年</option>
<option>1985年</option>
<option>1986年</option>
<option>1987年</option>
<option>1988年</option>
<option>1989年</option>
<option>1990年</option>
<option>1991年</option>
<option>1992年</option>
<option>1993年</option>
<option>1994年</option>
<option>1995年</option>
<option>1996年</option>
<option>1997年</option>
<option>1998年</option>
<option>1999年</option>
<option>2000年</option>
</select>
<select>
<option>--请选择月份--</option>
<option>1月</option>
<option>2月</option>
<option>3月</option>
<option>4月</option>
<option>5月</option>
<option>6月</option>
<option>7月</option>
<option>8月</option>
<option>9月</option>
<option>10月</option>
<option>11月</option>
<option>12月</option>
</select>
<select>
<option>--请选择日期--</option>
<option>1日</option>
<option>2日</option>
<option>3日</option>
<option>4日</option>
<option>5日</option>
<option>6日</option>
<option>7日</option>
<option>8日</option>
<option>9日</option>
<option>10日</option>
<option>11日</option>
<option>12日</option>
<option>13日</option>
<option>14日</option>
<option>15日</option>
<option>16日</option>
<option>17日</option>
<option>18日</option>
<option>19日</option>
<option>20日</option>
<option>21日</option>
<option>22日</option>
<option>23日</option>
<option>24日</option>
<option>25日</option>
<option>26日</option>
<option>27日</option>
<option>28日</option>
<option>29日</option>
<option>30日</option>
<option>31日</option>
</select>
</td>
</tr>
<tr>
<td>所在地区:</td>
<td><input type="text"></td>
</tr>
<tr>
<td>婚姻状况:</td>
<td><input type="radio" name="hunyin" id="weihun"><label for="weihun">未婚</label>
<input type="radio" name="hunyin" id="yihun"><label for="yihun">已婚</label>
<input type="radio" name="hunyin" id="sangou"><label for="sangou">丧偶</label>
</td>
</tr>
<tr>
<td>学历:</td>
<td><select>
<option>中专</option>
<option>大专</option>
<option>本科</option>
<option>硕士</option>
<option>博士</option>
<option>博士后</option>
</select>
</td>
</tr>
<tr>
<td>喜欢的类型:</td>
<td><input type="checkbox" name="liketype" value="0" id="wumei" /><label for="wumei">妩媚的</label>
<input type="checkbox" name="liketype" value="1" id="keai" /><label for="keai">可爱的</label>
<input type="checkbox" name="liketype" value="2" id="tianmei" /><label for="tianmei">甜美的</label>
<input type="checkbox" name="liketype" value="3" id="xiaoxianrou" /><label for="xiaoxianrou">小鲜肉</label>
<input type="checkbox" name="liketype" value="4" id="laorarou" /><label for="laorarou">老腊肉</label>
<input type="checkbox" name="liketype" value="5" id="dashukong" /><label for="dashukong">大叔控</label>
<input type="checkbox" name="liketype" value="6" id="douxihuan" /><label for="douxihuan">都喜欢</label>
</td>
</tr>
<tr>
<td>自我介绍：</td>
<td><textarea cols="100" rows="5">自我介绍
</textarea>
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="免费注册"></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" checked="checked">我同意注册条款和会员加入标准
</td>
</tr>
<tr>
<td></td>
<td><ins><a href="https://www.jiayuan.com/" target="_blank">我是会员，立即登录</ins>
</td>
</tr>
<tr>
<td></td>
<td>
<h3>我承诺</h3>
<ul>
<li>年满18岁，单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
总结：HTML5就像没有羽毛的小鸟，只有基础架构没有其他漂亮的外观。而后期的CSS及javascript仿佛就是小鸟的羽毛及动态飞行等行为。可以更加丰富美化我们的web page
