educoder web程序设计基础知识点期末总结

网页表格

基本概念

为了完成本关任务，你需要掌握：1.表格的结构，2.表格的基本标签，3.表格标签的基本属性。

表格的结构

在基本表格结构中，表格标题、项目表头和数据资料构成了表格基本结构三个要素。例如下图所示的表格中，表格标题为“通讯录”，表格第一行单元格中的内容基本不变，称作项目表头，表格第二行后单元格的内容通常会动态改变，称作数据资料。

表格的基本标签

HTML表格由table标签以及一个或多个tr、th或td标签组成：

table标签：定义一个表格
caption标签：定义表格标题，嵌套在<table></table>中
tr标签：定义表格中的一行，嵌套在<table></table>中
th标签：定义表格中的表头单元格，嵌套在<tr></tr>中
td标签：定义表格中的数据单元格，嵌套在<tr></tr>中

表格标签的基本属性

table标签的基本属性

table标签的基本属性如下图所示：

tr标签的基本属性

tr标签的基本属性如下图所示：

th和td标签的基本属性

th和td标签的基本属性如下图所示：

高级属性

外边框线样式属性frame

表格的外边框线的样式可用属性frame的取值来确定，frame取值与相应的样式如下：

above：显示上边框
below：显示下边框
hsides：显示上下边框
vsides：显示左右边框
lhs：显示左边框
rhs：显示右边框
border：显示上下左右边框
void：不显示边框

内部边框样式属性rules

表格的内部边框的样式可用属性rules的取值来确定，rules取值与相应的样式如下：

all：显示所有内部边框
none：不显示内部边框
rows：仅显示行边框
cols：仅显示列边框
groups：显示介于行组和列组间边框

单元格合并

在制作稍复杂的表格时，需要对表格中的行或列进行合并。

水平方向单元格的合并

需要将水平方向的单元格合并时，可在<th>或<td>标记中添加colspan属性，属性的取值即为合并的单元格数目。

垂直方向单元格的合并

需要将垂直方向的单元格合并时，可在<th>或<td>标记中添加rowspan属性，属性的取值即为合并的单元格数目。

经典例题

1、下列选项中，用于设置表格内部边框线显示的属性是（ c ）。

A、borderB、frameC、rulesD、innerborder
2、如果希望表格的外部边框只显示上下两条边框线，属性frame的取值应选（ a ）。

A、hsidesB、vsidesC、lhsD、rhs
3、如果希望表格的内部边框只显示行线，则属性rules的取值应选（ b ）。

A、lineB、rowsC、colsD、groups
4、HTML中，若合并两个水平方向单元格，应使用的属性是（ a ）。

A、colspanB、nospanC、rowspanD、colwrap
5、<table rules=cols>，表示（d ）

A、显示所有分隔线B、只显示组(Groups)与组之间的分隔线C、只显示行与行之间的分隔线D、只显示列与列之间的分隔线

本关任务：创建一个标题为“家庭账单”的表格。实现的效果如下图所示：

编程要求

根据任务描述提示的目标效果，在右侧编辑器补充代码，创建一个题为“家庭账单”的表格，要求如下： 1.为整个网页添加下图所示背景图，其URL为https://www.educoder.net/api/attachments/1217848； ![(https://www.educoder.net/api/attachments/1217848) 2.表格边框为2px；表格宽度为600；bordercolor为#00ff00;cellpadding为6；表格在网页中居中排列； 3.表格标题为“家庭账单”； 4.单元格的背景等样式已在头部style标签中设置，各单元格的内容及合并要求请参看任务描述中的效果图，要注意绿色显示区的单元格要设置为项目表头，青色显示区的单元格要设置为数据单元格。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表格综合</title><style type="texts">th{background-color:#00ff33;}td{background-color:#00ffff;text-align:center}caption{font-family:黑体;font-size:30px;color:blue}</style></head>
<!-- ********* Begin ********* --><body background="https://www.educoder.net/api/attachments/1217848"><table border="2" width="600" bordercolor="#00ff00" cellpadding="6" align="center" valign="middle" cellspacing="2px"><caption>家庭账单</caption><tr><th rowspan="2" colspan="2">本周项目</th><th colspan="2">费用明细</th><th rowspan="2">备注</th></tr><tr><th>收入</th><th>支出</th></tr><tr><th rowspan="3">收入</th><th>工资</th><td>10000</td><td>0</td><td></td></tr><tr><th>兼职</th><td>2000</td><td>0</td><td></td></tr><tr><th>收入合计</th><td>12000</td><td>0</td><td></td></tr><tr><th rowspan="3">支出</th><th>生活用品</th><td>0</td><td>4000</td><td></td></tr><tr><th>学杂费</th><td>0</td><td>3000</td><td></td></tr><tr><th>支出合计</th><td>0</td><td>7000</td><td></td></tr></table></body>
<!-- ********* End ********* -->
</html>

表单

表单结构相关知识

为了完成本关任务，你需要掌握：1.表单的结构，2.form标签的属性。

表单的结构

表单是收集用户数据的容器。一个表单通常由表单控件和相关的提示信息组成。

表单控件：实现用户输入的组件。如文本框、密码框、单选按钮、复选按钮、下拉列表框、多行文本框、文件域等控件。
提示信息：提示用户进行填写和操作的说明文字。

每个表单都以form开始标签开始，以form结束标签结束。两个标签之间是组成表单的各个控件及提示信息。表单的基本结构如下：

<form action="url地址" method="提交方式" name="表单名称">           各种表单控件及提示信息</form>

form的属性

表单在向服务器传输数据时需要一些进行一些设置，可通过form标签的属性来实现。

name

每个表单及其表单控件都有一个 name 属性，用于在提交表单时对表单及数据进行识别。

action

在提交表单时，action属性用于指定接收并处理表单数据的服务器程序的url地址。

method

在提交表单时，method属性用于设置表单数据的提交方式。有两种方法：get方法和post方法。

get方法

采用GET方法时，浏览器会与服务器建立连接，然后将表单数据直接附在action属性设置的URL之后，通过URL在一个传输步骤中发送所有的表单数据，URL和表单数据之间用问号进行分隔。显然这种方法用户数据要显示在地址栏中，保密性很差，而且对用户发送的数据量也有限制。

post方法

采用POST方法是在HTTP请求中嵌入表单数据。浏览器首先与action属性中指定的服务器建立连接，一旦建立连接之后，浏览器按分段传输的方法将数据发送给服务器。显然这种方法用户数据嵌入在http请求中而不是地址栏的，保密性较好，对用户发送的数据量也无限制。但post方法发送的信息是未经加密的，容易被黑客获取。

其他属性

在HTML5中，form标签还有两个新的属性。

autocomplete：规定是否启用表单的自动完成功能。自动完成允许浏览器侦测字段输入，当用户开始键入时，浏览器会基于以前键入过的值，自动列表显示在字段中填写的选项。取值为on,启用自动完成功能;取值为on,取值为off，禁止自动完成功能。
novalidate：规定是否不进行表单验证。启用该属性，则当提交表单时不进行验证。

表单控件的类型

常用的表单控件有以下几种：

input控件：是单行输入型控件，用来接受用户输入的信息。
textarea控件：用来创建一个支持多行的文本输入区域。
select控件：用于创建下拉列表框。
button控件：用于定义一个按钮。

经典例题

1、下列选项中，不属于表单标记<form>的常用属性的是（ d ）。

A、actionB、methodC、nameD、size
2、在HTML中，<form method=””>，method属性表示（ a ）。

A、提交方式B、表单所用的脚本语言C、提交的URL地址D、表单的类型
3、在HTML中，（ c ）标签用于在网页中创建表单。

A、<input>B、<select>C、<form>D、<table>
4、在表单提交方式中，get方式的保密性好，并且无数据量的限制。a

A、正确B、错误
5、在HTML中，要创建一个名为“myform”的表单，以get方式向服务器发送，表单提交后，执行程序的地址为passwodl.jsp，下面创建表单的代码中，正确的是（ c ）。

A、<form name="myform" method="get" submit="passwodl.jsp">...</form>

B、<form name="myform" method="get" submitsrc="passwodl.jsp">...</form>

C、<form name="myform" method="get" action="passwodl.jsp">...</form>

D、<form name="myform" method="post" action="passwodl.jsp">...</form>

input控件相关知识

为了完成本关任务，你需要掌握：1.input控件的类型，2.input控件的属性。

input控件的属性

input标签是单标签，用于创建采集用户输入信息的表单控件。input控件常用的属性有type、name、value、size、readonly、disabled、checked、maxlength、min。

type：控件类型，取值为text 、password、radio 、 checkbox 、 button、 submit、 reset、 file image、 hidden等
name：控件名称，取值由用户定义
value：控件中默认文本，取值由用户定义。对于不同的input控件类型，value的含义不同，例如button、reset和submit，value定义按钮上显示的文本；text、password和hidden，value定义域的初始值；checkbox、radio、image，value定义与输入相关联的值。
size：控件在页面中显示宽度，取值正整数
readonly：控件内容为只读，取值为readonly
disabled：首次加载页面时禁用该控件（显示为灰色），取值为disabled
checked：定义选择控件默认值被选中，取值checked
maxlength：控件允许输入的最多字符数，取值正整数
min：控件允许输入的最少字符数，取值正整数

HTML5中新增的input属性还有：

placeholder：用户输入提示，取值由用户定义
required：输入字段必须填写，取值为required
autofocus：自动聚焦，取值为autofocus
pattern：规定输入字段值的模式或格式，取值为正则表达式

input控件的类型

input控件通过type属性的取值设置不同类型，主要有：

text：定义单行文本框，文本框的默认宽度是20个字符。
password：定义密码框，密码域中的字符会被掩码（显示为星号或原点）。
radio：定义单选按钮，单选按钮允许用户在一定数目的选择项中必须且仅能选取一个。
checkbox：定义复选框，复选框允许用户在一定数目的选择项中不选、选取一个或多个。
button：定义按钮，单击按钮时需自行定义行为。button常用于在用户单击按钮时启动JavaScript程序，响应用户。
submit：定义提交按钮，提交按钮用于向服务器发送表单数据。数据会发送到表单action属性中指定的位置。
reset：定义重置按钮，重置按钮会清除表单中的所有数据。
file：定义文件域，包括输入字段和“浏览”按钮，供文件上传。
image：定义图像形式的提交按钮，需配合src属性和alt属性使用。
hidden：定义隐藏域，隐藏域对于用户是不可见的，隐藏域通常会存储一个默认值。

HTML5中新增的type取值：

search：用于搜索域，如站点搜索或Google搜索。search显示为常规的文本框。
email:定义包含e-mail地址的输入域，在提交表单时，会自动验证email域的值。
url:定义包含URL地址的输入域，在提交表单时，会自动验证url域的值。
tel:定义一个电话号码输入域，手机端输入信息时，会弹出拨号键盘。
number:定义一个数字输入域，可以使用max和min属性规定输入数值的最大值和最小值，让输入的数据在合法值的范围内。也可以使用step属性规定数字的增减间隔。
range:定义包含一定范围内数字值的输入域，range类型显示为滑动条，默认值范围是0~100。同时可以使用max、min和step属性。
color:定义颜色选择域，输入时会打开调色板选取颜色。
date:定义日期选择域，鼠标点击输入框，可以看到浏览器原生的日历框。
month:定义月份选择域，效果类似date。
week:定义周选择域，效果类似date。
time:定义时间选择域。
datetime-local:定义本地日期时间选择域。
datetime:定义日期时间选择域。

经典例题

1、在表单中插入单选按钮的HTML代码是（ d ）。

A、<input type="submit" >B、< input type="button" >C、< input type="reset" >D、<input type=“radio”>
2、HTML代码<input type="text" name="foo" size="20">表示（ b　）。

A、创建一个单选框B、创建一个单行文本输入区域C、创建一个提交按纽D、创建一个使用图象的提交按纽
3、对于标签<input type=*>，如果希望实现密码框效果，* 值是（ c ）。

A、hiddenB、textC、password D、submit
4、下列选项中，用于设置input控件在首次加载时为禁用的属性是（ a ）。

A、disabledB、checkedC、requiredD、autofocus
5、设置表单中密码框的最大长度为15正确的属性设置是（ d ）

A、size=15B、max=15C、maxsize=15 D、maxlength=15

任务描述

<!DOCTYPE html>
<html>
<body><head><meta charset="utf-8"/><title>设置单行文本框</title></head><body><form action="" method="post">姓名：<input type="text" name="yourname" size="15" maxlength="5"/><br/>密码：<input type="password" name="password" size="15" value="12345"/><br/>国庆期间你最喜欢看的电影？<br/><input name="Film" type="radio" value="Film1"/>夺冠<input name="Film" type="radio" value="Film2"/>我和我的祖国<input name="Film" type="radio" value="Film3"/>姜子牙<br/>你喜欢的运动是？<br/><input name="Sports" type="checkbox" value="sport1" checked="checked"/>打篮球<input name="Sports" type="checkbox" value="sport2"/>打排球<input name="Sports" type="checkbox" value="sport3"/>踢足球<input name="Sports" type="checkbox" value="sport4"/>其他 <br/> <!--********* Begin ********* --><input type="reset" value="重置"/><input type="submit" value="提交"/><!-- ********* End ********* --></form></body>
</html>

文本域相关知识

为了完成本关任务，你需要掌握：textarea标签及其属性

textarea标签的属性

textarea标签用于定义多行文本区域，文本区域中可容纳无限数量的文本，其中文本的默认字体是等宽字体（Courier）。

textarea的基本属性

textarea的基本属性主要有：

cols：规定每行中的字符数
rows：规定可见的行数
name：规定文本区域的名称
readonly：规定文本区域为只读
disabled：规定文本区域为不可用

HTML5中textarea的新属性

textarea的新属性主要有：

wrap：规定表单提交时，文本区域的文本换行模式。取值为soft表示不换行，取值为hard表示换行
maxlength：规定文本区域的最大字符数
placeholder:规定一个简短的提示，描述文本区域期望的输入值
required:规定文本区域是必需的/必填的。
autofocus：规定当页面加载时，文本区域自动获得焦点
form:定义文本区域所属的一个或多个表单

经典例题

1、若将文本区域设置为显示10行，每行显示50个字符，正确选项是（ c ）

A、<textarea rows="50" cols="10">

B、<input rows="50" cols="10">

C、<textarea rows="10" cols="50">

D、<input rows="10" cols="50">
2、若将文本区域设置为只读的，可在textarea标签中添加（ b ）属性。

A、disabledB、readonlyC、requiredD、autofocus
3、在表单提交时使textarea 中的文本换行，正确的选项是（d ）

A、<textarea name="mm" rows="5" cols="50">

B、<textarea name="mm" rows="5" cols="50" wrap>

C、<textarea name="mm" rows="5" cols="50" wrap="soft">

D、<textarea name="mm" rows="5" cols="50" wrap="hard">
4、textarea标签的属性不包括（ a ）

A、widthB、rowsC、colsD、maxlength
5、textarea文本区域的宽度可用size属性来设置。b

A、正确B、错误

下拉列表相关知识

为了完成本关任务，你需要掌握：select控件结构及其相关属性。

select控件

select控件可以创建选择框。可为用户提供一组选项，允许用户从中选取，通常呈现为下拉菜单的样式。

select控件的基本结构

下拉列表选择区是由<select>标签和<option>标签构成，其中<select>标签用来创建下拉列表，<option>标签定义了列表中的可用选项。基本结构如下：

<select name=""> <option value=" ">选项1</option> <option value=" ">选项2</option>  ...</select>

select标签的常用属性

select标签的常用属性有：

name：规定下拉列表的名称
size：规定列表中可见选项的数目
multiple：设定为多选
disabled：禁用该下拉列表

select标签的新属性

HTML5中引入的select新属性有：

autofocus：规定在页面加载时下拉列表自动获得焦点
required：规定用户在提交表单前必须选择一个下拉列表中的选项
form：定义 select 字段所属的一个或多个表单

option标签的常用属性

disabled：规定该选项在首次加载时被禁用
selected：规定该选项在首次加载时为选中状态
value：定义送往服务器的选项值

经典例题

1、<select>标签用于创建（ d ）

A、表格B、框架C、单选框D、下拉列表选框
2、<select>用于在表单中插入一个下拉列表框，它需要与哪个标签配合使用（ c ）

A、<list>B、<item>C、<option>D、<dot>
3、设置下拉列表框中某项被默认选中的属性是( c )。

A、checkedB、checkC、selectedD、select
4、若设置下拉列表为多选，可在select标签中添加（ b ）属性。

A、selectedB、multipleC、requiredD、checked
5、下拉列表设置<select name="Fruit" size="3">表明（a ）

A、可以看到3个下拉列表选项B、有3个下拉列表选项C、下拉列表控件的宽度为3D、下拉列表字符长度为3

分组元素相关知识

为了完成本关任务，你需要掌握：表单分组涉及到的标签及属性

fieldset标签

fieldset标签用于定义表单的一个子容器，将所包含的内容以边框环绕方式显示。 fieldset标签没有必需的或唯一的属性，可添加的属性有：

name：规定fieldset的名称
form：规定fieldset所属的一个或多个表单
disabled：规定该组中的相关表单元素被禁用

legend标签

legend标签用于定义分组的标题，fieldset标签中的第一个元素一般是legend标签。

经典例题

1、fieldset标签用于定义（ )

A、表单的一个文本区域B、表单的一个下拉列表C、表单的一个子容器D、表单的一个隐藏域
2、表单的分组标题可以用（）设置。

A、title标签B、summary标签C、caption标签D、legend标签
3、下列选项中，（）不属于fieldset标签的属性。

A、sizeB、nameC、disabledD、form
4、下列关于表单分组的设置代码，正确的是（）

A、请选择个人爱好打篮球打排球

B、请选择个人爱好打篮球打排球

C、请选择个人爱好打篮球打排球

D、请选择个人爱好打篮球打排球

表单验证相关知识

为了完成本关任务，你需要掌握：1.表单验证的概念，2.HTML5的表单验证类型及用法。

表单验证的概念

表单验证是指在用户提交表单之前，验证用户输入的数据是否合法。 HTML5提供了一套简单的验证方式，在表单提交时，会根据情况弹出一些简单的提示，如“请填写此字段”“请匹配要求的模式”等，不同的浏览器所弹出的提示内容会有所不同。

表单验证的类型

HTML5中主要包括以下几个方面的验证：输入类型的验证、日期和时间范围的验证、必填字段的验证、步长的验证、字符长度的验证、数值范围的验证、正则表达式的验证等。

required非空验证

在某个表单控件中添加required属性，则表明该表单的值不能为空。required 属性适用于以下类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。示例如下： <input type="text" placeholder="请输入用户名" required>

maxlength字符长度验证

在某个表单控件中添加maxlength属性，可限定输入的字符数。maxlength 属性与<input type="text"> 或 <input type="password"> 配合使用。示例如下： <input type="password" maxLength="10"/>

输入类型的验证

HTML5新增了一些具有校验功能的input控件的类型，分别是：

email:要求输入内容必须符合电子邮件地址的格式。
url:要求输入内容必须符合URL的格式
number:要求输入内容必须为数字，并可通过min、max、step等属性来设置最小值、最大值和间隔

示例如下： <input type="email"/> <input type="url"/> <input type="number" min="0" max="100" step="10" value="20"/>

pattern验证

HTML5新增的pattern属性具有对表单中输入字段模式进行验证的功能。适合于text、serch、url、telephone、email、password等<input>类型。示例如下： <input type="text" pattern="^[0-9]{12}$"/> 可以看到，pattern属性取值为符合某种规则的正则表达式，它以“^”开始，以“$”结束，中间是“规则字符串”，规则字符串通常由普通字符和元字符组成。

普通字符：由大小写的字母和数字组成
元字符：是具有特殊含义的字符
常见的元字符及其功能说明如下图所示：

经典例题

1、下列选项中，对表单控件的值进行非空验证的属性为（ a ）

A、requiredB、checkedC、selectedD、null
2、在input控件的类型中，下列选项中对输入有校验功能的是（ c ）

A、textB、passwordC、emailD、submit
3、关于输入字符数的限定，下列代码中，设置正确的是（ d）。

A、<input type="number" size="6"/>

B、<input type="text" size="6"/>

C、<input type="number" maxlength="6"/>

D、<input type="text" maxlength="6"/>
4、匹配1个或多个在它前面的元字符是（b ）。

A、*B、+C、？D、.
5、若限定用户输入6位数字，下列的代码正确的是（ c ）。

A、<input type="text" pattern="^([0-9]{6,})$">

B、<input type="text" pattern="^([0-9](6))$">

C、<input type="text" pattern="^([0-9]{6})$">

D、<input type="text" pattern="^([0-9](6,))$">

给表单添加组件相关知识

为了完成本关任务，你需要掌握：label标签及其相关的属性。

label标签及其属性

<label>标签用于为输入类型的表单控件定义标注。用<label>元素定义的文本标签，从显示上看与其他文本毫无差异。但当用户点击由<label>元素定义的文本标签时，与该文本关联的输入控件将获得焦点。 <label>标签的属性主要是：

for:规定label绑定到哪个表单元素上，属性取值为表单元素的id。在HTML5中新增了form属性：
form:规定label字段所属的一个或多个表单。当<label>标签不在表单标签<form>中时，就需要使用form属性来指定所属表单；属性值是其所属表单的id。如果input元素属于多个表单，用空格符分隔表单的id名，但目前浏览器测试都不支持。

label标签与表单控件的关联

label标签与表单控件之间有两种关联方法。

显式关联

通过使用 “for” 属性将 label 绑定到另一个元素，这种方式称为显式关联。用法示例：

<form> 性别：<br/>     <input name="sex" id="man" type="radio"/>     <label for="man">男</label>     <input name="sex"  id="woman" type="radio"/>    女 </form>

隐式关联

把需要绑定的标签放到label内部，这种关联方法称为隐式关联。用法示例：

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

经典例题

1、为了给单行文本框绑定文本标注，以便于用户单击该关联文本时可以使文本框获得焦点，可采用（ b ）标签定义文本。

A、lableB、labelC、blurD、focus
2、<label>标签中的for属性取值为（c ）

A、要绑定的文本内容B、要绑定的表单标签<form>的id属性值C、要绑定的表单控件的id属性值D、要绑定的表单控件的name属性值
3、<label>标签中的form属性取值为（ a ）

A、所属表单的id值B、所属表单的name值C、所属表单控件的id值D、所属表单控件的name值

头部标签

title标签

title标签用于定义HTML页面的标题。它是双标签，开始和结束标签之间的内容就是要设置的页面标题。它的作用是：

在浏览器的标题栏中显示标题
标题可以用作默认快捷方式或收藏夹的名称
标题还可以作为搜索引擎结果中的页面标题

应用时注意：

一个网页只能有一个标题
标题名称的长度不超过64个字符数
标题标记对之间不允许有其它的标签存在

meta标签

meta标签是单标签，用于定义页面的元信息。元信息不会显示在浏览器窗口中，但是对于机器是可读的。在HTML页面中，可以添加多个meta标签。它的作用是：

设置页面的属性，如设置刷新、失效期、缓存、 cookie等
设置搜索引擎的属性，如设置关键字、简介、作者、机器人向导、版权、编辑器等
设置字符编码的属性。

标签的语法格式：

格式说明：

http-equiv设置页面的属性，其相关内容由content属性取值来描述
name设置搜索引擎的属性，其相关内容也是由content属性取值来描述
charset是HTML5新增的属性，用于设置字符编码类型。

link标签

link标签可引用外部文件。它是单标签，一个页面允许使用多个link标签引用多个外部文件。它的作用是：

指定引用外部文档的地址
指定当前文档与引用的外部文档的关系
说明引用外部文档的类型

<link/>标签的语法格式： <link href="" rel="" type=""/>

格式说明：

href设置外部文档的地址
rel设置当前文档与引用的外部文档的关系
type设置外部文档的类型。

style标签

style标签用于为HTML文档定义样式。它是双标签，开始和结束标签之间是CSS样式规则。每个HTML文档能包含多个 style标签。特别要注意：style 标签中type 属性必须设置，且属性取值只能 “text/css”。

meta标签的作用

meta标签用于定义页面的元信息，可重复出现再头部标签中。它是单标签，通过“名称/值”的形式成对使用其属性。 meta标签主要分为两大类，一类对页面进行设置，另一类对搜索引擎进行设置。

对页面进行设置的格式：<meta http-equiv="名称" content="值"/>
对搜索引擎进行设置的格式：<meta name="名称" content="值"/>

http-equiv/content

http-equiv/content属性对用于设置刷新、失效期、 cookie等页面信息。用法示例：

页面停留20秒后跳转到www.educoder.net

网页于2020年7月26号8点过期

设置cookie并进行页面缓存

name/content

http-equiv/content属性对用于设置关键字、简介、作者、机器人向导、版权、编辑器等。

用法示例：

用于标注网页的作者和Email

为搜索引擎提供网站简介

为搜索引擎提供关键字

为搜索引擎提供编辑器类型

为搜索引擎提供提供最新版本信息

charset

charset是HTML5新增的字符编码属性。属性取值必须是标准字符集的名称，常用的字符编码如下：

ISO-8859-1：国际标准化组织针对不同的字母表/语言定义的标准字符集（拉丁字母表的字符编码），是浏览器默认的字符集
utf-8：Unicode 联盟开发的标准，utf-8 是网页和电子邮件的首选编码。
gb2312：信息交换用汉字编码字符集，中国国家标准总局1980年发布。适用于汉字处理、汉字通信等系统之间的信息交换。

用法示例：

设置utf-8字符编码标准

文本控制类标签

块级元素与行内元素

块级元素

块级元素是指显示为一个区块内容的元素，在浏览器显示时，通常会以新行来开始（和结束）。其特点是：

总在新行上开始
高度、行高以及内外边距都可控
默认宽度为容器的100%
可以嵌套行内元素和其他块级元素

行内元素

行内元素也叫内联元素，是指显示为一行内容的元素，在浏览器显示时，会顺次在一行排列，而不另起新行。其特点是：

和其他元素排成一行
高度、行高以及内外边距不可控
宽度就是其内容的宽度，不可改变
行内元素只能容纳文本或其他行内元素

标题段落标签

文本标题标签`<hi>`

文本标题标签<hi>是双标签，块级元素，用于规定文本内容标题的层次。在HTML中提供了6级标题标签，从一级<h1>开始到六级<h6>，字号大小依次减小。默认情况下，在大多数浏览器中显示<h1><h2><h3>的内容大于文本在网页中的默认尺寸，<h4>的内容与默认文本的大小基本相同，而<h5>和<h6>的内容较默认文本小一些。可设置文本标题的对齐属性。

段落标签`<p>`

段落标签<p>是双标签，块级元素，用于将文本内容定义为一个段落，段落内容从新的一行开始，并于上一段之间有一个空行。可设置段落文本的对齐属性。

文本修饰标签

换行标签`<br/>`

换行标签<br/>是单标签，可以在文本内容不结束的情况下对文本进行换行。它不产生一个空行，但连续多个的<br>标签可以产生多个空行的效果。

水平线标签`<hr/>`

水平线标签hr/是单标签，用于产生一条水平线。可设置水平线的粗细、长度、对齐方式、有无阴影和线的颜色属性。

文本修饰类标签

文本修饰类标签都是双标签，行内元素。用于设置文字的风格样式。这些标签及其功能说明如下图所示。

块标签`<div>`

块标签<div>是双标签，块级元素。用于排版大块段落，可以将网页分割为独立的部分，以实现网页的规划和布局。可通过style属性设置样式，也可以通过class 或 id属性应用样式。

行内标签`<span>`

行内标签span是双标签，行内元素。用来组合文档中的行内元素，便于样式定义或使用JavaScript 对它进行操作。使用方法和<div>标签基本相同。

特殊字符的引用

浏览网页时常常会看到一些包含特殊字符的文本，如数学公式、版权信息等。这些字符不能直接使用，只能通过下图所示的引用方式实现。

页面节点元素

section元素

section 元素用于定义文章的节（区段），比如章节、页眉、页脚或文档中的其他部分。通常由内容及其标题组成。

nav元素

nav元素用于代表页面的一个部分，是一个可以作为页面导航的链接组，主要用于构建导航菜单、侧边栏导航、内页导航和翻页操作等区域。

address元素

address元素用于一般被作者用来提供该文档的联系人信息，一般放在一个网页的开头或者结尾，最常用的是和其他内容包含在footer元素内。如果address元素位于article元素内部，则它表示article元素所包含文章内容的作者的联系信息，如果直接位于body元素内，那么表示该网页的作者的联系信息。

交互元素

progress元素

progress元素属于状态交互元素。用来表示页面中的某个任务完成的进度。progress元素具有max和value两个属性：

max:表示任务的总量，默认值为1.
value:表示已完成任务的数量。

应用中，可以有以下三种情况。用法示例1： <progress max=100 value=20></progress> 用法示例2： <progress value=0.5></progress> 用法示例3： <progress></progress> 示例2中，没有设置max属性，则默认为1；示例3中max和value的属性都没有设置，则进度条处于左右自由滑动状态。当进度条需要动态改变时，需要通过JavaScript来实现。

meter元素

meter元素属于状态交互元素。可用于投票系统中候选人各占比例情况、考试分数统计等。 meter元素具有如下属性：

form：规定meter元素所属的一个或多个表单，其取值为表单标签form所定义的id名。
value：设置或获取meter元素的当前值，其数值必须介于min和max值之间。
max:设置meter元素的最大值，默认为1.
min:设置meter元素的最小值，默认为0.
high:设置过高的阈值，当value值大于high并小于max时，显示过高的颜色。
low：设置过低的阈值，当value值小于low并大于min时，显示过低的颜色。
optimum:设置最优值。

用法示例：

<!DOCTYPE html><html><head>  <meta charset="UTF-8"></head><body><meter></meter>没有属性的meter<br/><meter value="0.6"></meter>只有value属性的meter<br/><meter value="40"  min="10" low="30" high="80" max="100" ></meter>value介于low和high之间，计量条绿色<br/><meter value="20"  min="10" low="30" high="80" max="100" ></meter>value小于low的meter，计量条黄色<br/><meter value="90"  min="10" low="30" high="80" max="100" ></meter>value大于high的meter，计量条黄色<br/><meter value="40"  min="10" low="30" high="80" max="100"  optimum="90"></meter>value介于low和high之间，但optimum介于low和high之外，计量条黄色<br/><meter value="20"  min="10" low="30" high="80" max="100"  optimum="60"></meter>value介于low和high之外，但optimum介于low和high之间，计量条黄色<br/><meter value="20"  min="10" low="30" high="80" max="100"  optimum="90"></meter>value和optimum均介于low和high之外，计量条红色<br/><meter value="90"  min="10" low="30" high="80" max="100"  optimum="20"></meter>value和optimum均介于low和high之外，计量条红色<br/></body></html>

运行的效果如下图所示：

details/summary元素

details元素用于用于描述文档或文档某个部分的细节。在特定的浏览器下(如Chrome、 Safari ）能够产生像手风琴一样展开和折叠的交互效果。summary元素通常作为details元素的标题部分，嵌套在details元素中。应用时，details元素中标题内容是可见的，当单击标题时将会显示/隐藏details元素中的详细信息。 meter元素的属性主要就是open:

open:用于控制details元素是否显示,取值为true时，元素内部的子元素被展开显示，当open属性值为false时，其内部的子元素被收缩起来不显示。默认不显示。用法示例：
```
<details>  <summary>单击可显示/隐藏详细内容</summary>  <p>这里详细介绍details元素所涉及的知识</p></details>
```

用法示例：

menu元素

menu元素用于创建上下文、工具栏和弹出菜单。目前的浏览器仅支持创建上下文的菜单。menuitem元素用于定义菜单项 menu元素主要有以下两个属性:

label:用于设置菜单的可见标签。
menu：用于设置菜单的类型，取值为context表示上下文菜单，取值为toolbar表示工具条，取值为popup表示弹出式菜单。用法示例：
```
<span contextmenu="myMenu">右击一下</span><menu type="context" id="myMenu"><menuitem label="单击一下"  onclick="alert('您单击了我一下')" ></menuitem></menu>
```
command元素

command元素用于定义各种类型的命令按钮。利用该标记的icon属性可以添加图片，并且实现图片按钮效果；另外，改变标记中的“type”属性值，还可以定义按钮类型。 command元素主要有以下属性：
icon:规定用于代表 command 元素的图像。
label：设置规定 command 元素的可见标签。
type：设置command 元素的类型，可以取checkbox（复选）、radio（单选）、command（操作按钮）。默认取 “command”。
radiogroup：设置radio 类型按钮的组名。

用法示例：

<command onclick="alert('您单击了我一下')">  请单击 </command>

目前主流浏览器还不能支持menu元素和command元素，也就是FireFox浏览器可以支持部分显示。

文本层次语义元素

em和strong

em和strong都是HTML5中定义的带有加强语义的元素，页面呈现加粗显示效果。

em:把文本定义为强调的内容。显示时为斜体加粗。
strong:把文本定义为语气更强的强调的内容。

cite

cite元素创建一个引用标记，用来指明某内容的引用或参考源，如书籍或杂志或新闻报道等的标题，规范、报纸、法律文件，网络文章的URL等。如果引用的这些文档有联机版本，还应该把引用包括在一个 <a>标签中，从而把一个超链接指向该联机版本。

mark

mark元素定义带有记号的文本，可以高亮显示文档中的文字以达到醒目的效果。

time

time元素定义日期或时间,该元素能够以机器可读的方式对日期和时间进行编码，比如用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

dfn

dfn元素用来定义术语，可以通过可选的 title属性来提供对术语的准确定义。例如： <dfn title=文档对象模型>DOM</dfn> 默认情况下，浏览器会将 dfn元素的内容渲染为斜体。并且，当鼠标悬停到术语上时，浏览器就会将 title属性的内容显示在提示框里。

code

code元素用来定义计算机代码文本。包含在该元素内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来。

samp

samp元素定义计算机程序的样本文本。

kbd

kbd元素定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。浏览器通常用等宽字体来显示该标签中包含的文本。

var

var元素定义变量。这个标签经常与 <code>和<pre>标签一起使用，用来显示计算机编程代码范例及类似方面的特定元素。用 <var>标签标记的文本通常显示为斜体。

分组元素

div

div元素是没有语义的通用分组元素，早期设计中常用div标签进行网页布局。

blockquote

blockquote元素表示摘自另一个源的大段内容的语义化元素。在显示上有段落空隙，在左右两边缩进（增加外边距）。

pre

pre元素用来定义预格式化文本，在<pre>标签内容中的文本通常会保留空格和换行符，显示为等宽字体。

figure/figcaption

figure元素代表一个和文档相关的图，figcaption是这个图的标题。

ul/li

ul可创建无序列表，在这个标签中可以用li标签设置多个列表项。基本格式如下：

<ul>  <li>无序列表项1</li>  <li>无序列表项2</li>  <li>无序列表项3</li></ul>

无序列表<ul>有一个可选属性type，用来规定列表里项目符号的类型,其取值可以是disk(实心圆）、circle（圆）或square（实心正方形）。

ol/li

HTML中的ol元素表示排序的项目列表，属性type 可设置列表符号样式，取值为1表示按数字排序，取值为A表示按大写英文字母排序，取值为a表示按小写英文字母排序，取值为I表示按大写罗马数字排序，取值为i表示按小写罗马数字排序，默认按数字排序。属性start 设置列表符号初值，取值可以是1、2、3 …,例如以下代码：

ol可创建有序列表，在这个标签中可以用li标签设置多个列表项，显示时每个列表项独占一行。基本格式如下：

<ol>  <li>有序列表项1</li>  <li>有序列表项2</li>  <li>有序列表项3</li></ol>

在HTML5中，有序列表<ol>有三个可选属性，type用来规定列表里项目编号的类型，start属性用于指定列表的开始编号，reversed属性用于将列表反向进行编号。

dl/dt,dd

dl可创建定义列表，在这个标签中可以用dt标签设置需要定义的术语，每个术语后可用1~n个dd标签设置定义的解释体。基本格式如下：

<dl>  <dt>术语</dt>    <dd>术语解释1</dd>    <dd>术语解释2</dd> </cl>

经典例题

1、在下列选项中，用于表示引自他处大段内容的分组元素是（ b ）。

A、divB、blockquoteC、pD、pre
2、在HTML中，元素pre的作用是（ c ）

A、表示标题B、表示转行C、表示预排版D、表示文字效果
3、以下哪个标记用来建立一个有序列表（ d ）。

A、<ni>B、<ul>C、<dl>D、<ol>
4、在定义列表中，一对<dt></dt>标记可以对应多对<dd></dd>标记。a

A、正确B、错误
5、关于定义无序列表的基本语法格式，以下描述错误的是（d ）。

A、<ul></ul>标记用于定义无序列表

B、<li></li>标记嵌套在<ul></ul>标记中，用于描述具体的列表项

C、每对<ul></ul>中至少应包含一对<li></li>

D、<li>不可以定义type属性，只能使用CSS样式属性代替

ol/li

ol可创建有序列表，在这个标签中可以用li标签设置多个列表项，显示时每个列表项独占一行。基本格式如下：

<ol>  <li>有序列表项1</li>  <li>有序列表项2</li>  <li>有序列表项3</li></ol>

dl/dt,dd

dl可创建定义列表，在这个标签中可以用dt标签设置需要定义的术语，每个术语后可用1~n个dd标签设置定义的解释体。基本格式如下：

<dl>  <dt>术语</dt>    <dd>术语解释1</dd>    <dd>术语解释2</dd> </cl>

经典例题

1、在下列选项中，用于表示引自他处大段内容的分组元素是（ b ）。

A、divB、blockquoteC、pD、pre
2、在HTML中，元素pre的作用是（ c ）

A、表示标题B、表示转行C、表示预排版D、表示文字效果
3、以下哪个标记用来建立一个有序列表（ d ）。

A、<ni>B、<ul>C、<dl>D、<ol>
4、在定义列表中，一对<dt></dt>标记可以对应多对<dd></dd>标记。a

A、正确B、错误
5、关于定义无序列表的基本语法格式，以下描述错误的是（d ）。

A、<ul></ul>标记用于定义无序列表

B、<li></li>标记嵌套在<ul></ul>标记中，用于描述具体的列表项

C、每对<ul></ul>中至少应包含一对<li></li>

D、<li>不可以定义type属性，只能使用CSS样式属性代替

考试大题