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

最新推荐文章于 2022-01-02 12:47:42 发布

卷王2048

最新推荐文章于 2022-01-02 12:47:42 发布

阅读量670

点赞数 2

文章标签： html5 html css

本文链接：https://blog.csdn.net/qq_45818845/article/details/114594025

版权

网页表格

基本概念

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

表格的结构

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

表格的基本标签

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

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

表格标签的基本属性

table标签的基本属性

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

tr标签的基本属性

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

th和td标签的基本属性

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属性对用于设置关键字、简介、作者、机器人向导、版权、编辑器等。 name/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>

运行的效果如下图所示： meter效果图

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样式属性代替

考试大题

在这里插入图片描述

卷王2048

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
educoder web程序设计基础知识点期末总结

网页表格基本概念为了完成本关任务，你需要掌握：1.表格的结构，2.表格的基本标签，3.表格标签的基本属性。表格的结构在基本表格结构中，表格标题、项目表头和数据资料构成了表格基本结构三个要素。例如下图所示的表格中，表格标题为“通讯录”，表格第一行单元格中的内容基本不变，称作项目表头，表格第二行后单元格的内容通常会动态改变，称作数据资料。表格的基本标签HTML表格由table标签以及一个或多个tr、th或td标签组成：table标签：定义一个表格caption标签：定义表格标题，嵌套在&l
复制链接

扫一扫