HTML-介紹
查看更多學習筆記：GitHub：LoveEmiliaForever
MDN中文官網(wǎng)
HTML-簡介
MDN 文檔引用：
就其核心而言，HTML 是一種相當簡單的、由不同元素組成的標記語言，它可以被應用于文本片段，使文本在文檔中具有不同的含義（它是段落嗎？它是項目列表嗎？它是表格嗎？），將文檔結構化為邏輯塊（文檔是否有頭部？有三列內(nèi)容？有一個導航菜單？），并且可以將圖片，影像等內(nèi)容嵌入到頁面中。
HTML 的主要特性總結
- 由不同元素組成的標記語言
- 標記文本片段為元素，以賦予其含義
- 組織文檔，讓其擁有邏輯結構
- 給予文檔額外的功能性
HTML-入門
HTML-組織結構
HTML 構建的文章總體由各種元素組成，元素之間可以嵌套，且由于不同元素含有不同意義，元素之間可以擁有邏輯和排版上的結構
HTML 文章與元素之間的關系大致可以表述如下圖所示
HTML-元素分類
元素的具體結構
塊級元素和內(nèi)聯(lián)元素
-
塊級元素在頁面中以塊的形式展現(xiàn)- 塊級元素自己
獨占一行，通常是頁面的結構元素 - 塊級元素可以嵌套在塊級元素內(nèi)，但不能嵌套在內(nèi)聯(lián)元素內(nèi)
- 塊級元素自己
-
內(nèi)聯(lián)元素通常嵌套在塊級元素內(nèi)- 內(nèi)聯(lián)元素不會導致?lián)Q行
- 內(nèi)聯(lián)元素通常和文本一起使用，并帶來一些效果
?元素的類型與 CSS 中
display:類型并不一樣，盡管 CSS 可以改變元素的顯示，但不能夠改變元素的類型，也改變不了元素間包含和被包含的關系
?HTML5 重新定義了元素的分類，原因如上所示，害怕混淆
空元素
有一些元素沒有結束標簽，它不包含文章片段，而是用來執(zhí)行一些額外行為
例如<img>或<img/>就是用來在文章中插入圖片所使用的元素
這些元素稱為空元素，如上所示在空元素標簽的末尾添加/也是可行的，此時XML也可以識別該元素
HTML-元素屬性
屬性簡介
元素的屬性通常是定義元素行為或為元素添加額外信息
- 屬性和屬性、屬性和標簽之間以空格分隔
- 屬性與屬性值以
=相連 - 屬性值由
" "包裹
屬性使用示例
<a href="github.com" title="點擊前往GitHub" target="_blank">前往GitHub</a>
示例元素的屬性聲明了元素的額外行為，與額外信息
-
href屬性聲明了跳轉目的地這個額外信息 -
title聲明了鏈接描述這個額外信息 -
target聲明了跳轉方式這個額外行為
布爾屬性
有些屬性可以不用寫它的屬性值，因為它只有一個和它屬性名相同的屬性值
這種屬性稱為布爾屬性，通常是用于聲明某種行為
如表單元素的disable屬性就是布爾屬性，它表示禁用此表單元素
屬性值的引號問題
當元素中只有一個屬性時可以不使用" "包裹屬性值
但當屬性不止一個時，不使用" "包裹屬性值則很可能產(chǎn)生錯誤結果
可以使用" "也可以使用' '包裹屬性值，可以嵌套，不能混用
HTML-文檔剖析
HTML 頁面的一般結構
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>我的測試站點</title>
</head>
<body>
<p>這是我的頁面</p>
</body>
</html>
-
<!DOCTYPE html>是一個歷史遺留問題，現(xiàn)在只需把它加入 HTML 頁面文檔開頭即可 -
<html>包含了頁面的所有內(nèi)容，稱為根元素 -
<head>包含了一些有關 HTML 頁面的信息，其中內(nèi)容并不顯示在頁面 -
<meta/>用于設置一些獨特的信息，如字符集、關鍵字等等 -
<title>設置了頁面的標題信息 -
<body>包含了所有顯示在頁面上的信息
?在 HTML 文檔中連續(xù)的空格或換行在渲染時都僅被當成一個空格
HTML-實體引用
實體引用類似于轉義，是用來表示特殊字符的代碼
常用實體引用如下表
| 所表示字符 | 實體引用代碼 | 所表示字符 | 實體引用代碼 |
|---|---|---|---|
| < | < |
> | > |
| " | " |
’ | &apos |
| & | & |
空格 |   |
HTML-注釋
只需要用<!--和-->包裹起來注釋內(nèi)容即可創(chuàng)建一行 HTML 注釋
HTML-head標簽內(nèi)容
<title>元素的使用
<title>是用來給 HTML 文檔添加標題的標簽，但是和<h1>不同
-
<title>添加的是整個文檔文件的標題 -
<h1>是為文檔包含的內(nèi)容添加標題
<meta>元素
元數(shù)據(jù)是用來描述數(shù)據(jù)的數(shù)據(jù)，HTML 中可以使用<meta>來添加元數(shù)據(jù)<meta>有許多不同種類，常見的有如下一些
指定文檔字符編碼
<meta charset="字符集">
不同的字符編碼會將同一字符數(shù)據(jù)解釋為不同的字符，為了兼容性考慮，使用utf-8是最好的
雖然某些瀏覽器會嘗試修正錯誤編碼，但這顯然不穩(wěn)妥，應該要指定字符編碼
為文檔添加作者
<meta name="author" content="LoveEmiliaForever">
-
name屬性用于指定<meta>的類型 -
content屬性則包含了想要寫入的數(shù)據(jù)
給文檔添加描述
<meta name="description" content="網(wǎng)頁描述">
給網(wǎng)頁添加描述能夠讓使用者快速了解網(wǎng)頁，并且搜索引擎也會使用該元數(shù)據(jù)
? 許多的
<meta>特性以及被棄用了，如<meta name="keywords" content="關鍵字">
其它類型元數(shù)據(jù)
某些網(wǎng)站是有自己的元數(shù)據(jù)協(xié)議的，也就是說某些元數(shù)據(jù)類型是專門使用在特定網(wǎng)站上的
如 Facebook、Twitter 都有一些特有的元數(shù)據(jù)協(xié)議，用于提供擴展服務
自定義站點圖標
可以在<head></head>中指定特定圖片作為站點的圖標（通常是.ico格式）
可以使用下列語法指定站點圖標
<link rel="icon" href="圖標路徑" type="image/x-icon">
引入-CSS-文件和-JS-腳本
可以在<head>內(nèi)通過<link/>和<script>分別引入外部 css 文件、 js 文件
<link rel="stylesheet" href="css文件路徑">
<script src="js文件路徑" defer></script>
給<script>添加屬性defer即意味著告訴瀏覽器 “在解析完 HTML 文件后再加載 js 文件”。這樣可以防止 js 在運行環(huán)境尚未完成時運行，避免出現(xiàn)錯誤
給文檔設定主語言
可以通過使用lang屬性給元素設定主語言，該屬性通常是被放置在<html>內(nèi)，以規(guī)定該頁面的主語言
<html lang="zh-CN">
頁面內(nèi)容
</html>
HTML-文本處理基礎
標題和段落
通過將內(nèi)容包裹在<p>中可以標記一個段落
通過將標題內(nèi)容包裹在<h1>到<h6>內(nèi)，可以定義六個等級的標題
- 使用標題時應該要安排好文檔的層次結構
- 每個文檔最好只使用一次
<h1>，這是頂級標題 - 標題等級最好不要跳躍式定義
- 每個文檔最好不要超過三個級別的標題
語義化的重要性
語義化標簽可以元素賦予對應的含義，使得元素之間能夠進行視覺、邏輯、結構上的統(tǒng)一
這樣做的好處有很多
- 使文檔結構清晰，易于閱讀
- 讓頁面后續(xù)維護開發(fā)更加簡單
- 利于搜索引擎提取頁面信息
列表
無序列表
無序列表是沒有順序標簽的，也就是說使用該列表時順序應該要是無關緊要的事情
如下所示，<ul>用于聲明無需列表，<li>用于聲明列表項
<ul>
<li>吃飯</li>
<li>睡覺</li>
<li>喝水</li>
</ul>
有序列表
和無序列表相反，有序列表是有順序標簽的
它們的結構相似<ol>用于聲明有序列表，<li>用于聲明列表項
<ol>
<li>步驟一</li>
<li>步驟二</li>
<li>步驟三</li>
</ol>
列表嵌套
列表之間是可以嵌套的，只需要在<li>內(nèi)部插入<ul>或<ol>即可
<ol>
<li>步驟一</li>
<li>步驟二</li>
<li>步驟三
<ul>
<li>材料A</li>
<li>材料B</li>
<li>材料C</li>
</ul>
</li>
</ol>
重點強調(diào)
HTML 中提供了一些標簽用于標記文字，使得文字具有特殊效果，以達到強調(diào)文字內(nèi)容的作用
斜體
可以使用<em>標記文本以獲得斜體字，但是它是具有語義的元素
如果僅僅只是想要斜體字，且沒有代表什么含義那么就不應該使用<em>，可以使用<i>或是<span> 或 <mark> + CSS
<!--此時的斜體代表著名書籍-->
<p><em>《哈姆雷特》</em>是一本經(jīng)典的書</p>
<!--下面的斜體則沒有什么含義-->
<p>我<i>今天</i>想吃水餃</p>
粗體
語義化的粗體標簽是<strong>，普通的粗體標簽是<b>
下劃線
由于超鏈接一般會擁有下劃線，所以如果要給文字添加下劃線，最好定義一些獨特的格式
可以使用<u>定義下劃線，但最好使用<span> 或 <mark> + css給下劃線一個明確的語義，然后使用下劃線
表象元素
HTML 中的大部分標簽都是具有語義的，但有一些標簽沒有什么含義
例如<i>、<b>、<u>
這些標簽定義的元素叫做表象元素，應該減少這些標簽的使用
超鏈接
超鏈接簡介
超鏈接是一個地址，指向其它資源或是文檔內(nèi)容
點擊超鏈接后就可訪問地址，以進行跳轉或獲取資源
超鏈接的定義
在 HTML 中可以使用<a>定義一個超鏈接，在其中還包含有一些屬性以定義超鏈接
<a href="地址" title="頁面描述" target="打開方式">描述文字</a>
<a>可以包含塊級元素，這基本意味著它可以把任何東西作為超鏈接而不單單是文字
URL與Path
url全名Uniform Resource Locator，它是代表了一個網(wǎng)絡位置的字符串
如https://www.baidu.com就是一個url
path一般指本地的文件路徑，是訪問本地文件的一個路徑，代表著文件的邏輯存放位置
路徑分為相對路徑和絕對路徑
- 絕對路徑是從
根目錄開始定位文件位置的 - 相對路徑則是依據(jù)現(xiàn)處位置定位文件位置
- 相對于現(xiàn)路徑同級則為
./ - 前往現(xiàn)路徑的上一級為
../
- 相對于現(xiàn)路徑同級則為
定義 超鏈接 訪問文章錨點
- 為元素設置錨點
id=id名字 - 設置
<a>的href為#id名字 - 點擊超鏈接即可前往對應位置
超鏈接最佳實踐
- 不要使用 url 作為鏈接的描述
- 鏈接的描述應該 精確、簡潔
- 不要用一些沒有意義的詞描述鏈接
- 當鏈接到特殊 url 時應該描述清楚（如下載，觀看視頻等）
- 當鏈接到下載文件的 url 時，應該使用
download屬性指定一個默認的下載文件名
定義郵箱鏈接
可以更改地址為mailto:郵件地址來指向一個電子郵箱
甚至可以提前指定好郵件題目subject、收件人cc、郵件內(nèi)容body
<a href="
mailto:郵件地址&cc=address1&cc=address2&subject=xxx&body=xxx">
發(fā)送一個郵件
</a>
??
cc、subject、body中包含的信息應該要被轉義過
文本處理進階
描述列表
除了無序列表和有序列表外，還存在著描述列表
這種列表的每一項包括目標文本和描述文本，其中描述文本可以有多個
它的定義和其它列表也不太一樣
<dl>
<dt>被描述的東西</dt>
<dd>相關的一些描述，解釋，介紹等等</dd>
<dt>被描述的東西</dt>
<dd>相關的一些描述，解釋，介紹等等</dd>
<dt>被描述的東西</dt>
<dd>相關的一些描述，解釋，介紹等等</dd>
<dd>相關的一些描述，解釋，介紹等等</dd>
</dl>
引用
HTML 有用于標記引用的標簽，并且有塊引用和行內(nèi)引用
瀏覽器會分別給它們添加默認的樣式
<!--塊引用-->
<blockquote cite="引用地址">
<p>引用一個 HTML 塊</p>
</blockquote>
<!--行內(nèi)引用-->
<p>
有一句很著名的話，
<q cite="引用地址">一千個讀者有一千個哈姆雷特</q>
廣為人知
</p>
使用<blockquote>和<q>標簽雖然為文本添加引用樣式，但是不能充分利用cite屬性的內(nèi)容
因此，使用<a><cite></cite></a>這樣的結構更能夠體現(xiàn)引用地址
<a href="寂靜的春天">
<cite>
《寂靜的春天》
</cite>
</a>
描述了一個悲慘的世界
縮略語
在編輯文檔時經(jīng)常遇到縮略語的編寫，為了防止有人不知道縮略語的意思，編寫者通常會解釋一遍縮略語
如果使用<abbr>標簽，那么當鼠標移到縮略語上時，縮略語會自動浮現(xiàn)出全名
<p>
<abbr title="Hyper Text Markup Language">HTML</abbr>
是一個非常重要的標記語言
</p>
其中title屬性應該填寫有關縮略語的全稱
?曾經(jīng)有一個
<acronym>也是縮略語，但它已經(jīng)廢棄
聯(lián)系方式標記
可以使用<address>標記聯(lián)系地址
<address>
<p>123大街123號</p>
<a href="mailto:123456@gamil.com">我的郵箱</a>
</address>
?聯(lián)系方式標記的位置要小心，不要搞錯了
<address>標記的聯(lián)系方式應該是離它最近的<article>所屬
或是當它放在<footer>時，它應該是整個頁面的聯(lián)系方式
上標、下標
上標的標簽是<sup>，下標的標簽是<sub>
展示計算機代碼
-
<code>用來標記計算機通用代碼 -
<pre>將文本包裹在其中，空白字符和換行符將以原樣展示 -
<var>標記變量名 -
<kbd>標記輸入 -
<samp>標記輸出
<p>下面是一段 Python 代碼</p>
<pre>
<code>
<var>BAT</var>="比亞迪，埃安，特斯拉"
<var>STR</var>=input()
print(BAT,STR)
</code>
</pre>
<p>當我們輸入<kbd>我愛</kbd>后，程序會輸出<samp>比亞迪，埃安，特斯拉我愛</samp></p>
標記時間和日期
因為文本表示時間的格式太多了，因此可以把時間插入到<time>中
并為它設置一個機器時間，以此統(tǒng)一時間格式
<time datetime="2016-06-26">2023年 6月 26日</time>
?注意如果時間的位數(shù)不夠，要用零填補其它位置
利用datetime設置一個機器時間
文檔與網(wǎng)站架構
HTML 不僅能夠定義一些細分的結構，也可以使用塊級元素定義網(wǎng)頁的整體架構，從而使得網(wǎng)頁規(guī)劃整齊、可讀性高、語義化強
文檔的基本組成部分
- 頁眉
- 通常橫跨網(wǎng)頁頂部，有大標題或標志
- 放置一些網(wǎng)站的通用信息，通常存在于每個網(wǎng)站頁面
- 導航欄
- 存放著指向網(wǎng)站各部分的超鏈接，是一個索引集
- 通常不跟隨頁面改變而改變
- 主內(nèi)容
- 存放有網(wǎng)頁的展示信息等等
- 側邊欄
- 一些輔助性的功能，通常和主內(nèi)容有關
- 頁腳
- 和頁眉相似，放在網(wǎng)頁底部
- 通常放置一些聲明，鏈接等等信息
用于構建內(nèi)容的HTML
HTML 可根據(jù)功能來為區(qū)段添加標記，使用元素來無歧義地表示內(nèi)容區(qū)段
| 標簽 | 名字 | 介紹 |
|---|---|---|
<header> |
頁眉 | 如果是<main>的子元素那么就是網(wǎng)頁的頁眉如果是 <article>、<section>的子元素那么就是它們獨有的頁眉 |
<nav> |
導航欄 | 包含頁眉的導航功能，但不應該包含二級鏈接等等 |
<main> |
主內(nèi)容 | 存放每個頁面獨有的內(nèi)容，每個頁面僅有一個 |
<article> |
文章 | 包裹著一篇文章這類的，與其它部分無關 |
<section> |
大分區(qū) | 組織頁面的分塊 |
<aside> |
側邊欄 | 包含有一些間接信息，輔助功能等等 |
<footer> |
頁腳 | 放置頁面的頁腳，內(nèi)含一些通用信息 |
<div> |
塊級無語義標簽 | 配合id、class使用 |
<span> |
內(nèi)聯(lián)無語義標簽 | 配合id、class使用 |
<br> |
換行 | 適當?shù)膿Q行能夠優(yōu)化結構 |
<hr> |
水平線 | 使用水平線可以分隔不同部分 |
??不要濫用
div標簽，能不用就不用
HTML-調(diào)試
通常的代碼錯誤分為下列兩種
- 語法錯誤：使用錯誤的編寫使得程序無法運行
- 邏輯錯誤：存在邏輯上的錯誤使得不能產(chǎn)生預期結果
因為瀏覽器是以寬松模式運行的，HTML并不容易出現(xiàn)導致程序停止的錯誤
但正因如此，瀏覽器在修復語法錯誤時很可能給出非預期的結果文章來源：http://www.zghlxwxcb.cn/news/detail-826795.html
在不規(guī)則語法時，可以手動查找
但更好的方法是使用標記驗證服務網(wǎng)站，讓機器幫助你找到語法錯誤文章來源地址http://www.zghlxwxcb.cn/news/detail-826795.html
HTML-語義化小項目
HTML-語義化-信件
HTML-語義化-觀鳥者網(wǎng)
??不要濫用
div標簽，能不用就不用
HTML-調(diào)試
通常的代碼錯誤分為下列兩種
- 語法錯誤：使用錯誤的編寫使得程序無法運行
- 邏輯錯誤：存在邏輯上的錯誤使得不能產(chǎn)生預期結果
因為瀏覽器是以寬松模式運行的，HTML并不容易出現(xiàn)導致程序停止的錯誤
但正因如此，瀏覽器在修復語法錯誤時很可能給出非預期的結果
在不規(guī)則語法時，可以手動查找
但更好的方法是使用標記驗證服務網(wǎng)站，讓機器幫助你找到語法錯誤
到了這里，關于HTML-介紹-MDN文檔學習筆記的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
