<a> 超链接标签
在 HTML 标签中，<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。工作原理: 超链接标签命令不会被浏览器自动执行。在用户使用鼠标单击超链接标签命令时，此时这个命令才会执行，执行要求浏览器立刻按照href属性地址发送请求。超链接可以控制浏览器的发送的请求地址。超链接标签在执行时，浏览器百分之百采用GET方式发送请求。
链接的语法格式
两个属性的作用如下：
链接分类：
- 外部链接: 例如 < a href="http:// www.baidu.com "> 百度</a >。
- 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href="index.html"> 首页 </a >。
- 空链接: 如果当时没有确定链接目标时，< a href="#"> 首页 </a > 。
- 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
- 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
<body>
<!--外部链接：-->
<a href="http://www.baidu.com" target="_blank"> 百度一哈 </a><br>
<a href="http://www.sohu.com"> 搜狐 </a><br>
<!--内部链接：-->
<a href="demo.html">胡哥哥 </a><br>
<!--空链接：-->
<a href="#"> 霍建华 </a><br>
<!--图像链接：-->
<a href="http://www.baidu.com" target="_blank"> <img src="timg.jpg" /> </a><br>
<!--超链接完成锚点设置-->
<a id="top">顶部</a> <a href="#middle">跳转至中部</a>
<!--br*100 + tab 生成大量br 快捷键 -->
<!--添加一个锚节点-->
<a id="middle">中部</a> <a href="#bottom">跳转至底部</a>
<a id="bottom">底部</a> <a href="#top">跳转至顶部</a>
</body>测试工作的时候，如果发现程序员使用#来表达返回顶部效果，一定要提示程序员，要用动画效果实现，用户体验才更好！
锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置. 创建锚点链接分为2步：
- 在链接文本的 href 属性中，设置属性值为 #名字 的形式，#就代表内部链接。如<a href="#two"> 第2集 </a>。
- 找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如：<h3 id="two">第2集介绍</h3>
我们也可以给图片加上超链接
<a href="http://www.baidu.com" target="_blank">
<img src="img/wx.png" width="400px" height="200px" title="百度logo" alt="此处是百度logo"/>
</a>无序列表标签
<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义。 无序列表的基本语法格式如下：
语法解释：
- <ul> 标签定义无序列表。将 <ul> 标签与 <li> 标签一起使用，创建无序列表。
- 无序列表的各个列表项之间没有顺序级别之分，是并列的。
- <ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。
- <li> 与 </li> 之间相当于一个容器，可以容纳所有元素。<li> 标签定义列表项目。 <li> 标签可用在有序列表（<ol>）、无序列表（<ul>）和菜单列表（<menu>）中。
- 无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。
<!--
无序列表
unorder List >>> ul
列表项
list item >>> li
type
circle 小圆圈
disc实心圆
square小方块
-->
<ul type="square">
<li>JAVA</li>
<li>python</li>
<li>AI</li>
<li>大数据</li>
<li>前端</li>
</ul>有序列表
有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。 在 HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项。 有序列表的基本语法格式如下：
语法解释：
- <ol> 标签定义有序列表。将 <ol> 标签与 <li> 标签一起使用，创建有序列表。
- 无序列表的各个列表项之间没有顺序级别之分，是并列的。
- <ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。
- <li> 与 </li> 之间相当于一个容器，可以容纳所有元素。<li> 标签定义列表项目。 <li> 标签可用在有序列表（<ol>）、无序列表（<ul>）和菜单列表（<menu>）中。
- 无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。
<!--
有序列表
order List >>> ol
列表项
list item >>> li
type >>>
1阿拉伯数字
a小写英文字母
A大写英文字母
i小写罗马数字
I大写罗马数字
-->
<ol type="1">
<li>JAVA</li>
<li>python</li>
<li>AI</li>
<li>大数据</li>
<li>前端</li>
</ol>列表之间是可以相互嵌套的
<!--列表的嵌套-->
<ul type="square">
<li>JAVA
<ol>
<li>预科</li>
<li>初级</li>
<li>中级</li>
<li>高级</li>
<li>就业</li>
</ol>
</li>
<li>python</li>
<li>AI</li>
<li>大数据</li>
<li>前端</li>
</ul>自定义列表
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。在 HTML 标签中，<dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。其基本语法如下：
<body>
<!--
定义列表
difination List dl
dl
dt 一般用于存放图片
dd 一般用于存放文字
-->
<dl style="border: 1px solid red;width: 225px;">
<dt>
<a href="https://item.jd.com/55733843612.html" target="_blank">
<img src="img/redmi8.png" />
</a>
</dt>
<dd>
<font color="red"><sub>¥</sub><big>1599.00</big></font>
<p style="font-size: 12px;color: darkgrey;">
小米
<font color="red">Redmi</font>
红米note
<font color="red">8pro</font>
手机 冰翡翠
<font color="red">8</font>
+128GB 全网通</p>
</dd>
</dl>
</body><audio> 标签
<audio> 标签定义声音，比如音乐或其他音频流。目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。不同的浏览器支持的文件格式不 同。可以在 <audio> 和 </audio> 之间放置文本内容，这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式
<!--
音频
audio
src 音频文件的路径
controls 在页面上显示 功能控件
loop 控制循环播放
-->
<audio src="audio/aaa.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio>
<audio controls loop autoplay >
<source src="audio/aaa.mp3"></source>
你的浏览器不支持该类型文件
</audio><video> 标签
<video> 标签定义视频，比如电影片段或其他视频流。目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。可以在 <video> 和 </video> 标签之间放置文本内容，这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。之前播放音频和视频，都需要利用第三方插件，比如flash player，而H5提供的音频和视频标签不需要外置插件，浏览器自己提供播放功能
<!--
视频
video
-->
<video src="video/05_HTML_图片标签.mp4" width="30%" autoplay="autoplay" controls="controls" loop="loop"></video>
<video controls loop autoplay width="30%">
<source src="video/05_HTML_图片标签.mp4"></source>
你的浏览器不支持该类型文件
</video>表单标签
工作原理:表单标签命令不会被浏览器自动执行。在用户单击提交按钮时，此时表单标签命令被触发执行。执行时要求浏览器立刻按照action属性地址发送请求
为什么需要表单
- 使用表单目的是为了收集用户信息。 在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时就需要表单。
表单的组成
在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。
表单域
表单域是一个包含表单元素的区域。 在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。 <form> 会把它范围内的表单元素信息提交给服务器.
常用属性
请求方式，决定浏览器在发送请求时行为特征。浏览器可以选择请求方式：7种，目前为止只考虑POST请求方式和GET请求方式。
GET请求方式特点：
- 浏览器发送请求时，携带的【请求参数数量】不能超过4K
- 浏览器发送请求时，浏览器地址栏上将【请求参数信息】展示出来
- 浏览器发送请求时，请求参数信息保存在Http请求协议包中【请求头】
- 浏览器在接收到服务器返回的资源文件内容后，必须将资源文件内容保存在浏览器的缓存
POST请求方式：
- 浏览器发送请求时，可以携带任意数量的【请求参数】为了满足文件上传而产生。
- 浏览器发送请求时，浏览器地址栏上会隐藏请求参数信息
- 浏览器发送请求时，请求参数信息会保存在Http请求协议包中【请求体】
- 浏览器将接收到服务器返回资源文件内容不会保存在浏览器的内存中【阅后即焚】
表单标签存在一个method属性，通过这个属性可以要求浏览器采用对应请求方式发送请求。如果不写method属性则默认情况下是使用get方式发送请求。
请求方式适用场景
考虑到POST请求方式，用户可以将【病毒文件内容】发送到服务器上进行攻击。因此绝大多数门户级网站拒绝接收POST请求，日常开发过程绝大多数请求都是GET
在某些特殊场景下必须使用POST
- 文件上传，必须使用POST
- 发起登录验证请求，必须使用POST
- 索要服务器中实时变化数据时（股票价格，车票数量。。。），必须采用POST
表单控件
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。
- input输入表单元素
- select下拉表单元素
- textarea 文本域元素
表单控件之<input> 表单元素
在英文单词中，input 是输入的意思，而在表单元素中 <input> 标签用于收集用户信息。 在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本 字段、复选框、掩码后的文本控件、单选按钮、按钮等）。
<input type="属性值" /><input /> 标签为单标签
type 属性设置不同的属性值用来指定不同的控件类型。type 属性的属性值及其描述如下：
除 type 属性外，<input>标签还有其他很多属性，其常用属性如下：
注意：
- name 和value 是每个表单元素都有的属性值,主要给后台人员使用。通过name我们可以区分不同的input控件
- name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值.设置多个单选框name属性使用同一个值 就可以形成互斥的效果。
- checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素。
- maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.
有些表单元素想刚打开页面就默认显示几个文字怎么做?
- 可以给这些表单元素设置 value 属性=“值，例如：用户名: <input type="text" value="请输入用户名" />
页面中的表单元素很多，如何区别不同的表单元素?
- 可以给这些表单元素设置 name 属性：当前 input 表单的名字，后台可以通过这个 name 属性找到这个表单。页面中的表单很多， name 的主要作用就是用于区别不同的表单。
用户名: <input type="text" value="请输入用户名" name="username" />。- name 属性后面的值，是自定义的。 radio (或者checkbox）如果是一组，我们必须给他们命名相同的名字
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女如果页面一打开就让某个单选按钮或者复选框是选中状态?
- checked 属性：表示默认选中状态。用于单选按钮和复选按钮。
性 别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女<label> 标签
- <label> 标签为 input 元素定义标注（标签）。
- <label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者 选择对应的表单元素上,用来增加用户体验.例如：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" /><label> 标签的 for 属性应当与相关元素的 id 属性相同。
表单控件之<select> 表单元素
使用场景: 在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用 <select> 标签控件定义 下 拉列语法：
<select> 中至少包含一对<option> 。
在<option> 中定义 selected =“ selected " 时，当前项即为默认选中项。
表单控件之<textarea> 表单元素
- 使用场景: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签。 在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。 使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。例如：
<textarea rows="3" cols="2">
文本内容
</textarea>通过 <textarea> 标签可以轻松地创建多行文本输入框。 cols=“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小。
表单元素几个总结点
表单元素我们学习了三大组 input 输入表单元素丶 select 下拉表单元素丶 textarea 文本域表单元素.这三组表单元素都应该包含在form表单域里面,并且有 name 属性。
<form>
<input type=“text" name=“username”>
<select name=“jiguan”>
<option>北京</option>
</select>
<textarea name="message"></textarea>
</form>综合案例
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
form表单标签里面就是所有用户填写的表单数据；
action="xxx.jsp" 把表单数据提交给哪一个后台程序去处理
method="post" 传递数据时候的方式方法，post代表隐式提交数据；get明文传送数据
-->
<form action="xxx.py" method="get">
<!--
中文的冒号，为了防止生成代码错误；
input + tab 键来生成代码；
type="text" 普通的输入框
placeholder="请输入用户名" 文字提醒
-->
用户名：<input type="text" placeholder="请输入用户名" />
<br />
<!--
type="password" 密码框
-->
密码框：<input type="password" />
<br />
性别：
<!--
type="radio" 单选框
checked="checked" 此属性可以表达默认选中状态
测试细节：
1、点击查看是否为单选效果
2、刷新的时候是否有默认选中的状态
3、点击文字是否可以进行切换
-->
<input type="radio" name="xb" checked="checked" id="nan" />
<label for="nan">男</label>
<input type="radio" name="xb" id="nv" />
<label for="nv">女</label>
<br />
你的爱好：
<!--
type="checkbox" 多选框、复选框
checked="checked" 默认选中
测试细节：
1、刷新的时候是否有默认选中的状态
2、点击文字是否可以进行切换
一切测试要追溯到用户的需求
-->
<input type="checkbox" id="cs" checked="checked" />
<label for="cs">测试</label>
<input type="checkbox" id="cf" />
<label for="cf">吃饭</label>
<input type="checkbox" id="sj" />
<label for="sj">睡觉</label>
<input type="checkbox" id="ddd" checked="checked" />
<label for="ddd">打豆豆</label>
<br />
来自：
<!--
select标签嵌套若干option标签，每组option就是一个下拉菜单中的选项
selected="selected" 下拉菜单的默认选中
测试细节：
1、内容的顺序
2、默认选中的状态
3、内容的条数
-->
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option selected="selected">深圳</option>
</select>
<br />
<!--
textarea 文本域
测试细节：
1、测试三大主流浏览器外观大小是否一致
2、提醒程序员禁用拖拽大小的功能
-->
<style type="text/css">
textarea{resize: none;}
</style>
意见：<textarea name="" id="" cols="30" rows="10"></textarea>
<br />
<!--
type="button" 普通按钮，需要js配合才能实现其它效果
value属性设设置按钮身上的文字
-->
普通按钮：<input type="button" value="按钮" />
<br />
<!--
type="reset" 点击后可以让表单数据恢复默认值
value属性设设置按钮身上的文字
-->
重置按钮：<input type="reset" value="我是重置" />
<br />
<!--
type="submit" 点击后可以让表单提交给指定后台处理
value属性设设置按钮身上的文字
点击后无论是否报错，都与我们无关，最终测试的时候，只要关注数据库中的内容是否正常添加即可
-->
提交按钮：<input type="submit" value="我是提交" />
</form>
</body>
</html>
单选框测试细节：
- 点击查看是否为单选效果
- 刷新的时候是否有默认选中的状态
- 点击文字是否可以进行切换
下拉菜单的测试细节：
- 内容的顺序
- 默认选中的状态
- 内容的条数
textarea 文本域测试细节：
- 测试三大主流浏览器外观大小是否一致
- 提醒程序员禁用拖拽大小的功能
表单的用户体验提升：如果是专门写表单的页面，可以给第一个输入框设置一个默认获取鼠标焦点的属性autofocus="autofocus"