HTML5入门指南-优快云博客

本文链接：https://blog.youkuaiyun.com/bitte_/article/details/101459718

这篇博客介绍了HTML5的基础知识，包括HTML的发展历程、HTML5的优势、W3C标准、基本结构和网页元素。内容涵盖标题标签、段落、图像、超链接、列表、表格、媒体元素和表单等，适合初学者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5

HTML5基础

HTML是用来描述网页的一种语言，它是一种超文本标记语言，也就是说，HTML不是一种编程语言，仅是一种标记语言（Markup Language）.

HTML由一套标记标签（Markup Tag）组成，在制作网页时，HTML使用标记标签来描述网页

HTML的发展史

(1)超文本标记语言——在1993年6月互联网工程小组工作草案发布（并非标准）

(2）HTML—— 1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之布过时。

(3) HTML3.2—— 1996年1月14日，W3C推荐标准。

(4) HTM4.0 ——1997年12月18日，W3C推荐标准。

(5) HTML4 01 (微小改进) 1999 年12月24日，W3C推荐标准，2000年5月15日之本严格的HTML4.01语法，是国际标准化组织和国际电工委员会的标准。

(6) XHTML1.0 -2000年1月26日发布，是W3C推荐标准，后来经过修订于2002年8月1日重新发布。

(7) XHTML1.1 -2001年5月31日发布。

(8) XHTML2.0- W3C的工作草案，由于改动过大，学习这项新技术的成本过高而最终失败，因此，现在最常用的还是XHTML1 .0标准。

(9) HTML5目前最新的版本，于200 年被提出，2007年被W3C接纳并成立新的 HTML工作团队，2008年1月22日公布 HTML5第份正式草案， 2012年12月17日HML5 规范正式定稿2013年5月6日，HTML5.1 正式草案公布。

HTML5的优势

微软：2010年3月16日微软于拉斯维加斯市举行的MIX10技术大会上宣Explore (IE) 9浏览器开发者预览版此版本将更多地支持CSS3. SVG和浏览通用标准。

Gogle： 2010年2月19日. Goole Gers项目经理伊安.费特通过博客宣布，谷歌将放弃对Gears浏览器插件项目的支持，重点开发HTML5项目。

苹果: 2010年6月7日，苹果在开发老大会的会后发布了Safari 5。这款浏览器支持10个以上HTML5新技术，包括全屏播放、HTML5 视频. HTML5 地理位置、HTML5 的形式验证等功能。

Opera: 2010年5月5日，Opera 软件公司首席技术官Hakon Wium Lie先生在访华之际，接受中国软件资讯网等少数几家媒体采访，他认为HTML5和CSS3将是全球互联网发展的未来趋势。

Mozilla：2010年7月，Mozilla基金会发布了Firefox4浏览器的第一个测试版，从官方文档看，它对HTML5是完全级别的支持。

W3C标准介绍

W3C标准不是某一个标准，而是一系列的标准集合，一个网页由三部分组成，即结构(Structure),表现(Presentation)和行为(Behavior)

简单来说"结构"表现"行为"分别对应了三种非常常用的技术，即HTML,CSS,javaScript。也就是说HTML用来决定结构和内容，CSS用来设定网页的表现样式，javaScript用来控制网页的行为。

HTML5文件的基本结构

HTML是一种超文本标记语言，如网页中的一个标题，一个段落，一张图片等，这些都是利用一个个HTML标记完成的。最基本的语法就是<标记>内容</标记>。

网页的基本信息

1.DOCTYPE声明：

DOCTYPE声明必须位于HTML文档的第一行

<!DOCTYPE html>

标签 <title>标签 2.<title>标签

使用标签描述网页的标题，类似一篇文章的标题，一般为一个简洁的主题，并能使读者有兴趣读下去。就比方，搜狐网站的主页，如下

<title>搜狐—中国最大的门户网站</title>

打开页面后，将在浏览器窗口的标题栏显示标题

3.标签

使用该标签描述网页的摘要信息，包括文档内容类型，字符编码信息，搜索关键字，网站提供的功能和服务的详细描述等。标签描述的内容并不显示，其目的是方便浏览器解析或利于搜索引擎，它采用"名称/值"对的方式描述摘要信息。

(1)文档内容类型，字符编码信息书写如下

<meta charset="UTF-8"/>

属性：charset表示字符集编码，常用的编码有以下几种。

(1) gd2312：简体中文，一般用于包含中文和英文的页面

(2) lSO—885901：纯英文，一般用于只包含英文的页面

(3) big5：繁体，一般用于带有繁体字的页面

(4) UTF—8：国际性通用的字符编码，同样适用于中文和英文的页面。和gd2312编码相比，国际通用性更好。

在保存文件时编码方式一定要与HTML5页面中标签中编码方式保持一致，否则，将会出现乱码

网页的基本标签

标题标签

标题标签表示一段文字的标题或主题，并且支持多层次的内容结构。比如一级标题采用

,二级标题则采用

,其他标题以此类推。HTML一共提供了六级标题

~~

,并赋予了标题一定的外观，所以字体加粗，

最大

字号最小

段落标签和换行标签

顾名思义，段落标签

…

表示一段文字等内容，列如"北京欢迎你"这首歌，包括歌名(标题)和歌词(段落)

换行标签
表示强制换行显示，该标签比较特殊，没有结束标签，直接使用
表示标签的开始和结束

直接使用
表示标签的开始和结束的标签叫做单标签。成对出现的，如这样有开始标签和结束标签的标签叫双标签

水平线标签

表示一条水平线，注意该标签与
标签一样，比较特殊，没有结束标签

字体样式标签

在网页中，经常会遇到字体加粗或斜字体，可以使用标签来让字体变粗，标签让文字倾斜

注释和特殊符号

HTML中注释是为了方便代码阅读和调试。当浏览器遇到注释时会自动忽略注释内容

HTML注释的语法是，如下

<!--注释内容-->

有时候为了调试，需要暂时注释掉一些不必要HTML代码

由于大于号(>),小于号(<)等已作为HTML的语法符号，因此，如果要在页面中显示这些特殊符号，就必须使用相对的HTML代码表示，这些特殊符号对应的HTML代码被称为字体实体。

HTML中常用的特殊符号及其对应的字符实体如下图所示，这些实体符号都以"&“开头，以”；"结束。

特殊符号	字符实体	示例
空格	&nbsp；	<a href="#".>百度</a.>&nbsp；\|&nbsp；<a href="#".>Google</a.>
大于号(>)	&gt；	如果时间&gt；晚上6点，就坐车回家
小于号(<)	&lt；	如果时间&lt；早上7点，就走路去上学
引号(’’)	&quot；	W3C规范中，HTML的属性值必须用成对的&quot；引起来
版权符号	&copy；	&copy；20013-2018北大青鸟

图像标签

图像标签的基本语法如下。

<img src="图片地址"alt="图像的替代文字"title="鼠标悬停提示文字"width="图片宽度"height="图片高度"/>

其中，src属性表示图片路径，alt属性指定的替代文本

超链接标签

超链接标签的基本用法

超链接包含两部分内容，一是链接地址，即链接目标，可以是某个网址或文件的路径，对应为标签的href属性；二是链接文本或图像文本或图像，单击该文本或图像，将跳转到href属性指定的链接地址，超链接的基本语法如下

<a href="链接地址"target="目标窗口位置">链接文本或图像</a>

绝对路径：指向目标地址的完整描述，一般指向本站点外的文件

相对路径：相对于当前页面的路径，一般指向本站点的文件，所以一般不需要一个完整的URL地址的形式

页面间链接：页面间链接就是从一个页面链接到另一个页面

功能性链接：功能性链接比较特殊，当单击该链接是不是打开某个网页，而是启动本机自带的某个应用程序，如网上常见的电子邮件，QQ等链接。

列表，表格与媒体元素

列表及其应用

1.无线列表及其应用

无序列表由

标签和
标签组成，使用
- 标签作为无序列表的声明，使用
- 标签作为每个列表项的起始，语法如下

<ul>
	<li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

W3C标准，

标签里只能嵌套
标签，不能嵌套其他标签

标签里面可以嵌套任意标签
无序列表特性如下

(1)没有顺序，每个
标签独占一行(块元素)
(2)默认
标签项前面有个实心小圆点
(3)一般用于无序类型的列表，如导航，侧边栏新闻，有规律的图片组合模板等

2.有序列表及其应用

有序列表由
1. 标签和
2. 标签组成，使用
  1. 标签作为有序列表声明，使用
  2. 标签作为每个列表项的起始，有序列表嵌套同无序列表一样，只能
    1. 标签里嵌套
    2. 标签，语法如下
```
<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>
```
有序列表的特性如下

(1)有顺序，每个
标签独占一行(块元素)
(2)默认
标签项前面有顺序标记

(3)一般用于排序类型的列表，如试卷，问卷选项等

3.定义列表及其应用

定义列表是一种很特殊的列表形式，它是标题及列表的结合，定义列表的语法相对于无序和有序列表不太一样，它使用

标签作为列表的开始，使用标签作为每个列表项的起始，而对于每个列表项的定义则使用

标签来完成，语法如下

<dl>
    <dt>标题一</dt>
    <dd>第一项</dd>
    <dd>第二项</dd>
    <dd>标题二</dd>
    <dd>第一项</dd>
</dl>

定义列表特性如下

(1)没有顺序，每个

标签，

标签独占一行(块元素)

(2)默认没有标记

(3)一般用于(一个标题下有多个列表项)*n的情况

定义列表使用参考

(1)无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般来说都是相对简单的表提性质的网页内容。有序列表会根据列表项的顺序进行显示

(2)在实际的网页应用中，无序列表比有序列表应用得更加广泛，有序列表ol-li一般用于显示带有顺序编号的特定场合

(3)定义列表一般适用于带有标题和标题解释性内容的场合

表格

为什么要使用表格

1.简单通用：由于表格行列的简单结构，以及在生活的广泛使用，因此对它的理解和编写都很方便

2.结构稳定：表格通常每行的列数一致，同行单元格高度一致且水平对齐，同例单元格宽度一致且垂直对齐

表格的基本结构

1.单元格

单元格是表格的最小单位，一个或多个单元格纵横排列组成了表格

2.行

由于表格单元格横向堆叠形成了行

3.列

由于表格单元格的宽度必须一致，因此单元格纵向排列形成了列

创建表格的基本语法如下

<table>
    <tr>
    	<th>第一个单元格的内容</th>
        <th>第二个单元格的内容</th>
        ......
    </tr>
    <th>
    	<td>第一个单元格的内容</td>
    	<td>第二个单元格的内容</td>
    	......
    </th>
</table>

创建表格一般分为下面四步

第一步：创建表格标签

…

第二步：在表格标签

…

里创建标签…,可以有多行

第三步：在第一行标签…里创建单元格标签…,用于创建表格标题

第四步：在行标签…里创建单元格标签…,可以有多个单元格

表格的跨列与跨行

1.表格的跨列

跨列是指单元格的横向合并，语法如下

<table>
    <tr>
    	<td colspan="所跨的列数">单元格内容</td>
    </tr>
</table>

col为column(列)的缩写，span为跨度，所以colspan的意思为跨列

2.表格的跨行

跨行是指单元格在垂直方向的合并，语法如下

<table>
    <tr>
    	<td rowspan="所跨的行数">单元格内容</td>
    </tr>
</table>

row为行的意思，rowspan即跨行

视频元素

1.video元素的基本语法

HTML5中video元素是用来播放视频文件的，支持Ogg(Ogg Vorbis的简写)，MPEG4，WebM等视频格式，

语法如下

<video src="视频路径"controls="controls"></video>

音频元素

HTML中的audio元素是用来播放音频文件的，支持Ogg，MP3，WSV等音频格式，其语法如下

<video src="音频路径"controls="controls"></video>

<iframe.>框架

<iframe src="引用页面地址"name="框架标识名"...></iframe>

<iframe.>属性的使用

内联框架的常用属性包括name,width,heigth,其中name属性可以和前面学过的锚链接结合起来实现页面间的相互跳转。具体步骤如下

(1)在被打开的框架上加name属性，代码如下

<iframe name="mainFrame"src="subframe/the_second.html"/>

(2)在超链接上设置target目标窗口属性为希望显示的框架窗口名，代码如下

<a href="subfrane/the_second.html"target="mainFrame">下边显示第二页</a>

表单

表单标签及表单属性

在HTML5中，使用标签来实现表单的创建，该标签用于在网页中创建表单区域，属于容器标签，其他表单标签需要在它的范围内才有效，便是其中的一个，用于设定各种输入资料的方法

属性	说明
action	此属性指示服务器上处理表单输出的程序，一般来说，当用户单击表单上的"提交"按钮后，信息发送到Web服务器上，由action属性所指定的程序处理。语法为action=“URL”。如果action属性的值为空，则默认表单提交到本页
method	此属性告诉浏览器如何将数据发送给服务器，它指向服务器发送数据的方法。语法为metod=(get\|post)

表单元素及其格式

标签中有很多属性，下面对一些比较常用的属性进行整理，如下表格

属性	说明
type	此属性指定表单元素。可用的类型有text，password，checkbox，radio，submit，reset，file，email，number，url，hidden，image和button。默认为text
name	此属性指定表单元素的名称
value	此属性是可选属性，它指定单元素的初始值，如果type为radio类型，则必须指定一个值
size	此属性指定单元素的初始宽度，如果type为text或password类型，则表单元素的大小以字符为单位，对于其他输出类型，宽度以像素为单位
maxlength	此属性用于指定可在text或password元素中输入最大字符数。默认值为无限大
checked	此属性用于指定按钮是否被选中的，当输入类型为radio或checbox时，使用此属性

文本框

在表单最常用，最常见的表单输入元素就是文本框(text),它用于输入单行文本信息，如用户民的输入文本框。若要在文档的表单里创建一个文本框，将表单元素type属性设为text类型就可以了

密码框

密码框与文本框类似，区别在于需要设置文本框控件的type属性为password。设置了type属性后，在输入密码时字符都由黑色实心点来显示，从而实现了对数据的处理

复选框

复选框与单选按钮有些类似，只不过复选框允许用户选择多个选项。复选框的类型是checkbox，即将表单元素的type属性设为checkbox就可以创建一个复选框了

按钮

按钮分为三种，分别是普通按钮(button),提交按钮(submit)和重置按钮(reset)。普通按钮主要用来响应onclick事件，提交按钮用来提交表单信息，重置按钮用来清除表单中一填信息。

多行文本域

当需要在网页中输入两行或两行以上的文本时，怎么办？显然，前面学过的文本框框及其他的表单元素都不能满足要求，这就应该使用多行文本框，他的标签是

语法

<textarea name="textarea"cols="显示的列数"rows="显示的行数">
文本内容
</textarea>

其中，cols属性用来指定多行文本框的列的宽度；rows属性用来指定多文本框的行数。在…标签中不能使用value属性的初始值

文本域

文本域的作用是用于实现文件的选择，在应用时只需要type属性设为file即可。在实际应用中，文件域通常应用于文件上传的操作，如选择需要上传的文本，图片等。

number类型使用表如下所示的属性来规定对数字的限定

属性	值	描述
value	number	规定的默认值
min	number	规定允许的最小值
max	number	规定允许的最大值
step	number	规定合法的数字间隔(如果step=“2”,则合法的数是-2，0，2，4等）