HTML5权威指南笔记：7-创建HTML文档

来源：互联网发布：origin8.0作图软件编辑：程序博客网时间：2024/06/05 17:20

1-构筑基本的文档结构

1.1 DOCTYPE元素

DOCTYPE元素元素类型无允许具有的父元素无局部属性无内容无标签用法单个开始标签是否为HTML5新增否在HTML5中的变化 HTML4中要求要有的DTD 已不再使用习惯样式无

例子：

<!--这个元素告诉浏览器两件事情： 第一， 它处理的是HTML文档；第二，用来标记文档内容的HTML所属的版本--><!DOCTYPE html>

1.2 html元素

html元素元素类型无允许具有的父元素无局部属性 manifest (详见第40章）内容 head元素和body元素各一标签用法开始标签和结束标签、内含其他元素是否为HTML5新增否在HTML5中的变化 manifest属性是HTML5 中新增的。HTML4版本中的属性已不再使用习惯样式 html { display: block; }
html:focus { outline: none;}

例子：

<!DOCTYPE HTML><!--html元素更恰当的名称是根元素，它表示文档中HTML部分的开始--><html></html>

1.3 head 元素

head元素元素类型无允许具有的父元素 html 局部属性无内容必须有一个title元素，其他元数据元素可有可无标签用法开始标签和结束标签。内含其他元素是否为HTML5新增否在HTML5中的变化无习惯样式无

例子：

<!DOCTYPE HTML><html><!--head元素包含着文档的元数据。在HTML 中， 元数据向浏览器提供了有关文档内容和标记的信息， 此外还可以包含脚本和对外部资源（ 比如css样式表）的引用--><head></head></html>

1.4 body元素

body元素元素类型无允许具有的父元素 html 局部属性无内容所有短语元素和流元素标签用法开始标签和结束标签是否为HTML5新增否在HTML5中的变化 alink 、background 、bgcolor 、link 、margintop 、marginbottom 、marginleft 、marginright 、marginwidth 、text和vlink属性已不再使用。这些属性的效果可用css实现习惯样式 body { display: block; margin: 8px; }
body:focus { outline: none; }

例子：

<!DOCTYPE html><html><head></head><!--文档的内容包装在body元素中--><body></body></html>

2 用元数据元素说明文档

2.1 设置文档标题（title元素）

title元素元素类型元数据允许具有的父元素 head 局部属性无内容文档标题或对文档内容言简意骸的说明标签用法开始标签和结束标签。内含文字是否为HTML5新增否在HTML5中的变化无习惯样式 title { display: none; }

例子：

<!DOCTYPE HTML><html>    <head>        <!-- 使用title元素设置文档标题和名称-->        <title>Example</title>    </head></html>

2.2 设置相对URL的解析基准（base元素）

base元素元素类型元数据允许具有的父元素 head 局部属性 href 、target 内容无标签用法虚元素形式是否为HTML5新增否在HTML5中的变化无习惯样式无

例子：

<!DOCTYPE HTML><html>    <head>        <title>Example</title>        <base href="http://titan/listings/" target="_blank"/><!--设置好URL后在下面的a元素就会用到这里的路径-->    </head>    <body>        <!--浏览器就会把基准URL和相对URL拼接成完整的URL: http://titan/listings/page2. htm1 。-->        <a href="page2.html">Page 2</a><!--这里会使用上面base的路径-->    </body></html>

2.3 用元数据说明文档（meta元素）

meta元素元素类型元数据允许具有的父元素 head 局部属性 name 、content 、charset和http-equiv 内容无标签用法虚元素形式是否为HTML5新增否在HTML5中的变化 charset属性是HTML5 中新增的。在HTML4 中， http-equiv属性可以有任意多个不同值。而在HTML5 中情况有所不同，只有本小节所说的值才能使用。HTML4 中的scheme属性在HTML5 中已不再使用。此外，现在已不再使用meta元素来指定网页所用的语言（本章稍后会介绍HTML5 中的做法）习惯样式无

例子：

<!DOCTYPE HTML><html><head>    <title>Example</title>    <!--1、在meta元素中用名／值对定义元数据-->    <meta name="author" content="Adam Freeman" />    <!--    供meta 元素使用的预定义元数据类型    application name    当前页所属Web应用系统的名称    author              当前页的作者名    description         当前页的说明    generator           用来生成HTML的软件名称（通常用于以Ruby on Rails 、ASP.NET等服务器端框架生成HTML页的情况下）    keywords            一批以逗号分开的字符串，用来描述页面的内容-->    <!--2、声明字符编码-->    <meta charset="utf-8" />    <!--3、模拟HTTP标头文字-->    <!--http-equiv属性的用途是指定所要模拟的标头字段名称，字段值则由content属性指定。此例    将标头字段refresh 的值设置为5, 其作用是让浏览器每隔5秒就再次载入页面。-->    <meta http-equiv="refresh" content="5" />    <!--    meta元素的http-equiv属性允许使用的值    refresh         以秒为单位指定一个时间间隔，在此时间过去之后将从服务器重新载入当前页面。也可以另行指定一个URL让浏览器载入。如<meta http-equiv="refresh" content="5" http://apress.com" />    default-style   指定页面优先使用的样式表。对应的content属性值应与同一文档中某个style元素或link元素的title属性值相同    content-type    这是另一种声明HTML页面所用字符编码的方法。如<meta http-equiv="content-type" content="text/html charset=UTF-8" />    --></head><body></body></html>

2.4 定义css样式（style元素）

style元素元素类型无允许具有的父元素任何可包含元数据元素的元素，包括head 、div 、noscript 、section 、article 、aside 局部属性 type 、media 、scoped 内容 css样式标签用法开始标签和结束标签。内含文字是否为HTML5新增否在HTML5中的变化 scoped展性为HTML5 中新增习惯样式无

例子：

<!DOCTYPE HTML> <html><head>    <title>Example</title>    <!--使用style元素指定样式    type属性指定样式类型    scoped属性指定样式作用范围（尚无主流浏览器支持style元素的scoped属性）    media属性指定样式适用的媒体-->    <style media="screen AND (max-width:500px)" type="text/css">        a {            background-color: grey;            color: white;            padding: 0.5em;        }    </style>    <style media="screen AND (min-width:500px)" type="text/css">        a {            color: Red;            font-style: italic;        }    </style>    <!--供style元素的media属性用的规定设备值    all             将样式用于所有设备（默认值）    aural           将样式用于语音合成器    braille         将样式用于盲文设备    handheld        将样式用于手持设备    projection      将样式用于投影机    print           将样式用于打印预览和打印页面时    screen          将样式用于计算机显示器屏幕    tty             将样式用于电传打字机之类的等宽设备    tv              将样式用于电视机-->    <!--供style元素的media属性使用的特性 AND（可以是NOT和OR）后面的值    width height            指定浏览器窗口的宽度和高度。单位为px, 代表像素    device-width            指定整个设备（而不仅仅是浏览器窗口）的宽度和高度。单位为px, 代表像素    device-height               resolution              指定设备的像素密度。单位为dpi ( 点瑛寸）或dpcm( 点／厘米）    orientation             指定设备的较长边朝向。支持的值有portrait和landscape。该特性没有限定词    aspect-ratio            指定浏览器窗口或整个设备的像素宽高比。其值表示为像素宽度与像素高度的比值    device-aspect-ratio    color monochrome        指定彩色或黑白设备上每个像素占用的二进制位数    color-index             指定设备所能显示的颜色数目    scan                    指定电视的扫描模式。支持的值有progressive和interlace。该特性没有限定词    grid                    指定设备的类型。网格型设备使用固定的网格显示内容，例如基于字符的终端和单行显示的寻呼机。支持的值有0和l ( l 代表网格型设备） 。该特性没有限定词--></head><body></body></html>

2.5 指定外部资源（link元素）

link元素元素类型元数据允许具有的父元素 head 、noscript 局部属性 href 、rel 、hreflang 、media 、type 、sizes 内容无标签用法虚元素形式是否为HTML5新增否在HTML5中的变化新增了sizes属性。原来的charset 、rev和target属性在HTML5 中已不再使用习惯样式无

例子：

<!--link元素的局部属性href        指定link元素指向的资源的URLhreflang    说明所关联资源使用的语言media       说明所关联的内容用于哪种设备。该属性使用的设备和特性值与《7.2.4 定义css样式（style元素）》中介绍的相同rel         说明文档与所关联资源的关系类型sizes       指定图标的大小。本章后面有一个用link元素载人网站标志的例子type        指定所关联资源的MlME类型，如text/css 、image/x-iconlink元素的rel属性值选编alternate   链接到文档的替代版本，比如另一种语言的译本author      链接到文档的作者help        链接到当前文档的说明文档icon        指定图标资源，参见下面所示license     链接到当前文档的相关许可证pingback    指定一个回探( pingback) 服务器。从其他网站链接到博客的时候它能自动得到通知prefetch    预先获取一个资源stylesheet  载入外部样式表--><!DOCTYPE HTML><html><head>    <!--用link元素载入外部样式表-->    <link rel="stylesheet" type="text/css" href="styles.css" />    <!--用link元素添加网站标志-->    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />    <!--预先获取关联的资源（只有Firefox 支持link元素的预先获取功能）-->    <link rel="prefetch" href="/page2.html" /></head><body></body></html>

3 使用脚本元素

3.1 script 元素

script元素元素类型元数据/短语允许具有的父元素可以包含元数据或短语元素的任何元素局部属性 type 、src 、defer 、async 、charset 内容脚本语言语句。用于导入外部JavaScript库时元素没有内容标签用法必须使用开始标签和结束标签。不能使用自闭合标签，就算引用外部JavaScript库也是如此是否为HTML5新增否在HTML5中的变化在HTML5中type属性可有可无， async属性是新增的， HTML中的属性language在HTML5中已不再使用习惯样式无

例子：

<!--script元素的局部属性type    表示所引用或定义的脚本的类型，对于JavaScript脚本这个属性可以省略src     指定外部脚本文件的URL, 参见后面的例子defer   设定脚本的执行方式，参见后面的例子。这两个属性只能与src属性一同使用asynccharset 说明外部脚本文件所用字符编码，该属性只能与src属性一同使用--><!DOCTYPE html><html><head>    <!--1. 定义文档内嵌脚本-->    <script>            document.write("This is from the script");    </script>    <!--2 载入外部脚本库，用src属性载入外部脚本-->    <script src="simple.js"></script>    <!--3. 推迟脚本的执行，使用带defer属性的script元素    浏览器在遇到带有defer属性的script元素时，会将脚本的加载和执行推迟到HTML文档中所有元素都已得到解析之后-->    <script defer src="simple2.js"></script>    <!--4 异步执行脚本，使用async属性    使用async属性的一个重要后果是页面中的脚本可能不再按定义它们的次序执行。因此如果    脚本使用了其他脚本中定义的函数或值，那就不宜使用async属性-->    <script async src="simple2.js"></script></head><body></body></html>

3.2 noscript元素

noscript元素元素类型元数据／短语／流允许具有的父元素任何可以包含元数据元素、短语元素或流元素的元素局部属性无内容短语元索或流元素标签用法开始标签和结束标签都需要是否为HTML5新增否在HTML5中的变化无习惯样式无

例子：

<!DOCTYPE html><html><head>    <!--使用noscript元素，当脚本被禁用时显示-->    <noscript>        <h1>Javascript is required!</h1>        <p>You cannot use this page without Javascript</p>    </noscript>    <!--用noscript元素重定向浏览器，浏览器不支持JavaScript时将其引至另一个URL-->    <noscript>        <meta http-equiv="refresh" content="0; http://www.apress.com" />    </noscript></head><body></body></html>

阅读全文

0 0