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