HTML5新特性

大有學(xué)問#

#頭條創(chuàng)作挑戰(zhàn)賽#

在HTML基礎(chǔ)上增加了新的標(biāo)簽、新的表單標(biāo)簽、新的表單屬性。

新增的語義化標(biāo)簽

div標(biāo)簽對搜索引擎來說，是沒有語義的。新增的語義標(biāo)簽主要是針對搜索引擎識別的。

頭部標(biāo)簽：<header>

導(dǎo)航標(biāo)簽：<nav>

內(nèi)容標(biāo)簽：<article>

定義文檔某個區(qū)域：<section>

側(cè)邊欄標(biāo)簽：<aside>

尾部標(biāo)簽：<footer>

代碼練習(xí)

<header>頭部標(biāo)簽</header>
<nav>導(dǎo)航欄標(biāo)簽</nav>
<article class="clearF">
  <article class="article1">
    內(nèi)容標(biāo)簽
    <section>定義文檔某個區(qū)域</section>
  </article>
  <aside>側(cè)邊欄標(biāo)簽</aside>
</article>
<footer>尾部標(biāo)簽</footer>

* {
  margin: 0;
  padding: 0;
}
.clearF {
  clear: both;
}
header,
nav,
article,
footer {
  width: 1200px;
  background-color: antiquewhite;
  border-radius: 15px;
  margin: 10px auto;
  text-align: center;
}
header {
  height: 100px;
  line-height: 100px;
}
nav {
  height: 50px;
  line-height: 50px;
}
article {
  background-color: white;
  height: 300px;
}
.article1 {
  width: 580px;
  text-align: center;
  background-color: antiquewhite;
  border-radius: 15px;
  margin: 0;
  float: left;
}
aside {
  width: 580px;
  height: 300px;
  line-height: 300px;
  background-color: antiquewhite;
  border-radius: 15px;
  float: right;
}  
section {
  width: 300px;
  height: 50px;
  line-height: 50px;
  border-radius: 15px;
  background-color: white;
  margin: auto;
}
footer {
  height: 50px;
  line-height: 50px;
}

代碼運行結(jié)果

新增多媒體標(biāo)簽

視頻標(biāo)簽：<video></video>

語法：

<video src="文件地址"></video>

屬性：

src：視頻文件路徑。

width：播放器寬度。

height：播放器高度。

autoplay：視頻就緒自動播放。

controls：向用戶顯示播放控件。

loop：是否循環(huán)播放。

poster：加載等待的畫面圖片。

muted：靜音播放。

代碼練習(xí)

video {
  width: 500px;
}

<h3>視頻文件：自動播放</h3>
<video src="../images/video.mp4" autoplay="autoplay" muted="muted"></video>
<br>
<h3>視頻文件：添加播放控件</h3>
<video src="../images/video.mp4" autoplay="autoplay" muted="muted" controls="controls"></video>
<br>
<h3>視頻文件設(shè)置循環(huán)播放</h3>
<video src="../images/video.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop"></video>
<br>
<h3>視頻文件設(shè)置加載圖片</h3>
<video src="../images/video.mp4" controls="controls" poster="../images/meitizhub.jpg"></video>

音頻標(biāo)簽<audio></audio>

語法：

<audio src="文件地址"></audio>

屬性：

src：文件路徑。

autoplay：音頻就緒自動播放。

controls：向用戶顯示播放控件。

loop：循環(huán)播放。

代碼練習(xí)

<audio src="../images/audio.mp3" controls="controls"></audio>
<h3>給音頻文件添加循環(huán)播放</h3>
<audio src="../images/audio.mp3" controls="controls" loop="loop"></audio>

input標(biāo)簽

屬性值

type屬性值

email：輸入類型為Email類型

url：輸入類型為url類型

date：輸入類型為日期。

time：輸入類型為時間。

month：輸入類型為月。

week：輸入類型為周。

number：輸入類型為數(shù)字。

tel：輸入類型為手機(jī)號碼

search：輸入類型為搜索框。

color：生成一個顏色選擇表單。

<form action="">
  <ul>
    <li>郵箱：<input type="email"></li>
    <li>網(wǎng)址：<input type="url"></li>
    <li>日期：<input type="date"></li>
    <li>時間：<input type="time"></li>
    <li>月份：<input type="month"></li>
    <li>周：<input type="week"></li>
    <li>數(shù)量：<input type="number"></li>
    <li>手機(jī)號碼：<input type="tel"></li>
    <li>搜索：<input type="search"></li>
    <li>顏色：<input type="color"></li>
    <li><input type="button" value="提交"></li>
  </ul>
</form>

其他屬性

required：內(nèi)容不能為空。

placehoder：提示文本。

autofocus：自動聚焦屬性。

autocomplete：on| off 是否顯示歷史輸入。

multiple：提交時可多選文件。

<form action="">
  <input type="srarch" name="srar" id="" required="required" placeholder="請輸入內(nèi)容" autofocus="autofocus" autocomplete="on" >
  <input type="file" multiple="multiple">
  <input type="submit" value="提交">
</form>

下篇文章學(xué)習(xí)CSS新特性。

編寫HTML5頁面時，我們很多時候都需要用到表單屬性，那么HTML5作為一個新晉IT界紅人，HTML5表單屬性有哪些呢？今天先來分享一下其中的<form> / <input> autocomplete 屬性、<input> autofocus 屬性、<input> form 屬性以及<input> formaction 屬性。

<form> / <input> autocomplete 屬性

autocomplete 屬性規(guī)定 form 或 input 域應(yīng)該擁有自動完成功能。

當(dāng)用戶在自動完成域中開始輸入時，瀏覽器應(yīng)該在該域中顯示填寫的選項。

提示: autocomplete 屬性有可能在 form元素中是開啟的，而在input元素中是關(guān)閉的。

注意: autocomplete 適用于 <form> 標(biāo)簽，以及以下類型的 <input> 標(biāo)簽：text, search, url, telephone, email, password, datepickers, range 以及 color。

實例

HTML form 中開啟 autocomplete (一個 input 字段關(guān)閉 autocomplete ):

First name:<input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

E-mail: <input type="email" name="email" autocomplete="off"><br>

</form>

提示:某些瀏覽器中，您可能需要啟用自動完成功能，以使該屬性生效。

<form> novalidate 屬性

novalidate 屬性的一個boolean 屬性.

novalidate 屬性規(guī)定在提交表單時不應(yīng)該驗證 form 或 input 域。

實例

無需驗證提交的表單數(shù)據(jù)

E-mail: <input type="email" name="user_email">

</form>

<input> autofocus 屬性

autofocus 屬性是一個 boolean 屬性.

autofocus 屬性規(guī)定在頁面加載時，域自動地獲得焦點。

實例

讓 "First name" input 輸入域在頁面載入時自動聚焦：

First name:<input type="text" name="fname" autofocus>

<input> form 屬性

form 屬性規(guī)定輸入域所屬的一個或多個表單。

提示:如需引用一個以上的表單，請使用空格分隔的列表。

實例

位于form表單外的input 字段引用了 HTML form (該 input 表單仍然屬于form表單的一部分):

First name: <input type="text" name="fname"><br>

</form>

Last name: <input type="text" name="lname" form="form1">

<input> formaction 屬性

The formaction 屬性用于描述表單提交的URL地址.

The formaction 屬性會覆蓋<form> 元素中的action屬性.

注意: The formaction 屬性用于 type="submit" 和 type="image".

實例

以下HTMLform表單包含了兩個不同地址的提交按鈕：

First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

<input type="submit" formaction="demo-admin.php"

value="Submit as admin">

</form>

了解更多計算機(jī)相關(guān)知識，可登陸北大青鳥廣州新嘉華官網(wǎng)查看，或聯(lián)系在線值班老師了解詳情。

元素和偽類

說到這個，我們先回顧一下，偽類選擇器和偽元素選擇器，老版的瀏覽器沒有嚴(yán)格區(qū)分下面 2 種寫法。

a:after{}
a::after{}

在新的標(biāo)準(zhǔn)中，單冒號(:)用于 CSS3 偽類，雙冒號(::)用于 CSS3 偽元素，我們平時開發(fā)時可以注意一下，當(dāng)然大多數(shù)瀏覽器兩種寫法都能識別。
常見偽元素和偽類偽類

:link, :visited, :hover, :active, :focus, :first-child, :last-child, :nth-child, :nth-last-child, :not()

偽類一般用于一個元素的某個狀態(tài)，比如說鼠標(biāo)懸浮，按鈕點擊，鏈接已經(jīng)訪問，輸入框聚焦等，還用于選擇某個特殊元素，比如說多個元素中的第一個，最后一個，偶數(shù)，奇數(shù)等。其作用是對某個符合以上條件的元素添加一些樣式。

a:hover{
        text-decoration: underline;
    }
a:active {
    color: blue;
}
a:link {
    color: red;
}
a:visited {
    color: green;
}

上面的例子展示了一個a標(biāo)簽在不同狀態(tài)下的不同樣式，在未點擊鏈接之前，a標(biāo)簽呈現(xiàn)紅色字體(link)，在鼠標(biāo)移到a標(biāo)簽上是，a標(biāo)簽出現(xiàn)下劃線(hover)，在鼠標(biāo)按下的時候，a標(biāo)簽變?yōu)樗{(lán)色(active)，點擊完了之后，a標(biāo)簽變?yōu)榫G色(visited)。可以看到，偽類的作用是為了給不同狀態(tài)的標(biāo)簽添加樣式。

偽元素

::first-letter, ::first-line, ::before, ::after

在內(nèi)容模塊中提到，偽元素如果沒有設(shè)置“content”屬性，偽元素是無用的。
使用偽元素插入的內(nèi)容在頁面的源碼里是不可見的，只能在 css 里可見。
插入的元素在默認(rèn)情況下是內(nèi)聯(lián)元素（或者，在 html5 中，在文本語義的類別里）。因此，為了給插入的元素賦予高度，填充，邊距等等，你通常必須顯式地定義它是一個塊級元素。
還要注意的是典型的 CSS 繼承規(guī)則適用于插入的元素。例如，你有字體系列黑體，宋體，無襯線字體應(yīng)用到 body 元素里，然后偽元素會像其他元素一樣繼承這些字體系列。
偽元素不會自然繼承自父元素(如 padding margins)的樣式。
你的直覺是 :before 和 :after 偽元素可能是插入的內(nèi)容會被注入到目標(biāo)元素的前或后注入。其實不是這樣的，注入的內(nèi)容將是有關(guān)聯(lián)的目標(biāo)元素的子元素，但它會被置于這個元素的任何內(nèi)容的“前”或“后”。

<head>
    <style type="text/css">
        p.box::before {
          content: "#";
          border: solid 1px black;
          padding: 2px;
          margin: 0 10px 0 0;
        }
        p.box::after {
          content: "#";
          border: solid 1px black;
          padding: 2px;
          margin: 0 10px 0 0;
        }
    </style>
</head>
<body>
<p class="box">Other content.</p>
</body>

運行效果：

可以看到，我們html部分只寫了一個元素，但是我們利用偽元素渲染出來 3 個部分，前中后，這里我們可以認(rèn)為，偽元素一般用來輔助html的元素。但在內(nèi)容頁面的源碼又看不到，利用偽元素可以實現(xiàn)很多神奇的功能，這里不做具體講解，后面再出具體教程。

神奇的偽類：focus-within

言歸正傳，回到我們的主角focus-within，我們知道，偽類focus是指一個元素獲得焦點時，為其添加樣式。focus-within的范圍更廣，它表示一個元素獲得焦點，或該元素的后代元素獲得焦點。劃重點，它或它的后代獲得焦點。這也就意味著，它或它的后代獲得焦點，都可以觸發(fā) :focus-within。

這個屬性有點類似 Javascript 的事件冒泡，從可獲焦元素開始一直冒泡到根元素 html，都可以接收觸發(fā) :focus-within 事件，類似下面這個簡單的例子這樣：

<html>
    <div class="box g-father">
        <div class="box g-children">
            <div class="box button" tabindex="1">button</div>
        </div>
  </div>
  <div class="g-body">HTML</div>
  <style>
    div {
      box-sizing: border-box;
    }
    .button,.g-children {
        width: 100%;
        height: 100%;
        padding: 20px;
        border: 1px solid;
    }
    .g-father {
        width: 200px;
        height: 200px;
        padding: 20px;
        border: 1px solid;
    }
    .g-body {
        margin-top: 20px;
        width: 200px;
        border: 1px solid;
    }
    .g-body:focus-within {
        background-color: #5daf34;
    }
    .g-father:focus-within {
        background-color: #3a8ee6;
    }
    .g-children:focus-within{
        background-color: #2c3e50;
    }
    .button:focus-within {
        background-color: #606266;
        color: red;
    }
        </style>
</html>

運行結(jié)果：

可以看到，在button獲得焦點時，因為冒泡的原因，它的父級元素全部應(yīng)用了:focus-within的樣式。這里值得注意的是，正常的div是不能獲得焦點的，設(shè)置 tabindex 屬性才能獲取焦點，同時按鍵盤 Tab 鍵也可讓其獲取焦點，其中 tabindex 的值越小在 tab 鍵切換的時候就會首先聚焦。根據(jù):focus-within的特性，我們在不利用 js 的情況下，實現(xiàn)很多實用性的功能。

感應(yīng)用戶聚焦區(qū)域

利用focus-within可以增加用戶的感知區(qū)域，讓用戶獲得更好的視覺反饋。

<html>
    <div class="g-container">
      <input type="text" placeholder="user name" class="g_input" >
      <input type="text" placeholder="code" class="g_input" >
  </div>
  <style>
    .g-container {
        margin-top: 10vh;
    }
    .g-container {
        padding: 10px;
        width: 30vw;
        border: 1px solid #eee;
        transition: all .3s;
        text-align: center;
    }
    .g-container:focus-within {
        transform: translateY(-4px);
        box-shadow: 0 0 10px #ddd;
        border-color: hsl(199, 98%, 48%);
    }
    .g_input {
        border: none;
        width: 20vw;
        padding: 15px;
        font-size: 18px;
        box-sizing: border-box;
        border: 1px solid #ddd;
        overflow: hidden;
        transition: 0.3s;
        box-shadow: 0 0 0px #ddd;
        &:focus {
            box-shadow: 0 0 10px #ddd;
            border-color: hsl(199, 98%, 48%);
        }
    }
    </style>
</html>

可以看到在沒有任何javascript邏輯控制情況下，用focus-within就實現(xiàn)了上面的效果。

實現(xiàn)離屏導(dǎo)航

我們先看一下效果：

可以看到是一個很棒的導(dǎo)航效果，而且真?zhèn)€實現(xiàn)沒有使用javascript控制，這無疑在性能和體驗上都有不少提升。具體源碼可以看下面的地址：https://codepen.io/dannievinther/pen/NvZjvz

實現(xiàn) B 站，掘金等網(wǎng)站登錄動效切換

我們平時可能注意到了，B 站和掘金在用戶輸入密碼的時候，上面的圖片是捂著眼睛的，這里我們也可以用focus-within來實現(xiàn)。

<html>
    <div class="g-wrap"></div>
        <div class="g-container">
            <h2>登錄</h2>
            <div class="g-username">
                <input maxlength="64" placeholder="請輸入手機(jī)號或郵箱" class="input">
                <img src="https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png" class="g-username">
            </div>
            <div class="g-password">
                <input type="password" maxlength="64" placeholder="請輸入密碼" class="input">
                <img src="https://b-gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png" class="g-password">
            </div>
            <img src="https://b-gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png" class="g-normal">
    </div>
<style>
.g-wrap {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
}
.g-container {
  position: relative;
  width: 318px;
  margin: 100px auto;
  height: 370px;
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  z-index: 10;
}
.g-container h2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 30px;
}
.g-container input {
  outline: none;
  padding: 10px;
  width: 100%;
  border: 1px solid #e9e9e9;
  border-radius: 2px;
  outline: none;
  box-sizing: border-box;
  font-size: 16px;
}
img {
  position: absolute;
  top: -20%;
  left: 50%;
  width: 120px;
  height: 95px;
  transform: translate(-50%, 0);
}
.g-username {
  margin-bottom: 10px;
}
.g-username img {
  display: none;
  width: 120px;
  height: 113px;
}
.g-username:focus-within ~ img {
  display: none;
}
.g-username:focus-within input {
  border-color: #007fff;
}
.g-username:focus-within img {
  display: block;
}
.g-password {
  margin-bottom: 10px;
}
.g-password img {
  display: none;
  width: 103px;
  height: 84px;
  top: -15%;
}
.g-password:focus-within ~ img {
  display: none;
}
.g-password:focus-within input {
  border-color: #007fff;
}
.g-password:focus-within img {
  display: block;
}
</style>
</html>

可以看到，在不適用js的情況下，也能實現(xiàn)動態(tài)切換圖片的效果，但是還是有一些局限，dom排列只能是父級向上，不能把元素放在focus元素的子元素里面。所以沒有js靈活，但是代碼量更少。

focus-within 兼容性

因為 css3 的新增特性一直存在兼容問題，這里查詢了一下它的兼容性，看到紅色區(qū)域還是不算太慘淡，出來 ie,其他瀏覽器基本都支持了。

所有的源碼都可以在我的倉庫地址：https://github.com/jackzhujie/vue-study
個人博客：http://blog.aizhifou.cn
文章參考鏈接：https://www.cnblogs.com/coco1s/p/9406413.html

學(xué)習(xí)如逆水行舟，不進(jìn)則退，前端技術(shù)飛速發(fā)展，如果每天不堅持學(xué)習(xí)，就會跟不上，我會陪著大家，每天堅持推送博文，跟大家一同進(jìn)步，希望大家能關(guān)注我，第一時間收到最新文章。

在線咨詢

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML5新特性

新增的語義化標(biāo)簽

新增多媒體標(biāo)簽

input標(biāo)簽

元素和偽類

偽元素

神奇的偽類：focus-within

感應(yīng)用戶聚焦區(qū)域

實現(xiàn)離屏導(dǎo)航

實現(xiàn) B 站，掘金等網(wǎng)站登錄動效切換

focus-within 兼容性

您的項目需求