em,对文章中想要强调的文本
h1标签常用来网站名称
<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。
用<q>标签的真正关键点不是它的默认样式双引号（如果这样我们不如自己在键盘上输入双引号就行了），而是它的语义：引用别人的话。
<blockquote>标签，长文本引用。浏览器对<blockquote>标签的解析是缩进样式。
认识<hr>标签，添加水平横线.
<address>标签，为网页加入地址信息.在浏览器上显示的样式为斜体.
code标签，常用语单行的计算机代码。
<pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点。
ol-li前面为数字，默认从1开始
<table>标签中的<tr><th>内容默认居中</th></tr>
summary摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法：<table summary="表格简介文本">
标题
用以描述表格内容，标题的显示位置：表格上方。
语法：
<table>
<caption>标题文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
</table>
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
<a href="目标网址" target="_blank">click here!</a>
添加target标签后，点击链接将会新建一个窗口
mailto标签
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
<textarea rows="行数" cols="列数">文本</textarea>
单复选框，单选用radio，name需一致；复选框用CheckBox，name不需一致
下拉列表框，当需多选时可设置multiple属性
使用重置按钮，重置表单信息
<input type="reset" value="重置">
lable标签的使用
<form>
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
<label for="email">输入你的邮箱地址</label>
<input type="email" id="email" placeholder="Enter email">
</form>
CSS部分
行间距的单位em p{font-size:12px;line-height:1.6em;}
子选择器用>号来实现 .food>li{border:1px solid red;}
包含（后代）选择器 .first span{color:red;} 选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。
通用选择器 * {color:red;}
伪类选择符 用 : a:hover{color:red;}
关于继承，有一些元素是不能继承的
用！important提高标签的权值 p{color:red!important;}
文字
font-family:"Microsoft Yahei"
设置粗体 p span{font-weight:bold;}
斜体 p a{font-style:italic;}
下划线 text-decoration
删除线 text-decoration:line-through
文字缩进 p{text-indent:2em;} 2em为字体的两倍大小
行间距 p{line-height:1.5em;}
文字间的间隔 letter-spacing:50px;
为块状元素设置居中 text-align:center;
盒子模型
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>
利用display：none可将内联元素设置为块级元素
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
利用display：inline可将块状元素设为内联元素
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
利用display：inline-block可将元素设置为内联块状元素
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用像素（px）。
布局模型
在网页中，元素有三种布局模型：
1、流动模型（Flow）块状元素换行，内联元素不换行
2、浮动模型 (Float)
3、层模型（Layer）
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed) 不会随浏览器的滚动而滚动
relative和absolute定位结合使用： 参照定位的元素必须加入position:relative;
body{
font:12px/1.5em "宋体",sans-serif;//sans-serif为无衬线字体
}
想要让div中的div左右居中可以让需要居中的div的样式设置为 margin:0 auto;
<!hOCTYPE html>
<html>
<heah>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#big {
background-color: aqua;
width: 100%;
height: 100%;
}
.small {
width: 200px;
height: 200px;
background-color: antiquewhite;
margin:0 auto;
}
</style>
</heah>
<bohy>
<div id="big">
<div class="small">hhhh</div>
</div>
</bohy>
</html>
text-align:center只能让里面的文本图片等行内元素居中
要想让他在上下居中，我只能先在父级div中设置
display: flex;
justify-content: center;
align-items: center;
关于垂直居中 https://www.imooc.com/code/6368
全局居中 transform: translate(-50%,-50%);