整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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文檔結構
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文檔頭代碼中，
標簽可提供有關頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關鍵詞。 標簽位于文檔的頭部，不包含任何內容。幾乎任何網頁可以看到類似上面這段代碼。“charset=UTF-8”（有時為“charset=gb2312”）表示網頁使用不同字符集。標簽屬性單元較為復雜,對于初學者來說,記住在網頁中加入這段代碼即可;
CSS外部樣式,外部樣式是通過在html中引用外部css文件來控制網頁樣式，同一個css文件可以被多個網頁引用；
引用外部JavaScript腳本程序文件，一個獨立存在的JS腳本文件可以被多個網頁引用；
CSS內部樣式,內部樣式內部樣式是寫在html文件中，且包含在代碼塊中，而style寫在head里面。內部樣式對所在網頁內所有指定的標簽有效；
CSS還有一種內聯樣式，內聯樣式是直接在html標簽上定義該標簽的css樣式，如：<div style="width:300px; color:#ff0000;">。這里style為塊標簽div的樣式屬性，定義塊標簽div的寬度為300像素、標簽內文字顏色為紅色。更多CSS知識參見“教程”；
在網頁內部運行的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中，定義轉義字符串的原因有兩個：
轉義字符串分成三部分：
（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>【效果】
12、無序列表標簽【ul】
【用法】ul 無序列表（unordered list）
<ul>
<li>li 列表項（list item）</li>
<li>li 列表項（list item）</li>
</ul>【效果】
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選擇器，為什么呢？
功能
狀態
注釋的寫法
/* 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
注冊：register
搜索：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定義標題。
語義化優點：
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>。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
