1 HTML概述
- 1.1 什么是HTML
- 1.2 HTML的语法规则
2 HTML标签简介
- 2.1 HTML标签
- 2.2 HTML元素
- 2.3 HTML实例
3 HTML常用标签
- 3.1 标题标签
- 3.2 段落标签
- 3.3 换行标签
- 3.4 < hr/ >水平线
- 3.5 span标签和div标签
- 3.6 文字段落缩进标签
- 3.7 文字特殊样式
- 3.8 超链接标签
- 3.9 图片标签
- 3.10 注释及特殊字符标签
- 3.11 建立列表
- - 3.11.1 建立无序列表
  - 3.11.2 建立有序列表
  - 3.11.3 建立自定义列表
- 3.12 表格标签
- 3.13 表单标签
归纳
参考文章

1 HTML概述

HTML文档的后缀名为.html和.htm，以上两种后缀名没有区别，都可以使用。

1.1 什么是HTML

HTML是超文本标记语言的缩写（HyperText Markup Language），作用是利用HTML标记，告诉浏览器被标记的内容要如何摆放及内容的含义，如：< p>这是个段落元素< /p>，这里，被标记的内容是“这是个段落元素”这句话，而< p></ p>则是HTML的标记；当浏览器读取到这个标记时，就会知道这里的内容是一个段落文本，然后用相应的格式显示。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
注意，HTML语言为解释型语言，即写出来代码直接就能运行，而例如C语言、JAVA则为编译型语言，需要编译成二进制文件，计算机才能解释执行。

1.2 HTML的语法规则

要让页面正确的显示，就必须使用正确的HTML语法和HTML元素，如：对于标题应该使用< h1>、< h2>、< h3>…等标题元素，而对于一整段的文字内容则应该使用< p>元素。
一个规范的页面代码有利于维护和阅读，要想知道自己的HTML代码是否规范，可以使用w3school的HTML验证工具来检查，然后根据检查结果进行调整，直至通过验证为止。

2 HTML标签简介

2.1 HTML标签

HTML 是所有网页制作技术的核心和基础，也是每个网页制作者必须掌握的基本知识，而 html 标签是 html 语言中最基本的单位，是 HTML 最重要的组成部分。

HTML标签的特点：

HTML 标签是由尖括号包围的关键词，比如 < html >
HTML 标签分别双标签和单标签，标签中有属性，属性具有属性值。
比如 < b> 和 < /b>为双标签，标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签。

初学者首先要知道 HTML 标签的一些特点： HTML 标签是与大小写无关的，例如“< BODY>”跟< body>表示的意思是一样的，推荐使用小写。类似“< p>”这样由尖括号包关键字组成，例如：

<P>P 是段落标签,HTML标签不区分大小写</P>
<p>意思是一样的，推荐使用小写。</p>

2.2 HTML元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思。但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下为一个HTML元素:

<p>这是一个段落。</p>

HTML 元素以开始标签起始，以结束标签终止，元素的内容是开始标签与结束标签之间的内容。某些 HTML 元素具有空内容（empty content），空元素在开始标签中进行关闭（以开始标签的结束而结束）。大多数 HTML 元素可拥有属性

大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。HTML 文档由相互嵌套的 HTML 元素构成。如下实例

<!DOCTYPE html>
<html><body>
<p>这是第一个段落。</p>
</body></html>

以上实例包含了三个 HTML 元素。

1）< p > 元素:

<p>这是第一个段落。</p>

这个 < p > 元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签 < p > 以及一个结束标签 < /p >。元素内容是: 这是第一个段落。

2）< body > 元素:

<body>
<p>这是第一个段落。</p>
</body>

< body > 元素定义了 HTML 文档的主体。这个元素拥有一个开始标签以及一个结束标签 < /body >。元素内容是另一个 HTML 元素（p 元素）。

3）< html > 元素：

<html><body>
<p>这是第一个段落。</p>
</body></html>

< html > 元素定义了整个 HTML 文档。这个元素拥有一个开始标签 < html > ，以及一个结束标签 < /html >.元素内容是另一个 HTML 元素（body 元素）。

2.3 HTML实例

HTML文档结构：
头部：文档控制信息，包括整个页面的说明和编码等等
身体：真正显示文档内容的部分。

<html><head></head><body></body></html>

以下为一个简单的HTML实例：

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head><body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body></html>

上述实例的解析如下：

< !DOCTYPE html > 声明为 HTML5 文档
< htm l> 元素是 HTML 页面的根元素
< head > 元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8。charset为标签的属性，用来告诉浏览器当前页面的编码格式。
< title > 元素描述了文档的标题
< body > 元素包含了可见的页面内容
< h1 > 元素定义一个大标题
< p > 元素定义一个段落

注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

3 HTML常用标签

3.1 标题标签

<body>
<h1>  一级标题</h1>
<h2>  二级标题</h2>
<h3>  三级标题</h3>
<h4>  四级标题</h4>
<h5>  五级标题</h5>
<h6>  六级标题</h6>
</body>
#<h1></h1>：代表一级标题，级别高，字体 也最大，其他依次递减。
#<h6></h6>：级别最小，字体最小

属性：align ；定义标题中的文本水平方向的对齐方式。
属性值：left（左对齐）、right（右对齐）、center（居中对齐）

3.2 段落标签

<p>段落标签</p>

功能：用来定义网页中的一段文本，段落与段落之间换行。
属性：align ；定义段落中的文本水平方向的对齐方式。
属性值：left（左对齐）、right（右对齐）、center（居中对齐）
例子：

<html><head><meta charset="utf-8">  <title>这是我的第一个网页</title></head><body><h1>格言 </h1><p> 事实胜于雄辩 </p><p> 疗效战胜一切 </p>没有对比,就没有伤害</body></html>

3.3 换行标签

<br/> ：换行标签，指行与行之间换行，他是一个单标签。

例子：

<html><head><meta charset="utf-8">  <title>这是我的第一个网页</title></head><body><h1>格言 </h1><p> 事实胜于雄辩 </p><hr/><p> 疗效战胜一切 </p><hr/>没有对比,<br/>             就没有伤害</body>
</html>

< br/ >与< p > < /p >两者的区别：

< br/ >：是单标签，小行换行提行；
< p > < /p > ：是双标签，大行换行分段；

3.4 < hr/ >水平线

< hr/ >：水平线
例子：

<html><head><meta charset="utf-8">  <title>这是我的第一个网页</title></head><body><h1>格言 </h1><p> 事实胜于雄辩 </p><hr/><p> 疗效战胜一切 </p><hr/>没有对比,就没有伤害</body>
</html>

3.5 span标签和div标签

span标签和div标签是最常用的标签，主要对他们进行样式的应用来改变视觉上的变化。span标签和div标签的功能分别如下：

span标签被用来组合文档中的行内元素。
div可定义文档中的分区或节（division/section）

span标签和div标签的格式分别如下：

<span>我是span标签</span>
<div class="test">111111</div>

注意，< div > 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 < div > 固有的唯一格式表现。可以通过 < div > 的 class 或 id 应用额外的样式。

例子：

<html><head><meta charset="utf-8">  <title>这是我的第一个网页</title></head><body><h1>格言 </h1><p> 事实胜于雄辩 </p><hr/><p> 疗效战胜一切 </p><hr/>没有<div style="background-color: green;">对比</div>,<br/>就没有<span style="color:red;font-size:30px;background-color: yellow;">伤害</span></body>
</html>

3.6 文字段落缩进标签

< blockquote >< /blockquote >：文字段落缩进，在标签中包含块级标签，而不是纯文本。

<blockquote><p>自动缩进p标签内的文本</p>
</blockquote>

3.7 文字特殊样式

<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<s>删除线</s>
<big>放大</big>
<small>缩小</small>
<strong>加强强调</strong>
<em>强调倾斜</em>

3.8 超链接标签

< a >< /a >：超链接，即从一个页面跳转到另外一个页面。

属性：.

href：连接地址；空连接可以用"#"代替；地址可以为绝对路径也可以为相对路径。
target ：定义打开方式，默认情况下可以不写，默认在当前页面打开。属性值为_self和_blank
①;_self在当前页面中打开；
②_blank在新的空白窗口打开。

例子：

<a href="http://www.baidu.com" target="_blank"></a>
#注意一定要写http或https，“http://www.baidu.com"为绝对路径<a href="./login.html" target="_blank"></a>
#注意：./是指当前目录，不写./也为当前目录，“./login.html”为相对路径

3.9 图片标签

< img/ >：图片标签，在页面中插入标签。

属性：

src：指定图片源文件，图片路径可以为相对路径也可以为绝对路径。
alt ：图片未加载成功的提示文字；
width：指定图片的宽度；
height：指定图片的高度；
border：指定图片的边框样式；
alghr：top/bottom/middle；图片位于两端文字在垂直方向的一个上/中/下的对齐方式；

#图片地址为绝对路径
<img src="http://img5.duitang.com/uploads/item/201610/31/20161031181100_TVEPU.jpeg"/>#图片地址为相对地址
<img src="./style/img/PHP封面.png"/>

3.10 注释及特殊字符标签

注释及特殊字符：

<!--注释-->
空格：&nbsp;    #若直接输入空格，无论输入多少个空格都只显示一个，采用特殊字符时，需要多少个空格，则输入多少个特殊字符
< ：&lt;
> ：&gt;
& ：&amp

例子：

<html><head><meta charset="utf-8">  <title>特殊字符</title></head><body><p>让子弹&nbsp;&nbsp;&nbsp;飞一会儿</p><p>&lt;再飞一会儿&gt;</p></body>
</html>

3.11 建立列表

3.11.1 建立无序列表

<ul type="circle"> <li>列表项</li> <li>列表项</li>
</ul>

属性：type ；定义列表项的符号。

属性值：circle（空心圆）、disc（实心圆）、square（实心方块）

3.11.2 建立有序列表

<ol type="a"><li>列表项</li><li>列表项</li>
</ol>

属性：type ；定义列表项的符号。 start：用来设置列表编号的起始数值。
属性值：a、A、i、I

3.11.3 建立自定义列表

<dl> <dt>列表标题</dt> <dd>列表项</dd><dd>列表项</dd>
</dl>

3.12 表格标签

< table >< /table >：定义表格
< tr >< /tr >：定义行；
< td >< /td >：定义列；

<table><caption>表格标题</caption><tr><td>我是第一行的第一个单元格</td><td>我是第一行的第二个单元格</td></tr><tr><td>我是第二行的第一个单元格</td><td>我是第二行的第二个单元格</td></tr>
</table>

表格的表头是单元格的一种变体，实质上是一种单元格加粗和居中

table的属性：

width：表格的宽度
height：表格的高度
align：表格的对齐方式
border：表格的边框
bordercolor：边框的颜色
cellspaning：单元格之前的距离
csllpadding：单元格与内容之间的距离
bgcolor：表格的背景颜色
background：表格的背景图片

tr的属性：

height：行的高度
bordercolor：边框的颜色
bgcolor：表格的背景颜色
background：背景图片
align：文本水平对齐方式
valign：文本垂直对齐方式