整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
能夠?qū)懗龌镜捻撁妫ɡ锩姘瑘D片、各種標(biāo)簽和鏈接）
我們主要用的開發(fā)工具有chrome、hbuilder、Photoshop
瀏覽器是網(wǎng)頁顯示、運(yùn)行的平臺(tái)，常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我們平時(shí)稱為五大瀏覽器。
瀏覽器內(nèi)核又可以分成兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎 ：它負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入 CSS 等），以及計(jì)算網(wǎng)頁的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁的語法解釋會(huì)有不同，所以渲染的效果也不相同。
JS 引擎 則是解析 Javascript 語言，執(zhí)行 javascript語言來實(shí)現(xiàn)網(wǎng)頁的動(dòng)態(tài)效果。
最開始渲染引擎和 JS 引擎并沒有區(qū)分得很明確，后來 JS 引擎越來越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。有一個(gè)網(wǎng)頁標(biāo)準(zhǔn)計(jì)劃小組制作了一個(gè) ACID 來測(cè)試引擎的兼容性和性能。內(nèi)核的種類很多，如果加上沒什么人使用的非商業(yè)的免費(fèi)內(nèi)核，可能會(huì)有10多種，但是常見的瀏覽器內(nèi)核可以分這四種：Trident、Gecko、Blink、Webkit。
了解一點(diǎn)：移動(dòng)端的瀏覽器內(nèi)核主要說的是系統(tǒng)內(nèi)置瀏覽器的內(nèi)核。
Android手機(jī)而言，使用率最高的就是Webkit內(nèi)核，大部分國產(chǎn)瀏覽器宣稱的自己的內(nèi)核，基本上也是屬于webkit二次開發(fā)。
iOS以及WP7平臺(tái)上，由于系統(tǒng)原因，系統(tǒng)大部分自帶瀏覽器內(nèi)核，一般是Safari或者IE內(nèi)核Trident的
結(jié)構(gòu)標(biāo)準(zhǔn)：結(jié)構(gòu)用于對(duì)網(wǎng)頁元素進(jìn)行整理和分類，咱們主要學(xué)的是HTML。 最重要
表現(xiàn)標(biāo)準(zhǔn)：表現(xiàn)用于設(shè)置網(wǎng)頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。
行為標(biāo)準(zhǔn)：行為是指網(wǎng)頁模型的定義及交互的編寫，咱們主要學(xué)的是 Javascript
HTML（英文Hyper Text Markup Language的縮寫）中文譯為“超文本標(biāo)簽語言”。是用來描述網(wǎng)頁的一種語言。
所謂超文本，因?yàn)樗梢约尤雸D片、聲音、動(dòng)畫、多媒體等內(nèi)容，不僅如此，它還可以從一個(gè)文件跳轉(zhuǎn)到另一個(gè)文件，與世界各地主機(jī)的文件連接。
<h1> 我是一個(gè)大標(biāo)題 </h1>
注意： 體會(huì) 文本 標(biāo)簽 語言 幾個(gè)詞語
總結(jié)： HTML 作用就是用標(biāo)記標(biāo)簽來描述網(wǎng)頁，把網(wǎng)頁內(nèi)容在瀏覽器中展示出來。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>1.HTML標(biāo)簽：
作用所有HTML中標(biāo)簽的一個(gè)根節(jié)點(diǎn)。 最大的標(biāo)簽 根標(biāo)簽
2 head標(biāo)簽： 文檔的頭部
文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題、在 Web 中的位置以及和其他文檔的關(guān)系等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會(huì)真正作為內(nèi)容顯示給讀者。
注意在head標(biāo)簽中我們必須要設(shè)置的標(biāo)簽是title
3.title標(biāo)簽： 文檔的標(biāo)題
作用：讓頁面擁有一個(gè)屬于自己的標(biāo)題。
4.body標(biāo)簽：文檔的主體 以后我們的頁面內(nèi)容 基本都是放到body里面的
body 元素包含文檔的所有內(nèi)容（比如文本、超鏈接、圖像、表格和列表等等。）
在HTML頁面中，帶有“< >”符號(hào)的元素被稱為HTML標(biāo)簽，如上面提到的 HTML、head、body都是HTML骨架結(jié)構(gòu)標(biāo)簽。所謂標(biāo)簽就是放在“< >” 標(biāo)簽符中表示某個(gè)功能的編碼命令，也稱為HTML標(biāo)簽或 HTML元素
1.雙標(biāo)簽
<標(biāo)簽名> 內(nèi)容 </標(biāo)簽名>
該語法中“<標(biāo)簽名>”表示該標(biāo)簽的作用開始，一般稱為“開始標(biāo)簽（start tag）”，“</標(biāo)簽名>” 表示該標(biāo)簽的作用結(jié)束，一般稱為“結(jié)束標(biāo)簽（end tag）”。和開始標(biāo)簽相比，結(jié)束標(biāo)簽只是在前面加了一個(gè)關(guān)閉符“/”。
比如 <body>我是文字 </body>
2.單標(biāo)簽
<標(biāo)簽名 />
單標(biāo)簽也稱空標(biāo)簽，是指用一個(gè)標(biāo)簽符號(hào)即可完整地描述某個(gè)功能的標(biāo)簽。
比如 <br />
標(biāo)簽的相互關(guān)系就分為兩種：
1.嵌套關(guān)系
<head> <title> </title> </head>
2.并列關(guān)系
<head></head> <body></body>
首先 HTML和CSS是兩種完全不同的語言，我們學(xué)的是結(jié)構(gòu)，就只寫HTML標(biāo)簽，認(rèn)識(shí)標(biāo)簽就可以了。 不會(huì)再給結(jié)構(gòu)標(biāo)簽指定樣式了。
HTML標(biāo)簽有很多，這里我們學(xué)習(xí)最為常用的，后面有些較少用的，我們可以查下手冊(cè)就可以了。
排版標(biāo)簽
單詞縮寫： head 頭部. 標(biāo)題 title 文檔標(biāo)題
為了使網(wǎng)頁更具有語義化，我們經(jīng)常會(huì)在頁面中用到標(biāo)題標(biāo)簽，HTML提供了6個(gè)等級(jí)的標(biāo)題，即
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>
其基本語法格式如下：
<hn> 標(biāo)題文本 </hn>
<p> 文本內(nèi)容 </p>
<hr />是單標(biāo)簽
<br />
div span 是沒有語義的 是我們網(wǎng)頁布局主要的2個(gè)盒子 css+div
div 就是 division 的縮寫 分割， 分區(qū)的意思 其實(shí)有很多div 來組合網(wǎng)頁。
span, 跨度，跨距；范圍
語法格式：
<div> 這是頭部 </div> <span>今日價(jià)格</span>
在網(wǎng)頁中，有時(shí)需要為文字設(shè)置粗體、斜體或下劃線效果，這時(shí)就需要用到HTML中的文本格式化標(biāo)簽，使文字以特殊的方式顯示。
b i s u 只有使用 沒有 強(qiáng)調(diào)的意思 strong em del ins 語義更強(qiáng)烈
使用HTML制作網(wǎng)頁時(shí)，如果想讓HTML標(biāo)簽提供更多的信息，可以使用HTML標(biāo)簽的屬性加以設(shè)置。其基本語法格式如下：
<標(biāo)簽名 屬性1="屬性值1" 屬性2="屬性值2" …> 內(nèi)容 </標(biāo)簽名>
在上面的語法中，
1.標(biāo)簽可以擁有多個(gè)屬性，必須寫在開始標(biāo)簽中，位于標(biāo)簽名后面。
2.屬性之間不分先后順序，標(biāo)簽名與屬性、屬性與屬性之間均以空格分開。
3.任何標(biāo)簽的屬性都有默認(rèn)值，省略該屬性則取默認(rèn)值。
采取 鍵值對(duì) 的格式 key="value" 的格式
比如:
<hr width="400" />
屬性 是 寬度
值 是 400
單詞縮寫： image 圖像
HTML網(wǎng)頁中任何元素的實(shí)現(xiàn)都要依靠HTML標(biāo)簽，要想在網(wǎng)頁中顯示圖像就需要使用圖像標(biāo)簽，接下來將詳細(xì)介紹圖像標(biāo)簽<img />以及和他相關(guān)的屬性。其基本語法格式如下：
該語法中src屬性用于指定圖像文件的路徑和文件名，他是img標(biāo)簽的必需屬性。
<img src="圖像URL" />
單詞縮寫： anchor 的縮寫 [???k?(r)] 。基本解釋 錨, 鐵錨 的
在HTML中創(chuàng)建超鏈接非常簡(jiǎn)單，只需用標(biāo)簽環(huán)繞需要被鏈接的對(duì)象即可，其基本語法格式如下：
<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式">文本或圖像</a>
href：用于指定鏈接目標(biāo)的url地址，當(dāng)為標(biāo)簽應(yīng)用href屬性時(shí)，它就具有了超鏈接的功能。 Hypertext Reference的縮寫。意思是超文本引用
target：用于指定鏈接頁面的打開方式，其取值有self和blank兩種，其中self為默認(rèn)值，blank為在新窗口中打開方式。
注意：
1.外部鏈接 需要添加 http:// www.baidu.com
2.內(nèi)部鏈接 直接鏈接內(nèi)部頁面名稱即可 比如 < a href="index.html"> 首頁
3.如果當(dāng)時(shí)沒有確定鏈接目標(biāo)時(shí)，通常將鏈接標(biāo)簽的href屬性值定義為“#”(即href="#")，表示該鏈接暫時(shí)為一個(gè)空鏈接。
4.不僅可以創(chuàng)建文本超鏈接，在網(wǎng)頁中各種網(wǎng)頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。
通過創(chuàng)建錨點(diǎn)鏈接，用戶能夠快速定位到目標(biāo)內(nèi)容。
創(chuàng)建錨點(diǎn)鏈接分為兩步：
1.使用“a href=”#id名>“鏈接文本"</a>創(chuàng)建鏈接文本（被點(diǎn)擊的） <a href="#two"> 2.使用相應(yīng)的id名標(biāo)注跳轉(zhuǎn)目標(biāo)的位置。 <h3 id="two">第2集</h3>
base 可以設(shè)置整體鏈接的打開狀態(tài)
base 寫到 <head> </head> 之間
把所有的連接 都默認(rèn)添加 target="_blank"
在HTML中還有一種特殊的標(biāo)簽——注釋標(biāo)簽。如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標(biāo)簽。其基本語法格式如下：
<!-- 注釋語句 --> ctrl + / 或者 ctrl +shift + /
注釋內(nèi)容不會(huì)顯示在瀏覽器窗口中，但是作為HTML文檔內(nèi)容的一部分，也會(huì)被下載到用戶的計(jì)算機(jī)上，查看源代碼時(shí)就可以看到。
實(shí)際工作中，通常新建一個(gè)文件夾專門用于存放圖像文件，這時(shí)再插入圖像，就需要采用“路徑”的方式來指定圖像文件的位置。
根目錄 當(dāng)前目錄
路徑可以分為： 相對(duì)路徑和絕對(duì)路徑
以引用文件之網(wǎng)頁所在位置為參考基礎(chǔ)，而建立出的目錄路徑。因此，當(dāng)保存于不同目錄的網(wǎng)頁引用同一個(gè)文件時(shí)，所使用的路徑將不相同，故稱之為相對(duì)路徑。
絕對(duì)路徑以Web站點(diǎn)根目錄為參考基礎(chǔ)的目錄路徑。之所以稱為絕對(duì)，意指當(dāng)所有網(wǎng)頁引用同一個(gè)文件時(shí)，所使用的路徑都是一樣的
“D:webimglogo.gif”，或完整的網(wǎng)絡(luò)地址，例如“http://www.itcast.cn/images/l...”。
無序列表的各個(gè)列表項(xiàng)之間沒有順序級(jí)別之分，是并列的。其基本語法格式如下：
<ul> <li>列表項(xiàng)1</li> <li>列表項(xiàng)2</li> <li>列表項(xiàng)3</li> ...... </ul>
注意：
有序列表即為有排列順序的列表，其各個(gè)列表項(xiàng)按照一定的順序排列定義，有序列表的基本語法格式如下：
<ol> <li>列表項(xiàng)1</li> <li>列表項(xiàng)2</li> <li>列表項(xiàng)3</li> ...... </ol>
所有特性基本與ul 一致。
但是實(shí)際工作中， 較少用 ol img src="media/1.jpg" />
定義列表常用于對(duì)術(shù)語或名詞進(jìn)行解釋和描述，定義列表的列表項(xiàng)前沒有任何項(xiàng)目符號(hào)。其基本語法如下：
<dl> <dt>名詞1</dt> <dd>名詞1解釋1</dd> <dd>名詞1解釋2</dd> ... <dt>名詞2</dt> <dd>名詞2解釋1</dd> <dd>名詞2解釋2</dd> ... </dl>
在HTML網(wǎng)頁中，要想創(chuàng)建表格，就需要使用表格相關(guān)的標(biāo)簽。創(chuàng)建表格的基本語法格式如下：
<table> <tr> <td>單元格內(nèi)的文字</td> ... </tr> ... </table>
在上面的語法中包含三對(duì)HTML標(biāo)簽，分別為 table</table、tr</tr、td</td，他們是創(chuàng)建表格的基本標(biāo)簽，缺一不可，下面對(duì)他們進(jìn)行具體的解釋
1.table用于定義一個(gè)表格。
2.tr 用于定義表格中的一行，必須嵌套在 table標(biāo)簽中，在 table中包含幾對(duì) tr，就有幾行表格。
3.td /td：用于定義表格中的單元格，必須嵌套在<tr></tr>標(biāo)簽中，一對(duì) <tr> </tr>中包含幾對(duì)<td></td>，就表示該行中有多少列（或多少個(gè)單元格）。
注意：
1. <tr></tr>中只能嵌套<td></td> 2. <td></td>標(biāo)簽，他就像一個(gè)容器，可以容納所有的元素
表頭一般位于表格的第一行或第一列，其文本加粗居中，如下圖所示，即為設(shè)置了表頭的表格。設(shè)置表頭非常簡(jiǎn)單，只需用表頭標(biāo)簽th</th替代相應(yīng)的單元格標(biāo)簽td</td即可。
在使用表格進(jìn)行布局時(shí)，可以將表格劃分為頭部、主體和頁腳（頁腳因?yàn)橛屑嫒菪詥栴}，我們不在贅述），具體 如下所示：
<thead></thead>：用于定義表格的頭部。
必須位于<table></table> 標(biāo)簽中，一般包含網(wǎng)頁的logo和導(dǎo)航等頭部信息。
<tbody></tbody>：用于定義表格的主體。
位于<table></table>標(biāo)簽中，一般包含網(wǎng)頁中除頭部和底部之外的其他內(nèi)容。
表格的標(biāo)題： caption
定義和用法
caption 元素定義表格標(biāo)題。
<table> <caption>我是表格標(biāo)題</caption> </table>caption 標(biāo)簽必須緊隨 table 標(biāo)簽之后。您只能對(duì)每個(gè)表格定義一個(gè)標(biāo)題。通常這個(gè)標(biāo)題會(huì)被居中于表格之上。
跨行合并：rowspan 跨列合并：colspan
合并單元格的思想：
將多個(gè)內(nèi)容合并的時(shí)候，就會(huì)有多余的東西，把它刪除。 例如 把 3個(gè) td 合并成一個(gè)， 那就多余了2個(gè)，需要?jiǎng)h除。 公式： 刪除的個(gè)數(shù) = 合并的個(gè)數(shù) - 1
合并的順序 先上 先左
表格的學(xué)習(xí)要求： 能手寫表格結(jié)構(gòu)，并且能合并單元格。
表單控件：
包含了具體的表單功能項(xiàng)，如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕、重置按鈕等。
提示信息：
一個(gè)表單中通常還需要包含一些說明性的文字，提示用戶進(jìn)行填寫和操作。
表單域：
他相當(dāng)于一個(gè)容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務(wù)器的方法。如果不定義表單域，表單中的數(shù)據(jù)就無法傳送到后臺(tái)服務(wù)器。
在上面的語法中，input /標(biāo)簽為單標(biāo)簽，type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類型。除了type屬性之外，input /標(biāo)簽還可以定義很多其他的屬性，其常用屬性如下表所示。
label 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)簽）。
作用： 用于綁定一個(gè)表單元素, 當(dāng)點(diǎn)擊label標(biāo)簽的時(shí)候, 被綁定的表單元素就會(huì)獲得輸入焦點(diǎn)
如何綁定元素呢？
for 屬性規(guī)定 label 與哪個(gè)表單元素綁定。
<label for="male">Male</label> <input type="radio" name="sex" id="male" value="male">如果需要輸入大量的信息，就需要用到textarea/textarea標(biāo)簽。通過textarea控件可以輕松地創(chuàng)建多行文本輸入框，其基本語法格式如下：
<textarea cols="每行中的字符數(shù)" rows="顯示的行數(shù)"> 文本內(nèi)容 </textarea>使用select控件定義下拉菜單的基本語法格式如下
<select> <option>選項(xiàng)1</option> <option>選項(xiàng)2</option> <option>選項(xiàng)3</option> ... </select>注意：
在HTML中，form標(biāo)簽被用于定義表單域，即創(chuàng)建一個(gè)表單，以實(shí)現(xiàn)用戶信息的收集和傳遞，form中的所有內(nèi)容都會(huì)被提交給服務(wù)器。創(chuàng)建表單的基本語法格式如下：
<form action="url地址" method="提交方式" name="表單名稱"> 各種表單控件 </form>常用屬性：
注意： 每個(gè)表單都應(yīng)該有自己表單域。
如需轉(zhuǎn)載，請(qǐng)注明出處，否則將追究法律責(zé)任。
TML 段落
段落是通過 <p> 標(biāo)簽定義的。
實(shí)例
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>這是段落。</p>
<p>這是段落。</p>
<p>這是段落。</p>
<p>段落元素由 p 標(biāo)簽定義。</p>
</body>
</html>
[/demo]
注釋：瀏覽器會(huì)自動(dòng)地在段落的前后添加空行。（<p> 是塊級(jí)元素）
提示：使用空的段落標(biāo)記 <p></p> 去插入一個(gè)空行是個(gè)壞習(xí)慣。用 <br /> 標(biāo)簽代替它！（但是不要用 <br /> 標(biāo)簽去創(chuàng)建列表。不要著急，您將在稍后的篇幅學(xué)習(xí)到 HTML 列表。）
不要忘記結(jié)束標(biāo)簽
即使忘了使用結(jié)束標(biāo)簽，大多數(shù)瀏覽器也會(huì)正確地將 HTML 顯示出來：
實(shí)例
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>This is a paragraph.
<p>This is a paragraph.
<p>This is a paragraph.
<p>不要忘記關(guān)閉你的 HTML 標(biāo)簽！</p>
</body>
</html>
[/demo]
上面的例子在大多數(shù)瀏覽器中都沒問題，但不要依賴這種做法。忘記使用結(jié)束標(biāo)簽會(huì)產(chǎn)生意想不到的結(jié)果和錯(cuò)誤。
注釋：在未來的 HTML 版本中，不允許省略結(jié)束標(biāo)簽。
提示：通過結(jié)束標(biāo)簽來關(guān)閉 HTML 是一種經(jīng)得起未來考驗(yàn)的 HTML 編寫方法。清楚地標(biāo)記某個(gè)元素在何處開始，并在何處結(jié)束，不論對(duì)您還是對(duì)瀏覽器來說，都會(huì)使代碼更容易理解。
HTML 折行
如果您希望在不產(chǎn)生一個(gè)新段落的情況下進(jìn)行換行（新行），請(qǐng)使用 <br /> 標(biāo)簽：
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>
To break<br />lines<br />in a<br />paragraph,<br />use the br tag.
</p>
</body>
</html>
[/demo]
<br /> 元素是一個(gè)空的 HTML 元素。由于關(guān)閉標(biāo)簽沒有任何意義，因此它沒有結(jié)束標(biāo)簽。
<br> 還是 <br />
您也許發(fā)現(xiàn) <br> 與 <br /> 很相似。
在 XHTML、XML 以及未來的 HTML 版本中，不允許使用沒有結(jié)束標(biāo)簽（閉合標(biāo)簽）的 HTML 元素。
即使 <br> 在所有瀏覽器中的顯示都沒有問題，使用 <br /> 也是更長遠(yuǎn)的保障。
HTML 輸出 - 有用的提示
我們無法確定 HTML 被顯示的確切效果。屏幕的大小，以及對(duì)窗口的調(diào)整都可能導(dǎo)致不同的結(jié)果。
對(duì)于 HTML，您無法通過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。
當(dāng)顯示頁面時(shí)，瀏覽器會(huì)移除源代碼中多余的空格和空行。所有連續(xù)的空格或空行都會(huì)被算作一個(gè)空格。需要注意的是，HTML 代碼中的所有連續(xù)的空行（換行）也被顯示為一個(gè)空格。
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>春曉</h1>
<p>
春眠不覺曉，
處處聞啼鳥。
夜來風(fēng)雨聲，
花落知多少。
</p>
<p>注意，瀏覽器忽略了源代碼中的排版（省略了多余的空格和換行）。</p>
</body>
</html>
[/demo]
（這個(gè)例子演示了一些 HTML 格式化方面的問題）
HTML 標(biāo)簽參考手冊(cè)
標(biāo)簽 描述
<p> 定義段落。
<br /> 插入單個(gè)折行（換行）。
HTML 可定義很多供格式化輸出的元素，比如粗體和斜體字。
下面有很多例子，您可以親自試試：
HTML 文本格式化實(shí)例
文本格式化
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<b>This text is bold</b>
<br />
<strong>This text is strong</strong>
<br />
<big>This text is big</big>
<br />
<em>This text is emphasized</em>
<br />
<i>This text is italic</i>
<br />
<small>This text is small</small>
<br />
This text contains
<sub>subscript</sub>
<br />
This text contains
<sup>superscript</sup>
</body>
</html>
[/demo]
預(yù)格式文本
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<pre>
這是
預(yù)格式文本。
它保留了 空格
和換行。
</pre>
<p>pre 標(biāo)簽很適合顯示計(jì)算機(jī)代碼：</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
[/demo]
“計(jì)算機(jī)輸出”標(biāo)簽
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />
<p>
<b>注釋：</b>這些標(biāo)簽常用于顯示計(jì)算機(jī)/編程代碼。
</p>
</body>
</html>
[/demo]
地址
[demo]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>
[/demo]
縮寫和首字母縮寫
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
<p>在某些瀏覽器中，當(dāng)您把鼠標(biāo)移至縮略詞語上時(shí)，title 可用于展示表達(dá)的完整版本。</p>
<p>僅對(duì)于 IE 5 中的 acronym 元素有效。</p>
<p>對(duì)于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
</body>
</html>
[/demo]
文字方向
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>
如果您的瀏覽器支持 bi-directional override (bdo)，下一行會(huì)從右向左輸出 (rtl)；
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
</body>
</html>
[/demo]
塊引用
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
這是長的引用：
<blockquote>
這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。
</blockquote>
這是短的引用：
<q>
這是短的引用。
</q>
<p>
使用 blockquote 元素的話，瀏覽器會(huì)插入換行和外邊距，而 q 元素不會(huì)有任何特殊的呈現(xiàn)。
</p>
</body>
</html>
[/demo]
刪除字效果和插入字效果
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
<p>大多數(shù)瀏覽器會(huì)改寫為刪除文本和下劃線文本。</p>
<p>一些老式的瀏覽器會(huì)把刪除文本和下劃線文本顯示為普通文本。</p>
</body>
</html>
[/demo]
如何查看 HTML 源碼
您是否有過這樣的經(jīng)歷，當(dāng)你看到一個(gè)很棒的站點(diǎn)，你會(huì)很想知道開發(fā)人員是如何將它實(shí)現(xiàn)的？
你有沒有看過一些網(wǎng)頁，并且想知道它是如何做出來的呢？
要揭示一個(gè)網(wǎng)站的技術(shù)秘密，其實(shí)很簡(jiǎn)單。單擊瀏覽器的“查看”菜單，選擇“查看源文件”即可。隨后你會(huì)看到一個(gè)彈出的窗口，窗口內(nèi)就是實(shí)際的 HTML 代碼。
文本格式化標(biāo)簽
標(biāo)簽 描述
<b> 定義粗體文本。
<big> 定義大號(hào)字。
<em> 定義著重文字。
<i> 定義斜體字。
<small> 定義小號(hào)字。
<strong> 定義加重語氣。
<sub> 定義下標(biāo)字。
<sup> 定義上標(biāo)字。
<ins> 定義插入字。
<del> 定義刪除字。
<s> 不贊成使用。使用 <del> 代替。
<strike> 不贊成使用。使用 <del> 代替。
<u> 不贊成使用。使用樣式（style）代替。
“計(jì)算機(jī)輸出”標(biāo)簽
標(biāo)簽 描述
<code> 定義計(jì)算機(jī)代碼。
<kbd> 定義鍵盤碼。
<samp> 定義計(jì)算機(jī)代碼樣本。
<tt> 定義打字機(jī)代碼。
<var> 定義變量。
<pre> 定義預(yù)格式文本。
<listing> 不贊成使用。使用 <pre> 代替。
<plaintext> 不贊成使用。使用 <pre> 代替。
<xmp> 不贊成使用。使用 <pre> 代替。
引用、引用和術(shù)語定義
標(biāo)簽 描述
<abbr> 定義縮寫。
<acronym> 定義首字母縮寫。
<address> 定義地址。
<bdo> 定義文字方向。
<blockquote> 定義長的引用。
<q> 定義短的引用語。
<cite> 定義引用、引證。
<dfn> 定義一個(gè)定義項(xiàng)目。
瀏覽器通常會(huì)為其文本元素添加不同的樣式，以區(qū)別于普通文本。例如 em 和 cite 元素中的文本都是斜體的。又如，code 元素專門用來格式化腳本或程序中的代碼，該元素中的文本默認(rèn)使用等寬字體。內(nèi)容顯示的樣子與其使用的標(biāo)記沒有關(guān)系。因此不應(yīng)該為了讓文字變?yōu)樾斌w就使用 em 或 cite，添加樣式是 css 的事情。相反，應(yīng)該選擇能描述內(nèi)容的 HTML 元素。
<p> HTML <small> HyperText Markup Language </small> </p> <p> HTML <small> HyperText Markup Language </small> </p> 3.標(biāo)記重要和強(qiáng)調(diào)文本：strong元素 表示內(nèi)容的重要性，而 em元素 表示內(nèi)容的著重點(diǎn)。
<p> <strong> Warning:Do not approach the ... <em>
under any... </em> </strong> just because... </p>瀏覽器通常將 strong 文本以粗體顯示，em 文本以斜體顯示。可以用 CSS 將任何文本變?yōu)榇煮w或斜體，也可以覆蓋 strong 和 em 等元素的瀏覽器默認(rèn)顯示樣式。
4.創(chuàng)建圖：圖可以是圖表、照片、圖形、插圖、代碼片段以及其他類似的獨(dú)立內(nèi)容。通過引入 figure 和 figcaption，figcaption 是 figure 的標(biāo)題。
<figure>
<figcaption>
[標(biāo)題內(nèi)容]
</figcaption>
[插入內(nèi)容]
<img src = "xxx.png" width = "180" height = "143"
alt = "Reveue chart:Clothing 42%,Toys 36%, Food 22%" />
</figure>figcaption 元素并不是必須的，但是只有包含它，就必須是 figure 元素內(nèi)嵌的第一個(gè)或最后一個(gè)，且只能有一個(gè)。 5.指明引用或參考：使用 cite元素 可以指明對(duì)某內(nèi)容源的引用或參考。默認(rèn)以斜體顯示（不因使用 cite 引用人名）
<p> he Listend to <cite> Abbey Road </cite> </p>6.引述文本：有兩個(gè)特殊的元素用以標(biāo)記引述的文本。blockquote元素 表示單獨(dú)存在的引述，其默認(rèn)顯示在新的一行。而 q元素 則用于短的引用，如句子里面的引述。由于q元素存在夸瀏覽器問題，應(yīng)該避免使用，而是直接輸入引號(hào)。
<blockquote>
text...
</blockquote>
瀏覽器對(duì)應(yīng)q元素中的文本自動(dòng)加上語音的引號(hào)。
<p> And then she said,<q lang ="" > Have you read... </q> </p>7.指定時(shí)間：使用 time元素 標(biāo)記時(shí)間、日期或時(shí)間段。輸入 datetime="time" 指定格式日期，可以按照你希望的任何形式表示日期。
<time> 16:20 </time> <time > 2021-07-24 </time>
<time datetime= "2021-07-24"> Ochtober 24,2021 </time>8.解釋縮寫詞：使用 abbr元素 標(biāo)記縮寫詞并解釋其含義。（通常是使用括號(hào)提供縮寫詞的全稱是解釋縮寫詞最直接的方式）
<p> The <abbr title = "Notional Football league"> NFL </abbr> </p>
<p> But,that's ... <abbr> MLB </abbr> (Major league Baseball) ... </p>9.定義術(shù)語:在HTML中定義術(shù)語時(shí)，使用 dfn元素 對(duì)其作語義上的區(qū)分，首次定義術(shù)語通常會(huì)對(duì)其添加區(qū)別于其他文本格式，后續(xù)在使用術(shù)語時(shí)不再需要使用dfn對(duì)其進(jìn)行標(biāo)記。 （默認(rèn)以斜體顯示）
<p> The contesttant ... <dfn> pleonasm </dfn> </p>10.創(chuàng)建上標(biāo)和下標(biāo):比主體文本稍高或稍低的字母或數(shù)字分別成稱為上標(biāo)和下標(biāo)。可以使用 sub元素 創(chuàng)建下標(biāo)， sup元素 創(chuàng)建上標(biāo)。上標(biāo)和下標(biāo)字符會(huì)輕微地?cái)_亂行與行之間的均勻間距，但可以使用 CSS 修復(fù)這個(gè)問題。
<p> ... <a href = "#footnote-1" title = "REad footnote 1">
Text <sub> 1 </sub> </a> </p>
<p> ... <a href = "#footnote-1" title = "REad footnote 1">
Text <sup> 1 </sup> </a> </p>11.添加作者聯(lián)系方式: address元素 用以定于與 HTML 頁面或頁面一部分有關(guān)的作者、相關(guān)人士信息或組織聯(lián)系信息，通常位于頁面底部或相關(guān)部分內(nèi)。
<footer role = "contentinfo">
<p> <small> ? 2021 The Paper of ... </small> </p>
<address>
Hava a question or ... <a href = "site-feedback.html"> Contact our </a>
</address>
</footer>12.標(biāo)注編輯和不再準(zhǔn)確的文本:有時(shí)可能需要將在前一版本之后對(duì)頁面的編輯標(biāo)出來，或者對(duì)不再準(zhǔn)確、不再相關(guān)的文本進(jìn)行標(biāo)記。有兩種用于標(biāo)注編輯的元素：代表添加內(nèi)容的 ins元素 和標(biāo)記已經(jīng)刪除內(nèi)容的 del元素。
<li> <del> desks </del> </li>
<li> <ins> bicycle </ins> </li>通常對(duì)已刪除的文本加上刪除線，對(duì)插入的文本加入下劃線。標(biāo)記不再準(zhǔn)確或不再相關(guān)的文本
<li> <s> 5 p.m </s> SOLD </li>13.標(biāo)記代碼:如果你的內(nèi)容包含代碼示例或文件名，使用 code元素。
<p> The <code> showPhoto() </code> ... <code> < ;ul
id = "thumbanil" > </code> list </p>14.使用預(yù)格式化的文本：通常瀏覽器會(huì)將所有額外的回車和空格壓縮，并根據(jù)窗口大小自動(dòng)換行，預(yù)格式化的文本可以保持固有的換行和空格。pre元素。
<pre>
<code>
abbr[title] {
border-boottom: 1px dotted #000;
}
</code>如果要顯示包含 HTML 元素內(nèi)容，應(yīng)將包圍元素名稱的 < 和 > 分別改為對(duì)應(yīng)的字符實(shí)體<和 >否則瀏覽器就會(huì)試著顯示這些元素。大多數(shù)情況下推薦隊(duì) div 元素使用 white-space:pre 以替代 pre，因?yàn)榭崭窨赡軐?duì)這些內(nèi)容的語義非常重要。
15.突出顯示文本：類似文本中的熒光筆！HTML5 使用新的 mark元素 實(shí)現(xiàn)，引起讀者對(duì)特定文本片段的注意。對(duì)原生支持的瀏覽器將對(duì)該元素文字默認(rèn)加上黃色背景。
<p> GSL is <mark> YYDS! </mark> 16.創(chuàng)建換行：當(dāng)我們希望在文本中手動(dòng)強(qiáng)制文字進(jìn)行換行時(shí)，可以使用 br元素 (空元素).
<p> 123 <br />
456 <br />
</p>17.創(chuàng)建span：同 div 一樣，span元素 是沒有任何語義的，不同的是，span 只適合包圍字詞或短語內(nèi)容，而 div 適合包含塊級(jí)內(nèi)容。
<p> Gaudi's work was essentially useful.
<span lang ="es"> La Casa Mila </span> is an ...
</p>18.其他元素：
U元素：用來為文本添加下劃線。
wbr元素：表示可換行處。讓瀏覽器知道在哪里可以根據(jù)需要進(jìn)行換行（存在跨版本問題）。
ruby元素：旁注標(biāo)記是一種慣用符號(hào)，通常用于表示生僻字的發(fā)音。
bdi和bdo元素：如果某些頁面中混合了從左至右書寫的字符（如拉丁字符）和從右至左書寫的字符（如阿拉伯語）, 就可能使用到bdi和bdo元素。
meter元素：用 meter 元素表示分?jǐn)?shù)的值或已知范圍的測(cè)量結(jié)果。
<p> Project completion status: <meter value="0.60">80% completed </meter> </p>progress元素:表示某項(xiàng)任務(wù)完成的進(jìn)度，可用它表示一個(gè)進(jìn)度條。不能與 meter 混在一起使用。
<p> Current progress: <progress max="100" value="30"> 30% saved </progress> </p>在頁面插入圖片：輸入 <img src=image.url" />
<img src="xxx.jpg" alt="" /> 提供替代文本：在 img 標(biāo)簽內(nèi)，src 屬性及值的后面，輸入 alt=""； 輸入圖像出于某種原因沒有顯示時(shí)應(yīng)該出現(xiàn)的文本。指定圖像的尺寸：在 img 標(biāo)簽內(nèi)，src 屬性后輸入width="x", heigth="y"; 以像素為單位指定 x 和 y。
創(chuàng)建一個(gè)指向另一個(gè)網(wǎng)頁的鏈接：
輸入 <a href="URL"> 此處輸入鏈接標(biāo)簽 </a>
<a href = "http://www.baidu.com"> 百度一下 </a> 創(chuàng)建錨并鏈接到錨： 通常激活一個(gè)鏈接會(huì)將用戶帶到對(duì)應(yīng)網(wǎng)頁的頂端。如果想用戶跳至網(wǎng)頁特定區(qū)域，可以創(chuàng)建一個(gè)錨，并在鏈接中引用該錨。
1.創(chuàng)建錨： 輸入 id="anchor-name",其中 name 是在內(nèi)部用來標(biāo)識(shí)網(wǎng)頁中這部分內(nèi)容的文字。
2.創(chuàng)建錨鏈接到特定錨鏈接：輸入 <a href="#"anchor-name>，其中 anchor-name 是目標(biāo)的 id 屬性值。
3.輸入標(biāo)簽文本（默認(rèn)帶下劃線藍(lán)色字體），用戶激活該字體時(shí)將用戶帶到（1）步中引用的區(qū)域文本。
```<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Creating and Linking to Anchors</title>
</head>
<body>
<article>
<header>
<h1>Frequently Asked Questions (FAQ)</h1>
<nav>
<ul>
<li><a href="#question-01">Can an id have more than one word?</a></li>
<li><a href="#question-02">Can visitors bookmark anchor links?</a></li>
<li><a href="#question-03">My anchor link isn't working. What am I doing wrong?</a></li>
<li><a href="#question-04">How do I link to a specific part of someone else's webpage?</a></li>
</ul>
</nav>
</header>
<h2 id="question-01">Can an id have more than one word?</h2>
<p>Yes, your ids can have more than one word as long as there are no spaces. Separate each word with a dash instead.</p>
<h2 id="question-02">Can visitors bookmark anchor links?</h2>
<p>Yes, they can! And when they visit that link, the browser will jump down to the anchor as expected. Visitors can share the link with others, too, so all the more reason to choose meaningful anchor names.</p>
<h2 id="question-03">My anchor link isn't working. What am I doing wrong?</h2>
<p>The problem could be a few things. First, double-check that you added an id (without "#") to the element your link should point to. Also, be sure that the anchor in your link <em>is</em> preceded by "#" and that it matches the anchor id.</p>
<h2 id="question-04">How do I link to a specific part of someone else's webpage?</h2>
<p>Although you obviously can't add anchors to other people's pages, you can take advantage of the ones that they have already created. View the source code of their webpage to see if they've included an id on the part of the page you want to link to. (For help viewing source code, consult "The Inspiration of Others" in Chapter 2.) Then create a link that includes the anchor.</p>
</article>
</body>
</html>
作者：excavate
https://juejin.cn/post/6988467705909248014
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
