HTML5简介与标签

雨点打透心脏的1/2处 2024-03-23 13:21 31阅读 0赞

## 一、HTML5基本概念 ##

#### 1、介绍 ####

HTML5是用来描述网页的一种语言，被称为超文本标记语言。用HTML5编写的文件，后缀以.html结尾。HTML是一种标记语言，标记语言是一套标记标签。标签是由尖括号包围的关键字。

#### 2、DOCTYPE声明 ####

DOCTYPE是document type(文档类型)的缩写。<!DOCTYPE html> 是H5的声明，位于文档的最前面，处于标签之前他是网页必备的组成部分，避免浏览器的怪异模式(不同浏览器之间)一定得写。

![2fc248a183e84b16904abcfb1e2a34f8.png][]

## 二、标签 ##

#### 1、骨架标签介绍 ####

html标签

定义HTML文档，让浏览器明白这个是HTML文档，其他元素要包裹在它里面，标签限定了文档的开始点和结束点。

![8d01a55a4f0d466f9086021fc656cbd0.png][]

head标签

head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息，包括文档的标题、在web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

![fbddc25d62a64e959b4099777251f862.png][]

body标签

body元素定义文档的主体。他包含文档的所有内容(文本、超链接、图像、表格等)。它会直接在页面中显示出来，就是用户可以直观看见的内容。

![0bf779e2386d45ada2fba36cad08827c.png][]

title标签

可以定义文档的标题

显示在浏览器窗口的标题栏或状态栏

title标签是head标签中唯一必须要求包含的东西，写head一定写title

title的增加有利于SEO优化

SEO是搜索引擎优化的英文缩写。通过对网站内容调整， 满足搜索引擎的排名需求。

![a4fe2dbc30604119b5cf45e57b01d337.png][]

meta标签

meta标签用来描述一个HTML网页文档的属性，关键词等， 列如：charset="utf-8" 是说当前使用的是utf-8编码格式。

![a30ff1bbc403483894e2bed07e0f83cc.png][]

#### 2、标题标签 ####

标题通过<h1>--<h6>标签进行定义的。

<h1>定义最大的标题，<h6>定义最小的标题 ![5413df4625fa4f6cacb4235fae7ec464.png][]

#### 3、段落、换行、水平标签 ####

段落标签<p>：把文字内容放在里面，方便调节。

换行标签<br/>：此标签后的内容从下一行开始。

水平线<hr/>：创建一条水平线。

属性：color：更改颜色。

width：设置水平线的长度

size：设置水平线的高度

align：设置水平线的对齐方式。

#### 4、图片标签 ####

<img>标签定义图片。

属性：src：图片路径

alt：定义图像的替代文本

width：规定图片宽度

height：规定图像的高度

title：鼠标悬停在图片给予的提示

![762af310a45448548df3c6c73f7cfd2f.png][]

#### 5、超文本链接 ####

<a>标签设置超链接，超链接可以是文本、图片。

属性：href：定义链接地址

![a92a12a0fed146339606ff17186be793.png][]

#### 6、文本标签 ####

![014805d11eb74a539e48600be75a4bb0.png][]

#### 7、列表标签 ####

A、有序标签

有序列表是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表始于<li>标签。且列表可以嵌套。

属性：type：1：表示使用数字标号

a：表示使用小写字母标号

A：表示使用大写字母标号

i：表示使用小写罗马数字标号

I：表示大写罗马数字标号

![c43af570fc01479fa7f979d9e1b89196.png][]![7ab3c6ff0113423f87fad0dd6d9eb66b.png][]

B、无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表始于<ul>标签。每个列表项始于<li>标签。

属性：type：disc：默认实心圆

circle：空心圆

square：小方块

none：不显示

#### 8、表格 ####

表格标签：<table>

行标签：<tr>

列标签：<td>

表格属性：border：设置表格的边框

width：设置表格的宽度

height：设置表格的高度

colspan：列合并。左右

rowspan：行合并。上下

#### 9、form表单 ####

表单是由容器和控件组成的， 一个表单一般应该包含用户填写信息的输入框，提交按钮等，这些输入框、按钮叫做表单控件，表单就是容器，它能够容纳各种各样的控件。

属性：action：服务器地址

name：表单名称

method：提交方式(get、post)

控件：按钮：button

输入框：input

文本框：text

密码框：password

#### 10、块元素、行内元素 ####

H5之前，经常把元素按照块元素和内联元素区分。在H5中，元素不再按照这种方式来区分，而是按照内容模型来区分，分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语句型(phrasing content)、内嵌型(embedded content)、交互型(interactive content)。元素不属于任何一类，被称为穿透，元素可能属于不止一个类别，称为混合。

![e827c61dc4664619a0d4c4e04370c81b.png][]

#### 11、H5新增标签 ####

H5出现之前，一般采用div+CSS布局页面。这种布局方式不能清晰展示文档结构，也不利于搜索引擎爬虫对页面的爬取。

div：容器元素，

H5新标签：

<header></header>：头部

<nav></nav>：导航

<section></section>：定义文档中的节，章节、页眉、页脚等

<aside></aside>：侧边栏

<footer></footer>：脚部

<article></article>：代表一个独立的、完整的相关内容块。

[2fc248a183e84b16904abcfb1e2a34f8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/9aaad3cb4d964050ac9a1c926967d03b.png
[8d01a55a4f0d466f9086021fc656cbd0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/25ab02e8f27940d898aaa5f3365f4c4c.png
[fbddc25d62a64e959b4099777251f862.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/7b2cbe5eb79645b9ae31319ab7ffb068.png
[0bf779e2386d45ada2fba36cad08827c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/7624ef3e185346a787a1c299b723538d.png
[a4fe2dbc30604119b5cf45e57b01d337.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/583ddb0785794b11b41ffbc5143fa718.png
[a30ff1bbc403483894e2bed07e0f83cc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/39fbf9f6ec2544fb9ae9465ee3ad18ca.png
[5413df4625fa4f6cacb4235fae7ec464.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/fe17e81c800e4d7da577bf3723acc4bc.png
[762af310a45448548df3c6c73f7cfd2f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/41e3e36c99ab48fc969534480dc20039.png
[a92a12a0fed146339606ff17186be793.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/18b9b9ba8126446e90603afde3a18401.png
[014805d11eb74a539e48600be75a4bb0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/482312d4d3234c31a6efbb4a336a092c.png
[c43af570fc01479fa7f979d9e1b89196.png]: https://img-blog.csdnimg.cn/c43af570fc01479fa7f979d9e1b89196.png
[7ab3c6ff0113423f87fad0dd6d9eb66b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/8a155193b96145da809adbf6044481aa.png
[e827c61dc4664619a0d4c4e04370c81b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/ae2241a6dda64a3dbe41c8ae1c48b0b6.png