html标签
html 双标签
head 双标签，网页的一些配置
meta 单标签，规范我们使用网页的字符集。中文：gb2312(gbk)，外文：utf-8
title 网页标题
1.h系列
headline，分为六个等级，标示一到六级标题，级别依次降低，重要程度也是依次降低。
约定俗成，一般一个页面里h1标签权重最高，最便于搜索引擎搜索，一个页面只写一个h1标签，而且一般会给到logo
-
六级标签都是单独书写，不存在嵌套关系
<!-- h标签 --> <h1 class="title biaoti t" id="1234">一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
2.p标签
paragraph，段落，文本级标签。只能放文本，图片，表单元素，或者废弃的标签（font等）
<!-- h标签 -->
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<p>第四段</p>
<p>第五段</p>
3.img标签
image，图片，引入一张图片，属于特殊文本，
单标签<img />
可插入图片类型：png，jpg，gif。
-
img标签属性：
src：source，资源，表示图片的来源，路径，必须写的属性。
width: 宽，单位px，可以省略单位。设置后会等比例缩放图片
height: 高，同上
title：设置提示文本，鼠标悬停在图片上后显示
border：边框，一般用css来控制，这里就不介绍了
alt: 替换内容，用做当前图片不能正确显示时来显示的内容<!-- img标签 --> <img src="preview.png" width="300" title="霉霉" alt="霉霉的图片">
路径
文件的位置，有相对路径和绝对路径
1.相对路径
从html文件本身出发，找文件位置
同级查找（文件与html在同一文件夹内）：直接属性文件名字（包括文件名和扩展名）
子级查找（文件在html所在文件夹的子文件中）：需要加上子文件夹的名字，有多级文件夹，都需要写上
-
上级查找（文件在html在文件夹的上级文件夹中）：上级文件夹可以用..lai代替，注意..只能代替一个，多级的话：../../../../
<img src="preview.png"> 同级查找 <img src="Images/preview.png"> 子级查找 <img src="../preview.png"> 上级查找
综合事例：如下，在我们标签网页的上级photo文件夹中也有一张preview.png图片，这时候该怎么取到这张图片呢
<img src="../../photo/preview.png">
说明：首先，图片处于上级，但是呢，是在上级的文件夹中，要获取上级文件夹，首先的得找到更高级的文件夹所以能得向上../../两级进入Document文件夹，然后进入photo文件夹../photo/，最后再查找我们所需要的文件../photo/preview.png
2.绝对路径
绝对路径是从盘符出发，进行查找
//本地图片
<img src="/Users/mac1/Documents/preview.png">
//网络图片
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573573958279&di=c28b56f5c4c2a19d200e9701c42f5a85&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201503%2F21%2F20150321175635_HEWK4.jpeg">
4.a标签
anchor，锚，超链接的缩写，双标签，可以跳转到相应的网址
标签属性：
href：hypertext reference 超文本传输协议
target: 目标，设置我们的跳转是否打开新窗口。默认在原窗口打开，添加属性值：“_blank”后，在新窗口打开
title: 设置提示文本，鼠标悬停在图片上后显示
<!-- a标签：原页面跳转 -->
<a href="label2.html">跳转到label2</a>
<!-- a标签：新页面跳转 -->
<a href="https://www.baidu.com" target="_blank" title="百度搜索">
百度一下
<img src="paperplane.png" width="30">
</a>
跳转：
1.打开新页面（见上文）
2.跳转原页面（见上文）
3.页面内位置跳转
4.新页面位置跳转
<!-- #号加id -->
<a href="#1234">一级标题</a>
位置跳转有两种方法：
1.需要借助id属性
<!--跳转链接 + #号 + id -->
<a href="label2.html#9981">跳转到label2中的《我们不一样》</a>
<!--设置id -->
<p id="9981">我们不一样</p>
2.在需要的位置加入一个a标签，不用写href属性，设置name属性，命名与id一样
<!--跳转链接 + #号 + name -->
<a href="label2.html#snowolf">跳转到label2中的snowolf</a>
<!--位置a标签并添加name属性 -->
<a name="snowolf"></a>
5.列表
将一些内容或样式类似相近，相关的内容一起书写
- 有三种列表：无序列表，有序列表，定义列表
1.无序列表
- <ul></ul>，unordered list 无序列表，添加一组无序列表。
- <li></li>，list item，列表项。
- ul和li 必须成对儿出现，它们之间是嵌套关系，ul中可以存在一个或多个li
- 快速生成方法：输入
ul>li*4，然后按tab键，其他嵌套等类似，自己实践
<!-- ul标签 -->
<ul>
<li>春天</li>
<li>夏天</li>
<li>秋天</li>
<li>冬天</li>
</ul>
- li标签是一个经典的容器级标签，可以嵌套任意标签，甚至继续嵌套列表标签
- li标签并不会添加小圆点等样式，需自己用css来设置，没有顺序之分
<!-- ul标签 -->
<ul>
<li>文字</li>
<li>
<img src="paperplane.png" width="30">
</li>
<li>
<h2>地形</h2>
<ul>
<li>平原</li>
<li>高原</li>
<li>丘陵</li>
</ul>
</li>
</ul>
2.有序列表
-
<ol></ol>，ordered list 无序列表，添加一组有序列表。与无序列表相似，不同的是他默认会添加一个数字前缀，实际情况是我们会清除这个默认样式，然后通过css来添加
<ol> <li>餐饮</li> <li>娱乐</li> <li> <p>服饰</p> <ol> <li>女装</li> <li>男装</li> <li>童装</li> </ol> </li> </ol>
3.定义列表
<dl></dl>，definition list， 定义列表，
<dt></dt>，definition title，定义标题。
<dd></dd>，definition description，定义描述，对标题的描述。
dt和dd都是容器级标签
-
dl同时嵌套dt和dd，其中dd可以有多个，也可以不添加。快捷键为
dl>(dt+dd)*3，再按tab键。还有dl>(dt+dd*3)*3等等，自己实践...<!-- dl标签 --> <dl> <dt>胡歌</dt> <dd>影视男演员</dd> <dd>作品：仙剑系列，《伪装者》等等</dd> <dt>刘德华</dt> <dd>作品：《今天》，《练习》等等</dd> <dd>歌手，演员</dd> <dt>高圆圆</dt> <dd>演员</dd> </dl>
6.div和span
通常称为盒子，没什么特殊语义，常用来布局
- div： division，范围，区域，分割。大范围，可以嵌套任意标签
- span：小范围，小区域的布局使用，文本级标签，不能嵌套容器级标签，一般认为p>span>a
