html知识总结·第二弹

这是我在学习时总结的笔记，大家可以看看，希望对大家的记忆有所帮助，若有知识问题，欢迎大家指正 ，序号是接着上一个html总结文档的，这两弹就是html所有的知识点了，现在我们就可以实现一个有基本功能的网页了，之后我们可以使用css来使我们的网页更加美观

五.列表：
1.无序列表：
（1）标签组成：
ul：表示无序列表的整体，用于包裹li标签
li：表示无序列表的每一项，用于包含每一项的内容
（2）显示特点：
列表的每一项前默认显示圆点标识
（3）注意点：
ul标签中只允许包含li标签
li标签可以包含任意内容
2.有序列表：
（1）标签组成：
ol：表示有序列表的整体，用于包裹li标签
li：表示有序列表的每一项，用于包含每一行的内容
（2）显示特点：
列表的每一项前默认显示序号标识
（3）注意点同无序列表注意点
3.自定义列表：
（1）标签组成：
dl：表示自定义列表的整体，用于包裹dt/dd标签
dt：表示自定义列表的主题
dd：表示自定义列表的针对主题的每一项内容
（2）显示特点：
dd前会默认显示缩进效果//若要做到排齐，需要使用css
（3）注意点：
dl标签中只允许包含dt/dd标签
dt/dd标签可以包含任何内容（dt与dd的字体大小也是一样的，若要设置字体大小不同，则需要使用css）
六.表格
1.标签组成：
table：表格整体，可用于包裹多个tr
tr：表格每行，可用于包裹td
td：表格单元格，可用于包裹内容
只有以上标签是无法实现显示表格框线条的，需要设置属性：
2.表格相关属性：（一般标签的属性都是在标签前半部分通过加空格后再在后面写属性）
border：设置边框宽度
width：设置表格宽度
height：设置表格高度
但实际开发中针对样式效果推荐用css设置
3.表格标题和表头单元格标签
（1）使用场景：在表格中表示整体大标题和一列小标题
eg：           学生成绩单
   姓名              成绩                  评语
    1                      12                   好
    2                      33                   好
（2）表格扩展标签：
第一个：caption   表格大标题    默认在表格整体顶部居中位置显示
第二个：th    表头单元格   表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示
（3）注意点：
caption标签写在table标签内部
th标签书写在tr标签内部（用于替换td标签）
4.表格的结构标签（了解）：
（1）使用场景：
让表格的内容结构分组，突出表格的不同部分（头部，主体，底部），使语义更加清晰
（2）结构标签：
标签名：        名称：
thead            表格头部
tbody            表格主体
tfoot              表格底部
（3）注意点：
表格结构标签内部用于包裹tr标签
表格结构标签可以忽略，因为这只是用来使电脑看代码时方便理解，对于电脑的处理来说的，这样是可以起到加快电脑渲染执行代码效率的作用
5.表格的合并单元格功能：
（1）使用场景：
将水平或竖直多个单元格合并为一个单元格，水平合并是跨列合并，竖直合并是跨行合并
（2）合并单元格的代码实现：
通过左上原则，确定保留谁删除谁，保留左上的一致的内容，之后就给保留的单元格设置跨行合并（rowspan）或者跨列合并（colspan）
（3）注意点：
只有在同一个结构标签中的单元格才可以合并，不可以跨结构标签进行合并

七.表单标签：
1.学习路径：
（1）input系列标签
（2）button按钮标签
（3）select下拉菜单标签
（4）textarea文本域标签
（5）lable标签
2.具体学习：
（1）input系列标签
input标签可以通过type属性值的不同，展示不同效果
text：文本框，用来输入单行文本
password：密码框，用于输入密码
radio：单选框，用于多选一
checkbox：多选框，用于多选多
file：文件选择，用于之后上传文件
submit：提交按钮，提交给后端服务器
reset：重置按钮，恢复表单默认值
button：普通按钮，默认无功能，之后配合js添加功能

input占位符（提示信息）：
text和password常用属性：placeholder：占位符，提示输入的信息（虚化字）

type属性值为radio常用属性：
name：用于分组来真正落地实现单选功能
checked：默认选中（也可以用于checkbox多选功能）

属性值为file常用属性：
multiple：用于实现多文件的选择，如果没有这个就只能选择一个文件来上传

 input系列标签—按钮：
·要让按钮标签真正实现功能，这就先需要一个表单域标签，这样可以确定按钮的控制范围从而可以实现按钮的功能
表单域标签是form，其中的action属性是用来写提交地址的
·button按钮在刚开始写出的时候是没有任何提示文字的，这时候可以用value属性写在button标签内部，这是实现显示提示文字的属性，value标签也可以写在submit里，也可以实现提示文字的作用

（2）button按钮标签：（把button作为标签使用）
同理，button的type属性值不同可以实现不同功能的按钮：
submit，reset，button是其属性值
那为什么要有button标签和input标签两种呢，因为button是双标签，更便于包裹其他内容，如文字，图片等

（3）select下拉菜单标签：
标签组成：
·select标签：下拉菜单的整体
·option标签：下拉菜单的每一项
常见属性：
selected：下拉菜单的默认选中

（4）textarea文本域标签：（可输入多行内容的一块区域）
常见属性：
cols：规定文本域内可见宽度
rows：规定了文本域内可见行数
注意点：
·右下角可以拖拽来改变大小
·实际开发时对于样式效果推荐用css设置

（5）lable标签：
作用：在单选功能中，点字也可以实现选中单选小圆圈的作用，也就是将其视为了一个整体
标签使用方式：
使用方式1：
1.使用lable标签把内容包裹起来
2.在表单标签上添加id属性
3.在lable标签的for属性中设置对应一样的id属性值
使用方式2：
1.直接使用lable标签把内容和表单标签一起包裹起来
2.需要把lable标签的for属性删除即可

八.语义化标签：
1.没有任何语义的布局标签：
div标签：一行只显示一个
span标签：一行可以显示多个
2.有语义的布局标签（了解）：（也是一行只显示一个）
html5新版本推出的：做手机端网页要用的
标签：
header：网页头部
nav：网页导航
footer：网页底部
aside：网页侧边栏
section：网页区块
article：网页文章

九.字符实体：
html中的空格合并现象：
在html中，单纯使用多个空格在一起，最后的效果是只会出现一个空格的效果，要实现多个空格的效果，需要使用空格的字符实体,即&nbsp；（；不能丢），在html源代码中直接加入就好了，相当于空格，其他的东西基本不用记忆，因为使用频次很低