详细整理！！html5常用标签

共计 6561 个字符，预计需要花费 17 分钟才能阅读完成。

前言
一、HTML 简介
- 1.HTML 文件结构
- 2. 各标签意义
二、HTML 标签介绍
- 1. 标题标签
- 2. 段落标签
- 3. 换行标签
- 4.hr 标签
- 5. span 标签
- 6.div 标签
- 7.img 标签
- 8. 超链接标签
- 9. 注释标签
- 10. 空格
- 11. 格式化标签
- 12.sup 上标和 sub 下标
- 13. pre 预格式化标签
- 14.table 表格标签
- - table 标签基础内容
  - 合并单元格
- 15. 列表标签
三、行内元素、行内块元素和块级元素
- 1. display 属性
- - 块级元素转行内元素示例
  - 行内元素转块级元素示例
- 2. 什么是行内元素、块级元素和行内块元素？
- - 行内元素（inline element）
  - 行内块元素
  - 块元素（block element）

在学习 HTM L 之前，首先了解什么是 HTML：

HTML：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。它不是一种编程语言，而是一种标记语言，使用标签来描述网页。HTML 文档也叫做 web 页面。

HTML 代码是由标签构成的，标签名放到“”中。大部分标签都是成对出现，例如：以 body> 为开始标签，以 body> 为结束标签。少数标签只有开始标签的被称为“单标签”。

详细整理！！html5 常用标签

DOCTYPE html>
html>
    head>
        meta charset="utf-8">
        title>title>
    head>
    body>
        
    body>
html>

DOCTYPE html> 声明为 HTML5 文档
html> 元素是 HTML 页面的根元素
head> 元素包含了文档的元（meta）数据，如 meta charset="utf-8"> 定义网页编码格式为 utf-8
title> 元素描述了文档的标题
body> 元素包含了可见的页面内容

标题标签的默认样式是 自动加粗 的，字体一级标题最大，六级标题最小，每个标题标签独占一行；
标题标签是 块元素

h1>一级标题h1>
h2>二级标题h2> 
h3>三级标题h3>
h4>四级标题h4>
h5>五级标题h5>
h6>六级标题h6>

代码如下：

DOCTYPE html>
html>
    head>
        meta charset="utf-8">
        title>测试 HTMLtitle>
    head>
    body>
        h1>一级标题h1>
        h2>二级标题h2> 
        h3>三级标题h3>
        h4>四级标题h4>
        h5>五级标题h5>
        h6>六级标题h6>
    body>
html>

页面效果：
详细整理！！html5 常用标签

段落标签 p, 里面的内容是以段落的形式体现的，如果一个段落的文字太多，那么它会自适应浏览器窗口，一行显示不下，则会换行；
它代表着一个自然段；
段落标签是 块元素。

p>p>

代码如下：

DOCTYPE html>
html>

head>
    meta charset="utf-8">
    title>测试 HTMLtitle>
head>

body>
    p>
        注意：doctype 声明是不区分大小写的，用来告知 web 浏览器页面使用了那种 HTML 版本。对于中文网页需要使用 charset="utf-8" 声明编码，否则会出现乱码。有些浏览器 (如 360 浏览器) 会设置 GBK 为默认编码，则你需要设置为 charset="gbk"。目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候需要在头部将字符声明为 UTF-8。p>

    p>
        这是一个注意事项。p>

    p>
        这是一个注意事项。p>
body>

html>

页面展示：
详细整理！！html5 常用标签

换行标签 br 的作用是，强制换行。br 是 单标签。

br/>

代码如下：

DOCTYPE html>
html>

head>
    meta charset="utf-8">
    title>测试 HTMLtitle>
head>

body>
    第一行br/>
	第二行br/>
	第三行br/>
body>

html>

页面展示：
详细整理！！html5 常用标签

hr 标签：给页面添加一个分割线
hr 标签，可以添加样式

hr>

代码如下：

DOCTYPE html>
html>

head>
    meta charset="utf-8">
    title>测试 HTMLtitle>
head>
style>
    div>hr {
        height: 20px;
        background-color: red;
    }
style>

body>
    第一行br />
    hr>
    div>
        第二行br />
        hr>
    div>
    第三行
body>

html>

页面展示：

详细整理！！html5 常用标签

span>span>

span 用于对文档中的行内元素进行组合；
span 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异；
span 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式；
span 标签不同于 p 标签是一个行内元素（不独占一行）

代码示例：

DOCTYPE html>
html>

head>
    meta charset="utf-8">
    title>测试 HTMLtitle>
head>

body>
    span>1234span>
	span>5678span>
body>

html>

页面效果：
详细整理！！html5 常用标签

div>div>

div 标签可以看出是一个盒子容器，这里面可以放别的标签
div 标签是一个块元素

页面效果：

详细整理！！html5 常用标签

如上图控制台所示（打开控制台的方式：F12）：div 标签里面可以包含 p 标签，p 标签，里面不可以放 div 标签

img src="图片的路径 " alt=" 图片未加载成功时的提示 " title=" 鼠标悬浮时提示信息 " width=" 宽" height="高(宽高两个属性只用一个会自动等比缩放)">

src 的路径分为：网上的图片路径和本地的图片路径

a>a>

代码如下：

DOCTYPE html>
html>

head>
    meta charset="utf-8">
    title>测试 HTMLtitle>
head>

body>
    a href="http://www.baidu.com" target="_blank">百度a>
body>

html>

作用：点击文字跳到链接的地方
a 是行内元素
href：规定链接的目标 URL
target：（链接窗口的打开方式）
_blank：新窗口打开。
_parent：在父窗口中打开链接。
_self：默认，当前页面跳转。
_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。

html 中默认是不显示空格的，也就是说通过空格键加了空格也没有多个空格的效果，加多少个都是显示一个空格效果，需要特殊字符才能显示出空格效果。

html 的几种空格形式：

         
 
它叫不换行空格，全称 No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了 ，它是按下 space 键产生的空格。在 HTML 中，如果你用空格键产生此空格，空格是不会累加的（只算 1 个）。要使用 html 实体表示才可累加，该空格占据宽度受字体影响明显而强烈。          
 
它叫“半角空格”，全称是 En Space，en 是字体排印学的计量单位，为 em 宽度的一半。根据定义，它等同于字体度的一半（如 16px 字体中就是 8px）。名义上是小写字母 n 的宽度。此空格传承空格家族一贯的特性：透明的，此空格有个相当稳健的特性，就是其 占据的宽度正好是 1 / 2 个中文宽度，而且基本上不受字体影响。         
 
它叫“全角空格”，全称是 Em Space，em 是字体排印学的计量单位，相当于当前指定的点数。例如，1 em 在 16px 的字体中就是 16px。此空格也传承空格家族一贯的特性：透明的，此空格也有个相当稳健的特性，就是其 占据的宽度正好是 1 个中文宽度，而且基本上不受字体影响。          
 
它叫窄空格，全称是 Thin Space。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。它是 em 之六分之一宽。‌ 
 
它叫零宽不连字，全称是 Zero Width Non Joiner，简称“ZWNJ”，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。Unicode 中的零宽不连字字符映射为“”（zero width non-joiner，U+200C），HTML 字符值引用为：‌
 
‍
 
它叫零宽连字，全称是 Zero Width Joiner，简称“ZWJ”，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的 Unicode 码位是 U +200D (HTML: ‍ ‍）。

代码示例：

DOCTYPE html>
html>

head>
    meta charset="utf-8">
    title>测试 HTMLtitle>
head>

body>
    strong>加粗strong>
    b>加粗b>
    em>倾斜em>
    i>倾斜i>
    del>删除线del>
    ins>下划线ins>
    u>下划线u>
body>

html>

页面展示：

详细整理！！html5 常用标签

strong> 和 b> 都是加粗文本，但是 strong> 的语义更加强列

代码示例：

DOCTYPE html>
html>

head>
    meta charset="utf-8">
    title>测试 HTMLtitle>
head>

body>
    p>
        xsup>2sup>
    p>
    p>
        logsub>2sub>10
    p>

body>

html>

页面展示：

详细整理！！html5 常用标签

代码如下：

DOCTYPE html>
html>

head>
    meta charset="utf-8">
    title>测试 HTMLtitle>
head>

body>
    pre>
		我是一个 有样式
		的文字
	pre>
body>

html>

页面展示：
详细整理！！html5 常用标签

可以看出上面的代码和运行结果显示 pre> 标签保留了文本中的空格和换行

pre> 标签可定义预格式化的文本。被包围在 pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

table 标签包含 tr, tr 标签包含 td 和 th：

table：表示整个表格
tr：表示表格的一行
td：表示一个单元格
th：表示表头单元格，会居中加粗
thead：表格的头部区域, 范围是比 th 大
tbody：表格得到主体区域

表格标签的属性可以用于设置边框大小等，但需要放到 table 标签中：

align：是表格相对于周围元素的对齐方式，align=“center”(不是内部元素的对齐方式)
border：表示边框，1 表示有边框(数字越大, 边框越粗)，“”表示没边框
cellpadding：内容距离边框的距离，默认 1 像素
cellspacing：单元格之间的距离，默认为 2 像素
width / height：设置尺寸

代码示例：

DOCTYPE html>
html>

head>
    meta charset="utf-8">
    title>测试 HTMLtitle>
head>

body>
    table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500">
        tr>
            td>姓名td>
            td>性别td>
        tr>
        tr>
            td>张三td>
            td>男td>
        tr>
    table>
body>

html>

页面展示：

详细整理！！html5 常用标签

先确定跨行还是跨列，找好目标单元格 (跨列合并，左侧是目标单元格；跨行合并，上方是目标单元格)，删除的多余的单元格。
跨行合并: rowspan=“n”
跨列合并: colspan=“n”

代码示例：

DOCTYPE html>
html>

head>
    meta charset="utf-8">
    title>测试 HTMLtitle>
head>

body>
    table width="100%" align="center" border="1">
        tr align="center">
            th colspan="6">
                财务周期表
            th>
        tr>
        tr>
            th colspan="3" align="left" style="border-right-style: hidden;">
                商品类型：JJJ
            th>
            th colspan="3" align="left" style="border-left-style: hidden;">
                商品编号：AAAA
            th>
        tr>
        tr align="center">
            th width="17%">
                成本
            th>
            th width="17%">
                损耗
            th>
            th width="17%">
                保全价值
            th>
            th width="17%">
                成本
            th>
            th width="17%">
                损耗
            th>
            th width="17%">
                保全价值
            th>
        tr>

        tr align="center">
            td width="17%">
                100
            td>
            td width="17%">
                233
            td>
            td width="17%">
                345
            td>
            td width="17%">
                467
            td>
            td width="17%">
                523
            td>
            td width="17%">
                64
            td>
        tr>
    table>
body>

html>

页面展示：

详细整理！！html5 常用标签

无序列表：ul，li

有序列表：ol，li

自定义列表：dl（总标签），dt（小标题），dd

注：元素之间是并列关系：

ul/ol 中只能放 li 不能放其他标签
dl 中只能放 dt 和 dd
li 中可以放其他标签

代码示例：

DOCTYPE html>
html>

head>
    meta charset="utf-8">
    title>测试 HTMLtitle>
head>

body>
    h2>无序列表h2>
    ul>
        li>111li>
        li>222li>
        li>333li>
    ul>
    h2>有序列表h2>
    ol>
        li>111li>
        li>222li>
        li>333li>
    ol>
    h2>自定义列表h2>
    dl>
        dt>111dt>
        dd>222dd>
        dd>333dd>
        dd>444dd>
    dl>
body>

html>

页面展示：

详细整理！！html5 常用标签

HTML 可以将元素分类方式分为 行内元素、块级元素和行内块元素。

使用 display 属性能够将三者任意转换：

display:inline;// 转换为行内元素
display:block;// 转换为块级元素
display:inline-block// 转换为行内块元素

p 标签是块级元素：

DOCTYPE html>
html>

head>
    meta charset="utf-8">
    title>测试 HTMLtitle>
head>

body>
    p>第一段p>
    p>第二段p>
body>

html>

上面代码的页面展示如图：
详细整理！！html5 常用标签
通过 display:inline; 将其转化为行内元素：

DOCTYPE html>
html>

head>
    meta charset="utf-8">
    title>测试 HTMLtitle>
head>

body>
    p style="display:inline">第一段p>
    p style="display:inline">第二段p>
body>

html>

页面展示如图：
详细整理！！html5 常用标签

span style="text-align: center;">这是行内元素span>

此时的页面展示如下，因为 text-align 修饰的是块级元素：
详细整理！！html5 常用标签
当通过 display:block; 转化为块级元素时：

span style="text-align: center;display: block;">这是行内元素span>

页面展示如下：
详细整理！！html5 常用标签

text-indent/text-align 都是修饰块级元素

特点：1. 不会独占一行，它是自左向右排列，一行排满再换行

         2. 行内元素的宽和高，默认是被内容撑开的

         3. 对 margin 仅设置左右方向有效，上下无效，padding 设置上下左右都有效

         4. 不会自动进行换行

常用行内元素：span em strong a i ......

特点：1. 兼具块元素和行内元素特点

         2. 不会独占一行，可自定义宽高

         3. 默认排序方式为从左到右

特点：1. 能够识别宽高

        2.margin 和 padding 的上下左右均对其有效

        3. 独占一行

        4. 多个块级元素标签写在一起，默认排序方式为从上至下

常用块元素：div h1-h6 p header footer nav......

拓展内容：

HTML5 基础知识

原文地址: 详细整理！！html5 常用标签

详细整理！！html5常用标签

文章目录

前言

一、HTML 简介

1.HTML 文件结构

2. 各标签意义

二、HTML 标签介绍

1. 标题标签

2. 段落标签

3. 换行标签

4.hr 标签

5. span 标签

6.div 标签

7.img 标签

8. 超链接标签

9. 注释标签

10. 空格

11. 格式化标签

12.sup 上标和 sub 下标

13. pre 预格式化标签

14.table 表格标签

table 标签基础内容

合并单元格

15. 列表标签

三、行内元素、行内块元素和块级元素

1. display 属性

块级元素转行内元素示例

行内元素转块级元素示例

2. 什么是行内元素、块级元素和行内块元素？

行内元素（inline element）

行内块元素

块元素（block element）

WordPress3 和 jQuery（二）

RabbitMQ 篇-深入了解 RabbitMQ 安装以及 SpringAMQP 的基础使用（声明队列和交换机、发送接收消息、配置 JSON 消息转化器）

CSS3新增属性(15个案例代码效果图素材)

fastjson_1.2.24和Shiro(CVE-2016-4437)漏洞复现

一文彻底搞定MySQL中的JSON类型，效率飞起。

详细整理！！html5常用标签

文章目录

前言

一、HTML 简介

1.HTML 文件结构

2. 各标签意义

二、HTML 标签介绍

1. 标题标签

2. 段落标签

3. 换行标签

4.hr 标签

5. span 标签

6.div 标签

7.img 标签

8. 超链接标签

9. 注释标签

10. 空格

11. 格式化标签

12.sup 上标和 sub 下标

13. pre 预格式化标签

14.table 表格标签

table 标签基础内容

合并单元格

15. 列表标签

三、行内元素、行内块元素和块级元素

1. display 属性

块级元素转行内元素示例

行内元素转块级元素示例

2. 什么是行内元素、块级元素和行内块元素？

行内元素（inline element）

行内块元素

块元素（block element）

WordPress3 和 jQuery（二）

RabbitMQ 篇-深入了解 RabbitMQ 安装以及 SpringAMQP 的基础使用（声明队列和交换机、发送接收消息、配置 JSON 消息转化器）

CSS3新增属性(15个案例 代码 效果图 素材)

fastjson_1.2.24和Shiro(CVE-2016-4437)漏洞复现

一文彻底搞定MySQL中的JSON类型，效率飞起。

CSS3新增属性(15个案例代码效果图素材)