id=84227943
前言
HTML5简介
HTML的全称为超文本标记语言，英文全称为Hyper Text Markup Language。
- Text表示它是一个纯文本语言，只存储字符数据，类似的有.txt记事本等。
- Hyper Text表示他是一个超文本语言，可以通过超链接的方式将非文本数据通过纯文本数据展现出来，比如图片、音频、视频等都可以展现。
- Markup表示它是一个标记语言，类似于markdown。可以将结构和语义以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息与原来的文本结合在一起，但是使用标记进行标识。
HTML5则表示它是HTML4.01的下一个版本，现在HTML5的部分特性在我们能常用的浏览器中都提供了支持。
编辑器
可以使用VScode、Sublime等编写HTML文本，可以通过官网进行下载。
HTML5的基本结构
下载完编辑器后，我们就可以动手写出自己的第一篇网页。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World!</title>
</head>
<body>
Hello World!
</body>
</html>
效果图
我们可以看到我们在标签title中写的代码在浏览器标签页上显示，而在body标签内的写的标签则在浏览器的浏览内容处显示，它们都在标签<html>内，这个<html>被称为HTML的根标签。
但是开头处的<!doctype html>我们却没有直接体现到它的作用，如果读者有HTML4的基础，就会知道他是一种声明版本的标签。<!doctype html>告诉浏览器我们使用的是HTML5。
HTML5常用标签介绍
标签的结构和属性
通过上例我们能看到html、head和title都是成对出现的，由<xxx>开头<\xxx >结尾，大部分标签都是这样成对出现的。当然也会存在一些类似doctype的自结束标签，这些自结束标签也可以使用<xxx />表示自结束标签。
【注：成对的标签的结束标签的/不用与标签名用空格隔开，而自结束标签需要。】
标签也可以分为块元素和行内元素。在成对标签的起始处或者自结束标签当前位置生效的为行内元素；在起始处另起一行生效的为块元素。
在网页中一般通过块元素来对页面进行布局，行内元素主要用来包裹文字。一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素;块元素中基本上什么都能放;p元素中不能放任何的块元素。
【注：】浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正。
有些标签它也有自己的属性，上例中一直没提到的meta标签就有所体现，通过在meta后添加charset="utf-8"表示该网页使用UTF8的编码。
【注：有些属性有属性值，有些属性则没有值；标签和属性要用空格隔开；要按规定使用属性，不能乱写。】
注释
<!-- 这是一个注释 -->
即为HTML的注释，类似C语言的/* */ ，属于块注释。
文档声明 doctype
文档声明用来告诉浏览器当前网页的版本，HTML5的版本声明为：
- <!doctype html>
- <!Doctype HTML>
只记住第一个计即可。
根标签 html
html为html的根标签，也可称其为根元素，它是成对的标签。网页中的所有内容都要写在根标签中，结构可分为头部（head）和实体（body）。
头标签 head
head是网页的头部，也是成对的标签，必须包含title标签，而meta、link等标签也可选的在head中使用。
标题标签 title
用于网页的标题，也是成对的标签，在html文件中必须且只能有一个。
网页主体 body
网页的所有内容都在该标签中，也是成对的标签。
元素 meta
meta标签提供设置网页的元数据。元数据不会显示在页面上，不是给用户提供的，但是对于机器是可读的。它可用于浏览器、搜索引擎、或其他 web 服务。
meta常用的属性有：
- charset 指定网页的字符集
中文网页一般都用UTF-8字符集 - name 指定数据的内容 content 指定数据的内容
这两个一般在一起用，name告诉浏览器接下来要设置哪方面的属性，而content则是设置内容。- keywords 网页关键字
可以设置多个关键字，关键字使用","隔开，一般用于搜索引擎检索，如果用户通过搜索引擎搜索的词汇中有当前网页设置的关键字，那么搜索引擎就会搜索到这个网页。下面的代码是简书主页的关键字代码。<meta name="keywords" content="简书,简书官网,图文编辑软件,简书下载,图文创作,创作软件,原创社区,小说,散文,写作,阅读"> - description 网页描述
用于描述网页内容，描述的内容会在搜索引擎的搜索结果中显示，以下为简书的网页描述。
<meta name="description" content="简书是一个优质的创作社区，在这里，你可以任性地创作，一篇短文、一张照片、一首诗、一幅画……我们相信，每个人都是生活中的艺术家，有着无穷的创造力。">
下面是在百度中搜索“简书”后显示的结果：
简书搜索结果
- keywords 网页关键字
h 标题标签
类似markdown中的“#”，同样也有六个等级的标题。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
- hgroup 标题分组，它可以将一组相关联的标题同时放入hgroup中，如
<hgroup>
<h1>鲁迅全集</h1>
<h2>呐喊</h2>
</hgroup>
p 段落标签
p标签表示页面中的一个段落（h和p皆为块元素）。
em 重音标签
用于表示语音语调的一个加重，属于行内元素，成对标签。
strong 强调标签
顾名思义，表强调，属于行内元素，成对标签。
blockquote和q 引用标签
blockquote表示一个长引用，是一个块元素，会另起一行，成对标签；q则是个行内元素，成对标签。
br 换行标签
表示换行，是个自结束标签。
根据上述标签我们可以运用上述所学再写一个简单的网页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="鲁迅,鲁迅全集,呐喊,小说,散文,写作,阅读">
<meta name="description" content="我翻开历史一查，这历史没有年代，歪歪斜斜的每叶上都写着“仁义道德”几个字。我横竖睡不着，仔细看了半夜，才从字缝里看出字来，满本都写着两个字是“吃人”！">
<title>练习网页1</title>
</head>
<body>
<hgroup>
<h1>鲁迅全集</h1>
<h2>呐喊选集</h2>
</hgroup>
<p>
照我自己想，虽然不是恶人，自从踹了古家的簿子，可就难说了。他们似乎别有心思，我全猜不出。况且他们一翻脸，便说人是恶人。我还记得大哥教我做论，无论怎样好人，翻他几句，他便打上几个圈；原谅坏人几句，他便说<blockquote>翻天妙手，与众不同</blockquote>。我那里猜得到他们的心思，究竟怎样；况`且是要吃的时候。
</p>
<br>
<p>
凡事总须研究，才会明白。古来时常吃人，我也还记得，可是不<em>甚</em>清楚。我翻开历史一查，这历史没有年代，歪歪斜斜的每叶上都写着<q>仁义道德</q>几个字。我横竖睡不着，仔细看了半夜，才从字缝里看出字来，满本都写着两个字是<strong>“吃人”</strong>！
<p>
</body>
</html>
效果图
布局标签
这类型的标签一般很少用，常用的只有div和span，对于其他的只进行粗略的介绍。
- header 表示网页的头部
- main 表示网页的主体部分(一个页面中只会有一个main)
- footer 表示网页的底部
- nav 表示网页中的导航
- aside 和主体相关的其他内容（侧边栏）
- article 表示一个独立的文章
- section 表示一个独立的区块，上边的标签都不能表示时使用section
div
div是一个块标签，标签结束处会自动换行，通常与css一起用，用于布局。
常用的属性：align —— div元素中内容的对齐方式，值为left、right、center。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div</title>
</head>
<body>
<div>
这里是div元素内
<div>自动换行
<br>
<div align="center">
居中展示
<div>
</body>
</html>
div演示
span
span被用来组合文档中的行内元素，它没有固定的格式表现。一般与css结合使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div</title>
</head>
<body>
我是<span>单独一个区域</span>，常用于与css结合使用
</body>
</html>
span演示
格式化标签
对字体做处理的标签
font
设置字体相关的属性，属性有color、size、face等，分别是字体颜色、字体大小和字体风格。属于行元素。
pre
pre是一个预格式化文本标签，他会保留文中的空白，文本呈现等宽字体。
文本标签
用于设置字体样式，都属于行元素。常用的有：
- b —— 粗体
- i —— 斜体
- u —— 下划线
- del —— 删除线
- sub —— 上标
- sup —— 下标
根据这三种格式化标签我们可以做一个演示来看其效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>格式化标签</title>
</head>
<body>
<font color="blue" size="10" face="宋体">
嘿！这里是font！
</font>
<pre>
我不会 跳过
空白
</pre>
<hr>
粗体——<b>粗体</b><br>
斜体——<i>斜体</i><br>
下划线——<u>下划线</u><br>
删除线——<del>删除线</del><br>
H2O——H<sub>2</sub>O<br>
y=ex次方——y=e<sup>x</sup><br>
</body>
</html>
格式化标签演示.jpg
网友评论