整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
Li 對象
Li 對象表示一個 HTML <li> 元素。
訪問 Li 對象
您可以使用 getElementById() 來訪問 <li> 元素：
var x = document.getElementById("myLi");
創(chuàng)建 Li 對象
您可以使用 document.createElement() 方法來創(chuàng)建 <li> 元素：
var x = document.createElement("LI");
Li 對象屬性
| 屬性 | 描述 |
|---|---|
| value | 設置或返回一個列表項的 value 屬性的值。 |
標準屬性和事件
Li 對象同樣支持標準 屬性 和 事件。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
一個頁面的布局就像一張報紙需要排版，需要分為多個區(qū)塊。塊內(nèi)為多行逐一排列的文字、圖片、超鏈接等內(nèi)容，這些區(qū)塊一般稱之為塊級標簽；而文字、圖片、超鏈接等稱之為行級標簽。
塊級標簽顯示的外觀按“塊”來顯示，具有一定的高度和寬度，如：<div>、<p>等；
行級標簽顯示的外觀按“行”來顯示，類似于文本的顯示，如：<img>、<a>等。
1.基本的塊級標簽
1.1.標題標簽<h1>~<h6>
標題標簽表示一段文字的標題（主題），并且支持多層次的內(nèi)容結(jié)構(gòu)，一級標簽使用<h1>，二級標簽使用<h2>，以此類推。html提供六級，<h1>最大，<h6>最小代碼及顯示效果如下：
<html>
<head>
<meta http-equiv="content-type"content="text/html";charset="gb2312">
<title>標題標簽對比</title>
</head>
<body>
<h1>一級標簽</h1>
<h2>二級標簽</h2>
<h3>三級標簽</h3>
<h4>四級標簽</h4>
<h5>五級標簽</h5>
<h6>六級標簽</h6>
</body>
</html>標題標簽代碼預覽
1.2.段落標簽<p>
段落標簽是表示一段文字內(nèi)容的，一個段落可以包含多行文字，文字內(nèi)容將隨瀏覽器窗口的大小自動換行。
<html>
<head>
<meta http-equiv="content-type"content="text/html";charset="gb2312">
<title>段落標簽</title>
</head>
<body>
<h1>標題</h1>
<p>第一段文字</p>
<p>第一段文字</p>
</body>
</html>
段落標簽代碼預覽
1.3.水平線標簽<hr/>
水平線標簽顯示一條水平線，這個標簽比較特殊沒有結(jié)束標簽，直接是用來<hr/>表示標簽的開始和結(jié)束。
<html>
<head>
<meta http-equiv="content-type"content="text/html";charset="gb2312">
<title>段落標簽</title>
</head>
<body>
<h1>標題</h1>
<hr/>
<p>第一段文字</p>
<p>第一段文字</p>
</body>
</html>水平線標簽代碼預覽
2.常用于布局的塊級標簽
2.1.有序列表標簽<ol>
使用<ol>,</ol>(有序列表)，<li></li>(列表項)HTML代碼如下：
<html>
<head>
<meta http-equiv="content-type"content="text/html";charset="gb2312">
<title>有序列表</title>
</head>
<body>
<ol>
<li>第一條數(shù)據(jù)</li>
<li>第二條數(shù)據(jù)</li>
<li>第三條數(shù)據(jù)</li>
</ol>
</body>
</html>有序列表代碼預覽
2.2.無序列表標簽<ul>
使用<ul>,</ul>(無序列表)，<li></li>(列表項)HTML代碼如下：
<html>
<head>
<meta http-equiv="content-type"content="text/html";charset="gb2312">
<title>無序列表</title>
</head>
<body>
<ul>
<li>第一條數(shù)據(jù)</li>
<li>第二條數(shù)據(jù)</li>
<li>第三條數(shù)據(jù)</li>
</ul>
</body>
</html>無序列表代碼預覽
2.3.定義列標簽<dl>
使用<dl>（定義列表）<dt> （定義列表中的項目）和 <dd> （列表中項目的描述）HTML代碼如下：
<html>
<head>
<meta http-equiv="content-type"content="text/html";charset="gb2312">
<title>dl-dt-dd的使用</title>
</head>
<body>
<dl>
<dt>項目名稱</dt>
<dd>項目描述的第一行</dd>
<dd>項目描述的第二行</dd>
</dl>
</body>
</html>定義列標簽<dl>代碼預覽
2.4.表格標簽<teble>
使用<teble>，</teble>（表格），<tr>，</tr>（行），<td>，</td>（列）HTML代碼如下：
<html>
<head>
<meta http-equiv="content-type"content="text/html";charset="gb2312">
<title>table標簽的使用</title>
</head>
<body>
<table width="200" border="1">
<tr>
<td>姓名</td>
<td>年齡</td>
</tr>
<tr>
<td>張三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
</tr>
</table>
</body>
</html>表格標簽代碼預覽
2.5.表單標簽<form>
使用<form>,</form>（表單），<input/>（內(nèi)容）HTML代碼如下：
<html>
<head>
<meta http-equiv="content-type" content="text/html" ;charset="gb2312">
<title>form的使用</title>
</head>
<body>
<form action="" method="post">
<p>
用戶名：
<input name="username" type="text" size="20" />
</p>
<p>
密 碼：
<input name="password" type="password" size="20" />
</p>
<input name="submit" type="button" value="登錄" />
</form>
</body>
</html>
form標簽代碼預覽
2.6.分區(qū)標簽<diy>
<diy>標簽相當于一個大容器，可以容納無序、有序列表，表格等標簽，也可以容納圖片、文字、標題、段落等內(nèi)容HTML代碼如下：
<html>
<head>
<meta http-equiv="content-type"content="text/html";charset="gb2312">
<title>div的使用</title>
</head>
<body>
<div style="width: 500; height: 300; background-color: aquamarine;">
<p>段落標簽</p>
<h1>標題標簽</h1>
<ul>
<li>無序列表標簽第一行</li>
<li>無序列表標簽第二行</li>
</ul>
文字可以直接輸入在這里
</div>
</body>
</html>div標簽代碼預覽
語義化是指根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標簽（代 碼語義化）。通俗來講就是用正確的標簽做正確的事情。
語義化的優(yōu)點如下：
對機器友好，帶有語義的文字表現(xiàn)力豐富，更適合搜索引擎的爬蟲爬 取有效信息，有利于 SEO。除此之外，語義類還支持讀屏軟件，根據(jù) 文章可以自動生成目錄；
對開發(fā)者友好，使用語義類標簽增強了可讀性，結(jié)構(gòu)更加清晰，開發(fā) 者能清晰地看出網(wǎng)頁的結(jié)構(gòu)，便于團隊的開發(fā)與維護。
常見的語義化標簽：
DOCTYPE 是 HTML5 中一種標準通用標記語言的文檔類型聲明，它的目 的是告訴瀏覽器（解析器）應該以什么樣（html 或 xhtml）的文檔類 行定義來解析文檔，不同的渲染模式會影響瀏覽器對 CSS 代碼甚?JavaScript 腳本的解析。它必須聲明在 HTML?檔的第??。
瀏覽器渲染頁面的兩種模式（可通過 document.compatMode 獲取，比 如，語雀官網(wǎng)的文檔類型是 CSS1Compat）：
CSS1Compat：標準模式（Strick mode），默認模式，瀏覽器使用 W3C 的標準解析渲染頁面。在標準模式中，瀏覽器以其支持的最高標準呈 現(xiàn)頁面。
BackCompat：怪異模式(混雜模式)(Quick mode)，瀏覽器使用自己的 怪異模式解析渲染頁面。在怪異模式中，頁面以一種比較寬松的向后 兼容的方式顯示。
如果沒有 defer 或 async 屬性，瀏覽器會立即加載并執(zhí)行相應的腳本。它不會等待后續(xù)加載的文檔元素，讀取到就會開始加載和執(zhí)行，這樣 就阻塞了后續(xù)文檔的加載。
下圖可以直觀地看出三者之間的區(qū)別:
其中藍色代表 js 腳本網(wǎng)絡加載時間，紅色代表 js 腳本執(zhí)行時間，綠 色代表 html 解析。
defer 和 async 屬性都是去異步加載外部的 JS 腳本文件，它們都不 會阻塞頁面的解析，其區(qū)別如下：
執(zhí)行順序：多個帶 async 屬性的標簽，不能保證加載的順序；多個帶 defer 屬性的標簽，按照加載順序執(zhí)行；
腳本是否并行執(zhí)行：async 屬性，表示后續(xù)文檔的加載和執(zhí)行與 js 腳本的加載和執(zhí)行是并行進行的，即異步執(zhí)行；defer 屬性，加載后 續(xù)文檔的過程和 js 腳本的加載(此時僅加載不執(zhí)行)是并行進行的(異步)，js 腳本需要等到文檔所有元素解析完成之后才執(zhí)行，DOMContentLoaded 事件觸發(fā)執(zhí)行之前。
行內(nèi)元素有：a b span img input select strong；
塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；
空元素，即沒有內(nèi)容的 HTML 元素?？赵厥窃陂_始標簽中關(guān)閉的，也就是空元素沒有閉合標簽：
常見的有：<br>、<hr>、<img>、<input>、<link>、<meta>；
鮮見的有：<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>。
在線的情況下，瀏覽器發(fā)現(xiàn) html 頭部有 manifest 屬性，它會請求 manifest 文件，如果是第一次訪問頁面 ，那么瀏覽器就會根據(jù) manifest 文件的內(nèi)容下載相應的資源并且進行離線存儲。如果已經(jīng) 訪問過頁面并且資源已經(jīng)進行離線存儲了，那么瀏覽器就會使用離線 的資源加載頁面，然后瀏覽器會對比新的 manifest 文件與舊的 manifest 文件，如果文件沒有發(fā)生改變，就不做任何操作，如果文 件改變了，就會重新下載文件中的資源并進行離線存儲。
離線的情況下，瀏覽器會直接使用離線存儲的資源。
（1）SVG：
SVG 可縮放矢量圖形（Scalable Vector Graphics）是基于可擴展標 記語言 XML 描述的 2D 圖形的語言，SVG 基于 XML 就意味著 SVG DOM 中的每個元素都是可用的，可以為某個元素附加 Javascript 事件處 理器。在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象 的屬性發(fā)生變化，那么瀏覽器能夠自動重現(xiàn)圖形。
其特點如下：
不依賴分辨率
支持事件處理器
最適合帶有大型渲染區(qū)域的應用程序（比如谷歌地圖）
復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）不適合游戲應用
（2）Canvas：
Canvas 是畫布，通過 Javascript 來繪制 2D 圖形，是逐像素進行渲 染的。其位置發(fā)生改變，就會重新進行繪制。
其特點如下：
依賴分辨率
不支持事件處理器
弱的文本渲染能力
能夠以 .png 或 .jpg 格式保存結(jié)果圖像
最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪
注：矢量圖，也稱為面向?qū)ο蟮膱D像或繪圖圖像，在數(shù)學上定義為一 系列由線連接的點。矢量文件中的圖形元素稱為對象。每個對象都是
一個自成一體的實體，它具有顏色、形狀、輪廓、大小和屏幕位置等 屬性。
dragstart：事件主體是被拖放元素，在開始拖放被拖放元素時觸發(fā)。
darg：事件主體是被拖放元素，在正在拖放被拖放元素時觸發(fā)。dragenter：事件主體是目標元素，在被拖放元素進入某元素時觸發(fā)。dragover：事件主體是目標元素，在被拖放在某元素內(nèi)移動時觸發(fā)。dragleave：事件主體是目標元素，在被拖放元素移出目標元素是觸 發(fā)。
drop：事件主體是目標元素，在目標元素完全接受被拖放元素時觸發(fā)。
dragend：事件主體是被拖放元素，在整個拖放操作結(jié)束時觸發(fā)。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
