HTML学习日记_图文_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
HTML学习日记
阅读已结束，下载文档到电脑
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩8页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢5000家学校 100万学员的选择 .cn
&欢迎光临培训通
详解HTML 头标签元素的意义以及使用场景
&来源： &&&责任编辑：信息中心&&&发布时间： 16:11:14 & 浏览-次
HTML&head&头部分的标签、元素有很多，涉及到浏览器对网页的渲染，SEO 等等，而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代，head 头部结构，移动端的 meta 元素，显得更为重要。了解每个标签的意义，写出满足自己需求的 head 头标签，是本文的目的。本篇以一丝的文章为基础，进行扩展总结介绍常用的 head 中各个标签、元素的意义以及使用场景。DOCTYPEDOCTYPE(Document Type)，该声明位于文档中最前面的位置，处于 html 标签之前，此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。DTD(Document Type Definition) 声明以 &!DOCTYPE& 开始，不区分大小写，前面没有任何内容，如果有其他内容(空格除外)会使浏览器在 IE 下开启怪异模式(quirks mode)渲染网页。公共 DTD，名称格式为注册//组织//类型 标签//语言,注册指组织是否由国际标准化组织(ISO)注册，+表示是，-表示不是。组织即组织名称，如：W3C。类型一般是 DTD。标签是指定公开文本描述，即对所引用的公开文本的唯一描述性名称，后面可附带版本号。最后语言是 DTD 语言的 ISO 639 语言标识符，如：EN 表示英文，ZH 表示中文。XHTML 1.0 可声明三种 DTD 类型。分别表示严格版本，过渡版本，以及基于框架的 HTML 文档。HTML 4.01 strict1&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.01//EN& &http://www.w3.org/TR/html4/strict.dtd&&HTML 4.01 Transitional1&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.01 Transitional//EN& &http://www.w3.org/TR/html4/loose.dtd&&HTML 4.01 Frameset1&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.01 Frameset//EN& &http://www.w3.org/TR/html4/frameset.dtd&&最新 HTML5 推出更加简洁的书写，它向前向后兼容，推荐使用。1&!doctype html&在 HTML中 doctype 有两个主要目的。对文档进行有效性验证。它告诉用户代理和校验器这个文档是按照什么 DTD 写的。这个动作是被动的，每次页面加载时，浏览器并不会下载 DTD 并检查合法性，只有当手动校验页面时才启用。决定浏览器的呈现模式对于实际操作，通知浏览器读取文档时用哪种解析算法。如果没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响 html 排版布局。浏览器有三种方式解析 HTML 文档。非怪异（标准）模式怪异模式部分怪异（近乎标准）模式 关于IE浏览器的文档模式，浏览器模式，严格模式，怪异模式，DOCTYPE 标签，可详细阅读模式？标准！的内容。charset声明文档使用的字符编码1&meta&charset=&utf-8&&html5 之前网页中会这样写：1&meta&http-equiv=&Content-Type&&content=&text/ charset=utf-8&&这两个是等效的,推荐使用第一个，简洁方便。lang属性简体中文1&html&lang=&zh-cn&&英文1&html&lang=&en&&优先使用 IE 最新版本和 Chrome1&meta&http-equiv=&X-UA-Compatible&&content=&IE=edge,chrome=1&&/&360 使用Google Chrome Frame1&meta name=&renderer&&content=&webkit&&360 浏览器就会在读取到这个标签后，立即切换对应的极速核。 另外为了保险起见再加入1&meta&http-equiv=&X-UA-Compatible&&content=&IE=Edge,chrome=1&&这样写可以达到的效果是如果安装了 Google Chrome Frame，则使用 GCF 来渲染页面，如果没有安装 GCF，则使用最高版本的 IE 内核进行渲染。相关链接：浏览器内核控制 Meta 标签说明文档百度禁止转码通过百度手机打开网页时，百度可能会对你的网页进行转码，脱下你的衣服，往你的身上贴狗皮膏药的广告，为此可在 head 内添加1&meta&http-equiv=&Cache-Control&&content=&no-siteapp&&/&相关链接：SiteApp 转码声明SEO 优化部分页面标题&title&标签(head 头部必须)1&title&your title&/title&页面关键词 keywords1&meta&name=&keywords&&content=&your keywords&&页面描述内容 description1&meta&name=&description&&content=&your description&&定义网页作者 author1&meta&name=&author&&content=&author,email address&&定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。1&meta&name=&robots&&content=&index,follow&&相关链接：WEB1038 - 标记包含无效的值viewportviewport 可以让布局在移动浏览器上显示的更好。 通常会写1&meta&name=&viewport&&content=&width=device-width, initial-scale=1.0&&content 参数：width viewport 宽度(数值/device-width)height viewport 高度(数值/device-height)initial-scale 初始缩放比例maximum-scale 最大缩放比例minimum-scale 最小缩放比例user-scalable 是否允许用户缩放(yes/no)minimal-ui iOS 7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：1&meta&name=&viewport&&content=&width=device-width, initial-scale=1, minimal-ui&&而如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放1&meta&name=&viewport&&content=&width=device-width,user-scalable=yes&&适配 iPhone 6 和 iPhone 6plus 则需要写1 2&meta&name=&viewport&&content=&width=375&&&&meta&name=&viewport&content=&width=414&&大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px。ios 设备添加到主屏后的标题（iOS 6 新增）1&meta&name=&apple-mobile-web-app-title&&content=&标题&&&是否启用 WebApp 全屏模式1&meta&name=&apple-mobile-web-app-capable&&content=&yes&&/&&设置状态栏的背景颜色1&meta&name=&apple-mobile-web-app-status-bar-style&&content=&black-translucent&&/&&只有在 &apple-mobile-web-app-capable& content=&yes& 时生效content 参数：default 默认值。black 状态栏背景是黑色。black-translucent 状态栏背景是黑色半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。禁止数字识自动别为电话号码1&meta&name=&format-detection&&content=&telephone=no&&/&&iOS 图标rel 参数： apple-touch-icon 图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。 iPhone 和 iTouch，默认 57x57 像素，必须有1&link&rel=&apple-touch-icon-precomposed&&href=&/apple-touch-icon-57x57-precomposed.png&&/&iPad，72x72 像素，可以没有，但推荐有1&link&rel=&apple-touch-icon-precomposed&&sizes=&72x72&&href=&/apple-touch-icon-72x72-precomposed.png&&/&&Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有1&link&rel=&apple-touch-icon-precomposed&&sizes=&114x114&&href=&/apple-touch-icon-114x114-precomposed.png&&/&&Retina iPad，144x144 像素，可以没有，但推荐有1&link&rel=&apple-touch-icon-precomposed&&sizes=&144x144&&href=&/apple-touch-icon-144x144-precomposed.png&&/&&IOS 图标大小在iPhone 6 plus上是180×180，iPhone 6 是120x120。 适配iPhone 6 plus，则需要在中加上这段1&link&rel=&apple-touch-icon-precomposed&&sizes=&180x180&&href=&retinahd_icon.png&&iOS 启动画面官方文档：/library/ios/qa/qa1686/_index.html&iPad 的启动画面是不包括状态栏区域的。iPad 竖屏 768 x 1004（标准分辨率）1&link&rel=&apple-touch-startup-image&&sizes=&768x1004&&href=&/splash-screen-768x1004.png&/&&iPad 竖屏 （Retina）1&link&rel=&apple-touch-startup-image&&sizes=&&&href=&/splash-screen-.png&&/&&iPad 横屏 （标准分辨率）1&link&rel=&apple-touch-startup-image&&sizes=&&&href=&/Default-Portrait-.png&&/&&iPad 横屏 （Retina）1&link&rel=&apple-touch-startup-image&&sizes=&&&href=&/splash-screen-.png&&/&&iPhone 和 iPod touch 的启动画面是包含状态栏区域的。iPhone/iPod Touch 竖屏 320x480 (标准分辨率)1&link&rel=&apple-touch-startup-image&&href=&/splash-screen-320x480.png&&/&&iPhone/iPod Touch 竖屏 640x960 (Retina)1&link&rel=&apple-touch-startup-image&&sizes=&640x960&&href=&/splash-screen-640x960.png&&/&iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)1&link&rel=&apple-touch-startup-image&&sizes=&640x1136&&href=&/splash-screen-640x1136.png&/&&添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）1&meta&name=&apple-itunes-app&&content=&app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL&&&iPhone 6对应的图片大小是750×1294，iPhone 6 Plus 对应的是 。1 2 3&link&rel=&apple-touch-startup-image&&href=&launch6.png&&media=&(device-width: 375px)&&&&&link&rel=&apple-touch-startup-image&&href=&launch6plus.png&&media=&(device-width: 414px)&&Windows 8Windows 8 磁贴颜色1&meta&name=&msapplication-TileColor&&content=&#000&/&&Windows 8 磁贴图标1&meta&name=&msapplication-TileImage&&content=&icon.png&/&&rss订阅1&link&rel=&alternate&&type=&application/rss+xml&&title=&RSS&&href=&/rss.xml&&/&&favicon icon1&link&rel=&shortcut icon&&type=&image/ico&&href=&/favicon.ico&&/&&比较详细的 favicon 介绍可参考/audreyr/favicon-cheat-sheet移动端的meta1&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 29 30 31&meta&name=&viewport&&content=&width=device-width, initial-scale=1, user-scalable=no&&/&&meta&name=&apple-mobile-web-app-capable&&content=&yes&&/&&&meta&name=&apple-mobile-web-app-status-bar-style&&content=&black&&/&&&meta&name=&format-detection&content=&telephone=no, email=no&&/&&&meta&name=&viewport&content=&width=device-width, initial-scale=1, user-scalable=no&&/&&&meta&name=&apple-mobile-web-app-capable&&content=&yes&&/&&&metaname=&apple-mobile-web-app-status-bar-style&&content=&black&&/&&meta&name=&format-detection&&content=&telphone=no, email=no&&/&&&&meta&name=&renderer&content=&webkit&&&&&meta&http-equiv=&X-UA-Compatible&content=&IE=edge&&&&meta&name=&HandheldFriendly&&content=&true&&&&&metaname=&MobileOptimized&&content=&320&&&&&meta&name=&screen-orientation&&content=&portrait&&&&&meta&name=&x5-orientation&content=&portrait&&&&&meta&name=&full-screen&&content=&yes&&&&&meta&name=&x5-fullscreen&&content=&true&&&&&metaname=&browsermode&&content=&application&&&&&meta&name=&x5-page-mode&&content=&app&&&&&meta&name=&msapplication-tap-highlight&&content=&no&&&相关新闻：?????
&文章标签：&广州网页标签开头学习, 网页开头设计方法, 网页开头标签设计方法
&本地相关课程推荐：
&&综合广告
①本网注明“来源：培训通”的所有作品，版权均属于培训通，未经本网授权不得转载、摘编或利用其它方式使用上述作品。已经本网授权使用作品的，应在授权范围内使用，并注明“来源：培训通”。违反上述声明者，本网将追究其相关法律责任。
② 凡本网注明“来源：XXX（非培训通）”的作品，均转载自其它媒体，转载目的在于传递更多信息并不代表本网赞同其观点和对其真实性负责。
③ 如因作品内容、版权和其它问题需要同本网联系的，请在30日内进行。 培训通网站内容侵权处理：(请发QQ邮件)
&&热点新闻;在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
标签：至少1个，最多5个
我们初步了解了HTML和CSS，现在让我们深入挖掘HTML并了解哪些元素构成了这种语言。
建设网站前，我们需要了解什么元素适合排版什么内容。这对于理解元素如何展示在页面中以及元素的语义化都有非常重要的意义。
在工作中使用适当的元素排版需要长时间的实践，但接下来的学习中我们将会合理的使用它们。
语义化概述
究竟什么是语义化呢？HTML语义化是在页面中使用恰当的元素让内容具有意义和结构。语义化编码仅针对页面的内容而不关心内容的样式。使用语义化元素有很多的好处，包括使计算机，屏幕阅读器，搜索引擎以及其他设备充分阅读和理解页面的内容。 另外，HTML语义化也更利于管理和使用，因为它非常清晰的显示了每个内容是什么。
接下来的学习中，我们会一边介绍新元素，一边讨论这些元素的实际意义和他们最能代表的内容类型。在此之前，我们先来看一下两个元素：&div&，&span&，它们没有任何语义，仅用于排版。
辨别div和span
&div&和&span&两个HTML元素都被当做容器，仅用于页面排版。作为通用的容器，它们不具备任何意义和语义。举个例子，段落的语义化元素为&p&，用&p&包裹的内容被理解为段落；但&div&和&span&就没有这样的意义，是很纯粹的容器。
块状元素与内联元素大部分的HTML元素都可被分为块状元素或内联元素。那两者之间有什么不同呢？块状元素会另起一行，并单独占据一整行空间。块状元素可以相互嵌套，并且可以包裹内联元素。我们常用块状元素包裹大块的内容，比如段落。
行内元素不会另起一行。它们被划分为正常的文件流，一个接着一个显示，宽度之随着内容的变化而变化。内联元素之间可以相互嵌套；但是它们不可以包裹块状元素，我们常用讲内联元素用在小块的内容上，比如几句话。
&div&和&span&在建站中都非常有价值，因为它们可以将针对性的样式作用于整组被包裹的内容上。
&div&作为块状元素，常用在大块的内容，用来帮助页面的布局和设计。&span&作为内联元素，常用在块状元素中的小块内容。
我们通常会见到的&div&和&span&元素都设置了class和id属性用于调节样式。选择class和id属性的值的时候，需要注意：我们要选择一个代表元素内容的值，而不是元素要显示的样式。
举个例子来说，我们有一个包裹了社交媒体链接(social media links)内容的&div&元素，背景色要设为橙色orange。我们第一个想到的就是将class属性值设为orange。那么如果我们接下来将橙色背景换为蓝色blue呢？这个时候orange这个属性值就不再具有意义。更明智的选择就是将class属性值设为social，它代表&div&的内容，而不是样式。
&!-- Division --&
&div class="social"&
&p&I may be found on...&/p&
&p&Additionally, I have a profile on...&/p&
&!-- Span --&
&p&Soon we'll be &span class="tooltip"&writing HTML&/span& with the best of them.&/p&
HTML和CSS的注释
上述代码中有感叹号，那不是元素，而是HTML注释
HTML和CSS都可以在代码中添加注释，注释中的内容不会被展示在页面上。注释有助于我们保持代码的有序性，允许我们设置提醒，并为我们提供了一种更有效的管理代码的方法。 注释在多人编辑一份文件的时候变得非常有用。
HTML注释格式开始于&!-- 结束于 --&， CSS注释开始于/*结束于*/。
基于文本的元素
虽然线上存在着许多不同形式的媒体和内容，但文字是主要的。于是，页面中就有了许多用于排版文字的元素。现在我们将一些更常用的元素，包括标题，段落，表示重要性的粗体和用于强调的斜体。
标题都是块状元素，它们有六个等级，&h1&到&h6&。标题有助于快速分解内容并建立层次结构。它们是用户阅读页面的关键标识符。它们也有助于搜索引擎索引和分析页面的内容。
在页面中使用标题要有顺序。页面或者章节的主标题应该用&h1&元素，随后根据需要使用&h2&，&h3&，&h4&，&h5&和&h6&元素
每个等级的标题元素都应该用在适合它语义的地方，不应该单纯为了使文字加粗或变大而使用它——我们有更好的方法做到。
以下是不同等级的标题元素的示例：
&h1&Heading Level 1&/h1&
&h2&Heading Level 2&/h2&
&h3&Heading Level 3&/h3&
&h4&Heading Level 4&/h4&
&h5&Heading Level 5&/h5&
&h6&Heading Level 6&/h6&
标题后常跟着段落。段落用&p&元素来定义。段落可以一个接一个，按照需要展示在页面上。以下是段落的示例：
&p&Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.&/p&
&p&In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up&advice which he sincerely took to heart.&/p&
用strong加粗文字
加粗和强调文本，我们可以使用内联元素&strong&。我们有两个元素可以加粗文本：&strong&和&b&元素。理解它们的语义非常重要。
&strong&元素的语义是强调文本的重要性,因此它是最常用于加粗文本的元素。&b&没有特殊的语义，只是改变文本的样式，因此在突出文本重要性这个方面它不是最好的选择。我们可以根据需要选择合适的元素。
以下是用两种元素加粗文本的示例：
&!-- Strong importance --&
&p&&strong&Caution:&/strong& Falling rocks.&/p&
&!-- Stylistically offset --&
&p&This recipe calls for &b&bacon&/b& and &b&baconnaise&/b&.&/p&
用em呈现斜体
用斜体强调文本，可以使用内联元素&em&。与加粗文本一样，也有两种元素可以设置斜体，它们也有不同的语义。
&em&的语义是强调重点文本，因此它是最常用于斜体的元素。而另一个元素&i&，语义是代替语音或者有语调的文本，类似于放在引号里。我们可以根据需要选择合适的元素。
以下是斜体示例：
&!-- Stressed emphasis --&
&p&I &em&love&/em& Chicago!&/p&
&!-- Alternative voice or tone --&
&p&The name &i&Shay&/i& means a gift.&/p&
长时间以来，我们都用&div&来进行页面布局，但是&div&本身没有什么特殊的语义，确定这些div的作用会有些困难。 而现在HTML添加了很多新的结构化元素，包括&header&，&nav&，&article&，&section&，&aside&和&footer&元素。
这些新元素都是为了使我们的页面更具意义，提升结构语义。它们都是块状元素，并且没有默认样式。这些元素都可以在单页面中多次出现，当然要保证使用在符合他们语义的场景里。
以下是一个使用例子：
&header&元素
&header&听上去就知道是放在页面、文章的顶部。通常&header&内包含标题、介绍性文本和导航。
&header&...&/header&
&header& VS. &head& VS. &h1&...&h6&
&header&，&head&，&h1&...&h6&很容易让人混淆。它们都有自己的语义和使用场景：
&header&元素是一个结构元素，它包裹了页面标题、介绍性文本和导航等元素。通常在&body&元素里。
&head&元素的内容不会展示在页面里，它包裹了元数据,文档标题，以及对外部文件的引用。 它直属于&html&元素。
&h1&...&h6&是标题元素，定义了多级标题，贯穿整个页面。
&nav&元素用来表示页面的主导航。 &nav&应该只应用于主导航，例如全局导航，目录， 上一页/下一页，或其他值得注意的导航组。
&nav&通常包含超链接&a&用于链接网站的其他页面或模块。其他杂项的链接不应该用&nav&，它们单独使用&a&元素就可以了。
&nav&...&/nav&
&article&元素
&article&元素用在独立的，分布式开发的或者可复用的模块。我们常将&article&元素用在博客，新闻，用户体检内容等类似的地方。
我们想要使用&article&时，我们需要确定若这块内容复制到其他地方，是否会导致混淆。若这块内容从页面中移除，例如在邮件或者打印中，这张页面是否依旧正常有效。
&article&...&/article&
&section&元素
&section&元素用于专题组，通常(并不是所有)都会含有标题。&section&中的内容分组本质上是通用的，内容相关时非常好用。
&section&常用于分解页面，为页面建立层次。
&section&...&/section&
如何选用&article&，&section&和&div&元素
有时候我们很难确定 &article&，&section&和&div&中那个元素是最符合工作场景中的语义。小技巧是与选择其他语义元素一样，看内容。
&article&和&section&元素都有助于设置文档结构和画出文档轮廓。如果只是为了样式而分组，不涉及文档轮廓，那么就使用&div&。
如果内容涉及文档轮廓，并且能够被独立配置与合并，就使用&article&。
如果内容涉及文档轮廓，并且代表一个专题组，那么就使用&section&。
&aside&元素
&aside&元素常用于侧边栏、概述，这与它周围的内容切切相关。当它在&article&元素中，&aside&中可能显示与文章作者相关的信息。
我们可能本能的认为&aside&应该出现在页面的左右两侧。但我们需要记住，所有的结构化元素，包括&aside&都是块状元素，它们会另起一行，并占据嵌套它们的元素也就是父级元素的整行可用宽度。
&aside&...&/aside&
我们会在后面讲到怎么修改一个元素的位子，让他向左或向右布局。
&footer&元素
&footer&元素常用于页面，文章，区块或类似场景的尾部。简单的说就是&footer&元素放在父级元素的底部。&footer&元素应该显示相关的信息，不能偏离包含它的文档。
&footer&...&/footer&
随着我们对结构元素和文本元素的了解，我们的对HTML知识开始有了真正的了解。现在我们来重温一下 我们的样式讨论大会网站，看看是否能优化它的结构。
目前我们的网站缺少真正意义上的结构，内容也是。我们需要花点时间让他充实起来。
打开已存在的index.html，添加一个&header&，将已存在的&h1&元素嵌入&header&元素中；然后在&h1&元素下面再添加一个&h3&元素作为标语。
&h1&Styles Conference&/h1&
&h3&August 24&26th & Chicago, IL&/h3&
接下来，我们使用&section&元素添加一组新的内容，用以介绍我们的讨论会。先在这个区块中添加一个&h2&元素，然后将已存在的&p&元素移到&h2&元素下。
&h2&Dedicated to the Craft of Building Websites&/h2&
&p&Every year the brightest web designers and front-end developers descend on Chicago to discuss the latest technologies. Join us this August!&/p&
&/section&
在介绍了我们的讨论会之后，再添加一组新的内容，这其中包括好几块，例如演讲者介绍，计划表还有场地等。
我们将整组内容都包含在一个&section&中，然后将每一块也都分别包裹在一个&section&中，总的来说，有三个&section&元素创建在父级&section&中。
&h5&Speakers&/h5&
&h3&World-Class Speakers&/h3&
&p&Joining us from all around the world are over twenty fantastic speakers, here to share their stories.&/p&
&/section&
&/section&
最后，我们将版权信息添加在页面尾部的&footer&元素中。同时，我们可以使用&small&元素，它的语义为附加信息和附属细则——非常适合我们的版权信息。
&small&& Styles Conference&/small&
现在我们可以看到我们的主页的内容开始丰富起来。
特殊字符编码
练习中有个有趣的现象，我们的&header&元素中的&h3&元素和&footer&元素中的&small&元素都有特殊的字符。
特殊字符包括各种标点符号，带声调的字母和标志。如果直接输入到HTML中可能会导致误解和解析错误，因此它们需要编码。
每个字符编码都由&符号起头，以分号;结尾。它们中间是具有唯一性的字符串编码，无论是名字还是数字编码
例如我们将单词"resumé"编码为resum&eacute。上例中，我们的标题中有两种破折号编码，在页脚中有一个版权标志。这里有一个特殊字符编码的列表供参考：
创建超链接
与文本一样，超链接也是互联网核心要素之一，它提供了从一个页面跳转到另一个页面或资源的能力。超链接用&a&元素建立，这是一个内联元素。为了实现从一个页面到另一个页面（或资源）的跳转，需要使用href属性，这个属性被称为超链接引用。href标识了链接的目的地。
例如，点击href属性值为 的&a&元素的文本"Shay",页面将跳转到指定的网站。
&a href=""&Shay&/a&
用元素包裹块状元素
本质上&a&元素是一个内联元素。根据互联网标准,内联元素不可以嵌套块状元素。但随着HTML5的推出，&a&元素被允许包裹块状元素，内联元素以及其他各类的元素。虽然这么做打破了标准约定，但这是为了使页面中的大块内容也可以成为链接。
相对路径和绝对路径
链接最常用的两种场景是跳转到同一网站的其他页面和跳转到其他网站。这些链接都是href属性的值，也称为路径。
链接到同一网站的其他页面会存在一个相对路径，就是href属性值不包含域名(.com，.org，.edu等)。由于链接到同一网站的页面，href属性的值只需要有目标文件的文件名例如:about.html。
如果目标页面与目前的页面不在同一目录下，href属性的值也需要反应出这一点。例如about.html在pages目录下，那么相对路径就是:pages/about.html。
链接到其他的网站则要求是绝对路径，href属性的值需要有完整的域名。例如链接到谷歌Google，那么href属性的值为， 在这例子中路径由http开头，域名为.com
点击文本"About"将会在浏览器中打开about.html页面。点击文本"Google",将会在浏览器中打开/ 页面。
&!-- Relative Path --&
&a href="about.html"&About&/a&
&!-- Absolute Path --&
&a href="/"&Google&/a&
链接到Email地址
我们偶尔也会想要链接到我们的email地址。例如文本为"Email Me"的超链接，点击后会打开用户的默认email客户端，并且预设了一部分Email内容。至少填充了Email地址，也可能会有类似于标题或者文本之类的信息。
创建一个Email链接，href属性值需要由 mailto:开头，再是email地址。例如href属性值可以这么写：mailto:。
此外，也可以填充标题，正文和其他信息。添加标题需要在email地址后添加subject=参数。email地址后的第一个参数需要以问号?开头，将其绑定到超链接地址中。若有空格需要将其编码为%20。
添加正文和添加标题一样，不过使用的是body=参数。因为我们已经绑定了一个参数，所以我们需要使用&符号将两个参数隔开。和标题一样空格使用编码字符%20,换行符使用%0A。
总而言之，链接到email地址为,标题为“Reaching Out”,正文为“How are you”的链接的href属性值设置成：mailto:?subject=Reaching%20Out&body=How%20are%20you。
代码如下：
&a href="mailto:?subject=Reaching%20Out&body=How%20are%20you"&Email Me&/a&
在新窗口中打开链接
超链接有一个功能是确认在哪里打开链接。通常是在当前窗口打开链接；但我们也可以在新窗口打开它。
如果我们想在新窗口打开链接，需使用target属性，并将值设置为_blank。target属性确定链接在哪里打开，而_blank属性指向新窗口。
以下示例在新窗口打开/页面：
&a href="/" target="_blank"&Shay Howe&/a&
链接到当前页面的其他模块
有时候我们会看到跳转到当前页面其他部分的超链接。一个本页面跳转常见的功能就是“回到顶部”。
我们可以在当前页面想要跳转到的元素上设置id属性。然后将id属性的值作为超链接元素的href的值，并以#号为前缀。
还是以“回到顶部”为例，我们在&body&元素上添加id属性，值设为top；然后将链接的href属性值设置为#top，这时候点击链接就会跳转到&body&元素顶部。代码如下所示：
&body id="top"&
&a href="#top"&Back to top&/a&
链接非常有用，彻底改变了我们如何使用互联网。到目前为止，我们已经学习了怎么链接到其他页面或网站，以及如何创建email链接和在当前页面跳转。接下来我们来实践一下。
现在为我们的样式讨论会网站添加多个页面， 它们之间都会有相互跳转的链接。
我们先将 &header& 元素中的&h1&元素链接到index.html页面。虽然当前页面就是index.html，添加这个链接会觉得很奇怪，但当&header&会复制到其他页面，这个链接就会返回到index.html页面了。
&a href="index.html"&Styles Conference&/a&
为了能浏览所有的页面，我们在&header&元素中添加一个&nav&元素作为导航。我们将创建演讲者、计划表、地点、报名页面，他们都可以从主页中访问，所以我们要为它们增加链接。
&a href="index.html"&Home&/a&
&a href="speakers.html"&Speakers&/a&
&a href="schedule.html"&Schedule&/a&
&a href="venue.html"&Venue&/a&
&a href="register.html"&Register&/a&
-为了方便，我们把&header&元素中的菜单导航也添加到&footer&元素中。
&a href="index.html"&Home&/a&
&a href="speakers.html"&Speakers&/a&
&a href="schedule.html"&Schedule&/a&
&a href="venue.html"&Venue&/a&
&a href="register.html"&Register&/a&
在介绍我们讨论会的&section&元素中，我们应该增加一个报名链接。放在介绍文字下方是很好的选择。
&a href="register.html"&Register Now&/a&
&/section&
我们也需要在所有指向这些页面的区块上添加链接。我们用&a&元素将每个区块的&h3&元素和&h5&元素包裹起来并添加相关页面的链接。
&section&html
&a href="speakers.html"&
&h5&Speakers&/h5&
&h3&World-Class Speakers&/h3&
&p&Joining us from all around the world are over twenty fantastic speakers, here to share their stories.&/p&
&/section&
&/section&
现在我们需要创建一些新页面：speakers.html，schedule.html，venue.html和register.html页面。这些页面和index.html在同一文件夹中，这样我们之前添加的链接就有效了。为了让所有页面看起来相同，我们要确保所有的页面的结构，&header&元素和&footer&元素都与index.html这页面一致。
以下是最终结果，网站不再只有一个页面，而是一个多页面的完整的网站。
演示源代码
这是练习的源代码。
我们在这节课中讨论了语义化，这对HTML的结构和意义非常重要。接下来我们也介绍了一些具有语义的HTML元素。这些元素使我们的内容更具价值。
我们这节课所学内容概括如下：
什么是语义化元素以及它们的重要性
&div&，&span& 以及 块状元素和内联元素的区别
哪些基于文本的元素最能表现文本意义
HTML5的结构化元素以及怎么使我们的页面具有结构和组织
怎么使用超链接跳转不同的页面和网站
到此，希望你对HTML有一个不错的印象。虽然还有很多知识要学，但是已经打好了基础。 接下来我们要更深入的学习CSS。
0 收藏&&|&&1
你可能感兴趣的文章
33 收藏，2.6k
3 收藏，1.5k
分享到微博？
我要该，理由是：