前端学习 day2 (列表标签/表格标签)

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特殊字符

&lt;             <           小于号或显示标记
&gt;              >           大于号或显示标记
&amp;             &           可用于显示其它特殊字符
&reg;             ®           已注册
&copy;             ©           版权
&trade;             ™           商标
&nbsp;                        不断行的空白
&yen;            ￥         人民币

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标签及表格