Html与标签介绍
# HTML介绍
超文本标记语言，如果想要让浏览器渲染我们所写的代码，就必须遵循HTML语法。
我们在浏览器所看到的页面，大都是由HTML代码构成的。
# HTML注释语法
# 单行注释
<!--这是一条注释-->
# 多行注释
<!--
多行注释1
多行注释2
... ...
-->
2
3
4
5
# 注意
由于HTML代码非常的杂乱且多，所以我们一般使用注释来划分区域，方便我们后续的查找。
例如：
<!--导航条开始-->
... ...
导航条所有的html代码
... ...
<!--导航条结束-->
2
3
4
5
# HTML文档结构
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
2
3
4
5
<!DOCTYPE html>
用于声明该文档的HTML版本，告诉浏览器用哪种HTML版本的规范来解读该HTML文档。
此处的
<!DOCTYPE html>是html5的声明。
head
head内的标签用于定义一些配置，是给浏览器看的，不会展示给用户看。
body
body内的标签是用于渲染给用户看的，代码写什么浏览器就渲染展示什么。
# 注意
HTML代码是没有格式的，全部写在一行也没有问题，但对其进行换行、缩进可以大幅提高可读性。
# emmet插件
# 介绍
主流的代码编辑器都支持emmet插件，它可以帮助我们快速的补全标签。输入标签及指令后，按回车或Table即可补全。
# 语法
当前节点：直接输入标签名即可，会生成出指定标签。
子节点：[标签名1]>[标签名2]>[标签名3]>...
html>head>meta
# 生成出：
<html>
<head>
<meta>
</head>
</html>
2
3
4
5
6
7
兄弟节点：[标签名1]+[标签名2]+[标签名3]+...
head+body
# 生成出：
<head></head>
<body></body>
2
3
4
上级节点：[标签名1][>或者+][标签名2]^[标签名3]...
需要在其他语法的基础上使用，单独无法使用，多少个^就是往上多少级，比如^^就表示上上级。
html>head>meta^body
# 生成出：
<html>
<head>
<meta>
</head>
<body></body>
</html>
# 这里的^是接在meta后面所以在meta的上一级，也就是body和head成了兄弟关系
2
3
4
5
6
7
8
9
重复：[标签名]*[重复的个数]
*号后面添加数字表示重复生成的标签个数。
p*3
# 生成出：
<p></p>
<p></p>
<p></p>
2
3
4
5
分组：[标签名1]>(标签名2>标签名3)+[标签名4]...
()括号里面的内容为一个代码块，表示括号内部与外面的层级无关。
body>(p>b)>(p>i)
生成出：
<body>
<p><b></b></p>
<p><i></i></p>
</body>
2
3
4
5
6
属性：
不指定属性值：标签名[属性名1 属性名2...]
指定属性值：标签名[属性名1="值" 属性名2="值"...]
p[aaa bbb]
生成出：
<p aaa="" bbb=""></p>
2
3
编号：
[标签名]$*[数值] 代表从1开始递增到填写的数值。
[标签名]$@[起始数值]*[递增次数]
@[起始数值]代表指定起始从什么数开始递增。
[递增次数]表示从其起始值开始递增几次。
几个$符号，就代表用0补全几位数，比如$$就表示用0补全2位数。
h$*3
# 生成出：
<h1></h1>
<h2></h2>
<h3></h3>
h$@2*3
# 生成出：
<h2></h2>
<h3></h3>
<h4></h4>
test$$$*3
# 生成出：
<test001></test001>
<test002></test002>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
文本：[标签名]{文本}
可以和$组合使用。
p{test}
# 生成出：
<p>test</p>
h$*3{test$}
# 生成出：
<h1>test1</h1>
<h2>test2</h2>
<h3>test3</h3>
2
3
4
5
6
7
8
9
id属性：[标签名]#[标签id]
p#test
# 生成出：
<p id="test"></p>
2
3
class属性：[标签名].[class名]
p.test
生成出：
<p class="test"></p>
2
3
# 标签介绍
# 简介
HTML代码中形如 <...> 的叫做标签或者元素。
# 单双标签分类方式
双标签，即有头有尾的标签。
比如：
<h1></h1>
单标签(自闭合标签)。
比如：
<img/>
# 行级块级标签分类方式
块级标签 (块级元素)。
独占一行，对宽度的属性值生效。
如果不给宽度，块级元素就会默认为浏览器（或父类）的宽度，即：100%的宽。
行级标签 (行内元素)。
可以一行存在多个标签，对宽高属性值不生效，完全靠内容撑开宽高，内容多大，就占多大。
# 标准文档流介绍
标准文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。
标准文档流分为两种等级：块级元素和行内元素。
# 标签属性介绍
标签属性就是定义在标签<>中的键值对，一般用于控制标签的功能、样式等。
# 标签的两个重要属性
# id值
标签的标识id，同一个页面中的不同标签的id值应当都设为唯一的，不能重复。
在任意标签的属性中，指定即可 id="标签id值"。
例如：<p id="p01">Hello World!<\p>
# class值
类似于面向对象中的继承，一个标签可以继承多个class值，继承后就能获得该class的样式等。
# 自定义标签属性
标签不仅可以指定自带的属性，还可以指定自定义的属性。
例如：<p username="niuniu">test<\p>
# 标签嵌套规则
块级标签内部可以嵌套任意块级标签和行级标签。
但
<p></p>是特例，它只能嵌套行级标签。
行级标签可以嵌套行级标签，但不能嵌套块级标签。