HTML基礎(chǔ)詳解(上)
1、認(rèn)識(shí)WEB
網(wǎng)頁(yè) 主要是由文字、圖像和超鏈接等元素構(gòu)成，當(dāng)然除了這些元素，網(wǎng)頁(yè)中還可以包括音頻、視頻以及Flash等。
瀏覽器 是網(wǎng)頁(yè)顯示、運(yùn)行的平臺(tái)。
瀏覽器內(nèi)核(排版引擎、解釋引擎、渲染引擎)
負(fù)責(zé)讀取網(wǎng)頁(yè)內(nèi)容，整理訊息，計(jì)算網(wǎng)頁(yè)的顯示方式并顯示頁(yè)面。
| 瀏覽器 | 內(nèi)核 | 備注 |
|---|---|---|
| IE | Trident | IE、獵豹安全、360極速瀏覽器、百度瀏覽器 |
| firefox | Gecko | 可惜這幾年已經(jīng)沒(méi)落了，打開(kāi)速度慢、升級(jí)頻繁、豬一樣的隊(duì)友flash、神一樣的對(duì)手chrome。 |
| Safari | webkit | 現(xiàn)在很多人錯(cuò)誤地把 webkit 叫做 chrome內(nèi)核（即使 chrome內(nèi)核已經(jīng)是 blink 了）。蘋(píng)果感覺(jué)像被別人搶了媳婦，都哭暈在廁所里面了。 |
| chrome | Chromium/Blink | 在 Chromium 項(xiàng)目中研發(fā) Blink 渲染引擎（即瀏覽器核心），內(nèi)置于 Chrome 瀏覽器之中。Blink 其實(shí)是 WebKit 的分支。大部分國(guó)產(chǎn)瀏覽器最新版都采用Blink內(nèi)核。二次開(kāi)發(fā) |
| Opera | blink | 現(xiàn)在跟隨chrome用blink內(nèi)核。 |
Web標(biāo)準(zhǔn)
「構(gòu)成」👉 結(jié)構(gòu)標(biāo)準(zhǔn)，表現(xiàn)標(biāo)準(zhǔn)和行為標(biāo)準(zhǔn)
- 結(jié)構(gòu)標(biāo)準(zhǔn)用于對(duì)網(wǎng)頁(yè)元素進(jìn)行整理和分類(lèi)(HTML)
- 表現(xiàn)標(biāo)準(zhǔn)用于設(shè)置網(wǎng)頁(yè)元素的版式、顏色、大小等外觀屬性(CSS)
- 行為標(biāo)準(zhǔn)用于對(duì)網(wǎng)頁(yè)模型的定義及交互的編寫(xiě)(JavaScript)
「Web標(biāo)準(zhǔn)的優(yōu)點(diǎn)」👇
- 易于維護(hù)：只需更改CSS文件，就可以改變整站的樣式
- 頁(yè)面響應(yīng)快：HTML文檔體積變小，響應(yīng)時(shí)間短
- 可訪問(wèn)性：語(yǔ)義化的HTML（結(jié)構(gòu)和表現(xiàn)相分離的HTML）編寫(xiě)的網(wǎng)頁(yè)文件，更容易被屏幕閱讀器識(shí)別
- 設(shè)備兼容性：不同的樣式表可以讓網(wǎng)頁(yè)在不同的設(shè)備上呈現(xiàn)不同的樣式
- 搜索引擎：語(yǔ)義化的HTML能更容易被搜索引擎解析，提升排名
2、HTML初識(shí)
HTML(Hyper Text Markup Language):超文本標(biāo)記語(yǔ)言
所謂超文本，有2層含義：
- 因?yàn)樗梢约尤雸D片、聲音、動(dòng)畫(huà)、多媒體等內(nèi)容（超越文本限制 ）
- 不僅如此，它還可以從一個(gè)文件跳轉(zhuǎn)到另一個(gè)文件，與世界各地主機(jī)的文件連接（超級(jí)鏈接文本）。
「HTML骨架格式」
<!-- 頁(yè)面中最大的標(biāo)簽 根標(biāo)簽 -->
<html>
<!-- 頭部標(biāo)簽 -->
<head>
<!-- 標(biāo)題標(biāo)簽 -->
<title></title>
</head>
<!-- 文檔的主體 -->
<body>
</body>
</html>
團(tuán)隊(duì)約定大小寫(xiě)
HTML標(biāo)簽名、類(lèi)名、標(biāo)簽屬性和大部分屬性值統(tǒng)一用小寫(xiě)
HTML元素標(biāo)簽分類(lèi)
- 常規(guī)元素(雙標(biāo)簽)
- 空元素(單標(biāo)簽)
常規(guī)元素(雙標(biāo)簽) <標(biāo)簽名> 內(nèi)容 </標(biāo)簽名> 比如<body>我是文字</body> 空元素(單標(biāo)簽) <標(biāo)簽名 /> 比如 <br />或<br>
HTML標(biāo)簽關(guān)系
- 嵌套關(guān)系父子級(jí)包含關(guān)系
- 并列關(guān)系兄弟級(jí)并列關(guān)系
- 如果兩個(gè)標(biāo)簽之間的關(guān)系是嵌套關(guān)系，子元素最好縮進(jìn)一個(gè)tab鍵的身位（一個(gè)tab是4個(gè)空格）。如果是并列關(guān)系，最好上下對(duì)齊。
文檔類(lèi)型< !DOCTYPE >
文檔類(lèi)型 用來(lái)說(shuō)明你用的XHTML或者HTML是什么版本。告訴瀏覽器按照HTML5標(biāo)準(zhǔn)解析頁(yè)面。
頁(yè)面語(yǔ)言lang
lang指定該html標(biāo)簽內(nèi)容所用的語(yǔ)言
<html lang="en"> en 定義語(yǔ)言為英語(yǔ) zh-CN定義語(yǔ)言為中文
lang的作用
1.根據(jù)根據(jù)lang屬性來(lái)設(shè)定不同語(yǔ)言的css樣式，或者字體
2.告訴搜索引擎做精確的識(shí)別
3.讓語(yǔ)法檢查程序做語(yǔ)言識(shí)別
4.幫助翻譯工具做識(shí)別
5.幫助網(wǎng)頁(yè)閱讀程序做識(shí)別
字符集
字符集(Character set) 是多個(gè)字符的集合,計(jì)算機(jī)要準(zhǔn)確的處理各種字符集文字，需要進(jìn)行字符編碼，以便計(jì)算機(jī)能夠識(shí)別和存儲(chǔ)各種文字。
- UTF-8是目前最常用的字符集編碼方式讓
- html 文件是以 UTF-8 編碼保存的， 瀏覽器根據(jù)編碼去解碼對(duì)應(yīng)的html內(nèi)容。
<meta charset="UTF-8" />
meta viewport的用法
通常viewport是指視窗、視口。瀏覽器上(也可能是一個(gè)app中的webview)用來(lái)顯示網(wǎng)頁(yè)的那部分區(qū)域。在移動(dòng)端和pc端視口是不同的，pc端的視口是瀏覽器窗口區(qū)域，而在移動(dòng)端有三個(gè)不同的視口概念：布局視口、視覺(jué)視口、理想視口
meta有兩個(gè)屬性name 和 http-equiv
name屬性的取值
- keywords(關(guān)鍵字) 告訴搜索引擎，該網(wǎng)頁(yè)的關(guān)鍵字
- description(網(wǎng)站內(nèi)容描述) 用于告訴搜索引擎，你網(wǎng)站的主要內(nèi)容。
- viewport(移動(dòng)端的窗口)
- robots(定義搜索引擎爬蟲(chóng)的索引方式) robots用來(lái)告訴爬蟲(chóng)哪些頁(yè)面需要索引，哪些頁(yè)面不需要索引
- author(作者)
- generator(網(wǎng)頁(yè)制作軟件）
- copyright(版權(quán))
http-equiv有以下參數(shù)
http-equiv相當(dāng)于http的文件頭作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁(yè)內(nèi)容
content-Type 設(shè)定網(wǎng)頁(yè)字符集(Html4用法，不推薦)
Expires(期限) ,可以用于設(shè)定網(wǎng)頁(yè)的到期時(shí)間。一旦網(wǎng)頁(yè)過(guò)期，必須到服務(wù)器上重新傳輸。
Pragma(cache模式),是用于設(shè)定禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁(yè)面內(nèi)容，設(shè)定后一旦離開(kāi)網(wǎng)頁(yè)就無(wú)法從Cache中再調(diào)出
Refresh(刷新),自動(dòng)刷新并指向新頁(yè)面。
cache-control（請(qǐng)求和響應(yīng)遵循的緩存機(jī)制）
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTML標(biāo)簽的語(yǔ)義化
- 方便代碼的閱讀和維護(hù)，樣式丟失的時(shí)候能讓頁(yè)面呈現(xiàn)清晰的結(jié)構(gòu)。
- 有利于SEO，搜索引擎根據(jù)標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重。
- 方便其他設(shè)備解析，如盲人閱讀器根據(jù)語(yǔ)義渲染網(wǎng)頁(yè)
「拓展」 標(biāo)簽：規(guī)定頁(yè)面上所有鏈接的默認(rèn) URL 和設(shè)置整體鏈接的打開(kāi)狀態(tài)
<head>
<base target="_blank">
<base target="_self">
</head>
<body>
<a href="">測(cè)試</a> 跳轉(zhuǎn)到 百度
</body>
3、HTML常用標(biāo)簽
1. 排版標(biāo)簽: 主要和css搭配使用，顯示網(wǎng)頁(yè)結(jié)構(gòu)的標(biāo)簽，是網(wǎng)頁(yè)布局最常用的標(biāo)簽。
- 標(biāo)題標(biāo)簽h(h1~h6)
- 段落標(biāo)簽p,可以把 HTML 文檔分割為若干段落
- 水平線標(biāo)簽hr
- 換行標(biāo)簽br
- div和span標(biāo)簽:是沒(méi)有語(yǔ)義的,是我們網(wǎng)頁(yè)布局最主要的2個(gè)盒子。
2.排版標(biāo)簽
- b和strong 文字以粗體顯示
- i和em 文字以斜體顯示
- s和del` 文字以加刪除線顯示
- u和ins 文字以加下劃線顯示
3. 標(biāo)簽屬性(行內(nèi)式)
使用HTML制作網(wǎng)頁(yè)時(shí)，如果想讓HTML標(biāo)簽提供更多的信息，可以使用HTML標(biāo)簽的屬性加以設(shè)置。
<標(biāo)簽名 屬性1="屬性值1" 屬性2="屬性值2" …> 內(nèi)容 </標(biāo)簽名><手機(jī) 顏色="紅色" 大小="5寸"> </手機(jī)>
4. 圖像標(biāo)簽img
注意：
- 標(biāo)簽可以擁有多個(gè)屬性，必須寫(xiě)在開(kāi)始標(biāo)簽中，位于標(biāo)簽名后面。
- 屬性之間不分先后順序，標(biāo)簽名與屬性、屬性與屬性之間均以空格分開(kāi)。
- 采取 鍵值對(duì) 的格式 key=“value” 的格式
<img src="cz.jpg" width="300" height="300" border="3" title="這是個(gè)小蒲公英" />
5. 鏈接標(biāo)簽(重點(diǎn))
<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式">文本或圖像</a> target="_self" 默認(rèn)窗口彈出方式 target="_blank" 新窗口彈出
| 屬性 | 作用 |
|---|---|
| href | 用于指定鏈接目標(biāo)的url地址，（必須屬性）當(dāng)為標(biāo)簽應(yīng)用href屬性時(shí)，它就具有了超鏈接的功能 |
| target | 用于指定鏈接頁(yè)面的打開(kāi)方式，其取值有_self和_blank兩種，其中_self為默認(rèn)值，_blank為在新窗口中打開(kāi)方式。 |
src 和 href 的區(qū)別
一句話概括:src 是引入資源的 href 是跳轉(zhuǎn)url的
1.src用于替換當(dāng)前元素，href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。
2.src是source的縮寫(xiě)，指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請(qǐng)求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如js腳本，img圖片和frame等元素。當(dāng)瀏覽器解析到該元素時(shí)，會(huì)暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類(lèi)似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。
3.href是Hypertext Reference的縮寫(xiě)，指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接。如果我們?cè)谖臋n中添加那么瀏覽器會(huì)識(shí)別該文檔為css文件，就會(huì)并行下載資源并且不會(huì)停止對(duì)當(dāng)前文檔的處理。這也是為什么建議使用link方式來(lái)加載css，而不是使用@import方式。
注意：
1.外部鏈接 需要添加 http:// www.baidu.com
2.內(nèi)部鏈接 直接鏈接內(nèi)部頁(yè)面名稱即可 比如 < a href=“index.html”> 首頁(yè)
3.果當(dāng)時(shí)沒(méi)有確定鏈接目標(biāo)時(shí)，通常將鏈接標(biāo)簽的href屬性值定義為“#”(即href="#")，表示該鏈接暫時(shí)為一個(gè)空鏈接。
4.不僅可以創(chuàng)建文本超鏈接，在網(wǎng)頁(yè)中各種網(wǎng)頁(yè)元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。
錨點(diǎn)定位：通過(guò)創(chuàng)建錨點(diǎn)鏈接，用戶能夠快速定位到目標(biāo)內(nèi)容。
1. 使用相應(yīng)的id名標(biāo)注跳轉(zhuǎn)目標(biāo)的位置。 (找目標(biāo)) <h3 id="two">第2集</h3> 2. 使用<a href="#id名">鏈接文本</a>創(chuàng)建鏈接文本（被點(diǎn)擊的） <a href="#two">
6. 注釋標(biāo)簽
<!-- 注釋語(yǔ)句 --> 快捷鍵是： ctrl + / 或者 ctrl +shift + /
團(tuán)隊(duì)約定：注釋內(nèi)容前后各一個(gè)空格字符，注釋位于要注釋代碼的上面，單獨(dú)占一行
7. 路徑
8. 其他知識(shí)
預(yù)格式化文本pre 標(biāo)簽元素中的文本通常會(huì)保留空格和換行符。而文本也會(huì)呈現(xiàn)為等寬字體。格式化文本就是 ，按照我們預(yù)先寫(xiě)好的文字格式來(lái)顯示頁(yè)面， 保留空格和換行等。
特殊字符
什么是XHTML
- XHTML 指「可擴(kuò)展超文本標(biāo)簽語(yǔ)言」（EXtensible HyperText Markup Language）。
- XHTML 的目標(biāo)是取代 HTML。
- XHTML 與 HTML 4.01 幾乎是相同的。
- XHTML 是更嚴(yán)格更純凈的 HTML 版本。
- XHTML 是作為一種 XML 應(yīng)用被重新定義的 HTML,是嚴(yán)格版本的HTML。例如它要求標(biāo)簽必須小寫(xiě)，標(biāo)簽必須被正確關(guān)閉，標(biāo)簽順序必須正確排列，對(duì)于屬性都必須使用雙引號(hào)等。
- XHTML 是一個(gè) W3C 標(biāo)準(zhǔn)。
寫(xiě)HTML代碼時(shí)應(yīng)注意什么？
- 盡可能少的使用無(wú)語(yǔ)義的標(biāo)簽div和span；
- 在語(yǔ)義不明顯時(shí)，既可以使用div或者p時(shí)，盡量用p, 因?yàn)閜在默認(rèn)情況下有上下間距，對(duì)兼容特殊終端有利；
- 不要使用純樣式標(biāo)簽，如：b、font、u等，改用css設(shè)置。
- 需要強(qiáng)調(diào)的文本，可以包含在strong或者em標(biāo)簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們），strong默認(rèn)樣式是加粗（不要用b），em是斜體（不用i）；
- 使用表格時(shí)，標(biāo)題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開(kāi)，表頭用th，單元格用td；
- 表單域要用fieldset標(biāo)簽包起來(lái)，并用legend標(biāo)簽說(shuō)明表單的用途；
- 每個(gè)input標(biāo)簽對(duì)應(yīng)的說(shuō)明文本都需要使用label標(biāo)簽，并且通過(guò)為input設(shè)置id屬性，在lable標(biāo)簽中設(shè)置for來(lái)讓說(shuō)明文本和相對(duì)應(yīng)的input關(guān)聯(lián)起來(lái)。
4、表格
現(xiàn)在還是較為常用的一種標(biāo)簽，但不是用來(lái)布局，常見(jiàn)顯示、展示表格式數(shù)據(jù)。因?yàn)樗梢宰寯?shù)據(jù)顯示的非常的規(guī)整，可讀性非常好。特別是后臺(tái)展示數(shù)據(jù)的時(shí)候表格運(yùn)用是否熟練就顯得很重要，一個(gè)清爽簡(jiǎn)約的表格能夠把繁雜的數(shù)據(jù)表現(xiàn)得很有條理。
創(chuàng)建表格
<table>
<tr>
<td>單元格內(nèi)的文字</td>
...
</tr>
...
</table>
table、tr、td，他們是創(chuàng)建表格的基本標(biāo)簽，缺一不可
- table用于定義一個(gè)表格標(biāo)簽。
- tr標(biāo)簽 用于定義表格中的行，必須嵌套在 table標(biāo)簽中。
- td 用于定義表格中的單元格，必須嵌套在標(biāo)簽中。
- 字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容，現(xiàn)在我們明白，表格最合適的地方就是用來(lái)存儲(chǔ)數(shù)據(jù)的。td像一個(gè)容器，可以容納所有的元素。
表頭單元格標(biāo)簽th:一般表頭單元格位于表格的第一行或第一列，并且文本加粗居中,只需用表頭標(biāo)簽替代相應(yīng)的單元格標(biāo)簽即可。
表格標(biāo)題caption通常這個(gè)標(biāo)題會(huì)被居中且顯示于表格之上。caption 標(biāo)簽必須緊隨 table 標(biāo)簽之后。這個(gè)標(biāo)簽只存在 表格里面才有意義。你是風(fēng)兒我是沙
<table> <caption>我是表格標(biāo)題</caption> </table>
表格屬性
三參為0，平時(shí)開(kāi)發(fā)的我們這三個(gè)參數(shù) border cellpadding cellspacing 為 0
合并單元格,合并的順序我們按照 先上 后下 先左 后右 的順序 ,合并完之后需要?jiǎng)h除多余的單元格。
- 跨行合并：rowspan=“合并單元格的個(gè)數(shù)”
- 跨列合并：colspan=“合并單元格的個(gè)數(shù)”
總結(jié)表格
| 標(biāo)簽名 | 定義 | 說(shuō)明 |
|---|---|---|
| < table></ table> | 表格標(biāo)簽 | 就是一個(gè)四方的盒子 |
| < tr></ tr> | 表格行標(biāo)簽 | 行標(biāo)簽要再table標(biāo)簽內(nèi)部才有意義 |
| < td></ td> | 單元格標(biāo)簽 | 單元格標(biāo)簽是個(gè)容器級(jí)元素，可以放任何東西 |
| < th></ th> | 表頭單元格標(biāo)簽 | 它還是一個(gè)單元格，但是里面的文字會(huì)居中且加粗 |
| < caption></ caption> | 表格標(biāo)題標(biāo)簽 | 表格的標(biāo)題，跟著表格一起走，和表格居中對(duì)齊 |
| clospan 和 rowspan | 合并屬性 | 用來(lái)合并單元格的 |
表格劃分結(jié)構(gòu)
對(duì)于比較復(fù)雜的表格，表格的結(jié)構(gòu)也就相對(duì)的復(fù)雜了，所以又將表格分割成三個(gè)部分：題頭、正文和腳注。而這三部分分別用:thead,tbody,tfoot來(lái)標(biāo)注， 這樣更好的分清表格結(jié)構(gòu)。
注意：
- < thead></ thead>：用于定義表格的頭部。用來(lái)放標(biāo)題之類(lèi)的東西。 內(nèi)部必須擁有 標(biāo)簽！
- < tbody></ tbody>：用于定義表格的主體。放數(shù)據(jù)本體 。
- < tfoot></ tfoot>放表格的腳注之類(lèi)。
- 以上標(biāo)簽都是放到table標(biāo)簽中。
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！
相關(guān)文章
如何正確使用標(biāo)題元素、段落和強(qiáng)制換行
如何正確使用標(biāo)題元素、段落和強(qiáng)制換行...2007-02-02
前端獲取http狀態(tài)碼400的返回值實(shí)例
下面小編就為大家?guī)?lái)一篇前端獲取http狀態(tài)碼400的返回值實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
css濾鏡基礎(chǔ)教程...2007-03-03
對(duì)于頁(yè)面的滾動(dòng)條實(shí)現(xiàn)效果代碼，整理的比較全的，講解的也比較詳細(xì)了2008-08-08
css實(shí)現(xiàn)三角形，網(wǎng)上講了很多，但我發(fā)現(xiàn)一般都是三角向上或者向下的，向左向右這兩方向似乎講得很少，本人試了一下，發(fā)現(xiàn)原來(lái)在IE下很難搞~~(萬(wàn)惡的IE)...2014-09-09
Lesson02_03 表單標(biāo)簽...2007-02-02
這篇文章主要介紹了H5頁(yè)面使用audio標(biāo)簽播放音頻的相關(guān)資料,需要的朋友可以參考下2023-03-03
對(duì)于文字的大小寫(xiě)和首字母的控制2008-11-11
ASP 也提供了支持不同地區(qū)文化習(xí)慣的命令，如貨幣、時(shí)間和日期格式。同字符串轉(zhuǎn)換命令一樣，如果您的腳本沒(méi)有使用 Web 服務(wù)器的默認(rèn)現(xiàn)場(chǎng)，則要使用現(xiàn)場(chǎng)命令。2008-09-09
html頁(yè)面head區(qū)域的編碼書(shū)寫(xiě)規(guī)范
我們這里所說(shuō)的head區(qū)域，是指頁(yè)頁(yè)html代碼的<head>和</head>之間的內(nèi)容。在jb51.net的文章中，主要介紹了大量的css知識(shí)，而對(duì)html頁(yè)面的知識(shí)介紹并不是很多。2008-08-08