HTML DOM Li 對象

Li 對象

Li 對象表示一個(gè) 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	設(shè)置或返回一個(gè)列表項(xiàng)的 value 屬性的值。

標(biāo)準(zhǔn)屬性和事件

Li 對象同樣支持標(biāo)準(zhǔn) 屬性和事件。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

級標(biāo)簽

一個(gè)頁面的布局就像一張報(bào)紙需要排版，需要分為多個(gè)區(qū)塊。塊內(nèi)為多行逐一排列的文字、圖片、超鏈接等內(nèi)容，這些區(qū)塊一般稱之為塊級標(biāo)簽；而文字、圖片、超鏈接等稱之為行級標(biāo)簽。

塊級標(biāo)簽顯示的外觀按“塊”來顯示，具有一定的高度和寬度，如：<div>、<p>等；

行級標(biāo)簽顯示的外觀按“行”來顯示，類似于文本的顯示，如：<img>、<a>等。

1.基本的塊級標(biāo)簽

1.1.標(biāo)題標(biāo)簽<h1>~<h6>

標(biāo)題標(biāo)簽表示一段文字的標(biāo)題（主題），并且支持多層次的內(nèi)容結(jié)構(gòu)，一級標(biāo)簽使用<h1>，二級標(biāo)簽使用<h2>，以此類推。html提供六級，<h1>最大，<h6>最小代碼及顯示效果如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>標(biāo)題標(biāo)簽對比</title>
	</head>	
	<body>
		<h1>一級標(biāo)簽</h1>
		<h2>二級標(biāo)簽</h2>
		<h3>三級標(biāo)簽</h3>
		<h4>四級標(biāo)簽</h4>
		<h5>五級標(biāo)簽</h5>
		<h6>六級標(biāo)簽</h6>
	</body>
</html>

標(biāo)題標(biāo)簽代碼預(yù)覽

1.2.段落標(biāo)簽<p>

段落標(biāo)簽是表示一段文字內(nèi)容的，一個(gè)段落可以包含多行文字，文字內(nèi)容將隨瀏覽器窗口的大小自動換行。

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>段落標(biāo)簽</title>
	</head>	
	<body>
		<h1>標(biāo)題</h1>
		<p>第一段文字</p>
		<p>第一段文字</p>
	</body>
</html>

段落標(biāo)簽代碼預(yù)覽

1.3.水平線標(biāo)簽<hr/>

水平線標(biāo)簽顯示一條水平線，這個(gè)標(biāo)簽比較特殊沒有結(jié)束標(biāo)簽，直接是用來<hr/>表示標(biāo)簽的開始和結(jié)束。

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>段落標(biāo)簽</title>
	</head>	
	<body>
		<h1>標(biāo)題</h1>
    <hr/>
		<p>第一段文字</p>
		<p>第一段文字</p>
	</body>
</html>

水平線標(biāo)簽代碼預(yù)覽

2.常用于布局的塊級標(biāo)簽

2.1.有序列表標(biāo)簽<ol>

使用<ol>,</ol>(有序列表)，<li></li>(列表項(xiàng))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>

有序列表代碼預(yù)覽

2.2.無序列表標(biāo)簽<ul>

使用<ul>,</ul>(無序列表)，<li></li>(列表項(xiàng))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>

無序列表代碼預(yù)覽

2.3.定義列標(biāo)簽<dl>

使用<dl>（定義列表）<dt> （定義列表中的項(xiàng)目）和 <dd> （列表中項(xiàng)目的描述）HTML代碼如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>dl-dt-dd的使用</title>
	</head>	
	<body>
		<dl>
			<dt>項(xiàng)目名稱</dt>
			<dd>項(xiàng)目描述的第一行</dd>
			<dd>項(xiàng)目描述的第二行</dd>
		</dl>
	</body>
</html>

定義列標(biāo)簽<dl>代碼預(yù)覽

2.4.表格標(biāo)簽<teble>

使用<teble>，</teble>（表格），<tr>，</tr>（行），<td>，</td>（列）HTML代碼如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>table標(biāo)簽的使用</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>

表格標(biāo)簽代碼預(yù)覽

2.5.表單標(biāo)簽<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標(biāo)簽代碼預(yù)覽

2.6.分區(qū)標(biāo)簽<diy>

<diy>標(biāo)簽相當(dāng)于一個(gè)大容器，可以容納無序、有序列表，表格等標(biāo)簽，也可以容納圖片、文字、標(biāo)題、段落等內(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>段落標(biāo)簽</p>
			<h1>標(biāo)題標(biāo)簽</h1>
			<ul>
				<li>無序列表標(biāo)簽第一行</li>
				<li>無序列表標(biāo)簽第二行</li>
			</ul>
			文字可以直接輸入在這里
		</div>
	</body>
</html>

div標(biāo)簽代碼預(yù)覽

. 對 HTML 語義化的理解

語義化是指根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標(biāo)簽（代碼語義化）。通俗來講就是用正確的標(biāo)簽做正確的事情。

語義化的優(yōu)點(diǎn)如下：

對機(jī)器友好，帶有語義的文字表現(xiàn)力豐富，更適合搜索引擎的爬蟲爬取有效信息，有利于 SEO。除此之外，語義類還支持讀屏軟件，根據(jù) 文章可以自動生成目錄；

對開發(fā)者友好，使用語義類標(biāo)簽增強(qiáng)了可讀性，結(jié)構(gòu)更加清晰，開發(fā) 者能清晰地看出網(wǎng)頁的結(jié)構(gòu)，便于團(tuán)隊(duì)的開發(fā)與維護(hù)。

常見的語義化標(biāo)簽：

2. DOCTYPE(?檔類型) 的作?

DOCTYPE 是 HTML5 中一種標(biāo)準(zhǔn)通用標(biāo)記語言的文檔類型聲明，它的目的是告訴瀏覽器（解析器）應(yīng)該以什么樣（html 或 xhtml）的文檔類行定義來解析文檔，不同的渲染模式會影響瀏覽器對 CSS 代碼甚?JavaScript 腳本的解析。它必須聲明在 HTML?檔的第??。

瀏覽器渲染頁面的兩種模式（可通過 document.compatMode 獲取，比如，語雀官網(wǎng)的文檔類型是 CSS1Compat）：

CSS1Compat：標(biāo)準(zhǔn)模式（Strick mode），默認(rèn)模式，瀏覽器使用 W3C 的標(biāo)準(zhǔn)解析渲染頁面。在標(biāo)準(zhǔn)模式中，瀏覽器以其支持的最高標(biāo)準(zhǔn)呈現(xiàn)頁面。

BackCompat：怪異模式(混雜模式)(Quick mode)，瀏覽器使用自己的怪異模式解析渲染頁面。在怪異模式中，頁面以一種比較寬松的向后兼容的方式顯示。

3. script 標(biāo)簽中 defer 和 async 的區(qū)別

如果沒有 defer 或 async 屬性，瀏覽器會立即加載并執(zhí)行相應(yīng)的腳本。它不會等待后續(xù)加載的文檔元素，讀取到就會開始加載和執(zhí)行，這樣就阻塞了后續(xù)文檔的加載。

下圖可以直觀地看出三者之間的區(qū)別:

其中藍(lán)色代表 js 腳本網(wǎng)絡(luò)加載時(shí)間，紅色代表 js 腳本執(zhí)行時(shí)間，綠色代表 html 解析。

defer 和 async 屬性都是去異步加載外部的 JS 腳本文件，它們都不會阻塞頁面的解析，其區(qū)別如下：

執(zhí)行順序：多個(gè)帶 async 屬性的標(biāo)簽，不能保證加載的順序；多個(gè)帶 defer 屬性的標(biāo)簽，按照加載順序執(zhí)行；

腳本是否并行執(zhí)行：async 屬性，表示后續(xù)文檔的加載和執(zhí)行與 js 腳本的加載和執(zhí)行是并行進(jìn)行的，即異步執(zhí)行；defer 屬性，加載后續(xù)文檔的過程和 js 腳本的加載(此時(shí)僅加載不執(zhí)行)是并行進(jìn)行的(異步)，js 腳本需要等到文檔所有元素解析完成之后才執(zhí)行，DOMContentLoaded 事件觸發(fā)執(zhí)行之前。

4. 行內(nèi)元素有哪些？塊級元素有哪些？空(void)元素有那些？

行內(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 元素。空元素是在開始標(biāo)簽中關(guān)閉的，也就是空元素沒有閉合標(biāo)簽：

常見的有：<br>、<hr>、<img>、<input>、<link>、<meta>；

鮮見的有：<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>。

5. 瀏覽器是如何對 HTML5 的離線儲存資源進(jìn)行管理和加載？

在線的情況下，瀏覽器發(fā)現(xiàn) html 頭部有 manifest 屬性，它會請求 manifest 文件，如果是第一次訪問頁面，那么瀏覽器就會根據(jù) manifest 文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲。如果已經(jīng) 訪問過頁面并且資源已經(jīng)進(jìn)行離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的 manifest 文件與舊的 manifest 文件，如果文件沒有發(fā)生改變，就不做任何操作，如果文件改變了，就會重新下載文件中的資源并進(jìn)行離線存儲。

離線的情況下，瀏覽器會直接使用離線存儲的資源。

6. Canvas 和 SVG 的區(qū)別

（1）SVG：

SVG 可縮放矢量圖形（Scalable Vector Graphics）是基于可擴(kuò)展標(biāo) 記語言 XML 描述的 2D 圖形的語言，SVG 基于 XML 就意味著 SVG DOM 中的每個(gè)元素都是可用的，可以為某個(gè)元素附加 Javascript 事件處理器。在 SVG 中，每個(gè)被繪制的圖形均被視為對象。如果 SVG 對象的屬性發(fā)生變化，那么瀏覽器能夠自動重現(xiàn)圖形。

其特點(diǎn)如下：

不依賴分辨率

支持事件處理器

最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖）

復(fù)雜度高會減慢渲染速度（任何過度使用 DOM 的應(yīng)用都不快）不適合游戲應(yīng)用

（2）Canvas：

Canvas 是畫布，通過 Javascript 來繪制 2D 圖形，是逐像素進(jìn)行渲染的。其位置發(fā)生改變，就會重新進(jìn)行繪制。

其特點(diǎn)如下：

依賴分辨率

不支持事件處理器

弱的文本渲染能力

能夠以 .png 或 .jpg 格式保存結(jié)果圖像

最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪

注：矢量圖，也稱為面向?qū)ο蟮膱D像或繪圖圖像，在數(shù)學(xué)上定義為一系列由線連接的點(diǎn)。矢量文件中的圖形元素稱為對象。每個(gè)對象都是

一個(gè)自成一體的實(shí)體，它具有顏色、形狀、輪廓、大小和屏幕位置等屬性。

7. 說一下 HTML5 drag API

dragstart：事件主體是被拖放元素，在開始拖放被拖放元素時(shí)觸發(fā)。

darg：事件主體是被拖放元素，在正在拖放被拖放元素時(shí)觸發(fā)。dragenter：事件主體是目標(biāo)元素，在被拖放元素進(jìn)入某元素時(shí)觸發(fā)。dragover：事件主體是目標(biāo)元素，在被拖放在某元素內(nèi)移動時(shí)觸發(fā)。dragleave：事件主體是目標(biāo)元素，在被拖放元素移出目標(biāo)元素是觸發(fā)。

drop：事件主體是目標(biāo)元素，在目標(biāo)元素完全接受被拖放元素時(shí)觸發(fā)。

dragend：事件主體是被拖放元素，在整個(gè)拖放操作結(jié)束時(shí)觸發(fā)。

在線咨詢

上一篇：HTML前端常用標(biāo)簽(復(fù)習(xí))
下一篇：我的HTML的布局的小秘密

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商