1.計算機中的文件
- 二進制文件
- 文本文件
區(qū)別：使用windows記事本打開是否出現(xiàn)亂碼
2.網(wǎng)頁組成
超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標準標記語言。
網(wǎng)頁一般由下面3部分組成
- HTML(HyperText Markup Language) —— 網(wǎng)頁具體內(nèi)容和結(jié)構(gòu)
- CSS(Cascading Style Sheets) —— 網(wǎng)頁的樣式（網(wǎng)頁美化的主要模塊）
- JavaScript —— 網(wǎng)頁的交互效果，比如對用戶鼠標事件做出響應(yīng)
1.HTML發(fā)展史
- HTML概念版——概念，沒有實施
- IETF組織維護HTML——HTML2.0
- W3C組織：新的HTML標準
- HTML4.01標準出現(xiàn)（里程碑）
- HTML 5標準（移動端的流行）
2.理解
- 超文本標記語言（標記語言不是編程語言）
- 超文本——核心：文本文件；擴展：可以間接的表示圖片、音頻、視頻等二進制數(shù)據(jù)
- 后綴名稱：.html .htm
- 網(wǎng)頁文檔：開發(fā)網(wǎng)頁，讓其他人可以通過瀏覽器來訪問我們的數(shù)據(jù)
HTML 5優(yōu)勢
- 跨平臺 利用HTML 5編寫的應(yīng)用幾乎可以在任何瀏覽器平臺運行使用
- 開發(fā)速度快 易用很多功能可以輕易完成
- 視頻和音頻支持且移動
當(dāng)手機瀏覽器完全支持HTML5那么開發(fā)移動項目將會和設(shè)計更小的觸摸顯示一樣簡單。這里有很多的meta標簽允許你優(yōu)化移動：
- viewport: 允許你定義viewport寬度和縮放設(shè)置；
- 全屏瀏覽器： ISO指定的數(shù)值允許Apple設(shè)備全屏模式顯示；
- Home screen icons: 就像桌面收藏，這些圖標可以用來添加收藏到IOS和Android移動設(shè)備的首頁。
3.HTML語法規(guī)則
- 文檔聲明：html網(wǎng)頁的第一行：
<!doctype html>表示聲明這是一個網(wǎng)頁文檔，可以通過瀏覽器進行展示 - 網(wǎng)頁內(nèi)容：網(wǎng)頁中所有的數(shù)據(jù)寫在一對
<html></html>標簽中 - 開始標簽
<html> - 結(jié)束標簽
</html> - 網(wǎng)頁屬性：用于設(shè)置網(wǎng)頁的編碼、網(wǎng)頁的標題等等內(nèi)容
- 寫在網(wǎng)頁中的
<head></head>標簽中 -
<meta charset=”utf-8”>聲明網(wǎng)頁中的字符編碼是UTF-8編碼 -
<title>網(wǎng)頁標題</title>聲明網(wǎng)頁的顯示標題部分的內(nèi)容 - 網(wǎng)頁展示數(shù)據(jù)：打開的瀏覽器網(wǎng)頁中，要查看的所有數(shù)據(jù)
- 寫在網(wǎng)頁中的
<body></body>標簽中 - 網(wǎng)頁內(nèi)容區(qū)域：頁頭、頁面主體、頁腳
<header></header> <section></section> <footer></footer>
常見的標簽
- 標題標簽：在網(wǎng)頁中，通過加大字號，加粗文本來表示的文本
<h1></h1> ~ <h6></h6>
- 段落標簽：網(wǎng)頁中標簽一段文本數(shù)據(jù)的標簽
<p>段落內(nèi)容</p> - 分隔線標簽：是在網(wǎng)頁中，增加一個水平的直線，將不同的內(nèi)容分離
<hr/> - 換行標簽：用于在網(wǎng)頁中，將文本數(shù)據(jù)或者其他數(shù)據(jù)添加一個換行
<br /> - 視頻播放標簽：用于將指定的視頻內(nèi)容，在網(wǎng)頁中進行播放
<video src=”” controls></video>視頻播放標簽 - src屬性：指定要播放的視頻的路徑、目錄、文件夾/文件
- controls屬性：用于展示播放器的控制臺（播放、暫停、聲音、全屏）
- autoplay屬性：是否自動播放
= 音頻播放標簽：用于將指定的音頻內(nèi)容，在網(wǎng)頁中進行播放
<audio src=””></audio>音頻播放標簽 - autoplay屬性設(shè)置自動播放
- 圖片標簽：用于展示指定位置的圖片
<img src=””/>展示指定位置的圖片，網(wǎng)頁中常用的圖片后綴名有三個
.jpg.gif.png
擴展標簽
<b>標簽：文本加粗
-
<i>標簽：文本斜體顯示 -
<em></em>標簽：文本斜體顯示
效果： 文本斜體顯示 -
<u>標簽：文本添加下劃線 -
<del>標簽：文本添加刪除線
效果：文本添加刪除線
表格標簽：用來在網(wǎng)頁中，通過表格的形式展示內(nèi)容的
<table></table>表格
<tr></tr>表格中要展示的標題
<td></td>表格中要展示的數(shù)據(jù)
合并單元格
橫向合并單元格：colspan[跨列]
縱向合并單元格：rowspan[跨行]
自動換行及頂端對齊
表格自動換行:<table style="word-break:break-all; word-wrap:break-all;">
表格頂端對齊：valign="top"
<small>標簽
<small>標簽將旁注 (side comments) 呈現(xiàn)為小型文本,即讓文本縮小20%進行展示。
免責(zé)聲明、注意事項、法律限制或版權(quán)聲明的特征通常都是小型文本。小型文本有時也用于新聞來源、許可要求。
對于由 em 元素強調(diào)過的或由 strong 元素標記為重要的文本，small 元素不會取消對文本的強調(diào)，也不會降低這些文本的重要性。
HTML用各種標簽/標記，來標記內(nèi)容的
標記好內(nèi)容之后，要對內(nèi)容進行修飾【尺寸、位置、大小、顏色】
網(wǎng)頁一：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>網(wǎng)上轉(zhuǎn)賬電子賬單</title>
</head>
<body>
<h1>工商銀行電子匯款單</h1>
<table border="1" cellpadding="10" cellspacing="0" >
<tr>
<td colspan='2'><b>回單類型</b></td>
<td>網(wǎng)上轉(zhuǎn)賬匯款</td>
<td colspan="2"><b>指令序號</b></td>
<td>HQH0000000000000013878172</td>
</tr>
<tr>
<td rowspan="4"><b>收<br/>款<br/>人</b></td>
<td>戶名</td>
<td>小許</td>
<td rowspan="4" width="10"><b>付<br/>款<br/>人</b></td>
<td>戶名</td>
<td>老劉</td>
</tr>
<tr>
<td><b>卡號</b></td>
<td>000000000001</td>
<td><b>卡號</b></td>
<td>000000000002</td>
</tr>
<tr>
<td>地區(qū)</td>
<td>南京</td>
<td>地區(qū)</td>
<td>杭州</td>
</tr>
<tr>
<td><b>網(wǎng)點</b></td>
<td>工商江蘇南京業(yè)務(wù)處理中心</td>
<td><b>網(wǎng)點</b></td>
<td>江蘇徐州業(yè)務(wù)中心</td>
</tr>
<tr>
<td colspan="2"><b>幣種</b></td>
<td>人民幣</td>
<td colspan="2"><b>鈔匯標志</b></td>
<td>鈔票</td>
</tr>
<tr>
<td colspan="2"><b>金額</b></th>
<td>1.00元</td>
<td colspan="2"><b>手續(xù)費</b></td>
<td>0.57元</td>
</tr>
<tr>
<td colspan="2"><b>合計</b></td>
<td colspan="4">人民幣(大寫)：壹圓整</td>
</tr>
<tr>
<td colspan="2"><b>交易時間</b></td>
<td><i>2017年6月1日</i></td>
<td colspan="2"><b>時間戳</b></td>
<td><i>2017-06-01-13.00.00.00000</i></td>
</tr>
</table>
<p>票據(jù)打印時間：2017-06-01 15:00:12</p>
<p><del>票據(jù)打印單位：江蘇徐州業(yè)務(wù)中心</del></p>
<p>操作員：大曾</p>
</body>
</html>
網(wǎng)頁二：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>豆瓣電影</title>
</head>
<body>
<h2>熱門電影板塊</h2>
<hr/>
<table width="800">
<tr>
<td><b>最近熱門電影</b></td>
<td>熱門</td>
<td>最新</td>
<td>豆瓣評分</td>
<td>冷門佳片</td>
<td>華語</td>
<td>歐美</td>
<td>韓國</td>
<td>日本</td>
<td width="100"></td>
<td>更多>></td>
</tr>
</table>
<hr/>
<table >
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>猜火車4.1</td>
<td>貝爾科實驗6.0</td>
<td>加州公路巡警6.8</td>
<td>歌兒不絕6.3</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>明日的我與昨日的我</td>
<td>速度與激情8</td>
<td>激素特工</td>
<td>金剛狼3：殊死一戰(zhàn)</td>
</tr>
</table>
</body>
</html>
4.HTML基礎(chǔ)操作
1.常見標簽
div標簽：塊標簽
ul標簽：無序列表標簽
ol標簽：有序列表標簽
dl標簽：圖文混排列表標簽
簡單樣式：
list-style:none;去掉列表標簽前面的序號
list-style-image:url(“abc.png”);使用指定的圖片替換列表的序號
form表單標簽：表單標簽在頁面上沒有任何展示，專門用來進行數(shù)據(jù)提交的
2.表單元素標簽
- 表單標簽要配合表單元素標簽一起使用
- 表單元素標簽主要用與：文本輸入框、密碼輸入框、單選按鈕、復(fù)選框、下拉列表框、文件選擇框各種框框
label用來寫輸入框的提示信息，
for屬性：表示這是哪個標簽的提示信息，for的值是另一個標簽的id值
文本輸入框：
<input type=”text”..
密碼輸入框：<input type=”password”..
提交按鈕：<input type=”submit”..
3.API文檔
- API文檔：application program interface(應(yīng)用程序開發(fā)接口)
- API文檔：對應(yīng)用程序開發(fā)接口的描述文檔——說明書
【編程語言：教程文檔，向?qū)臋n，操作文檔，API文檔】
HTML API文檔：
- HTML沒有官方的API文檔，而是很多開發(fā)人員組織起來編寫的較為詳細API說明文檔
- 通常比較常用的一個文檔：DHTML文檔（包含了HTML標簽描述、CSS樣式描述等等）
你可以在編程的過程中，通過API查詢自己想要的標簽的方法。
通過寫一個簡單的登錄和注冊頁面來理解具體操作
網(wǎng)頁三
<!-- 簡單的登錄頁面 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登錄頁面</title>
</head>
<body>
<from action = 'http://www.baidu.com' method='post'>
<label for='username'>賬號</label>
<input type="text" id='username' name="username" placeholder="請輸入賬號">
<br>
<label for='password'>密碼</label>
<input type="password" id="password" name="password" placeholder="請輸入密碼">
<br>
<input type="submit" value="登錄">
</from>
</body>
</html>
網(wǎng)頁四
<!-- 簡單的注冊頁面 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注冊頁面</title>
</head>
<body>
<form action="#">
<label for="username">賬號</label>
<input type="text" id="username" name="username" placeholder="請輸入賬號">
<br>
<label for="password">密碼</label>
<input type="password" id="password" name="passwo" placeholder="請輸入密碼">
<br>
<label for="gender">性別</label>
<input type="radio" id="gender1" name="gender">男
<input type="radio" id="gender2" name="gender">女
<input type="radio" id="gender3" checked="true" name="gender">待定
<br>
<label for="fav">愛好</label>
<input type="checkbox" value="LOL" checked>英雄聯(lián)盟
<input type="checkbox" value="WZRY">王者榮耀
<input type="checkbox" value="SWXF">守望先鋒
<input type="checkbox" value="DOTA">DOTA2
<br>
<label for="headerImg">頭像</label>
<input type="file" id="headerImg">
<br>
<label for="address">地址</label>
<select id="address" name="address">
<option value="SH">上海</option>
<option value="BJ">北京</option>
<option value="SZ">深圳</option>
</select>
<br>
<label for="introduction">自我介紹</label>
<textarea rows="10" cols="80"></textarea>
<br>
<input type="button" value="普通按鈕">
<button>H5 普通按鈕</button>
<input type="reset" value="重置">
<input type="submit" value="注冊">
</form>
</body>
</html>
4.超鏈接標簽
<a style="font-size:32px;">百度</a>
a超鏈接標簽
href屬性，表示要打開的網(wǎng)絡(luò)地址
- 可以指向一個網(wǎng)絡(luò)地址
- 可以指向一個本地文件
<!-- 超鏈接的打開方式 -->
<a target="_blank">新的打開方式:百度</a>
這里的target屬性是_blank,指的是從新的空白頁打開一個網(wǎng)頁
備注：web項目開發(fā)時常見的文件名稱
網(wǎng)站首頁：index.html / index.htm / main.html / main.htm / default.html / default.htm
登錄頁面：login.html / login.htm / signin.html / signin.htm
注冊頁面：regist.html / register.html / signup.html
5.CSS樣式操作的三種方法
1.元素內(nèi)嵌樣式
<li style="width:800px;color:orange;font-weight:bold;"> 只要我人生的程序不終止，你的名字一直都是我的心事 </li>
優(yōu)點：操作方便，易于理解;
缺點：如果樣式內(nèi)容太多，就會讓一個簡單的標簽變得非常的臃腫，不利于代碼的維護。
2.文檔內(nèi)嵌樣式
樣式寫在網(wǎng)頁中的
<style>標簽中，將樣式代碼集中起來進行管理
<head>
<style>
#info{color:blue;font-size:18px;font-weight:bold;border:#069 1px dashed;}
</style>
</head>
<body>
<ol>
<li id="info">
定義一個變量：我們的相愛時間<br>
如若我們之間是真愛<br>
那么從我們相愛的那一秒起，我們將無限循環(huán)，執(zhí)子之手，與子偕老</li>
</ol>
</body>
優(yōu)點：將我們的HTML標簽和CSS代碼進行了分離，方便我們對HTML代碼或者CSS樣式進行修改;
缺點：HTML代碼和CSS代碼還是在一個文件中
3.外部引用
外部引用樣式
同一文件夾里寫一個demo.css文件
#desc{font-size:22px;color:red;font-family:"楷體" }
demo文件中代碼
<head>
<link rel="stylesheet" type="css" href="demo03.css">
</head>
<body>
<ol>
<li id="desc">遍歷整個世界，只為找到你。<br>當(dāng)我發(fā)現(xiàn)你是我的真愛時，<br>
那么你就是我要找尋的人。</li>
</ol>
</body>
三種樣式操作：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>樣式操作</title>
<link rel="stylesheet" type="css" href="demo03.css">
<style >
#info{color:blue;font-size:18px;font-weight:bold;border: #069 1px dashed}
</style>
</head>
<body>
<p style="font-size: 26px">
<b>程序員的三行情詩</b>
</p>
<hr>
<ol>
<li style="width:800px;color:orange;font-weight:bold;">只要我人生的程序不終止，你的名字一直都是我的心事</li>
<br>
<li id="info">定義一個變量：我們的相愛時間<br>如若我們之間是真愛<br>那么從我們相愛的那一秒起，我們將無限循環(huán)，執(zhí)子之手，與子偕老</li>
<br>
<li id="desc">遍歷整個世界，只為找到你。<br>當(dāng)我發(fā)現(xiàn)你是我的真愛時，<br>
那么你就是我要找尋的人。</li>
</ol>
</body>
</html>
6.CSS標簽選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標簽選擇器</title>
<style>
/*通配符選擇器*/
*{padding: 0;margin: 0;color:green;}/*padding表示內(nèi)邊距，margin表示外邊距*/
/*class選擇器*/
.intro{color:blue;font-size: 22px;}
/*標簽選擇器*/
p{color: red;}
/*id選擇器*/
#choice{color:orange;font-size: 28px;}
</style>
</head>
<body>
<p>使用標簽選擇器</p>
<p>標簽選擇器，可以通過標簽名稱來選擇所有的該名稱的標簽</p>
<p>直接在css代碼中，寫標簽的名稱，用來修飾網(wǎng)頁中一些特殊標簽的樣式</p>
<p>請謹慎使用，選擇范圍太大</p>
<hr>
<span id="choice">id選擇器</span>
<span>id選擇器通過在CSS代碼中，使用符號"#name",name指的就是標簽的id屬性名</span>
<span>id選擇器，只會選擇唯一的一個標簽，用來修飾網(wǎng)頁中一些標簽的樣式</span>
<hr>
<div class="intro">class選擇器</div>
<span class="intro">class選擇器，通過符號".name"，name指代的標簽class屬性值</span>
<b class="intro">class表示類型的意思</b>
<hr>
<div>通配符選擇器：*,可以選擇頁面中所有的標簽</div>
<div>慎重使用，一般情況下，使用*來清除頁面中的標簽的邊距</div>
</body>
</html>
7.其他選擇
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>其他選擇器</title>
<style>
/* 1. 其他選擇器*/
/* 群組選擇器：可以將多個基本選擇器，使用逗號進行分割，然后添加統(tǒng)一的樣式*/
p,span,div,#choice,.intro{color:red;}
/* 子標簽選擇器:修飾的是當(dāng)前標簽的直接子元素，不會影響孫子元素; */
#list > li{color:orange;font-weight:bold;}
/* 包含選擇器：修飾當(dāng)前標簽中指定的所有被包含的元素*/
/* #list li {color:blue;font-weight:bold;} */
/* 2. 選擇器的優(yōu)先級 */
/*標簽選擇器修飾input,樣式也是有優(yōu)先級，如class選擇器的優(yōu)先級就沒有id選擇器高*/
input,#username{border:none;border-bottom:solid 2px #888;}
.username{border-bottom:solid 2px red;}
/* 3. 屬性選擇器 */
/* 完整屬性 */
/* input[type="password"]{border:solid 1px red;} */
/* input[type^="pass"]{border:solid 1px blue;} */
[type^="pass"]{border:solid 1px red;}
/* 4. 偽類選擇器 是在后面添加冒號，然后添加一個關(guān)鍵詞，來選擇特殊的標簽*/
/* 慎重使用 ，通常情況下，可以通過id/class/標簽選擇器完全替代*/
/* #list li:nth-child(2){color:red;} */
#list li:hover{color:red;} /* 鼠標滑過的時候會高亮*/
</style>
</head>
<body>
<p>使用標簽選擇器</p>
<p>標簽選擇器，可以通過標簽名稱來選擇頁面中所有的該名稱的標簽</p>
<p>直接在css代碼中，寫標簽的名稱，然后在后面的大括號中添加樣式</p>
<p>慎重使用，選擇范圍太大</p>
<hr/>
<span id="choice">id選擇器</span>
<span>id選擇器通過在CSS代碼中，使用符號“#name”，name指的就是標簽的id屬性值</span>
<span>id選擇器，只會選擇唯一的一個標簽，用來修飾網(wǎng)頁中一些特殊標簽的樣式</span>
<hr/>
<div class="intro">class選擇器</div>
<span class="intro">class選擇器，通過符號".name"，name指代的是標簽的class屬性值</span>
<b class="intro">class表示類型的意思</b>
<hr/>
<div>通配符選擇器：*，可以選擇頁面中所有的標簽</div>
<div>慎重使用，一般情況下，使用*來清除頁面中的標簽的邊距</div>
<ul id="list">
<li>尚未配妥劍</li>
<li>轉(zhuǎn)眼便是江湖</li>
<li>愿歷盡風(fēng)帆</li>
<li>歸來仍少年</li>
<ul>
<li>不要停止奔跑</li>
<li>不要回顧來路</li>
<li>來路無可眷戀</li>
<li>值得期待的只有遠方</li>
</ul>
</ul>
<hr/>
<form action="">
<input id="username" class="username" type="text" placeholder="請輸入賬號"><br />
<input type="password" username="password" placeholder="請輸入賬號"><br />
</form>
</body>
</html>
8.其他樣式
text-shadow是給文本添加陰影效果，box-shadow是給元素塊添加周邊陰影效果。
語法：box-shadow: h-shadow v-shadow blur spread color inset;
注釋：box-shadow 向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關(guān)鍵詞來規(guī)定。省略長度的值是 0。
box-shadow屬性的參數(shù)設(shè)置取值：
-陰影類型：此參數(shù)可選。如不設(shè)值，默認投影方式是外陰影；如取其唯一值“inset”，其投影為內(nèi)陰影；
-X-offset:陰影水平偏移量，其值可以是正負值。如果值為正值，則陰影在對象的右邊，其值為負值時，陰影在對象的左邊；
Y-offset:陰影垂直偏移量，其值也可以是正負值。如果為正值，陰影在對象的底部，其值為負值時，陰影在對象的頂部；
陰影模糊半徑：此參數(shù)可選，，但其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；
陰影擴展半徑：此參數(shù)可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值時，則縮??；
陰影顏色：此參數(shù)可選。如不設(shè)定顏色，瀏覽器會取默認色
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平陰影的位置。允許負值。 |
| v-shadow | 必需。垂直陰影的位置。允許負值。 |
| blur | 可選。模糊距離。 |
| spread | 可選。陰影的尺寸。 |
| color | 可選。陰影的顏色。請參閱 CSS 顏色值。 |
| inset | 可選。將外部陰影 (outset) 改為內(nèi)部陰影。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>常見樣式</title>
<link rel="stylesheet" href="">
<style>
*{margin:0;padding:0;}
#container{
/*內(nèi)容樣式*/
color:white;
font-size:40px;
font-family:"楷體";
font-weight:bolder;
text-align:center;
line-height:300px;
text-shadow: 10px -10px 10px red;
/*尺寸樣式*/
width:1050px;
height:300px;
border:solid 2px orange;
border-bottom:10px solid red;
border-radius:10px;
box-shadow:5px 5px 3px #888;
background:pink;
}
#container a{color:white;
text-decoration:none;
}
#th{width:1027px;height:515px;padding:10px;border:solid 10px #888;border-radius:5px;}
#th img{width:1027px;height:515px;border-radius:5px;}
</style>
</head>
<body>
<div id="container">
聽說粉色會令人遐想...<a >煎蛋網(wǎng)</a>
</div>
<div id="th">
</div>
</body>
</html>
9.block，inline和inline-block概念和區(qū)別
1.概念
block和inline這兩個概念是簡略的說法，完整確切的說應(yīng)該是 block-level elements (塊級元素) 和 inline elements (內(nèi)聯(lián)元素)。block元素通常被現(xiàn)實為獨立的一塊，會單獨換一行；inline元素則前后不會產(chǎn)生換行，一系列inline元素都在一行內(nèi)顯示，直到該行排滿。
大體來說HTML元素各有其自身的布局級別（block元素還是inline元素）：
- 常見的塊級元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
- 常見的內(nèi)聯(lián)元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是這個是個大概的說法，每個特定的元素能包含的元素也是特定的，所以具體到個別元素上，這條規(guī)律是不適用的。比如 P 元素，只能包含inline元素，而不能包含block元素。
一般來說，可以通過display:inline和display:block的設(shè)置，改變元素的布局級別。
2.block，inline和inlinke-block細節(jié)對比
display:block
block元素會獨占一行，多個block元素會各自新起一行。默認情況下，block元素寬度自動填滿其父元素寬度。
block元素可以設(shè)置width,height屬性。塊級元素即使設(shè)置了寬度,仍然是獨占一行。
block元素可以設(shè)置margin和padding屬性。display:inline
inline元素不會獨占一行，多個相鄰的行內(nèi)元素會排列在同一行里，直到一行排列不下，才會新?lián)Q一行，其寬度隨元素的內(nèi)容而變化。
inline元素設(shè)置width,height屬性無效。
inline元素的margin和padding屬性，水平方向的padding-left,padding-right,margin-left,margin-right都產(chǎn)生邊距效果；但豎直方向的padding-top,padding-bottom,margin-top,margin-bottom不會產(chǎn)生邊距效果。display:inline-block
簡單來說就是將對象呈現(xiàn)為inline對象，但是對象的內(nèi)容作為block對象呈現(xiàn)。之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
