HTML DOM Li 对象

Li 对象

Li 对象表示一个 HTML <li> 元素。

访问 Li 对象

您可以使用 getElementById() 来访问 <li> 元素：

var x = document.getElementById("myLi");

创建 Li 对象

您可以使用 document.createElement() 方法来创建 <li> 元素：

var x = document.createElement("LI");

Li 对象属性

属性	描述
value	设置或返回一个列表项的 value 属性的值。

标准属性和事件

Li 对象同样支持标准属性和事件。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

级标签

一个页面的布局就像一张报纸需要排版，需要分为多个区块。块内为多行逐一排列的文字、图片、超链接等内容，这些区块一般称之为块级标签；而文字、图片、超链接等称之为行级标签。

块级标签显示的外观按“块”来显示，具有一定的高度和宽度，如：<div>、<p>等；

行级标签显示的外观按“行”来显示，类似于文本的显示，如：<img>、<a>等。

1.基本的块级标签

1.1.标题标签<h1>~<h6>

标题标签表示一段文字的标题（主题），并且支持多层次的内容结构，一级标签使用<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>

段落标签是表示一段文字内容的，一个段落可以包含多行文字，文字内容将随浏览器窗口的大小自动换行。

<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/>

水平线标签显示一条水平线，这个标签比较特殊没有结束标签，直接是用来<hr/>表示标签的开始和结束。

<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>第一条数据</li>
			<li>第二条数据</li>
			<li>第三条数据</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>第一条数据</li>
			<li>第二条数据</li>
			<li>第三条数据</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/>（内容）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.分区标签<diy>

<diy>标签相当于一个大容器，可以容纳无序、有序列表，表格等标签，也可以容纳图片、文字、标题、段落等内容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标签代码预览

. 对 HTML 语义化的理解

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。

语义化的优点如下：

对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于 SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；

对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰地看出网页的结构，便于团队的开发与维护。

常见的语义化标签：

2. DOCTYPE(⽂档类型) 的作⽤

DOCTYPE 是 HTML5 中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html 或 xhtml）的文档类行定义来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚⾄JavaScript 脚本的解析。它必须声明在 HTML⽂档的第⼀⾏。

浏览器渲染页面的两种模式（可通过 document.compatMode 获取，比如，语雀官网的文档类型是 CSS1Compat）：

CSS1Compat：标准模式（Strick mode），默认模式，浏览器使用 W3C 的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。

BackCompat：怪异模式(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。

3. script 标签中 defer 和 async 的区别

如果没有 defer 或 async 属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。

下图可以直观地看出三者之间的区别:

其中蓝色代表 js 脚本网络加载时间，红色代表 js 脚本执行时间，绿色代表 html 解析。

defer 和 async 属性都是去异步加载外部的 JS 脚本文件，它们都不会阻塞页面的解析，其区别如下：

执行顺序：多个带 async 属性的标签，不能保证加载的顺序；多个带 defer 属性的标签，按照加载顺序执行；

脚本是否并行执行：async 属性，表示后续文档的加载和执行与 js 脚本的加载和执行是并行进行的，即异步执行；defer 属性，加载后续文档的过程和 js 脚本的加载(此时仅加载不执行)是并行进行的(异步)，js 脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded 事件触发执行之前。

4. 行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内元素有：a b span img input select strong；

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；

空元素，即没有内容的 HTML 元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：

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

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

5. 浏览器是如何对 HTML5 的离线储存资源进行管理和加载？

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问页面，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过页面并且资源已经进行离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，就会重新下载文件中的资源并进行离线存储。

离线的情况下，浏览器会直接使用离线存储的资源。

6. Canvas 和 SVG 的区别

（1）SVG：

SVG 可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言 XML 描述的 2D 图形的语言，SVG 基于 XML 就意味着 SVG DOM 中的每个元素都是可用的，可以为某个元素附加 Javascript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

其特点如下：

不依赖分辨率

支持事件处理器

最适合带有大型渲染区域的应用程序（比如谷歌地图）

复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）不适合游戏应用

（2）Canvas：

Canvas 是画布，通过 Javascript 来绘制 2D 图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。

其特点如下：

依赖分辨率

不支持事件处理器

弱的文本渲染能力

能够以 .png 或 .jpg 格式保存结果图像

最适合图像密集型的游戏，其中的许多对象会被频繁重绘

注：矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是

一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。

7. 说一下 HTML5 drag API

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。

darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。

drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。

dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。

在线咨询

上一篇：HTML前端常用标签(复习)
下一篇：我的HTML的布局的小秘密

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商