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%);