HTML & CSS - 元素介绍 | 王富杰的博客

一、元素介绍

元素（Element）是由开始标签、内容、结束标签（有些可省略）一起构成的网页结构单元。例：

<h1>一级标题</h1>
<a href="http://www.baidu.com">百度一下</a>

如上所示，就是两个元素，它有开始标签，元素内容，结束标签以及可选的元素属性组成。元素属性可以分为两类：局部属性和全局属性。

局部属性：某一些元素特有的属性，例如元素a的href属性
全局属性：所有元素都可以用的属性

有些元素没有结束标签，这些元素被称为空元素，因此空元素也是没有元素内容的。例如

表示显示一个水平线。

1.1、元素嵌套

元素是可以进行嵌套的，必须是一个元素完整的嵌套在另一个元素里面。因此就引出了一些概念，父元素、子元素、兄弟元素、祖先元素、后代元素。例如我们来看一下我们第一个网页的代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    hello world
</body>
</html>

这里<body>元素和<head>元素就是兄弟元素，它们又是<html>元素的子元素。<html>是<meta>和<title>的祖先元素，同样<meta>和<title>就是<html>的后代元素。

二、标准文档结构

前边我们提过，在vscode中输入 ! 自动生成一些代码。如上的代码就是！生成的，这个就称作标准文档结构。

<!DOCTYPE html> 文档声明，告诉浏览器是html5书写的
<html> 根元素，包含整个页面的所有内容，一个页面只能有一个<html>元素，它的属性lang是全局属性，一般改为zh-CN或者zh-cmb-Hans
<head> 头元素的内容不展示网页上，它包含<meta>和<title>。<meta>用来设置文档元数据，<title>设置标题，即标签页展示的标题
<body> 文档体，展示到页面上的内容都需要写到这个元素内

三、语义化

如果想展示文字增大增粗效果，可以使用标题元素实现，虽然这样显示效果没有问题，但是从语义化的角度是不对的。语义化的概念是元素不应该决定样式，甚至不应该决定是否显示。选择元素应该取决于内容的含义，而不是显示效果。

例如我们需要文字变大变粗的效果，不应该使用h1，而应该使用普通文本，通过CSS来修改样式。那标题元素默认增大增粗的效果也是CSS样式决定的，只是浏览器给<h1>增加了默认的CSS样式。我们可以写一个一级标题在浏览器查看下效果：图片加载失败如上所示：绿框标记出来的即为默认CSS样式，当我们手动修改样式后，标题也一样没有了增大增粗的效果。

网页语义化有利于搜索引擎优化(SEO)，方便浏览器解析

四、基本元素示例

这里我们介绍一下html的几个基本元素：

h1 ~ h6 一级标题 ~ 六级标题
p 段落，表示文字的正文
br 换行符
a 超链接，可以通过href属性跳转到其他页面，还可以跳转到当前文档的其他位置

这些元素有的默认独占一行，在早期这种元素被称为块级元素，不换行的元素称为行内元素。但是在html5中，w3c弃用了这种说法，因为即使是行内元素也可以通过CSS来控制独占一行。这里只简单的介绍一下这些元素，具体的使用后面我们再来说明

五、乱数假文

在我们开发网页，测试展示效果经常需要一些测试文档。vscode就提供了一个乱数假文档的功能，可以帮我们生成一些单词。那就是lorem

lorem
lorem3  # 生成三个单词

如上就lorem的用法，lorem只能生成英文的单词，不支持中文。生成中文就需要插件，在上篇文章中我们已经安装过了，生成中文的指令是 jw 。但是jw不能和Ement语法结合使用，lorem可以，因为lorem是Ement语法的内置功能。

六、html实体

在HTML代码中，连续的空白字符(空格、制表符、换行符)，在显示的时候会被折叠成一个空格，这是一个全局的规则。如果我们的页面就需求用到连续的空格，就需要用到html实体实体，即HTML Entity。HTML实体使用 &开头，跟上一个单词, 使用;结尾来表示一个符号，例如：

&nbsp;   <!--空格-->
&copy;   <!--版权-->
&lt;     <!--小于-->
&gt;     <!--大于-->

html实体还是比较多的，这里就不一一列列举了，需要的时候可以查w3c的官方文档。在w3c官网可以找到，w3c提供的文档都是英文的，英文不好的可以通过mdn来查阅文档。

七、Ement语法

Emmet 是一个前端开发的代码生成工具，它能快速的生成HTML代码。前面提到的 ! 就是 Ement 语法提供的。这里介绍几个常用的Enent语法。

！ 快速生产HTML骨架
> 生成子元素
+ 生成兄弟元素
^ 返回上层
* 乘法，重复元素
() 分组
$ 编号，用于重复时生成序号
{} 设置标签文本内容
[] 设置标签属性

以上为一些常用的语法格式，我们这里举例子说明，在vscode键入如下代码：

(h${$级标题}+p>lorem3)*6

<!--按tab之后生成如下代码-->
<h1>1级标题</h1>
<p>Lorem, ipsum dolor.</p>
<h2>2级标题</h2>
<p>Sit, voluptate eos.</p>
<h3>3级标题</h3>
<p>Necessitatibus, eaque ex.</p>
<h4>4级标题</h4>
<p>Obcaecati, magni nihil.</p>
<h5>5级标题</h5>
<p>Ducimus, vero repellat!</p>
<h6>6级标题</h6>
<p>Animi, nostrum pariatur?</p>

如上上所示，我们通过简短的一行命令就自动生成了一串代码，省略了我们敲标签的时间。关于Ement的更多用法请参考官方文档

「真诚赞赏，手留余香」

HTML & CSS - 元素介绍

元素介绍