HTML基礎
由來
HTML的英文全稱是 Hyper Text Markup Language，即超文本標記語言。HTML是由Web的發(fā)明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年創(chuàng)立的一種標記語言，它是標準通用化標記語言SGML的應用。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統(tǒng)平臺(如UNIX， Windows等)。使用HTML語言，將所需要表達的信息按某種規(guī)則寫成HTML文件，通過專用的瀏覽器來識別，并將這些HTML文件“翻譯”成可以識別的信息，即現(xiàn)在所見到的網(wǎng)頁。
自1990年以來，HTML就一直被用作WWW的信息表示語言，使用HTML語言描述的文件需要通過WWW瀏覽器顯示出效果。HTML是一種建立網(wǎng)頁文件的語言，通過標記式的指令(Tag)，將影像、聲音、圖片、文字動畫、影視等內(nèi)容顯示出來。事實上，每一個HTML文檔都是一種靜態(tài)的網(wǎng)頁文件，這個文件里面包含了HTML指令代碼，這些指令代碼并不是一種程序語言，只是一種排版網(wǎng)頁中資料顯示位置的標記結(jié)構語言，易學易懂，非常簡單。HTML的普遍應用就是帶來了超文本的技術―通過單擊鼠標從一個主題跳轉(zhuǎn)到另一個主題，從一個頁面跳轉(zhuǎn)到另一個頁面，與世界各地主機的文件鏈接超文本傳輸協(xié)議規(guī)定了瀏覽器在運行HTML文檔時所遵循的規(guī)則和進行的操作。HTTP協(xié)議的制定使瀏覽器在運行超文本時有了統(tǒng)一的規(guī)則和標準。
定義
超級文本標記語言文檔制作不是很復雜，但功能強大，支持不同數(shù)據(jù)格式的文件鑲?cè)?，這也是萬維網(wǎng)（WWW）盛行的原因之一，其主要特點如下：
簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便。
可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統(tǒng)擴展帶來保證。
平臺無關性：雖然個人計算機大行其道，但使用MAC等其他機器的大有人在，超級文本標記語言可以使用在廣泛的平臺上，這也是萬維網(wǎng)盛行的另一個原因。
通用性：另外，HTML是網(wǎng)絡的通用語言，一種簡單、通用的全置標記語言。它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。
HTML網(wǎng)頁基本結(jié)構
<html>
<head>
<title>我的第一個網(wǎng)頁</title>
</head>
<body>
我的第一個網(wǎng)頁（主體部分）
</body>
</html
！注意<body>、</body>等成對的標簽，分別叫開放標簽和閉合標簽
單獨呈現(xiàn)的標簽（空元素），如< hr/ >意為用/來關閉空元素
網(wǎng)頁的基本標簽
標題標簽
- <h1>一級標題</h1>
- <h2>二級標題</h2>
- <h3>三級標題</h3>
- <h4>四級標題</h4>
- <h5>五級標題</h5>
- <h6>六級標題</h6>
段落標簽
- <p>...</p>
換行標簽
- < br/ >
水平線標簽
- < hr/ >
字體樣式標簽
- 加粗：<strong>...</strong>
- 斜體：<em>...</em>
注釋和特殊符號
- 注釋：< !-- -- >
-
特殊符號：
圖像標簽
- 語法：
<img src="path" alt="text" title="text" width="x" height="y"/>
鏈接標簽
- 語法：
<a href="path"target="目標窗口位置">鏈接文本或圖像</a>
塊元素和行內(nèi)元素
- 塊級元素：（p、h1-h6...）
1).霸占一行，不能與其他任何元素并列
2).能接受寬、高
3).如果不設置寬度，那么寬度將默認變?yōu)楦赣H的100%，即和父親一樣寬 - 行內(nèi)元素：（a、strong、em...）
1).與其他元素并排
2).不能設置寬、高。默認的寬度就是文字的寬度
在HTML中，標簽分為：文本級和容器級；
文本級：p、span、a、b、i、u、em
容器級：div、h系列、li、dt、dd -
溫馨小提示：
(1).容器級的標簽，里面可以放置任何東西；文本級的標簽里面，只能放置文字、圖片、表單元素。
(2).p標簽是一個文本級標簽。p里面只能放文字、圖片、表單元素。其他的一律不能放。
(3).定義列表是一個組標簽，不過比較復雜，出現(xiàn)了三個標簽：
dl表示definition list 定義列表
dt表示definition title 定義標題
dd表示definition description 定義表述詞兒
dt、dd只能在dl里面；dl里面只能有dt、dd
列表、表格與媒體元素
列表
- 什么是列表：
列表是信息資源的一種展示形式。它可以使信息結(jié)構化和條理化，并以列表的樣式顯示出來，以便瀏覽者能更快捷地獲得相應的信息 - 列表的分類
（1）無序列表<ul>...</ui>
（2）有序列表<ol>...</ol>
（3）定義列表<dl>...</dl>
代碼示例：
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 無序列表-->
<ul type="square">
<li>外賣小哥7萬元小城買房</li>
<li>張繼科林丹節(jié)目現(xiàn)場起沖突</li>
<li>南京莫愁湖現(xiàn)兩株并蒂蓮</li>
<li>母女被困電梯4天互喝尿液求生</li>
</ul>
<ol type="1">
<li>外賣小哥7萬元小城買房</li>
<li>張繼科林丹節(jié)目現(xiàn)場起沖突</li>
<li>南京莫愁湖現(xiàn)兩株并蒂蓮</li>
<li>母女被困電梯4天互喝尿液求生</li>
</ol>
<dl>
<dt>蔬菜</dt>
<dd>茄子</dd>
<dt>水果</dt>
<dd>桃子</dd>
</dl>
</body>
</html>
視頻元素
語法：
<video src="path" controls></video>
示例：
<video src="video/VID_20200710_193623~1.mp4" controls></video>
頁面結(jié)構分析
頁面布局分析
- 前面的話
幾年前，用于網(wǎng)頁布局一般都用div元素，但語義化并不好。HTML5引入了大量新的塊級元素來幫助提升網(wǎng)頁的語義，使頁面具有邏輯性結(jié)構、容易維護，并且對數(shù)據(jù)挖掘服務更友好。本文將詳細介紹HTML5結(jié)構元素 - 總括
結(jié)構元素，又稱為區(qū)塊型元素，是用來定義區(qū)塊內(nèi)容范圍的元素。之前，區(qū)塊型元素只有<div>一個，HTML5新增了7個語義化結(jié)構元素，包括<article>、<aside>、<nav>、<section>、<header>、<footer>、<main> - header
<header>元素表示頁面頭部或區(qū)塊頭部，用于將介紹內(nèi)容和區(qū)塊的輔助導航分組到一起，所以它有可能包含區(qū)塊的標題元素以及其他的介紹內(nèi)容(目錄、logo等)
[注意]由于<header>和<footer>元素不是分節(jié)內(nèi)容，所以不會引入新的分節(jié)到大綱中
- footer
<footer>元素表示最近一個章節(jié)內(nèi)容或者根節(jié)點(sectioning root)元素的頁腳。一個頁腳通常包含該章節(jié)作者、版權數(shù)據(jù)或者與文檔相關的鏈接等信息
[注意]<footer>元素內(nèi)的作者信息應包含在<address>元素中
- section
Section元素(<section>)表示文檔中的一個區(qū)域(或節(jié))，是區(qū)塊級通用元素。比如，內(nèi)容中的一個專題組，一般來說會有包含一個標題(heading)。一般通過是否包含一個標題(<h1>-<h6> element)作為子節(jié)點，來辨識每一個<section>
[注意]如果元素內(nèi)容可以分為幾個部分的話，應該使用<article>而不是<section>；再有，不要把<section>元素作為一個普通的容器來使用，這是本應該是<div>的用法。 一般來說，一個<section>應該出現(xiàn)在文檔大綱中
- article
<article>元素表示文檔、頁面、應用或網(wǎng)站中的獨立結(jié)構，其意在成為可獨立分配的或可復用的結(jié)構?？赡苁钦搲印㈦s志或新聞文章、博客、用戶提交的評論、交互式組件，或者其他獨立的內(nèi)容項目。當<article>元素嵌套使用時，則該元素代表與外層元素有關的文章。例如，代表博客評論的<article>元素可嵌套在代表博客文章的<article>元素中<article>元素的作者信息可通過<address>元素提供，但是不適用于嵌套的<article>元素；<article>元素的發(fā)布日期和時間可通過<time>元素的pubdate屬性表示
[注意]對于<article>和<section>來說，是必須要加上標題的
- aside
<aside>元素表示一個和其余頁面內(nèi)容幾乎無關的部分，被認為是獨立于該內(nèi)容的一部分并且可以被單獨的拆分出來而不會使整體受影響。一般用于表示不直接相關內(nèi)容的側(cè)邊欄，<aside>里面的內(nèi)容與它所關聯(lián)的內(nèi)容相互獨立，誰缺了誰都不影響各自文本含義的理解。如一篇文章的廣告、相關背景和引述內(nèi)容等 - nav
HTML導航欄(<nav>)描繪一個含有多個超鏈接的區(qū)域，這個區(qū)域包含轉(zhuǎn)到其他頁面，或者頁面內(nèi)部其他部分的鏈接列表
并不是所有的鏈接都必須使用<nav>元素，它只用來將一些熱門的鏈接放入導航欄，例如<footer>元素就常用來在頁面底部包含一個不常用到，沒必要加入<nav>的鏈接列表
一個網(wǎng)頁也可能含有多個<nav>元素，例如一個是網(wǎng)站內(nèi)的導航列表，另一個是本頁面內(nèi)的導航列表
- main
<main>元素放在最后說，是因為<main>不常用，最主要的原因是IE瀏覽器都不支持
main元素(<main>)呈現(xiàn)了文檔<body>或應用的主體部分。主體部分由與文檔直接相關，或者擴展于文檔的中心主題、應用的主要功能部分的內(nèi)容組成。這部分內(nèi)容在文檔中應當是獨一無二的，不包含任何在一系列文檔中重復的內(nèi)容
<main>標簽不能是以下元素的繼承，包括<article>、<aside>、<footer>、<header>、或<nav>。 在一個文檔中不能出現(xiàn)一個以上的 <main>標簽
代碼示例
<html>
<head>
<meta charset="utf-8">
<title>FRIST</title>
</head>
<body>
這是我的第一個網(wǎng)頁
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
<hr/>
<p>北京歡迎你，有夢想就<strong>了不起</strong>北京歡迎你，有夢 想就了不起<br/><em>北京歡迎你</em>，有夢想就了不起北京歡迎你，有夢想就了不起</p>
<p>p標簽：<p>...</p></p>
<img src="images/tupian.jpg" alt="圖像加載失敗"title="核桃"width="x"height="y"/>
<a >首頁</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header style="width: 1200px; height: 80px; background-color: red;">頭部</header>
<section style="width: 1200px; height: 300px; background-color: gray;">主體內(nèi)容</section>
<footer style="width: 1200px; height: 80px; background-color: green;">底部</footer>
</body>
</html>
