01-HTML深入
1.1? 瀏覽器的工作原理
? ? ? ? ?把一些標簽解析成用戶可視化的頁面
1.2 HTML中的標簽與元素
?
? ? ? ? ?在HTML中以<xx>開始，以</xx>結束，比如<html></html>等。
?
? ? ? ? ?標簽和其內容統稱為元素，比如：<xx>h5</xx>
?
? ? ? ? 元素可以有屬性，比如 <xx src=’xxx’>h5</xx>
1.3編碼
數據以什么編碼存入電腦，就必須以什么編碼取出（解碼）。
ASCLL碼
計算機編碼有UTF8、GB2312
1.4? HTML文檔結構
<!--文檔結構是HTML5.0這個版本--> <!DOCTYPE HTML><html><!--head 頁面的頭部，一般用于設置一些參數給瀏覽器使用--><head></head><body></body> </html>1.4.1???? Head
head一般用于設置一些信息給瀏覽器解析時使用。一般在head中通過meta標簽來設置這些參數
<head><!--1.設置頁面的解碼--><meta charset="utf-8"/><!--2.讓頁面適應于PC、移動端--><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!--3.seo搜索引擎優化--><mata name="keywords" content="博客園"></mata><mata name="description" content="米商城直營小米公司旗下所有產品，囊括小米手機系列小米Note 3、小米8、小米MIX 2S，紅米手機系列紅米5 Plus、紅米6 Pro，智能硬件，配件及小米生活周邊，同時提供小米客戶服務及售后支持。"></mata><!--description，和上面的keywords一樣，是用戶不查看源代碼看不到的，而且也是對于一個網頁的簡要內容概況。不同的是，keywords是由幾個詞語的組成的，而description則是完整的一句話。description一般不超過150個字符，描述內容要和頁面內容相關。
用法：<meta?name=”Description”?Content=”你網頁的簡述”>--><title>小米商城</title></head>
注：快速構建HTML結構的快捷鍵：! Tab
1.5? ?標簽的分類
1.5.1 快標簽（block tag）
【1】獨占一行
【2】能設置寬高
無語義標簽：沒有特定的用途 => 什么都可以顯示 => 用于包含別的標簽 => 一般用于容器容納別的標簽。
有語義標簽：有特定的用途
1.5.1.1 DIV
div 是無語義標簽，一般用于頁面架構性布局（DIV CSS）
<div id="top">aaaaa </div>?
1.5.1.2 H1-H6
有語義標簽，專門用于顯示標題的。
<!--2 標題--><h1>我是h1標題</h1><h2>我是h2標題</h2><h3>我是h3標題</h3><h4>我是h4標題</h4><h5>我是h5標題</h5><h6>我是h6標題</h6>1.5.1.3 列表相關
ol/li 表示有序列表（ordered list），有語義標簽。li一定是作為ol的子節點。
ul/li 表示無序列表（unordered list）有語義標簽，li一定是作為ol的子節點。
<!--使用ul-li標簽來完成。ul-li是沒有前后順序的信息列表。li是英文list item的縮寫-->
<body> <ul><li>完美生活</li><li>藍蓮花</li><li>一起搖擺</li> </ul> </body><!--ul>li(然后按下Tab鍵) 含義: 生成一對ul標簽, 然后在這對ul標簽中再生成一對li標簽--><ul><li></li> </ul> <!--ul>li*3(然后按下Tab鍵) 含義: 生成一對ul標簽, 然后在這對ul標簽中再生成3對li標簽標簽--> <ul>
<li></li>
<li></li>
<li></li>
</ul>
<!--<ol>在網頁中顯示的默認樣式一般為：每項<li>前都自帶一個序號，序號默認從1開始--><body> <ol><li>完美生活</li><li>藍蓮花</li><li>一起搖擺</li> </ol> </body>
dl/dt dd 表示定義列表，有語義標簽，一般dd可以有多個
<!--定義列表--><!--<dl><dt></dt><dd></dd></dl>為常用標題 列表型標簽。如沒有對dl dt dd標簽初始CSS樣式，默認dd列表內容會一定縮進。--><dl> <dt>列表標題</dt> <dd>列表內容</dd> <dd>列表內容</dd> ... </dl><!--defined list--><dl><!--defined title--><dt>程序員鼓勵師</dt><!--defined description--><dd>1、長相清新，聲線甜美，微笑常在，人見人愛；</dd><dd>2、善于傾聽，善不善溝通不重要，能忍受IT工程師死宅無法交流的性格；</dd><dd>3、耍不耍脾氣不重要，要善于發現每一個程序暖男的天性，成功馴服；</dd><dd>4、了解互聯網，懂科技，不然聊起來云里霧里，工程師會更受打擊。</dd></dl>1.5.1.4 Table
table是由行（row）構成、行是由單元格（table-cell）構成。
- <tr>…</tr>：表格的一行，所以有幾對tr?表格就有幾行。
- <td>…</td>：表格的一個單元格，一行中包含幾對<td>…</td>，說明一行中就有幾列。
- <th>…</th>：表格的頭部的一個單元格，表格表頭。
- 表格中列的個數，取決于一行中數據單元格的個數。
- table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的
- 表頭，也就是th標簽中的文本默認為粗體并且居中顯示 <!--快捷方法：table>tr*3>td*3--><!--4. table--><table border="1" <!--添加邊框-->><tr><td>aa</td><td>bb</td><td>cc</td></tr><tr><td>aa</td><td>bb</td><td>cc</td></tr><tr><td>aa</td><td>bb</td><td>cc</td></tr></table>
1.5.1.4.1??? 單元格跨列
colspan一個單元格向右占多個列。
<table border="1"><tr><td>11</td><td colspan="2">22</td></tr><tr><td>aa</td><td>bb</td><td>cc</td><td>cc</td></tr></table>? ? ? ? ? ? 1.5.1.4.1??? 單元格跨行
rowspan單元格可以向下跨越多個行，被占的單元格向右擠。
<table border="1"><tr><td>11</td><td>22</td><td>33</td></tr><tr><td rowspan="2">aa</td><td>bb</td><td>cc</td></tr><tr><td>bb</td><td>cc</td></tr></table>1.5.1.5 P
標簽表示段落
<!--p 表示段落--><p>十年后的今天，世界經濟復蘇的勢頭遠不如人們期許的那樣強勁，信心的極端重要性并未減弱。然而，正如國際貨幣基金組織總裁拉加德所言，“籠罩世界經濟的烏云正變得越來越重，最大和最重的烏云是信心的惡化”。惡化人們對世界經濟發展前景信心的源頭來自何方？只要隨手翻一翻各國的報章，讀一讀那些有關美國同貿易伙伴大打貿易戰憂心忡忡的報道，答案再清楚不過地擺在人們面前。</p><p>國際貿易是世界經濟增長的重要一環，美國公開違反世貿規則，大范圍挑起貿易爭端，勢必破壞全球貿易秩序，危害世界經濟增長。世界銀行上月初發布報告指出，全球關稅廣泛上升將會給全球貿易帶來重大負面影響，對新興市場和發展中經濟體的影響尤為明顯，特別是那些與美國貿易或金融市場關聯度較高的經濟體。權威人士預測，如果關稅回到GATT/WTO（關貿總協定和世貿組織）之前的水平，世界經濟將立即收縮2.5%，全球貿易量將削減60%以上，負面影響超過2008年國際金融危機。</p><!--錯誤的用法：不能再p標簽中再放塊標簽--><p><div>test</div></p>1.5.1.6 br
br表示換行，<br /> 我們把這種中間沒有內容的標簽稱為開閉同體標簽。
1.5.2? 行內標簽
【1】? 在一行內顯示
【2】? 不能設置寬高，內容撐開寬高
1.5.2.1 span
span 是無語義行內標簽，一般作為容器使用。
<span style="background: red;height: 100px;">Lorem ipsum dolor sit amet.</span>TEST1.5.2.2? a
a 表示鏈接
1.5.2.2.1? 路徑相關
<!--鏈接到站外--><a href="http://www.baidu.com/">百度</a><!--站內鏈接--><!--絕對路徑：從盤符開始的路徑叫做絕對路徑--><a href="C:\Users\Administrator\Desktop\index-gbk.html">index-gbk</a><!--相對路徑--><!--當前目錄：. --><a href="./index.html">index</a><a href="index.html">index</a>相對路徑 . 表示當前目錄， .. 返回上一級目錄。鏈接找資源時，一定先從當前目錄開始找，所以當前目錄可以省略。
1.5.2.2.3? ? 錨點
通俗地說，錨點就是指在頁面內做調整
<div id="top"></div><div><a href="#early-exp">早年經歷</a><!--點擊跳轉到p標簽的早年經歷--><a href="#professional-exp">演藝經歷</a><a href="#personal-life">個人生活</a><a href="#musics">音樂作品</a></div><p id="early-exp">早年經歷Lorem</p><p id="professional-exp">演藝經歷Lo</p><p id="personal-life">個人生活Lorem ipsum dolor </p><p id="musics">音樂作品Lorem </p><div><a href="#top">TOP</a><!--點擊回到頂部--></div>1.5.2.3 Img
專門用于顯示圖片。
1.5.2.3.1常用屬性
alt：當圖片加載失敗時的提示文本
title：當鼠標懸停時的提示文本
<img alt="阿黛爾" title="阿黛爾" src="https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/w=268;g=0/sign=d6e1fdf69325bc312b5d069e66e4ea8c/6f061d950a7b020880e017d968d9f2d3572cc8d9.jpg" />1.5.2.4?var/strong/em
var、strong、em 本意表示強調作用，有語義標簽，強調的表現形式不一樣，var/em 斜體強調，strong加粗強調。
<var>我是var</var> <!--強調字體下斜--> <strong>我是strong</strong> <!--強調字體加粗--> <em>我是em</em> <!--強調字體傾斜-->在實際開發過程中，一般來說都不用他們的本意，而是把他們降級成一般的無語義行內標簽使用
?
本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=baaaaaa&title=01-HTML深入
總結
- 上一篇： vue-wechat-title
- 下一篇： Flex 学习