仍是要了解一下的HTML

時間 2020-01-11

標籤仍是瞭解一下 html 欄目 HTML 简体版

原文原文鏈接

最近，從新去學習了一下HTML。記得第一次接觸HTML，是在大一的時候，參加學校的網頁設計大賽。直到今年秋招的時候都以爲HTML很簡單，仔細去閱讀後，發現本身是坐井觀天了，遂整理一部分資料後寫了這篇筆記。html

若理解有誤，感謝指導。前端

首先第一個問題正則表達式

前端頁面有哪三層構成？分別是什麼?

1.結構層 HTML 2.表示層 CSS 3.行爲層 JScanvas

因而可知HTML至關於骨架，因而引出語義化的概念。segmentfault

html語義化是什麼？

例如標題（H1~H6）、列表（li）等根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化，有利於seo優化，便於項目的開發及維護，使html代碼更具備可讀性，便於其餘設備解析。瀏覽器

再則，當新建一個html的項目時，能夠看到是相似於這樣的一個解構ruby

<!DOCTYPE html>
<html>
   <head>       
   <meta charset="utf-8" />       
   <title></title>   
</head>
   <body>	
   </body>
</html>複製代碼

從meta標籤提及bash

meta標籤有什麼用？

meta可提供有關頁面的元信息（meta-information），好比針對搜索引擎、更新頻度、cookie的描述和關鍵詞。元數據老是以名稱/值對的形式表示，名稱有兩種類型：name和http-equiv。其中當名稱爲http-equiv，會將值關聯到HTTP頭部。
服務器

例子以下所示：cookie

<meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />  5秒跳轉
<meta name="viewport" content="width=device-width, initial-scale=1.0">  頁面適配
<meta http-equiv="charset" content="iso-8859-1">   聲明字符集
<meta http-equiv="expires" content="31 Dec 2008">   聲明過時時間複製代碼

再則會遇到script

當瀏覽器碰到script腳本的時候：

參考：segmentfault.com/q/101000000…

沒有 defer 或 async，瀏覽器會當即加載並執行指定的腳本，「當即」指的是在渲染該標籤之下的文檔元素以前，也就是說不等待後續載入的文檔元素，讀到就加載並執行。
存在有async，加載和渲染後續文檔元素的過程將和script.js的加載與執行並行進行（異步）。
有defer，加載後續文檔元素的過程將和script.js的加載並行進行（異步），可是

script.js
的執行要在全部元素解析完成以後，DOMContentLoaded 事件觸發以前完成。

接下去本文將會多方面闡述HTML5相關。

H5中的新特性

1.新的語義元素，例如<header>,<footer>,<article>,<section>

2.新的表單控件，好比數字、日期、時間、日曆和滑塊

3.強大的圖像支持（藉由<canvas>和<svg>）

4.強大的多媒體支持（藉由<video>和<audio>）

5.強大的API，好比用本地存儲取代cookie

6.data---自定義屬性

7.hidden屬性

8.spellcheck語法檢查

9.translate可翻譯

H5中新的語義/結構元素

<article> 定義文檔內的文章

<aside> 定義頁面內容以外的內容

<bdi> 定義與其餘文本不一樣的文本方向

<details> 定義用戶可查看或隱藏的額外細節

<dialog> 定義對話框或窗口

<figcaption> 定義<figure>元素的標題

<figure> 定義自包含內容，好比圖示、圖表、照片、代碼清單等等。

<footer> 定義文檔或節的頁腳

<header> 定義文檔或節的頁眉

<main> 定義文檔的主內容

<mark> 定義重要或強調的內容

<menuitem> 定義用戶可以從彈出菜單調用的命令/菜單欄項目

<meter> 定義已知範圍內的標量測量

<nav> 定義文檔內的導航連接

<progress> 定義任務進度

<rp> 定義在不支持ruby註釋的瀏覽器中顯示什麼

<rt> 定義關於字符的解釋/發音

<ruby> 定義ruby註釋

<section> 定義文檔中的節

<summary> 定義

<details>元素的可見標題

<time> 定義日期/時間

<wbr> 定義可能的折行（line-break）

新的表單元素

<datalist> 定義輸入控件的預約義選項

<keygen> 定義鍵對生成器字段（用於表單）

<output> 定義計算結果

HTML5中新增的輸入類型

1.color

2.date

3.datetime

4.datetime-local

5.email

6.month

7.number

8.range

9.search

10.tel

11.time

12.url

13.week

輸入限制

disabled ：規定輸入字段應該被禁用

max ：規定輸入字段的最大值

maxlength ：規定輸入字段的最大字符數

min ：規定輸入字段的最小值

pattern ：規定經過檢查輸入值的正則表達式

readonly ：規定輸入字段爲只讀（沒法修改）

required ：規定輸入字段是必需的（必需填寫）

size ：規定輸入字段的寬度（以字符計）

step ：規定輸入字段的合法數字間隔

value ：規定輸入字段的默認值

HTML5中input新增屬性

autocomplete ：規定表單或輸入字段是否應該自動完成

autofocus ：當頁面加載<input>元素時，應該自動獲取元素

form : form屬性規定<input>元素所屬的一個或多個表單

formaction ：規定當提交表單時處理該輸入控件的文件的URL，該屬性覆蓋<form>元素的action屬性

formenctype ：規定當把表單數據(form-data)提交至服務器時如何對其進行編碼(僅針對 method="post"的表單)，該屬性覆蓋<form>元素的enctype屬性。

formmethod : 定義用以向action URL 發送表單數據（form-data）的HTTP方法。該屬性覆蓋<form>元素的method屬性。

formnovalidate ：若是設置，則規定在提交表單時不對<input>元素進行驗證。該屬性覆蓋<form>元素的novalidate屬性。

formtarget：規定的名稱或關鍵詞指示提交表單後在何處顯示接收到的響應。該屬性覆蓋<form>元素的target屬性。

height 和 width

list ：該屬性引用的<datalist>元素中包含了<input>元素的預約義選項。

min 和 max

multiple：若是設置，則規定容許用戶在<input>中輸入一個以上的值。（適用於email和file）

pattern(regexp)：正則表達式（適用於text、search、url、tel、email、password）

placeholder ：規定用以描述輸入字段預期值的提示（樣本值或有關格式的簡短描述）

required

step：規定<input>元素的合法數字間隔。

form中增長的屬性

autocomplete ：規定表單或輸入字段是否應該自動完成

novlidate ：規定在提交表單時不對錶單數據進行驗證

剩下還有Canvas以及Api相關，整理總結中.......

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。