時間：2023-09-07 07:54:01 | 來源：網(wǎng)站運(yùn)營
時間：2023-09-07 07:54:01 來源：網(wǎng)站運(yùn)營
Web前端：html常用知識點(diǎn)整理總結(jié)（長篇-詳細(xì)自用）：篇幅有點(diǎn)長，有示例代碼知道標(biāo)簽如何使用，還有標(biāo)簽的語義描述，學(xué)習(xí)標(biāo)簽先知道語義再安排放在哪使用，不過頁面大部分布局都是div搞定，不講究SEO優(yōu)化可以不考慮H5新增的容器標(biāo)簽，不過個人覺得還是最好用，哪個做網(wǎng)站的不希望自己網(wǎng)站排名好點(diǎn)呢~
在線咨詢
<!DOCTYPE html><!-- 文檔聲明，告訴瀏覽器當(dāng)前使用的HTML標(biāo)準(zhǔn)是HTML5,一定在第一行 --><html lang="en"> <!-- <html></html>：根標(biāo)簽，告訴瀏覽器自己是HTML文檔給，所有的標(biāo)簽都寫在它的里面 lang="en"：lang屬性，表示該元素使用的文字是哪一種語言，en英文，zh-CN中文 --> <head> <!-- <head></head>:文檔頭，在它里面的內(nèi)容一般設(shè)置網(wǎng)頁相關(guān)信息，不會被渲染在網(wǎng)頁頁面上--> <meta charset="UTF-8" /> <!-- <meta/>：元屬性描述，文檔的原數(shù)據(jù)(附加信息),單標(biāo)簽 charset="UTF-8"：字符編碼，制定網(wǎng)頁內(nèi)容編碼為UTF-8 --> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- http-equiv="X-UA-Compatible" ：文檔兼容模式的定義 Edge模式告訴IE以最高級 模式渲染文檔，也就是任何IE版本都以當(dāng)前版本所支持的最高級標(biāo)準(zhǔn)模式渲染，避免版本升級造成的影響。 --> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- 手機(jī)端適配，不寫手機(jī)端頁面不用 viewport：用于指定用戶是否可以縮放Web頁面，并對相關(guān)的選項進(jìn)行設(shè)定 width或height:指定視區(qū)的邏輯寬度和高度，取值可以是以像素單位的數(shù)字，也可以是特殊的標(biāo)記符號（device-width：視區(qū)寬度應(yīng)為設(shè)備的屏幕寬度，device-width同理） initial-scale：設(shè)置Web頁面的初始縮放比例，值設(shè)為1.0則顯示未經(jīng)縮放的Web頁面 --> <title>Document</title> <!-- <title></title>:網(wǎng)頁標(biāo)題--> <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> <!-- 頁面圖標(biāo)、加載外部的css/js文件......--> </head> <body> <!-- <body></body>:寫網(wǎng)頁的主體，里面放內(nèi)容標(biāo)簽，如a、p、img、h1~h6等 --> </body></html>簡單文檔結(jié)構(gòu)：如下<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body></body></html>保存以上，文件格式為.html就是一個html文件了。<body> ，第二個標(biāo)簽是結(jié)束標(biāo)簽如 </body> <h1>標(biāo)題</h1> <input type="text" value="標(biāo)簽內(nèi)容"/><br/> <a href="#" title="超鏈接說明">超鏈接</a><p title="段落">段落</p><!-- vscode編輯器書寫快捷方式：h1*6{我是標(biāo)題$}，按住tab鍵一次生成6個標(biāo)簽和內(nèi)容--><h1>我是標(biāo)題1</h1><h2>我是標(biāo)題2</h2><h3>我是標(biāo)題3</h3><h4>我是標(biāo)題4</h4><h5>我是標(biāo)題5</h5><h6>我是標(biāo)題6</h6><!-- lorem，亂數(shù)假文，沒有任何實(shí)際含義的文字用法：lorem + tab鍵 隨機(jī)生成一些英文文字 lerom100 + tab鍵 ：隨機(jī)生成100個文字--><p>段落內(nèi)容</p>| 大于號 > | > |
|---|---|
| 小于號 < | < |
| 空格符號 | |
| 和號 & | & |
| 引號 “ | " |
| 元 ￥ | ¥ |
| 注冊商標(biāo) ? | ® |
<img src="圖片路徑" alt="路徑不存在提示信息" title=“圖片”>屬性： 只需輸入圖像文件的名稱即可，如<img src="img.png">? 2.2、圖像文件位于HTML文件的下一級文件夾 輸入文件夾名和圖像文件名，之間用“/”隔開，如<img src="images/img.png">? 2.3、圖像文件位于HTML文件的上一級文件夾在文件名之前加入“../” ，如果是上兩級，則需要使用 “../ ../”，以此類推，如2）絕對路徑：（站外資源：非當(dāng)前網(wǎng)站的資源）
<img src="../img.png">
<img src="../../img.png">
協(xié)議名://主機(jī)名：端口號/路徑 schema://host:port/path 如：https://www.baidu.com/img/flexible/logo/pc/result.png
<a href="超鏈接URL">超鏈接內(nèi)容</a>常用屬性： href target<a href="#id標(biāo)記名">鏈接文本</a><p id="標(biāo)記名">跳轉(zhuǎn)的目標(biāo)位置</p> <!-- 錨鏈接定位--><a href="#"></a> <!-- 回到頂部、空鏈接--><!-- 1、執(zhí)行js代碼 ： 語法：javascript:js代碼; --><a href="javascript:alert('你好啊');">執(zhí)行js代碼彈出你好啊</a> <!-- 執(zhí)行js代碼--><a href="javascript:;">執(zhí)行js代碼彈出你好啊</a> <!-- javascript:; 一個空鏈接--><!-- 2、發(fā)送郵件 ： 語法：mailto: 郵箱地址 --><a href="mailto:123456789@qq.com">點(diǎn)擊給我發(fā)送郵件</a><!-- 要求：用戶計算機(jī)上安裝有郵件發(fā)送軟件 exchange --><!-- 3、撥打電話： 語法; tel: 電話號碼 --><a href="tel:12345678911">點(diǎn)擊給誰撥打電話</a><!-- 要求：用戶計算機(jī)上安裝有撥號軟件，或使用的是移動端訪問 -->2）target ：用于指定鏈接頁面的打開方式<!-- 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）自定義列表：列表的同時,進(jìn)行簡單的分組<!-- dl（定義 自定義列表） dt（定義 列表項目） dd（定義 項目內(nèi)容） --><dl> <dt>名詞</dt> <dd>名詞解釋1</dd> <dd>名詞解釋2</dd> ... <dt>名詞</dt> <dd>名詞解釋1</dd> <dd>名詞解釋2</dd> ...</dl>注意：<caption>表格標(biāo)題</caption> <!-- 表格標(biāo)題:caption 顯示在表格的正上方、居中、位置, 緊跟在table標(biāo)簽里面第一個 --> <thead>表格表頭，組合表格的表頭內(nèi)容</thead> <!-- 表格的表頭 thead： 應(yīng)該與 tbody 和 tfoot 元素結(jié)合起來使用,用于對 HTML 表格中的內(nèi)容進(jìn)行分組 --><tbody>表格內(nèi)容主體</tbody> <!-- 表格的內(nèi)容主體 tbody：存放真正的數(shù)據(jù) --> <tfoot>表格頁腳</tfoot><!-- 表格的頁腳 tfoot：如果放在tbody前面, 是為了更快的加載，渲染出來會自動放在表格身體后面 --><!-- table ：定義一個表格，所有表格相關(guān)元素都寫在table標(biāo)簽中 --><!-- border屬性 ：表框?qū)挾? （一定要加不然很丑） --><!-- tr: 行 --><!-- th: 表頭 ，效果文本會自動加粗居中 （ 一個表頭也是一個單元格，但是我們使用th使用的是語義，表格第一行用的是表格，解釋每列的含義）--><!-- td : 單元格 一個td代表一個單元格，也就是一列--><!-- 表格寬度：在不設(shè)置的情況下由單元格內(nèi)容決定 --><table border="1"> <caption>表格標(biāo)題</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>注意：<form action="提交服務(wù)端的url地址" method="提交方式（get/post）" name="表單名稱" target=“_blank”> 各種表單控件和提示信息</form><!-- 收集信息類 --><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">復(fù)仇者聯(lián)盟 <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="點(diǎn)擊一鍵清空" onclick="clearAll()"><br/> </form> <!-- 結(jié)合普通按鈕js代碼 onclick:點(diǎn)擊事件 clearAll()函數(shù) ----》 點(diǎn)擊按鈕執(zhí)行函數(shù)，函數(shù)最終是清空有id名為username的文本框內(nèi)容 --><script> function clearAll(){ var name = document.getElementById('username'); //獲取id為名username的元素 name.value = ''; }</script><!--type屬性輸入字段、以及可選屬性和新增屬性演示說明-->文本框：<input type="text" name="text" value="默認(rèn)的文本框內(nèi)容" 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">復(fù)仇者聯(lián)盟文件：<input type="file" name="file" accept="image/jpeg,image/png"><input type="submit" value="提交測試">方式一：<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><textarea> 大量文本內(nèi)容</textarea>屬性：<select> <optgroup> <option>選項1</option> <option>選項2</option> <option>選項3</option></select>屬性：<!--提交的是下拉列表的名字 name的值=option的value的值 address=gl --><form action="" methed="get" > <label for="dizhi">地址：</label> <select name="address" id="dizhi"> <optgroup label="杭州市"> <option value="gl">鼓樓區(qū)</option> <option value="pk">浦口區(qū)</option> <option value="yht">雨花臺區(qū)</option> </optgroup> <optgroup label="杭州市"> <option value="yh">瑤海區(qū)</option> <option value="bh">包河區(qū)</option> <option value="ly">廬陽區(qū)</option> </optgroup> </select> <input type="submit"></form><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="網(wǎng)易">https://www.163.com</option> </datalist> <input type="submit"></form><button type="button" onclick="alert('Hello World!')">Click Me!</button>如果使用 "autoplay"，則忽略該屬性。
<video src="" controls></video>解決視頻格式適配問題<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標(biāo)簽 </p></video>注意：不同的瀏覽器支持的音視頻格式可能不一致<audio src="" controls loop></audio>頁腳通常包含文檔的作者、版權(quán)信息、使用條款鏈接、聯(lián)系信息等等。
在一個網(wǎng)頁頁面中可以使用多個
元素
main元素中的內(nèi)容對于文檔來說應(yīng)當(dāng)是唯一的。它不應(yīng)包含在文檔中重復(fù)出現(xiàn)的內(nèi)容，比如側(cè)欄、導(dǎo)航欄、版權(quán)信息、站點(diǎn)標(biāo)志或搜索表單。
在一個文檔中，不能出現(xiàn)一個以上的
元素 。 元素不能是以下元素的后代：、、、或 。
可以是：博客文章、新聞文章、論壇帖子、網(wǎng)友評論等獨(dú)立的內(nèi)容
標(biāo)簽中的內(nèi)容通常有它自己的標(biāo)題，甚至有時候還有自己的腳注。
可以嵌套使用，但是一般需要外部內(nèi)容和內(nèi)部內(nèi)容有關(guān)系。比如：一篇博客文章，它的評論就可以使用嵌套的形式，將評論內(nèi)容嵌套在整體內(nèi)容中。
ul或ol列表<b>粗體</b> （bold）<strong>粗體</strong> 語氣更強(qiáng)的強(qiáng)調(diào)內(nèi)容粗體，推薦使用strong<i>斜體</i> <em>斜體</em> 強(qiáng)調(diào)的內(nèi)容斜體，推薦使用em<s>加刪除線的文本</s> 加刪除線的文本 <del>已被刪除的文本</del> 已被刪除的文本加刪除線，推薦使用del<u>下劃線</u> <ins>下劃線</ins>下劃線，推薦使用ins</sup>上標(biāo)</sup> 上標(biāo)<sub>下標(biāo)</sub> 下標(biāo)<small>小號字</small> 小號字關(guān)鍵詞：總結(jié),詳細(xì),整理,知識
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
