摘要：块状元素可以相互嵌套，并且可以包裹内联元素。内联元素之间可以相互嵌套但是它们不可以包裹块状元素，我们常用讲内联元素用在小块的内容上，比如几句话。
我们初步了解了HTML和CSS，现在让我们深入挖掘HTML并了解哪些元素构成了这种语言。
建设网站前，我们需要了解什么元素适合排版什么内容。这对于理解元素如何展示在页面中以及元素的语义化都有非常重要的意义。
在工作中使用适当的元素排版需要长时间的实践，但接下来的学习中我们将会合理的使用它们。
语义化概述究竟什么是语义化呢？HTML语义化是在页面中使用恰当的元素让内容具有意义和结构。语义化编码仅针对页面的内容而不关心内容的样式。使用语义化元素有很多的好处，包括使计算机，屏幕阅读器，搜索引擎以及其他设备充分阅读和理解页面的内容。 另外，HTML语义化也更利于管理和使用，因为它非常清晰的显示了每个内容是什么。
接下来的学习中，我们会一边介绍新元素，一边讨论这些元素的实际意义和他们最能代表的内容类型。在此之前，我们先来看一下两个元素： ，用 包裹的内容被理解为段落；但 块状元素与内联元素 行内元素不会另起一行。它们被划分为正常的文件流，一个接着一个显示，宽度之随着内容的变化而变化。内联元素之间可以相互嵌套；但是它们不可以包裹块状元素，我们常用讲内联元素用在小块的内容上，比如几句话。 我们通常会见到的 举个例子来说，我们有一个包裹了社交媒体链接(social media links)内容的 Soon we"ll be writing HTML with the best of them. HTML和CSS的注释 上述代码中有感叹号，那不是元素，而是HTML注释 HTML和CSS都可以在代码中添加注释，注释中的内容不会被展示在页面上。注释有助于我们保持代码的有序性，允许我们设置提醒，并为我们提供了一种更有效的管理代码的方法。 注释在多人编辑一份文件的时候变得非常有用。 HTML注释格式开始于， CSS注释开始于/*结束于*/。 虽然线上存在着许多不同形式的媒体和内容，但文字是主要的。于是，页面中就有了许多用于排版文字的元素。现在我们将一些更常用的元素，包括标题，段落，表示重要性的粗体和用于强调的斜体。 标题都是块状元素，它们有六个等级，到。标题有助于快速分解内容并建立层次结构。它们是用户阅读页面的关键标识符。它们也有助于搜索引擎索引和分析页面的内容。 在页面中使用标题要有顺序。页面或者章节的主标题应该用元素，随后根据需要使用，，，和元素 每个等级的标题元素都应该用在适合它语义的地方，不应该单纯为了使文字加粗或变大而使用它——我们有更好的方法做到。 以下是不同等级的标题元素的示例： 标题后常跟着段落。段落用 元素来定义。段落可以一个接一个，按照需要展示在页面上。以下是段落的示例： 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. 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. 加粗和强调文本，我们可以使用内联元素。我们有两个元素可以加粗文本：和元素。理解它们的语义非常重要。 元素的语义是强调文本的重要性,因此它是最常用于加粗文本的元素。没有特殊的语义，只是改变文本的样式，因此在突出文本重要性这个方面它不是最好的选择。我们可以根据需要选择合适的元素。 以下是用两种元素加粗文本的示例： Caution: Falling rocks. This recipe calls for bacon and baconnaise. 用斜体强调文本，可以使用内联元素。与加粗文本一样，也有两种元素可以设置斜体，它们也有不同的语义。 的语义是强调重点文本，因此它是最常用于斜体的元素。而另一个元素，语义是代替语音或者有语调的文本，类似于放在引号里。我们可以根据需要选择合适的元素。 以下是斜体示例： I love Chicago! The name Shay means a gift. 长时间以来，我们都用 这些新元素都是为了使我们的页面更具意义，提升结构语义。它们都是块状元素，并且没有默认样式。这些元素都可以在单页面中多次出现，当然要保证使用在符合他们语义的场景里。 以下是一个使用例子： 元素的内容不会展示在页面里，它包裹了元数据,文档标题，以及对外部文件的引用。 它直属于元素。 元素用来表示页面的主导航。 应该只应用于主导航，例如全局导航，目录， 上一页/下一页，或其他值得注意的导航组。 通常包含超链接用于链接网站的其他页面或模块。其他杂项的链接不应该用，它们多带带使用元素就可以了。 元素用在独立的，分布式开发的或者可复用的模块。我们常将元素用在博客，新闻，用户体检内容等类似的地方。 我们想要使用时，我们需要确定若这块内容复制到其他地方，是否会导致混淆。若这块内容从页面中移除，例如在邮件或者打印中，这张页面是否依旧正常有效。 元素用于专题组，通常(并不是所有)都会含有标题。中的内容分组本质上是通用的，内容相关时非常好用。 常用于分解页面，为页面建立层次。 有时候我们很难确定 ，和 和元素都有助于设置文档结构和画出文档轮廓。如果只是为了样式而分组，不涉及文档轮廓，那么就使用 如果内容涉及文档轮廓，并且能够被独立配置与合并，就使用。 如果内容涉及文档轮廓，并且代表一个专题组，那么就使用。 元素常用于侧边栏、概述，这与它周围的内容切切相关。当它在元素中，中可能显示与文章作者相关的信息。 我们可能本能的认为应该出现在页面的左右两侧。但我们需要记住，所有的结构化元素，包括都是块状元素，它们会另起一行，并占据嵌套它们的元素也就是父级元素的整行可用宽度。 我们会在后面讲到怎么修改一个元素的位子，让他向左或向右布局。 元素常用于页面，文章，区块或类似场景的尾部。简单的说就是元素放在父级元素的底部。元素应该显示相关的信息，不能偏离包含它的文档。 随着我们对结构元素和文本元素的了解，我们的对HTML知识开始有了真正的了解。现在我们来重温一下 我们的样式讨论大会网站，看看是否能优化它的结构。 目前我们的网站缺少真正意义上的结构，内容也是。我们需要花点时间让他充实起来。 打开已存在的index.html，添加一个 接下来，我们使用元素添加一组新的内容，用以介绍我们的讨论会。先在这个区块中添加一个元素，然后将已存在的 元素移到元素下。 Every year the brightest web designers and front-end developers descend on Chicago to discuss the latest technologies. Join us this August! 在介绍了我们的讨论会之后，再添加一组新的内容，这其中包括好几块，例如演讲者介绍，计划表还有场地等。 Joining us from all around the world are over twenty fantastic speakers, here to share their stories. 最后，我们将版权信息添加在页面尾部的元素中。同时，我们可以使用元素，它的语义为附加信息和附属细则——非常适合我们的版权信息。 现在我们可以看到我们的主页的内容开始丰富起来。 特殊字符编码 练习中有个有趣的现象，我们的 特殊字符包括各种标点符号，带声调的字母和标志。如果直接输入到HTML中可能会导致误解和解析错误，因此它们需要编码。 每个字符编码都由&符号起头，以分号;结尾。它们中间是具有唯一性的字符串编码，无论是名字还是数字编码 例如我们将单词"resumé"编码为resumé。上例中，我们的标题中有两种破折号编码，在页脚中有一个版权标志。这里有一个特殊字符编码的列表供参考：特殊字符编码 与文本一样，超链接也是互联网核心要素之一，它提供了从一个页面跳转到另一个页面或资源的能力。超链接用元素建立，这是一个内联元素。为了实现从一个页面到另一个页面（或资源）的跳转，需要使用href属性，这个属性被称为超链接引用。href标识了链接的目的地。 例如，点击href属性值为 http://shayhowe.com的元素的文本"Shay",页面将跳转到指定的网站。 用元素包裹块状元素 本质上元素是一个内联元素。根据互联网标准,内联元素不可以嵌套块状元素。但随着HTML5的推出，元素被允许包裹块状元素，内联元素以及其他各类的元素。虽然这么做打破了标准约定，但这是为了使页面中的大块内容也可以成为链接。 链接最常用的两种场景是跳转到同一网站的其他页面和跳转到其他网站。这些链接都是href属性的值，也称为路径。 链接到同一网站的其他页面会存在一个相对路径，就是href属性值不包含域名(.com，.org，.edu等)。由于链接到同一网站的页面，href属性的值只需要有目标文件的文件名例如:about.html。 如果目标页面与目前的页面不在同一目录下，href属性的值也需要反应出这一点。例如about.html在pages目录下，那么相对路径就是:pages/about.html。 链接到其他的网站则要求是绝对路径，href属性的值需要有完整的域名。例如链接到谷歌Google，那么href属性的值为http://google.com， 在这例子中路径由http开头，域名为.com 点击文本"About"将会在浏览器中打开about.html页面。点击文本"Google",将会在浏览器中打开http://google.com/ 页面。 我们偶尔也会想要链接到我们的email地址。例如文本为"Email Me"的超链接，点击后会打开用户的默认email客户端，并且预设了一部分Email内容。至少填充了Email地址，也可能会有类似于标题或者文本之类的信息。 创建一个Email链接，href属性值需要由 mailto:开头，再是email地址。例如href属性值可以这么写：mailto:shay@awesome.com。 此外，也可以填充标题，正文和其他信息。添加标题需要在email地址后添加subject=参数。email地址后的第一个参数需要以问号?开头，将其绑定到超链接地址中。若有空格需要将其编码为%20。 添加正文和添加标题一样，不过使用的是body=参数。因为我们已经绑定了一个参数，所以我们需要使用&符号将两个参数隔开。和标题一样空格使用编码字符%20,换行符使用%0A。 总而言之，链接到email地址为shay@awesome.com,标题为“Reaching Out”,正文为“How are you”的链接的href属性值设置成：mailto:shay@awesome.com?subject=Reaching%20Out&body=How%20are%20you。 代码如下： 超链接有一个功能是确认在哪里打开链接。通常是在当前窗口打开链接；但我们也可以在新窗口打开它。 如果我们想在新窗口打开链接，需使用target属性，并将值设置为_blank。target属性确定链接在哪里打开，而_blank属性指向新窗口。 以下示例在新窗口打开http://shayhowe.com/页面： 有时候我们会看到跳转到当前页面其他部分的超链接。一个本页面跳转常见的功能就是“回到顶部”。 我们可以在当前页面想要跳转到的元素上设置id属性。然后将id属性的值作为超链接元素的href的值，并以#号为前缀。 还是以“回到顶部”为例，我们在元素上添加id属性，值设为top；然后将链接的href属性值设置为#top，这时候点击链接就会跳转到元素顶部。 链接非常有用，彻底改变了我们如何使用互联网。 现在为我们的样式讨论会网站添加多个页面， 它们之间都会有相互跳转的链接。 我们先将 为了能浏览所有的页面，我们在 -为了方便，我们把 在介绍我们讨论会的元素中，我们应该增加一个报名链接。放在介绍文字下方是很好的选择。 我们也需要在所有指向这些页面的区块上添加链接。我们用元素将每个区块的元素和元素包裹起来并添加相关页面的链接。 Joining us from all around the world are over twenty fantastic speakers, here to share their stories. 现在我们需要创建一些新页面：speakers.html，schedule.html，venue.html和register.html页面。这些页面和index.html在同一文件夹中，这样我们之前添加的链接就有效了。 以下是最终结果，网站不再只有一个页面，而是一个多页面的完整的网站。 这是练习的源代码。点击下载 我们在这节课中讨论了语义化，这对HTML的结构和意义非常重要。接下来我们也介绍了一些具有语义的HTML元素。这些元素使我们的内容更具价值。 我们这节课所学内容概括如下： 什么是语义化元素以及它们的重要性
哪些基于文本的元素最能表现文本意义 HTML5的结构化元素以及怎么使我们的页面具有结构和组织 怎么使用超链接跳转不同的页面和网站 到此，希望你对HTML有一个不错的印象。虽然还有很多知识要学，但是已经打好了基础。 接下来我们要更深入的学习CSS。 http://learn.shayhowe.com/htm... 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。 转载请注明本文地址：https://www.ucloud.cn/yun/112329.html 摘要：块状元素可以相互嵌套，并且可以包裹内联元素。内联元素之间可以相互嵌套但是它们不可以包裹块状元素，我们常用讲内联元素用在小块的内容上，比如几句话。
我们初步了解了HTML和CSS，现在让我们深入挖掘HTML并了解哪些元素构成了这种语言。
建设网站前，我们需要了解什么元素适合排版什么内容。这对于理解元素如何展示在页面中以及元素的语义化都有非常重要的意义。
在工作中使用适当的元素排版需要长时... 摘要：告诉搜索引擎爬虫，我们的网站是关于什么内容的服装好看的衣服我是你爸爸我是你爸爸段落标签标题标题标题标题标题标题标题标签独成一段，加粗字体哈哈我的家在东北lesson1
①我是你爸爸 我是你爸爸
②标题 标题 标题 标题 标题 标题 ③ 哈哈 ④50$ ⑤我的家在东北 ⑥ a b c
lesson2
/*链接到4中的ul的导航栏应用*/ *{ ... 摘要：元素是使用小于号和大于号包裹元素名来标示。一个结束标签表示元素的结束它由小于号元素名组成例如。和嵌套在内，它们页面中都是可视的。使用选择器类型选择器类型选择器也叫作元素选择器根据元素类型选择元素。
可以的话，请想象一下互联网没有发明之前的日子。网站还不存在，纸质的书本是我们主要的信息来源，而在书本中查询我们想要的资料会耗费相当多的精力和时间。 而如今，你打开个浏览器用搜索引擎搜索，任... 摘要：元素是使用小于号和大于号包裹元素名来标示。一个结束标签表示元素的结束它由小于号元素名组成例如。和嵌套在内，它们页面中都是可视的。使用选择器类型选择器类型选择器也叫作元素选择器根据元素类型选择元素。
可以的话，请想象一下互联网没有发明之前的日子。网站还不存在，纸质的书本是我们主要的信息来源，而在书本中查询我们想要的资料会耗费相当多的精力和时间。 而如今，你打开个浏览器用搜索引擎搜索，任... 摘要：我们会在组合选择器中来了解为什么权重值要加连字符。组合选择器中的权重值会分别对不同类型的选择器进行计数。对比两组选择器，第二组选择器有两个选择器，拥有更高的权重值。
CSS是一门复杂的语言，拥有相当的大能力。
它我们允许为页面添加布局和设计，允许多个元素甚至多个页面共享样式。在我们有能力解锁所有功能之前，我们必须先充分理解它的基础点。
首先，我们要明确的了解样式是怎么被渲染的。
具体的... 阅读 3101·2021-11-08 13:18 阅读 2247·2019-08-30 15:55 阅读 3580·2019-08-30 15:44 阅读 3027·2019-08-30 13:07 阅读 2758·2019-08-29 17:20 阅读 1910·2019-08-29 13:03 阅读 3381·2019-08-26 10:32 阅读 3201·2019-08-26 10:15，，它们没有任何语义，仅用于排版。
辨别div和span
和两个HTML元素都被当做容器，仅用于页面排版。作为通用的容器，它们不具备任何意义和语义。举个例子，段落的语义化元素为和就没有这样的意义，是很纯粹的容器。
大部分的HTML元素都可被分为块状元素或内联元素。那两者之间有什么不同呢？
块状元素会另起一行，并多带带占据一整行空间。块状元素可以相互嵌套，并且可以包裹内联元素。我们常用块状元素包裹大块的内容，比如段落。和在建站中都非常有价值，因为它们可以将针对性的样式作用于整组被包裹的内容上。
作为块状元素，常用在大块的内容，用来帮助页面的布局和设计。作为内联元素，常用在块状元素中的小块内容。
和元素都设置了class和id属性用于调节样式。选择class和id属性的值的时候，需要注意：我们要选择一个代表元素内容的值，而不是元素要显示的样式。
元素，背景色要设为橙色orange。我们第一个想到的就是将class属性值设为orange。那么如果我们接下来将橙色背景换为蓝色blue呢？这个时候orange这个属性值就不再具有意义。更明智的选择就是将class属性值设为social，它代表的内容，而不是样式。
段落
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
用strong加粗文字
用em呈现斜体
创建结构
来进行页面布局，但是本身没有什么特殊的语义，确定这些div的作用会有些困难。 而现在HTML添加了很多新的结构化元素，包括
...
...
很容易让人混淆。它们都有自己的语义和使用场景：...
是标题元素，定义了多级标题，贯穿整个页面。
元素
如何选用，和元素
中那个元素是最符合工作场景中的语义。小技巧是与选择其他语义元素一样，看内容。
。
Styles Conference
August 24–26th — Chicago, IL
Dedicated to the Craft of Building Websites
我们将整组内容都包含在一个中，然后将每一块也都分别包裹在一个中，总的来说，有三个元素创建在父级中。Speakers
World-Class Speakers
Shay
About
Google
链接到Email地址
Email Me
在新窗口中打开链接
Shay Howe
链接到当前页面的其他模块
代码如下所示：
...
Back to top
...
到目前为止，我们已经学习了怎么链接到其他页面或网站，以及如何创建email链接和在当前页面跳转。接下来我们来实践一下。
Styles Conference
我们将创建演讲者、计划表、地点、报名页面，他们都可以从主页中访问，所以我们要为它们增加链接。Speakers
World-Class Speakers
为了让所有页面看起来相同，我们要确保所有的页面的结构，， 以及 块状元素和内联元素的区别
相关文章
[译]HTML&CSS Lesson2: 了解HTML
HTML&CSS笔记001
[译]HTML&CSS Lesson1: 构建第一张页面
[译]HTML&CSS Lesson1: 构建第一张页面
[译]HTML&CSS Lesson3: 了解CSS
发表评论
0条评论
TNFE
男|高级讲师
TA的文章
阅读更多
raksmart：日本站群服务器，大陆优化50M带宽，1c253IP/4c244IP，月付$235刀
不可思议的纯 CSS 滚动进度条效果
页面基础布局相关知识 --- 居中&经典布局
Fullscreen API 全屏显示网页
调用百度API写了一个js翻译小工具
[译]HTML&CSS Lesson2: 了解HTML
谈谈React事件机制和未来(react-events)
浅谈Http协议（五）：基于Tcp协议的三次握手和四次挥手
最新活动
<
阅读需要支付1元查看
