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