图片标签：img标签。

按下img+回车之后会快捷出现img标签的基础框架。

<img src="" alt="">

Src是指定图片路径。（可以是相对路径也可以是绝对路径）（在浏览器搜索图片，右键选中图片地址。）

Alt是当图片无法正常显示的时候出现的提示文字。

路径：分为绝对路径和相对路径，绝对路径就是确切指向的路径，相对路径就是相对于某个资源而言的路径。

超链接：

1
   作用：点击超链接之后，会跳转到对应的页面。
2

3
   标签是<a>，是一个双标签：<a></a>

图片标签img是没有对齐方式的，所以可以用嵌套标签去解决，比如：

1
<p align=”center”>
2

3

4
       <img herf=”xxxx”>
5

6
</p>

这样的话就可以让指定图片居中了。

元素之间的关系：

1
   父子关系。
2

3
   祖先后代关系。（父子关系也是一种特殊的祖先与后代的关系）
4

5
   兄弟关系。（拥有相同父标签的标签就是兄弟关系）

%是一种长度单位，相对于父元素的百分比。

列表(list)：用于显示一项的内容，比如购物清单。

Item（项）

列表中的一项信息，就可以被称作是列表项。列表项可以取列表的首字母l和项的首字母i写成li。

列表项使用的是li标签。

Html中列表分为三种：

1
   1 有序列表
2

3

4
   2 无序列表（没有顺序关系，表现出来就是一个实心）

无序列表使用的标签是ul标签。（unorderlist）

1
   3 定义列表

Ul>li*数字>标签

会自动出现写好的无序列表，比如这样：

Ul>li*2>p[]（中括号之内写属性。

1
<ul>
2
       <li>
3
              <p></p>
4
       </li>
5
       <li>
6
              <p></p>
7
       </li>
8
</ul>

会自动写好标签的结构，数字就是会出现几个列表项，p就是每一个列表项会包含的子标签。

Ul>li*3>a[href=#]{内容}

像这样，用中括号之内输入属性并且直接等于（不写分号），就可以快捷的写出列表标签和所属的属性。大括号之内输入的是内容，会显示在标签a里。

如果不想要列表顺序的排号数字也进入超链接的范畴，可以这样写代码：

1
   <li>
2

3
          1.<a href=”#”>这里是内容</a>
4

5
   <li>

这样，1.就是标签外的文字，不会使用超链接的内容。

有序列表：order list，简写为ol，列表项还是li。

比如：

1
<ol>
2
       <li></li>
3
</ol>

Ol也可以使用type标签，当type=1时，列表是从123455…开始排列，当type=a的时候，列表是从abcdef…开始排列的（如果是大写A的话则是从ABCDEF开始排序）。如果设置成大写i，就是从罗马数字开始计算，小写i同样。

Ol标签具有属性：start，可以设置从哪里开始排序，start的取值应该是数字，如果这样写的话：

<ol type=”a” start=”3”></ol>

这样的话，列表排序就会从c开始。比如：cdef…

由于type的默认值是1，所以只设置start的情况下会变成从start的值开始排序。

Reversed是设置有序列表是否反排序的元素，值只有一个，就是reversed。

比如：

<ol reversed=”reversed”></ol>

设置这个之后，就会变为原本相反的排序，例如原本是12345的排序，设置之后就是54321排序。

当属性名和属性值相等的时候，可以直接写属性名，比如：

<ol reversed></ol>

这样其实等价于设置reversed=”reversed”

定义列表<dl>标签：可以自定一个主题。（define定义list表格——>dl）

Dl标签之下还有许多子标签，其中，dt标签是规定的主题（define topic），dd标签（define describtion）是规定的对主题的描述性质文字。

1
<dl>
2
       <dt>主题1</dt>
3

4
       <dd>对主题的描述1</dd>
5

6
       <dd>对主题的描述2</dd>
7

8
<dt>主题2</dt>
9

10
       <dd>对主题的描述1</dd>
11

12
       <dd>对主题的描述2</dd>
13

14
</dl>

这样的结果就是：

主题1

1
   主题的描述1
2

3
   主题的描述2

主题2

1
   主题的描述1
2

3
   主题的描述2

Dt和dd是兄弟标签，所以在设置快捷标签的时候要这么写：

dl>dt+dd*3

这样出来之后就是：

1
<dl>
2

3

4
       <dt></dt>
5

6
       <dd></dd>
7

8
       <dd></dd>
9

10
       <dd></dd>
11

12
</dl>

大于号>表示设置子标签。加号表示设置兄弟标签.

列表标签都是双标签，并且都是块元素。

表格标签。

表格有三个最重要的属性：行（row）和列（column）和单元格（cell）

表格标签是table，是双标签。

<table></table>

行标签是<tr>（table row）

单元格标签是<td>（table cell data）

想要设置表格也很简单，像这样：

1
<table>
2

3
       <tr>
4

5
              <td>内容</td>
6

7
       </tr>
8

9
       <tr>
10

11
              <td>内容</td>
12

13
       </tr>
14

15
</table>

这样就会设置一个拥有两行，每一行有一个单元格的表格标签。

表格标签也可以设置快捷键：

Table>tr3>td3

这样就会设置一个一共有三行，每行有三个单元格的表格。

表格标题标签： 用于设置表格的标题。这个标题会在表格中水平居中。

可以用border来设置表格的边框。Border的取值是数字，其单位是像素，代表了边框的宽度。

快捷编辑表格的办法：生成表格之后，不要点击任何地方，直接输入文本就可以在单元格之内展示，按下tab键切换单元格。

Thead标签，tbody标签，tfoot标签：设置表格结构，其中thead是表格头部，tbody是表格主体，tfoot是表格底部的标签。常规标签这三个写不写都不影响。

如果不设置的话，浏览器会自动创建tbody标签，把表格内的标签全部移动到tbody中去。