HTML5从入门到精通千锋教育内部资料

要想学好HTML5，实现HTML5从入门到精通，那HTML的常用标签一定要熟记，那么都有哪些？

本文摘自千锋教育编著的**《HTML5从入门到精通》**，购买链接

1.1.1标题标签
浏览新闻类网页时，经常能看见文章的标题，如图2.1所示。
HTML5从入门到精通千锋教育内部资料
图片的标题就是用HTML中的标题标签来实现的，其语法格式如下：

<hn 属性=“属性值”>标题文本</hn>

接下来通过案例来演示标题标签，

 1<!doctype html>
 2<html>
 3<head>
 4<meta charset="utf-8">
 5<title>定义标题</title>
 6</head>
 7<body>
 8<h1>这是一级标题</h1>
 9<h2>这是二级标题</h2>
 10<h3>这是三级标题</h3>
 11<h4>这是四级标题</h4>
 12<h5>这是五级标题</h5>
 13<h6>这是六级标题</h6>
 14</body>
 15</html>

运行结果如图所示。
HTML5从入门到精通千锋教育内部资料
从上例运行结果可以看出，默认情况下标题文字的显示方式是加粗左对齐，并且从<h1>到<h6>字号递减，如果想改变标题的对齐方式，需要用到align属性。

接下来通过案例来演示标题标签对齐方式的设置及效果，如例所示。

 1<!doctype html>
 2<html>
 3<head>
 4<meta charset="utf-8">
 5<title>定义标题对齐方式</title>
 6</head>
 7<body>
 8<h1>这是一级标题</h1>
 9<h2 align="left">这是二级标题</h2>
 10<h3 align="center">这是三级标题</h3>
 11<h4 align="right">这是四级标题</h4>
 12</body>
 13</html>

运行结果
HTML5从入门到精通千锋教育内部资料
标题很重要，它有利于网页搜索引擎的优化，其中<h1>标题的重要性最高，<h6>标题的重要性最低，一般一个页面只能有一个<h1>，而<h2>~<h6>可以有多个。

1.1.2段落标签
浏览新闻类网页时，经常能看见文章的段落，如图所示。
HTML5从入门到精通千锋教育内部资料
图2.4中的段落在HTML中使用

标签实现，用于在网页中把文字有条理地显示出来，其语法格式如下：

<p 属性=“属性值”>段落文本</p>

接下来通过案例来演示段落标签，如例所示。

 1<!doctype html>
 2<html>
 3<head>
 4<meta charset="utf-8">
 5<title>段落标签</title>
 6</head>
 7<body>
 8<h1 align="center" >扣丁学堂</h1></h1>
 9<p align="left">扣丁学堂是中国IT培训教育品牌领导者,拥有最新最全的IT培训视频课
 10程,专注于发布和更新iOS培训、Android培训、HTML5培训、UI培训、PHP培训****,
 11着力于培养移动互联网人才。</p>
 12<p align="ri">遇到IT技术难题，就上扣丁学堂学堂。</p>
 13</body>
 14</html>

1. <strong>标签
<strong>标签将文本定义为语气更强的强调内容，展示效果为加粗。接下来通过案例演示<strong>标签，如例所示。

 1<!doctype html>
 2<html>
 3<head>
 4<meta charset="utf-8">
 5<title>文本格式化</title>
 6</head>
 7<body>
 8<strong>用良心做教育！</strong>
 9</body>
 10</html>

运行结果如图所示。
HTML5从入门到精通千锋教育内部资料
注意：<b>标签的展示效果跟<strong>完全相同，但是<b>标签不具备语义化强调的作用，只是显示加粗效果。

2. <em>标签
<em>标签也是将文本定义为强调的内容，只不过比<strong>标签强调的稍弱些，展示效果为斜体，接下来通过案例来演示<em>标签，如例所示。

 1<!doctype html>
 2<html>
 3<head>
 4<meta charset="utf-8">
 5<title>文本格式化</title>
 6</head>
 7<body>
 8<em>用良心做教育！</em>
 9</body>
 10</html>

运行结果如图所示
HTML5从入门到精通千锋教育内部资料
注意：<i>标签的展示效果跟<em>完全相同，但是<i>标签不具备语义化强调的作用，只是显示斜体效果。

3. <sup>和<sub>标签
<sup>标签用于将文本定义为上标文本，<sub>标签用于将文本定义为下标文本，接下来通过案例来演示<sup>和<sub>标签，如例所示。

 1<!doctype html>
 2<html>
 3<head>
 4<meta charset="utf-8">
 5<title>文本格式化</title>
 6</head>
 7<body>
 8<p>a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>
 9<p>H<sub>2</sub>O</p>
 10</body>
 11</html>

运行结果如图所示
HTML5从入门到精通千锋教育内部资料
4. <del>和<ins>标签
<del>标签可用于定义已被删除的文本， <ins>标签可用于定义已经被插入的文本，<del>标签与<ins>标签配合使用，来描述文档中的更新和修正。接下来通过案例来演示<del>和<ins>标签，如例所示。

 1<!doctype html>
 2<html>
 3<head>
 4<meta charset="utf-8">
 5<title>文本格式化</title>
 6</head>
 7<body>
 8<p><del>删除文本加删除线</del></p>
 9<p><ins>插入文本加下画线</ins></p>
 10</body>
 11</html>

运行结果如图所示。
HTML5从入门到精通千锋教育内部资料
文本格式化标签，一定要根据它们的语义来记忆，至于它们的默认样式，后续可以通过CSS方式进行修改。

以上是《HTML5从入门到精通》的部分知识，想了解更多关于h5的知识，可以关注公众号：**千问千知（qwqz1000）**领取电子书和****。
后台回复：h5资料即可
HTML5从入门到精通千锋教育内部资料
+Q：2833142073 即刻领取！

HTML5从入门到精通 千锋教育内部资料

相关推荐

HTML5从入门到精通千锋教育内部资料