HTML标签三
上期回顾
-
路径的书写
1.绝对路径的书写
2.相对路径的书写 -
img标签
1.src属性
2.alt属性
3.title属性
4.与a标签的嵌套使用 - br标签
-
video标签与audio标签
1.书写格式及属性的简写
2.自身带有属性：
autoplay
controls
loop
preload
muted
poster
width
height
其中的（preload，width，height 在video标签有，而audio标签无）
3.第二种书写格式与其背景 -
假链接
1.什么是假链接？
2.两种假链接的书写格式和它们的异同
列表标签
-
什么是列表？
列表就是给一堆数据添加列表属性，使一堆相关的元素成为一个整体 -
列表的分类
1.无序列表（常用）
2.有序列表
3.定义列表
无序列表（unordered list）
- 格式：
<ul type="disc">
<li>牛奶</li>
<li>咖啡</li>
<li>茶</li>
</ul>
无序列表
type属性：决定了无序列表前面的图形，常见如下:
dise:实心圆（默认值）
circle:空心圆
square:实心方块
1.ul标签和li标签是一般情况下都是组合使用的
2.ul标签中一般只放li标签，不会放其它的标签
3.不要为了加个小圆点而使用ul li 标签，注意语义化，小圆点可以由CSS来控制
4.应用：导航条、商品列表等.
有序列表（ordered list）
- 格式：
<ol type="1">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
<ol>
有序列表
type属性：决定了有序列表前面的图形，常见如下:
1:数字（默认值）
a:小写字母
A:大写字母
其它与无序列表基本一样
定义列表（definition list）
- 格式：
<dl>
<dt>杯子</dt>
<dd>用于喝水</dd>
<dt>音乐</dt>
<dd>用于放松</dd>
</dl>
定义列表
dt(definition title)：定义列表的标题
dd(definition description)：定义列表标题对应的描述
应用场景：
1.网站底部相关信息
2.图文混排
其它与ul li 几乎一样，推荐：一个dt对应一个dd
表格标签
-
什么是表格标签？
给一堆数据添加表格语义 - 格式：
<table border="1">
<caption>
<h2>XXX统计</h2>
</caption>
<tr>
<td>(1,1)</td>
<td>(1,2)</td>
<td>(1,3)</td>
<td>(1,4)</td>
</tr>
<tr>
<td>(2,1)</td>
<td>(2,2)</td>
<td>(2,3)</td>
<td>(2,4)</td>
</tr>
</table>
表格标签
表格标签一
caption标签：
定义表格标题，caption 标签必须紧随 table 标签之后，每个表格只能定义一个标题，通常这个标题会被居中于表格之上。
border：表格外边框的宽度，不写该属性，则不显示外边框，效果如图（表格标签一）
一对table标签代表一个表格
一对tr标签代表表格中的一行
一对td标签代表一行中的一个单元
若想知道table标签的各种属性，点击这里
表单标签
- 格式：
<form action="https://www.baidu.com">
<input type="text" value="默认值"><br>
账号:<input type="text" name="user"><br>
密码:<input type="password" name="password"><br>
隐藏输入框:<input type="hidden" name="kevin" value="666"><br>
单选:
<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女<br>
多选:
<input type="checkbox">香蕉
<input type="checkbox" checked>橘子
<input type="checkbox">西瓜
<input type="checkbox">榴莲<br>
按钮:
<input type="button" value="按钮">
<input type="image" src="./按钮.png" width="50px">
<input type="submit">
<input type="reset">
</form>
表单标签
提交
form标签：用于包裹用户信息
input:输入框
type属性：
- text：输入普通文本（可见，明文）
- password：输入密码（不可见，暗文）
- hidden：隐藏的文本框，默认上传一些数据到服务器，用户不可见
- radio：单选框，同一个类型里的单选框需要写上相同的 name 属性，以区分哪些选项是单选的，加入 checked 表示某一项是默认选中的
- checkbox：多选框，checked 属性与单选框一样
- button：普通按钮
- image：图片按钮
- submit：将 form 的数据提交到远程服务器，提交的条件：
1.提交地址：写在 form 标签的 action 属性里
2.提交哪些数据：在要提交的标签中加入 name 属性，如 name="user"，提交效果如上图- reset：重置按钮，用于重置 form 表单，恢复到默认值
关于form更多的解释点击form
关于input更多的解释点击input
label标签
<form action="">
<label for="uname">账号：</label>
<input type="text" id="uname"><br>
<label for="pwd">密码：</label>
<input type="password" id="pwd"><br>
</form>
label标签
label标签：将输入框前的文字与输入框绑定在一起，实现点击文字，也能使输入框获得焦点，优化用户的体验。
具体绑定要求：
1.input 标签输入框具有 id 属性
2.label 标签具有 for 属性，值为 input 标签的 id 值
补充扩展:实体字符
先看代码：
<h2>
我们 正在学习<h2>标签
</h2>
这是什么情况？
解释：在html中存在空白折叠（将回车、多空格等当做一个空格处理），并且html中不能出现特殊字符，如'<' '>'，如果出现，会被当成标签处理
解决方法:使用字符实体
<h2>
我们 正在学习<h2>标签
</h2>
表示空格
< 小于 '<' (less than)
> 大于 '>' (greater than)
更多的实体字符点击实体字符
END
