整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
我們經(jīng)常使用CSS，但是卻不怎么了解CSS，本文主要對(duì)vertical-align、BFC、position中開(kāi)發(fā)過(guò)程不怎么注意的特性進(jìn)行簡(jiǎn)要總結(jié)，從本文中，你將了解到以下內(nèi)容：
只能應(yīng)用在display為inline、inline-block、inline-table、table-cell上。
有個(gè)高頻面試題，“如何使一個(gè)不定寬高div垂直水平居中？”，有的萌新竟然回答用vertical-align: middle。這個(gè)回答是減分的，至少在某種程度上給人一種感覺(jué)CSS基礎(chǔ)比較薄弱。
開(kāi)發(fā)中會(huì)遇到用字幕x代替關(guān)閉icon，用...顯示溢出或者加載中。但是會(huì)發(fā)現(xiàn)字母x、省略號(hào)并沒(méi)有與文本垂直方向居中對(duì)齊，這是因?yàn)槲谋灸J(rèn)是基線(xiàn)對(duì)齊，x、省略號(hào)默認(rèn)底部在基線(xiàn)處。如下圖所示：
如下，為文本對(duì)齊demo:
<div class="container">
<span>你好，世界</span>
<span class="more">...</span>
</div>
實(shí)際顯示效果如下：
如果要實(shí)現(xiàn)垂直居中，利用vertical-align，搭配line-height即可，vertical-align不僅可以設(shè)置middle/top/bottom/baseline...關(guān)鍵字，也可以設(shè)置常用的度量單位，正負(fù)值均可，使用比較靈活。為什么要給.more設(shè)置line-height屬性呢？其實(shí)是因?yàn)?span style="color: #000000; --tt-darkmode-color: #E6E6E6;">line-height屬性可以繼承，如果不縮小.more的行高，就會(huì)撐大父元素的尺寸。
<style>
.container{
font-size: 64px;
line-height: 64px;
}
.more{
line-height: 16px;
vertical-align: 16px;
}
</style>
BFC全稱(chēng)block formatting context，即“塊狀格式化上下文”，與外界元素相對(duì)獨(dú)立的一片區(qū)域，具有以下特性：
利用BFC的特性，我們可以實(shí)現(xiàn)以下功能：
以下CSS屬性會(huì)觸發(fā)元素生成BFC結(jié)界:
<style>
.container{
/* overflow: hidden; */
/* position: absolute; */
/* float: left; */
}
.left{
float: left;
width: 200px;
height: 200px;
}
</style>
<div class="container">
<div class="left"></div>
</div>
以上代碼，container容器高度為0，因?yàn)樽釉?span style="color: #000000; --tt-darkmode-color: #E6E6E6;">left浮動(dòng)。我們只需要把container容器轉(zhuǎn)成BFC容器，即可清楚浮動(dòng)，注釋的幾種方法都可以。
<style>
.blue, .red-inner {
height: 50px;
margin: 10px 0;
}
.blue {
background: blue;
}
.red-outer {
overflow: hidden;
background: red;
}
</style>
<div class="blue"></div>
<div class="red-outer">
<div class="red-inner">red inner</div>
</div>
左側(cè)固定，右側(cè)自適應(yīng)。
<style>
.left{
height: 200px;
width: 200px;
float: left;
background-color: burlywood;
}
.right{
height: 200px;
margin-left: 200px;
background-color: cadetblue;
}
</style>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
絕對(duì)定位使用場(chǎng)景非常多。絕對(duì)定位元素脫離文檔流，相對(duì)于最近的非 static 祖先元素定位，可以利用left/right/top/bottom定位元素位置。我們通常都是設(shè)置垂直方向與水平方向的的位置，如果四個(gè)方向都不設(shè)置或者四個(gè)方向都設(shè)置會(huì)出現(xiàn)什么彩蛋呢？下文會(huì)給出揭曉。
此時(shí)元素的寬高是根據(jù)元素位置決定的，張?chǎng)涡翊罄性凇?/span>CSS世界》中定義為格式化寬高，如下代碼，最終box-item的寬高計(jì)算為：width=200 - 50 -50=100px;width=200 - 50 -50=100px;
<style>
.box{
position: relative;
width: 200px;
height: 200px;
margin: 50px;
background-color: bisque;
}
.box-item{
position: absolute;
left: 50px;
right: 50px;
top: 50px;
bottom: 50px;
background-color: coral;
}
</style>
<div class="box">
<div class="box-item"></div>
</div>
這種行為特性對(duì)于我們做自適應(yīng)布局非常有用，而且兼容性非常好，比如我們要做左側(cè)固定寬度，右側(cè)自適應(yīng)，除了以上BFC的寫(xiě)法，我們還可以采用以下方法：
<style>
.container{
position: absolute;
top: 100px;
bottom: 100px;
left: 0;
right: 0;
}
.left{
position: absolute;
top: 0;
bottom: 0;
width: 200px;
background-color: burlywood;
}
.right{
position: absolute;
left: 200px;
right: 0;
top: 0;
bottom: 0;
background-color: cadetblue;
}
</style>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
這個(gè)時(shí)候你會(huì)發(fā)現(xiàn)，元素的寬高時(shí)以width/height為準(zhǔn)，上述說(shuō)的格式化寬度、高度并沒(méi)有生效。這是因?yàn)樵诟叨扔?jì)算過(guò)程中，元素的內(nèi)部尺寸優(yōu)先級(jí)大于外部尺寸，width/height影響的是元素內(nèi)部尺寸，絕對(duì)定位影響的是外部尺寸，當(dāng)元素絕對(duì)定位四個(gè)方向都設(shè)置值，此時(shí)外部尺寸會(huì)被內(nèi)部尺寸覆蓋，導(dǎo)致實(shí)際元素寬度是width/height的值。
我們經(jīng)常用margin: 0 auto;實(shí)現(xiàn)元素水平居中，但是不定寬高元素垂直水平居中就有些麻煩。但是有個(gè)神奇的現(xiàn)象，絕對(duì)定位配合margin: auto;，可以實(shí)現(xiàn)元素垂直水平居中，如下所示：
<style>
.box{
position: relative;
width: 200px;
height: 200px;
margin: 50px;
background-color: bisque;
}
.box-item{
position: absolute;
margin: auto;
width: 50px;
height: 50px;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: coral;
}
</style>
<div class="box">
<div class="box-item"></div>
</div>
出現(xiàn)這種現(xiàn)象是因?yàn)?/span>margin:auto本質(zhì)上是平分元素剩余可用空間，塊級(jí)元素一般是水平方向自動(dòng)充滿(mǎn)，垂直方向順序排列。平常我們用margin: 0 auto;之所以能夠使塊級(jí)元素水平居中，是因?yàn)樗椒较蛟卮嬖谑Ｓ嗫捎每臻g，而auto平分剩余可用空間，因此就產(chǎn)生居中效果。而垂直方向不存在剩余可用空間，因此無(wú)法垂直居中。
上述demo，box-item之所以能夠垂直居中，得益于top/bottom設(shè)置了值，使元素產(chǎn)生高度100%的外部尺寸，而width/height固定元素的內(nèi)部尺寸，使得 外部尺寸高度-內(nèi)部尺寸高度=元素剩余可用空間高度，而auto等分剩余可用空間，可以使元素達(dá)到垂直居中效果。可以嘗試調(diào)整四個(gè)方向的值，看看box-item位置是怎么移動(dòng)的。
當(dāng)絕對(duì)定位沒(méi)有設(shè)置四周定位尺寸時(shí)，會(huì)發(fā)生神奇的一幕，當(dāng)前元素沒(méi)有相對(duì)于最近的非 static 祖先元素定位，而是在當(dāng)前位置不變，并且當(dāng)前元素脫離文檔流，不占據(jù)頁(yè)面空間。這個(gè)特性某些情況下非常有用，比如給box-card加一個(gè)圖標(biāo)，借助無(wú)依賴(lài)定位 + padding/margin即可。寫(xiě)法比較簡(jiǎn)潔，建議嘗試一下。
比起其他的開(kāi)發(fā)語(yǔ)言，想要深入了解CSS，并不是一件容易事，大多數(shù)人都是停留在用的基礎(chǔ)上，知道這個(gè)屬性/方法，至于為什么會(huì)這樣了解較少。張?chǎng)涡翊罄?span style="color: #000000; --tt-darkmode-color: #E6E6E6;">CSS高度讓人嘆為觀(guān)止，繼續(xù)加油吧！！！
篇介紹了表單的使用，表單有很多控件，比如輸入框，密碼框、文本域，按鈕等。按類(lèi)型可分如下：
此類(lèi)控件有很多種類(lèi)型，使用<input type="類(lèi)型">語(yǔ)法，常見(jiàn)類(lèi)型如下：
type 值 | 含義 |
text | 文字字段 |
password | 密碼域，用戶(hù)看不到明文，以*代替 |
radio | 單選按鈕 |
checkbox | 多選按鈕 |
button | 普通按鈕 |
submit | 提交按鈕 |
reset | 重置按鈕 |
image | 圖像域，用圖像作為背景的提交按鈕 |
hidden | 隱藏域，不可見(jiàn)的輸入框 |
file | 文本域，用于上傳文件等非文本數(shù)據(jù) |
文本輸入框和密碼框
除了顯示形式不一樣，其它屬性一樣，有以下屬性：
如下是文本輸入框和密碼框制作一個(gè)登錄表單
html代碼：
<!DOCTYPE html>
<html>
<body>
<h1>用戶(hù)登錄</h1>
<form action="/demo/html/action_page.php">
<label for="fname">用戶(hù)名:</label><br>
<input type="text" id="username" name="username" value=""><br>
<label for="lname">密碼:</label><br>
<input type="password" id="pwsd" name="pwsd" value=""><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>顯示效果：
HTML5 輸入類(lèi)型
除了以上幾種類(lèi)型，HTML5 還增加了多個(gè)新的輸入類(lèi)型：
如下代碼：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
數(shù)字類(lèi)型（1 到 5 之間）：
<input type="number" name="quantity" min="1" max="5">
IE9 及早期版本不支持 type="number"。<br>
color 選擇顏色：
<input type="color" name="color"><br>
生日:
<input type="date" name="bday"><br>
年月：
<input type="month" name="bdaymonth"><br>
年周：
<input type="week" name="week_year"><br>
時(shí)間：
<input type="time" name="usr_time"><br>
一定范圍
<input type="range" name="points" min="0" max="10"><br>
E-mail:
<input type="email" name="email">
能夠在被提交時(shí)自動(dòng)對(duì)電子郵件地址進(jìn)行驗(yàn)證<br>
搜索：
<input type="search" name="googlesearch"><br>
電話(huà)：
<input type="tel" name="usrtel">
目前只有 Safari 8 支持 tel 類(lèi)型。<br>
url：
<input type="url" name="url">
提交時(shí)能夠自動(dòng)驗(yàn)證 url 字段<br>
<input type="submit">
</form>
</body>
</html>效果如下：
單選和多選按鈕
使用 type=“radio” 和 type=“checkbox” 定義是單選還是多選，除了name和value屬性外，單選和多選都有一個(gè) checked屬性定義默認(rèn)選擇的項(xiàng)，checked=“true”指選中那個(gè)選項(xiàng)，表單會(huì)將 checked=“true” 的選型值傳遞給后臺(tái)。
如下實(shí)例：
<!DOCTYPE html>
<html>
<body>
<h4>單選和多選</h4>
<form action="/demo/demo_form.asp">
水果：
<input type="radio" name="shuiguo" value="banner" checked> 香蕉
<input type="radio" name="shuiguo" value="apple"> 蘋(píng)果
<br><br>
省份：
<input type="checkbox" name="shengfen" value="shannxi" checked> 陜西
<input type="checkbox" name="shengfen" value="sanxi"> 山西
<input type="checkbox" name="shengfen" value="gdong"> 廣東
<br><br>
<input type="submit">
</form>
</body>
</html>顯示效果：
單選和多選傳遞給后臺(tái)的數(shù)據(jù)是不一樣的，如下會(huì)看到地址欄中的數(shù)據(jù)，多選會(huì)發(fā)送多個(gè)值，后臺(tái)將會(huì)獲取一個(gè)數(shù)組形式的數(shù)據(jù)。
/demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi普通按鈕、提交按鈕、重置按鈕
普通按鈕：type=“button”，一般配合腳本使用，語(yǔ)法如下：
<input type="button" name="名稱(chēng)" value="按鈕值" onclick="腳本程序" />value 值就是按鈕在頁(yè)面顯示的文字，onclick屬性定義了腳本事件，這里指單擊按鈕時(shí)所進(jìn)行的處理。
如下示例：
<!DOCTYPE html>
<html>
<body>
<form>
<input type="button" value="普通按鈕">
<input type="button" value="打開(kāi)窗口" onclick="window.open()">
<input type="button" value="您好" onclick="alert('您好')">
</form>
</body>
</html>
單擊您好按鈕
提交按鈕：type=“submit”，用于提交表單內(nèi)容，是一種特殊按鈕。
如剛才的登錄表單，提交后會(huì)返回結(jié)果：
重置按鈕：type="reset"，用于清除表單數(shù)據(jù)，也是一種特殊按鈕。
輸入數(shù)據(jù)
點(diǎn)擊重置按鈕后，表單數(shù)據(jù)清空
重置清空數(shù)據(jù)
HTML5 按鈕
除了使用input定義按鈕，還可以使用 html5 新增的<button> 標(biāo)簽定義按鈕，button 使用語(yǔ)法如下：
<form action="/demo/html/action_page.php">
<button type="button">普通按鈕</button>
<button type="submit">提交按鈕</button>
</form> 其它輸入類(lèi)控件
隱藏域 —— hidden
文件域 —— file
如下示例：
<form action="/demo/html/action_page.php">
<label for="fname">隱藏域:</label>
<input type="hidden" id="hidden" name="hidden" value=""><br>
<label for="lname">文件域:</label>
<input type="file" id="file" name="file" value=""><br>
<input type="submit" value="提交">
</form> 顯示效果
可以看到，隱藏域在頁(yè)面中不顯示，單擊文件域選擇文件按鈕可以選擇文件，比如word文件，電子表格文件等，會(huì)以非文本方式傳送到后臺(tái)的，常用來(lái)實(shí)現(xiàn)文件上傳功能。
除了input 類(lèi)型的控件，還有文本域 textarea ，一種特殊的文本框，它與input 文本輸入框的區(qū)別就是可以輸入多行文字，input 文本輸入框是單行的無(wú)法輸入多行文字。
如下示例：
<p>textarea 元素定義多行輸入字段。</p>
<form action="/demo/html/action_page.php">
<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
<br><br>
<input type="submit">
</form>效果如下：
rows 屬性定義文本域的高度是幾行，cols 定義文本域?qū)挾日紟琢校热缟厦娑x了高10行寬30列的文本域。
下拉菜單作用和單選按鈕類(lèi)似，只不過(guò)它更加節(jié)省空間，當(dāng)要選擇的選型很多時(shí)，就不適合使用radio空間，所以當(dāng)選項(xiàng)很多的時(shí)候，使用下拉菜單，語(yǔ)法如下：
<select name="名稱(chēng)">
<option value="選項(xiàng)值1" selected>選項(xiàng)1</option>
<option value="選項(xiàng)值2">選項(xiàng)3</option>
更多option......
</select>多選列表和多選按鈕類(lèi)似，一樣為了節(jié)省空間，當(dāng)數(shù)據(jù)選項(xiàng)比較多時(shí)，使用多選列表，語(yǔ)法如下：
<select name="名稱(chēng)" size="可看見(jiàn)的列表項(xiàng)數(shù)" multiple>
<option value="選項(xiàng)值1" selected>選項(xiàng)1</option>
<option value="選項(xiàng)值2">選項(xiàng)3</option>
更多option......
</select>多選比下拉菜單不同之處是多了一個(gè)multiple屬性，定義多選的，且表現(xiàn)形式也不一樣，不是下拉而是一個(gè)列表。
如下代碼：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
下拉菜單：<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
多選列表：<br>
<select name="cars" size="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>顯示效果：
這里需要注意的是，多選列表多選時(shí)需要按住ctrl鍵同時(shí)鼠標(biāo)單擊選擇才能多選，效果如下：
到這里，已介紹了大部分的表單控件，現(xiàn)在你可以使用他們制作自己的表單，表單通常在動(dòng)態(tài)網(wǎng)站中使用，這為以后制作動(dòng)態(tài)網(wǎng)站打下基礎(chǔ)。
還有許多屬性沒(méi)有講到，比如html5新增的一些屬性和功能，可自行參考 w3cshool 等網(wǎng)站學(xué)習(xí)，感謝關(guān)注，學(xué)習(xí)愉快！
上篇 ： 前端入門(mén)——html 表單
下篇： 前端入門(mén) —— 網(wǎng)頁(yè)中使用窗口框架
TML5方興未艾，但也有不少遺憾。下面提了10點(diǎn)希望在HTML6中看到的特性，歡迎評(píng)論。
我們可能永遠(yuǎn)不會(huì)解決與壓縮編解碼器的爭(zhēng)斗，但我們可以與之配合。不同的壓縮算法可能需要更多的工作來(lái)實(shí)現(xiàn)，但是它們提供競(jìng)爭(zhēng)。能對(duì)展現(xiàn)在頁(yè)面上的視頻幀提供更多控制的方式會(huì)是更好的方案。當(dāng)前的標(biāo)準(zhǔn)是使用視頻中的一系列幀填充一個(gè)矩形。然后提供了一個(gè)帶有注釋?zhuān)帜缓推渌麅?nèi)容的文本軌道的控制。一些聰明的人已經(jīng)開(kāi)始將注釋與其他DOM對(duì)象同步。但是如果有回調(diào)鉤子和同步機(jī)制是不是更好？例如，DOM與視頻混合的能力如何？
照片在屏幕上看起來(lái)要漂亮，需要多少像素？這個(gè)答案根據(jù)根據(jù)設(shè)備的不同而不同。即使窗口的大小也會(huì)改變最小分辨率。但HTML標(biāo)準(zhǔn)
<img>
標(biāo)簽只能獲得一個(gè)SRC，它指向一個(gè)可能有太多或太少像素的圖像文件。如果它太多，瀏覽器必須降級(jí)圖像才能顯示，這就浪費(fèi)網(wǎng)絡(luò)帶寬和時(shí)間。如果像素太少，效果又太差。更好的HTML協(xié)議應(yīng)該為圖像提出所需的寬度或高度，以便服務(wù)器可以提供最佳分辨率。
標(biāo)準(zhǔn)的HTML瀏覽器使用且只是用JavaScript。但由于某些原因，我們需要用script標(biāo)簽的type屬性設(shè)定為text/javascript來(lái)指定語(yǔ)言類(lèi)型。從html4開(kāi)始，type一直就沒(méi)有默認(rèn)值。
HTML4的建議稿覺(jué)得有人可能會(huì)使用像text/tcl或text/vbscript這樣的類(lèi)型，但是實(shí)際上有沒(méi)有人使用這些？微軟已經(jīng)棄用了IE11的text/vbscript，而且近年來(lái)Sun在使用tcl。
Google正在慢慢推Dart，但包括Dart的Chromium（Chrome的開(kāi)發(fā)版）確有一個(gè)不祥的警告 ：“不要使用Dartium作為主瀏覽器，不要將Dartium分發(fā)給用戶(hù)！”說(shuō)明Google對(duì)Dart也不是很有信心。
但在未來(lái)，我們可以擁有更強(qiáng)大的可插拔語(yǔ)言。它將為開(kāi)發(fā)人員增加更多的靈活性和設(shè)計(jì)選擇。會(huì)不會(huì)把互聯(lián)網(wǎng)弄壞？如果有一個(gè)穩(wěn)固的開(kāi)源實(shí)現(xiàn)，它就可以被所有瀏覽器采用。可能很難讓網(wǎng)站使用可插入語(yǔ)言來(lái)為廣泛的受眾提供內(nèi)容 - JavaScript會(huì)可以繼續(xù)擁有廣泛的網(wǎng)絡(luò)基礎(chǔ) - 但是對(duì)于使用專(zhuān)門(mén)語(yǔ)言的更專(zhuān)業(yè)的擴(kuò)展來(lái)說(shuō)，這可能是一個(gè)很好的選擇。
想超越JavaScript的開(kāi)發(fā)人員可以有另外一個(gè)解決方案，就是將其他語(yǔ)言轉(zhuǎn)換為JavaScript。許多開(kāi)發(fā)人員已經(jīng)使用一些翻譯語(yǔ)言（如CoffeeScript）的預(yù)處理器。
杰里米·阿什肯納斯（Jeremy Ashkenas） 列出來(lái)了可以編譯成JavaScript的語(yǔ)言列表，范圍很廣。Lisp，Python，Ruby，Erlang，Scala - 列表還在繼續(xù)擴(kuò)大。
這樣的提案將會(huì)付出代價(jià)。當(dāng)一種語(yǔ)言被交叉編譯成JavaScript時(shí)，通常會(huì)在同一時(shí)間進(jìn)行細(xì)化，生成一個(gè)更小的更容易通過(guò)互聯(lián)網(wǎng)傳輸?shù)陌姹尽Ｔ诓渴疬^(guò)程中執(zhí)行此操作比在每個(gè)人的瀏覽器上執(zhí)行的效率要高得多。
但是，縮小的版本有其缺點(diǎn)。開(kāi)放一直是網(wǎng)絡(luò)的巨大優(yōu)勢(shì)之一。我們能夠通過(guò)閱讀通常仍然以人類(lèi)可讀的形式寫(xiě)的JavaScript代碼來(lái)學(xué)習(xí)和調(diào)試。交叉編譯和縮小的代碼對(duì)于其他人是無(wú)價(jià)值的。它正在慢慢打破Web的開(kāi)放性。
在瀏覽器中執(zhí)行此轉(zhuǎn)換還有其他優(yōu)點(diǎn)。每臺(tái)機(jī)器都有不同，轉(zhuǎn)換過(guò)程需要利用到RAM大小、視頻卡庫(kù)等知識(shí)。當(dāng)前版本的HTML假定采用JavaScript的一般版本，這使得為本地機(jī)器優(yōu)化代碼變得更難。
JavaScript編程的世界已經(jīng)被jQuery以及其他標(biāo)準(zhǔn)庫(kù)改造了。然而，幾乎每個(gè)網(wǎng)站仍然要加載自己加載某個(gè)版本的副本。在加載jQuery時(shí)浪費(fèi)的能量可能足以照亮一個(gè)小國(guó)家，治愈癌癥或兩者兼而有之。
一些網(wǎng)站使用像Google或Yahoo這樣的公司托管的標(biāo)準(zhǔn)緩存版本，這樣可以節(jié)省帶寬，但下一個(gè)HTML標(biāo)準(zhǔn)應(yīng)該比這更好。如果大量設(shè)計(jì)人員同意，則可以使用瀏覽器進(jìn)行分發(fā)。這將節(jié)省更多時(shí)間再次刷新jQuery的緩存版本。
瀏覽器已經(jīng)可以共享位置信息。期待更多國(guó)家加入。人們通常希望在自己設(shè)備的聯(lián)系信息庫(kù)里面放入電子郵件地址或電話(huà)號(hào)碼。現(xiàn)在他們必須剪切和粘貼。為什么不讓JavaScript挖掘并保存所有的剪切和粘貼？這對(duì)移動(dòng)設(shè)備來(lái)說(shuō)是非常棒的。在交互上可以提供細(xì)粒度的控制，允許人們來(lái)自某些域的代碼可以自動(dòng)訪(fǎng)問(wèn)到聯(lián)系信息，而其他域不行。
在網(wǎng)絡(luò)攝像頭和手機(jī)的多攝像頭提供的設(shè)備基礎(chǔ)上，用戶(hù)與瀏覽器交互的場(chǎng)景少不了鏡頭和麥克風(fēng)。W3C已經(jīng)在探索一種向表單添加照片或視頻捕獲的方法 。一些瀏覽器已經(jīng)支持自己的版本，如
webkitGetUserMedia
。很容易想到更多。表單元素還可以訪(fǎng)問(wèn)存儲(chǔ)在設(shè)備中的存儲(chǔ)空間，并且該設(shè)備可以更好地控制攝像機(jī)和捕獲速率。這將讓網(wǎng)站與專(zhuān)門(mén)的應(yīng)用程序競(jìng)爭(zhēng)。
鑒于構(gòu)建可信硬件是多么困難的事情，因此我們可能會(huì)提供很多硬性和快速認(rèn)證的方式。而瀏覽器可以為此提供更多的功能。瀏覽器可以使用嵌入式Key進(jìn)行簽名，而不是Cookie。這些可以以硬化的芯片存儲(chǔ)在設(shè)備之外，以防止人們提取密鑰。向?yàn)g覽器添加API將允許網(wǎng)站要求更好的數(shù)字簽名。如果把太多的信任放在其中，這可能是危險(xiǎn)的，但這將是cookie和會(huì)話(huà)身份驗(yàn)證的一個(gè)步驟。
文章底部的注釋部分只是我們?nèi)绾巫⑨屛恼碌拈_(kāi)始，但是一個(gè)標(biāo)準(zhǔn)的結(jié)構(gòu)可以添加與段落、句子、甚至單詞相關(guān)的注釋。復(fù)雜的版本甚至可以允許對(duì)視頻內(nèi)的圖像或某個(gè)時(shí)間點(diǎn)進(jìn)行注釋。有些網(wǎng)站正在開(kāi)始提供這些功能，但在標(biāo)準(zhǔn)化API方面會(huì)使所有網(wǎng)站和瀏覽器都以相同的方式處理基本注釋。W3C有一個(gè)研究該領(lǐng)域并提供基本標(biāo)準(zhǔn)的小組。
HTML標(biāo)簽區(qū)分標(biāo)題，段落和頁(yè)腳，但還不夠多。為什么不創(chuàng)建一個(gè)標(biāo)準(zhǔn)的方法來(lái)指定其他常見(jiàn)的細(xì)節(jié)，例如地址或電話(huà)號(hào)碼的部分？當(dāng)然，用于描繪電子郵件地址的標(biāo)準(zhǔn)標(biāo)簽可以使垃圾郵件發(fā)送者的生活變得更輕松，但標(biāo)準(zhǔn)的一組標(biāo)簽可以加速網(wǎng)頁(yè)抓取工具和搜索引擎，這將有利于我們所有人。W3C一直在探索微格式來(lái)標(biāo)記數(shù)據(jù)，并曾經(jīng)認(rèn)為它們是HTML5的一部分，盡管它們不是。我們可以為地點(diǎn)，時(shí)間，日期，出售物品，參考書(shū)目以及所有標(biāo)準(zhǔn)數(shù)據(jù)使用更全面的標(biāo)記。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
