1. 标签的语义

谈谈你对语义化的理解？

我们来看火狐MDN上的这篇文章：developer.mozilla.org/en-US/docs/…

这篇文章上清楚的写着：

所以翻译一下就是：

这段话说的非常好。就是说，我们书写HTML时，要通过标签，说明这个HTML元素的目的、角色。比如p标签表示段落，h1表示一级标题，ul表示无序列表，strong表示强调等。

在实战中，我们也很重视语义化。比如同级别的标题或语句，就应该应该用ul、li包裹，这是因为它们整体是无序列表语义；再比如，项目中，logo应该用h1包裹。

语义化很重要，是因为：

1、正确使用语义化标签可以让页面的内容结构化，便于对浏览器、搜索引擎解析，尤其是article、aside、main、nav等标签；

2、搜索引擎的爬虫依赖于HTML标签来确定关键字的权重，因此合理语义化利于 SEO；

3、使今后的自己，或者其他程序员更便于维护；

4、在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。

1.1 示例题目

来，复习一道曾经做过的题目。请根据语义，为下面的文字添加适当的HTML标签：

键盘
键盘是用于操作计算机设备运行的一种指令和数据输入装置
鼠标
鼠标是计算机显示系统纵横坐标定位的指示器，因形似老鼠而得名
显示器
显示器是一种将一定的电子文件通过特定的传输设备显示到屏幕上再反射到人眼的显示工具

正确答案是：根据语义，应该使用dl标签。dl是定义列表，用于解释说明一系列词语。dt是词语，dd是解释。

<dl>
    <dt>键盘</dt>
    <dd>键盘是用于操作计算机设备运行的一种指令和数据输入装置</dd>
    <dt>鼠标</dt>
    <dd>鼠标是计算机显示系统纵横坐标定位的指示器，因形似老鼠而得名</dd>
    <dt>键盘</dt>
    <dd>显示器是一种将一定的电子文件通过特定的传输设备显示到屏幕上再反射到人眼的显示工具</dd>
    </dl>

1.2 示例题目

再来看一道曾经的作业题：将下面什么内容放到

标签中是合适的？（多选题）

A. 广告

B. 侧边栏

C. 非常重要的核心内容

D. 文章重点内容

正确答案应该是A和B。根据语义，aside中放的是不重要的内容。

2. 相对路径和绝对路径

相对路径：以自身位置为参考点，描述目标文件的位置。

绝对路径：就是网址，一定以http://开头，或者以https://开头。

复习一下曾经的一道作业题。项目文件夹是这样的目录结构：

├ images
| ├ dog.jpg
├ test
| ├ demo.html

请问，如果想在demo.html中插入dog.jpg图片，应该如何写代码？（只需要回答img标签即可，不用创建骨架）

正确答案是：

<img src="../images/dog.jpg">

这是因为demo.html是在test文件夹中，而dog.jpg是在images文件夹中的。所以说：demo.html必须要回退一级，才能进入到images文件夹中。因此要写../。

值得一提的是，表示“当前文件夹”，可以书写“./”（注意是一个点，两个点就表示上一层文件夹了），但是，这样写有隐患，在后面我们学习webpack或者gulp对HTML文件进行“工程化”处理时，“./”的写法容易产生bug。

3. a标签target属性

新窗口打开超级链接：

<a href="" target="blank">文字</a>

4. 转义字符

请记一记，记一记：

&nbsp; 空格
&lt; 小于号
&gt; 大于号
@copy; 版权符号

其中，lt是英语less than的缩写；gt是英语greater than的缩写。如果英语好，可以记忆英语全称，这样就不会背乱了。

5. 前端三层

前端由三层构成：

HTML是结构层，用来描述页面结构、放置网页部件、描述文本语义；
CSS是样式层，用来对页面进行布局、美化元素；
JavaScript是行为层，用来制作交互效果、收发数据；

值得一提的是，这种分层开发的形式，也被称作“DIV+CSS”，始于2008年，就是北京第一次举办夏季奥运会的年份。

HTML与CSS基础重点总结（一）