a
鏈接，鏈到一個地址
<a target="_blank" title="饑人谷">饑人谷.com</a>
<a href="#">饑人谷.com</a>："#"是定位到頁面上的某點的
<a href="#about">饑人谷.com</a>
<a href="/getCourse">饑人谷.com</a>
img
展示一張圖片
alt 是指如果前面的圖片鏈接有問題，會有顯示，
還有就是對于殘障人士，方便理解，收索引擎的優化有好處，以及可以知道圖片是什么
img是只閉合標簽，最后不需要加 /
div
語義為“一大塊”，用于給頁面劃分區塊，讓結構更清晰
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
id和class的區別，id：給一個元素取名字，去命名給元素添加標記，以至于下次可以查詢
。class代表一類的東西，不同元素可以加class
ul li：無序列表
ul: unsort list 無序列表
用于表示并列的內容
ul的直接子元素是li
可以嵌套
<ul class="nav">
<li><a href="#">首頁</a></li>
<li><a href="#">關于</a></li>
<li>
<a href="#">更多</a>
<ul>
<li>聯系</li>
<li>地址</li>
</ul>
</li>
</ul>
ol li
ol: order list 有序序列表 用于表示帶步驟或者編號的并列內容 ol的直接子元素只能是li 可以嵌套
<h2>把大象關到冰箱的步驟</h2>
<ol>
<li>把大象變小</li>
<li>打開冰箱</li>
<li>把大象塞進去</li>
</ol>
dl dt dd
用于展示一系列 “標題:內容... ”的場景
<dl>
<dt>商品名稱:</dt>
<dd>青花瓷</dd>
<dt>特征:</dt>
<dd>白色</dd>
<dd>圓口</dd>
<dt>商品介紹</dt>
<dd>這是一個年代久遠的瓷器，很貴，易碎</dd>
</dl>
button
按鈕
<button>點我</button>
strong em span
span 最弱，這三個都可以標記來加樣式
em 需要強調一下
strong 很重要、強調性更強
<p>優惠 <strong>100</strong> 元</p>
<p>小谷 <em>2</em> 歲了</p>
iframe
用于在當前頁面嵌入一個頁面 注意跨域操作問題
<iframe src="http://jirengu.com" name="myPage"></iframe>
<p><a target="myPage">W3Cschool.cc</a></p>
table：做表格時用table
用于展示表格，不要用來做布局 thead tbody tfoot可省略，
瀏覽器會自動添加 border-collapse: collapse;用于合并邊框
<table>
<thead>
<tr>
<th>姓名</th>
<th>年紀</th>
</tr>
</thead>
<tbody>
<tr>
<th>姓名</th>
<th>年紀</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
</tr>
<tr>
<td>小花</td>
<td>20</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<table>
<tr>
<th>姓名</th>
<th>年紀</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
</tr>
<tr>
<td>小花</td>
<td>20</td>
</tr>
</table>
現在一般用這個：
<table>
<tr>
<th>name</th>
<th>sex</th>
</tr>
<tr>
<td>小明</td>
<td>男</td>
</tr>
<tr></tr>
</table>
DOCTYPE meta
<!DOCTYPE html>
D指文檔對象模型，標準模式：加上這個東西告訴瀏覽器該怎樣去渲染，
混雜模式：不加這個東西，瀏覽器以寬松的方式去渲染，在不同的瀏覽器以不同的方式渲染
<html lang="zh">：告訴瀏覽器用了什么語言
!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">：編碼方式
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
：雙核瀏覽器
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
用于移動端的展示合理
<meta name="keywords" content="前端 饑人谷">
<meta name="description" content="最有愛的前端學習社區">
搜索引擎優化
<title>Document</title>
</head>
塊級元素和行類元素的區別
塊級元素可以占據以整行的空間，
行類元素只占本身的寬度a鏈接，span，strong，img em button
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
