温轻舟

HTML5基础知识详讲

什么是网页和网站？

在文章开始之前，我们先了解一下什么是网页和网站

网页是构成网站的基本元素，它是一个包含HTML标签的纯文本文件，通常是由图片；链接；视频；声音；文字等元素组成。通常我们所看到的网页，常以 .htm 或 .html 后缀结尾的文件，因此将其俗称为HTML文件

网站可以认为是放在服务器上的一个文件夹，它包含了很多的网页文件以及很多子文件夹，用户访问网站其实就是读取文件的内容

一：HTML概述

1.HTML简介：

HTML是纯文本标记语言，是互联网上用于编写网页的主要语言
HTML文件可以直接由浏览器解释执行，且无须编译
一个HTML文件是由一系列的元素和标签组成的，元素是HTML文件的重要组成文件，而标签用来规定元素的属性和它在文件中的位置

2.HTML文件基本结构：

一：标签

HTML是一种计算机语言，但它不能编程，只能用来标记网页中的内容，HTML通过不同的标签来标记不同的内容，格式，布局等

HTML标签分为单独出现的标签和成对出现的标签

（1）单独标签：其作用是在相应的位置插入元素

<元素名称>

（2）成对标签：仅对包含在其中的文件部分产生作用

*注意：*大多数的标签都是成对出现的，由开始标签和结束标签组成

<元素名称>要控制的元素元素名称>

*注意：*在HTML标签中不区分大小写，,和其效果是一样的

（3）属性：在HTML标签中。还可以设置一些属性，用来控制HTML标签所建立的元素，这些属性位于首标签中

<元素名称 属性1 = "值1" 属性2 = "值2"......>要控制的元素元素名称>

二：元素

当用HTML标签将一段文字包含在中间时，这段文字与包含文字的HTML标签被称为一个元素

在所有的HTML文件中，最外层的元素都是由标签建立的，在标签所建立的元素中，包含了两个主要的子元素，这两个子元素是由与标签所建立的

其中标签所建立的元素内容为头部也就是文件标题；而标签所建立的元素内容为文件主体

三：HTML的基本标签

（1）文件开始标签

在任何一个HTML文件里，最先出现的标签就是，它用于表示该文件是以HTML编写的

是成对出现的，开始标签和结束标签分别位于文件的最前面和最后面，文件的所有内容和HTML的其它标签都包含在标签里面

<html>
    该文件的全部元素
html>

注意：标签不带任何属性

（2）文件头部标签

也是一个成对出现的标签，用来表示网页头部的标签，而头部是用来规定该文件的标题，也就是浏览器的标题栏，和文件的一些属性

在由标签所定义的元素中，并不放置网页的任何内容也就是它并不属于HTML文件的主体；它仅放置关于HTML文件的信息（标题，编码方式及URL等信息）这些信息大部分是用于提供索引，辨认等应用的

*注意：*如果HTML文件不需要提供相关信息，则可以省略标签

（3）文件标题标签

在浏览器中，文件名称是作为窗口名称显示在该窗口的最上方的，而文件的名称就是写在标签之间的，并且标签要包含在标签中

（4）元信息标签

标签提供的信息是用户不可见的，它并不显示在页面当中，一般用来定义页面信息的名称；关键字；作者等

在HTML中标签不需要设置结束标签，它是一个单独标签，是写在标签内的，在一个HTML头页面中可以有多个标签

标签有两种属性，name和http-equiv其中name属性主要用于描述网页，以便于搜素引擎查找

（5）页面的主体标签

网页的主体部分以开始标签为开始，以结束标签为结束

主体标签的常用属性：

属性	描述
text	设定页面文字的颜色
bgcolor	设定页面背景的颜色
background	设定页面的背景图片
bgproperties	设定页面的背景图片为固定，不随页面的滚动而滚动
link	设定页面默认的链接颜色
alink	设定鼠标正在单机时的链接颜色
vlink	设定访问过后的链接颜色
topmargin	设定页面的上边距
leftmargin	设定页面的左边距

四：页面注释

注释是不显示在页面中的元素，适当的注释可以更好的了解网页中各个模块的划分，也有助于后期对代码的检查和修改，给代码加注释是一种很好的编程习惯，但也不要过度注释！！！

在HTML中的注释语法：只需在语法中 “需要注释的内容” 的位置上添加需要注释掉的内容即可

*注意：*在之前不可以添加注释

在标签内部不可以添加注释

五：HTML文档结构

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

二：文字与格式

1.标题标签：

（1）标题标签共有六个：

其中 n 表示 1~6，数字越大级别越高，从

标签到

标签字体依次变小，

表示最大的标题；

表示最小的标题

标题标签的语法格式：

<h1>文本内容h1>
<h2>文本内容h2>
<h3>文本内容h3>
<h4>文本内容h4>
<h5>文本内容h5>
<h6>文本内容h6>

*注意：*标题标签是写在主体标签也就是标签里面的

标题标签没有

之后的数字了，6之后的数字会被浏览器默认成普通的文本标签也就是标签

（2）标题的对齐方式：

在默认的情况下，标题文字是左对齐的，但在进行网页的设计时，我们可以为标题标签添加 align 属性进行对齐方式的设置

align 的语法格式：

<h1 align="对齐方式">文本内容h1>

标题的对齐方式属性值：

属性值	含义
left	文字左对齐
center	文字居中对齐
right	文字右对齐

*注意：*在添加属性值时记得要添加双引号

2.文字：

在网页的编码中，可以直接在标签内添加文字，这些文字可以直接显示在页面中

（1）文字的斜体；下划线；删除线：

在浏览网页时，我们常常可以看到一些具有特殊效果的字，如：斜体字；带下划线的文字，这些文字效果我们可以直接通过设置HTML语言的标签来实现

文字的斜体；下划线；删除线的语法格式：

<em>文字斜体内容em>
<u>带下划线的文字内容u>
<strike>带删除线的文字strike>

*注意：*斜体字也可以通过使用标签或者去标识

（2）文字的上标与下标：

文字的上标与下标经常会在数学公式或方程中出现

文字的上标与下标的语法格式：

<sup>上标标签内容sup>
<sub>下标标签内容sub>

（3）特殊文字符号：

在网页的制作过程中，特殊文字符号也可以使用代码进行控制

特殊文字的代码由前缀 & 字符名称和后缀分号 " ; " 组成

符号	属性值	含义
"	`"`	引号
<	`&It;`	左尖括号
>	`>`	右尖括号
x	`×`	乘号
@	`§`	小节符号
		空格占位符

3.段落：

（1）段落标签：

<p>段落文字p>

注意：标签与

标签都是块级元素，也就是自带换行符，一对标签代表一行

而文本标签标签是内联元素，也就是不会自动换行，会紧贴着上一行的文本

（2）段落的换行标签：

段落与段落之间都是隔行换行的，但这样会导致文字的行间距过大，这时可以使用换行标签
来完成文字的紧凑换行显示

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

*注意：*如果要多次换行，则可以连续使用多个换行标签，注意不要把这个标签写错

（3）段落的原始排版标签：

在网页制作过程中，一般都是通过各种标签对文字进行排版的，但在实际应用中，往往需要一些特殊的排版效果，这时使用标签控制会很麻烦。而解决的办法就是使用原始排版标签

 进行排版

<pre>文本内容pre>

4.水平线：

水平线用于段落与段落之间的分隔，使文档的结构更加清晰，在视觉上便于阅读文档

（1）水平线标签：

在网页上输入一个

标签，就添加了一条默认样式的水平线

<hr>

（2）水平线标签的宽度：

在默认情况下，添加的水平线是100%的宽度，而在实际创建网页时，可以对水平线的宽度进行设置

<hr width="水平线宽度">

*注意：*水平线的宽度既可以是确定的像素值，也可以是窗口宽度值的百分比

三：图像与超链接

1.添加图像：

添加图像的方法：

使用标签将图像插入网页中：

<img src="图像文件的地址">

注意：src 是用来设置图像文件所在的地址的，这个地址可以是相对路径，也可以是绝对路径

2.设置图像属性：

一：图像的大小与边框：

在网页直接插入图像时，图像的大小和原图是相同的，而在实际开发中，可以通过设置图像属性来调整图像的大小；分辨率等

（1）调整图像大小：

在标签中，可以通过 height 和 width 属性设置图像的高度和宽度

<img src="图像文件的地址" height="" width="">

*注意：*在设置图像的大小时，如果只设置了高度或宽度，则另一个参数会按照相同的比例进行调整；如果同时设置了两个属性，且缩放比例不同，那么图像很可能会变形

（2）设置图像边框：

在默认的情况下，插入的图像是没有边框的，但是可以通过 border 属性为图像添加边框

<img src="图像文件的地址" border="">

二：图像间距与对齐方式：

（1）调整图像间距：

通过 hspace 和 vspace 属性可以调整图像与文字之间的距离，使文字和图像之间的排版不那么拥挤

<img src="图像文件的地址" hspace="" vspace="">

（2）设置图像相对于文字基准线的对齐方式：

图像和文字之间的排列通过 align 属性来调整，其对齐方式可以分为两类，即绝对对齐方式和相对对齐方式，其中，绝对对齐方式包括左对齐；右对齐和居中对齐，而相对文字对齐方式则是图像与一行文字的相对位置

<img src="图像文件的地址" align="相对文字的对齐方式">

align 的属性值：

align 的取值	含义
top	把图像的顶部和同行的最高部分对齐（可以是文本的顶部，也可以是图像的顶部）
middle	把图像的中部和行的中部对齐（通常是文本行的基线，并不是实际的行的中部）
bottom	把图像的底部和同行文本的底部对齐
absmiddle	把图像的中部和同行中最大项的中部对齐
baseline	把图像的底部和文本的基线对齐
absbottom	把图像的底部和同行中的最低项对齐
left	把图像和左边界对齐（文本环绕图像）
right	把图像和右边界对齐（文本环绕图像）

三：提示文字与替换文本：

在HTML中，可以通过为图像设置提示文字和替换文本来添加提示信息，其中提示文字在鼠标指针悬停在图像上时显示；而替换文本在图像无法正常显示时显示，用以告知用户信息

（1）添加图像的提示文字：

通过 title 属性可以为图像设置提示文字

在浏览网页时，如果图像加载完成，则将鼠标指针放在该图像上，稍等片刻，鼠标指针旁边就会出现提示文字，用于说明或描述图像

<img src="图像文件的地址" title="图像的提示文字">

(2)添加图像的替换文本：

当图片由于下载或路径问题无法正常显示的时候，可以通过 alt 属性在图片的位置显示定义的替换文本

<img src="图像文件的地址" alt="图像的替换文本">

*注意：*提示文字和替换文本的内容可以是中文，也可以是英文

3.链接标签：

链接（Link），全称为超文本链接，也称为超链接，它可以将文档中的文字或图像与另一个文档；文档的一部分或一幅图像链接在一起

（1）文本链接：

在网页中，文本链接是最常见的一种，它通过网页中的文件和其它的文件进行链接

<a href="" target="">链接文字a>

target 的四个属性值：

属性值	含义
_blank	新建一个窗口打开
_parent	在上一级窗口中打开，常在分帧的框架页面中使用
_self	在同一窗口中打开
_top	在浏览器的整个窗口中打开，将会忽略所有的框架结构

*注意：*链接地址可以是相对路径，也可以是绝对路径

4.图像的超链接：

（1）整幅图像的超链接：

<a href="链接地址" target="目标窗口的打开方式"><img src="图像文件的地址">a>

*注意：*可以在图像属性中添加图像的其它参数

（2）图像热区链接：

将图像划分成不同的区域进行超链接设置，而包含热区的图像也称为映射图像

在为图像设置热区链接时，需要经过以下两个步骤：

1.首先在图像文件中设置映射图像名，在添加图像的标签中使用 usemap 属性添加图像要引用的映射图像的名称

<img src="图像文件的地址" usemap="映射图像的名称">

2.定义热区图像及热区的链接

<map name="映射图像名称">
    <area shape="热区形状" coords="热区坐标" href="链接地址"/>
map>

在该语法中，要先定义映射图像的名称，再引用这个映射图像

在标签中定义了热区的位置和链接

shape 用来定义热区形状，可以取值为 rect(矩形区域)；circle(圆形区域)；poly(多边形区域)

coords 的设置方式：

1.对于矩形区域来说coords 包含4个参数：

分别为 left；top；right；bottom。也可以将这4个参数看作矩形两个对角的点坐标

2.对于圆形区域来说coords 包含3个参数：

分别为 center-x；center-y；tadius。也可以看作圆形的圆心坐标（x，y）与半径的值

3.对于多边形区域来说，coords 参数需要按照顺序（逆时针或顺时针）取各个点的x，y坐标值

四：表格与标签

1.基本表格：

表格是用于排列内容的最佳手段，表格标签是

，表格的其它标签都要写在标签内才会有效

制作表格的主要标签：

标签

含义

表格标签

行标签

单元格标签

表头标签

表格的标题标签

语法格式：

<table>
    <caption>表格的标题caption>
    <tr>
        <th>表格的表头th>
        <th>表格的表头th>
    tr>
    <tr>
        <td>单元格内的文字td>
        <td>单元格内的文字td>
    tr>
    <tr>
        <td>单元格内的文字td>
        <td>单元格内的文字td>
    tr>
table>

和

标签分别表示表格的开始和结束

2.和标签分别表示表格中一行的开始和结束，在表格中包含几对就表示该表格有几行

3.和标签分别表示一个单元格的开始和结束，也就是一行中包含了几列

4.和标签与标签的使用方法相同，只不过标签中的内容是加粗显示的

5.和用于制作表格的标题

2.表格的高级应用：

（1）表格的样式：

除基本表格外，表格还可以设置一些样式属性，比如可以设置表格的高度，宽度，插入图片等


<td><img src="">td>

*注意：*这些都讲了，大家自己想，自己设计就可以了，忘了的回去在看看，多练练就好了

（2）表格的合并：

在一些复杂的表格结构中，有些单元格是跨多个列的，有些单元格是跨多个行的，因此需要对这些单元格进行合并处理

<td colspamn="跨的列数">td>
<td rowspan="跨的行数">td>

注意："跨的列数"是指这个单元格所跨的列数，"跨的行数"是指这个单元格在垂直方向上跨的行数

（3）表格的分组：

表格可以使用标签对列进行样式控制，比如设置单元格的背景颜色，字体大小等

<table>
    <colgroup>
        <col style="background-color:颜色值">
    colgroup>
table>

1.标签对表格中的列进行控制

2.标签对具体的列进行控制

3.style=“background-color:颜色值” 属性设置这一列的颜色

3.
标签：

标签是用来为HTML文档的内容提供结构和背景的元素，

和

中间的所有内容都是用来构成这个块的，所以

标签也是块级标签

div 的全称为 division 意为 “分隔” ，所以

标签也被称为分隔标签，表示一块可以显示HTML的区域，用来设置字体；图片；表格等的摆放位置

<div>
    这一区域的内容
div>

（1）

标签的属性：

在页面中加入层时，经常会用到

标签的属性

<div id="value" align="value" class="value" style="value">div>

1.id：

标签的名字，常与 CSS样式相结合，实现对网页中元素的控制

2.align：用于控制

标签中元素的对齐方式，其属性值有 left；right；center，分别用于设置元素的居左；居右；居中对齐

3.class：用于设置

标签中元素的样式，其值为 CSS样式中的 class选择符

4.style：用于设置

标签中元素的样式，其值为 CSS属性值

4.标签：

是文本标签，前后不会换行，它没有结构的意义，但可以作为插入CSS这类风格的容器，或者插入class；id等语法内容的容器

<span>文本内容span>

五：列表

1.列表的主要标签：

标签	含义
	无序列表
	有序列表
	目录列表
	定义列表
	菜单列表
；	定义列表的标签
	列表项目的标签

2.无序列表：

在无序列表中，各个列表项之间没有顺序级别之分，无序列表的特征在于提供一种不编号的列表方式，它通常使用一个项目符号作为每个列表项的前缀

无序列表主要使用

；；
；；
- 这几个标签和 type 属性

<ul type="符号类型">
    <li>第 1 项li>
    <li>第 2 项li>
ul>

标签表示这个无序列表的开始和结束

标签表示这是一个列表项的开始，在一个列表中，可以包含多个列表项

3.在默认情况下，无序列表的项目符号是 ●，而通过 type 参数可以调整无序列表的项目符号，它可以设置的值有3个，其中 disc 是默认的类型值

type的属性值	对应的无序列表的项目符号
disc	●
circle	৹
square	■
none	项目符号不显示

3.有序列表：

有序列表是使用编号来编排项目的，列表中的项目以数字或英文字母开头，通常各项目间有先后顺序性

在有序列表中，主要使用

；
这两个标签和 type ；start 这两个属性

<ol type="符号类型">
    <li>第 1 项li>
    <li>第 2 项li>
ol>

标签表示这个有序列表的开始和结束

标签表示这是一个列表项的开始

3.在默认情况下，有序列表的项目符号是数字，而通过 type 参数可以调整有序列表的项目符号，它可以设置的值有5个，其中 1 是默认的类型值

type的属性值	对应的有序列表的项目符号
`1`	数字
`a`	小写的英文字母
`A`	大写的英文字母
`i`	小写的罗马数字
`I`	大写的罗马数字
`none`	项目符号不显示

4.列表的嵌套：

嵌套列表指的是在一级项目列表下还存在着二级项目；三级项目等

（1）定义列表的嵌套：

定义列表是一种含有两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含项目符号

在定义列表中，一个

标签下可以有多个

标签作为名词的解释和说明，以实现列表的嵌套

<dl>
    <dt>名词 1dt>
<dd>解释 1dd>
<dd>解释 2dd>
<dd>解释 3dd>
    <dt>名词 2dt>
<dd>解释 1dd>
<dd>解释 2dd>
<dd>解释 3dd>
dl>

（2）无序列表和有序列表的嵌套：

这是留给你们的小作业，我就不写啦，注意哦，都是上面讲过的，要多动手实践呀

要是思考太久的话就不要浪费自己的时间啦，还不赶快回去重新看一遍

六：表单

1.表单概述：

表单主要用来收集客户端提供的相关信息，使网页具有交互的功能。例如在进行用户注册时，就必须通过表单来填写用户的相关信息

表单是网页上的一个特定区域，这个区域要通过这个双标签去声明，相当于一个表单容器，其它的表单标签要写在标签内才有效，也就是在和标签内的一切都属于表单的内容

标签的语法格式：

<form action="" name="" method="" enctype="" target="">
form>

标签中属性的值及其含义：

属性值	含义	说明
`action`	表单的处理程序，也就是表单中收集到的资料将要提交的程序地址	这个地址可以是绝对地址，也可以是相对地址，还可以是一些其它的地址，如 `E-mail` 地址等
`name`	为了防止表单信息在提交到后台处理程序时出现混乱而设置的名称	表单的名称尽量与表单的功能相符，并且名称中不能含有空格和特殊符号
`method`	定义处理程序从表单中获得信息的方式，有 `get`（默认值）和 `post` 两个值	`get` 指表单数据会被视为 `CGL` 或 `ASP` 的参数发送 `post` 方法指表单数据是与 `URL` 分开发送的，用户端的计算机会通知服务器来读取数据
`enctype`	表单信息提交的编码方式，其属性值有3个，分别是： `text/plain`，`application/x-www-form-urlencoded` 和 `multipart/form-date`	`text/plain` 指以纯文本的形式传送 `application/x-www-form-urlencoded` 指默认的编码形式 `multipart/form-date` 指 `MIME` 编码，上传文件的表单必须选择该值
`target`	目标窗口的打开方式	其属性值与含义与链接标签中的 `target` 相同

2.输入标签：

输入标签是标签，通过设置其 “type” 的属性值改变其输入方式

一：文本框：

表单中的文本框主要有两种，分别是单行文本框和密码输入框，不同的文本框对应的 “type” 属性值也不同

（1）单行文本框：

“type” 的 “text” 属性值用来设定在表单的文本框中输入任何类型的文本，数字或字母，都以单行显示

<input type="text" name="" size="" maxlength="" value="">

（2）密码输入框：

“type” 的 “password” 属性值用来设定密码框，而在密码框中输入的文字均以 “*” 或 “●” 显示

<input type="password" name="" size="" maxlength="" value="">

*注意：*如果要使某个标签获取焦点，可以使用标签实现元素绑定，也就是在使用标签后，单击与该标签绑定的文字或图片就可以获取焦点



<label><img src=""><input type="text">label>
<label><img src=""><input type="password">label>

二：单选按钮和复选框：

（1）单选按钮：

单选按钮指的是在一组选项中只选择一个，在页面中以圆框表示

<input type="radio" value="单选按钮的取值" name="单选按钮的名称" checked="checked">

（2）复选框：

进行多项选择

<input type="checkbox" value="复选框取值" name="复选框的名称" checked="checked">

*注意：*在复选框中各属性的含义和属性值与单选按钮中各属性的含义和属性值相同，但有一点与单选按钮中不同，那就是在复选框中可以设置多个复选框被默认选中

三：按钮：

按钮是表单中不可缺少的一部分，主要分为普通按钮，提交按钮和重置按钮

（1）普通按钮：

普通按钮在一般情况下要配合 JavaScript 来进行表单处理

<input type="button" value="按钮的取值" name="按钮名" onclick="处理程序">

（2）提交按钮：

提交按钮不需要设置 onclick 属性，在点击该按钮时可以实现表单按钮的提交

type 的 submit 属性值用来设定提交按钮的，其余属性与普通按钮一样

<input type="submit" value="按钮的取值" name="按钮名">

*注意：*当提交按钮没有设置按钮取值时，其默认取值为 “提交” ，也就是在提交按钮上默认显示的文字为 “提交”

（3）重置按钮：

点击重置按钮后，会清除表单的内容，恢复默认的表单内容设定

type 的 reset 属性值用来设定重置按钮的，其余属性与普通按钮一样

<input type="reset" value="按钮的取值" name="按钮名">

四：图像域和文件域：

（1）图像域：

图像域是指用在提交按钮上的图片，赋予这张图片按钮的功能，从而解决按钮单调的问题

type 的 image 属性值用来设定图像域的

<input type="image" src="" name="">

（2）文件域：

文件域在上传文件时常常用到，用于查找硬盘上的文件路径，然后通过表单将选中的文件上传，如：上传头像，发送文件等

type 的 file 属性值用来设定文件域的

<input type="file" accept="" name="">

3.文本域和菜单：

（1）文本域：

文本域和文本框的区别在于，文本域可以添加显示多行文字，从而输入更多的文本

文本域用标签定义

<textarea name="文本域名称" value="文本域默认值" rows="文本域的行数" cols="文本域的列数">textarea>

（2）菜单/列表：

菜单列表类控件主要是为了节省页面空间，菜单和列表都是通过和标签来实现的

菜单是一种节省空间的方式，正常状态下只能看到一个选项，点击按钮打开菜单后才能看到全部选项

列表可以显示一定数量的选项，如果超过了这个选项，则会自动出现滚动条

语法格式如下：

<select name="" size="" multiple="multiple">
    <option value="" selected="">选项显示的内容option>
    <option value="选项值">选项显示的内容option>
select>

菜单和列表标签属性：

菜单和列表标签属性	含义
`name`	列表/菜单标签名称，用于和页面中的其它控件加以区别
`size`	定义列表/菜单文本框在页面中显示的长度
`multiple`	表示列表/菜单内容可多选
`value`	用于定义列表/菜单的选项值
`selected`	默认被选中

七：多媒体

1.多媒体标签：

多媒体指的是音效；音乐；视频和动画等，它可以是你听到或看到的任何内容

在HTML5中有两个多媒体标签和

标签专门用来播放网络上的音频数据：

<audio src="播放音频的URL地址">
    您的浏览器不支持 audio 标签！！！
audio>

*注意：*若当前浏览器不支持标签时，就会显示下面的文字以作替代

标签专门用来播放网络上的视频或电影：

<video width="视频的宽度" height="视频的高度" src="播放视频的URL地址">
    您的浏览器不支持 video 标签！！！
video>