列表+链接+表格笔记

一.列表

1.组成：dl 、dt 、dd，三个标签参与。

• dl:定义一个定义列表

• dt:定义标题（列表项）

• dd：对标题的说明和解释

嵌套关系：dl>dt+dd.

格式：

   <dl>

​      <dt></dt>

​      <dd></dd>

​    </dl>

2.知识点：

• dt与dd是同级

• 一个dt可以用多个dd来解释。

• dd是解释上面最近的一个dt。

3. 应用场景：需要对列表项进行解释说明时。

eg：京东侧边导航栏。

二.超链接

1.定义：

a标签：anchor ，锚；

a标签不仅可以给文字添加超链接，也可以给图片，音频，视频，表格等添加超链接。

2.双标签：

<a></a>

作用：(页面跳转)控制页面之间的跳转，用于从一个页面跳转到另一个页面。

格式：

<a href="跳转的目标地址">需要展示给用户看的内容</a>。

3.常用属性：

​ 1.href:

​ 规定链接跳转到指定页面的URL。

​ url可以是外部链接 eg：https://www.pay.qq.com 注意：域名前需要添加http或https（较安全）。

​ url还可以是一个内部的文件路径。当文件的后缀为压缩文件或者exe，会下载。

​ 2.target:

​ _self ：默认值，从当前标签页跳转。

​ _blank ：打开一个新的页面，在新的页面中进行跳转。

4.空链接：

​ 使用场景：在企业开发前期，其他界面还没有开发完成，我们不知道要跳转到什么地方。这个时候就可以使用空链接。等到项目后期，其他界面开发完成后，再将空链接替换成真实的跳转路径。

​ 格式：

<a href="#">内容</a>

​ eg:
1.

<a href="#">小米手机</a> 

​ 2.

<a href="javascript:">小米手机</a>

​ 区别：

• #会自动回到网页的顶部，a链接会有点击效果。
• JavaScript：不会有任何点击效果。

5.锚点

锚：生活中，锚是用来把船固定到某一个位置上。

作用：快速定位到页面中的某一个位置。

使用步骤：

1.现在目标位置的标签中添加ID属性

2.创建一个a标签

3.在a标签中的href属性中，使用 #+ID（目标位置标签的ID）

（ 除了当前页面的锚点外，还可以跳转到别的网页中的锚点，包括网络地址。）

三. 转义字符

1.使用规范：以&开头，以 ; 结尾。

2.常见转义字符：

&nbsp; 空格

< 小于号

&gt; 大于号

&copy; 版权符号

四.表格

1.展示数据。

表格分区：（都是语义化标签）

• 标题 caption
• 表头 thead
• 主体 tbody
• 尾部 tfoot

2.布局：

是很早之前的用法，现在已经废弃，改为使用div+css。

table>tr>td

table： 定义一个表格

tr ：定义表格中的一行

td ：定义表格中一行中的一个单元格

th： 定义表头

注意：td 和 th是一个容器级标签。

3.基本格式：

 <table>
        <tr>
            <td></td>
        </tr>
    </table>

4.常用属性：

1.table

​ border: 边框

​ width: 宽

​ height: 高

​ align: 表格水平对齐方式

​ cellpadding: 设置单元格内的空间

​ cellspacing: 单元格之间的空间

2.tr

​ align: 内容水平对齐方式

​ left: 左对齐

​ center: 居中对齐

​ right: 右对齐

​ valign； 内容垂直对齐方式

​ top： 顶部对齐

​ middle; 中间对齐

​ bottom 底部对齐

注意：内容水平垂直对齐方式失效

1.宽高没有设置

2.cellpadding 设置过大。

5.表格合并

1.单元格标签：td、th是特殊的单元格。

2.有两个属性用来合并单元格：

​ rowspan： 跨行合并单元格（垂直），合并时 保留上面的单元格，删除下面的单元格。

​ colspan ：跨列合并单元格（水平），合并时，保留任一一个即可。

五.div和span标签

1.div和span是非常重要的标签，是css中重要的“盒子”

**2.div：**divsion的缩写，分割。语义：盒子，划分一块区域。容器级标签可以嵌套几乎所有标签，包括他自己。

**3.span：**范围，跨度。文本级标签。主要是放置文字，图片，表单元素。

语义上来：div的区域要大于span。

4.作用：

• 布局
• 捆绑操作

5.注意： 如果单独在页面中插入了这两个元素，不会对页面产生任何影响。这两个元素是专门为定义css样式而生的。