h1~h6標(biāo)題 p 段落
- h1：代表頁面最大的標(biāo)題
- h2：代表二級標(biāo)題
- h3：更弱的標(biāo)題
- p：段落阵漏，表示一大段文字
a 連接趣兄，連接到一個(gè)地址
<a target = "_blank" title = "筱琦">筱琦.com</a>
<a href = "#">筱琦.com</a>
<a href = "#about">筱琦.com</a>
<a href = "/getCourse">筱琦.com</a>
href后是跳轉(zhuǎn)地址嗤攻，必備屬性。
title屬性：鼠標(biāo)懸浮到標(biāo)簽上的時(shí)候看到的內(nèi)容诽俯，不需要點(diǎn)擊標(biāo)簽妇菱，便可以知道承粤。
#代表的是某點(diǎn)，點(diǎn)擊不會跳轉(zhuǎn)也不會刷新闯团。
#about：點(diǎn)擊會跳轉(zhuǎn)id=about的鏈接上辛臊。
/相對于跟路徑。
img標(biāo)簽用于展示一張圖片房交，自閉合標(biāo)簽彻舰，不需要添加內(nèi)容。
<img src = "http://js.jirengu.com/images/dave.min.svg" alt = "">
alt作用：
1.當(dāng)圖片無法顯示的時(shí)候候味，alt會給出一段說明文字刃唤，默認(rèn)不展示，
2. 對于視力有問題的人白群，用機(jī)器的時(shí)候尚胞，會告訴他們這個(gè)地方是一張圖片
3. 便于搜索引擎搜索。
div標(biāo)簽帜慢，語義是“一大塊”笼裳，用于給頁面劃分區(qū)塊，讓結(jié)構(gòu)更清晰粱玲。
<div id = "header">......</div>
<div id = "content">......</div>
<div id = "footer">......</div>
id給頁面的元素取一個(gè)唯一的名字躬柬，class代表一類的東西，不同的元素可以添加同一個(gè)class抽减。
ul li：定義一個(gè)無序列表
- ul：unsort list無序列表
- 用于表示并列的內(nèi)容
- ul的直接子元素一定是li允青，不可以在里面添加P等其他標(biāo)簽
- 可以嵌套
ol li：定義一個(gè)有序列表
- ol：order list有序列表
- 用于表示帶步驟或者編號的并列內(nèi)容，代碼寫完默認(rèn)情況下會有123等順序卵沉。
- ul的直接子元素一定是li昧廷，不可以在里面添加P等其他標(biāo)簽
- 可以嵌套
dl dt dd標(biāo)簽
用于展示一系列“標(biāo)題：內(nèi)容...”的場景
<dl>
<dt>姓名：</dt>
<dd>李筱琦</dd>
<dt>性質(zhì)：</dt>
<dd>女</dd>
<dd>23歲</dd>
<dt>最后描述</dt>
<dd>是一名畢業(yè)的大學(xué)生</dd>
</dl>
**嵌套關(guān)系要弄明白，嵌套關(guān)系不要弄混偎箫。**
主要用于頁面表單的輸入。
1.png
button： 按鈕
<button>點(diǎn)我</button>
strong em
- em：需要強(qiáng)調(diào)一下皆串。
- strong：很重要淹办，加粗，重點(diǎn)強(qiáng)調(diào)恶复。
- span：對于一些元素怜森，相對里面?zhèn)€別的內(nèi)容添加一下樣式，可以用span把它包圍住谤牡，之后用CSS定義其顏色副硅。無任何語義。
iframe：用于嵌入一個(gè)頁面
用于在當(dāng)前頁面嵌入一個(gè)頁面翅萤，主語跨域操作問題
以下代碼當(dāng)前頁面上會有饑人谷的頁面恐疲，點(diǎn)擊w3cschool.cc會跳轉(zhuǎn)到w3cschool.cc的頁面。即打開w3c的連接是在iframe里面打開，注意target的值和iframe的name值一樣培己。
<iframe src = "https://jirengu.com" name = "mypage"></iframe>
<p><a target = "mypage">w3cschool.cc</a></p>
應(yīng)用場景：
- 做一個(gè)簡單的教程
- 現(xiàn)在有一個(gè)網(wǎng)站的后臺管理頁面碳蛋，這個(gè)管理頁面上有很多的區(qū)塊，每一個(gè)區(qū)塊是一個(gè)圖表省咨，每個(gè)圖表在其他的地方都可以用肃弟，就可以把一個(gè)圖表作為一個(gè)iframe放到頁面上，這樣的打開頁面就可以看到很多圖表零蓉，但是這個(gè)圖表在其他的網(wǎng)站想要使用笤受，寫一個(gè)iframe之后把網(wǎng)址嵌入進(jìn)去就可以了，來達(dá)到復(fù)用東西敌蜂。
- 當(dāng)前的Iframe的地址（域名）和你當(dāng)前頁面的地址（域名）是同一個(gè)的話箩兽，可以用js操作頁面的內(nèi)容，但如果不是同一個(gè)的話紊册，JS沒辦法操作比肄，只能展示。
table 用于展示表格table囊陡，tr（一行）芳绩，th（標(biāo)題里的一列，顯示內(nèi)容加粗）撞反，tr妥色，td（普通行里的一列，顯示內(nèi)容不加粗）
用于展示表格遏片，不要用來布局嘹害，thead，tbody吮便，tfoot可省略笔呀，瀏覽器會自動添加border-collapse:collapse；用于合并邊框髓需。
<table>
<tr>
<th>姓名</th>
<th>年紀(jì)</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
</tr>
<tr>
<td>小花</td>
<td>20</td>
</tr>
</table>
凡是和樣式相關(guān)的许师，都是由CSS控制，標(biāo)簽只是起到語義和結(jié)構(gòu)化的作用
3.png
一些其他標(biāo)簽：
- <!DOCTYPE html>：文檔對象模型
- 混雜模式：不加<!DOCTYPE html>僚匆，瀏覽器用自己的方式渲染頁面微渠。
- 標(biāo)準(zhǔn)模式:加<!DOCTYPE html>，告訴瀏覽器如何渲染頁面咧擂。
- <!DOCTYPE html>的作用是讓瀏覽器進(jìn)入標(biāo)準(zhǔn)模式逞盆，采用HTML5的方式進(jìn)行頁面額加載和渲染。不寫的話松申，頁面將進(jìn)入混雜模式云芦。
- <html ></html>：整個(gè)頁面的根節(jié)點(diǎn)俯逾，所有的東西都在這里面，只有一個(gè)焕数。里面包含<head>和<body>
- lang = "zh"：告訴瀏覽器所使用的語言纱昧。當(dāng)打開其他語言的頁面，會彈出一個(gè)是否翻譯成中文的頁面的窗口堡赔。
- <head></head>：頭結(jié)點(diǎn)识脆，包含和內(nèi)容展示無關(guān)的東西，<meta><title>,引入的樣式表或者一些其他的東西善已。
- <meta charset = "UTF-8">：內(nèi)容編碼灼捂，頁面都是用編輯器編輯的，保存為編碼格式换团，格式是由編輯器設(shè)置決定的悉稠。瀏覽器打開頁面的時(shí)候解析編碼后的字符串，charset告訴瀏覽器所保存的編碼格式艘包。防止出現(xiàn)亂碼的猛。
- <meta http-equiv = "X-UA-Compatible" content = "IE = edge,chrome = 1">：對于雙核瀏覽器，或者裝插件的瀏覽器想虎，加這句話的意思是：如果是IE卦尊，就用IE最新版本渲染頁面，如果是chrome舌厨，就用他的最新版本渲染頁面岂却。
- <meta name = "viewport" content = "width = device-width,inital-scale = 1，maximum-scale = 1">如果頁面想在移動端展示的比較合理裙椭，需要加上這句話躏哩。
- <meta name = "keywords" content = "前端 饑人谷">，<meta name = "description" content = "哈哈'>主要是用來優(yōu)化搜索引擎揉燃，便于搜索扫尺。
- <body></body>：頁面的主體結(jié)構(gòu)。
注意點(diǎn)：
- 標(biāo)簽屬性全小寫炊汤；
- 標(biāo)簽要閉合正驻、自閉標(biāo)簽可以省略/；
- 標(biāo)題里不能有段落婿崭，段落里不能有標(biāo)題。
塊級元素VS行內(nèi)元素
- 塊級元素：占據(jù)一整行的空間：a肴颊，span氓栈，strong，em婿着，img,button
- 行內(nèi)元素：只占據(jù)本身內(nèi)容的空間：h1-h6授瘦， P醋界，div，ol li提完，ul li
2.png
