HTML5的特点是语义与实现分离；原来是<div class=""></div>，然后样式用类选择器设置；现在是不用<div>了，而用比如<header></header>等等，然后样式不用类选择器，而是元素选择器；
<meta charset="utf-8">指定编码格式，防止在不同浏览器中打开乱码；
<meta name="viewport" content="width=device-width, initial-scale=1.0">作用是能够自适应屏幕尺寸，不至于难看；
在<head></head>中必须要有<title></title>标签；
<style></style>为HTML文档定义样式信息；它的属性之一是type(指定样式的类型)，它的是目前是固定的即type="text/css";
../ 表示上一个文件夹；
给整个网页设置一个背景色：
<body>
background-image: url("../img/logo.jpg")
</body>
给段落设置首行缩进的样式：text-indent:32px; 一般是32个像素；
一个HTML文档可以有很多的<style></style>标签 例如<style type="text/css"></style>， <style media="print"></style>(表示只针对打印模式时候的样式)
网页的样式除了可以在style元素中添加，也可以将css样式表保存为一个外部文件，然后使用link元素将其链接起来（即链接外部样式表）；
<link rel="stylesheet" type="text/css" href="style.css"> 其中rel是link元素必须要有的属性，rel="stylesheet"表示链接外部样式表， type是指类型， href表示外部样式表的位置；
<link rel="stylesheet" type="text/css" media="screen" href="style.css">表示外部链接网页背景图片的样式表；
<script></script>标签用于在HTML文档中嵌入脚本（例如：JavaScript）
一般HTML文档执行中遇到<script>的话会先获取脚本，然后执行脚本，等脚本执行完之后再继续HTML文档，若想延迟执行脚本，则用defer属性；
<script type="text/script" src="1.js" defer></script>
注释：
HTML文档注释也是用标签来写 <!-- 注释的内容-->
CSS的注释 /* 注释的内容*/
JavaScript的注释分为单行和多行 单行：//注释的内容 多行：/*注释的内容*/
<img src=""> <script src="">
<link href=""> <a href="">
块元素总是从新的一行开始，占据一行，例如p元素，div元素；行内元素则不会占据一行，例如span元素，a元素；
块级元素既可以包含块元素也可以包含行内元素， 而行内元素只能包含行内元素或者数据啥的；
链接外部样式写表格的边框样式：
table{
border:1px solid black; /*注意1px solid black之际没有逗号，用空格隔开就行*/
}
表单是HTML中获取用户输入的手段；制作表单的三个元素：form，input， button；提交表单的方法有两个：get和post；
表单：
<form action="http://baidu.com" method="post"> <!--form的method属性有 两个：get和post，都会提交表单，但是post更安全些，不会将个人信息提交给url，即在url中不会暴露自己账户和密码-->
</form>
type="text"是明文的，写什么就显示什么，而type="password"是不会显示所敲的；
在链接<a></a>中href属性是跳转网页的URL， target属性中"_blank"表示在一个新的网页中打开目标网页，而不是在本地网页中打开;
表单中input的type属性有22种，常见的有 text, submit, password, date, time, week, month, datetime-local, radio, checkbox（多选框），color, hidden, image;
input只能用於单行文本的输入，textarea可以用于多行文本的输入；
接收用户输入用input元素，下拉列表用select元素；
图像根据屏幕大小进行调整时引入了picture元素和source元素
<picture>
<source media="(min-width:1024px)" srcset="1.jpg">
<source media="(min-width:512px)" srcset="2.jpg">
<img src="3.jpg" alt="不满足上面的屏幕大小时就用这个" style="width:auto">
</picture>
给图片下面有个图题用figure元素和figcaption
<figure>
<img src="" alt="">
<figcaption>图的题目</figcaption>
</figure>
用<video width="" height="" src="lalala.mp4" controls autoplay loop>视频无法播放时显示的文本</video>能插入视频播放；
audio元素是插入音频，即一段音乐；类似于video元素，controls autoplay loop是三个属性 即插入控件，自动播放，循环播放；
在一个网页中嵌入另一个网页就用
<iframe src="" width="" height="">无法嵌入时的说的话</iframe>
一个HTML文档就是一个网页，所以在HTML的头部加入style标签设置样式（内部样式表），一个内部样式表只能影响一个网页，当有不止一个网页的时候，内部样式表就有所欠缺；
类选择器 .X {} id选择器 #X{} 注意：类选择器的.和X之间是不能有空格的，同理id选择器也是；
伪元素选择器： 最前面是两个“：”，即 ::
::first-line{ }选择器仅对块级元素内的第一行元素有效，而对于像a元素这类行内元素是不起作用的； 其中可以在::的前面加元素，例如 p::first-line{};
::before{
content:"huhuhh"
}
::after{
content:url("ccc.jpg")
}
伪类选择器：最前面是一个“：”，例如 :hover
CSS3区分是伪元素选择器还是伪类选择器是看有几个 :
动态伪类选择器 :link :visited :hover :active
<style>
a:link{ a:link{} 是链接未被访问的时候
color:pink;
}
a:visited{ a:visited{}是链接已经被访问过的时候
color:red;
}
a:hover{ a:hover{}是鼠标悬浮在链接上的时候
color:black;
}
a:active{ a:active{}是链接被点击的那一刻
color:green;
}
</style>
这四个伪类选择器是由先后顺序的，顺序对了样式才能生效；记住：LoVe & HAte
UI伪类选择器是负责用户和系统交互的；一般web的表单元素经常会用UI伪类选择器，
表单中设置必选和可选的样式，即requireed和optional
<style>
:required{
outline:3px solid red;
}
</style>
<body>
<form>
<label for="required">必填:</label>
<input type="text" name="required" required>
</form>
</body>