HTML基础
一、列表标签
1.1 列表的应用场景
场景:在网页中按照**行**展示关联性的内容
特点:行,整齐显示
种类:无序、有序、自定义
2.1 无序列表
场景:在网页中表示一组无顺序之分的列表
标签组成:
1.整体:ul
2.每一项:li
特点:每一项前默认显示圆点
注意:整体ul只允许包含li,li可以任意嵌套
3.1 有序列表
场景:表示有顺序之分的列表
标签组成:
1.整体:ol
2.每一项:li
特嗲:默认显示序号标识
注意:同上
4.1 自定义列表
场景:在网页的底部导航中通常会使用自定义列表
标签组成:
1.dl:表示自定义列表的整体,用于包裹dt/dd标签
2.dt:表示自定义列表的主题
3.dd:表示自定义列表的针对主题的每一项内容
特点:dd前会默认缩进
注意:基本同上
5.1 列表标签总结
无序最常用、有序偶尔用、自定义底部导航用。
二、表格标签
1.1 表格的基本标签
场景:在网页中以行+列的单元格的方式整齐展示和数据
基本标签:
1.table:表格整体
2.tr:表格的每一行
3.td:表格的每一个单元格,用来包裹内容
注意:
标签的嵌套关系:table>tr>td
2.1 表格相关属性
场景:设置表格基本展示效果
常见属性:
1.border 数字 边框宽度
2.width 数字 表格宽度
3.height 数字 表格高度
3.1 表格标题和表头单元格标签
场景:在表格中表示整体大标题和一列小标题
标签:
1.caption:表格大标题
2.th:表头单元格
注意:
1.caption写在table内部
2.th写在tr标签内部(替换td)
4.1 表格的结构标签(了解)
场景:让表格的内容结构分组,突出表格的不同部分(头部、主体、底部),使语义更加清晰
结构标签:
1.thead:头部
2.tbody
3.tfoot
注意:
1.表格结构标签内部用于包裹tr
2.可以省略
3.凸显主题Body内容,高度不均分
5.1 合并单元格
5.1.1 合并思路
场景:将水平或垂直多个单元格合并成一个单元格
(1)跨行合并(垂直合并成一个)
(2)跨列合并(水平合并成一个)
5.1.2 合并——代码实现
步骤:
(1)明确合并哪几个单元格
(2)通过左上原则,确定保留谁删除谁
a.上下合并保留上,删除其他
b.左右合并保留左,删除其他
(3)给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)
注意:只有同一个结构标签中的单元格才能合并,不能跨结构标签合并。
三、表单标签
1.1 input系列标签基本介绍
能够使用表单相关标签和属性,实现网页中表单类网页结构搭建。
场景:在网页中显示收集用户信息的表单效果
标签名:input,通过type属性值的不同,展示不同效果。
1.2 input系列标签——文本框
场景:输入单行文本的表单控件
type属性值:text
常用属性:
placeholder:占位符,提示文本
1.3 input系列标签——密码框
场景:输入密码
type属性值:password
常用属性:同上
注意:type属性值不要拼错或多空格,否则相当于设置了默认文本框状态
1.4 input系列标签——单选框
场景:在网页中显示多选一的单选表单控件
type属性值:radio
常用属性:
1.name:分组。有相同name属性值得单选框为一组,一组中同时只能有一个被选中
2.checked:默认选中
注意:name分组,相同Name属性值的单选框为一组,一组只能有一个被选中。
1.5 input系列标签——复选框
场景:显示多选多的多选表单控件
type属性值:checkbox
1.6 input系列标签——文件选择
场景:在网页中显示文件选择的表单控件
type属性值:file
常用属性:
multiple:选择多个文件
1.7 input系列标签——按钮
场景:在网页中显示不同功能的按钮表单控件
type属性值:
1.submit:提交按钮
2.reset:重置按钮
3.button:普通按钮
注意:如果需要实现以上按钮功能,需要配合form标签使用(form使用方法:用form标签把表单标签一起包裹起来)
2.1 button按钮标签
场景:在网页中显示用户点击的按钮
标签名:button
type属性值:同input系列
注意:谷歌浏览器中button是默认提交 ,双标签,更便于包裹其他内容:文字、图片等。
3.1 select下拉菜单标签
场景:在网页中提供多个选择项的下拉菜单表单控件
标签组成:
1.select:下拉菜单的整体
2.option:下拉菜单的每一项
常见属性:
selected:默认选中
4.1 textarea文本域标签
场景:在网页中提供可输入多行文本的表单控件
标签名:textarea
常见属性:
1.cols
2.rows
注意:
1.右下角可以拖拽改变大小
2.推荐同CSS设置
5.1 label按钮标签
场景:用于绑定内容与表单标签的关系
标签名:label
使用方法1:
1.使用Label标签把内容包裹起来
2.在表单标签添加d属性
3.在label标签的for属性中设置对应的d属性值
使用方法2:
1.直接使用label标签把那内容和标签一起包裹
2.把for属性值删除
四、语义化标签
1.1 没有语义的布局标签——div&span
场景:实际开发网页时会大量频繁的使用div和span标签
div标签:独占一行
span标签:在一行显示
2.1 有语义的布局标签(了解)
五、字符实体
1.1 HTML的空格合并现象
场景:如果在html代码中同时出现多个空格,最终只会解析出一个
结构:&英文;
常见实体:
显示结果 | 描述 | 字符
--- | --- | ---
| 空格 |
< | 小于号 | <
> | 大于号 | >
2.1 常见字符实体