HTML DOM del 对象

del 对象

del 对象代表了HTML文档中已被删除的文本。

<del> 元素定义文档中已被删除的文本。

<del> 元素经常与 <ins> 元素一起使用，来展示不同风格的旧内容与新内容。浏览器上会在两个标签上的内容加上横线及下划线来区别内容。

在 HTML 文档中每个 <del> 标签都能创建 del 对象。

del 对象属性

属性	描述
cite	设置或者返回删除文本的cite属性值
dateTime	设置或者返回删除文本的dateTime属性值

标准属性和事件

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

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

TML+CSS+JavaScript技术是网络统计学编程的基础，网络统计学离不开网页前台编程技术，学习web前端开发基础技术（网页设计）需要了解：HTML、CSS、JavaScript三种语言。其中，HTM(HyperText MarkUp Language,HTML)超文本标记语言是网页内容的载体，网页内容就是网页制作者放在页面上想要让用户浏览的信息，包含文字、公式、图片、视频、表格等。

HTML超文本标记语言有如下特征：

HTML是用来制作网页的标记语言，HTML不需要编译，直接由浏览器解析；
HTML文件是一个文本文件,包含了一些HTML元素, 标签等；
HTML文件必须使用html或htm为文件名后缀；
HTML是大小写不敏感的,HTML与html是一样的。

HTML超文本标记语言是通过使用标记来描述文档结构和表现形式的一种语言，由浏览器进行解析后把结果显示在网页上。它是网页构成的基础，你见到的所有网页都离不开HTML。

一、HTML文档结构

1、HTML文档基本结构

<HTML>
<HEAD>
<TITLE>网页标题</TITLE>
</HEAD>
<BODY>
<p>第一个HTML文件</p>
</BODY>
</HTML>

HTML文档以标记【<HTML>】开始，以标记【</HTML>】结束。HTML标签告诉浏览器这两个标签之间的内容是HTML文档。

HTML文档分为文档头【<HEAD>...</HEAD>】和文档体【<BODY>...</BODY>】两部分。在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档内容信息。

打开windows的记事本，复制、粘贴HTML文档基本结构代码，在指定文件夹中保存为"First.html"，如图：

图1：保存到指定文件夹的HTML文档"First.html

鼠标双击打开这个HTML文件,显示结果如图：

图2：浏览器打开HTML文档"First.html，段落标签<p>第一个HTML文件</p>之间的文本显示在浏览器中

2、HTML文档头

HTML文档中文档头【<HEAD>...</HEAD>】标签间的内容不被显示，但在网页设计中非常重要。下面为一段HTML文档头代码：

<HEAD>
<TITLE>网页标题</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://code.jquery.com/jquery.mobile-1.1.1.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style>
<!--
.item-title {padding: 25px 10px; }
#fixed-fullscreen-content {margin-top: 0; }
A.oPageLink {FONT-SIZE:14pt;COLOR:#6666ff; TEXT-DECORATION:none;}
//-->
</style>
<script language="JavaScript">
<!--
function setLSNorm() {
if(window.localStorage){
    localStorage.setItem($("#oNorm5").val(),$("#d1").val());
}else{
    alert('This browser does NOT support localStorage');
    }
    alert(localStorage.getItem($("#oNorm5").val()))
}
//-->
</script>
</HEAD>

HTML文档头代码中，

<TITLE>网页标题</TITLE>：设置网页标题，显示在浏览器上方；

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>：

标签可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部，不包含任何内容。几乎任何网页可以看到类似上面这段代码。“charset=UTF-8”（有时为“charset=gb2312”）表示网页使用不同字符集。标签属性单元较为复杂,对于初学者来说,记住在网页中加入这段代码即可;

<link rel="stylesheet" href="http://code.jquery.com/jquery.mobile-1.1.1.min.css"/>：

CSS外部样式,外部样式是通过在html中引用外部css文件来控制网页样式，同一个css文件可以被多个网页引用；

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>：

引用外部JavaScript脚本程序文件，一个独立存在的JS脚本文件可以被多个网页引用；

<style>***</style>：

CSS内部样式,内部样式内部样式是写在html文件中，且包含在代码块中，而style写在head里面。内部样式对所在网页内所有指定的标签有效；

CSS还有一种内联样式，内联样式是直接在html标签上定义该标签的css样式，如：<div style="width:300px; color:#ff0000;">。这里style为块标签div的样式属性，定义块标签div的宽度为300像素、标签内文字颜色为红色。更多CSS知识参见“教程”；

<script language="JavaScript">***</script>：

在网页内部运行的JavaScript代码。更多JS知识参见教程。

3、HTML文档体

HTML文档中，文档体中才是要显示的各种文档内容信息。HTML文档体包含在【<BODY>...</BODY>】标签之间。文档体中常用的HTML标签为：

<b>标签b之间的文字在网页中显示为粗体字</b>
<i>标签b之间的文字在网页中显示为斜体字</i>
<h1>h1 标题1（head1）</h1>
<h2>h2 标题2（head2）</h2>
<h3>h3 标题3（head3）</h3>
<h4>h4 标题4（head4）</h4>
<h5>h5 标题5（head5）</h5>
<h6>h6 标题6（head6）</h6>
<sub>下标（subscript）</sub>
<sup>上标（superscript）</sup>
<a href="#">a 超级链接（anchor）</a>
<br/> br 换行（break）
<hr/> hr 横线（horizontal）
<center>center 居中（center）</center>
<div>div 区块（division）</div>
<p>p 段落（paragraph）</p>
<pre>pre 按预定格式显示的文本（Preformatted）</pre>
<img src="#" alt="图片" />img 图片（image）
<form action="#" method="post">
<input type="text" name="name" value=""/>文本输入框（text）
<input type="radio" name="name" value=""/>单选框（radio）
<input type="checkbox" name="name" value=""/>复选框（checkbox）
<input type="file" name="name" value=""/>文件选择框（file）
<input type="hidden" name="name" value=""/>隐藏域（hidden）
<input type="image" name="name" value=""/>图片按钮（image）
<input type="password" name="name" value=""/>密码输入框（password）
<input type="reset" name="name" value="reset"/>重置按钮（reset）
<input type="submit" name="name" value="submit"/>提交按钮（submit）
<select>
<option value="value">option 选择项1（option）</option>
<option value="value">option 选择项2（option）</option>
</select>
<textarea>textarea 多行文本输入区（textarea）</textarea>
</form>
有序列表
<ol>
<li>li 列表项（list item）</li>
<li>li 列表项（list item）</li>
</ol>
无序列表
<ul>
    <li>li 列表项（list item）</li>
    <li>li 列表项（list item）</li>
</ul>
table 表格（table）
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>td 表格数据（table data）</td>
        <td>td 表格数据（table data）</td>
    </tr>
    <tr>
        <td>td 表格数据（table data）</td>
        <td>td 表格数据（table data）</td>
    </tr>
</table>

4、HTML文档体转义字符

转义字符串（Escape Sequence）也称字符实体(Character Entity)。在HTML中，定义转义字符串的原因有两个：

第一个原因是像“<”和“>”这类符号已经用来表示HTML标签，因此就不能直接当作文本中的符号来使用。为了在HTML文档中使用这些符号，就需要定义它的转义字符串。当解释程序遇到这类字符串时就把它解释为真实的字符。在输入转义字符串时，要严格遵守字母大小写的规则。
第二个原因是有些字符在ASCII字符集中没有定义，因此需要使用转义字符串来表示。

转义字符串分成三部分：

第一部分是一个&符号，英文叫ampersand；
第二部分是实体名字或者是#加上实体编号；
第三部分加一个分号。

（1）常用HTML转义字符表

（2）数学和希腊字母标志

二、HTML常用标签（tag）使用方法及显示效果

1、超链接标签【a】

【用法】<a href="https://www.toutiao.com/article/7221429823632409147/">统计学面临的机遇与挑战 - 网络统计学</a>

【效果】统计学面临的机遇与挑战 - 网络统计学

2、换行标签【br】

【用法】在我后面换行<br/> br 换行（break）

【效果】

在我后面换行

br 换行（break）

3、粗体标签【b】

【用法】<b>b 粗体（bold）</b>

【效果】b 粗体（bold）

4、居中标签【center】

【用法】<center>center 居中（center）</center>

【效果】

center 居中（center）

5、换行块标签【div】

【用法】<div>div 区块（division），自动换行</div>后续文本

【效果】

div 区块（division），自动换行

后续文本

6、不换行块标签【span】

【用法】<span>span 区块（division），不换行</span>后续文本

【效果】span 区块（division），不换行后续文本

7、标题标签【hi】

【用法】hi 标题

<h1>h1 标题1（head1）</h1>
<h2>h2 标题2（head2）</h2>
<h3>h3 标题3（head3）</h3>
<h4>h4 标题4（head4）</h4>
<h5>h5 标题5（head5）</h5>
<h6>h6 标题6（head6）</h6>

【效果】

8、横线标签【hr】

【用法】<hr> hr 横线（horizontal）

【效果】

————————————————

hr 横线（horizontal）

9、斜体标签【i】

【用法】<i>i 斜体（italic）</i>

【效果】i 斜体（italic）

10、图片标签【img】

【用法】<img src="http://www.galaxystatistics.com/webTJX/mobile/blog/img/test1.jpg">

【效果】

图3：【img】图片标签显示src属性所指网络图片

11、有序列表标签【ol】

【用法】ol 有序列表（order list）

<ol>
  <li>li 列表项（list item）</li>
  <li>li 列表项（list item）</li>
</ol>

【效果】

li 列表项（list item）
li 列表项（list item）

12、无序列表标签【ul】

【用法】ul 无序列表（unordered list）

<ul>
<li>li 列表项（list item）</li>
<li>li 列表项（list item）</li>
</ul>

【效果】

li 列表项（list item）
li 列表项（list item）

13、段落标签【p】

【用法】<p>p 段落（paragraph）</p>

【效果】p 段落（paragraph）

14、按预定格式标签【pre】

【用法】<pre> 按预定格式显示的文本（Preformatted）</pre>

【效果】按预定格式显示的文本（Preformatted）

15、下标标签【sub】

【用法】X<sub>sub 下标（subscript）</sub>

【效果】Xsub 下标（subscript）

16、上标标签【sup】

【用法】X<sup>sup 上标（superscript）</sup>

【效果】

17、表格标签【table】

【用法】X<sub>table 表格（table）</sub>

<table border="1" cellpadding="0" cellspacing="0">
<caption>table 表格（table）</caption>
		<tr>
				<td>td 表格数据（table data）</td>
				<td>td 表格数据（table data）</td>
		</tr>
		<tr>
				<td>td 表格数据（table data）</td>
				<td>td 表格数据（table data）</td>
		</tr>
</table>

【效果】

18、表单标签

【用法】form 表单（form）

<form action="#" method="post">form 表单（form）<p/>
<input type="text" name="name" value="" />input,type='text' 文本输入框（text）<p/>
<input type="radio" name="name" value="" />input,type='radio' 单选框（radio）<p/>
<input type="checkbox" name="name" value="" />input,type='checkbox' 复选框（checkbox）<p/>
<input type="file" name="name" value="" />input,type='file' 文件选择框（file）<p/>
<input type="hidden" name="name" value="" />input,type='hidden' 隐藏域（hidden）<p/>
<input type="password" name="name" value="" />input,type='password' 密码输入框（password）<p/>
<input type="reset" name="name" value="reset" />input,type='reset' 重置按钮（reset）<p/>
<input type="submit" name="name" value="submit" />input,type='submit' 提交按钮（submit）<p/>
select 选择列表（select）
<select>
<option value="value1">option 选择项1（option）</option>
<option value="value2">option 选择项2（option）</option>
<option value="value3">option 选择项3（option）</option>
</select><p/>
<textarea>
textarea
多行文本输入区
</textarea> <p/>
</form>

【效果】

HTML文档制作主要指〈BODY〉***〈/BODY〉之间HTML标签的布局设计。本文简单介绍了常用的HTML标签，如果想用这些标签制作出漂亮的统计报告，还需要CSS样式修饰和JavaScript基本进行动态响应。至于统计图表、公式等需要JavaScript调用库函数来实现。

言

对于项目，那就是我们的亲儿子啊，作为一个前端菜鸟，面向用户就是将自己的儿子介绍给别人认识，肯定要让他白白净净，漂漂亮亮的啦，给别人一眼就喜欢上的感觉咯，哈哈哈~

常在河边走，哪有不湿鞋，在我们编程的工程中，尤其是前端的同学，肯定少不了跟Css打交道，命名、缩写、书写顺序等都是有一定规范，这个规范可能来源于你、我、或者浏览器等不定向人群（这个规范是我瞎编的），今天自己整合收集，以及个人项目用到的html+css的书写规范送给在"编程界"奋斗的小伙伴，你不是一个人在战斗。

话不多说，锅烧空气，锅热放油，放入写好的html+css炸一遍，捞出，控油，裹上鸡蛋液，粘上面包糠，再炸，隔壁小孩都馋哭了，不好吃你来打我。

一命名规则说明

1、所有的命名最好都小写

2、属性的值一定要用双引号("")括起来，且一定要有值如class="app",id="app"

3、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整例如：<div></div>

4、空元素要有结束的tag或于开始的tag后加上"/" <br />、<img />

5、表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等

6、<h1>到<h6>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询,因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。

7、给每一个表格和表单加上一个唯一的、结构标记id

8、给图片加上alt标签,alt属性是一个必需的属性，它规定在图像无法显示时的替代文本。假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器。

9、尽量使用英文命名原则

10、尽量不缩写，除非一看就明白的单词如btn。

11、命名方式(BEM)：类-体（例：g-head）、类-体-修饰符（例：u-btn-active）。

12、scss中的变量、函数、混合、placeholder采用驼峰式命名

13、后代选择器：体-修饰符即可（例：.m-page .cut{}）注：后代选择器不要在页面布局中使用，因为污染的可能性较大；

14、减少id命名，id在JS是唯一的，不能多次使用，id的优先级优先与class，所以id应该按需使用，而不能滥用。

二网页外层重要部分CSS样式命名

 wrap ------------------ 用于最外层 
 header ---------------- 用于头部 
 main ------------------ 用于主体内容（中部） 
 main-left ------------- 左侧布局 
 main-right ------------ 右侧布局 
 nav ------------------- 网页菜单导航条 
 content --------------- 用于网页中部主体 
 footer ---------------- 用于底部

三样式属性顺序

1. 定位：positionz-indexleftrighttopbottomclip等。

2. 自身属性：widthheightmin-heightmax-heightmin-widthmax-width等。

3. 文字样式：colorfont-sizeletter-spacing, colortext-align等。

4. 背景：background-imageborder等。

5.文本属性: text-alignvertical-aligntext-wraptext-transformtext-indenttext-decoration letter-spacingword-spacingwhite-spacetext-overflow等。

6. css3中属性：content、box-shadow、animation、border-radius、transform等

/* yes */ 
 .example { 
 z-index: -1;
 display: inline-block;
 font-size: 16px;
 color: red; 
 background-color: #eee; 
} 
/* no */ 
.example { 
 color: red; 
 background-color: #eee; 
 display: inline-block; 
 z-index: -1; 
 font-size: 16px; 
 }

目的：减少浏览器reflow(回流)，提升浏览器渲染dom的性能。

关注我的头条号，分享更多的技术学习文章，我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

文档加载完成到完全显示之间浏览器的渲染流程为：

1）浏览器解析html构建dom树，解析css构建cssom树即css rule tree：将html和css都解析成树形的数据结构；dom树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。2）构建render树：DOM树和cssom树合并之后形成render树。为了构建渲染树，浏览器大体完成了下列工作：从DOM树的根节点开始遍历每个可见节点。对于每个可见节点，为其找到适配的CSSOM规则并应用它们。发射可见节点，连同其内容和计算的样式。渲染树中包含了屏幕上所有可见内容及其样式信息。3）布局render树：有了render树，浏览器已经知道网页中有哪些节点，各个节点的css定义以及它们的从属关系，接着就开始布局，计算出每个节点在屏幕中的位置和大小。(html采用了一种流式布局的布局模型，从上到下，从左到右顺序布局，布局的起点是从render树的根节点开始的，对应dom树的document节点，其初始位置为(0,0)，详细的布局过程为：每个renderer的宽度由父节点的renderer确定。父节点遍历子节点，确定子节点的位置(x,y)，调用子节点的layout方法确定其高度，父节点根据子节点的height, margin, padding确定自身的高度)。4）渲染，绘制render树：浏览器已经知道啦哪些节点要显示，每个节点的css属性是什么，每个节点在屏幕中的位置是哪里。就进入啦最后一步，按照计算出来的规则，通过显卡把内容画在屏幕上。浏览器并不是一获取到css样式就立马开始解析而是根据css样式的书写顺序按照dom树的结构分布render样式，完成第（2）步，然后开始遍历每个树节点的css样式进行解析，此时的css样式的遍历顺序完全是按照之前的的书写顺序，在解析过程中，一旦浏览器发现某个元素的定位变化影响布局，则需要倒回去重新渲染。例如css样式：{width: 100px; height: 100px; background-color: red; position: absolute;}当浏览器解析到position的时候突然发现该元素是绝对定位元素需要脱离文档流，而之前却是按照普通元素进行解析的，所以不得不重新渲染，解除该元素在文档中所占位置，然而由于该元素的占位发生变化，其他元素也可能会受到回流的影响而重新排位，最终导致（3）步骤花费时间太久而影响到（4）步骤的显示，影响了用户体验。

注：render树的结构不等同于DOM树的结构，一些设置display:none的节点不会被放在render树中，但会在dom树中。

有些情况，比如修改了元素的样式，浏览器并不会立刻回流(reflow)或重绘(repaint)，而是把这些操作积攒一批，然后做一次reflow，这也叫做异步reflow。但是在有些情况下，比如改变窗口大小，改变页面默认字体等浏览器会马上进行reflow。为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现在屏幕上，并不会等到所有html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在网络上下载其余内容。

四 css样式书写规范

使用CSS缩写属性

CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。

去掉小数点前的“0”

简写命名(前提是要让人看懂你的命名才能简写哦)

16进制颜色代码缩写

连字符CSS选择器命名规范

1.长名称或词组可以使用中横线来为选择器命名。2.不建议使用“_”下划线来命名CSS选择器，为什么呢？

输入的时候少按一个shift键；
浏览器兼容问题（比如使用_tips的选择器命名，在IE6是无效的）
能良好区分JavaScript变量命名（JS变量命名是用“_”）

功能

状态

注释的写法

/* Header */ 
 内容区
 
 /* End Header */

id的命名

1)页面结构

容器: container

页头：header

内容：content/container

页面主体：main

页尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体佈局宽度：wrapper

左右中：left right center(2)导航

导航：nav

主导航：mainnav

子导航：subnav

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

菜单：menu

子菜单：submenu

标题: title

摘要: summary

(3)功能

标志：logo

广告：banner

登陆：login

登录条：loginbar

搜索：search

功能区：shop

标题：title

加入：joinus

状态：status

按钮：btn

滚动：scroll

标籤页：tab

文章列表：list

提示信息：msg

当前的: current

小技巧：tips

图标: icon

注释：note

指南：guild

服务：service

热点：hot

新闻：news

下载：download

投票：vote

合作伙伴：partner

友情链接：link

版权：copyright

CSS样式表文件命名

主要的 master.css

模块 module.css

基本共用 base.css

布局、版面 layout.css

主题 themes.css

专栏 columns.css

文字 font.css

表单 forms.css

补丁 mend.css

打印 print.css

五 HTML5-语义化

距HTML5标准规范制定完成并公开发布已经有好些年了，但是多数公司还是用的不是很多，可能一部分原因是部分用户在使用低版本浏览器吧。

什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。

语义化优点：

易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析，如盲人阅读器根据语义渲染网页
有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

1、header

<header>定义文档或者文档的部分区域的页眉，应作为介绍内容或者导航链接栏的容器。在一个文档中，您可以定义多个<header>元素，但需要注意的是<header>元素不能作为<address>、<footer>或 <header>元素的子元素。

2、nav

<nav>描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表。在一个文档中，可定义多个元素。

3、main

<main>定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能）。需要注意的是在一个文档中不能出现多个<main>标签。

4、article

<article>元素表示文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。当<article>元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的元素可嵌套在代表博客文章的元素中。

5、aside

<aside>元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。

6、footer

<footer>定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。使用footer插入联系信息时，应在 footer 元素内使用元素。注意不能包含<footer>或者<header>

7、section

<section>表示文档中的一个区域（或节），比如，内容中的一个专题组。

如果元素内容可以分为几个部分的话，应该使用 <article>而不是 <section>。不要把 <section>元素作为一个普通的容器来使用，特别是当<section>仅仅是为了美化样式或方便脚本使用的时候，应使用<div>。

在线咨询

上一篇：html文件如何转成word？这几个步骤看完你就懂了
下一篇：HTML DOM td/th 对象

您的项目需求

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

整合营销服务商

HTML DOM del 对象

您的项目需求