发表Web1 小时读完 (大约8756个字)

HTML5 概览

学习HTML 5 与 CSS 过程中的的基础知识的概要总结。

网页的构造块

尽管网页变得越来越复杂，但是构成它的低层结构依旧十分简单，归纳起来，一个网页主要包括三个部分：

  • 文本内容 - 页面内容纯文字
  • 对其它文件的引用 - 如对文件、音视频文件、样式表和 JavaScript 文件的应用
  • 标记 - 描述文本并确保引用正确工作

以上内容都仅由文本构成，因此网页可以保存为纯文本格式。以下是一个基本的 HTML 页面 ：

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title> This is a simle html page </title>
    </head>
    <body>
    </body>
</html>

​

标签 ：元素、属性、值及其它

  • 元素 ：大多数元素既包含文本，也包含其它元素

    1
    2
    3
    4
    // 习惯上，标签采用小写字母
    <em>content</em>
    // 空元素既不包含文本也不包含其它元素，比如 img
    <img src="img.jpg" width="300" height="300" alt="img" />

  • 属性和值 ：属性包含了元素的额外信息（尽量使用小写字母来编写属性的名称），有的属性可以接受任何值，但是最常见的还是仅接受预定义值的属性

    1
    <em property-name=property-value ··· ></em>

    元素可以有多个属性，每个属性都有自己的值，属性的排列顺序并不重要，它们之间用空格隔开。

    布尔属性的值时可选的，因为只要这种属性只要出现就表示其值为真

    1
    <input type="email" name="emailaddr" required />

  • 父元素和子元素 ：如果一个元素包含另一个元素，它就是被包含元素的父元素。

​

网页的文本内容

元素中包含的文本可能是网页上最基本的成分，不过，当浏览器呈现HTML时，会把文本中的多个空格或者制表符压缩成单个空格，把回车符和换行符转换成单个空格或者直接忽略。

​

链接、图像和其它非文本内容

网页上的图像、视频、音乐等外部文件实际上并没有放在HTML文件中，而是单独保存的，页面只是简单地引用了这些文件。

​

文件名和文件夹名

在我们开始写一个html文件之前，需要知道如何命名文件和文件夹才能更加有助于组织文件、使访问者更容易找到并访问你的页面，确保它们的浏览器能够正确地处理页面，以及增强搜索引擎优化。

  1. 文件名采用小写字母
  2. 使用正确的扩展名
  3. 用段横线分割单词

​

URL

URL即 Uniform Resource Locator，统一资源定位符，它包含了关于文件存储位置和浏览器应该如何处理它的信息。

互联网上的每个文件都有唯一的URL。

1
2
3
4
5
6
// 第一部分称为模式，浏览器如何处理需要打开的文件，最常见的模式是HTTP、ftp、mailto
// 第二部分是文件所在的主机名称
// 第三部分是路径，路径包含了到达这个文件的文件夹以及文件自身的名称
"http://www.site.com/home/index.html"
"ftp://ftp.site.com/pub/proposal.pdf"
"mailto:somename@somedomain.com"

有时，URL路径不以文件名结尾，而以一个目录结尾，在这种情况下，URL值得是路径中最后一个目录中的默认文件，通常为index.html。

URL可以使绝对的，也可以是相对的。绝对URL包含了指向目录或文件的完整信息，包括模式、主机名和路径。而相对URL则以自身的位置为参考点，描述文件的位置。

相对URL可以

  • 引用同一目录下的文件

    如果目标文件与当前页面在同一个目录中，那么这个文件就只有文件名和扩展名

  • 引用子目录下的文件

    如果目标文件在当前目录的子目录中，则相对 URL 为 “子目录名/文件名+扩展名”

  • 引用上层目录的文件

    目标文件在当前目录的父目录中，则 “../文件名+扩展名”

​

基本HTML结构

每个HTML文档都应该包含以下基本成分

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>		// 声明页面为HTML5文档
<html lang="en">	// lang="en" 指定页面内容的默认语言
    <head>
        <meta charset="utf-8" />	// charset="utf-8" 声明文档的字符编码
        <title></title>				// 页面的标题
    </head>
    <body>
    
    </body>
</html>

在文档的head部分，通常要致命页面标题，提供为搜索引擎准备的关于页面本身的信息，加载样式表，以及加载 JavaScript 文件（通常处于性能考虑，大多数时候在页面底部 </body> 结束后才加载 JavaScript）。

​

页面标题

每一个HTML页面都必须有一个title 元素，标题应该是简短的、描述性的，而且是唯一的。页面标题通常是搜索引擎的搜索结果中链接的文字，它是判断搜索结果这种页面相关度的重要因素。

值得注意的是，标题中不能包含任何格式、HTML、图像或指向其它页面的链接。

分级标题

HTML中有六级标题用于创建页面信息的层级关系，使用好h1、h2 ··· h6 来表示。

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>		
<html lang="en">	
    <head>
        <meta charset="utf-8" />	
        <title>分级标题</title>			
    </head>
    <body>
    	<h1> 第一级标题 </h1>
        <h2 lang="es"> 第二级标题 </h2>
    </body>
</html>

对于任何页面来说，分级标题都可以说是最重要的HTML元素，由于标题通常传达的是页面的主题，如果这些标题与搜索词匹配，就会被搜索引擎赋予很高的权重。

创建分级标题时，要避免跳过某些级别，尽管这样做是可以的。

​

创建页眉

一个页面可以有任意数量的header元素，它们的含义可以根据其上下文而有所不同，处于页面顶端的或接近这个位置的header是整个页面的页眉。通常，页眉包裹网站标志、主导航和其它全站链接。

1
2
3
4
5
6
7
8
9
10
···
<body>
    <header role="banner">	// 可选的 role=“banner” 显式的指出该页眉为页面级别的页眉
    	<nav>
            <ul>
                <li></li>
            </ul>
        </nav>
    </header>
</body>

header 也很适合对页面深处的一组介绍性或导航型内容进行标记，但是，你需要只在必要的时候才使用header，大多数情况下使用 h1 ~ h6 就能满足要求。而且需要注意的是，header 与 h1 ~ h6 元素中的标题是不能互换的，它们都有各自的语意目的。

不能在 header 里嵌套 footer 元素或另一个 header，也不能在 footer 或 address 元素里嵌套 header。

​

标记导航

HTML的早期版本中没有元素明确表示主导航链接的区域，在HTML5中引入了 nav 元素来表示。nav 中的链接可以指向页面中的内容。但应仅对文档中重要的链接群使用 nav。

1
2
3
4
5
6
7
8
9
10
···
<body>
    <header role="banner">
    	<nav role="navigation">
            <ul>
                <li></li>
            </ul>
        </nav>
    </header>
</body>

需要注意的是，nav 元素不会对其内容添加任何默认样式。

HTML5 规范不推荐对辅助性的页脚链接使用 nav，而且也不允许 nav 嵌套在 address 元素中。

​

标记页面的主要区域

大多数网页都有一些不同的区域，如页眉、页脚、包含额外信息的附注栏、指向其它网站的链接等等，不过一个页面只有一个部分代表其主要内容，可以将这样的内容放在 main 元素中，该元素在一个页面中仅使用一次。main 元素是HTML5中新添加的元素。

1
2
3
4
5
<body>
    <main role="main">
        // 页面的主要内容
	</main>
</body>

与 p、header、footer 等元素一样，main 元素的内容显示在新的一行，除此之外不会影响页面的任何样式。

如果创建的是 Web 应用，则应使用 main 包围其主要的功能。

不能将 main 放置在 article、aside、footer、header 或 nav 元素中。

​

创建文章

HTML5 的另一个新元素 article ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
···
<body>
    <header>
    	<nav role="banner">
            // 包含多个链接的导航
        </nav>
    </header>
    <main role="main">
    	<article>
            <h1> ··· </h1>
            <p> ··· </p>
            <p> ··· </p
                ···
        </article>
    </main>
</body>

在HTML5 中，article 并不仅仅用于包含像报纸文章一样的内容，钙元素的严格定义如下

​ articile 元素表示文档、页面、应用或网站中一个独立容器，原则上是可独立分配或可再用的，就像聚合内容中的各部分。

​

定义区块

HTML5 中的新元素 section ，用来代表文档或应用中的一个一般区块。在这里，section 是具有相似主题的一组内容，通常包含一个标题。

尽管将 section 定义为 ‘通常的’ 区块，但是不要将它与 div 元素混淆。从语义上讲，section 标记的是页面中的特定区域，而 div 则不传达任何语义。

如果只是出于添加样式的原因要对内容添加一个容器，应使用 div 而不是 section。

可以将 section 嵌套在 article 里，从而显式地标出报告、故事、手册等文章中的不同部分或不同章节。

​

指定附注栏

有时候，页面中有一部分内容与主体内容相关性没有那么强，可以独立存在，则可以使用 aside 元素来标记它们。

使用 aside 的例子还包括重要引述、侧栏、指向相关文章的一组链接、广告、nav 元素组等。

在HTML中，应该将附注栏内容放在 main 的内容之后，处于 SEO 和可访问性的目的，最好将重要的内容放在前面，你可以通过 CSS 来改变它们在浏览器中的显示顺序。

对于与内容有关的图像，使用 figure 而非 aside。

HTML5 不允许将 aside 元素嵌套在 address 元素中。

​

创建页脚

元素 footer 同 header 一样，不仅仅只能用在页面底部标记页脚，还可以用在其它地方。footer 元素代表嵌套它的最近的 article、aside、blockquote、body、details、fieldset、figure、nav、section 或 td 元素的页脚。

如果一个 footer 抱着它所在区块的所有内容，它代表的是像附录、索引、版权页、许可协议这样的内容。

不能在 footer 里嵌套 header 或另一个 footer，同时，也不能将 footer 嵌套在 header 或 address 元素里。

​

创建通用容器

有时候需要在一段内容外围包一个容器，从而可以为其应用 CSS 样式或 JavaScript 效果，div 是一个完全没有任何语义含义的容器，是一个通用容器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
... 
<body> 
    <div>
	<header role="banner"> 
        <nav role="navigation">
			... [包含多个链接的无序列表] ... 
        </nav>
	</header>
        
	<main role="main"> <article>
		<h1 id="gaudi">Barcelona's ➝ Architect</h1>
		... [文章的其余内容] ...
		<h2 id="sagrada-familia" lang="es"> ➝La Sagrada Família</h2>
		... [图像和段落] ...
		<h2 id="park-guell">Park Guell</h2>
		... [另一个图像和段落] ... </article>
	</main>
	<aside role="complementary"> 
        <h1>Architectural Wonders of ➝ Barcelona</h1>
		... [aside的其余内容] ...
	</aside>
        
	<footer role="contentinfo"> 
        <p><small>&copy; Copyright All About ➝ Gaudí</small></p>
	</footer>
	</div>
</body> 
</html>

值得注意的是，div 元素自身没有任何默认样式，知识器其包含的内容从新的一行开始，不过我们可以对 div 添加样式实现自己的设计。div 对使用 JavaScript 实现一些特定的交互行为或效果也是有帮助的。

尽管始终强调 HTML 用于对内容的含义进行描述，但 div 并不是唯一没有语义价值的元素。span 是与 div 对应的一个元素: div 是块级内容的无语义容器，而 span (写作 这里是内容 )则是短语内容的无语义容器，例如它可以放在段落元素 p 之内。

​

使用ARIA改善可访问性

WAI-ARIA（Web Accessibility Initiative’s Accessible Rich Internet Applications），无障碍网页倡议，无障碍的富互联网应用。ARIA 是一种技术规范，在HTML 提供相应的语义功能之前，它会使用属性来填补一些语义上的空白。

无障碍访问的意义是让所有的访问者都能获取网站的内容。在大多数情况下，让页面具有无障碍访问的功能并不难。只需对内容使用恰当的 HTML 进行标记，就能改进网站的可访问性。

地标角色

ARIA 中的地标角色可以帮用户识别页面区域，对这些区域指定 role 属性就可以了。

地标角色 如何使用及何时使用
role=”main” ：文档的主要内容 与 main 元素是对应关系。最好将其添加到 main 元素，也可以添加到其它表示主体内容的元素，在买个页面只使用一次。
role=”complementary” : 补充性内容 与 aside 元素是对应关系。应将其添加到 aside 或 仅含补充性内容的 div 元素。与 nav 元素是对应关系。
role=”contentinfo” : 内容信息 将其添加至整个页面的页脚，通常为 footer 元素，每个页面仅使用一次。
role=”navigation” : 导航 应将其添加到每个 nav 元素，或其它包含导航型链接的容器。
role=”banner” : 横幅 将其添加到页面级的 header 元素，每个页面只使用一次

即便不适用 ARIA 地标角色，页面看起来也没有任何差别，但是使用它们可以提升使用辅助设备的用户的体验。

​

为元素指定类别或 ID 名称

可以给 HTML 元素分配唯一的标识符，或指定其属于某个类别，或同时使用标识符和类别。添加 ID 和类别后，就可以对具有给定 ID 或 class 名称的元素添加样式、创建指向具有特定 id 的元素的链接或使用 JavaScript 获取 id 和 class 属性从而对元素添加特定的行为。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
···
<body>
    <div class="container">		// 如果要制定多个类别，用空格将不通过的分类名称分开即可
        <header role="banner">
            <nav role="navigation">
            </nav>
        </header>
        
        <main role="main">
            <article class="architect gaudi">
                <h1 id="gaudi"></h1>	// id 几乎可以使任何字符，只要不以数字开头且不包含空格。
                <h2 id="sagrada-familia"></h2>
            </article>
        </main>
    </div>
</body>

为一个或多个元素添加 class 属性，就可以对所有这类元素统一进行格式化。

HTML 文档中的每个 id 都必须是唯一的，并且每个元素都只能有一个 id。与此相反的是，一个 class 名称可以分配给页面中任意数量的元素，并且一个元素可以有一个以上的 class。

建议你无论打算如何使用 id 和 class，都应该为它们选择有意义的名称。

​

为元素添加 title 属性

可以使用 title 属性为网站上任何部分加上提示标签，不过用的最多的是链接。

1
2
3
4
···
<ul title="table of contents">
    
</ul>

添加了 title 属性的元素，在用户将访问者将鼠标移到该元素上时，会提示该 title。

​

添加注释

可以在 HTML 文档中添加注释，表明区块开始和结束的位置，提示某段代码的意图，或者阻止内容显示等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
...
<!-- ==== 开始主体内容 ==== --> 
<main role="main">
	<article class="architect">
		<h1 id="gaudi">Barcelona's Architect</h1>
	    <!-- 这一段不会显示出来，因为它被注释掉了
		<p>Antoni Gaudí's incredible buildings bring millions of tourists to Barcelona each year. </p>
		-->
		<p>Gaudí's non-conformity, already visible in his teenage years
            ...
        </p>
        ...
	</article> 
</main>
<!-- 结束主体内容 -->
<!-- ==== 开始附注栏 ==== --> 
... [附注栏内容] ...
<!-- 结束附注栏 -->
...

注释是不可见的，如果将一些内容注释掉，它们将不会显示出来。

在主要区块的开头和结尾添加注释是一种常见的做法，可以让你或和你一起合作开发的人员将来修改代码变的更加容易。

注释不能嵌套在其它注释里。

​

文本

除非网站添加了太多视频和图片，否则网页的大部分内容还是文本，针对不同的文本类型，选择不同的 HTML 语义化元素是非常重要的一项能力。

内容显示的样子与其使用的标记是没有关系的，为内容添加样式可以用 CSS 来做。

添加段落

HTML 会忽略你在文本编辑器中输入的回车符和其它额外的空格，所以要在网页中开始一个新的段落，应使用 p 元素。

1
2
3
4
5
6
7
···
<body>
    <h1></h1>
    <p>
        content 
    </p>
</body>

默认情况下，浏览器会在标题和段落之间，以及不同的段落之间添加垂直间距。使用 CSS 可以控制所有内容元素的格式

​

指定细则

HTML5 中，small 表示细则一类的旁注，通常包括免责声明、注意事项、法律限制、版权信息等。small 通常是行内文本中的一小块，而不是包含多个段落或其它元素的大块文本。

1
2
3
4
5
6
7
···
<body>
    <h1></h1>
    <p>
        <small> some restrications </small>
    </p>
</body>

用 small 标记页面的版权信息时一种常见的做法。不过，small 只适用于短语，不宜用于标记长的的法律声明。

​

标记主要和强调的文本

我们一般用 strong 元素表示内容的重要性，而 em 则表示内容的着重点。根据内容需要，这两个元素既可以单独使用，也可以一起使用。

1
2
3
4
5
6
7
···
<body>
    <h1></h1>
    <p>
        <strong> <em></em> </strong>
    </p>
</body>

浏览器通常将 strong 文本用粗体显示，而将 em 文本以斜体显示。如果 em 是 strong 的子元素，将同时以斜体和粗体显示文本。

不要用 b 元素代替 strong，也不要用 i 元素代替 em。尽管它们在浏览器中显示的样式是一样的，但是它们的含义却很不一样。

可以在标记为 strong 的短语中再嵌套 strong 文本。如果这样做，作为另一个 strong 元素的子元素的 strong 文本的重要程度会递增。这种规则对嵌套在另一个 em 里的 em 文本也适用。

HTML 5 强调元素的语义，而非表现。b 和 i 元素是早期 HTML 遗留下的产物，它们分别用于将文本变为粗体和斜体。

HTML 5 将 b 重新定义为出于实用目的提醒读者注意的一块文字，不传达任何额外的重要性，也不表示其它的语态和语气，用于文档摘要中的关键词、评论中的产品名等。

HTML 5 将 i 重新定义为表示一块不同于其它文字的文字，具有不同的语态和语气，或其它不同于常规之处，用于如分类名称、技术术语、外语里的惯用语等。

​

创建图

在 HTML 5 之前，并没有专门实现图的元素，开发人员通常会使用不那么理想的 div 元素来实现。通过引入 figure 和 figcaption，HTML 5 改变了这种情况。图可以是图表、照片、图形、插图、代码片段以及其它类似的独立内容。

1
2
3
4
5
6
7
8
9
···
<body>
    <h1> ···</h1>
    <p> ··· </p>
    <figure>
    	<figcaption></figcaption> // figcaption 是 figure 的标题，可选，出现在 figure 内容的开头或结尾
        <img src="chart-revenue.png" width="180" height="180" alt="Revenue chart: Clothing 42%, Toys 36%, Food 22%" />
    </figure>
</body>

需要注意的是，figcaption 元素并不是必需的，但如果包含它，它就必须是 figure 元素内嵌的第一个或最后一个元素。figure 通常情况下包含在 article 中。

​

指明引用或参考

使用 cite 元素可以指明对某内容源的引用或参考。

1
2
3
4
5
6
···
<body>
    <p>
        <city lang="it"> ··· </city>
    </p>
</body>

对于要从引用来源中引述内容的情况，使用 blockquote 或 q 元素标记因数的文本。cite 只是用于参考源本身，而不是从中引述的内容。

HTML 5 中，不应使用 cite 作为对人名的引用，但在 HTML 以前的版本中允许这样做。

​

引述文本

有两个特殊的元素用以标记引述的文本。blockquote 元素表示单独存在的引述，通常更长，但也可能不是，它默认显示在新的一行。而 q 则用于短的引述，如句子里面的引述。

1
2
3
4
5
<p>
    <blockquote cite="引用源">
        content
	</blockquote>
</p>

浏览器默认对 blockquote 文本进行缩进，cite 属性值则并不会显示出来。

如果 blockquote 中仅包含一个单独的段落或短语，可以不必将其包在 p 中再放入 blockquote。

1
2
3
4
<p>
    <q> ··· </q>
	<q lang="fr"> ··· </q>
</p>

如果引述文本的语言与页面默认语言不同，就在 q 元素中添加 lang 属性。

浏览器应对 q 元素中的文本自动加上特定语言的引号，不同的浏览器效果不同。

注意，q 元素引用的内容不能跨越不同的段落，在这种情况下应该使用 blockquote。

​

指定时间

HTML 5 中使用 time 元素标记时间、日期或时间段，time 是HTML 5 新增的元素。

1
2
3
4
<time>08:45</time>
<time datetime="2018-05-24T10:00:00"></time>
<time datetime="03-29"></time>
<time datetime="2h 30m"></time>

元素 time 中包含的文本内容会出现在屏幕上，对用户可见，而可选的 datetime 属性则是为机器准备的。该属性需要遵循特定的格式。

如果忽略了 datetime 属性，文本内容就必须是合法的日期或时间格式。datetime 属性不会单独产生任何效果，但它可以用于 Web 应用之间同步日期和时间。

需要注意的是，不能在 time 元素中嵌套另一个 time 元素，也不能在没有 datetime 属性的 time 元素中包含其它元素。

理解有效的时间格式

属性 datetime 或没有 datetime 属性的 time 元素，必须提供特定的机器可读格式的日期和时间。

常用的如 YYYY-MM-DDThh:mm:ss ，这种格式如果包含时间，秒是可选的。

如果需要提供毫秒数，则格式为 hh:mm:sss。

如果要表示时间段，最简单的语法为：nh nm ns。

全球日期和时间及时间差

在格式 YYYY-MM-DDThh:mm:ss 末尾加上字母 Z，就成了 UTC。

UTC 是主要的全球时间标准，可以通过相对 UTC 时差的方式表示时间。这时不写字母 Z，写上 ‘-’ 或 ‘+’及时差即可，比如：

1985-11-02T17:19:00-02:30

​

解释缩写词

使用 abbr 元素标记缩写词并解释其含义，但是不必对每个缩写词都使用 addr，只在需要帮助访问者了解改词含义的时候使用。

1
2
<abbr title="National Football League">NFL</abbr>
<abbr title="light amplicfication by stimulated emission of radiation">laser</abbr>

使用可选的 title 属性提供缩写词的全程。灵位，也可以将全称放在缩写词后面的括号里。

通常，仅在缩写词第一次出现在屏幕上时给出其全称。

​

定义术语

在 HTML 中定义术语时，可以使用 dfn 元素对其做语义上的区分。仅用 dfn 包围要定义的术语，而不是包围定义。

1
2
3
<p>
    <dfn> ··· </dfn>
</p>

通常，dfn 元素默认以斜体显示。在是当的情况下可以包住其它短语元素。

如果在 dfn 中添加了可选的 title 属性，其值应与 dfn 术语一致。

​

创建上标和下标

比主体文本稍高或稍低的字母或数字分别称为上标和下标。HTML 中包含用来定义这两种文本的元素。

1
2
<sub> ··· </sub>	//下标
<sup> ··· </sup>	//上标

上标和下标字符会轻微地扰乱行与行之间均匀的间距。不过我们可以使用 CSS 解决这个问题。

​

添加作者联系信息

实际上，address 元素是用以定义与 HTML 页面或页面的一部分有关的作者、相关人士或组织的联系信息，通常位于页面底部或相关部分内。至于 address 具体表示的是哪一种信息，取决于该元素出现的位置。

如果要为一个 article 提供作者联系信息，就将光标放在该元素内。如果要提供整个页面的作者联系信息，就将光标放在 body 中(更常 见的做法是放在页面级的 footer 里) 。

1
2
3
4
5
6
7
8
<footer role="contentinfo">
    <p>
        <small>&copy;2014 The MrSilent Inc</small>
    </p>
    <address>
        Have a question or comment about the site? <a href="feedback.html">Contact us</a>
    </address>
</footer>

​

标注编辑和不再准确的文本

有时可能需要将在前一个版本之后对页面内容的编辑标出来，或者对不再准确、不再相关的文本进行标记。有两种用于标注编辑的元素:代表添加内容的 ins 元素和标 记已删除内容的 del 元素。这两个元素既可以单独使用，也 可以一起使用。

del 和 ins 都支持两个属性 : cite 和 datetime。

cite 属性(区别于 cite 元素)用 于提供一个 URL，指向说明编辑原因的页面。

datetime 属性提供编辑的时间。 

1
2
3
4
5
6
<p>
    <ul>
        <li><del></del></li>
        <li><ins></ins></li>
	</ul>
</p>

同时，s 元素用以标注不再准确或不再相关的内容。

​

标记代码

如果你的内容包含代码示例或文件名，就可以使 用 code 元素 。

1
2
3
<p>
    <code></code>
</p>

code 元素表示其中的文本是代码或文件名，如果你的代码需要显示 < 或 >，应分别使用 &lt；和 &gt；

而如果显示单独的一块代码，则用 pre 元素保住 code 元素以维持其格式。

1
2
3
4
5
6
<p>
    <pre>
    	<code>
    	</code>
    </pre>
</p>

​

使用预格式化的文本

通常，浏览器会将所有额外的回车和空格压缩，并根据窗口的大小自动换行。预格式化的文本可以保持文本固有的换行和空格。 它是计算机代码示例的理想元素，不过你也可以将它用于文本 。

1
2
3
4
<pre>
    	<code>
    	</code>
</pre>

对包含重要的空格和换行的文本，pre 元素是非常合适的，因为 pre 内容里的缩进和换行都被保留了。

预格式化的文本通常以等宽字体显示。

​

突出显示文本

HTML 5 使用 mark 元素实现对特定词语的突出显示。

可以用 CSS 对 mark 元素里的文字应用样式。

1
2
3
4
5
6
7
<pre>
	<code>
    <mark>.greenText</mark> {
    	color:green;
    }
	</code>
</pre>

​

创建换行

浏览器会根据包含内容的块或窗口的宽 度让文本自动换行。大多数情况下，让内容像这样充满整行是很合适的，但有时你希望 手动地强制文字进行换行。可以使用 br 元素 实现这一要求。

要确保使用 br 是最后的选择，因为该元素将表现样式带入了 HTML，而不是让所有呈现样式都交由 CSS 控制。

1
2
       
<br />

创建 span

同 div 一样，span 元素是没有任何语义的。 不同的是，span 只适合包围字词或短语内容， 而 div 适合包含块级内容。

由于 span 没有任何语义，因此应将它作为最后的选择，仅在没有其他合适的元素时才使用它。

​

图像

当前 Web 上使用最广泛的三种图片格式是 GIF、PNG 和 JPEG。

JPEG 格式适用于彩色照片，因为它包含了大量颜色并进行了合理的压缩，采用这种格式保存的文件相对较小。不过，JPEG 是一种有损格式，在将图像保存为 JPEG 时会丢失一部分原始信息。

PNG 和 GIF 是无损的格式，采用这两种格式对图像进行压缩不会造成品质的损失。相对于 JPEG ，PNG 和 GIF 保存的图像的文件尺寸会大很多。因此，只有在压缩造成的质量损失不可忽略的情况下才使用 PNG 保存照片。

一般来说，如果要选择使用无损格式的图片，那么 PNG 应是优先的选择，因为它对透明度的支持更好，压缩算法也更好，产生的文件更小。

JPEG/PNG-24/PNG-32 均支持超过1600万众的颜色，而 GIF 和 PNG-8 只支持 256 中颜色，所以标识和其它颜色较少的图像通常保存为 PNG-8 格式，而照片和颜色复杂的插图等则应选择支持颜色较多的格式。

​

在页面中插入图像

可以在网页中放置各种各样的图像，从标志到照片都可以。当访问者浏览网页时，浏览器会自动加载像在 HTML 文档中描述的图像。不过， 图像加载时间跟访问者的网络连接强度、图像尺寸，以及页面中包含的图像个数相关。 

1
<img src="corner-market.jpg" />

在实践中，为了保持良好的文件组织结构，通常将图像保存在单独的文件夹中。

​

提供替代文本

使用 alt 属性，可以为图像添加一段描述性文本，当图像因为某种原因不显示的时候，就将这段文字显示出来。HTML5 规范推荐将 alt 文本理解为图像的替代性描述 : “一般来说，替代文本是考虑图像未能正常加载的情况下需要呈现 文字。”通常，这意味着 alt 文本可以插入到图像两侧的文本流中，在大多数情况下， 它不应是对图像的描述。 

1
<img src="market.jpg" alt="somen description text" />

如果图像对内容的价值较小，则可以提供空的替代文 本，即 alt=””。

如果图像与邻近的文本表达的信息相似，也可以将 alt 属性留空。

如果图像是页面设计的一部分，而不是内容的一部分，则应使用 CSS background-image 属性引入该图像，而不是使用 img 标记。

​

指定图像尺寸

通常我们会在 HTML 中明确指定图像的高度和宽度，这样浏览器就不必花时间来判断图像的尺寸，从而更快地将图像显示出来。 而且指定图像的尺寸，浏览器就可以预留空间，在图像加载的同时让文本显示在周围，保持布局的稳定。

可以通过浏览器或图像编辑软件获取图像的精确尺寸。

1
<img src="market.jpg" width="300" height="300" />

​

链接

链接有两个主要的部分:目标和标签。

使用目标(destination)可以指定访问者点击链接时会发生什么。可以创建链接进入另一个页面、在页面内跳转、显示图像、下载文件、 呼叫电话等等。不过，最常见的是连接到其他网页的链接，其次是连接到其他网页特定位置(称为锚，anchor)的链接。目标是通过编写 URL 定义的，通常只能在(桌面)浏览器的状态栏中看到。

链接的第二个部分是标签(label)，即访问者在浏览器中看到或在屏幕阅读器中听到的部分。激活标签就可以到达链接的目标。 例如，航空公司网站上可能有这样的链接标 签:预订航班。标签可以是文本、图像或二者兼有。浏览器通常会将标签文本默认显示为带下划线的蓝色文字。

指向网页的链接

1
<a href="https://www.google.com" rel="external">Search with Google</a>

当要连接的页面与当前页面在同一目录下时，只需文件名即可进行访问。

rel 属性是可选的，它用来描述包含链接的页面和链接指向的页面之间的关系。

HTML 块级链接

HTML 5 几乎允许在链接内包含任何类型的元素或元素组。

1
2
3
4
5
6
<a href="giraffe-escapes.html">
	<p>
        ···
    </p>
    <p>Read more</p>
</a>

​

创建锚并链接到锚

通常，激活一个链接会将用户带到对应网页的顶端。如果要想用户跳至网页的特定区域，可以创建一个锚，并在链接中引用该锚 。

首先你需要在目标网页中创建一个锚

1
2
3
4
<!-- https://www.site.com/home.html -->
<p id="anchro-name">
 	···   
</p>

创建链接到特定锚的链接

1
<a href="https://www.site.com/home.html#anchor-name"></a>

如果锚位于页面的底部，且它下面的内容的高度小于浏览器的可视区域的高度， 那么它可能不会显示在窗口的顶部，而是显 示在中间。

​

其它类型的链接

并非只能创建指向其他网页的链接，其实可以创建指向任何 URL 的链接——RSS 源、 图像、希望访问者可以下载的文件、电子邮 件地址、电话号码等 。

1
2
3
4
5
<a href="img/market.jpg"> 链接到图片 </a>
<a href="media/song.mp3"> 链接到音频 </a>
<a href="media/movie.mp4"> 链接到视频 </a>
<a href="mailto:someone@somedomain.com"> 链接到邮箱地址 </a>
<a href="tel:+18002134567"> 链接到电话 </a>

对于指向万维网上任何文件(包括图像、 ZIP 文件、程序、PDF 及其他等)的链接，输 入 http://www.site.com/dir/file.ext， 其 中 www.site.com 是主机名称，dir/file.ext 是目标文件的路径。后者包括了文件目录和文件名(以及扩展名)。

对于电子邮件地址，输入 mailto:name@domain.com(不以 http:// 开头)，其中 name@domain.com 是电子邮件地址。

对于电话号码，输入 tel:+(不以 http:// 开头)并紧跟着国家代码和电话号码(所有的号码中都不必包含短横线)。

如果链接指向的文件是浏览器不知道如何处理的类型(例如 Excel 文件)，浏览器将试着打开一个辅助程序来查看这个文件，或试着将它下载到访问者的磁盘上。

HTML5 概览

https://cocoalei.github.io/blogs/2016/03/05/html-css-summary-basic/

作者

Y2hlbmdsZWk=

发布于

2016-03-05

更新于

2021-09-01

许可协议

归档

分类

最新文章

标签

Git1
GoLang3
JavaScript12
Web3
×