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可省略，瀏覽器會自動(dòng)添加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">如果頁面想在移動(dòng)端展示的比較合理，需要加上這句話。
- <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
