1：功能元素
1.1：列表标签
- HTML中列表标签的分类
无序列表(最多)(unordered list)
有序列表(最少)(ordered list)
定义列表(其次)(definition list)
1：无序列表
无序列表格式
<!-- <ul>只能放<li></li></ul> -->
<!-- <li>相当于一个容器可以放置其他标签</li> -->
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>草莓</li>
<li>橘子</li>
</ul>无序列表样式
<ul type="value"></ul>
disc 默认值 实心圆
circle 空心圆
square 实心方块
虽然通过标签属性也能修改样式, 但是在企业开发中千万不要这么干 2：有序列表
有序列表格式
<h2>有序列表</h2>
<h3>自动加序号</h3>
<ol>
<li>10000</li>
<li>9000</li>
<li>8000</li>
<li>7000</li>
</ol>有序列表样式
<ol type="A"></ol>
1 默认值。数字有序列表。（1、2、3、4）
a 按字母顺序排列的有序列表，小写。（a、b、c、d）
A 按字母顺序排列的有序列表，大写。（A、B、C、D）
i 罗马字母，小写。（i, ii, iii, iv）
I 罗马字母，大写。（I, II, III, IV）3：定义列表
<h2>自定义列表</h2>
<!-- <h2><dl>用于自定义列表</dl></h2> -->
<!-- 会与<dt>定义项目、名字</dt>和<dd>描述每个项目/名字</dd>一起使用 -->
<dl>
<dt>名词</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
</dl>
<br>
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
<h1>dt只能包含dd和dt</h1>
<!-- dt经常是一个dd为多个 -->定义列表注意点
和ul/ol一样, dl和dt/dd是一个整体, 所以他们一般情况下不会单独出现, 都是一起出现 和ul/ol一样, 由于dl和dt/dd是一个组合标签, 所以dl中建议只放dt和dd标签 一个dt可以没有对应的dd,也可以有多个对应的dd, 但是无论有或者没有dd都不推荐使用. 推荐使用一个dt对应一个dd 和li标签一样, 当需要丰富界面时, 我们可以在dt和dd标签中继续添加其它标签
1.2：表格标签
表格标签
表格主要作用展示数据
<table></table>定义表格的标签
<tr>定义表格中的行必须套在<table></table>标签中</tr>
<td>用于定义表格中的单元格，必须套在<tr></tr>标签中</td>
<td>表格数据，及数据单元格内容</td>
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>身高</td>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td>1.78</td>
</tr>
</table>td 单元格
tr 一行
th表头单元格 加粗 居中
表格对齐方式：
水平对齐 ：align ：center left right
垂直对齐：valign: top mid bottom
外边距内边距属性：
cellspacing外边距就是单元格和单元格之间的距离, 我们称之为外边距 默认情况下单元格和单元格之间的外边距的距离是2px
cellpadding内边距就是单元格的边框和文字之间的间隙, 我们称之为内边距 默认情况下内边距是1
细线表格
细线表格的制作方式: 1.给table标签设置bgcolor="black"，cellspacing = "1px" 2.给tr标签设置bgcolor="white" 注意点: table标签和tr标签以及td标签都支持bgcolor属性
表格的完整结构
表格的标题
表格的表头信息
表格的主体信息
表格的页尾信息
<table>
<caption>表格的标题</caption>
<thead>
<tr>
<th>每一列的标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>数据</td>
</tr>
</tfoot>
</table>
caption作用: 指定表格的标题
thead作用: 指定表格的表头信息
tbody作用: 指定表格的主体信息
tfoot作用: 指定表格的附加信息单元格合并
合并单元格方式
跨行合并: rowspan=“合并单元格个数”
跨列合并： colspan=“合并单元格个数”
<table align="center" border="1px" cellpadding="20px" cellspacing="0" width="400px" height="300px">
<thead>
<tr>
<th>姓名</th>】
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">跨行</td>
<td colspan="2">跨列 </td>
<td>男</td>
</tr>
<tr>
<td>35</td>
<td>男</td>
<td>90</td>
</tr>
</tbody>
</table>
2：form表单
表单常用来收集用户信息
表单组成：表单域，表单控件和提示信息三部分组成
- <form action=""></form>用于定义表单域，用于收集信息，提交给后台
- <form action="url地址" method="提交方式" name="表单域名称"></form>
- action属性值 URL：用于指定接收并处理表单数据的服务器程序的url地址
- method属性值 get/post：用于设置表单数据的提交方式
- name 属性值 名称：指定表单的名称，区分多个表单
-input标签
input标签有一个type属性, 这个属性有很多类型的取值,取值的不同就决定了input标签的功能和外观的不同
-明文输入框
<input type="text" name="account" placeholder="请输入用户名">
name:表单提交时，会作为参数的名称，结合输入的值进行匹配，组成 参数名=参数值的结构
placeholder:提示
-暗文输入框
<input type="password" name="password" placeholder="请输入密码">
-输入框设置默认值
<input type="xxx" value="xxx">
-单选框
<input type="radio" name="xx" value="xxx">
注意点:
1.默认情况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后 name属性还必须设置相同的值。
2.要想让单选框默认选中某一个, 那么可以给input标签添加一个checked属性。
3.单选框的value值，才是我们最终需要的值，并不是单选框显示的值。
-多选框
<input type="checkbox" name="xxx" value="xxx">
多选框默认选中 checked
-提交按钮
<input type="submit">
作用: 将表单中已经填写好的数据, 提交到远程服务器
注意点:
要想把表单中填写好的数据提交到远程服务器, 必须具备两个条件
1.需要给form表单添加一个action的属性, 通过这个action属性指定需要提交到的服务器地址
2.需要给需要提交到服务器的表单元素添加一个name属性
-enctype
application/x-www-form-urlencoded
查询字符串，在发送前编码所有字符（默认），转换为?a=a&b=b&c=c
multipart/form-data
不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
-附件上传 <input type="file">
method="POST"
enctype="multipart/form-data"
text/plain
用于发送纯文本内容，空格转换为 "+" 加号，不对特殊字符进行编码，一般用于email之类的；
-普通按钮
<input type="button" value="xxx">
可以通过value属性来给按钮指定标题
作用: 配合JS完成一些操作
-图片按钮
<input type="image" src="">
作用: 配合JS完成一些操作
-重置按钮
<input type="reset" value="xx">
作用: 用于清空表单中已经填写好的数据
注意点:
如果想想改重置按钮默认的按钮标题可以通过value属性来修改
-隐藏域
<input type="hidden" name="xx" value="xxx">
隐藏域
作用 : 配合提交按钮将一些数据默默的悄悄的提交到服务器
-label标签
1.默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让 对应的输入框聚焦, 那么就需要让文字和输入框进行绑定
2.要想让输入框和文字绑定在一起, 那么我们可以使用label标签
3.绑定的格式:
3.1将文字利用label标签包裹起来
3.2给输入框添加一个id属性
3.3在label标签中通过for属性和输入框中的id进行绑定即可
<label for="account">
账号:
</label>
<input type="text" id="account">
-select标签
作用: 用于定义下拉列表
格式:
<select>
<optgroup label="分组名称">
<option>列表数据</option>
</optgroup>
</select>
注意点:
1.下拉列表不能输入内容, 但是可以直接在列表中选择内容
2.可以通过给option标签添加一个selected属性来指定列表的默认值
3.可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类
-textarea标签
作用: 定义一个多行输入框
格式:
<textarea>
</textarea>
注意点:
1.默认情况下输入框可以无限换行
2.默认情况下输入框有自己的宽度和高度
3.可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下 输入
4.默认情况下输入框是可以手动拉伸的
-fieldset组件
fieldset组件用于在一个web表单中对多个控件和标签进行分组
格式:
<form action="">
<fieldset>
<legend>请登录</legend>
账号:<input type="text"><br>
密码:<input type="password">
<input type="submit">
</fieldset>
</form>H5新增元素
-datalist标签
1.作用: 给输入框绑定待选项
<input type="text" list="xxx">
<datalist id="xxx">
<option>xxx</option>
</datalist>
2.datalist格式:
<datalist>
<option>待选项内容</option>
</datalist>
3.如何给输入框绑定待选列表
1.搞一个输入框
2.搞一个datalist列表
3.给datalist列表标签添加一个id
4.给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可
-progress <progress value="70" max="100">70%</progress>
progress表示任务的完成情况，常用于进度条
max 定义进度元素所要求的任务的工作量，默认值为1
value 定义已经完成的工作量，如果max值为1，该值必须是介于0~1之间的小数。
-邮箱 <input type="email">
可以自动校验输入的内容是否符合邮箱的格式
-域名 <input type="url">
可以自动校验输入的内容是否是URL地址
-数字 <input type="number">
输入框中只能输入数字
-时间 <input type="date">
可以通过日历来选择时间
-颜色 <input type="color">
可以通过取色板来选择颜色