购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

3.3 储备知识点

3.3.1 HTML5文档的头部标记

<head>标记是所有头部元素的容器。<head>标记内的元素可包含脚本,指示浏览器在何处找到样式表,提供元信息,等等。

可以添加到<head>标记中的元素有:title、base、link、meta、script和style。

1. <title>标记

<title>标记用来定义文档的标题,即在浏览器工具栏中的网页页面标题。

例如,对于以下代码,<title>标记对中的内容就是页面标题的内容。

代码运行结果如图3-6所示。

图3-6 title标记效果

<title>标记定义的标题也是该页面被添加到收藏夹时默认显示的标题,如图3-7所示。

图3-7 收藏夹效果

<title>标记定义的标题也是显示在搜索引擎结果中的页面标题。所有主流浏览器都支持<title>标记。

2. <base>标记

<base>标记为页面上所有相对链接规定的默认URL或默认目标。

在一个文档中最多能使用一个<base>标记。<base>标记必须位于<head>标记内部。

注意:

• 相对链接:不需要输入完整的链接地址,而是要参考当前位置,以当前位置来确定链接地址。

• 绝对链接:需要输入完整的链接地址。

相对链接较常用于链接符号。相对于“自己”的目标文件位置,就是指相对于当前文件(夹)的某个文件的路径。"/"表示展开当前位置的下一目录;"./"表示返回当前所在目录;"。。/"表示返回到父目录下,即所在目录的上级目录。

在应用中,考虑到脚本运行的顺序性,建议将<base>标记排在<head>标记中第一个元素的位置,这样head区域中其他元素也可以使用<base>标记中定义的信息。

其基本语法格式为:

以上代码中,href与target是描述链接的必备属性,href是超级链接标识符,它的值表示地址(实例中使用的地址链接为绝对链接)。target属性规定在何处打开链接文档;_blank为它的值,表示浏览器在一个新窗口中载入目标文档。(注:对此处属性,可以在之后学习完<a>标记后再返回进行印证学习。)

3. <link>标记

<link>标记定义文档与外部资源的关系。其常见的用途是链接样式表。<link>标记必须位于<head>标记内部,可以使用多次。当我们在HBuilder X编译环境的head部分里输入link单词时,编译环境会自动补全<link>标记的最常用的连接外部的样式表写法:<link rel="stylesheet" type="text/css" href="">,其中href属性的值表示被链接文档的位置,这里需要手动填写或者选择填入,可以是相对链接,也可以是绝对链接。rel属性有很多规定值,代表了外部资源与本HTML文档的关系,这里stylesheet即表示样式表。type属性的值用来描述被链接文档的MIME类型(Multipurpose Internet Mail Extensions,多用途互联网邮件扩展类型)。(注:rel属性及type属性的其他值与具体含义可查阅帮助文档。)

4. <meta>标记

<meta>标记描述了一些基本的元数据。元数据不显示在页面上,但会被浏览器解析,通常用于指定网页的描述、关键词、文件的最后修改时间、作者及其他元数据。元数据可以被理解为对文档的一些基本属性的描述。

<meta> 标记通常位于<head>标记区域内。元数据通常以“名称/值”对出现。如果没有提供name属性,那么“名称/值”对中的名称会采用http-equiv属性的值。

<meta>标记属性及值见表3-1。

表3-1 <meta>标记属性及值

续表

(1)name属性

name属性规定元数据的名称,主要用于描述网页,如网页的关键词、叙述等。与之对应的属性content是对name填入类型的具体描述,通常用于搜索引擎抓取。其基本语法格式如下。

其中name属性的参数见表3-2。

表3-2 name属性的值

(2)http-equiv属性

http-equiv属性相当于模拟一个HTTP响应头。equiv是equivalent的缩写。它可以向浏览器定义一些有用的信息,以帮助浏览器正确和精确地显示网页内容;与之对应的属性content是对http-equiv填入类型的具体描述。其基本语法格式如下。

其中http-equiv属性的参数见表3-3。

表3-3 http-equiv属性的值

5. <style>标记

<style>标记定义HTML文档的样式信息,即我们通常提到的内部样式。外部样式使用link设置。

<style>标记中的type属性与<link>标记中的type属性含义相同,都是规定MIME类型。

HTML5为<style>标记新增了scoped属性,其取值也是scoped。如果不设置scoped属性,那么<style>标记必须在<head>内,作用范围是整个文档;如果设置,则可以为文档的指定部分定义样式。

6. <script>标记

<script>标记经常用来嵌入脚本语言(如JavaScript)或引入外部脚本文件(如JavaScript文件)。

此部分内容详见JavaScript相关知识。

3.3.2 文本控制标记

网页中文本是最基本的内容,为将这些内容清晰、有条理、美观地显示出来,HTML5提供了一系列相关的标记,具体如下。

1. 标题标记

HTML5提供了六个等级的标题,标题依次标记<h1>至<h6>,其中<h1>定义重要等级最高的标题,<h6>定义重要等级最低的标题。它们都是双标记,用户可将作为标题的文字内容写在标记对中。其基本语法格式如下。

该语法中“n”的取值为1~6。align属性为可选属性,用于指定标题的对齐方式。align属性一共有三个属性值,left设置标题文字左对齐(默认值);center设置标题文字居中对齐;right设置标题文字右对齐。

2. 段落标记<p>

同平时写文章一样,网页上的文字会根据需要分为若干个段落,便于阅读。HTML5使用<p>标记来标记段落,其基本语法格式如下。

该语法中align属性为<p>标记的可选属性,和标题标记<h1>至<h6>一样,同样可以使用align属性设置段落文本的对齐方式。

默认情况下,标记的段落内容会根据浏览器的窗口大小自动换行。要注意的是,在<p>标记所标记的段落内容里,文本中的回车不会被浏览器解析显示,而HTML文件中的任何空白集都只会显示为单个空格。如图3-8、图3-10所示的两段代码,第一段代码段落文本中未加空格、制表位、回车等间隔符号,显示效果如图3-9所示。

图3-8 第一段代码

图3-9 第一段代码效果

图3-10 第二段代码

第二段代码的段落文本中加了两个回车符(在代码中显示文本换行),在“根据”和“需要”之间输入了两个制表符,在“会使”和“阅读”之间加了八个空格,浏览器显示效果如图 3-11所示。

图3-11 第一段代码效果

对比二者效果会发现,文本中用键盘输入的回车没有被浏览器解析所显示,它们和制表符一样都被解析显示为一个空格。

同时,多个<p>标记定义的多个段落,每个段落之间会有默认的段前、段后间距。代码如图3-12所示,显示效果如图3-13所示。

图3-12 多个段落代码

图3-13 多个<p>标记的效果

提示:可以只在块(block)内指定段落,也可以把段落和其他段落、列表、表单和预定义格式的文本一起使用。总的来讲,这意味着段落可以在任何有合适的文本流的地方出现,如文档的主体中、列表的元素里等。

3. 换行符标记<br/>

上面的例子中,用键盘输入的换行符并不会解析显示在最后的页面中,要产生换行的效果,HTML5提供了<br/>标记,其作用为插入简单换行符。<br/> 标记是空标记(意味着它没有结束标记)。其基本语法格式为:

<br>与<br/>很相似。在XHTML、XML及未来的HTML版本中,不允许使用没有结束标记(闭合标记)的HTML元素。即使<br>在所有浏览器中的显示都没有问题,使用<br/>也是更长远的保障措施。

提示:<br>标记只是表示简单地开始新的一行,而当浏览器遇到<p>标记时,通常会在相邻的段落之间插入一些垂直间距。

4. 水平线标记<hr>

在网页中经常有所谓的“分割线”,这些“分割线”就是各种样式的水平线,可以将文字内容间隔开来,起到“另起一个主题”的作用。水平线使用<hr>标记实现。其基本语法格式如下:

<hr/>标记是单标记,在网页中输入一个<hr/>,相当于添加了一条默认样式的水平线。<hr>标记的属性及值见表 3-4。

表3-4 <hr>标记属性及值

3.3.3 格式化标记

1. 文本格式化标记

多种样式的文本效果可以丰富网页页面效果,HTML5标准将结构样式行为进一步分割,主要采用CSS样式做文本格式化,但HTML5也保留了部分简单的文本格式化标记,具体见表3-5。

表3-5 文本格式化标记

续表

以上的标记都属于短语标记。所谓短语标记是专用标记,用于指示文本块具有结构意义,执行与文本格式标记类似的特定操作。

2. HTML“计算机输出”标记

“计算机输出”标记的具体内容见表3-6。

表3-6 “计算机输出”标记

3. HTML引文、引用标记

引文、引用标记的具体内容见表3-7。

表3-7 引文、引用标记

续表

3.3.4 特殊字符标记

作为一种程序设计语言,为了和设计语言本身相区分,HTML5与其他语言一样对特殊符号有相应的规定。常用特殊字符具体见表3-8。

表3-8 特殊字符 Hw44OlVlzsMNjJJ3yWCydpqy0HFE2asS7v7xCbGUZRkkbAfGFVMH1A/31N8bSc4H

点击中间区域
呼出菜单
上一章
目录
下一章
×