一、列表标签
1.无序列表
父级别：
- 无序列表的标题
子级别：
- 无序列表一行的内容
- ----表示无序列表的每一项，用于包含一行的内容
语义：构建没有顺序的列表
特点：列表的每一项前面默认显示黑色小圆点
注意事项：
- ul标签只允许包含li标签
- li标签可以包含任何内容
<ul>水果列表<li>榴莲</li><li>哈密瓜</li></ul>
2.有序列表
父级别：
- 有序列表的标题
子级别：
- 有序列表一行的内容
- ----表示有序列表的每一项,用于包含一行的内容
语义：构建有顺序的列表
特点：列表中的每一项前面默认显示排列序号注意事项：
- ol标签只允许包含li标签
- li标签可以包含任何内容
<ol>蔬菜列表<li>青菜</li><li><a>白菜</a></li> </ol>
3.自定义列表
相比于有序和无序，它提供了更简洁和带缩进的选择
父级别：
- 自定义列表的标题
子级别：
自定义列表一行的内容，默认不缩进 ----示自定义列表的每一项,用于包含一行的内容子级别：
- 自定义列表一行的内容，默认缩进
----表示自定义列表的每一项,用于包含一行的内容兄弟级别：
语义：构建自定义列表
特点：dd前会默认显示缩进效果
注意事项：
- dl标签只允许包含dt和dd标签
- dt/dd标签可以包含任何内容
<dl>你需要？<dt>帮助中心</dt><dt>客服信息</dt><dd>账户管理</dd><dd>订单操作</dd> </dl>
二、表格标签
1.表格标签的组成
父级别：
--表格的整体，可用于包裹多个tr子级别: --表格每行，可用于包裹td
子级别： 表格的标题 --表格 外 的大标题，
自动表格头居中效果子子级别： 单元格内容 --表格单元格，可用于包裹内容,自带加粗居中效果–常作为表头
子子级别： 单元格内容 --表格单元格，可用于包裹内容兄弟级别
语义：构建表格
特点：表格的形式呈现注意事项：标签的嵌套关系:table>tr=caption>th=tr
<table><caption>家庭</caption><tr> <th>直系</th><td>大哥</td> <td>小弟</td></tr><tr><th>旁系</th><td>朋友</td> <td>兄弟</td> </tr> </table>
2.表格标签的属性
border=“” --控制表格 边框 的宽度
width=“” --控制 表格 宽度
height=“” --控制 表格 高度注意事项：实际开发针对样式效果以CSS为主
<table border="3"><caption>植物</caption><tr><th>水果</th><th>蔬菜</th></tr><tr><td>苹果</td><td>青菜</td></tr><tr><td>梨</td><td>瓜</td></tr> </table>2.合并单元格
垂直合并（跨行合并）
水平合并（跨列合并）
合并单元格步骤：
-
明确合并哪几个单元格
-
通过左上原则，确定保留谁删除谁
-
上下合并一只保留最上的，删除其他
-
左右合并一只保留最左的，删除其他
属性名：
- rowspan(跨行合并)
- colspan(跨列合并)
属性值：
- 合并单元格的个数
- 合并单元格的个数
说明：
- 跨行合并，将多行的单元格垂直合并
- 跨列合并，将多列的单元格水平合并
注意事项：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并 (不能跨: t-head、t-body、t-foot)
三、表单标签
1.表单标签的组成
input系列标签：
语义：构建表单
特点:
- input标签可以通过type属性值不同，来展示不同的效果
- 单标签
注意事项：相邻input标签没有换行
2.表单的type属性
属性值 效果 text 文本框 password 密码框 radio 单选框 checkbox 多选框 file 文件上传框 reset 重置按钮 submit 提交按钮 button 按钮 placeholder属性 提示字属性,提示用户输入内容的文本 <input type="text" name="" id="" placeholder="请输入">text值 输入文本框 <input type="text" placeholder="输入账户">注册password值 输入密码框 <input type="password" placeholder="输入密码">密码radio值 多选一的单选 常配合一起的属性: name：用于单选的分组，从而实现单选功能 checked:默认提前选中 温馨提示: 具有相同name的单选框为一组，一组中只能有一个被选中，不同组之间可以多选 <input type="radio" name="sex">男 <input type="radio" name="sex">女 <br> <input type="radio" checked>三1 <input type="radio">三2checkbox值 实现多选 常配合一起的属性: checked:默认提前选中 <input type="checkbox" checked >香蕉 <input type="checkbox" >苹果file值 实现上传文件 常配合一起的属性: multiple:实现上传多个文件 默认上传单个 <input type="file" >上传单个文件 <input type="file" multiple >上传多个文件reset值 清空表单所填的内容 <input type="reset" values="清空表单">submit值 用于提交表单信息给数据库后台 <input type="submit" values="提交">四、JS预留标签
button 按钮标签：< button>按钮内的内容< /button>
语义：普通按钮，默认无功能，一般配合js使用
特点：双标签
温馨提示：
- 谷歌浏览器button默认是提交按钮
- button是双标签，便于包裹其他内容：文字\图片等
五、下拉菜单标签
1.下拉菜单标签的组成
< select >
< option > < /option> < option > < /option>
</ select>
父级别：select
子级别：option
特点：双标签
2.下拉菜单标签的属性
默认选中这个option
<select>地址<option>上海</option><!-- 默认选中 --><option selected>广东</option> <option>江西</option></select>
六、文本域标签
1.文本域标签的组成
< textarea >< /textarea>
语义：提供可输入多行文本的表单控件
特点:
- 双标签
- 可调整文本域大小
注意事项：
- 右下角拖拽可以改变大小
- 实际开发以css来针对样式效果
2.文本域标签的属性
cols：控制文本域宽度
rows：控制文本域高度<textarea rows="10" cols="10"></textarea>
七、范围之内选中标签
< label > < /label>
语义：提供可输入多行文本的表单控件
特点:
- 双标签
- 可调整文本域大小
注意：本质上就是转移点击对象，类似于超链接
使用方法 1.使用lableb标签把整个点击范围包裹起来，再使用for属性来指向选中谁 2.直接整个包裹在lable里面 <label for="da">男：</label> <input type="radio" name="" id="da"><label for="da">女：<input type="radio" name="" id="da"></label><label for="da">ddddddddddddddd1</label> <button id="da">按钮</button>八、语义化标签
1.没有语义化标签
< div>< /div>
< span>< /span>>
作用：用于配合使用css进行网页布局
使用两者区别：
- div是独占一行的
- span只占需要行
<div>div</div> <div>div</div> <span>span</span> <span>span</span>2.有语义化标签
空格字符   实现一个空格九、HTML5布局标签
十、文本显示
在标签内写文本的时候，里面的换行和空格是会被显示出来的，而标签标签之间的空格和换行是不会显示的
换行只有超出了盒子范围后，才会显示。否者是空格
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}p{width: 20px;background-color: pink;}</style> </head> <body><div>das da adasdasd<p>ssssssssssssssssssssssssssssssssssssssssssssss</p><span> gggggggggggggggggggg</span></div> </body> <script> </script> </html>
 #其他#其他#媒体)
)
