網頁頁面常用标簽有：标題标簽h1~h4、段落标簽p、超連結标簽a、圖檔标簽img、清單标簽ul / li、表單标簽from相關、無語義布局标簽div/span、H5新增語義布局标簽header、article、nav、footer、main、aside、section。用的最多就是div标簽，頁面的樣式統統用css編寫，盡管浏覽器給一些預設樣式不喜歡也照樣修改。

一、HTML文檔結構

<!DOCTYPE html>
<!-- 文檔聲明，告訴浏覽器目前使用的HTML标準是HTML5,一定在第一行 -->
<html lang="en">
  <!-- 
    <html></html>：根标簽，告訴浏覽器自己是HTML文檔，所有的标簽都寫在它的裡面
    lang="en"：lang屬性，表示該元素使用的文字是哪一種語言，en英文，zh-CN中文
  -->
  <head>
    <!-- <head></head>:文檔頭，在它裡面的内容一般設定網頁相關資訊，不會被渲染在網頁頁面上-->
    <meta charset="UTF-8" />
    <!-- 
      <meta/>：元屬性描述，文檔的原資料(附加資訊),單标簽
      charset="UTF-8"：字元編碼，制定網頁内容編碼為UTF-8
    -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 
      http-equiv="X-UA-Compatible" ：文檔相容模式的定義
      Edge模式告訴IE以最進階 模式渲染文檔，也就是任何IE版本都以目前版本所支援的最進階标準模式渲染，避免版本更新造成的影響。 
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 
      手機端适配，不寫手機端頁面不用
      viewport：用于指定使用者是否可以縮放Web頁面，并對相關的選項進行設定
      width或height:指定視區的邏輯寬度和高度，取值可以是以像素機關的數字，也可以是特殊的标記符号（device-width：視區寬度應為裝置的螢幕寬度，device-width同理）
      initial-scale：設定Web頁面的初始縮放比例，值設為1.0則顯示未經縮放的Web頁面
     -->
    <title>Document</title>
    <!-- <title></title>:網頁标題-->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="index.js"></script>
    <!-- 頁面圖示、加載外部的css/js檔案......-->
  </head>
  <body>
  <!-- <body></body>:寫網頁的主體，裡面放内容标簽，如a、p、img、h1~h6等  -->
  </body>
</html>

簡單文檔結構：如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body></body>
</html>

儲存以上，檔案格式為.html就是一個html檔案了。

二、注釋、标簽、元素、屬性

注釋：快捷鍵 ctrl+/ ,注釋的内容不會被浏覽器渲染在頁面上，給開發者自己看的

1.1标簽

标簽概念：由尖括号“< >”包圍的關鍵詞，一般是成對出現的，标簽對中第一個标簽是開始标簽如<body>，第二個标簽是結束标簽如</body>

标簽格式：

雙标簽：<開始标簽> </結束标簽>

單（空）标簽：<标簽名/> (沒有結束标簽)

标簽内容：

雙标簽，其内容在兩個标簽中間

<h1>标題</h1>

單标簽，則在标簽屬性中指派

<input type="text" value="标簽内容"/>

1.2元素

HTML 元素：指的是從開始标簽（start tag）到結束标簽（end tag）的所有代碼。

元素的内容：是開始标簽與結束标簽之間的内容

某些 HTML 元素具有空内容如：</br>

元素格式：<開始标簽屬性名="屬性值">元素内容</結束标簽>

元素 = 開始标簽 + 結束标簽 + 元素内容 + 屬性

1.3标簽屬性

鍵值對的格式，屬性名不用加雙引号，屬性值必須加雙引号

屬性分為局部屬性和全局屬性：

局部屬性：某些标簽特有的屬性，如（a标簽的href）

全局屬性：所有元素通用，如：( title lang )

<a href="#" title="超連結說明">超連結</a>

 <p title="段落">段落</p>

總結：

一個标簽可以擁有多個屬性，必須寫在開始标簽中，位于标簽名後面；

屬性之間不分先後順序，标簽名與屬性、屬性與屬性之間均以空格分開；

任何标簽都有預設屬性，省略該屬性則取預設值；

三、内容标簽

學習标簽就是學習标簽的語義，而不是樣式，一些标簽浏覽器自帶的樣式都可以通過css自己修改

3.1标題系列标簽：h1~h6

語義：标題，描述文本的重要程度，表示該文本比較重要，重要性從1到6遞減

文法格式：雙标簽

<!-- vscode編輯器書寫快捷方式：h1*6{我是标題$}，按住tab鍵一次生成6個标簽和内容-->
<h1>我是标題1</h1>
<h2>我是标題2</h2>
<h3>我是标題3</h3>
<h4>我是标題4</h4>
<h5>我是标題5</h5>
<h6>我是标題6</h6>

3.2段落标簽 p

語義：表示描述的内容是一個段落

文法格式：雙标簽

<!--  lorem，亂數假文，沒有任何實際含義的文字
用法：lorem  + tab鍵   随機生成一些英文文字   lerom100 + tab鍵 ：随機生成100個文字-->
<p>段落内容</p>

3.3 實體字元

作用：實體字元通常用于在頁面中顯示一些特殊符号

常用實體字元：

大于号 >	>
小于号 <	<
空格符号
和号 &	&
引号 “	"
元￥	¥
注冊商标 ®	®

3.4 圖檔标簽 img

語義：在對應位置, 加載指定路徑的圖檔。圖檔格式有：.jpg、.png、.gif ......

文法格式：單标簽

<img src="圖檔路徑" alt="路徑不存在提示資訊" title=“圖檔”>

屬性：

src：檔案的路徑

alt：當圖檔加載不出來時的替代文本

title：滑鼠懸停時顯示的内容

height：圖檔的高度。機關可為Px

width：圖檔的寬度度。機關可為Px 或 %

3.5 相對路徑和絕對路徑

路徑分類：相對路徑、絕對路徑

1）相對路徑：（站内資源：目前網站的資源）

1.1書寫格式：

1.2舉例：

2.1、圖像檔案和HTML檔案位于同一檔案夾

隻需輸入圖像檔案的名稱即可，如

<img src="img.png">

2.2、圖像檔案位于HTML檔案的下一級檔案夾

輸入檔案夾名和圖像檔案名，之間用“/”隔開，如

<img src="images/img.png">

2.3、圖像檔案位于HTML檔案的上一級檔案夾

在檔案名之前加入“../” ，如果是上兩級，則需要使用 “../ ../”，以此類推，如

<img src="../img.png">

<img src="../../img.png">

2）絕對路徑：（站外資源：非目前網站的資源）

2.1 本地絕對路徑

c:\images/image.jpg d:\images/image.jpg

2.2 網絡絕對路徑：url位址

協定名://主機名：端口号/路徑 schema://host:port/path 如：https://www.baidu.com/img/flexible/logo/pc/result.png

3.6 超連結标簽 a

語義：定義超連結，點選後跳轉到另一個連結

文法格式：雙标簽

<a href="超連結URL">超連結内容</a>

常用屬性： href target

1）href：規定連結指向的頁面的 URL位址

普通連結（跳轉位址:站内站外）

錨連結定位（跳轉到同一個頁面内的不同位置）

<a href="#id标記名">連結文本</a>
<p id="标記名">跳轉的目标位置</p> <!-- 錨連結定位-->
<a href="#"></a> <!-- 回到頂部、空連結-->

功能連結（點選後，執行某個功能）
<a href="javascript:alert('你好啊');">執行js代碼彈出你好啊</a>  <a href="javascript:;">執行js代碼彈出你好啊</a>   <a href="mailto:[email protected]">點選給我發送郵件</a>   <a href="tel:12345678911">點選給誰撥打電話</a>

2）target ：用于指定連結頁面的打開方式

2個屬性值：

_self 原視窗（預設值，如果不寫target 屬性就預設這個值）

_blank 新視窗

注意：不僅可以建立文本超連結，在網頁中各種網頁元素，如圖像、表格、音頻、視訊等都可以添加超連結

3.7 清單标簽 ul ol dl

語義：描述一組相關的資料，資料的關聯性 (有序或無序)

分類：無序清單、有序清單、自定義清單

1）無序清單：無序清單的各個清單項之間沒有順序級别之分，是并列的（無先後之分）

<!-- ul（定義無序清單）  li（定義清單項目） -->
<ul>    
    <li>清單的項目1</li>
    <li>清單的項目2</li>
    <li>清單的項目3</li>
</ul>

2）有序清單：有序清單即為有排列順序的清單，其各個清單項按照一定的順序排列定義（有先後之分）

<!-- ol（定義有序清單）  li（定義有序清單項目） -->
<ol>    
    <li>清單的項目1</li>
    <li>清單的項目2</li>
    <li>清單的項目3</li>
</ol>

3）自定義清單：清單的同時,進行簡單的分組

<!-- dl（定義 自定義清單）   dt（定義 清單項目）   dd（定義 項目内容）  -->
<dl>
  <dt>名詞</dt>
  <dd>名詞解釋1</dd>
  <dd>名詞解釋2</dd>
  ...
  <dt>名詞</dt>
  <dd>名詞解釋1</dd>
  <dd>名詞解釋2</dd>
  ...
</dl>

注意：

ul 和 li 成對出現，ul中隻能嵌套l，直接在ul标簽中輸入其他标簽或者文字的做法是不規範的寫法，雖然顯示上沒有錯誤
li裡面可以包括其他元素
多級清單可以嵌套（清單裡嵌套清單）

3.8 表格标簽table（了解就行）

語義：定義一個類似于excel的表格

簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。

先指定行, 在行内部指定列

完整複雜表格：(帶有 thead、tbody 以及 tfoot 元素的 HTML 表格)

<caption>表格标題</caption> 
<!-- 表格标題:caption   顯示在表格的正上方、居中、位置, 緊跟在table标簽裡面第一個 -->  

<thead>表格表頭，組合表格的表頭内容</thead>  
<!-- 表格的表頭  thead： 應該與 tbody 和 tfoot 元素結合起來使用,用于對 HTML 表格中的内容進行分組 -->

<tbody>表格内容主體</tbody>  
<!-- 表格的内容主體 tbody：存放真正的資料 -->

 <tfoot>表格頁腳</tfoot>
<!-- 表格的頁腳 tfoot：如果放在tbody前面, 是為了更快的加載，渲染出來會自動放在表格身體後面 -->

<!-- table  ：定義一個表格，所有表格相關元素都寫在table标簽中 -->
<!-- border屬性 ：表框寬度   （一定要加不然很醜） -->
<!-- tr:  行 -->
<!-- th:  表頭 ，效果文本會自動加粗居中 （ 一個表頭也是一個單元格，但是我們使用th使用的是語義，表格第一行用的是表格，解釋每列的含義）-->
<!-- td : 單元格   一個td代表一個單元格，也就是一列-->
<!-- 表格寬度：在不設定的情況下由單元格内容決定  -->

<table border="1">
    <caption>表格标題</caption> 
    <thead>
        <tr>
            <th>表頭1</th>
            <th>表頭2</th>
            <th>表頭3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>表尾1</td>
            <td>表尾2</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>值1</td>
            <td>值2</td>
            <td>值3</td>
        </tr>
        <tr>
            <td>值1</td>
            <td>值2</td>
            <td>值3</td>
        </tr>
        <tr>
            <td>值1</td>
            <td>值2</td>
            <td>值3</td>
        </tr>
    </tbody>  
</table>

注意：

表格的格式, 如果是複雜版的, 一定要寫完整

單元格内, 可以存放其他元素（如：input）

樣式都用css寫，border-collapse:collapse （合并邊框）寫在table标簽上

3.9 表單标簽 form

概念：表單用于搜集不同類型的使用者輸入，如使用者注冊、使用者登入等

書寫方式：

<form action="送出服務端的url位址" method="送出方式（get/post）" name="表單名稱" target=“_blank”>
    各種表單控件和提示資訊
</form>

get：表單資料在頁面位址欄中是可見的

post：安全性更好，在頁面位址欄中被送出的資料是不可見的
target屬性值：_blank（新視窗打開） _self（預設，目前視窗打開） _parent（顯示在父架構中） _top(顯示在視窗的整個 body 中) framename(顯示在命名的 iframe )

1）表單控件 input系列

概念：單标簽，通過type屬性來指定不同的控件類型

快捷輸入 : input:type值 -----> 按下tab鍵

1/常用屬性

1.1收集資訊類

text：普通文本框

password：密碼框（輸入是密文效果）

radio：單選按鈕（name值一樣，設定value值區分是哪個按鈕）

checkbox：複選框（name值一樣，設定value值區分是哪個按鈕）

file：檔案（選擇一些檔案送出）

1.2 按鈕類

reset：重置（把所有輸入的或選擇的控件内容一鍵清空）
submit：送出（把收集的資訊送出給背景伺服器）
button：按鈕（普通按鈕，關聯js代可自定義行為）

2/必填資訊

name: 表單送出時，有name的字段才會背送出，name名就是參數名

value：在單選按鈕或複選框上，value屬性是必填屬性，其他控件類型的控件不是必填的

input控件中預設的文本值（輸入的文本框中文本内容就是value值）

value以此來區分送出的是什麼值，送出的value是給背景看的

<!--   收集資訊類   -->
<form action="" method="get">
    文本框：<input type="text" name="text"><br/>        
    密碼框：<input type="password" name="paw"><br/>
    單選按鈕：
    <input type="radio" name="sex" value="nan">男
    <input type="radio" name="sex" value="nv">女
    <br/>
    多選按鈕：
    <input type="checkbox" name="move" value="zzx">蜘蛛俠
    <input type="checkbox" name="move" value="gtx">鋼鐵俠
    <input type="checkbox" name="move" value="ljr">綠巨人
    <input type="checkbox" name="move" value="fczlm">複仇者聯盟
    <br/>      
    檔案：<input type="file" name="file">            
</form> 

<!--   按鈕類  reset  submit   button-->
<form action="" method="get">
    使用者名：<input id="username" type="text" name="username" placeholder="請輸入使用者名"><br/> 
    
    重置：<input type="reset" value="一鍵清空"><br/> 
    送出：<input type="submit" value="儲存送出">
    普通按鈕：<input type="button" value="點選一鍵清空" onclick="clearAll()"><br/> 
</form> 

<!--  結合普通按鈕js代碼  onclick:點選事件  clearAll()函數  ----》  點選按鈕執行函數，函數最終是清空有id名為username的文本框内容 -->
<script>
    function clearAll(){
        var name = document.getElementById('username');  //擷取id為名username的元素
        name.value = '';
    }
</script>

3/ 部分可選屬性

maxlength：控件允許輸入的最多字元

disabled：禁用此元素，一旦設定後此字段不會被送出，布爾屬性，值為disabled

checked：定義選擇控件預設被選中的項，布爾屬性，值為checked

accept：上傳檔案時類型篩選

autofocus：當頁面加載時自動獲得焦點，布爾屬性，值為autofocus

placeholder：文本框裡顯示的提示資訊
readonly：隻讀，布爾屬性，值為readonly
注意：但凡是布爾屬性，屬性值和屬性名是一樣的，寫一個就行

<!--type屬性輸入字段、以及可選屬性和新增屬性示範說明-->
文本框：<input type="text" name="text" value="預設的文本框内容" autofocus>
密碼框：<input type="password" name="pwd">
性别：
<label>
    <input type="radio" name="sex" value="nan">男
</label>
<label>
    <input type="radio" name="sex" value="nv">女
</label>
喜歡的漫威電影：
<input type="checkbox" name="move" value="zzx">蜘蛛俠
<input type="checkbox" name="move" value="gtx" checked>鋼鐵俠
<input type="checkbox" name="move" value="ljr">綠巨人
<input type="checkbox" name="move" value="fczlm">複仇者聯盟
檔案：
<input type="file" name="file" accept="image/jpeg,image/png">
<input type="submit" value="送出測試">

4/ label标簽

概念：用于綁定一個表單元素, 當點選label标簽内容的時候, 被綁定的表單元素就會獲得輸入焦點

for 屬性規定 label 與哪個表單元素綁定。
<label for="username">使用者名：</label>

id ：與label标簽綁定 id = for屬性的屬性值

方式一：
<label for="username1">使用者名：</label>
<input type="text" id="username1" name="username2"  value="username2">

方式二：
<label for="username2">使用者名：<input type="text" id="username2" name="username2"  value="username2"></label>

5/注意：

表單元素必須要有name屬性，因為要用name屬性把資料傳到伺服器

其實，表單中送出的是value值，而value值和文本值是對應的

送出到背景的書寫方式是 name=value&name=value&name=value

2）表單控件textarea（多行文本輸入框）

定義：定義多行輸入字段（文本域）（如果需要輸入大量的資訊，就需要用到，如文章簡介之類的）

書寫格式：雙标簽

<textarea>
  大量文本内容
</textarea>

屬性：

cols：文本區内的可見寬度

rows：文本區内的可見行數

注意：最好用css的width和height來規定文本框的寬和高

很多屬性都适用，如readonly 、disabled、autofocus、placeholder..........

右下角自由拖動輸入框大小：

預設可随意拖動，利用css可設定不能拖動——> resize ：none

3）表單控件select+option（下拉菜單）

定義：下拉框選項（位址選擇、分類選擇等場景）

書寫格式：select雙标簽、至少包含一對option标簽

select可包含的标簽：

option标簽：可用選項

optgroup标簽：選項組（不加選項組也行）

<select>
    <optgroup> 
        <option>選項1</option>
        <option>選項2</option>
        <option>選項3</option>
</select>

屬性：

1、select标簽：

name：下拉清單的名稱

multiple：是否允許多選 (按住ctrl或shift多選)

size：下拉清單可見的條目（數字值）

2、option标簽

value：預設的文本值

selected：預設選中項，布爾屬性

3、optgroup 标簽

label：分組項名字  <form action="" methed="get" > <label for="dizhi">位址：</label> <select name="address" id="dizhi"> <optgroup label="南京市"> <option value="gl">鼓樓區</option> <option value="pk">浦口區</option> <option value="yht">雨花台區</option> </optgroup> <optgroup label="合肥市"> <option value="yh">瑤海區</option> <option value="bh">包河區</option> <option value="ly">廬陽區</option> </optgroup> </select> <input type="submit"> </form>

4）資料清單 datalist

子元素：option ------》有value屬性

注意：name屬性一定要有

該元素本身不會顯示到頁面，與 input 元素配合使用，來定義 input 可能的值 -------》利用list 和 id 來關聯
input框清單裡， option标簽裡的value值和文本都會顯示出來

<form action="" methed="get" >
    <input type="text" list="url_list" name="link">
    <datalist id="url_list">
        <option value="百度">https://www.baidu.com</option>
        <option value="網易">https://www.163.com</option>
    </datalist>
    <input type="submit">
</form>

5）button标簽

定義：元素定義可點選的按鈕

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

6）其他input系列：（HTML5新增）

type屬性：一般都有相容性問題

url： URL類型
date：日期類型
time：時間類型
month：月類型
week：周類型
number：數字類型
tel：手機号碼
search：搜尋框
color：會顯示一個取色闆，可以選擇顔色
email：郵件類型

3.10 媒體标簽 video audio（HTML5新增）

1）video（視訊）标簽：

src ：要播放的視訊的URL

controls ：（控件） —— 如果出現該屬性，則向使用者顯示控件，比如播放按鈕。布爾屬性 controls

autoplay ：（自動播放） —— 如果出現該屬性，則視訊在就緒後馬上播放。布爾屬性 autoplay

loop ：（循環播放）—— 如果出現該屬性，則當媒介檔案完成播放後再次開始播放。布爾屬性 loop

muted ：（靜音）——規定視訊的音頻輸出應該被靜音。布爾屬性 muted

preload ：（預加載） —— 如果出現該屬性，則視訊在頁面加載時進行加載，并預備播放。布爾屬性 preload (如果使用 "autoplay"，則忽略該屬性)
poster ：（視訊封面）—— URL規定視訊下載下傳時顯示的圖像，或者在使用者點選播放按鈕前顯示的圖像。
width ：設定視訊播放器的寬度

height：設定視訊播放器的高度。

<video src="視訊位址" controls></video>

解決視訊格式适配問題

source标簽：如果存在相容性問題，可以将多個視訊格式的資料源放到source标簽中

<video width="320" height="240" controls="controls"  src="">
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.mvbm" type="video/mvbm">
    <p>你的浏覽器不支援video标簽 </p>
</video>

注意：不同的浏覽器支援的音視訊格式可能不一緻

2）audio（音頻）标簽

和視訊幾乎一樣，隻是沒有寬高、視訊封面

<audio src="音頻位址" controls loop></audio>

四、語義化容器布局标簽(html5新增)

新特性都有相容性問題，基本都是IE9以上版本才支援，如果不考慮相容性問題，才可以使用這些新特性

header：通常用于表示網頁頁頭，也可以用于表示文章的頭部

footer：通常用于表示網頁頁腳，也可以用于表示文章的尾部

頁腳通常包含文檔的作者、版權資訊、使用條款連結、聯系資訊等等。

在一個網頁頁面中可以使用多個 <footer>元素

main：代表頁面的主要部分

main元素中的内容對于文檔來說應當是唯一的。它不應包含在文檔中重複出現的内容，比如側欄、導航欄、版權資訊、站點标志或搜尋表單。

在一個文檔中，不能出現一個以上的 <main>元素。<main> 元素不能是以下元素的後代：<article>、<aside>、<footer>、<header>或 <nav>。

article：<article>标簽中的内容是獨立的、完整的、摘自外部的内容。通常用于表示整篇文章

可以是：部落格文章、新聞文章、論壇文章、網友評論等獨立的内容

标簽中的内容通常有它自己的标題，甚至有時候還有自己的腳注。

可以嵌套使用，但是一般需要外部内容和内部内容有關系。比如：一篇部落格文章，它的評論就可以使用嵌套的形式，将評論内容嵌套在整體内容中。

section: 定義文檔某個區域的标簽。比如章節、頁眉、頁腳或文檔中的其他部分

aside：<aside>元素的内容應該與附近的内容相關，用于添加與主要内容相關的内容。通常用于表示側邊欄

nav：定義導航連結的部分，通常，向其中添加一個ul或ol清單

五、布局常用無語義标簽 div span

1）div

無實際語義，代表一個塊區域，内部用于放置其他标簽。通用容器元素，什麼标簽都可以放在裡面，包括它本身

結合CSS，對網頁結構進行劃分布局

2）span

無實際語義，一般是結合CSS，控制同一行内的某一小段樣式

六、元素包含關系

以前：塊級元素獨占一行，行級元素不換行，塊級元素可以包含行級元素，行級元素不可以包含塊級元素，a元素除外

現在：元素的包含關系由元素的内容類别決定

查找元素包含關系：

百度： h1 mdn，檢視允許内容（去mdn檢視）

總結：

容器元素中可以包含任何元素

a元素幾乎可以包含任何元素

某些元素有固定的子元素（ul>li,ol>li,dl>dt+dd.........)

标題元素和段落元素不能互相嵌套，并且不能包含容器元素

七、常見的文本格式化标簽

<b>粗體</b>            （bold）
<strong>粗體</strong>   語氣更強的強調内容
粗體，推薦使用strong

<i>斜體</i>    
<em>斜體</em>           強調的内容
斜體，推薦使用em

<s>加删除線的文本</s>      加删除線的文本  
<del>已被删除的文本</del>  已被删除的文本
加删除線，推薦使用del

<u>下劃線</u>   
<ins>下劃線</ins>
下劃線，推薦使用ins

</sup>上标</sup> 上标
<sub>下标</sub> 下标

<small>小号字</small> 小号字

b i s u 隻有使用，沒有強調的意思

strong em del ins 語義更強

HTML相關可以檢視官方文檔網站：W3school 或網站：MDN。

分享網站：《Python自學網》http://www.wakey.com.cn/

基礎入門到逐漸深入 | 适合新手入門到精通 | 體系課程：Web開發、爬蟲、圖形界面化、自動化（運維、測試）、雲計算

web前端：HTML與HTML5 知識點總結

一、HTML文檔結構

二、注釋、标簽、元素、屬性

1.1标簽

1.2元素

1.3标簽屬性

三、内容标簽

3.1标題系列标簽：h1~h6

3.2段落标簽 p

3.3 實體字元

3.4 圖檔标簽 img

3.5 相對路徑和絕對路徑

3.6 超連結标簽 a

3.7 清單标簽 ul ol dl

3.8 表格标簽table（了解就行）

3.9 表單标簽 form

3.10 媒體标簽 video audio（HTML5新增）

四、語義化容器布局标簽(html5新增)

五、布局常用無語義标簽 div span

1）div

2）span

六、元素包含關系

七、常見的文本格式化标簽

繼續閱讀

H5測試點

前端開發技術彙總

如何正确的去學習web前端開發？

#人教五上預習#知識點總結#學習打卡ing#學習筆記#假期學習

心理學考研筆記——知覺（上）#24考研#知識點總結#研究所學生#每天學習一點點#幹貨分享

#每一堂課都經得起檢驗#每天學習一點點#手寫筆記#知識點總結

Jeecg-Boot 2.4.0版部署後無法加載驗證碼問題Provisional headers are shown Failed to load response data

用 Canvas 編織璀璨星空圖

HTML5Canvas 酷炫效果

龍珠訓練營task04

聊一聊Swagger-UI的那些事情軟體簡介Swagger 原生Bootstrap-ui Bootstrap的UIKnife4j Bootstrap的更新版的UI

javascript console對象解讀

jQuery練習一. 選擇器練習二. DOM操作練習三. 事件練習

JavaScript的那些坑之事件代理事件代理事件階段

layui多任務上傳添加進度條