Web学习笔记（2）

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

2.section元素的使用

文章节的设置

HTML5中的语义化元素section可表示一个文章的节，在其中可以嵌套节标题，文章节的内容可用段落标签或其他标签来设定。

代码结构如下：

<header>文章的节标题</header>

<p>文章的段落内容</p>

</section>

nav元素的使用

文章区的结构

设计要求文章区设置一个导航区。HTML5中的语义化元素nav可表示一个导航区，在其中可以嵌套超链接标签（a）来实现跳转，外部超链接的常用属性有href和title，href的取值为链宿的路径，title的取值为鼠标悬停在链源上显示的文本。

代码结构如下：

<nav>

......

</nav>

页脚区的设置

footer元素用于定义文档或节的页脚。作为文档的页脚，通常可以包含页面的版权信息和联系人信息。

版权信息

联系人信息

版权信息通常也嵌套在页脚区，使用语义化元素address来设置，address元素中的文本通常显示为斜体。代码结构如下：

<address>联系人信息</address>

</footer>

交互元素

1.交互元素相关概念

1）progress元素

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

max:表示任务的总量，默认值为1.

value:表示已完成任务的数量。

应用中，可以有以下三种情况。

用法示例1：

用法示例2：

用法示例3：

示例2中，没有设置max属性，则默认为1；示例3中max和value的属性都没有设置，则进度条处于左右自由滑动状态。

当进度条需要动态改变时，需要通过JavaScript来实现。

2）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>

</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>

运行的效果如下图所示：

3）details/summary元素

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

meter元素的属性主要就是open:

open:用于控制details元素是否显示,取值为true时，元素内部的子元素被展开显示，当open属性值为false时，其内部的子元素被收缩起来不显示。默认不显示。用法示例：

<summary>单击可显示/隐藏详细内容</summary>

<p>这里详细介绍details元素所涉及的知识</p>

</details>

4）menu元素

menu元素用于创建上下文、工具栏和弹出菜单。目前的浏览器仅支持创建上下文的菜单。menuitem元素用于定义菜单项

menu元素主要有以下两个属性:

label:用于设置菜单的可见标签。

menu：用于设置菜单的类型，取值为context表示上下文菜单，取值为toolbar表示工具条，取值为popup表示弹出式菜单。用法示例：

</menuitem>

</menu>

5）command元素

command元素用于定义各种类型的命令按钮。利用该标记的icon属性可以添加图片，并且实现图片按钮效果；另外，改变标记中的“type”属性值，还可以定义按钮类型。 command元素主要有以下属性：

icon:规定用于代表 command 元素的图像。

label：设置规定 command 元素的可见标签。

type：设置command 元素的类型，可以取checkbox（复选）、radio（单选）、command（操作按钮）。默认取 "command"。

radiogroup：设置radio 类型按钮的组名。

用法示例：

请单击

</command>

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

2.progress元素

进度条的设置

HTML5中的交互元素progress可在网页中显示一个进度条，该元素有两个属性，属性max表示任务总量，属性value表示当前的任务量。

3.meter元素

HTML5中的交互元素meter可在网页中显示度量条，该元素的属性主要有：

value：当前值

max:最大值

min:最小值

high:：高阈值

low：低阈值

optimum:最优值

4.details/summary元素

details/summary元素的设置

HTML5中的交互元素details可在网页中描述文档或文档某个部分的细节，summary元素可设置details折叠时看到的标题内容。

文本层次语义元素

1.文本层次语义元素相关概念

1）em和strong

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

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

strong:把文本定义为语气更强的强调的内容。

2）cite

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

3）mark

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

4）time

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

5）dfn

dfn元素用来定义术语，可以通过可选的 title属性来提供对术语的准确定义。例如：

默认情况下，浏览器会将 dfn元素的内容渲染为斜体。并且，当鼠标悬停到术语上时，浏览器就会将 title属性的内容显示在提示框里。

6）code

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

7）samp

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

8）kbd

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

9）var

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

2.文本层次语义元素

em元素、strong元素、mark元素、def元素均为HTML5中定义的语义化元素，分别强调、更加强调、醒目显示、和定义术语的语义。这些元素均为行内元素，排版时如需换行，应使用标签。

3.cite元素和time元素

1）time元素

time元素定义日期或时间,该元素能够在该元素的内容中未指定日期或时间时，让机器可读，比如用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

time元素常用属性主要有datetime和pubdate。

2）datetime属性

datetime属性用于指定日期和时间，其取值格式为

YYYY-MM-DDThh:mm:ssTZ

YYYY：年

MM：月

DD：天

T：日期和时间的分隔符，设置时间的时候必须有。

hh：时

mm：分

ss：秒

Z：使用UTC标准时间

示例如下：

1.仅指定日期：

2.仅指定时间：

3.指定了日期和时间：

4.在时间后面加上“Z”表示给机器编码时使用UTC时间标准：

5.添加不同地区的时差：

3）pubdate属性

在标签中添加pubdate属性，则表示一篇文章或一个文档页面的发布日期。

示例如下：

4）cite元素

元素创建一个引用标记，用来指明某内容的引用或参考源，如书籍或杂志或新闻报道等的标题，规范、报纸、法律文件，网络文章的URL等。cite元素引用的文本将以斜体显示。

示例如下：

---引自<cite>HTML5权威指南</cite>

分组元素

1.分组元素相关的概念

1）div

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

2）blockquote

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

3）pre

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

4）figure/figcaption

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

5）ul/li

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

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

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

6）ol/li

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

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

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

7）dl/dt,dd

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

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

应用时注意，一个列表中不允许含有相同名字的术语，也不允许有重复的术语解释。

2.无序列表

无序列表示例

HTML中的ul元素表示不排序的项目列表，属性type 可设置列表符号样式，取值为disk表示实心圆，取值为circle表示圆，取值为square表示实心正方形，默认项目符号类型为disk。例如以下代码：

<ul>
<li type=disk>第一项实心圆</li>
<li type=circle>第二项圆</li>
<li type=square>第三项实心正方形</li>
</ul>

显示效果为

3.有序列表

有序列表示例

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