第二天：给自己做一个在线简历吧

末蓝、 2022-05-26 05:18 113阅读 0赞

日期：2018/4/25

总用时：1.5h

今日目标：理解HTML5语义化，了解标签含义和使用基本的HTML标签制作个人简历

#### 收获： ####

看了那么多炫酷漂亮的网页，看见那么多同学对前端的热爱，我也变得更爱前端了。

今天再次回忆了计网中获取服务器资源的知识。

#### 有待深入了解的地方： ####

#### 笔记：    ####

什么是HTML？

[HTML][] (HyperText Markup Language) 不是一种编程语言;它是一种标记语言，用于告诉您的浏览器如何构造您访问的网页。它可以像Web开发人员希望的那样复杂或简单。 HTML由一系列的 [元素][Link 1]组成, 您可以使用它来封装，包装或标记内容的不同部分，使其以某种方式显示，或以某种方式执行。

什么是head标签？

head 标签是 [`<head>`][head] 元素的内容。不像 [`<body>`][body] 元素的内容可以显示在浏览器中，head 的内容不会在浏览器中显示，它的作用是包含一些页面的[元数据][Link 2]。在下面的例子中，head 的内容很少。

## 元数据：<meta>元素 ##

元数据就是描述数据的数据，而HTML有一个“官方的”方式来为一个文档添加元数据，——  [`<meta>`][meta] 元素. 当然，其他在这篇文章中提到的东西也可以被当作元数据。 有很多不同种类的 `<meta>` 元素可以被包含进你的页面的<head>元素, 但是现在我们还不会尝试去解释所有类型, 这只会引起混乱。

[语义话标签][Link 3]

# 什么是HTML语义化 #

说HTML语义化就要先说说HTML到底负责的什么？下面摘自维基百科：

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。  
HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。  
关于对于语义化的理解[顾轶灵：如何理解 Web 语义化？][Web]这里讲的很清楚了我就简单说一下我的理解：  
通俗的来讲就是从代码上来展示页面的结构，而不是从最终视觉上来展示结构。单纯的HTML代码是**不带任何样式的**只是用来标记这一段是标题、这一块是代码、那一个是要强调的内容等等，但是为什么我们只写HTML在浏览器中不同的标签也是有不同的样式呢？那是因为各个浏览器都自带的有相应标签的默认样式，为了方便在没有设定样式的情况下友好的展示页面。  
良好的语义化代码可以直接从代码上就能看出来那一块到底是要表达什么内容。

# 为什么要使用HTML语义化标签 #

为什么要使用语义化标签？我用DIV+CSS也能做出来一样的效果，确实单纯看效果两者并没有什么区别，但是页面不止是给人看的，机器也要看爬虫也要看。  
网页结构更清晰方便开发维护：

![对比图2][2]  
![对比图2][2 1]

另外，在网络或其他原因页面样式文件丢失的时候，满是div组成的页面和良好语义结构组成的页面那个对用户更友好？

## 优点 ##

*  标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。简单来说，试想在H1标签中匹配到的关键词和在div中匹配到的关键词搜索引擎会吧那个结果放在前面。
 *  有利于不同设备的解析（屏幕阅读器，盲人阅读器等）满是div的页面这些设备如何区分那些是主要内容优先阅读？
 *  有利于构建清晰的机构，有利于团队的开发、维护。

[**dl dt dd使用方法**][dl dt dd]

[做导航栏为什么用ul>li，而不用dd dt dl?][ul_li_dd dt dl]

[HTML]: https://developer.mozilla.org/en-US/docs/Glossary/HTML
[Link 1]: https://developer.mozilla.org/en-US/docs/Glossary/Element
[head]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/head
[body]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/body
[Link 2]: https://developer.mozilla.org/en-US/docs/Glossary/Metadata
[meta]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta
[Link 3]: http://http//www.html5jscss.com/html5-semantics-section.html
[Web]: https://www.zhihu.com/question/20455165
[2]: http://www.5icool.org/uploadfile/2010/0613/20100613113000239.jpg
[2 1]: http://www.5icool.org/uploadfile/2010/0613/20100613113000852.jpg
[dl dt dd]: http://www.divcss5.com/html/h88.shtml
[ul_li_dd dt dl]: http://https//www.zhihu.com/question/20532360