html_02 | HTML——② HTML 元素、屬性詳解
本文推薦 PC 端閱讀~
本文版權歸 「公衆號 | 前端一萬小時」 全部，未經受權，請勿轉載！
複製代碼
html_02
複製代碼
1. meta 有哪些常見的值？
2. meta viewport 是作什麼用的，怎麼寫？
3. 列出常見的標籤，並簡單介紹這些標籤用在什麼場景？
4. 如何在 html 頁面上展現 <div></div> 這幾個字符？
5. 你是如何理解 HTML 語義化的？
6. 前端須要注意哪些 SEO？
7. 你對網頁標準和 W3C 重要性的理解？
8. 關於語義化，如下說法錯誤的是？（不定項）
✅ 在作頁面作總體佈局的時候，table 標籤用起來很方即可以做爲佈局的一種推薦方案。
❌ 語義化的本質是可讀性，讓代碼適合本身閱讀、適合隊友閱讀、適合機器閱讀。
✅ 對於 h1-h六、p、span 這些標籤，用 div 替換也不要緊，修改它的 display 屬性便可。
❌ 使用語義化標籤能讓代碼更簡潔，因此能用盡可能用。
複製代碼
前言： 上一篇《HTML——① HTML 基礎》中，咱們對 HTML 有了初步的認識，在徹底掌握的基礎上，這一篇咱們將會接觸大量經常使用的「標籤元素」及其「屬性」等。知識點不少，可是，細細的看下去，收穫必定很大。css
1 學完這篇要達到的目標
隨便打開一個頁面，鼠標指到任意位置都知道該用什麼標籤就算 OK 。html
1.1 提早給出總結
咱們在選用標籤時，就去跟他的本質功能去作對應，儘可能選用語義化的標籤來構建整個頁面框架：前端
- 若是是標題，就用
<h>； - 若是是一段話，就用
<p>； - 若是不知道他是什麼，若是這個東西能佔一行，就用
<div>；若是沒有一行，就一個小小的位置，就用<span>； - 若是是可點擊的就用一個
<a>連接； - 若是像那種並列一排排的，甚至還有一點一點，就用「列表」；
- 若是看到一個表格，就用
<table>； - 若是看到了一個輸入框，就用
<input>。
2 細說各元素，各屬性
2.1 元數據 <meta>
2.1.1 指定文檔編碼
<meta charset="UTF-8">
複製代碼
2.1.2 適配移動端頁面（理解並牢記）
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
複製代碼
註釋：面試
width=device-width寬度 = 設備寬度user-scalable=no用戶縮放 = 不容許initial-scale=1.0初始比例 = 1maximum-scale=1.0最大比例 = 1minimum-scale=1.0最小比例 = 1
2.1.3 定製頁面圖標（即頁面標籤前邊的小圖標）
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
註釋：href="favicon.ico" 這裏邊放這個圖標的圖形文件地址。
複製代碼
2.1.4 設置 referer（圖片所在的當前這個頁面的地址）
<meta name="referer" content="never">
複製代碼
2.1.5 添加頁面描述（即咱們在搜索時看到的網站介紹）
<meta name="description" content="註冊即表明你贊成《知乎協議》註冊機構號……">
複製代碼
2.2 <head> 頭部元素裏邊還能夠放：CSS 和 JS
<link rel="stylesheet" href="--.css">
<script src="--.js"></script>
複製代碼
- 註釋：正如上篇中所說，頭部元素
<head>裏邊全部的標籤元素都不會顯示給用戶，但它會承載一些與頁面描述相關的東西：CSS 樣式、meta、title 等。 - 註釋：咱們這裏的
<link>標籤，來引入的 CSS 樣式屬於咱們最經常使用的外部樣式表。有一點咱們必須清楚：HTML 創建內容的「結構」，CSS 提供「樣式」和「表現」。
2.3 列表
- 任務：寫出如下圖片（本文摘取）的 HTML 。
🔗效果及源碼連接瀏覽器
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>Oli-Zhao的前端一萬小時</title>
</head>
<body>
<h1>1、學完這篇要達到的目標</h1>
<p>隨便打開一個頁面，鼠標指到任意位置都知道該用什麼標籤就OK。<br>
提早給出總結（咱們在選用標籤時……
</p>
<ul> <!--註釋1-->
<li>若是是標題，就用<h>;</li> <!--註釋2-->
<li>若是是一段話，就用<p></li> <!--註釋3-->
<li>若是是可點擊的就用一個<a>連接；</li>
<li>若是像那種並列一排排的，甚至還有一點一點，就用「列表」；</li>
<li>……</li>
</ul>
</body>
</html>
複製代碼
- 註釋1：
<ul>是 Unordered List——無序列表的簡稱；而<ol>是 Ordered List——有序列表的簡稱。兩者惟一的區別就是，有序列表是123……開頭，而無序列表是小黑點開頭。其餘格式同樣，再也不贅述； - 註釋2：
<ul>或<ol>直接嵌套的標籤是<li>標籤，他們之間不容許再嵌套任何標籤。須要嵌套的話，要嵌套在<li>標籤裏； - 註釋3：
<>這個乍看如亂碼同樣的字符就是咱們 HTML 中的「實體」，lt 是 less than 「小於」的簡稱；gt 是 greater than 「大於」的簡稱。而後前邊加一個&字符——實體都是以&開頭，以;結尾。咱們想顯示出<h>這樣一個文本，咱們在 HTML 中是不能直接打出<或>等這種符號的，否者會被瀏覽器直接識別成元素，所以咱們要進行特殊處理。
💡更多實體請參考 ：實體符號參考手冊bash
2.4 自定義列表
即一個文檔裏一個標題一個介紹，一個標題一個介紹……：框架
- 任務：寫出如下圖片（本文摘取）的 HTML。
🔗效果及源碼連接less
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>Oli-Zhao的前端一萬小時</title>
</head>
<body>
<h1>2、細說各元素，各屬性</h1>
<p>1. 元數據<meta>:</p>
<dl>
<dt>-- 指定文檔編碼：</dt>
<dd><meta charset="UTF-8"> </dd>
<dt>-- 適配移動端頁面：</dt>
<dd><meta name="viewport" content="widt……></dd>
<dt>-- 定製頁面圖標（即頁面標籤前邊的小圖標）：</dt>
<dd><link rel="shortcut icon" href="favicon.ico……><br>
註釋：href="favicon.ico" 這裏邊放這個圖標的圖形文件地址。
</dd>
</dl>
</body>
</html>
複製代碼
2.5 超連接標籤
2.5.1 簡單連接
<a href="這裏寫連接地址" title="Oli-Zhao的前端一萬小時">知乎-oliver</a>
註釋：這裏的 title 屬性，做用就是：當咱們把鼠標停在 oliver 上時，會彈出一個文本框：
Oli-Zhao的前端一萬小時。
複製代碼
2.5.2 外部連接
將 target 設置成 _blank 時，點擊這個連接，瀏覽器會新開一個窗口打開該網頁：佈局
<a href="這裏寫連接地址" title="Oli-Zhao的前端一萬小時" target="_blank">知乎-oliver</a>
註釋：固然這裏的 target 屬性還能夠設置成其餘值。
複製代碼
2.5.3 返回頁面頂部連接
<a href="#">返回頁面頂部</a>
註釋：這裏的 # 後邊是能夠加東西的，能夠是文檔中某個元素的 ID，也能夠是某個標題等等（但前
提是這些東西要惟一，否則沒辦法定位到具體位置）。
複製代碼
2.5.4 圖片連接
用圖片來做爲連接可點擊的對象。學習
2.5.5 下載連接
<a href="https://……這裏放下載的連接" download>下載</a>
註釋：當咱們點擊「下載」二字時，就會自動下載這個連接的東西。
複製代碼
2.5.6 電話連接
<a href="tel:+86177******">打電話給oliver</a>
註釋：當用戶是手機瀏覽頁面時，點擊「打電話給oliver」，手機就會自動撥號到這個號碼。
複製代碼
2.5.7 Email 連接
<a href="mailto:olizhao725@gmail.com">發郵件給oliver</a>
註釋：當點擊「發郵件給oliver」時，則自動打開郵箱跳轉到寫信頁面；
<a href="mailto:olizhao725@gmail.com" cc="amantang@gmail.com">發郵件給
oliver並抄送給Aman</a>
註釋：當點擊"發郵件給oliver並抄送給Aman"，則自動打開郵箱跳轉到寫信頁面並填好抄送人。
複製代碼
2.6 表格
- 任務：將上文中「實體」示例的表格用 HTML 寫出來。
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>Oli-Zhao的前端一萬小時</title>
<style type="text/css"> /*註釋1*/
table {
border-collapse: collapse; /*註釋2*/
}
th, td {
border: 1px solid green; /*註釋3*/
}
</style>
</head>
<body>
<table> <!--註釋4-->
<thead> <!--註釋5-->
<tr> <!--註釋6-->
<th>顯示結果</th>
<th>描述</th>
<th>實體名稱</th>
<th>實體編號</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>空格</td>
<td>&nbsp;</td>
<td>&#160;</td>
</tr>
<tr>
<td><</td>
<td>小於號</td>
<td>&lt;</td>
<td>&#60;</td>
</tr>
<tr>
<td>></td>
<td>大於號</td>
<td>&gt;</td>
<td>&#62;</td>
</tr>
<tr>
<td colspan="4">……</td> <!--註釋7-->
</tr>
</tbody>
</table>
</body>
</html>
複製代碼
- 註釋1：
<style type="text/css"> /*註釋1*/ table { border-collapse: collapse; /*註釋2*/ } th, td { border: 1px solid green; /*註釋3*/ } </style>
複製代碼
咱們 CSS 的引用能夠採用在表頭裏邊加 <style> 樣式元素來實現，注意格式。
這裏邊的 type=text/css 是咱們 <style> 元素的屬性——實際工做中對於本元素這個屬性能夠不用寫，全部瀏覽器均可以知道你用這個元素就是指的是 CSS 。屬性的做用是用來提供元素的一些額外信息。
- 註釋2：
<style type="text/css"> /*註釋1*/ table { border-collapse: collapse; /*註釋2*/ } th, td { border: 1px solid green; /*註釋3*/ } </style>
複製代碼
border-collapse 屬性設置表格的邊框是否被合併爲一個單一的邊框。它有如下幾個值：
-- separate 默認值：邊框會被分開，不會忽略 border-spacing 和 empty-cells 屬性；
-- collapse ：若是可能，邊框會合併爲一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性；
-- inherit ：規定應該從父元素繼承 border-collapse 屬性的值。
- 註釋3：
<style type="text/css"> /*註釋1*/ table { border-collapse: collapse; /*註釋2*/ } th, td { border: 1px solid green; /*註釋3*/ } </style>
複製代碼
這裏是設置 <th> 、 <td> 元素的「邊界、邊框—— border」的樣式。
-- solid：線；
-- dashed：破折號；
-- dotted：點
- 註釋4：
<table> <!--註釋4-->
<thead> <!--註釋5-->
<tr> <!--註釋6-->
<th>顯示結果</th>
<th>描述</th>
<th>實體名稱</th>
<th>實體編號</th>
</tr>
</thead>
複製代碼
表格開始。
-
註釋5：table head 表頭開始（在頁面展現時會以加粗的方式顯示）。
-
註釋6：
- tr = table row 表格的一行，下邊只能嵌入
<td>或<th>元素。 - td = table data cell 表示行中的一個列；
- th = 是表頭裏邊用於和 td 一樣做用的元素。
- tr = table row 表格的一行，下邊只能嵌入
-
註釋7：
<tr>
<td colspan="4">……</td> <!--註釋7-->
</tr>
複製代碼
colspan 屬性規定單元格可橫跨的列數。這裏咱們讓他橫跨了 4 列（注意看頁面效果）；而對應的橫跨多個行數是 rowspan 屬性。——這兩個屬性是用在 <td> 、 <th> 元素裏的。
後記： 這篇的學完，咱們也算是漸入佳境。稍後把下一篇的「表單」學完，那基本上咱們能夠把一個頁面的大致框架寫出來了。對於其餘很是用剩餘標籤、屬性，咱們將在後邊的學習、工做中各個擊破。
祝好，qdywxs ♥ you！
相關文章
- 1. html基礎元素，屬性
- 2. 瞭解HTML表單之input元素的30個元素屬性
- 3. 1-HTML元素 屬性 格式化
- 4. CSS HTML元素佈局及Display屬性
- 5. 【HTML】塊級元素的盒子屬性
- 6. 前端————HTML頁面元素和屬性
- 7. 3、HTML 學習記錄——元素、屬性
- 8. HTML元素分類, CSS padding margin border屬性詳解
- 9. HTML accesskey屬性詳解
- 10. html中Marquee屬性詳解
- 更多相關文章...
- • W3C HTML 活動 - W3C 教程
- • XQuery FLWOR + HTML - XQuery 教程
- • JDK13 GA發佈：5大特性解讀
- • Flink 數據傳輸及反壓詳解
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記
歡迎關注本站公眾號,獲取更多信息
