HTML简介
首先，HTML 指的是超文本标记语言 (Hyper Text Markup Language)，它 不是一种编程语言，而是一种标记语言 (markup language)；编程语言是有编译过程的，而标记语言没有编译过程，HTML标签是直接由浏览器解析执行。标记语言也就是用一套标记标签 (markup tag)的描述方式。HTML 作用就是用标记标签来描述网页，把网页内容在浏览器中展示出来。
HTML骨架
我们来看一下一个html页面的骨架，如下图
html骨架
这里详细介绍一下以下几个标签
- HTML标签
作用所有HTML中标签的一个根节点。 最大的标签 ，也叫做根标签
- head标签
头标签，文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
注意在head标签中我们必须要设置的标签是title
- title标签
文档的标题，每一个网页都拥有一个属于自己的标题。
- body标签
标记文档的主体 ，我们的网页基本都是放到body里面的
HTML标签
在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的 <HTML>、<head>、<body>都是HTML骨架结构标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素； HTML标签通常是成对出现的，比如 <div> 和 </div>；也有少部分单标签，如：<br />、<hr />等
标签语义化
标签语义化指的是标签最好具有一定的语义作用，标签语义化的作用如下：
-
方便代码的阅读和维护
-
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
-
使用语义化标签会具有更好地搜索引擎优化
语义良好时， 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。
标签属性
使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置，其语法格式如下：
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
-
标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。采取 键值对 的格式 key="value" 的格式
-
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
-
任何标签的属性都有默认值，省略该属性则取默认值。
排版标签
排版标签主要和css搭配使用，是用来显示网页结构的标签，是网页布局最常用的标签。
- 标题标签
为了使网页更具有语义化，我们经常会在页面中用到标题标签；标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题。具有align属性，属性值可以是：left、center、right。
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
...
<h6>这是一个标题</h6>
标题具有align属性，属性值可以是：left、center、right。标题标签作为标题使用，并且依据重要性递减。h1 标签因为重要，尽量少用，不要动不动就向你扔了一个h1。 一般h1 都是给logo使用，或者页面中最重要标题信息。
- 段落标签
在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落
<p>这是一个段落</p>
段落标签具有align属性，属性值可以是：left、center、right。
- 水平线标签
水平线标签水平线可将段落与段落之间隔开，使得文档结构清晰，层次分明。水平线标签是一个单标签，基本语法格式如下：
<hr />是单标签
水平线标签的具有的属性介绍：
1）align：设定线条置放位置。属性值可选择：left right center。
2）size：设定线条粗细。以像素为单位，内定为2。
3）width：设定线条长度。可以是绝对值（单位是像素）或相对值。如果设置为相对值的话，内定为100%。
4）color：设置线条颜色。
5）noshade：不要阴影，即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体。
- 换行标签
HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，就会自动换行。但若希望某段文本强制换行显示，就需要使用换行标签，换行标签也是单标签，其基本语法如下：
<br />
- div span标签(html排版标签中的重点标签)
首先，div 和 span是没有语义的，他们是我们网页布局主要的2个标签，用法相似，盒子div 就是 division 的缩写，也就是分割，分区的意思。span, 是跨度，范围的意思。 但div使用是必须独占一行，span则不换行。
基本语法格式：
<div> 这是一个div </div>
<span>这是一个span</span>
- 文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
| 标签 | 显示效果 |
|---|---|
| <b></b>和<strong></strong> | 文字以粗体方式显示(XHTML推荐使用strong) |
| <i></i>和<em></em> | 文字以斜体方式显示(XHTML推荐使用em) |
| <s></s>和<del></del> | 文字以加删除线方式显示(XHTML推荐使用del) |
| <u></u>和<ins></ins> | 文字以加下划线方式显示(XHTML推荐使用ins) |
- 内容居中标签
只要是在这个标签里面的内容，都会居于浏览器的中间，其语法格式如下：
<center> 该内容在浏览器的中间位置显示 </center>
超链接
在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用。
target：用于指定链接页面的打开方式，其取值常用的有_self和_blank两种，其中_self为默认值，在同一个网页中显示; _blank为在新窗口中打开方式。以及_parent：在父窗口中显示，_top：在顶级窗口中显示。
创建超链接的三种方式
- 外部链接：可链接到外部文件或者链接到外部地址，如
<a href="http://www.baidu.com" target="_blank">百度</a>
- 内部链接：可链接到内部文件(直接链接内部页面名称即可 )
< a href="index.html"> 首页 </a >
- 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
< a href="#"> 首页 </a >
- a标签不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
锚点定位
给超链接定义一个名字，让他在本页面或者其他页面的的不同位置进行跳转。如点击回到顶部，让其回到页面最顶端。
- 创建一个锚点，即超链接要跳转到的那个特定位置，可以使用name或者id属性来标识。效果如下：
<h3 id="name1">这是页面最顶端</h3>
- 使用超链接跳转
<a href="#name1">回到锚点</a>
值得注意的是：a标签是文本级的标签，a就是可以当做文本来处理，所以a标签尽量不要包含其他块级元素，如div和p，当然你可以这么写，不会报错，但是这样并不利于seo优化。
图片标签
img标签，是image的缩写；要想在网页中显示图像就需要使用图像标签
其基本语法格式如下：
<img src="图像URL" />
该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。
我们总结一下img标签的相关属性如下，
| 属性 | 属性值 | 显示说明 |
|---|---|---|
| src | 图片路径 | 相对路径或者绝对路径 |
| alt | 替换文本 | 图片显示不出来时的替换文本 |
| title | 悬停文本 | 鼠标悬停时显示的内容 |
| width | 像素（XHTML不支持使用页面百分比） | 图像的宽度 |
| height | 像素（XHTML不支持使用页面百分比） | 图像的高度 |
| border | 数字 | 设置图像边框 |
我们来解释一下相对路径和绝对路径：
相对路径从文件本身出发，使用 . /或者省略./和 ../ 分表代表当前目录和上一层目录来找到所用资源路径
<!-- 当前目录中的图片 -->
<img src="当前目录下的.jpg">
<img src="./当前目录下的.jpg">
<!-- 上一级目录中的图片 -->
<img src="../上级目录.jpg">
对于相对路径来说，不管项目放到哪里，文件和图片的相对路径关系都是不变的。相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。
绝对路径之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的，直接引入盘符或者网络资源路径，如下：
<!-- 盘符 -->
<img src="F:/前端案例/day12/images/1.jpg">
<!-- 网络资源-->
<img src="http://seopic.699pic.com/photo/50046/5562.jpg_wh1200.jpg">
特殊字符标签
：空格 （non-breaking spacing，不断打空格）
<：小于号（less than）
>：大于号（greater than）
&：符号&
"：双引号
'：单引号
©：版权©
™：商标™
| 特殊字符 | 描述 | 字符代码 |
|---|---|---|
| 空格 | ||
| < | 小于号 | < |
| > | 大于号 | >； |
| & | 与 | &； |
| ￥ | 人民币 | ¥ |
| © | 版权 | ©； |
...
若，我们想把某个会被浏览器解析的标签显示在页面上，就要使用转义字符来代替，如，把<p>显示在网页中
p标签显示：<p>
网友评论