一、列表
1.作用：默认显示方式为从上到下的显示数据
2.列表的组成 列表类型和列表项
3.列表的分类：
有序列表 无序列表 自定义列表
有序列表：
语法：ol li
把大象装进冰箱分几步：
- 打开冰箱门
- 把大象装进冰箱
- 关上冰箱门
无序列表：
语法： ul li
- 打开冰箱门
- 把大象装进冰箱
- 关上冰箱门
自定义列表
语法： dl列表的类型 dt列表的标题 dd 列表项
- 西府赵王
- 李元霸
- 冷面寒枪
- 罗成
有序列表：
语法:ol li
把大象装进冰箱分几步：
<ol type="">
<li>打开冰箱门</li>
<li>把大象装进冰箱</li>
<li>关上冰箱门</li>
</ol>
无序列表：
语法： ul li
把大象装进冰箱分几步：
1.打开冰箱门
2.把大象装进冰箱
3.关上冰箱门
<ul type="">
<li>打开冰箱门</li>
<li>把大象装进冰箱</li>
<li>关上冰箱门</li>
</ul>
自定义列表
语法： dl列表的类型 dt列表的标题 dd 列表项
<dl>
<dt>西府赵王</dt>
<dd>李元霸</dd>
<dt>冷面寒枪</dt>
<dd>罗成</dd>
</dl>
二、表单
1.表单的作用：
用于显示、收集用户信息，并将信息提交给服务器
2.表单组成
1.表单元素：负责将用户数据提交给服务器
2.表单控件：负责接收用户的数据（和用户进行交互的）
表单元素
form 属性
action： 定义表单被提交时的动作，主要就是服务器上要处理数据 的应用程序URL找谁处理（提交地址）
method：指定数据提交的方式
get传输 显示提交 可以显示在地址栏上的 有数据大小限制的
post传输 隐式传输 所有提交数据时都是看不见的，相对来来说 比较安全 无数据大小限制
表单控件：提供多个类型的表单控件，并具有可视化的外观
input组件:
type:类型
value:值
name：控件的名称
disabled：禁用控件
text：普通的文本框
password：密码框
email： 邮箱框
submit： 提交按钮
bottom ：普通按钮
radio： 单选
checkbox: 多选
image: 图片提交
select控件（下拉列表）
size： 显示数量 如果不为1的话 则变成滚动列表而不是下拉列表
option : selected:
文本域：
textarea cols 指定文本的列数 （宽度）
rows 指定文本的行数 （高度）
关联文本于控件：
label
1.首先在要关联的input控件上加上一个id
2.用label标签包含住文本并且加上 for属性
例：
input组件:
<form action="http://www.4399.com" method="post">
用户名:<input type="text" placeholder="请输入用户名不能以数字开头"/><br />
密码:<input type="password" /><br />
确认密码:<input type="password" /><br />
邮箱:<input type="email" /><br />
性别：<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<br />
爱好:<input type="checkbox"/>唱歌 <input type="checkbox"/>跳舞 <input type="checkbox"/>rap <input type="checkbox"/>篮球<br />
提交按钮:
<input type="submit" value="提交"/>
图片提交按钮:
<button type="t"><img src="img/timg.jpg"></button>
selec控件（下拉列表）：
<select size="">
<option selected="selected">公历</option>
<option>农历</option>
</select>
<select size="">
<option selected="selected">年</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
</select >
<select size="">
<option selected="selected">月</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select size="">
<option selected="selected">日</option>
<option>6</option>
<option>7</option>
<option>8</option>
</select>
文本域:
个性签名：<textarea cols="40" rows="50" readonly="readonly"></textarea>
关联文本控件：
例:当鼠标点击多选框或者多选框后面文本内容（网球，篮球，足球，乒乓球。）时都可以实现多选框的勾选或者取消勾选功能。
<input type="checkbox" id="ckx"/><label for="ckx">网球</label>
<input type="checkbox" id="basketball"><label for="basketball">篮球</label>
<input type="checkbox" id="football"><label for="football">足球</label>
<input type="checkbox" id="tableTennis"><label for="tableTennis">乒乓球</label>
三、浮动框架
作用：可以在一个浏览器窗口中同时显示多个页面文档
语法 ： iframe
属性 ：
src ：提取地址
width: 宽度
height: 高度
第一种用法
<iframe src="http://www.baidu.com" width="600px" height="600px" frameborder="0"></iframe>
拓展:frameborder 属性 -- HTML框架边框的显示方式
此属性应使用在frame标签中 frameborder属性取值: 1 -- 有边框 0 -- 无边框 默认值为1 border，中文"边框"的意思。
iframe和frame差不多,也是一个框架,只是因为frame更简单,效果更丰富,有画中画之称.
<iframe src="http://www.4399.com" width="500px" height="500px"></iframe>
第二种用法 和超链接的结合使用
1.创建超链接标签
2.创建iframe标签
3.在iframe加上一个name属性
4.改变超链接的target属性 改变为name的值
<a href="http://www.baidu.com" target="link">百度</a>
<a href="http://www.4399.com" target="link">4399</a>
<iframe width="500px" height="500px" name="link"></iframe>
四、摘要与细节
作用：允许将页面某部分内容进行展开或收缩
语法：
第一步 写上 摘要标签 details
第二步 写上标题 summary
第三步 写内容
<details>
<summary>用户信息</summary>
姓名<input type="text" />
<br />
年龄<input type="text" />
</details>
五、度量标签
度量标签
min：最小值
max：最大值
value：当前显示的度量值0
高亮标签：
语法： mark
例：
l<mark>高亮标签</mark>
高亮标签
来源：CSDN
作者：weixin_45976057
链接：https://blog.csdn.net/weixin_45976057/article/details/103501849