HTML简介：想成为前端开发者？先从掌握HTML开始！

这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

谁见过风呢

勿论你和我

但当树木俯首

风正经过

- 2024.03.05 -

在这个数字化的时代，我们每天都在与网页打交道。你是否曾经好奇过，这些充满魔力的网页是如何诞生的呢？今天，我们就来揭开构成这些网页的神秘面纱——HTML（超文本标记语言）。

一、什么是HTML

网页的基本组成

网页是构成网站的基本元素，通常由图片、链接、文字、声音、视频等元素组成，通常我们看见的网页都是.htm和.html后缀结尾的文件，因为都称为HTML文件。

什么是HTML

HTML 英文全称是 Hyper Text Markup Language，中文译为“超文本标记语言”，专门用来设计和编辑网页。

使用 HTML 编写的文件称为“HTML 文档”，一般后缀为.html（也可以使用.htm，不过比较少见）。HTML 文档是一种纯文本文件，您可以使用 Windows 记事本、Linux Vim、Notepad++、Sublime Text、VS Code 等文本编辑来打开或者创建。

每个网页都是一个 HTML 文档，使用浏览器访问一个链接（URL），实际上就是下载、解析和显示 HTML 文档的过程。将众多 HTML 文档放在一个文件夹中，然后提供对外访问权限，就构成了一个网站。

二、HTML的历史

HTML的故事始于1989年，当时蒂姆·伯纳斯-李在欧洲核子研究中心（CERN）提出了一个名为“万维网”的概念。

为了实现这一概念，他发明了HTML，并随后与罗伯特·卡里奥一起发明了HTTP协议。从那时起，HTML就成为了互联网不可或缺的一部分。

上图简单罗列了HTML的发展历史，大家可以简单了解一下。

三、HTML相关概念

什么是标签

HTML 标记通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词，比如<html/>。

封闭类型标记（也叫双标记），必须成对出现,如<p></p> 。

标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签。

非封闭类型标记，也叫作空标记，或者单标记，如<br/>

<标签>内容<标签/>

什么是元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思。但是严格来讲，一个HTML 元素包含了开始标签与结束标签，如下实例。

HTML 元素：

<p>这是一个段落</p>

web浏览器

Web 浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取 HTML 文件，并将其作为网页显示。浏览器并不是直接显示的 HTML 标签，但可以使用标签来决定如何展现 HTML页面的内容给用户：

HTML 属性

属性是用来修饰元素的，属性必须位于开始标签里，一个元素的属性可能不止一个，多个属性之间用空格隔开，多个属性之间不区分先后顺序。

每个属性都有值，属性和属性的值之间用等号链接，属性的值包含在引号当中，属性总是以名称/值对的形式出现。

四、HTML的基本结构

一个典型的HTML文档由以下几个基本元素构成：

<!DOCTYPE html>

这是文档类型声明，告诉浏览器这个文档使用的是HTML5标准。

<html>

这是整个HTML文档的根元素，其他所有元素都包含在这个标签内。

<head>

这个部分包含了所有关于网页的元信息，如标题、字符集声明、引入的CSS样式表和JavaScript文件等。

<title>

这个标签定义了网页的标题，它显示在浏览器的标题栏或标签页上。

<body>

这个部分包含了网页的所有内容，如文本、图片、链接、表格、列表等。

HTML的结构示例

让我们通过一个简单的例子来具体了解HTML的结构：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个HTML页面</title>
</head>
<body>
<h1>欢迎来到我的网页！</h1>
<p>这是一个简单的段落。</p>
<a href="https://www.example.com">点击这里访问示例网站</a>
</body>
</html>

在这个例子中，我们可以看到一个完整的HTML文档结构，从<!DOCTYPE html>开始，到最后一个</html>结束。

想象一下，如果HTML是一棵树，那么<html>就是树干，<head>和<body>就像是树的两个主要分支。<head>中的标签好比是树叶，它们虽然不起眼，但却至关重要，为树木提供营养。而<body>中的标签则像是树枝和果实，它们构成了树的主体，吸引人们的目光。

想要快速入门HTML吗？推荐一个前端开发基础课程，这个老师讲的特别好，零基础学习无压力，知识点结合代码，边学边练，可以免费试看试学，还有各种辅助工具和资料，非常适合新手！搜索【云端源想】前往学习哦！

五、HTML的特点

HTML的特点主要包括简易性、可扩展性、平台无关性和通用性等。具体如下：

1、简易性：

HTML是一种相对容易学习和使用的语言，它的版本升级通常采用超集方式，使得新版本能够兼容旧版本的标签和功能，这样既保持了向后兼容性，又能够灵活方便地引入新的功能。

2、可扩展性：

随着互联网的发展，HTML也在不断增加新的元素和属性来满足新的需求，如支持多媒体内容的嵌入、更丰富的表单控件等。这种设计使得HTML能够适应不断变化的网络环境。

3、平台无关性：

HTML编写的网页可以在不同的操作系统和浏览器上显示，这是因为HTML是一种与平台无关的语言。这意味着无论用户使用什么设备或浏览器，都能够访问和浏览HTML页面。

4、通用性：

HTML是网络的通用语言，它是一种简单的标记语言，用于创建和结构化网页内容。由于其广泛的支持和普及，几乎所有的设备和浏览器都能够解析和显示HTML内容。

5、支持多种媒体格式：

HTML不仅支持文本内容，还能够嵌入图片、音频、视频等多种媒体格式，这使得网页可以提供丰富的用户体验。

6、标准化：

HTML遵循万维网联盟（W3C）制定的国际标准，这意味着网页开发者可以根据这些标准来创建网页，确保网页的互操作性和可访问性。

7、标签丰富：

HTML提供了一系列的标签，如标题、列表、链接、表格等，这些标签使得开发者能够创建出结构清晰、功能丰富的网页。

综上所述，HTML作为一种基础的网页开发语言，因其易学易用、跨平台、多功能和高度标准化的特点，成为了构建现代网络内容的核心工具。

HTML作为连接世界的纽带，其重要性不言而喻。它是数字世界的基石，也是每个想要进入互联网领域的人必须掌握的技能。无论你是梦想成为前端开发者，还是仅仅想要更好地理解这个由代码构成的世界，学习HTML都是一个不错的开始。

今天就先讲到这里了，

更多前端开发基础知识点击文末阅读原文查看哦！

记得关注【云端源想IT】一起学编程！

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

成	语言	描述
结构	HTML	网页元素和内容
表现	CSS	网页元素页面样式
行为	JavaScript	网页交互

1 HTML概念

HTML，超文本标记语言（Hyper Text Markup Language），是一门描述性语言。标记，标签，元素，叫法不同，意思相同。HTML超文本标记语言主要通过标签的方式，对网页页面的文本、图片、音频、视频等内容进行描述。学习HTML，就是学习各种标签，来搭建网页的结构。

2 HTML结构

结构：!DOCTYPE

说明：作用是告诉浏览器用哪个文档规范来解析文档

标签：html

说明：用于搭建HTML网页文档结构和网页布局

标签：head

说明：用于定义HTML网页文档的头部,它是所有头部元素的容器

标签：body

说明：用来定义HTML网页文档的主体区域

标签：meta

说明：用来描述HTML网页文档的属性

标签：title

说明：用来放到HTML网页文档的头部，是搜索引擎首要抓取的目标代码

2.1 标签

标签，也叫作标记，是由一对尖括号<>，里面包含单词组成

2.1.1 双标签

<html></html>

2.1.2 单标签

<br>

2.1.3 标签关系

嵌套关系

<html>
    <head>
    </head>
</html>

并列关系

<head>
</head>
<body>    
</body>

3 注释

注释用来帮助程序员记录程序设计方法，辅助程序阅读

4 head标签

4.1 title标签

双标签，定义网页的标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>百度一下，你就知道了</title>
</head>
<body>

</body>
</html>

4.2 meta标签

是单标签，用来描述HTML网页文档的属性

4.2.1 name属性

属性值	说明
keywords	网页关键字，多个逗号隔开
description	网页描述
author	作者
copyright	版权信息

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 网页关键字 -->
    <meta name="keywords" content="html,css,javascript">
    <!-- 网页描述 -->
    <meta name="description" content="基础前端知识">
    <!-- 网页作者 -->
    <meta name="author" content="buddha">
    <!-- 网页版权信息 -->
    <meta name="copyright" content="版权所有，翻版必究">
</head>
<body>

</body>
</html>

标签属性：

1、标签的属性写在开始标签内部

2、标签名与属性之间要有空格隔开

3、一个标签可以同时存在多个属性

4、属性之间以空格隔开

5、属性没有先后顺序之分

4.2.2 http-equiv属性

属性值	说明
Content-Type	定义网页所使用编码
refresh	定义网页自动刷新跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 设置网页编码完整写法 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <!-- 设置网页编码简写写法 -->
    <meta charset="UTF-8">
    <!-- 网页打开3秒后跳去百度 -->
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
</head>
<body>

</body>
</html>

4.3 style标签

是双标签，用来定义标签的css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        /* css内联样式写这里 */
    </style>
</head>
<body>

</body>
</html>

4.4 link标签

是单标签，是用来引入外部css样式文件

<link rel="stylesheet" href="css/index.css" type="text/css">

4.5 script标签

是双标签，是用来写JavaScript代码的地方

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        /* 这里写JavaScript代码 */
    </script>

</head>
<body>

</body>
</html>

4.6 base标签

是单标签，是用来设置整个网页的基础路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="https://pic.rmb.bdstatic.com">

</head>
<body>
    <img src="bjh/news/e7fb4c2be6a2e439ff7e3197fa205d8f1336.gif">
</body>
</html>

开发中很少用到，有人使用知道就行

上面所述标签是放在head标签里的，接下来接触的标签都是放在body标签内的

5 文本标签

5.1 标题标签

是双标签，h是header的缩写

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

特点：

1、字体加粗

2、独占一行

3、从h1到h6，字体逐渐减小

4、使用<h>标签的主要意义是告诉搜索引擎这是一段文字的标题

5、<h1>在一个页面最多只能有一个，不要用多个

5.2 段落标签

是双标签，p是paragraph的缩写

<p>这是一段文字</p>
<p>这是一段文字</p>
<p>这是一段文字</p>

特点：

1、独占一行

2、段落与段落之间，存在间隙

5.3 换行标签

是单标签，br是break的缩写

<p>这是一段<br>文字</p>

特点：

1、强制换行

2、单标签

5.4 水平线标签

是单标签，hr是horizon地平线的缩写

<p>这是一段文字</p>
<hr>
<p>这是一段文字</p>

特点：

1、在页面中显示一条水平线

2、单标签

6 文本格式化标签

标签1	标签2	说明
b	strong	加粗
u	ins	下划线
i	em	倾斜
s	del	删除线

<b>这是一段文字</b>
<strong>这是一段文字</strong>
<br>
<u>这是一段文字</u>
<ins>这是一段文字</ins>
<br>
<i>这是一段文字</i>
<em>这是一段文字</em>
<br>
<s>这是一段文字</s>
<del>这是一段文字</del>

特点：

1、不会独占一行

2、推荐使用标签2所在列标签

6.1 上标标签

sup是superscripted这个单词的缩写

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    a<sup>2</sup>
</body>
</html>

6.2 下标标签

sub是subscripted这个单词的缩写

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    H<sub>2</sub>O
</body>
</html>

6.3 字符实体

在网页中展示特殊符号效果时，需要使用字符实体替代

显示结果	描述	实体名称
	空格
<	小于号	<
>	大于号	>
&	与	&
"	双引号	"
x	乘号	×
÷	除号	÷
-	长破折号	—
\|	竖线	\|
‘	左单引号	‘
‘	右单引号	’
©	版权符	©
®	注册商标	®
™	商标	™
°	度	°

7 媒体标签

7.1 图片标签

<img src="./001.jpg" alt="">

img标签常见属性：

属性名	说明
src	图片路径（绝对路径、相对路径）
alt	图片加载失败时，显示的文字
title	鼠标悬停时，显示的文字
width	图片宽度
height	图片高度

只设置宽或高，会自动等比缩放，宽高只需要数字，不需要'px'

<img src="./001.jpg" alt="图片加载失败" title="这是程序兔" width="200" height="200">

绝对路径：指目录下的绝对位置，比如从根目录开始的路径，或完整的网络地址
相对路径：从当前文件开始出发找目标文件的过程

7.2 音频标签

<audio src="music.mp3" controls autoplay loop></audio>

audio标签常见属性：

属性名	说明
src	音频路径
controls	显示播放控件
autoplay	自动播放
loop	循环播放

支持mp3、wav、ogg三种音频格式

7.3 视频标签

<video src="video.mp4" controls loop autoplay></video>

属性名	说明
src	视频路径
controls	显示播放控件
autoplay	自动播放
loop	循环播放

支持mp4、webm、ogg三种视频格式

7.4 超链接标签

超链接，是双标签，实现各个独立页面之间进行跳转，可以跳去站外也可以在站内之间跳转

<a href="链接地址">文本或图片</a>

站外跳转，采用绝对路径

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

站内跳转，采用相对路径

<!-- a页面 -->
<a href="b.html">跳去b页面</a>

<!-- b页面 -->
<p>b页面</p>

页面内跳转

<a href="#ms">美食</a>
<a href="#jd">景点</a>
<h3 id="ms">推荐美食</h3>
<!-- 省略n个br标签 -->
<br>
<h3 id="jd">推荐景点</h3>

属性名	说明
href	跳转链接
target	链接打开方式

target属性值

属性值	说明
_self	默认，原窗口打开链接
_blank	在新窗口打开链接
_parent	在父窗口打开链接
_top	在顶层窗口打开超链接

target属性值一般使用_self（默认）和_blank

8 列表标签

8.1 无序列表

<ul type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

解释：

1、ul，unordered lists，无序列表，li，list item，列表项

2、ul标签子标签只允许是li标签

3、li标签可以包含任意内容

type属性值

属性值	说明
disc	默认，实心圆
circle	空心圆
square	实心方型

<ul>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ul>

8.2 有序列表

<ol type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

解释：

1、ol，ordered lists，有序列表，li，list item，列表项

2、ol标签子标签只允许是li标签

3、li标签可以包含任意内容

type属性值

属性值	说明
1	默认，阿拉伯数字，1,2,3......
a	小写英文字母，a,b,c......
A	大写英文字母，A,B,C......
i	小写罗马数字,i,ii,iii......
I	大写罗马数字,I,II,III......

<ol>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ol>

8.3 自定义列表

<dl>
    <dt>名词</dt>
    <dd>描述</dd>
    ……
</dl>

解释：

1、dl，definition lists，自定义列表；dt，definition term，自定义列表组；dd，definition description，自定义列表描述

<dl>
    <dt>称呼</dt>
    <dd>你</dd>
    <dd>我</dd>
    <dd>他</dd>
</dl>

9 表格标签

9.1 表格基本结构

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

解释：

1、tr，table row，表格行；td，table data cell，表行单元格

<table>
    <tr>
        <td>1</td>
    </tr>
</table>

9.2 表格标签属性

属性名	属性值	描述
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

<table border="1" width="200" height="50">
    <tr>
        <td>1</td>
    </tr>
</table>

9.3 表格标题标签

<caption>标题内容</caption>，位于表格内第一行

<table border="1" width="200" height="50">
    <caption>数字</caption>
    <tr>
        <td>1</td>
    </tr>
</table>

9.4 表格表头单元格标签

<th></th>，th，table header cell，表头单元格

<table border="1" width="200" height="50">
    <caption>数字</caption>
    <tr>
        <th>序号</th>
    </tr>
    <tr>
        <td>1</td>
    </tr>
</table>

9.5 表格语义化结构标签

thead、tbody、tfoot

<table border="1" width="200" height="50">
    <caption>数字</caption>
    <thead>
        <tr>
            <th>序号</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>汇总</td>
        </tr>
    </tfoot>
</table>

9.6 合并单元格

属性名	属性值	说明
rowspan	合并单元格个数	合并行，单元格垂直合并
colspan	合并单元格个数	合并列，单元格水平合并

<td rowspan="跨越的行数"></td>

<td colspan="跨越的列数"></td>

<table border="1" width="200" height="50">
    <caption>数字</caption>
    <thead>
        <tr>
            <th>序号</th>
            <th>金额</th>
            <th>金额</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td rowspan="2">20</td>
            <td rowspan="2">20</td>
        </tr>
        <tr>
            <td>2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>汇总</td>
            <td colspan="2">40</td>
        </tr>
    </tfoot>
</table>

10 表单标签

10.1 form标签

双标签，包裹其它表单标签

<form>
    // 表单
</form>

form标签的常用属性

属性	说明
name	表单名称
method	提交方式
action	提交地址
target	打开方式
enctype	编码方式

name属性

一个页面中，表单可能不止一个。name属性，用来区分不同的表单

<form name="myForm"></form>

method属性

用来指定表单数据使用哪种提交方式给后端

属性值	说明
get	get方式
post	post方式

<form method="get"></form>

action属性

用来指定表单数据提交到哪个地址

<!-- 比如提交到index.php地址 -->
<form action="index.php"></form>

target属性

该属性跟a标签的target属性一样，其属性值也是四个，一般情况只用到_blank属性值，默认也是这个值

<form target="_blank"></form>

enctype属性

属性值	说明
application/x-www-form-urlencoded	在发送前编码所有字符（默认）
multipart/form-data	不对字符编码，在使用包含文件上传控件的表单时，必须使用该值
text/plain	空格转换为 "+" 加号，但不对特殊字符编码

<form enctype="multipart/form-data"></form>

10.2 input标签

input是单标签

<input type="表单类型">

属性值	说明
text	单行文本框
password	密码文本框
radio	单选框
checkbox	多选框
button	普通按钮
submit	提交按钮
reset	重置按钮
file	文件上传

单行文本框常用属性

属性	说明
value	设置文本框的默认值
size	设置文本框的长度
maxlength	设置最多可输入字符

<form>
    <input type="text" value="默认值" size="长度" maxlength="可输入字符">
</form>

<form>
    <label>姓名：<input type="text" value="曹操" size="20" maxlength="10"></label>
</form>

密码文本框常用属性

密码文本框常用属性和单行文本框常用属性相同

<input type="password" value="默认值" size="长度" maxlength="可输入字符">

<form>
    <label>密码：<input type="password" value="12345678" size="20" maxlength="10"></label>
</form>

单选框

属性	说明
name	组名，同组单选框，组名要相同，必要属性
value	单选框选项取值，必要属性
checked	默认选中项，同组单选框，可以有一个默认选中项

<input type="radio" name="组名" value="取值" checked="checked">

<form>
    性别：
    <input type="radio" name="sex" value="男" checked="checked">男
    <input type="radio" name="sex" value="女">女
</form>

复选框

复选框和单选框的属性都相同，区别复选框可以多选

<form>
    爱好：
    <input type="checkbox" name="hobby" value="篮球" checked>篮球
    <input type="checkbox" name="hobby" value="足球" checked>足球
    <input type="checkbox" name="hobby" value="台球">台球
</form>

普通按钮

<input type="button" value="取值">

<form>
    <input type="button" value="普通按钮">
</form>

<button>普通按钮</button>

区别：

1、input是单标签，button是双标签

2、button标签的信息除了文本，还可以是图像、其它标签等

3、button有type属性，属性值可以是button、submit、reset等

提交按钮

<input type="submit" value="取值">

<form>
    <input type="submit" value="提交">
</form>

把对应表单数据提交给后端服务器

重置按钮

<input type="reset" value="取值">

<form>
    <input type="reset" value="重置">
</form>

点击重置后，所在form表单里所有内容被清空了

文件上传

<input type="file">

<form>
    <input type="file">
</form>

10.3 多行文本框

<textarea name="文本名称" cols="列数" rows="行数"></textarea>

<form>
    <textarea name="文本名称" cols="1" rows="2"></textarea>
</form>

10.4 下拉列表

<select>
    <option>选项内容</option>
    <option>选项内容</option>
</select>

下拉列表标签是为了节省页面空间

select标签属性

属性名	说明
name	数据提交后端所需字段
size	下拉选项显示个数
multiple	默认只允许选一个，选多个得加这个属性
disabled	所有下拉选项禁止选中

<form>
    <select name="age" size="4" multiple="multiple" disabled="disabled">
        <option>18岁以下</option>
        <option>18-28岁</option>
        <option>28-38岁</option>
        <option>38岁以上</option>
    </select>
</form>

option标签属性

属性名	说明
selected	默认选中
value	被选中，数据提交后端的值
disabled	该下拉选项禁止选中

<form>
    <select name="age" size="5">
        <option value="1">18岁以下</option>
        <option value="2" disabled="disabled">18-28岁</option>
        <option value="3" selected="selected">28-38岁</option>
        <option value="4">38岁以上</option>
    </select>
</form>

11 框架标签

<iframe src="URL" width="数值" height="数值"></iframe>

框架标签常用属性

属性名	说明
src	嵌入的文档地址
width	标签宽度
height	标签高度

<iframe src="https://www.bilibili.com" width="300" height="200"></iframe>

有些文档禁止被嵌入

12 标签类型

HTML标签分为三种，行内标签、块级标签和行内块级标签。

12.1 行内标签

特点：

1、在页面内只占据刚好能包裹自己内容的空间

2、没有宽高，内容多大就多大，行内标签不能嵌套块级标签（a标签除外）

3、行内标签设置宽高无效，可以对行高line-height进行设置

4、可以设置外边距margin和内边距padding，但只对左右边距有效果，上下无效

5、常见行内标签span、a、strong、ins、del、br等

span标签

双标签，行内标签，本身没有固定样式

<p>我是<span>中国人</span></p>

12.2 块级标签

特点：

1、独占一行

2、高度、宽度、外边距、内边距都可以设置生效

3、宽度默认是父级宽度的100%

4、是一个容器盒子，可以嵌套多层子级行内标签、块级标签，文本类块级标签除外

5、常见块级标签div、p、h1~h6、ol、ul、li等

div标签

双标签，块级标签，本身没有固定样式

<!-- 头部区域 -->
<div></div>
<!-- 内容区域 -->
<div></div>

12.3 行内块级标签

特点

1、在页面内只占据刚好能包裹自己内容的空间

2、高度、宽度、外边距、内边距都可以设置生效

3、常见块级标签img、input、td

12.4 标签类型转换

通过css样式display属性转换，这是css的内容

、Html概述

Html是Hyper Text Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容文件渲染成网页，显示的网页可以从一个网页链接跳转到另一个网页。

二、Html标签语法

Html中标签分为：成对标签和自闭合标签【空标签】

1、成对标签

成对出现，有开始标签必须有结束标签，内容包裹在两个标签中，而且开始标签名和结束标签名一致,并且结束标签必须以斜杠/开头

语法：

<font>内容</font>

2、自闭合标签

只有一个标签，用斜杠结束，斜杠也可以省略

语法：

<br/>

注意事项：

成对标签中，结束标签必须以斜杠开头
成对标签与成对标签可以嵌套不能交叉
标签名不区分大小写，但是我们都必须小写

三、Html基本架构

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    
</body>
</html>

1、！DOCTYPE

!DOCTYPE html是文档声明，定义文档类型为html，并且告诉不同的浏览器用标准方式进行解析html语言，如果不写的话，会产生怪异模式，所谓怪异模式，就是浏览器会用自己的方式进行解析，不同的浏览器有各自的解析方式，从而会出现无效果、不兼容等问题。
注意，html中有两种声明类型，一种叫做xhtml，即html，另一种叫做html5，html5是xhtml的升级版，所以我们建议使用html5的声明方式
xhtml声明方式：
<htmlxmlns="http://www.w3.org/1999/xhtml">
html5声明方式：
<!DOCTYPE html>

2、html

html是html文档的整体，也就是表示一个网页。
html中的lang="en"是定义该文件语言是英文

3、head

head是html的第一层子元素【子标签】，负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和JavaScript文件等。设置的内容不会显示在网页上，标题的内容会显示在标题栏中。即title标签。

4、meta

meta是html语言head标签中的一个辅助性标签，该标签不包含任何内容，但是该标签的属性定义了与文档相关联的名称，比如：编码

<meta charset="utf-8"></meta>

5、body

body也是html的第一层子元素，我们页面中显示的所有内容全部都是编写在该标签体中。

四、Html文档规范

html制定了文档的编写规范，必须遵守。
所有的标签必须小写
所有的属性必须用双引号括起来

五、Html注释

html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上。
注释的语法：


六、html基本属性

注：属性是标签的辅助作用。

属性描述 bgcolor 设置网页的背景颜色 background 设置网页的背景图片

1.bgcolor

设置网页的背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <title>html的属性</title>
</head>
<body bacolor="pink">
    
</body>
</html>

2.路径

我们在开发网页时，需要经常的插入图片、视频、文件等一些操作，但是我们需要指定文件所在的位置，这个位置就是所谓的路径

路径分为：

相对路径指目标相对于当前文件的路径，网页结构设计中多采用这种方式来表示目标的路径。相对路径有多种表示方法，其表示的意义不尽相同。表示方法如下： ./ ：代表文件所在的目录（可以省略不写）../ ：代表文件所在的父级目录../../ ：代表文件所在的父级目录的父级目录/ ：代表文件所在的根目录【/ ：可以理解为目标文件的绝对路径】
绝对路径指目标文件的完整路径，从盘符开始。

3.background

设置网页的背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <title>html的属性</title>
</head>
<body background="../images/10.jpg">
    
</body>
</html>

注意事项：
bgcolor和background不能同时使用
background不能指定绝对路径

七、Html标签

1.网页的组成

网页的组成：文字、图片、视频、超链接、列表、表格、表单等组成。

2、文本段落标签

标签描述 hn 设置文字标题【n：取值范围 1~6】 center 居中对齐 hr 水平线属性（width：宽度 color：颜色 size：粗细） br 换行 p 段落

3、文本控制标签

标签描述 font 设置字体，需要借助属性设置

属性描述 color 设置字体颜色 size 设置字体大小，不需要带单位，取值范围：1~7【浏览器默认值：3】 face 设置字体风格

<font size="2" color="red" face="黑体"></font>

4、文本格式化标签

标签描述 b 定义粗体文本 em 定义着重文字 i 定义斜体文字 small 定义小号字 strong 定义加重语气 sub 定义下标字 sup 定义上标字 ins 定义插入字 del 定义删除字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html文本格式化标签</title>
</head>
<body>

    <b>粗体文本</b>
    <i>倾斜文本</i>
    <em>着重文本</em>
    <small>小号字</small>
    <strong>加重语气</strong>
    <sub>上标</sub>
    <sup>下标</sup>
    <ins>插入字</ins>
    <del>删除字</del>
    
</body>
</html>

5、图片标签

在Html中，图像由
标签定义。
是空标签，意思是说，它只包含属性。
要在页面上显示图像，你需要使用源属性（src）。src指"source"。源属性的值是图像的URL地址。

标签描述 img 图片标签

属性描述 src 指定图片的地址 width 设置图片的宽度 height 设置图片的高度 alt 设置图片的预备文本

注意事项：不建议设置图片大小，容易失真

6、audio

在Html中，声音由标签定义。

标签描述 audio 声音标签

属性描述 src 指定声音地址

<audio src="nice.mp3">对不起，您的浏览器不支持</audio>

7、video

在Html中，视频由video标签定义

标签描述 video 视频标签

属性描述 src 指定视频地址

<video src="美女.mp4">对不起，您的浏览器不支持</video>

8、超链接

a标签定义超链接，用于从一个页面链接到另一个页面。
a标签最重要的属性是href，它指定链接的目标。
在所有浏览器中，链接的默认外观如下：
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

语法：

<a href="链接目标">点击内容</a>

属性描述 href 指定链接目标 name 指定锚的名称 download 指定下载链接 target 指定跳转方式属性值描述 _blank 新窗口打开【常用】 _parent 在父窗口中打开链接【了解】 _self 默认，在当前窗口打开【了解】 _top 在当前窗体打开链接，并替换当前的整个窗体【了解】 framename 到 iframe 在讲【常用】

超链接分类：

内部链接链接目标：本地页面 <a href="demo.html">点击内容</a>
外部链接链接目标：外部页面 <a href="http://www.baidu.com">点击内容</a>
多媒体链接链接目标：图片、视频等 <a href="images/美女.jpg">点击内容</a>
电子邮件链接链接目标：电子邮件【系统自带的电子邮件】 <a href="mailto:12345@qq.com">点击内容</a>
锚链接链接目标：锚点 1.建立锚点
<a name="锚点名"></a>

2.跳转
<a href="#锚点名">点击内容</a>

9、列表

列表的使用与word等软件的列表概念相似，只不过是应用在网页展示中。

1.有序列表

有序列表是指有数字编号或字母的列表项，可以使用css定义更多样式。

<!-- 有序列表 -->
    <ol type="a">
        <li>新闻一</li>
        <li>新闻二</li>
        <li>新闻三</li>
    </ol>

属性描述 type 设置符号类型值：1 a A I i 默认数字 start 从第几个开始【用于ol标签中】 value 从第几个开始【用于li标签中】

<!-- 有序列表 -->
    <ol type="a" start="4">
        <li>新闻一</li>
        <li type="1" value="1">新闻二</li>
        <li>新闻三</li>
    </ol>

2、无序列表

无序列表是指没有数字编号或字母的列表项，可以使用css定义更多样式。

<!-- 无序列表 -->
<ul>
    <li>童装</li>
    <li>男装</li>
    <li>女装</li>
</ul>

属性描述 type 用于设置符号类型，默认：实心圆值：空心圆、正方形【用于ul、li】

<!-- 无序列表 -->
<ul type="square">
        <li>童装</li>
        <li type="circle">男装</li>
        <li>女装</li>
    </ul>

3、描述列表

描述列表指每个列表项有单独的标题。

<!-- 描述列表 -->
    <dl>
        <dt>开源产品</dt>
        <dd>Java封装库</dd>
        <dd>Web组件库</dd>
        
        <dt>网站导航</dt>
        <dd>mrliujava.com</dd>
        <dd>mrliuweb.com</dd>
    </dl>

10、表格

表格在网页开发中使用频率非常高，尤其是数据展示的时候。

10.1 基本使用

标签描述 table 代表表格标签 caption 表格标题 thead 表头部分 tbody 表格主体部分 tfoot 表格尾部

属性描述 border 表格边框 cellspacing 单元格与单元格间距 width 宽度 height 高度 bgcolor 设置背景颜色 background 设置背景图片 align 对齐方式

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>员工薪资统计表</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>职位</th>
                <th>薪资</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td>JavaEe工程师</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>Web前端工程师</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td>傻蛋</td>
                <td>妖</td>
                <td>测试工程师</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>当前页：1 页</td>
                <td>上一页</td>
                <td>下一页</td>
                <td>尾页</td>
                <td>共 3 页</td>
            </tr>
        </tfoot>
    </table>

10.2 单元格合并

属性说明 rowspan 行合并 colspan 列合并

下面是行合并：

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>员工薪资统计表</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>职位</th>
                <th>薪资</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td rowspan="2">JavaEe工程师</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td>傻蛋</td>
                <td>妖</td>
                <td>测试工程师</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>当前页：1 页</td>
                <td>上一页</td>
                <td>下一页</td>
                <td>尾页</td>
                <td>共 3 页</td>
            </tr>
        </tfoot>
    </table>

下面是列合并：

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>员工薪资统计表</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>职位</th>
                <th>薪资</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td>JavaEe工程师</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>Web前端工程师</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td colspan="2">傻蛋</td>
                <td>测试工程师</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>当前页：1 页</td>
                <td>上一页</td>
                <td>下一页</td>
                <td>尾页</td>
                <td>共 3 页</td>
            </tr>
        </tfoot>
    </table>

11、表单

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表(select)、单选框(radio)、复选框(checkbox)等等。

11.1 基本使用

表单需要使用表单标签来设置：

<form>
input元素
</form>

11.2 GET&POST

属性说明 action 后台地址 method 提交方式GET或POST

GET和POST区别：

1.GET

数据会显示在地址栏中，数据不安全
数据大小有限制
数据通过请求头传递

2.POST

数据不会显示在地址栏中，数据安全
数据对大小无限制
数据通过实体内容传递

<form action="后端接口" method="POST">
        <input type="text">
        <input type="password">
</form>

11.3 LABEL

使用label用于描述表单标题，当点击标题后文本框会获得焦点，需要保证使用的ID在页面中是唯一的。

<form action="后端接口" method="POST">
        <label for="username">用户名</label>
        <input type="text" id="username">

        <label for="password">密码</label>
        <input type="password" id="password">
</form>

也可以将文本框放在label标签内部，这样就不需要设置id与for属性了。

11.4 INPUT

文本框用于输入单行文本使用，下面是常用属性与示例。

属性说明 type 表单类型,默认为text name 后端接收字段名 required 必须输入 placeholder 提示文本内容 value 默认指 maxlength 允许最大输入字符数 size 表单长度,一般用css来控制 disabled 禁用,不可提交后端 readonly 只读,可提交后端 accept 设置选中类型比如:.jpg capture 使用麦克风\视频或摄像头哪种方式获取手机上传文件,支持的值有microphone , video , camera

11.4.1 基本示例

<form action="后端接口" method="POST">
        <label for="username">用户名</label>
        <input type="text" name="username" id="username" placeholder="请输入用户名" maxlength="5" size="50" required>
</form>

11.4.2 调用摄像头

当input类型为file时手机会让用户选择图片或者拍照,如果想直接调取摄像头使用以下代码.

<form action="后端接口" method="POST">
        <label for="file">上传文件</label>
        <input type="file" name="file" id="file" accept="*.jpg" capture="camera">
</form>

11.4.3 其他类型

通过设置表单的type字段可以指定不同的输入内容.

类型说明 email 输入内容为邮箱 url 输入内容为URL地址 password 输入内容为密码项 tel 电话号,移动端会调出数字键盘 search 搜索框 hidden 隐藏表单 submit 提交表单 reset 重置表单 button 自定义按钮

11.4.4 HIDDEN

隐藏表单用于提交后台数据,但在前台内容不显示所以在其上做用样式定义也没有意义.

<input type="hidden" name="id" value="1">

11.4.5 SUBMIT

创建提交按钮可以将表单数据提交到后台,有多种方式可以提交数据,比如:AJAX,或者Html的表单按钮.

a.使用input构建提交按钮,如果设置了name值,那么按钮数据也会提交到后台,如果有多个表单项可以通过这些进行判断是哪个表单提交的.

<input type="submit" name="submit" value="提交表单">

b.使用button也可以提交,设置type属性为submit或不设置都可以提交表单.

<button type="submit">提交表单</button>

11.4.6 禁用表单

通过为表单设置disabled或readonly都可以禁止表单,单readonly表单的数据可以提交到后端

<input type="text" value="数据" readonly>

11.4.7 PATTERN

表单可以通过设置pattern属性指定正则验证.

属性说明 pattern 正则表达式验证规则 oninvalid 输入错误时触发的事件

<form action="">
        <label for="username">用户名</label>
        <input type="text" name="username" id="username" pattern="[a-z]{5,20}" oninvalid="validate('请输入5~20位字母的用户名')">
        <button>提交表单</button>
    </form>

    <script>
        function validate(message){
            alert(message);
        }
    </script>

11.4.8 TEXTAREA

文本域指可以输入多行文本的表单,当然更复杂的情况可以使用编辑器如ueditor , ckeditor等.

属性说明 cols 列字符数(一般使用css控制更好) rows 行数(一般使用css控制更好)

<textarea cols="30" rows="3">请踩踩我......</textarea>

11.4.9 SELECT

下拉列表项可用于多个值中的选择.

属性说明 multiple 支持多选 size 列表框高度 optgroup 选项组 selected 选中状态 option 选项值

<form action="">
        <select multiple size="10">
            <option value="">选择课程</option>
            <optgroup label="后端">
                <option value="">JAVA</option>
                <option value="">PHP</option>
                <option value="">LINUX</option>
            </optgroup>

            <optgroup label="前端">
                <option value="">HTML</option>
                <option value="">CSS</option>
                <option value="">JAVASCRIPT</option>
            </optgroup>
        </select>
    </form>

11.4.10 RADIO

单选框指只能选择一个选项的表单,如性别的选择:男 , 女 , 保密只能选择一个.

属性说明 checked 选中状态

<form action="">
        <input type="radio" name="" id="boy" checked>
        <label for="boy">男</label>

        <input type="radio" name="" id="girl">
        <label for="girl">女</label>
    </form>

11.4.11 CHECKBOX

复选框指允许选择多个值的表单