HTML

文章目录
什么是HTML
HTML 标签
HTML 元素
!DOCTYPE 声明
HTML头部head
HTML title元素
HTML base 元素
HTML link 元素
HTML meta 元素
HTML 属性
HTML 属性常用引用属性值
标题
HTML 段落
HTML 链接
HTML 链接 - target 属性
HTML 链接- id 属性
HTML 图像
HTML 图像- 图像标签（ img）和源属性src
HTML 图像- Alt属性
HTML 图像- 设置图像的高度与宽度
HTML标题
HTML 元素语法
HTML中如何使用CSS
内联样式
内部样式表
外部样式表
HTML 表格
HTML 表格表头
HTML 表格和边框属性
HTML 列表
HTML无序列表
HTML 有序列表
HTML 自定义列表
HTML的块级元素和内联元素
HTML 块级元素
HTML 内联元素
HTML
元素
HTML 元素
HTML 表单和输入
HTML 表单
HTML 表单 - 输入元素
文本域（Text Fields）
密码字段
单选按钮（Radio Buttons）
复选框（Checkboxes）
提交按钮(Submit Button)
HTML 框架Iframe
iframe语法
Iframe - 移除边框
HTML 颜色
颜色值
HTML 脚本
HTML
什么是HTML
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如 和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>
1
HTML 元素
“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素:

!DOCTYPE 声明

声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的，以下方式均可：
. doctype 声明是不区分大小写的，用来告知 Web 浏览器页面使用了哪种 HTML 版本。
在HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML（Standard Generalized Markup Language 标准通用标记语言）。
HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。
HTML5 不是基于 SGML，因此不要求引用 DTD。
2. 对于中文网页需要使用 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 。
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候需要在头部将字符声明为 UTF-8。

HTML头部head
元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为:

HTML title元素
HTML base 元素
标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接

1 2 3 HTML link 元素 1 2 3 HTML meta 元素 meta标签描述了一些基本的元数据。

标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

为搜索引擎定义关键词:

1
2
为搜索引擎定义关键词:

1 每30秒钟刷新当前页面: 1 HTML 属性 HTML 元素可以设置属性 属性可以在元素中添加附加信息 属性一般描述于开始标签 属性总是以名称/值对的形式出现，比如：name=“value”。

HTML 属性常用引用属性值
属性值应该始终被包括在引号内。
双引号是最常用的，不过使用单引号也没有问题。
Remark提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John “ShotGun” Nelson’

标题
HTML 标题（Heading）是通过<h1 - h6> 标签来定义的.

这是一个标题

这是一个标题

这是一个标题

1 2 3 HTML 段落 HTML 段落是通过标签 p来定义的.

这是一个段落。

这是另外一个段落。

1 2 HTML 链接 HTML 链接是通过标签 a> 来定义的.

这是一个链接
1
HTML 链接 - target 属性
使用 target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档：

实例

访问菜鸟教程!
1
HTML 链接- id 属性
id属性可用于创建在一个HTML文档书签标记。

提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。

HTML 图像

1
HTML 图像- 图像标签（ img）和源属性src
在 HTML 中，图像由 标签定义。

img 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

1 HTML 图像- Alt属性 alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

1 HTML 图像- 设置图像的高度与宽度 1 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。 注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

更多图像标签
在这里插入图片描述

HTML标题
HTML 元素语法
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
注释: 您将在本教程的下一章中学习更多有关属性的内容。

1. 一些标签的使用，切记所有标签都需要闭合，不管是单体标签还是成对标签。（尽管目前浏览器是识别有些标签不闭合的情况，但是取的最好的保证兼容性，使用闭合）
2. 标签写法要用小写字母（有些版本对大小写可认为相同，而xhtml中强制使用小写）

HTML中如何使用CSS
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 区域使用

在本站的HTML教程中我们使用了内联CSS样式来介绍实例，这是为了简化的例子，也使得你能更容易在线编辑代码并在线运行实例。

你可以通过本站的 CSS 教程 学习更多的 CSS 知识。

内联样式

这是一个标题

这是一个段落。

1 2 3 4

一个标题

一个段落。

1 2 内部样式表 当单个文件需要特别样式时，就可以使用内部样式表。你可以在 部分通过 1 2 3 4 5 6 外部样式表 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。 1 2 3 HTML 表格 表格由

标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由
标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

1 2 3 4 5 6 7 8 9 HTML 表格表头 表格的表头使用 标签进行定义。

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

大多数浏览器会把表头显示为粗体居中的文本：

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

1 2 3 4 5 6 7 8 9 10 11 12 13 14 HTML 表格和边框属性 如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

Row 1, cell 1

Row 1, cell 2

1 2 3 4 5 6 HTML 列表 HTML无序列表 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用

标签

• Coffee
• Milk

1 2 3 4 HTML 有序列表 同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于

标签。每个列表项始于
标签。
列表项使用数字来标记。

1. Coffee
2. Milk

1 2 3 4 HTML 自定义列表

Coffee

- black hot drink

Milk

- white cold drink

1 2 3 4 5 6 HTML的块级元素和内联元素 HTML 块级元素 大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例:

,
,

,
HTML 内联元素
内联元素在显示时通常不会以新行开始。

实例: , , ,

HTML
元素
HTML

元素是块级元素，它可用于组合其他 HTML 元素的容器。
元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，

元素可用于对大的内容块设置样式属性。
元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 元素进行文档布局不是表格的正确用法。
元素的作用是显示表格化的数据。
HTML 元素
HTML 元素是内联元素，可用作文本的容器

元素也没有特定的含义。

当与 CSS 一同使用时， 元素可用于为部分文本设置样式属性。
在这里插入图片描述

HTML 表单和输入
HTML 表单
表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 来设置:

. input 元素 . 1 2 3 4 5 HTML 表单 - 输入元素 多数情况下被用到的表单标签是输入标签（）。

文本域（Text Fields）
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

First name:
Last name: 1 2 3 4 在这里插入图片描述

密码字段
密码字段通过标签 来定义:

Password: 1 2 3 在这里插入图片描述

单选按钮（Radio Buttons）
标签定义了表单单选框选项

Male
Female 1 2 3 4 在这里插入图片描述

复选框（Checkboxes）
定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

I have a bike
I have a car 1 2 3 4 在这里插入图片描述

提交按钮(Submit Button)
定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理

Username: 1 2 3 4 在这里插入图片描述

HTML 框架Iframe
iframe语法
该URL指向不同的网页

1 Iframe - 移除边框 frameborder 属性用于定义iframe表示是否显示边框。

设置属性值为 “0” 移除iframe的边框

HTML 颜色
颜色值
HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。

这个表格给出了由三种颜色混合而成的具体效果：
在这里插入图片描述
1600万种不同颜色
三种颜色 红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)。

在下面的颜色表中你会看到不同的结果，从0到255的红色，同时设置绿色和蓝色的值为0,随着红色的值变化，不同的值都显示了不同的颜色。

HTML 脚本
javaScript 使 HTML 页面具有更强的动态和交互性。

HTML
定义一个页面或是区域的头部
定义一个区域
定义页面内容的侧边框部分
定义一个页面或是区域的底部

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bU36HeeY-1615687625596)(C:\Users\47302\AppData\Roaming\Typora\typora-user-images\image-20210314093100367.png)]

下面内容转载自 ：https://www.cnblogs.com/progor/p/8945071.html

结构化标签
header
功能：header标签定义页面的页眉信息。【主要用于定义结构，一般来说也可以使用其他方式来创建头部，但使用header就标注出了这个结构是头部，比其他多出了语意】
例子：比如一些网上商城的顶部logo信息
<body>
    <header id="header" class="" style="background-color: orange;">
        <div style="float:left">
            Logo
        </div>
        <div style="float:right">
            <span>登录</span>
            <span>登录</span>
        </div>
        <div style="clear:both"></div>
    </header><!-- /header -->
</body>
1
2
3
4
5
6
7
8
9
10
11
12
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0RKXCl1s-1615687625598)(C:\Users\47302\AppData\Roaming\Typora\typora-user-images\image-20210314093259599.png)]

nav
定义导航链接。【主要用于定义结构，一般来说也可以使用其他方式来创建导航，但使用nav就标注出了这个结构是导航，比其他多出了语意】
<nav class="">
        <ul>
            <li><a href="#">食品</a></li><!--
         --><li><a href="#">电器</a></li><!--
         --><li><a href="#">电子数码</a></li><!--
         --><li><a href="#">书籍</a></li>
        </ul>
    </nav>
1
2
3
4
5
6
7
8
article
article比p，比div多了语意，虽然理论上都可以使用div来实现，但多出了语意。【比如一本书可以一章可以有多个段落，但可以有几章，而article的语意就像章节，它的内容是独立的，而不是仅仅的“段落”】
<article>
        <header id="header" class="">
            头部：菜鸡互啄区
        </header><!-- /header -->
        <h2>是道德的沦丧，还是。。。</h2>
        贪玩蓝月，你没玩过的全新版本
        <footer>
            底部：欢迎评论
        </footer>
    </article>
1
2
3
4
5
6
7
8
9
10
footer
功能：用来定义页尾。【主要用于定义结构，一般来说也可以使用其他方式来创建页脚，但使用footer就标注出了这个结构是页脚，比其他多出了语意】
<footer>
        <div style="float:left;margin-right: 10px;">
            <div style="font-weight: bold;">合作伙伴</div>
            <div>支付宝</div>
            <div>baidu</div>
        </div>
        <div style="float:left">
            <div style="font-weight: bold;">帮助信息</div>
            <div>企业信息</div>
            <div>联系方式</div>
        </div>
    </footer>
1
2
3
4
5
6
7
8
9
10
11
12
section
功能：定义网页的中的“区块”【比p多出语意“区块”，而又比div少出样式之意，div更多的用来定义样式，而session可以用来做结构划分】【如果article是一篇文章的话，那么session可以某块围绕一个论点的文章内容】
<section>
        <h3>小标题：如何学习马克思</h3>
        <p>...巴拉巴拉</p>
    </section>
1
2
3
4
aside
功能：aside标签定义其所处内容之外的内容。【aside有语意“其他的内容”，比如说一篇文章有一些其他的相关内容，比如谈到贝叶斯模型，但本文不是主要谈论贝叶斯模型而仅仅以贝叶斯作为一个小点，而又想给出“其他的内容”来描述贝叶斯模型的时候，就可以使用aside】
<section>
         <p>xxx可以用到贝叶斯模型、马尔可夫模型xxx</p>
        <aside>
            <h3>贝叶斯模型</h3>
            <p>贝叶斯模型是xxxx</p>
        </aside>
        <aside>
            <h3>马尔可夫模型</h3>
            <p>马尔可夫模型是xxxx</p>
        </aside>
    </section>
1
2
3
4
5
6
7
8
9
10
11
媒体标签
audio
功能：可以用来定义音乐。

属性：

src:定义要播放的音乐的url地址
contorls:定义是否使用播放控件（控件有声音大小、停止播放等按钮）image【这些属性的设置既可以仅仅使用contorls,也可以使用controls=“controls”】
autoplay:定义音乐自动播放【这些属性的设置既可以仅仅使用autoplay,也可以使用autoplay=“autoplay”】
loop:定义循环播放【这些属性的设置既可以仅仅使用loop,也可以使用loop=“loop”】
<audio src="一眼万年.mp3" controls autoplay ></audio>
1
有时候可以使用“兼容模式”，由于有些网页不支持某些格式或无法播放某音乐，所以需要“多个源”

<audio loop controls>
        <source src="bg.mp3"> <!-- 当第一个无法播放时，播放第二个源的音乐 -->
        <source src="一眼万年.mp3">
    </audio>
1
2
3
4
vedio
功能：定义一个视频

属性：

src:指定视频的url
controls:定义是否使用播放控件（控件有声音大小、停止播放等按钮）image【这些属性的设置既可以仅仅使用contorls,也可以使用controls=“controls”】
autoplay:定义视频自动播放【这些属性的设置既可以仅仅使用autoplay,也可以使用autoplay=“autoplay”】
loop:定义视频循环播放【这些属性的设置既可以仅仅使用loop,也可以使用loop=“loop”】
其他：可以设置标签的width,heigh
<video src="K:\cloudmusic\MV\Taylor Swift - Sparks Fly.mp4"  controls></video>
1
同样的，有时候可以使用“兼容模式”，由于有些网页不支持某些格式或无法播放某视频，所以需要“多个源”

<video autobuffer autoloop loop controls>
        <source src="0.mp4">
        <source src="K:\cloudmusic\MV\Taylor Swift - Sparks Fly.mp4">

    </video>
1
2
3
4
5
新增的input属性（常用的）：
新增的type值：
date:

功能：可以选择日期image
示例：
复制代码

<input type="date" />
1
time:

功能：可以选择时间的输入框image
示例：
复制代码

<input type="time" name="selecttime" >
1
month:

功能：可以选择年份月份的输入框image

示例：

复制代码

<input type="month" name="selectmonth" >
1
week:

功能：可以选择XX年XX周的输入框image

示例：

复制代码

<input type="week" name="selectweek" >
1
search

功能：比普通的文本框增加了一个可全部删除的按钮image【可以点击右边的x来清除所有内容】

示例：

复制代码

<input type="search" >
1
range

功能：这是一个可拖动的滑动框image

属性:

min:定义滑动块的最小值
max:定义滑动块的最大值
value:定义默认值
step:定义最小滑动距离
示例：

复制代码

<input type="range" min="0" max="10" step="1">
1
url

功能：这个输入框能校验url的合法性image【当提交的时候才会检测】

示例：

复制代码

<form action="" method="post" >
        <input type="url" >
        <input type="submit" >
    </form>
1
2
3
4
email

功能：这个输入框能够校验email的合法性image

示例：

复制代码

<form action="" method="post" >
        <input type="email" >
        <input type="submit" >
    </form>
1
2
3
4
number

功能：这个输入框能校验输入的是否全部是数字image

示例：

复制代码

<form action="" method="post" >
        <input type="number" >
        <input type="submit" >
    </form>
1
2
3
4
新增的属性
list

功能：与datalist配合使用，用来显示输入框的提示选项（已经在datalist中演示了怎么使用了）
placeholder

功能：设置输入框的提示image【图中的用户名会随着输入自动消失，如果没有内容就又会显示出来】

示例：

复制代码

<form action="" method="post">
        <input type="text"  placeholder="用户名">
        <input type="submit" >
    </form>
1
2
3
4
multiple

功能：设置可以选择多个值

示例：

复制代码

<input type="file" multiple="multiple" >
1
required

功能：设置输入框为必填框【当提交的时候，如果没有填上就会显示成红色或者给予提示】image

示例：

复制代码

<form action="" method="post">
        <input type="text"  placeholder="用户名" required="required">

        <input type="submit" >
    </form>
1
2
3
4
5
autocomplete

功能：设置下次是否自动完成【如果设置了，那么下次输入时会有上次输入的提示】image

【注意：输入框需要name属性才能使得autocomplete生效】

也可以把autocomplete放到form中作为属性，代表整个表单都可以autocomplete，（然后也可以在某个输入框中设置autocomplete="off"来特定的不autocomplete）

示例：

复制代码

<form action="" method="get" autocomplete="on" >
        <input type="text"  placeholder="用户名" required="required" autocomplete="on" name="username">
        <input type="submit" >
    </form>
1
2
3
4
autofocus：

功能：设置是否自动获取焦点

示例：

复制代码

<form action="" method="post" >
        <input type="text"  placeholder="用户名" required="required" autofocus="autofocus">

        <input type="submit" >
    </form>
1
2
3
4
5
pattern：

功能：可以用来验证输入框的输入是否合法【考虑到行为样式结构相分离，像这样的表单验证应该由javascript完成，所以这里不介绍】