目录
- 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元素:
HTML 元素以开始标签起始，以结束标签终止，元素的内容是开始标签与结束标签之间的内容。某些 HTML 元素具有空内容（empty content），空元素在开始标签中进行关闭（以开始标签的结束而结束）。大多数 HTML 元素可拥有属性
大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。HTML 文档由相互嵌套的 HTML 元素构成。如下实例
<!DOCTYPE html>
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>
以上实例包含了三个 HTML 元素。
- 1）< 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 段落标签
功能：用来定义网页中的一段文本，段落与段落之间换行。
属性：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 注释及特殊字符标签
注释及特殊字符：
<!--注释-->
空格： #若直接输入空格，无论输入多少个空格都只显示一个，采用特殊字符时，需要多少个空格，则输入多少个特殊字符
< ：<
> ：>
& ：&
例子：
<html>
<head>
<meta charset="utf-8">
<title>
特殊字符
</title>
</head>
<body>
<p>让子弹 飞一会儿</p>
<p><再飞一会儿></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：文本垂直对齐方式
tr的属性：
- width：单元格的宽
- height：单元格的高度
- bordercolor：边框的颜色
- bgcolor：背景颜色
- background：表格的背景图片
- align：文本水平对齐方式
- valign：文本垂直对齐方式
- colspan：水平合并单元格（跨列）
-
rowspan：垂直合并单元格（跨行）
完整的表格标记
如果使用thead、tfoot、tbody元素，就必须使用全部的元素。
跨列表格的实例：
html>
<head>
<meta charset="utf-8">
<title>
跨列表格
</title>
</head>
<body>
<h1>跨列表格</h1>
<table border="2">
<tr>
<td colspan="2">学生成绩 </td> <!--colspan="2"为跨列-->
</tr>
<tr>
<td>语文 </td>
<td>98 </td>
</tr>
<tr>
<td> 数学</td>
<td>95 </td>
</tr>
</table>
</body>
</html>
跨行表格的实例：
<html>
<head>
<meta charset="utf-8">
<title>
跨行表格
</title>
</head>
<body>
<h1>跨行表格</h1>
<table border="2">
<tr>
<td rowspan="2">张三 </td>
<td >语文 </td>
<td >98 </td>
</tr>
<tr>
<td>数学 </td>
<td>95 </td>
</tr>
<tr>
<td rowspan="2"> 李四</td>
<td>语文</td>
<td>88 </td>
</tr>
<tr>
<td>数学 </td>
<td>78 </td>
</tr>
</table>
</body>
</html>
3.13 表单标签
表单标签详见下一节【HTML基础-2】内容。
归纳
（1）了解什么是HTML
（2）掌握什么是HTML标签和HTML元素
（3）掌握常用的HTML标签及用法
（4）更多关于HTML语言及标签的教程可具体参考《HTML菜鸟教程》
（5）既可以在WAMP环境中练习HTML语言，也可以菜鸟在线练习上练习并查看显示结果
参考文章
[1] 《HTML菜鸟教程》
[2] 视频传送门