1. HTML列表
1. 无序列表 各列表之间没有次序,各项之间为并列关系
<ul> 列表容器
<li></li> 列表项
<li></li>
<li></li>
</ul>
特性
ul 和 li 标签都是块级标签
宽度默认撑满整个父元素
高度默认由内容撑开
独立成行
自带外间距
自带内填充
css属性
list-style-type属性: 列表符类型
circle 空心圆
disc 实心圆(默认值)
square 实心正方形
none 去掉列表符
应用场景
新闻列表
导航
商品列表
注意
ul 的直接子元素只能是li
2. 有序列表 有排列次序 各项之间为并列关系
<ol> 列表容器
<li></li> 列表项
<li></li>
</ol>
属性
strat 开始值写在开始标签中
reversed 倒叙 写在开始标签中
type "a" 小写字母
"A" 大写字母
"i" 小写罗马数字
"I" 大写罗马数字
"1" 数字 默认值
特性
与无序列表基本一致
应用场景: 有序的列表
3. 自定义列表
<dl> 列表容器
<dt></dt> 专业名词
<dd></dd> 对专业名词`的解释
</dl>
dl 自定义列表 dt 自定义列表项 dd 自定义列表项的描述
在浏览器中,dd标签的内容会缩进显示
特性
宽度默认撑满整个父元素
高度默认由内容撑开
独立成行
dl,dd默认自带外间距
应用
名词解释,分类
2. 语义化
1. 什么是HTML语义化?
语义化是指用合理的HTML标签以及其特有的属性去格式化文档内容
2. 语义化的好处有哪些?
在没有css的情况下,页面也能呈现出很好的内容结构
使代码更具可读性 便于团队开发和维护
有利于SEO搜索引擎优化
有利于用户体验
3. HTML特殊字符
< < 小于号或显示标记
> > 大于号或显示标记
& & 可用于显示其它特殊字符
® ® 已注册
© © 版权
™ ™ 商标
不断行的空白
¥ ¥ 人民币
4. HTML表格
1. 表格简介
表格由table标签来定义.每个表格均有若干行 由tr标签定义,每行被分割为若干单元格由td标签定义 类比 excel表格 网页中的表格
2. 表格的作用
之前: web开发人员国区也常常说那个表格来完成整个网页的布局,结构嵌套复杂修改维护困难被div+css取代
现在: 用于显示和展示数据(能够简介迅速的查找或呈现不同类型的数据及它们之间的关系\)
注意
现在HTML表格应该用于表格数据,而不是用来实现网页布局
3. 表格基本标签
table
定义表格
tr
定义表格中的行
td
普通单元格 定义表格数据 单元格可以包含文本 图片 列表 段落 表单 水平线 表格等等
默认样式 内容水平居左 垂直居中
th
表示表头得单元格 通常在行或列的开始处 定义行或列包含的数据类型
默认样式 字体加粗 内容水平居中 垂直居中
表格包含三部分 table tr 单元格(th td)
table 表格的容器
tr 表格的行
th 表头单元格,默认文字加粗 水平方向垂直方向居中显示
td 普通的单元格 默认水平居左 垂直方向居中
注意
表格必须嵌套在table中
单元格必须嵌套在tr行标签中
在单元格内可以添加任意的标签和内容
4 表格常用属性
table 属性
width/height
定义表格的宽或高
省略单位默认px
border
使表格的边框属性可以显示一个带有边框的表格
如果不定义边框属性 表格将不显示边框
cellpadding
定义单元格中内容和边框之间的间距 单位是像素可以省略
cellspacing
单元格和单元格之间的间距 默认值为2 单位是像素可以省略
borderColor
改变边框颜色
td th 属性
width/height
定义表格的宽或高
省略单位默认px
align
单元格水平方向的对齐方式
取值 lefet 左 center 中 right 右 \
valign
单元格垂直方向的对齐方式
取值 top 上 center 中 bottom 下
5. 表格结构标签
caption
定义表格的标题
默认样式 居中于表格之上
注意
caption 标签必须紧随table标签之后
thead/tbody/tfoot
thead 用于组合html表格的表头内容
tbody 用于组合html表格的主体内容
tfoot 用于组合html表格的页脚内容
总结
每个表格只能定义一个标题caption
thead tbody tfoot 通常配合使用 用于划分表格语义 实现长表格分布加载
注意
在一个表格中只能有一组thead tfoot标签 可以有多个tbody标签
6. 合并单元格
rowspan
跨行合并
colspan
跨列合并
操作步骤
确定是合并行还是合并列
找到目标单元格 添加属性及合并单元格的数量
删除多余单元格
7. 表格特性
未定宽度的表格 单元格适应内容(单元格宽高由内容撑开)
同一行的单元格 高度只会识别一个 取高度最大值
同一列的单元格 宽度只会识别一个 取宽度最大值
表格可以包含其他HTML标签及表格