整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          前端開發不得不了解的HTML5標簽

          TML5 元素有多種維度展示方式,常見以下:

          • 1.按照類別分類
          • 2.按照是否Block元素

          按照類別分:

          根元素

          • - html 代表 HTML 或 XHTML 文檔的根。其他所有元素必須是這個元素的子節點。
          • 文檔元數據
          • head 代表關于文檔元數據的一個集合,包括腳本或樣式表的鏈接或內容。
          • title 定義文檔的標題,將顯示在瀏覽器的標題欄或標簽頁上。該元素只能包含文本,包含的標簽不會被解釋。
          • base 定義頁面上相對 URL 的基準 URL。
          • link 用于鏈接外部的 CSS 到該文檔。
          • meta 定義其他 HTML 元素無法描述的元數據。
          • style 用于內聯 CSS。
          • -
          • 腳本
          • script 定義一個內聯腳本或鏈接到外部腳本。腳本語言是 JavaScript。
          • noscript 定義當瀏覽器不支持腳本時顯示的替代文字。
          • template 這個元素在 HTML5 中加入 通過 JavaScript 在運行時實例化內容的容器。
          • -
          • 章節
          • body 代表 HTML 文檔的內容。在文檔中只能有一個 元素。
          • section 這個元素在 HTML5 中加入 定義文檔中的一個章節。
          • nav 這個元素在 HTML5 中加入 定義只包含導航鏈接的章節。
          • article 這個元素在 HTML5 中加入 定義可以獨立于內容其余部分的完整獨立內容塊。
          • aside 這個元素在 HTML5 中加入 定義和頁面內容關聯度較低的內容——如果被刪除,剩下的內容仍然很合理。
          • h1~ h6 標題元素實現了六層文檔標題,h1 是最大的標題,h6 是最小的標題。標題元素簡要地描述章節的主題。
          • header 這個元素在 HTML5 中加入 定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄
          • footer 這個元素在 HTML5 中加入 定義頁面或章節的尾部。它經常包含版權信息、法律信息鏈接和反饋建議用的地址。
          • address 定義包含聯系信息的一個章節。
          • main 這個元素在 HTML5 中加入 定義文檔中主要或重要的內容。
          • -
          • 內容組織
          • p 定義一個段落。
          • hr 代表章節、文章或其他長內容中段落之間的分隔符。
          • pre 代表其內容已經預先排版過,格式應當保留 。
          • blockquote 代表引用自其他來源的內容。
          • ol 定義一個有序列表。
          • ul 定義一個無序列表。
          • li 定義列表中的一個列表項。
          • dl 定義一個定義列表(一系列術語和其定義)。
          • dt 代表一個由下一個
          • 定義的術語。
          • dd 代表出現在它之前術語的定義。
          • figure 這個元素在 HTML5 中加入 代表一個和文檔有關的圖例。
          • figcaption 這個元素在 HTML5 中加入 代表一個圖例的說明。
          • div 代表一個通用的容器,沒有特殊含義。
          • -
          • 文字展示
          • a 代表一個鏈接到其他資源的超鏈接 。
          • em 代表強調 文字。
          • strong 代表特別重要 文字。
          • small 代表注釋 ,如免責聲明、版權聲明等,對理解文檔不重要。
          • s 代表不準確或不相關 的內容。
          • cite 代表作品標題 。
          • q 代表內聯的引用 。
          • dfn 代表一個術語包含在其最近祖先內容中的定義 。
          • abbr 代表省略 或縮寫 ,其完整內容在 title 屬性中。
          • data 這個元素在 HTML5 中加入 關聯一個內容的機器可讀的等價形式 (該元素只在 WHATWG 版本的 HTML 標準中,不在 W3C 版本的 HTML5 標準中)。
          • time 這個元素在 HTML5 中加入 代表日期 和時間 值;機器可讀的等價形式通過 datetime 屬性指定。
          • code 代表計算機代碼 。
          • var 代表代碼中的變量 。
          • samp 代表程序或電腦的輸出 。
          • kbd 代表用戶輸入 ,一般從鍵盤輸出,但也可以代表其他輸入,如語音輸入。
          • sub,- sup 分別代表下標 和上標 。
          • i 代表一段不同性質 的文字,如技術術語、外文短語等。
          • b 代表一段需要被關注 的文字。
          • u 代表一段需要下劃線呈現的文本注釋,如標記出拼寫錯誤的文字等。
          • mark 這個元素在 HTML5 中加入 代表一段需要被高亮的引用 文字。
          • ruby 這個元素在 HTML5 中加入 代表被ruby 注釋 標記的文本,如中文漢字和它的拼音。
          • rt 這個元素在 HTML5 中加入 代表ruby 注釋 ,如中文拼音。
          • rp 這個元素在 HTML5 中加入 代表 ruby 注釋兩邊的額外插入文本 ,用于在不支持 ruby 注釋顯示的瀏覽器中提供友好的注釋顯示。
          • bdi 這個元素在 HTML5 中加入 代表需要脫離 父元素文本方向的一段文本。它允許嵌入一段不同或未知文本方向格式的文本。
          • bdo 指定子元素的文本方向 ,顯式地覆蓋默認的文本方向。
          • span 代表一段沒有特殊含義的文本,當其他語義元素都不適合文本時候可以使用該元素。
          • br 代表換行 。
          • wbr 這個元素在 HTML5 中加入 代表建議換行 (Word Break Opportunity) ,當文本太長需要換行時將會在此處添加換行符。
          • -
          • 文字編輯
          • ins 定義增加 到文檔的內容。
          • del 定義從文檔移除 的內容。
          • -
          • 圖片等資源展示
          • img 代表一張圖片 。
          • iframe 代表一個內聯的框架 。
          • embed 這個元素在 HTML5 中加入 代表一個嵌入 的外部資源,如應用程序或交互內容。
          • object 代表一個外部資源 ,如圖片、HTML 子文檔、插件等。
          • param 代表 - object 元素所指定的插件的參數 。
          • video 這個元素在 HTML5 中加入 代表一段視頻 及其視頻文件和字幕,并提供了播放視頻的用戶界面。
          • audio 這個元素在 HTML5 中加入 代表一段聲音 ,或音頻流 。
          • source 這個元素在 HTML5 中加入 為 - video 或 - audio 這類媒體元素指定媒體源 。
          • track 這個元素在 HTML5 中加入 為 - video 或 - audio 這類媒體元素指定文本軌道(字幕) 。
          • canvas 這個元素在 HTML5 中加入 代表位圖區域 ,可以通過腳本在它上面實時呈現圖形,如圖表、游戲繪圖等。
          • map 與 - area 元素共同定義圖像映射 區域。
          • area 與 - map 元素共同定義圖像映射 區域。
          • svg 這個元素在 HTML5 中加入 定義一個嵌入式矢量圖 。
          • math 這個元素在 HTML5 中加入 定義一段數學公式 。
          • -
          • 表格
          • table 定義多維數據 。
          • caption 代表表格的標題 。
          • colgroup 代表表格中一組單列或多列 。
          • col 代表表格中的列 。
          • tbody 代表表格中一塊具體數據 (表格主體)。
          • thead 代表表格中一塊列標簽 (表頭)。
          • tfoot 代表表格中一塊列摘要 (表尾)。
          • tr 代表表格中的行 。
          • td 代表表格中的單元格 。
          • th 代表表格中的頭部單元格 。
          • -
          • 表單
          • form 代表一個表單 ,由控件組成。
          • fieldset 代表控件組 。
          • legend 代表 - fieldset 控件組的標題 。
          • label 代表表單控件的標題 。
          • input 代表允許用戶編輯數據的數據區 (文本框、單選框、復選框等)。
          • button 代表按鈕 。
          • select 代表下拉框 。
          • datalist 這個元素在 HTML5 中加入 代表提供給其他控件的一組預定義選項 。
          • optgroup 代表一個選項分組 。
          • option 代表一個 - select 元素或 - datalist 元素中的一個選項
          • textarea 代表多行文本框 。
          • keygen 這個元素在 HTML5 中加入 代表一個密鑰對生成器 控件。
          • output 這個元素在 HTML5 中加入 代表計算值 。
          • progress 這個元素在 HTML5 中加入 代表進度條 。
          • meter 這個元素在 HTML5 中加入 代表滑動條 。
          • -
          • 導航等交互元素
          • details 這個元素在 HTML5 中加入 代表一個用戶可以(點擊)獲取額外信息或控件的小部件 。
          • summary 這個元素在 HTML5 中加入 代表 - details 元素的綜述 或標題 。
          • menuitem 這個元素在 HTML5 中加入 代表一個用戶可以點擊的菜單項。
          • menu 這個元素在 HTML5 中加入 代表菜單。

          按照是否Block元素分:

          • 1.Empty Elements
          • area 與 map 元素共同定義圖像映射 區域。
          • base 定義頁面上相對 URL 的基準 URL。
          • basefont 4.0種標簽,目前已廢棄
          • br 代表換行 。
          • col 代表表格中的列 。
          • frame 4.0種標簽,目前已廢棄
          • hr 代表章節、文章或其他長內容中段落之間的分隔符。
          • img 代表一張圖片 。
          • input 代表允許用戶編輯數據的數據區 (文本框、單選框、復選框等)。
          • isindex 4.0種標簽,目前已廢棄
          • link 用于鏈接外部的 CSS 到該文檔。
          • meta 定義其他 HTML 元素無法描述的元數據。
          • param 代表 object 元素所指定的插件的參數
          • embed 代表一個嵌入 的外部資源,如應用程序或交互內容
          • -
          • 2.Block Elements
          • address 定義包含聯系信息的一個章節
          • applet 4.0種標簽,目前已廢棄
          • blockquote 代表引用自其他來源的內容。
          • button 代表按鈕
          • center 4.0種標簽,目前已廢棄
          • dd 代表出現在它之前術語的定義
          • del 定義從文檔移除 的內容。
          • dir 4.0種標簽,目前已廢棄
          • div 代表一個通用的容器,沒有特殊含義
          • dl 定義一個定義列表(一系列術語和其定義)
          • dt 代表一個由下一個 dd 定義的術語
          • fieldset 代表控件組
          • form 代表一個表單 ,由控件組成
          • frameset 4.0種標簽,目前已廢棄
          • hr 代表章節、文章或其他長內容中段落之間的分隔符
          • iframe 代表一個內聯的框架
          • ins 定義增加 到文檔的內容
          • isindex 4.0種標簽,目前已廢棄
          • li 定義列表中的一個列表項
          • map 與 area 元素共同定義圖像映射 區域
          • menu 代表菜單
          • noframes
          • noscript 定義當瀏覽器不支持腳本時顯示的替代文字
          • object 代表一個外部資源 ,如圖片、HTML 子文檔、插件等
          • ol 定義一個有序列表
          • p 定義一個段落
          • pre 代表其內容已經預先排版過,格式應當保留
          • script 定義一個內聯腳本或鏈接到外部腳本。腳本語言是 JavaScript
          • table 定義多維數據
          • tbody 代表表格中一塊具體數據 (表格主體)
          • td 代表表格中的單元格
          • tfoot 代表表格中一塊列摘要 (表尾)
          • th 代表表格中的頭部單元格
          • thead 代表表格中一塊列標簽 (表頭)
          • tr 代表表格中的行
          • ul 定義一個無序列表
          • -
          • 3.Inline Elements
          • a 代表一個鏈接到其他資源的超鏈接
          • abbr 代表省略 或縮寫 ,其完整內容在 title 屬性中
          • acronym 4.0種標簽,目前已廢棄
          • applet 4.0種標簽,目前已廢棄
          • b 代表一段需要被關注 的文字
          • basefont 4.0種標簽,目前已廢棄
          • bdo 指定子元素的文本方向 ,顯式地覆蓋默認的文本方向
          • big 4.0種標簽,目前已廢棄
          • br 代表換行
          • button 代表按鈕
          • cite 代表作品標題
          • code 代表計算機代碼
          • del 定義從文檔移除 的內容
          • dfn 代表一個術語包含在其最近祖先內容中的定義
          • em 代表強調 文字
          • font 4.0種標簽,目前已廢棄
          • i 代表一段不同性質 的文字,如技術術語、外文短語等
          • iframe 代表一個內聯的框架
          • img 代表一張圖片
          • input 代表允許用戶編輯數據的數據區 (文本框、單選框、復選框等)
          • ins 定義增加 到文檔的內容
          • kbd 4.0種標簽,目前已廢棄
          • label 代表表單控件的標題
          • map 與 area 元素共同定義圖像映射 區域
          • object 代表一個外部資源 ,如圖片、HTML 子文檔、插件等
          • q 代表內聯的引用
          • s 代表不準確或不相關 的內容
          • samp 代表程序或電腦的輸出
          • script 定義一個內聯腳本或鏈接到外部腳本。默認腳本語言是 JavaScript
          • select 代表下拉框
          • small 代表注釋 ,如免責聲明、版權聲明等,對理解文檔不重要
          • span 代表一段沒有特殊含義的文本,當其他語義元素都不適合文本時候可以使用該元素
          • strike 4.0種標簽,目前已廢棄
          • strong 代表特別重要 文字
          • sub 代表下標
          • sup 代表上標
          • textarea 代表多行文本框
          • tt 4.0種標簽,目前已廢棄
          • u 4.0種標簽,目前已廢棄
          • var 代表代碼中的變量
          • -

          參考文獻:

          • https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list
          • 本文作者:前端首席體驗師(CheongHu)
          • 聯系郵箱:simple2012hcz@126.com
          • 版權聲明: 本文章除特別聲明外,均采用 CC BY-NC-SA 4.0 許可協議。轉載請注明出處!

          TML5開發工程師不論是薪資待遇還是工作環境都是很讓人羨慕的,因此如今不論是參加HTML5培訓還是自學HTML5開發技術的小伙伴都不斷的在增加,本片文章扣丁學堂小編就和讀者們分享一下HTML5應該如何自學,如何能更快更高效的學習HTML5開發技術。

          如今HTML5在整個互聯網行業掀起了一場新的大潮流,導致現在好多人都想進入HTML5開發的隊伍,但是實際上大部分人卻不知道該怎么學習HTML5才是最好的,更不知道HTML5技術該如何自學?接下來扣丁學堂的HTML5培訓老師將從以下幾點內容詳細講述為大家做一個簡單的分享:

          第一,很多人建議,對于零基礎學員,不建議一上來就學習HTML5,HTML5其實就是對HTML4的一個升級,所以,在學習HTML5之前,你還需要詳細了解HTML、CSS。在學習HTML5過程當中,你需要充分了解Java,因為無論是想做出一款比較炫的Web APP還是做一個跨平臺的移動端網站,這些功能都需要Java的調用,如果你只是單純的掌握了HTML5、CSS、Java這些技術,那么對于一個合格的HTML5開發工程師來講是遠遠不夠的,像一些jquery、canvas等等這些也需要學習。

          第二,要多利用時間,多看書和好文章,很多工程師這樣講,時間總是可以擠出來的,把有限的時間更多利用在有意義的事情上,說句玩笑話,很多初學者在上廁所時還想著自己代碼,想著Ajax原生請求怎么寫?其實也沒有別的其他意思,只想說的是,時間很寶貴,充分利用好時間。

          第三,學英語,對于IT行業來講,英語是非常重要的技能,特別是對于新技術人員來講,基本只有查閱英文文獻才能夠找到解決方案,這部分練習也會相當有必要的。

          第四、去除自己焦慮的東西,在HTML5職業生涯初期,作為小白的你,應該總會有從未接觸過的技術盲點,無論是在工作當中還是面試過程當中,你都會有少許的擔心,為自己知識的欠缺、勝任與否,往往會焦慮不安,所以此時就更需要你鎮靜。

          第五、充分利用資源,生活在信息量充足的現代生活中,無論是書籍還是網絡資源,都有可以參考和學習的地方,找一些適合自己學習資源,不斷豐富自己。

          想要學好HTML5開發技術就需要自己不斷的努力,要有持之以恒的學習能力。想要學習HTML5開發技術的小伙伴可以選擇口碑良好的扣丁學堂進行學習,扣丁學堂不僅有專業的老師和與時俱進的課程體系,還有大量的HTML5視頻教程供學員觀看學習,想要學好HTML5開發技術高薪就業的小伙伴抓緊時間行動吧。扣丁學堂H5技術交流群:559883758。

          關注微信公眾號獲取更多學習資料

          近在做大文件分塊上傳的功能,在開發的過程中,需要使用到HTML5中的File對象來對大文件進行切塊,于是查找了相關資料后,直接寫下以下代碼實現了分塊的功能:

          HTML代碼:

          <input type="file" id="file" onchange="doupload(event)">
          

          Javascript代碼:

          function douploader(event){
           let file=event.target.files[0];
           let chunkSize=10*1024*1024;
           let chunks=Math.ceil(file.size/chunkSize);
           for(let i=0;i<chunks;i++){
           let start=i*chunkSize;
           let len=Math.min(chunkSize,file.size-start);
           let chunk=file.slice(start,start+len); //chunk為分塊后的File對象
           }
           }
          

          大家可以發現我是直接通過 <input type="file"> 標簽直接獲取的File對象,然后再對File對象進行的切分,也就是說我其實是直接跳過了File對象的初始化過程,直接對File對象進行切分的操作,實際上大部分開發也確實是這么做的。

          那么File對象究竟是如何初始化的呢?

          查閱了相關的外文文獻之后,做出以下總結:

          File對象實例化的標準形式如下:

          let stringArray=["hello martin","hello lucy"];
          let fileName="allHello";
          let typeObj={type:"application/json",lastModified:new Date()};
          let myFile=new File(stringArray,fileName,typeObj);
          console.log(myFile);
          

          結果圖如下:

          分析:從以上代碼可以看出,File構造函數接受三個參數

          • 第一個參數為一個字符串數據,數組中的每一個元素對應著文件中的每一行內容
          • 第二個參數為一個字符串,表示文件名
          • 第三個參數為一個對象,這個對象包含數據類型type和最后修改時間lastModified兩個屬性,type默認為空,lastModified默認為當前時間,也就是new Date()的時間。

          最后附上一張各個瀏覽器對File對象這個API的兼容性圖表:

          總結

          雖然我們工作中可能只需要通過input標簽直接獲取初始化過的File對象,然后對其進行操作,但是懂得File對象是如何進行初始化的能幫助我們更好的理解和運用File對象。

          “知其所然且知其所以然”這是作為高級軟件工程師的必備素養,否則可能真的就成為大眾所說的“碼農”了。

          關注我,一起學習前端,共同從小白走向高級工程師。

          ?


          主站蜘蛛池模板: 老熟女五十路乱子交尾中出一区| 人妻AV一区二区三区精品| 日本国产一区二区三区在线观看| 国产在线一区二区综合免费视频| 亚洲AV本道一区二区三区四区| 一区二区传媒有限公司| 精品国产一区在线观看| 一级毛片完整版免费播放一区 | 亚洲视频一区在线观看| 在线精品自拍亚洲第一区| 国产精品视频一区二区三区四| 日韩伦理一区二区| 日韩一区二区电影| jazzjazz国产精品一区二区| 亚洲大尺度无码无码专线一区| 99国产精品一区二区| 日韩熟女精品一区二区三区| 精品欧洲av无码一区二区| 久久久久人妻精品一区蜜桃| 日韩精品一区二区三区在线观看 | 国产精品亚洲综合一区在线观看 | 国产SUV精品一区二区88L| 日韩在线视频一区| 成人丝袜激情一区二区| 国模一区二区三区| 久久久无码精品人妻一区| 国产成人精品一区二区A片带套| 91视频国产一区| 中文字幕人妻第一区| 国产精品日韩欧美一区二区三区| 亚洲一区二区久久| 2021国产精品视频一区| 夜夜高潮夜夜爽夜夜爱爱一区| 无码中文字幕乱码一区| 国产一区二区三区在线看片| 久久一区二区三区免费| 久久精品国产AV一区二区三区| 国产精品一区视频| 中文字幕永久一区二区三区在线观看| 国产一区二区三区免费| 亚洲Av高清一区二区三区|