2021-10-28 html5+css3学习笔记（一）

本文链接：https://blog.csdn.net/qq_41068717/article/details/121013509

1、文档声明
2、html元素的lang(language的缩写)属性
3、head元素嵌套的元素
- link元素
4、img元素
- 4.1、相对路径
- 4.2、web中常用的图片格式
- 4.3、像素
- - 视网膜屏幕
5、a元素
- 5.1、target属性
- 5.2、iframe元素的使用
- 5.3、a元素结合base元素使用
- 5.4、锚点链接
- 5.5、伪链接
- 5.6、a链接的href的其他作用
6、URL/SEO优化
- 6.1、SEO优化
7、URL
- 7.1、什么是URL
- 7.2、URL格式
8、标签语义化
- 8.1、什么是标签语义化
- 8.2、标签语义化的好处
- 8.3、总结
9、认识CSS
- 9.1、CSS简史
- 9.2、CSS官方文档
- 9.3、CSS属性的兼容性
- 9.4、如何将CSS样式应用到元素上？
- 9.5、CSS文件编码
10、CSS选择器
- 10.1、通配选择器
- 10.2、元素选择器
- 10.3、类选择器
- 10.4、id选择器
- 10.5、属性选择器
- 10.6、后代选择器
- 10.7、子代选择器
- 10.8、相邻兄弟选择器
- 10.9、全体兄弟选择器
- 10.10、选择器组——交集选择器
- 10.11、选择器组——并集选择器
11、CSS属性
- 11.1、CSS常见属性
- 11.2、常见的颜色表示法
- 11.3、CSS文本相关属性
- 11.4、CSS字体相关属性
- 11.5、行高 —— line-height
12、伪类
- 12.1、动态伪类【常见】
- 12.2、目标伪类【少见】
- 12.3、语言伪类【少见】
- 12.2、元素状态伪类【少见】
- 12.2、结构伪类【常见】
- 12.2、否定伪类：`:not()`
13、伪元素
- 13.1、 `:first-line`、`::first-line`【少用，选中第一行】
- 13.2、 `:first-letter`、`::first-letter`【少用，选中第一个字母】
- 13.3、 `:before`、`::before`【常用】
- 13.4、 `:after`、`::after`【常用】
14、HTML的Emmet语法
- 14.1、生成html5代码：!或者html:5
- 14.2、生成子代元素：>
- 14.3、生成兄弟元素：+
- 14.4、结合使用
- 14.5、使用*号
- 14.6、生成上一个层级的元素：^
- 14.7、对元素进行分组：()
- 14.8、生成元素的属性
- 14.9、生成元素的内容：{}
- 14.10、生成的结构有数字：$
- 14.11、隐式标签（不写标签名时）
15、CSS的Emmet语法
* 标签嵌套注意事项

1、文档声明

<!DOCTYPE html>

作用：

HTML文档声明，告诉浏览器当前页面是HTML5页面，让浏览器用HTML5的标准去解析识别HTML文档
必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题

2、html元素的lang(language的缩写)属性

英文：

<html lang="en">...</html>

中文：

<html lang="zh">...</html>

W3C标准建议为html元素增加一个lang属性，作用是：

帮助语音合成工具确定要使用的发音。

使用的语言就是我们lang设置的语言。

帮助翻译工具确定要使用的翻译规则。

比如你的html文档的lang属性设置的为en，浏览器设置的默认语言是中文，当你打开这个html页面的时候，浏览器右上角就会有个弹窗询问你，是否要翻译此页（翻译成中文）。当html设置的语言跟浏览器设置的语言一致时，则不会询问。

3、head元素嵌套的元素

head元素里面的内容是一些元数据（元数据：描述数据的数据，相当于对于当前html页面的描述）。一般用于描述网页的各种信息，比如字符编码(charset)、网页标题、网页图标等。

字符编码作用：
在html文件中明确指定了字符集，那么浏览器就会用你指定的字符集来解码html文件，这样不管本地操作系统的字符集是什么都不会产生乱码。

link元素

link元素除了可以用来引入CSS文件，还可以设置网页的图标（href的值是图标链接）。

<link rel="icon" type="image/x-icon" href="http://www.jd.com/favicon.ico" />
<link rel="icon" type="image/x-icon" href="favicon.png" />

link元素的rel属性不能省略，用来指定文档与链接资源的关系。
一般rel若确定，相应的type也会默认确定，所以可以省略type。
网页图标支持的图片格式是ico、png，常用大小是16×16、24×24、32×32（单位：像素）。

4、img元素

4.1、相对路径

规则：

4.2、web中常用的图片格式

png：静态图片，支持透明。
jpg：静态图片，不支持透明（jpeg跟jpg是一样的，只是由于早期操作系统只支持三位字符的后缀，所以叫jpg。不过现在大多数人还是习惯叫jpg）。
gif：动态图片、静态图片，支持透明。
WebP。

4.3、像素

像素（px）是图像显示的最小单位
每个像素都能表示一种颜色
计算机显示出来的图片都是有一堆像素组成的
组成图片的像素越多，显示越清晰
平时说的屏幕分辨率，一般都是用像素作为单位

视网膜屏幕

视网膜屏幕解释-百度百科

5、a元素

注意：a标签默认的样式（例如鼠标移入样式、文字下划线等）必须在设置href属性后才生效，不然就只是一个普通文字的样式。

5.1、target属性

_self（默认值）：自己，在本窗口打开。
_bland：空白，新打开窗口。

以下三个属性值要和iframe一起使用时，才有效果：

_parent：在父窗口中打开URL
_top：在顶层窗口中打开URL
某个iframw的name值：在某个iframe中打开URL

<iframe name="frame1" src="http://www.baidu.com"
        width="1000"
        height="600"
        frameborder="1">
</iframe>
<iframe name="frame2" src="http://www.taobao.com"
        width="1000"
        height="600"
        frameborder="1">
</iframe>
<a href="https://www.qq.com" target="frame1">qq</a>

5.2、iframe元素的使用

src可以是超链接，页可以是本地的路径（同a标签的href）。

<iframe src="http://www.baidu.com"
        width="1000"
        height="600"
        frameborder="1">
</iframe>

5.3、a元素结合base元素使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <!-- 相当于把a标签上的一些公共的东西抽取出来了 例如href的公共域名信息，target公共的属性。 -->
  <base href="https://www.baidu.com"></base>
</head>
<body>
  <a href="">百度以下</a>
  <a href="/s?wd=vue">vuejs</a>
  <!-- 写上完整的带域名的路径时，不会把上面base路径拼到当前路径前面 -->
  <a href="https://www.taobao.com">vuejs</a>
</body>
</html>

5.4、锚点链接

锚点链接可以实现：跳转到网页中的具体位置。

<a href="#one">go</a>，点击go会定位到：

id值为one的元素
name值为one的a元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点</title>
</head>
<body>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <!--<p id="one">第1节</p>-->
    <a name="one">第1节</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <p id="two">第2节</p>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a href="#one">回到【第1节】</a><br>
    <a href="#two">回到【第2节】</a><br>
    <a href="">回到顶部</a><br>
    <a href="#">回到顶部</a>
</body>
</html>

*思考：如何跳转到其他页面的特定位置？

<a href="index.html#one">首页第一节</a>

5.5、伪链接

有时候点击链接的时候并不希望打开新的URL，而是希望干点别的事情，这时可以使用伪链接。
伪链接：没有指明具体链接地址的链接，即没有指明href值得链接。
点击链接后具体要做什么，需要编写对应的js代码。
如果暂时不做任何事，可以先写成下面的形式。

<a href="#" onclick="return false;">伪链接1</a>
<a href="javascript:">伪链接2</a>
<!--弹出弹窗，可以直接写js代码，也可以绑定函数执行-->
<a href="#" onclick="alert('内容')">弹出弹窗</a>
<a href="javascript:alert('内容');">弹出弹窗</a>

所以有时候可以把链接当作按钮来使用。

5.6、a链接的href的其他作用

下载资源
打开某个应用程序

6、URL/SEO优化

6.1、SEO优化

SEO（Search Engine Optimization）：搜索引擎优化。

常见的搜索引擎：百度/搜狗/360/Google。

怎样实现有助于SEO：
-h元素有助于网站的SEO优化，可以促进关键词排名（当你在浏览器输入一个关键词进行搜索的时候，可以让你的网站更靠前）。

建议在网页中最多只有1个h1元素。乱用h元素不仅不会给网页带来好的权重，同时也有可能被搜素引擎认为作弊，最后导致K站。

7、URL

7.1、什么是URL

URL的全称是Uniform Resource Locator（统一资源定位符）。
URL就是资源的地址、位置，互联网上的每个资源都有一个唯一的URL。
通过1个URL，能找到互联网上唯一的1个资源。

7.2、URL格式

URL的基本格式：
protocol://hostname/path =协议://主机地址/路径

https://www.baidu.com/img/bdlogo.gif
https://183.232.231.173/img/bdlogo.gif

URL更具体更完整的语法格式为：
protocol://hostname[:port]/path/[;parameters][?query]#fragment

http://www.baidu.com:80/s?wd=ios#page

7.2.1、协议

不同的协议，代表着不同的资源查找方式、资源传输方式。URL常见的协议有：

http

超文本传输协议，访问的是远程的网络资源，格式是http://
http协议是在网络中最常用的协议
https协议相当于是http协议的安全版

file

访问的是本地计算机上的资源，格式是file://（不用加主机地址，现在经常省略协议头）

mailto

访问的是电子邮件地址，格式是mainto:

访问的是共享主机的文件资源，格式是ftp://

7.2.2、主机地址

存放资源的主机的IP地址（域名）。

7.2.3、port（端口号）

一台拥有IP地址的主机可以提供许多服务，比如Web服务、FTP服务、SMTP服务等。
主机通过“IP地址+端口号”来区分不同的服务，端口号类似于营业厅的窗口。
端口号的范围从0到65535，HTTP默认端口号是80，FTP默认端口号是21。

7.2.4、路径

资源在主机中的具体位置。

7.2.5、query

请求参数（get请求），提交给服务器的数据。

7.2.6、fragment

锚点位置

8、标签语义化

8.1、什么是标签语义化

选择标签的时候要尽量让每一个标签都有正确的语义。虽然很多标签之间互换之后也能实现功能，但还是要遵守“标签语义化”的原则。

8.2、标签语义化的好处

方便代码维护
减少让开发者之间的沟通成本
能让语音合成工具正确识别网页元素的用途，以便作出正确的反应
让搜索引擎能够正确识别重要的信息(利于SEO)

8.3、总结

使用最合适的标签去做最合适的事。

9、认识CSS

CSS的全称是Cascading Style Sheets，层叠样式表。

9.1、CSS简史

CSS 1 ->CSS 2->CSS 2.1 -> CSS 2.2
CSS3：是CSS 2.x以后对某一些CSS模块进行升级更新后的称呼，比如CSS Color Module Level 3、Selectors Level 3、CSS Nanespaces Module Level 3。目前并不存在真正意义的CSS 3。
CSS4：是CSS 2.x以后对某一些CSS模块进行升级更新后的称呼，比如CSS Color Module Level 4、Selectors Level 4、CSS Text Module Level 4。目前并不存在真正意义的CSS 4。

9.2、CSS官方文档

9.3、CSS属性的兼容性

由于浏览器版本、CSS版本等问题，有些CSS属性是无法使用的。可以到caniuse网站查询CSS属性的可用性。

9.4、如何将CSS样式应用到元素上？

CSS提供了3种方法，可以将CSS样式应用到元素上。

内联(行内)样式（inline style）

<h1 style="font-size: 40px; color: red;">网页的标题</h1>

文档样式表（document style sheet）、内嵌样式表（embed style sheet）

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <!--文档样式表-->
   <style>
       h1, p {
           color: red;
       }
   </style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一段文字</p>
</body>
</html>

外部样式表（external style sheet）

link标签引入(效率比import引入更高)：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--link标签引入样式-->
    <link rel="stylesheet" href="./css/common.css"></link>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一段文字</p>
</body>
</html>

import引入：

@import url('./css/common.css');

使用link来引用外部的css的优势：

有利于SEO，使用此方法引用外部css文件，将使得html页面的源代码少很多比起直接加入css样式，因为搜索引擎蜘蛛爬行网页的时候是不爬行css文件的，这样使得html源代码很少，使得蜘蛛爬行更快，处理更少，增大了此网页的权重，有利于排名。
节约html使得浏览器下载网页时候分开线程了，就像加载一个页面同时有两条线在打开一个页面道理，使得网页打开格外快。（用户浏览此网页的时候html源代码和css文件同时下载，使得更加快速）
修改网页的样式方便，只需修改css样式即可修改网页的美工样式，如果在网站项目中此方法，因整站应用了共用的css基本样式，这样修改整站风格样式根据快捷方便。
link方式：优先加载CSS文件到页面；import方式：先加载HTML结构在加载CSS文件。

9.5、CSS文件编码

当css作为一个单独的文件时，最好在文件的头部加入编码信息@charset "utf-8";，是为了防止当css里面出现中文时，出现编码乱码的问题。出现中文的情况例如：

font-family: "华文宋体";

10、CSS选择器

10.1、通配选择器

通配选择器*：选择所有元素，效率比较低，一般不使用。

* {}

10.2、元素选择器

元素选择器（标签选择器）div、p等

div {}

10.3、类选择器

类选择器 .[className]

.content {}

10.4、id选择器

id选择器 #[idName]，注意：id名称在同一个页面中不要重复（代码规范）。

#header {}

10.5、属性选择器

<div title="one div元素">我是div元素</div>
<p title="p元素">我是p元素</p>
<p title="p one">我是p元素</p>
<p>我是p元素</p>
<span title="one span元素">我是span元素</span>

【常用】选中所有设置了title属性的元素（不管该属性有没有值, 如title=""）：

[title] {
    color: orange;
}

【常用】选中title属性值等于div元素的元素：

[title="p元素"] {
    color: red;
}

【了解】选中title属性值包含了one字符串的元素：

[title*="one"] {
    color: #980000;
}

【了解】title属性值以one开头：

[title^="one"] {
   color: #980000;
}

【了解】title属性值以one结尾：

[titl$="one"] {
    color: #980000;
}

10.6、后代选择器

<span>我是span1</span>
<div>
  <span>我是span2---被选中</span>
  <div>
    <span>我是span3---被选中</span>
  </div>
  <p>
    <span>我是span---被选中4</span>
  </p>
</div>

选中div元素里面的span元素（包括直接、间接子元素）：

div span {
    color: red;
}

10.7、子代选择器

<span>我是span1</span>
<div>
  <span>我是span2---被选中</span>
  <div>
    <span>我是span3---被选中</span>
  </div>
  <p>
    <span>我是span4</span>
  </p>
</div>

选中div元素里面的直接span子元素（不包括间接子元素）：

div>span {
    color: red;
}

10.8、相邻兄弟选择器

<p>11111</p>
<div>
  <p>222</p>
</div>
<p>333---被选中</p>
<p>444</p>

选中div元素后面紧挨着的p元素（且div、p元素必须是兄弟关系）

div+p {
   color: red;
}

10.9、全体兄弟选择器

<p>11111</p>
<div>
  <p>222</p>
</div>
<p>333---被选中</p>
<p>444---被选中</p>

选中div元素后面的p元素（且div、p元素必须是兄弟关系）

div~p{
   color: red;
}

10.10、选择器组——交集选择器

<div class="one">one---被选中</div>
<div class="tow">two</div>
<p class="one">one</p>

同时符合2个条件的元素：·div·元素、class值有one

div.one {
   color: red;
}

10.11、选择器组——并集选择器

<div>div</div>
<span title="color">span</span>
<p class="one">p</p>

所有的div元素+所有的class值有one的元素+所有title属性值等于color的元素

div, .one, [title="color"] {
   color: red;
}

11、CSS属性

11.1、CSS常见属性

color、background-color、font-size、width、height等。

color：前景色

.box {
     color: orange; 
     text-decoration: line-through;
     border: 1px solid;
 }

<div class="box">box</div>

11.2、常见的颜色表示法

基本颜色关键字：如red、blue、yellow、white等，开发中很少用。注意：transparent关键字表示透明色，开发中会经常用到。
RGB颜色：
1.十进制：rgb(red, green, blue)，如rgb(0, 0, 255)，每位取值范围为0~255，每个颜色位用1byte存储。
2.十六进制：#rrggbb、#rgb，如#f0f0f0、#fff，开发中常用这种方式。
RGBA颜色：rgba(red, green, blue, alpha)，如rgba(0, 0, 0, 0.4)。

11.3、CSS文本相关属性

text-decoration：用于设置文字的装饰线。

text-decoration: none; // 无任何装饰线，可以去除掉a元素默认的下划线
text-decoration: underline; // 下划线
text-decoration: overline; // 上划线
text-decoration: line-through; // 中划线（删除线）

letter-spacing：用于设置字母间距（默认为0，可以设置负数）

letter-spacing: 10px;

word-spacing：用于设置单词间距（将用空格隔开的本文分别当作一个单词）

word-spacing: 30px;

text-transform：用于设置文字的大小写转换

text-transform: none; // 没有任何影响
text-transform: capitalize; // 将每个单词的首字母变为大写
text-transform: uppercase; // 将每个单词的所有字符变为大写
text-transform: lowercase; // 将每个单词的所有字符变为小写

text-indent：用于设置第一行文字的缩进

text-indent: 20px; // 缩进20px
text-indent: 2em; // 精准控制首行缩进两个字符，这里em相当于当前元素的font-size大小，2em即 2 * font-size

text-align：用于设置元素内容（为行内元素时起作用：文本或inline、inline-block的dom元素）在元素中的水平对齐方式

// 常用
text-align: left; // 默认值
text-align: center;
text-align: right;
// 不常用 
text-align: justify; // 对最后一行文字没有效果,把一行的剩余空间平分到每个单词之间
text-align-last: justify; // 对最后一样文字起效果

11.4、CSS字体相关属性

font-size
了解：谷歌浏览器默认最小字体是12px

font-size: 14px;
font-size: 2em; // font-size中 2em相对于：父元素的font-size * 2
font-size: 200%; // font-size中 200%相对于：父元素的font-size * 2 (跟em一样，都是相对于父元素)

font-family：用于设置字体的字体名称

注意：一般情况下，英文字体只适用于英文，中文字体同时适用于英文和中文。
如果在开发中，中英文使用不同的字体，建议将英文字体写到前面，中文字体写到后面。

// 当前操作系统里面含有这种字体时，设置才会生效
font-family: "宋体";
font-family: "Microsoft YaHei";
// 为了防止设置的字体刚好操作系统中不存在，会设置多个字体，如果第一个不存在则会依次往后找。如果都不存在，则会使用操作系统的默认字体。
font-family: 'Courier New', Courier, monospace;

font-weight：用于设置字体加粗。取值：数字格式 100~900(整百数)；关键字：normal(默认，相当于400)，bold(相当于700)。
font-style ：用于设置文字的常规、斜体显示

font-style: normal; // 默认值，常规显示
font-style: italic; // 用文字的斜体显示（起作用的前提：font-family这种字体本身是支持斜体的）
font-style: oblique; // 文本斜体显示（让文字倾斜）

font-variant：可以影响小写字母的显示形式

font-variant: normal; // 常规显示
font-variant: small-caps; // 将小写字母替换为缩小过的大写字母

font：是一个缩写属性

font-style font-variant font-weight font-size/line-height font-family

font-style、font-variant、font-weight可以随意调换顺序，也可以省略
/line-height可以省略，如果不省略，必须跟在font-size后面
font-size、font-family不可以调换顺序，也不可以省略

11.5、行高 —— line-height

line-height：用于设置文本的最小行高
行高可以先简单理解为一行文字所占据的高度

line-height = 文本的高度 + 行距

注意区分height和line-height的区别：

height：元素整体的高度
line-height：元素中每一行文字所占据的高度。当元素不设置高度时，元素的高度由文本的行高撑起。

应用实例：实现文字的垂直方向上居中对齐。

12、伪类

12.1、动态伪类【常见】

:link、:visited、:hover、:active、:focus

:link、:visited、:hover、:active

<a href="#">按钮</a>

/*未访问状态*/
a:link {
  color: blue;
}
/*已访问状态*/
a:visited {
  color: orange;
}
/*手指（鼠标）放上去*/
a:hover {
  color: green;
}
/*手指（鼠标）点下去，未松手*/
a:active {
  color: red;
}

使用注意：

:hover必须放在:link和:visited后面才能完全生效
:active必须放在:hover后面才能完全生效
所以建议的编写顺序是:link、:visited、:hover、:active
除了a元素，:hove、:active也能用在其他元素上

:focus的使用：
去掉a元素的焦点状态

a:focus {
	outline: none;
}

或者：

<!--tabindex可以调整tab选中元素的顺序-->
<a tabindex="-1" href="#">链接</a>

12.2、目标伪类【少见】

:target：最主要用在锚点的位置。

12.3、语言伪类【少见】

:lang()

12.2、元素状态伪类【少见】

:enabled、:disabled、:checked

12.2、结构伪类【常见】

:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()、:first-child、:last-child、:first-of-type、:last-of-type、:root、:only-child、:only-of-type、:empty

:empty：选中元素内容为空的元素（开始标签紧挨着结束标签）

12.2、否定伪类：`:not()`

:not()支持简单选择器，不支持组合。比如下面的写法是不支持的：

:not(div.one) {
	color: red;
}

:not(div .one) {
	color: red;
}

13、伪元素

为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line

常用的伪元素有（两种写法）：

13.1、 `:first-line`、`::first-line`【少用，选中第一行】

【了解】只有下列属性可以应用在::first-line伪元素：

字体属性、颜色属性、背景属性
word-spacing、letter-spacing、text-decoration、text-transform、line-height

13.2、 `:first-letter`、`::first-letter`【少用，选中第一个字母】

【了解】只有下列属性可以应用在::first-letter伪元素：

字体属性、margin、padding、border、颜色属性、背景属性
word-spacing、letter-spacing、text-decoration、text-transform、line-height、float、vertical-align(只有当float是none时)

13.3、 `:before`、`::before`【常用】

13.4、 `:after`、`::after`【常用】

注意：::before或者::after的content属性既可以写文字，也可以写图片路径。

span::after {
	/* content: "abc"; */ // 文字
	content: url("../img/01.png"); // 图片
}

注意：

伪元素可以看成是行内元素
设置伪元素时content属性不能省略（content属性值可以为空字符串，但不能省略）。

14、HTML的Emmet语法

14.1、生成html5代码：!或者html:5

输入! + tab键
输入html:5 + tab键

14.2、生成子代元素：>

输入div>p>span + tab键

<div>
    <p>
        <span></span>
    </p>
</div>

14.3、生成兄弟元素：+

输入div+h2+p + tab键

<div></div>
<h2></h2>
<p></p>

14.4、结合使用

输入div>h2+p+div>span + tab键

<div>
    <h2></h2>
    <p></p>
    <div>
        <span></span>
    </div>
</div>

14.5、使用*号

<!--div>p*3+div*3-->
<div>
    <p></p>
    <p></p>
    <p></p>
    <div></div>
    <div></div>
    <div></div>
</div>

14.6、生成上一个层级的元素：^

<!--div>p>span^h2+div-->
<div>
    <p>
        <span></span>
    </p>
    <h2></h2>
    <div></div>
</div>

<!--div>p>span^^h2+div-->
<div>
    <p><span></span></p>
</div>
<h2></h2>
<div></div>

14.7、对元素进行分组：()

<!--div>(p>span)+h2+div-->
<div>
    <p><span></span></p>
    <h2></h2>
    <div></div>
</div>

14.8、生成元素的属性

id属性
class属性
普通属性

<!--div#menu-->
<div id="menu"></div>
<!--div.name-->
<div class="name"></div>
<!--div[title]-->
<div title=""></div>
<!--div[title="哈哈"]-->
<div title="哈哈"></div>
<!--div#main.box1.box2[title="哈哈"]-->
<div id="main" class="box1 box2" title="哈哈"></div>

14.9、生成元素的内容：{}

<!--div.box{我是div元素}-->
<div class="box">我是div元素</div>

14.10、生成的结构有数字：$

<!--div.box$*4-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<!--p{文字内容$}*4-->
<p>文字内容1</p>
<p>文字内容2</p>
<p>文字内容3</p>
<p>文字内容4</p>

14.11、隐式标签（不写标签名时）

不写标签时，默认是div标签

<!--.wra>.box-->
<div class="wra">
    <div class="box"></div>
</div>

ul的子元素不写标签时，默认是li标签

<!--ul>.item${列表内容$}*3-->
<ul>
    <li class="item1">列表内容1</li>
    <li class="item2">列表内容2</li>
    <li class="item3">列表内容3</li>
</ul>

table的子元素不写标签时，默认是tr标签；tr的子元素不写标签时，默认是td标签

<!--table>.row*2>[colspan=4]{单元格$}*3-->
<table>
    <tr class="row">
        <td colspan="4">单元格1</td>
        <td colspan="4">单元格2</td>
        <td colspan="4">单元格3</td>
    </tr>
    <tr class="row">
        <td colspan="4">单元格1</td>
        <td colspan="4">单元格2</td>
        <td colspan="4">单元格3</td>
    </tr>
</table>

15、CSS的Emmet语法

.wra {
   /*w200+h200+m20+p15*/
    /*w200*/
    width: 200px;
    /*h200*/
    height: 200px;
    /*m20*/
    margin: 20px;
    /*p15*/
    padding: 15px;
}