初识HTML5（三）HTML5基本标记的理解和使用

TML针对不同的内容有不同类型的标记，这些标记是HTML5文档的基础，你知道有哪些吗？

1.单标记和双标记

为了方便学习和理解，通常将HTML5标记分为两大类，即双标记和单标记。

a.双标记：

双标记双标记也称为体标记，分为开始标记和结束标记，其基本语法为：

<标记名>内容</标记名>

如：

<p>我是一个双标记</p>

b.单标记：

单标记也称空标记，是指用一个标记就可以完整的描述某个功能，其基本语法为：

<标记名/>

如：

<hr/>

上面hr标记表示一条水平线，后面会提到

2.注释标记

注释标记是HTML的一种特殊标记，它是一段便于阅读理解的不需要在页面中显示的注释文字。其基本语法格式为：

<!-- 注释语句 -->

如：

<p>这是一段文本</p>   <!-- 这是注释文本，不会在页面中显示 -->

上图即为浏览器中的结果。

3.标记的属性

HTML标记的默认样式是无法满足页面开发的需求的，如果想要为某段文本设置特定的样式，就需要用到HTML标记的属性了，其基本语法格式为：

<标记名属性1="属性值1" 属性2="属性值2" 属性3="属性值3"...>内容</标记名>

下面以一个例子来展示：

网页第一行是一个二级居中的标题，第二行是一个局中的段落，第三行是一个大小为2px，颜色为灰色的水平线，第四行是一段正常的段落，部分词语被加粗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2 align="center">我是居中的二级标题</h2> 
    <p align="center">我是居中的段落</p> 
    <hr size="2" color="#ccc"/>
    <p>我是一个正常的段落，这是<strong>关键字</strong>，其他的都是正常内容。<p/>
</body>
</html>

效果如图所示：

多学一招（键值对）：

“键值对”简单地说即为对“属性”设置“值”

例如：

color = "red";width:"200px";

上面的color和width就相当于属性1和属性2，red和200px就是对应的属性值1和属性值2，如果顺序出错，是没有效果的

总结：

在HTML开始标记中，可以通过属性=“属性值”的方式为标记添加属性，其中“属性”和“属性值”是以“键值对”的形式出现的

4.HTML5文档头部相关标记（拓展）

1.title

一个HTML文档只能含有一对<title></title>标记，<title></title>之间的内容将显示在浏览器窗口的标题栏中。

基本语法格式：

<title>网页标题名称</title>

2.meta

meta定义页面元信息：

设置网页关键字》》》<meta name=”keywords” content=”JAVA、php”/>

设置网页描述》》》<meta name=”description” content=”IT培训教育”/>

设置网页作者》》》<meta name=”author” content=”传智播客”/>

设置字符集》》》<meta http-equiv=”Content-Type” content=”text/htm; charset=utf-8l”/>

设置页面自动刷新与跳转》》》<meta http-equiv=”refresh” content=”10;url=http://www.itcast.cn”/>

3.link

基本语法格式：

属性名	常用属性值	描述
href	URL	指定引用外部文档
rel	stylesheet	指定当前文档与引用外部文档的关系，该属性值通常为stylesheet，表示定义一个外部样式表
type	text/css	引用外部文档的类型为CSS
type	text/javascript	引用外部文档的类型为JavaScript脚本

4.style

基本语法格式：

在HTML中使用style标记时，常常定义其属性为type，相应的属性值为text/css，表示使用内嵌式的CSS样式

lt;header> 显示网站名称、主题或者主要信息

<nav> 网站的连接菜单

<aside> 用于侧边栏

<main> 表示页面的主要显示内容, 页面有且只有一个,

不应该被任何其他结构标签包含, 不能是以下元素的后代: section/nav/footer/header/aside/article等。

<article> 用于定义主内容区

<section> 用于章节或段落

结构化标志也可以可以自由配置，并没有规定<aside>标记一定得写在<article>标记下方。

article和section可以相互嵌套

<!DOCTYPE HTML>
<html>
<head>
<meta charset="GB2312"/>
<title>背包客旅行札记</title>
</head>
<body>
<header id="header">
<hgroup>
<h1>背包客旅行札记</h1>
<h4>旅行是一种休息，而休息是为了走更长远的路</h4>
</hgroup>
<nav>
<ul>
<li><a href="#">关于背包客</a></li>
<li class="current-item"><a href="#">国内旅游</a></li>
<li><a href="#">国外旅游</a></li>
<li><a href="#">与我联络</a></li>
</ul>
</nav>
</header>
<article id="travel">
<section>
<h2>Hello World!</h2>
<p>四季都是结合旅行的季节。</p>
<p>不一定要花大钱，做点功课和多点自信，就能享受旅游的美好</p>
</section>
<aside>
<figure>
<img src="photo.png" alt="悠闲"/>
</figure>
</aside>
</article>
<footer>
HTML网页练习
</footer>
</body>
</html>

注意：

<hgroup> 标签用于对网页或区段(section)的标题进行组合。

<figure> 标签规定独立的流内容(图像、图表、照片、代码等等)。

HTML4.0、XHTML到HTML5，从某种意义上讲，这是HTML描述性标记语言的一种更加规范的过程。因此，HTML5并没有给开发者带来多大的冲击。但HTML5增加了很多非常实用的新功能和新特性，下面具体介绍HTML5的一些优势。

1、解决了跨浏览器问题

在HTML5之前，各大浏览器厂商为了争夺市场占有率，会在各自的浏览器中增加各种各样的功能，并且不具有统一的标准。使用不同的浏览器，常常看到不同的页面效果。在HTML5中，纳入了所有合理的扩展功能，具备良好的跨平台性能。针对不支持新标签的老式IE浏览器，只需简单地添加JavaScript代码就可以使用新的元素。推荐了解黑马程序员web前端课程。

2、新增了多个新特性

HTML语言从1.0到5.0经历了巨大的变化，从单一的文本显示功能到图文并茂的多媒体显示功能，许多特性经过多年的完善，已经发展成为一种非常重要的标记语言。HTML5新增的特性如下。

● 新的特殊内容元素，比如header、nav、section、article、footer。

● 新的表单控件，比如calendar、date、time、email、url、search。

● 用于绘画的canvas元素。

● 用于媒介回放的video和audio元素。

● 对本地离线存储的更好支持。

● 地理位置、拖曳、摄像头等API。

HTML5标准的制定是以用户优先为原则的，一旦遇到无法解决的冲突时，规范会把用户放在第一位。另外，为了增强HTML5的使用体验，还加强了以下两方面的设计。

● 安全机制的设计

为确保HTML5的安全，在设计HTML5时做了很多针对安全的设计。HTML5引入了一种新的基于开源的安全模型，该模型不仅易用，而且对不同的API(Application Programming Interface，应用程序编程接口)都通用。使用这个安全模型，不需要借助于任何不安全的hack就能跨域进行安全对话。

● 表现和内容分离

表现和内容分离是HTML5设计中的另一个重要内容。实际上，表现和内容的分离早在HTML4.0中就有设计，但是分离的并不彻底。为了避免可访问性差、代码高复杂度、文件过大等问题，HTML5规范中更细致、清晰地分离了表现和内容。但是考虑到HTML5的兼容性问题，一些陈旧的表现和内容的代码还是可以兼容使用的。

4. 化繁为简的优势

作为当下流行的通用标记语言，HTML5尽可能地简化，严格遵循了“简单至上”的原则，主要体现在这几个方面：

● 新的简化的字符集声明;

● 新的简化的DOCTYPE;

● 简单而强大的HTML5 API;

● 以浏览器原生能力替代复杂的JavaScript代码。为了实现这些简化操作，HTML5规范需要比以前更加细致、精确。为了避免造成误解，HTML5对每一个细节都有着非常明确的规范说明，不允许有任何的歧义和模糊出现。

喜欢记得关注一下哦。

在线咨询

上一篇：前端性能优化(二)-浏览器缓存机制
下一篇：HTML表格标签的使用方法与示例