HTML內容總結

時間 2020-01-09

標籤 html 內容總結欄目 HTML 简体版

原文原文鏈接

HTML

HTML基礎

HTML（hypertext Markup Language）超文本標記語言
負責網頁的三要素中的結構
html使用標籤的形式來標識網頁中的不一樣組成部分
一個最基本的HTML頁面

<!DOcTYPE html>
<!--DOCTYPE（document type）： 文檔類型
版本聲明，聲明版本是html5。
給瀏覽器聲明，告訴瀏覽器應該按照html5的規範來解析當前的文檔。
若不聲明，那麼按照什麼規範解析，就看瀏覽器心情，可能會致使瀏覽器進入怪異模式，從而致使頁面沒法正常顯示
<!DOCTYPE html> 不是html標籤，他只是一條瀏覽器的指令，在全部版本中，這條指令對大小寫都不敏感-->
<html lang="en">
<!--lang是語言  en是英語  告訴瀏覽器本網頁是英文網頁  ch是中文-->
<!--lang是html的屬性   en是lang屬性的值-->

<!--HTML 標記標籤一般被稱爲 HTML 標籤 (HTML tag)-->
<!--html標籤是網頁結構的最外層 裏邊包含兩個標籤  body 和 head -->
<head>
    <!--head表明網頁的頭部，不會顯示網頁中，只要包含網頁的元信息，標題，引入外部文件等等-->
    <meta charset="UTF-8">
    <!--meta標籤是控制網頁的元信息
    元信息就是信息的信息（關於當前網頁的信息）
    charset表明字符編碼，utf-8是萬國碼-->
    <title>html的編碼結構</title>
    <!--title是網頁的標題-->
</head>
<body>
    <!--在html中，全部咱們可以看到的內容所有書寫在body中-->
</body>
</html>

HTML標籤

塊標籤

獨佔一行換行顯示
能夠設置寬高
塊標籤能夠嵌套塊標籤和行標籤（p標籤、h標籤都只能嵌套行標籤）

div標籤

沒有任何具體的含義，主要用於網頁的佈局

經過一個一個的div將頁面劃分爲不一樣的部分，以後在針對部分進行開發

標題標籤（h標籤）

在HTML中，一共有六級標籤（h1-h6），在顯示效果上h1最大，h6最小，默認加粗而且有一點間隙

h1標籤最重要，表示網頁中主要的內容，一個頁面中只能寫一個h1標籤，h1常常用在網頁的標題或者是logo上

段落標籤（p標籤）

p標記中的文字默認會獨佔一行，而且段與段之間會有必定間距

在HTML中字符間寫再多的空格，瀏覽器只會當成一個空格解析，換行也會當成一個空格解析

頁面中使用br標籤來表示一個換行，它是一個單標籤，也是一個空元素，另外hr標籤能夠在頁面生成一條水平線

ol標籤

表示多個有序的列表項，顯示出是帶有編號的列表

ol元素前邊的編號能夠是任何的形式,咱們能夠經過css的list-style-type屬性控制

ul元素

表示多個無序的列表項,顯示出是帶有項目符號列表

ul元素前邊的符號能夠是任何的形式,咱們能夠經過css的list-style-type屬性控制

不管是ol仍是ul 裏邊的每一項都是一個li標籤

dl dt dd組合標籤

dl是包含術語和對術語描述的列表，一般用來展現詞彙表或者是對內容的解釋

dl是定義的列表的外層包裹

dt是被解釋的術語

dd是解釋的內容

dt和dd是兄弟關係，父元素只能是dl;dl的子元素只能是 dt和dd

行標籤

行內顯示超出換行
不能設置寬和高
行標籤只能嵌套行標籤，不能嵌套塊標籤（a標籤能夠包含任意標籤，除自身外）

span標籤：

沒有任何特殊的含義

主要是爲了增長額外的結構，方便咱們控制樣式或者是數據

使用要求：在其餘語義化標籤不適用的狀況下再使用

b i u 標籤

b標籤呈現加粗狀態

i標籤呈現傾斜狀態

u標籤呈現下劃線狀態

這三個標籤是吸引讀者到須要注意的內容上，這些僅僅是添加了一些樣式而已，只是表現層，儘管如此，咱們也沒必要爲了加粗傾斜等元素而去使用b i u等標籤，替代的方法是使用css

在目前使用最多的是i標籤-一般在開發過程當中，小圖標之類的元素咱們習慣用i標籤來表示

em strong var 標籤

em標籤：強調做用，標出用戶着重須要閱讀的內容，可是主要也給SEO（搜索引擎優化）強調，呈現的是傾斜的狀態

strong標籤：強調（更強的強調）做用，表示文本十分重要，主要也給SEO（搜索引擎優化）強調，呈現的是一個加粗

var標籤：並無起到強調或提示用戶注意的做用，默認傾斜

a標籤

a標籤就是超連接，用來作跳轉，能夠建立通向其餘網頁、文件同一個頁面的位置、郵件地址或者其餘url連接、連接電話、連接短信

a標籤的href屬性，用來寫地址。若是是網絡地址須要些全http://或者https://協議；若是寫本地地址，使用相對路徑便可

title屬性：是鼠標懸浮在a連接上的時候，對當前連接的提示信息，彈窗顯示

target屬性：_self:在當前標籤頁跳轉；_blank:在新的標籤頁打開跳轉

download屬性：書寫下載文件的路徑，那麼能夠直接下載。但須要注意的是a標籤必須書寫href屬性，哪怕爲空均可以執行download下載，不然a標籤不具備任何功能

錨連接：在a標籤的href中書寫 #+名字；在相對應的跳轉點標籤書寫id屬性值爲錨連接中的名字；這樣點擊錨連接就能跳轉到相對應的位置

行內塊標籤

既擁有塊標籤屬性能夠設置寬高，也擁有行屬性的行內顯示
能夠設置寬高
行內顯示

img標籤：

單標籤，屬於替換元素(<img><br>都屬於空元素)，表明文檔中的一個圖像

src屬性：圖片路徑能夠書寫網絡路徑地址也能夠書寫本地相對路徑

title屬性：當鼠標懸浮在圖像上的時候，對圖像的解釋

alt屬性：
一、定義了描述圖像的替換文本
二、網絡錯誤，路徑錯誤等等圖片沒有正確加載的時候顯示
三、alt屬性還和SEO相關，爬蟲到當前頁面，並不會讀取圖片，而是讀取img的src屬性來肯定圖片信息

width/height:
一、img標籤除了可以使用css設置寬高之外，自身也擁有width和height屬性，能夠設置寬和高
二、若是說只設置了寬度或者高度，那麼另一個將按照圖片比例進行縮放
三、自身的width/height是不書寫單位的
四、若是寬度和高度都一塊兒設置，圖片的寬高比例可能會改變
五、當自身的寬高屬性和css設置的衝突之後，css的優先級較高

圖片常見的格式：
一、jpeg（jpg）：通常圖像(當圖片不透明的時候，儘可能選用jpg，由於jpg佔用的大小比png小)
二、png：透明圖
三、gif：動圖

表單標籤

form標籤

爲用戶建立html表單,表單能夠向服務器發送數據,form標籤中能夠包含不少表單元素

action屬性：
表單提交的地址

method屬性：
表單提交的方式數據傳輸的方式
常見的兩種方式是: get和postcss

get能夠當成小汽車：數據少,數據直接在地址欄上顯示（不安全）

post能夠當成大貨車：數據多數據發送相對於get安全一點

<form action="http://www.baidu.com" method="get">
    <input type="submit" value="提交">
  </form>

input標籤

type類型的值不同，呈現的狀態也是不同的

name屬性就是給表單起一個名字（本身命名，通常是後臺提供）

value屬性就是表單的值，能夠預約義，也能夠等待用戶輸入name和value就構成了一個鍵值對，若是構不成一個鍵值對，就不會進行提交

type類型有如下幾種：html

text：單行文本輸入框（文本域）前端

沒有長度和內容限制，只能輸入一行，明文顯示

表單提交都是以鍵值對的形式提交的好比 user = xiaoming

password：密碼輸入框html5

默認把輸入的內容呈現出小黑點

radio：單選框web

書寫name屬性後，能夠進行單選

應書寫value值，是向後臺提供的數據

在input前寫的內容，和input沒有任何關係，只不過讓用戶視覺上以爲有關聯

checkbox：多選框

file: 上傳文件按鈕

* hidden：提交隱藏內容chrome

在表單提交過程當中有的數據須要提交，可是不須要用戶輸入或者是修改，那麼直接使用隱藏域提交

* button: 單純的按鈕瀏覽器

沒有任何做用和功能，只是長了按鈕的樣子

若是須要添加功能，可使用js

value值是按鈕中的文字

* reset: 重置按鈕緩存

當重置按鈕被點擊，就會重置當前reset所在的表單，變成默認的狀態

submit：提交按鈕安全

input標籤的type類型是submit表明提交 value是按鈕顯示的內容

提交按鈕只會提交當前按鈕所在的form表單中的內容

若是沒有form標籤，表單提交失效

<form action="http://www.baidu.com" method="get">
    請輸入用戶名：
    <input type="text" name="user" value="xiaoming">
    <br>

    請輸入密碼：
    <input type="password" name="pass" value="">
    <br>

    請選擇性別：
    男：<input type="radio" name="sex" value="男">
    女：<input type="radio" name="sex" value="女">
    未知：<input type="radio" name="sex" value="未知">
    <br>

    選擇你最喜歡的語言：
    PHP：<input type="checkbox" name="lang" value="PHP">
    JAVA：<input type="checkbox" name="lang" value="JAVA">
    JS：<input type="checkbox" name="lang" value="JS">
    HTML：<input type="checkbox" name="lang" value="HTML">
    <br>

    請上傳你的照片：
    <input type="file" name="photo">
    <br>

    <input type="hidden" name="id" value="00000000001">

    <input type="button" value="點我啊" id="btn">

    <br>

    <input type="reset" value="重置啊">

    <input type="submit" value="提交">
</form>
<script>
    var oBtn = document.getElementById("btn");
    oBtn.onclick = function () {
        alert("hello world");
    }
</script>

select&option 下拉列表

option表明列表的每一項ruby

顯示出來的值應該放在option標籤中

提交的內容是放在option的value屬性中

select是列表的外層

表單的name是在select中書寫

textarea 多行文本輸入框

右下角能夠放大縮小

cols和rows用來控制寬和高

cols表明一行有幾個字符（一個漢字算兩個字符）

* rows表明總共幾行，超出是要生成滾動條的

咱們不多這樣控制，主要經過css的width和height控制

textarea沒有value屬性，輸入的值直接就是textarea標籤中的內容

<form action="###" method="get">
    請選擇你喜歡的城市
    <select name="city" >
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="深圳">深圳</option>
    </select>
    <br>
    請說出你對咱們的留言：
    <textarea name="message" cols="30" rows="10" ></textarea>

    <input type="submit" value="提交">
</form>

button標籤

使用場景能夠在表單中提交、重置也能夠作單純的按鈕

button的type類型控制按鈕是作什麼的

type：submit 默認提交當前的表單

type：reset 重置當前的表單

type:button 單純的按鈕沒有任何功能

button和input作按鈕的區別？

input是單標籤不能嵌套任何元素

button是雙標籤雙標籤中能夠嵌套其餘元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>button</title>
</head>
<body>
    <form action="###" method="get">
        <input type="text" name="user" value="">

        <button type="button">點擊我呀</button>
        <button type="button">
            <img src="../images/06.png" alt="">
        </button>
    </form>
</body>
</html>

label標籤

label元素：爲表單元素定義標註（點擊標註的信息，可讓表單元素獲取焦點）

獲取焦點：當表單元素變成一個能夠輸入的狀態的時候，被稱做爲獲取焦點

失去焦點：當表單元素失去能夠輸入狀態的時候，被稱做爲失去焦點

兩種使用方法：

label標籤包含住標註元素，讓label標籤的for屬性和相對應的表單元素的id屬性值相等

label標籤包住整個標註元素和相對應的表單元素,label不能出現for屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>button</title>
</head>
<body>
    <form action="###" method="get">
        <!--方法1-->
        <label for="user">請輸入用戶名：</label>
        <input type="text" name="user" value="" id="user">

        <!--方法2-->
        <label>
            男 <input type="radio">
        </label>

        <button type="submit">點擊我呀</button>
    </form>
</body>
</html>

label元素：對select標籤，只能獲取焦點，可是不能把列表下拉出來

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>button</title>
</head>
<body>
    <form action="###" method="get">
        <label for="city">選擇城市</label>
        <select name="city" id="city">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="廣州">廣州</option>
        </select>
        
        <label for="mes">留言</label>
        <textarea name="mes" id="mes" cols="30" rows="10"></textarea>
        <button type="submit">點擊我呀</button>
    </form>
</body>
</html>

tabel標籤

表格書寫：

table是表格的最外層

caption：表格的標題通常寫在表格的最上邊

tr就是表格的每一行

th表示表頭單元格默認居中和加粗

td表示普通單元格

表格默認沒有邊框，寬度也是內容撐開的

table標籤的屬性：

width：設置表格的寬度，每一列的內容都是自適應分配

border：給表格設置邊框值爲數字表明外邊框的寬度

表格的外層和單元格都設置上了邊框，可是單元格的邊框永遠是1，外層邊框是border屬性的值

border-collapse:collapse css設置給border元素，用來合併邊框

cellpadding:設置單元格與內容之間的間隙

cellspacing:設置單元格與單元格之間的距離(單元格不合並纔有效果)

合併單元格：

colspan:設置跨列，誰合併，給誰設置

rowspan：設置跨行

表格的優化：使用thead、tbody、tfoot標籤包裹tr標籤使其更具備語義化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
</head>
<body>
    <table width="400" border="1" style="border-collapse:collapse;" cellpadding="10" cellspacing="0">
        <caption>0225班就業表</caption>
        <tr>
            <th colspan="2">學生就業就業薪資</th>
            <th>備註</th>
        </tr>
        <tr>
            <td>小王</td>
            <td>12</td>
            <td></td>
        </tr>
        <tr>
            <td>老王</td>
            <td rowspan="2">13</td>
            <td></td>
        </tr>
        <tr>
            <td>王中王</td>
            <td></td>
        </tr>
        <tr>
            <td>大王</td>
            <td>15</td>
            <td></td>
        </tr>
    </table>
</body>
</html>

iframe標籤

建立一個包含另一個文檔的內聯框架，就是把其餘的html頁面嵌入到當前的頁面中
src是嵌入html的地址，能夠是網絡，也能夠是本地服務器
width和height屬性來設置內聯框架的寬高
iframe擁有本身的DOM樹，也有本身的會話歷史記錄，頁面中的每個iframe都會佔用額外的計算機資源
爲了性能，咱們儘可能少的去書寫iframe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=UTF-8>
    <tItle>Title</tItle>
</head>
<body>
    <div>
        <h1>學習iframe標籤</h1>
        <div>
            哈哈哈哈
            <iframe src="./05.table元素.html" width="300"></iframe>
            <iframe src="./05.table元素.html" width="300"></iframe>
        </div>
    </div>
</body>
</html>

H5新增語義化標籤(結構標籤)

header標籤

用來定義文檔（網頁或者是某一個段落）的頁眉（頭部）

可能包含一些標題元素，也可能包含其餘元素，好比logo、搜索框、做者信息等等

完成的網頁或者是完整的塊（網頁的一個獨立區域）是頭部、內容、尾部組成的（並非強制）

header不是一個獨立的分塊，而是屬於獨立分塊的頭部

整個頁面沒有header限制個數，可使用多個

footer標籤

*　footer標籤表明一個網頁或者章節內容的底部區域（頁腳）
*　footer一般包含章節的做者，版權數據和文章的其餘連接
*　其餘和header同理，好比不是獨立的區域，應該是隸屬於一個章節或者是網頁

nav標籤：

目的：給文檔提供導航列表

導航能夠分爲：菜單、目錄表、索引

並非全部的導航都須要用nav標籤，只是當前頁面中比較重要的熱門的可使用nav，好比在底部導航，就沒有必要加入連接

一個網頁可能會有多個導航，好比整個網頁的導航，也能夠是某一塊區域的導航

nav使用有兩種方法：

當nav中的導航列表是靜態的，nav中直接嵌套a標籤使用便可

當nav中的導航是動態的（須要滑動查看更多，主要出如今移動端），nav中最好嵌套ul>li>a標籤

section標籤

section是html中一個獨立的區域，沒有其餘語義，通常會包含一個獨立的標題

假設有一個效果，上邊是nav導航欄，導航欄通常對對應一個區域，用來顯示這個導航到的內容，這個區域咱們就可使用section

section主要是對網頁進行分塊，也能夠對網頁中的某塊內容進行分塊

一般一個完成的section是有標題和內容組成的，不推薦給沒有標題的區域設置section

若是想要給一個內容設置有個容器用來書寫樣式，那麼仍是推薦使用div

article標籤

表明文檔、頁面、或程序中，能夠獨立的完整的被外部引用的內容

好比一篇博客、一篇文章、一段用戶的評論、一個日曆插件，或者是其餘獨立內容

通常來講，一個article也有本身的頭部header，或者是footer

article和section區別

article元素能夠看作是特殊的section，可是強調獨立性比section更強

section主要強調分段分塊，article是強調很強的獨立性

原則上來講能用article的時候，也可使用section，可是假設用article更合適，請使用article

div和article和section對比

div、section、article語義依次遞增

div沒有任何的語義，僅僅是用做樣式，能夠用在任何場景，可是咱們容易看不清上下文關係

對於主題性的區域，咱們可使用section

加入這個區域能夠脫離上下文，做爲完整獨立的內容存在，使用article

aside標籤

表示一個和其他頁面內容幾乎無關的區域

被認爲是獨立於內容的一部分，而且能夠拆出來而不會使總體收到影響，一般表現爲側邊欄

這個裏邊的內容和其餘元素內容關聯性不強

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>header標籤</title>
</head>
<body>
    <div>
        <!--頭部區域-->
        <header>
            <h1>你看我像不像logo</h1>
            <!--導航區域-->
            <nav>
                <a href="###">news</a>
                <a href="###">my</a>
                <a href="###">tiyu</a>
            </nav>
        </header>
        <!--內容區域-->
        <section>
            <h2>這裏是評論區域</h2>
            <article>
                <h3>評論人：張三</h3>
                <p>今每天氣真好</p>
            </article>
            <article>
                <h3>評論人：李四</h3>
                <p>今每天氣真好</p>
            </article>
            <article>
                <h3>評論人：王五</h3>
                <p>今每天氣真好</p>
            </article>
        </section>
        <!--側邊欄-->
            <aside>
                我是側邊欄內容
            </aside>
        <!--底部區域-->
        <footer>
            <div>
                <h3>友情連接</h3>
                <a href="###">百度</a>
                <a href="###">阿里巴巴</a>
                <a href="###">阿里媽媽</a>
            </div>
        </footer>
    </div>
</body>
</html>

H5新增語義化標籤（媒體標籤）

figure標籤

表明一塊獨立的內容，是一個獨立的引用單元

這個標籤在主文中用來引用圖片、插畫、表格、代碼段等等信息

通常會在figure元素中插入figcaption元素（標題元素），將figcaption表明的標題與figure內容相關聯

若是是單獨一張圖片或者單獨的表格等等，那麼直接使用相應的標籤便可，若是存在圖片和標題，那麼請使用figure標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>figure</title>
</head>
<body>
    <figure>
        <figcaption>海賊王的圖片</figcaption>
        <img src="../images/05.jpg" alt="" width="300">
    </figure>
</body>
</html>

source 標籤

由於沒有任何的視頻格式能夠兼容全部瀏覽器，咱們也不能同一個視頻書寫多個video標籤

能夠在video標籤中書寫source標籤，source用來引入不一樣的視頻格式

瀏覽器會依次檢測視頻哪個支持，若是支持，就再也不向下尋找

video標籤

src屬性：視頻的路徑若是隻有src屬性，那麼現實的是視頻的封面

src是書寫在source標籤中

width：給視頻設置寬度只設置寬度高度自適應

height：給視頻設置高度這設置高度寬度自適應

設置寬高是不會視頻變形，只要寬高有一個達到設置的要求，視頻就中止等比縮放，讓視頻在另外一個沒有充滿的方向上居中

controls：顯示播放控件

autoplay：視頻自動播放（瀏覽器限制不容許自動播放可是當設置爲靜音的時候，自動播放生效）

muted：設置靜音

loop：設置循環播放

preload：

none：提示做者認爲用戶不須要查看該視頻，服務器也想要最小化訪問流量；換句話說就是提示瀏覽器該視頻不須要緩存。

metadata: 提示儘管咱們認爲用戶不須要查看該視頻，不過抓取元數據（好比：長度）仍是很合理的。

auto: 用戶須要這個視頻優先加載；換句話說就是提示：若是須要的話，能夠下載整個視頻，即便用戶並不必定會用它。

poster：引入一個圖片或者廣告視頻，做爲視頻的封面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>視頻引入</title>
</head>
<body>
    <video controls muted loop preload="auto" poster="../images/06.png">
        <source src="../images/source/test.mp4">
        <source src="../images/source/test.webm">
        <source src="../images/source/test.ogv">
        垃圾 給你一個連接 本身體會 <a href="">點擊下載新版瀏覽器</a>
    </video>
</body>
</html>

audio標籤

幾乎全部的屬性都和video標籤重合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音頻</title>
</head>
<body>
    <audio controls autoplay muted preload="metadata" loop>
        <source src="../images/source/music/BIGBANG%20-%20Let's%20not%20fall%20in%20love.mp3">
        <source src="../images/source/music/BIGBANG%20-%20Let's%20not%20fall%20in%20love.ogg">
        <source src="../images/source/music/BIGBANG%20-%20Let's%20not%20fall%20in%20love.webm">
        垃圾
    </audio>
</body>
</html>

H5新增語義化標籤（其餘標籤）

mark標籤

爲引用的內容進行標記或突出顯示文本，用來表示和上下文之間的關聯性

突出顯示的文本一般可能和用戶當前的活動等有必定的關聯性

好比，用戶搜索的時候，它能夠顯示搜索以後的關鍵字

不要把mark和 em、strong進行混淆;em、strong都是表示文本在上下文的重要性，而mark只是爲了表示關聯性

mark標籤是行內標籤，默認黃色背景顏色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mark元素</title>
</head>
<body>
    <input type="text" value="下雨">
    <p>今天晚上可能會<mark>下雨</mark>，明天中秋節晴朗</p>
</body>
</html>

time標籤

用來表示24小時制或者是一個公曆時間

做用：以機器可讀的格式去表示日期和時間，安排日程表的應用就可使用這個time標籤

通用時間格式 XXXX-XX-XX XX:XX:XX

兩種用法：

time標籤直接包含時間

使用datetime屬性來表示時間

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>time標籤</title>
</head>
<body>
    <div>
        <!-- 主題區域-->
        <section>
            <h2>這裏是評論區域</h2>
            <article>
                <h3>評論人：張三</h3>
                <p>今每天氣真好</p>
                <p><time>2019-9-12 19:00:00</time></p>
            </article>
        </section>
    </div>
</body>
</html>

　datalist標籤

包含了一組option元素，表明是列表可選的值

和input進行相關聯，用來配套使用

input中的list屬性 == datalist的id屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>datalist元素</title>
</head>
<body>
    <input list="city" type="text">
    <datalist id="city">
        <option value="河南">河南</option>
        <option value="河北">河北</option>
        <option value="湖北">湖北</option>
        <option value="湖南">湖南</option>
        <option value="胡建">胡建</option>
    </datalist>
</body>
</html>

progress標籤

主要用來顯示一項任務的完成程度

規範沒有規定默認的樣式，因此各個瀏覽器默認的樣式不必定相同

屬性:

value：是當前進度的值

max：是總進度的長度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>progress元素</title>
</head>
<body>
    <progress max="100" value="80"></progress>
</body>
</html>

ruby 註釋標籤

經過rt標籤對ruby標籤的內容進行註釋

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>註釋標籤</title>
</head>
<body>
    <p>
        <ruby>蠡<rt>li</rt></ruby>
    </p>
</body>
</html>

H5新屬性

input新類型

若是input的新類型不被瀏覽器所支持，那麼他會默認顯示成text文本框

input的新類型大多數都被谷歌瀏覽器支持，若是開發移動端，只要谷歌支持便可，由於全部安卓系統內置瀏覽器都是chrome

type舊類型：

text：文本框

password：密碼框

radio：單選框

checkbox：多選框

hidden：隱藏域

file：文件域

文件域的 accept屬性書寫 image/* 表明接受任何格式的圖片

capture=camera 表明從相機拍照接收

capture=photo 表明從相冊選取照片

可是在pc端的表現都是選取文件

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>調用本地相冊和相機</title>
    </head>
    <body>
        <input type="file" accept="image/*" capture="camera">

        <input type="file" accept="image/*" capture="photo">
    </body>
    </html>

button：按鈕

reset：重置按鈕

submit：提交按鈕

type新類型

color：用來引入或者打開指定顏色的控件

date：日期的控件（年月日）

week：日期的控件（年周）（火狐不支持）

month：日期的控件（年月）（火狐不支持）

email：編輯email的字段

自帶驗證，可是驗證不完整，通常仍是本身書寫

在移動端上有相對應的自動彈出鍵盤包含 @ .com 等按鍵

number：用來輸入數字的控件

多了一個上下的按鍵，能夠增長和下降數字大小

驗證必須是數字

其餘屬性

min：最少數量

max：最大數量

value：當前數量

step：每次累加累減數量

search：用來搜索框，當用戶輸入內容後，在末尾有一個刪除按鈕，單擊能夠刪除輸入好的文字

tel：電話號碼輸入框

url： url地址

range：輸入一個拖拽的控件

屬性：

max：最大值

min：最小值

step：每次走的最小單位

value：當前值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新type類型-input</title>
</head>
<body>
    <form action="###" method="get">
        請選擇你喜歡的顏色：
        <input type="color" name="color">
        <br>

        請選擇你的出生日期：
        <input type="date" name="brithday">
        <br>

        請輸入當前的週數：
        <input type="week" name="week">
        <br>

        請輸入你幾月生日：
        <input type="month" name="month">
        <br>

        請輸入您的郵箱地址：
        <input type="email" name="email">
        <br>

        請選擇您購買的數量：
        <input type="number" name="num" min="2" max="10" step="2">
        <br>

        請在本框中進行檢索：
        <input type="search" name="sear">
        <br>

        請輸入您的電話號碼：
        <input type="tel" name="tel">
        <br>

        請輸入你的我的博客的網址：
        <input type="url" name="url">
        <br>

        請選擇：
        <input type="range" name="range" min="30" max="100" value="50">
        <br>
        <br>
        <button>提交</button>
    </form>

</body>
</html>

表單元素新屬性

placeholder：佔位符

autocomplete：是否提示用戶曾經輸入過的值默認是on 關閉是off

autofocus：默認自動獲取焦點

他有惟一一個值是autofocus

h5規範容許當屬性名和屬性值相等的時候能夠直接書寫屬性名便可

在js中，h5容許以布爾值的形式控制屬性開啓或關閉,也就是在js中給autofocus屬性設置值爲true（真，打開）或者是 false（假，關閉）,可是在元素的屬性中不容許使用true或者是false來控制開啓或關閉

若是多個表單書寫autofocus，那麼以第一個書寫的爲準

required：必填項，當提交的時候，此表單必須填寫

disabled：禁用任何表單元素，這個元素就被禁止輸入或選擇等等操做

使用disabled禁用表單，表單元素是不會在被提交了

checked：單選框或多選框默認被選中

readonly：對於可編輯的表單來講表示不能再次被編輯可是是能夠被提交的

對單選多選按鈕不支持

form：

若是input存在form屬性，表示當前的input屬於某一個表單,此時form表單的id的值就是這個input的值,那麼form表單和當前的input就進行關聯了,不管input書寫在哪裏，都能隨着表單發送數據

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單元素的新屬性</title>
</head>
<body>
<form action="###" method="get" id="form1">
    請輸入用戶名：
    <input type="text" name="user" placeholder="請輸入用戶名" autofocus autocomplete="on">
    <br>

    請輸入密碼：
    <input type="text" name="pass" value="123456" autofocus required>
    <br>

    請確認性別：
    男：<input type="radio" name="sex" value="男" disabled checked>
    女：<input type="radio" name="sex" value="女" disabled>
    <br>


    請確認年齡：
    大於30歲：<input type="radio" name="age" value="30-" checked readonly>
    小於30歲：<input type="radio" name="age" value="30+" readonly>

    請輸入郵箱：
    <input type="email" name="email" value="lipeihua@atguigu.com" readonly>

    <br>
    <button>提交</button>
</form>

<!--在form表單外有一個input，可是想點擊form中的提交按鈕的時候，把這個input也給提交了，form屬性就這樣使用-->
<input type="hidden" name="id" form="form1" value="12587">
</body>
</html>

select、option的新屬性：

selected：默認選中項

multiple：讓select能夠進行多選（按住ctrl鍵進行多選）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select元素的屬性</title>
</head>
<body>
<form action="###" method="get">
    請選擇你喜歡的食物：
    <select name="food" id="" multiple>
        <option value="肉">肉</option>
        <option value="雞蛋">雞蛋</option>
        <option value="水果" selected>水果</option>
        <option value="骨頭">骨頭</option>
    </select>
    <button>提交</button>
</form>
</body>
</html>

HTML相關規範

書寫規範

標籤的換行寫法
雙標籤須要關閉
對代碼進行縮進
標籤的正確嵌套
合理加註釋
a標籤不能嵌套a標籤
......

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html書寫規範</title>
</head>
<body>

    <!--標籤的換行寫法-->
    <div>
        <p>
            今天的天
            <span>真的好啊</span>
        </p>
    </div>

    <!--標籤須要關閉-->
    <p>
        <span>哈哈哈哈哈</span>
        <em>呵呵呵呵</em>
    </p>

    <!--代碼縮進使用tab鍵
        tab每次縮進空格數量同樣，咱們能夠設置。也爲了方便代碼合併
        shift+tab是向前縮進
    -->
    <!--標籤的正確嵌套-->
        <ul>
            <li></li>
            <li></li>
        </ul>
        <dl>
            <dt></dt>
            <dd>

            </dd>
        </dl>

    <!--合理加註釋-->

    <!--a標籤不能嵌套a標籤-->
    <a href="">
        <a href=""></a>
    </a>

</body>
</html>