HTML

1、語(yǔ)義化

何為語(yǔ)義化，字面意思就是根據(jù)html語(yǔ)言做一個(gè)讓代碼變得有意義的轉(zhuǎn)化。

emmm 大家都知道，html標(biāo)簽有很多，<h1> <p> <div> <span>等等等。看看這些可愛(ài)的標(biāo)簽，有什么想說(shuō)的？咱們先看一個(gè)語(yǔ)義化的頁(yè)面布局，如下：

1、<header>

<header>定義文檔或者文檔的部分區(qū)域的頁(yè)眉，應(yīng)作為介紹內(nèi)容或者導(dǎo)航鏈接欄的容器。

在一個(gè)文檔中，您可以定義多個(gè)<header>元素，但需要注意的是<header>元素不能作為<address>、<footer> 或 <header> 元素的子元素。

2、<nav>

<nav>描述一個(gè)含有多個(gè)超鏈接的區(qū)域，該區(qū)域包含跳轉(zhuǎn)到其他頁(yè)面或頁(yè)面內(nèi)部其他部分的鏈接列表。

在一個(gè)文檔中，可定義多個(gè)<nav>元素。

3、<main>

<main> 定義文檔的主要內(nèi)容，該內(nèi)容在文檔中應(yīng)當(dāng)是獨(dú)一無(wú)二的，不包含任何在文檔中重復(fù)的內(nèi)容，比如側(cè)邊欄，導(dǎo)航欄鏈接，版權(quán)信息，網(wǎng)站logo，搜索框（除非搜索框作為文檔的主要功能）。

需要注意的是在一個(gè)文檔中不能出現(xiàn)多個(gè)<main>標(biāo)簽。

4、<article>

<article>元素表示文檔、頁(yè)面、應(yīng)用或網(wǎng)站中的獨(dú)立結(jié)構(gòu)，是可獨(dú)立分配的、可復(fù)用的結(jié)構(gòu)，如在發(fā)布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶(hù)提交的評(píng)論、交互式組件，或者其他獨(dú)立的內(nèi)容項(xiàng)目。

當(dāng)<article>元素嵌套使用時(shí)，則該元素代表與外層元素有關(guān)的文章。例如，代表博客評(píng)論的<article>元素可嵌套在代表博客文章的<article>元素中。

5、<aside>

<aside> 元素表示一個(gè)和其余頁(yè)面內(nèi)容幾乎無(wú)關(guān)的部分，被認(rèn)為是獨(dú)立于該內(nèi)容的一部分且可以被單獨(dú)的拆分出來(lái)而不會(huì)影響整體。通常表現(xiàn)為側(cè)邊欄或嵌入內(nèi)容。

6、<footer>

<footer>定義最近一個(gè)章節(jié)內(nèi)容或者根節(jié)點(diǎn)元素的頁(yè)腳。一個(gè)頁(yè)腳通常包含該章節(jié)作者、版權(quán)數(shù)據(jù)或者與文檔相關(guān)的鏈接等信息。

使用footer插入聯(lián)系信息時(shí)，應(yīng)在 footer 元素內(nèi)使用 <address> 元素。

注意不能包含<footer>或者<header>

7、<section>

<section>表示文檔中的一個(gè)區(qū)域（或節(jié)），比如，內(nèi)容中的一個(gè)專(zhuān)題組。

現(xiàn)在vue開(kāi)發(fā)，拿起div就是擼，簡(jiǎn)單方便快捷。也說(shuō)不上哪種模式更好吧，但是非框架開(kāi)發(fā)的時(shí)候，建議還是語(yǔ)義化，這樣瀏覽器理解起來(lái)更好，而且，當(dāng)css樣式加載失敗的時(shí)候，不至于頁(yè)面亂到不能看。 下面介紹一下語(yǔ)義化優(yōu)點(diǎn)：

• 易于用戶(hù)閱讀，樣式丟失的時(shí)候能讓頁(yè)面呈現(xiàn)清晰的結(jié)構(gòu)。
• 有利于SEO，搜索引擎根據(jù)標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重。
• 方便其他設(shè)備解析，如盲人閱讀器根據(jù)語(yǔ)義渲染網(wǎng)頁(yè)
• 有利于開(kāi)發(fā)和維護(hù)，語(yǔ)義化更具可讀性，代碼更好維護(hù)，與CSS3關(guān)系更和諧。

2、新標(biāo)簽新特性

上面說(shuō) 了語(yǔ)義化，而H5出的新標(biāo)簽，大部分都是為了讓開(kāi)發(fā)者更好的去使用語(yǔ)義化去開(kāi)發(fā)。

新block標(biāo)簽：header, footer, main, aside, article, section, nav, hgroup, （主要8個(gè)）。

新表單標(biāo)簽，calendar、date、time、email、url、search

媒介標(biāo)簽： video 和 audio // 視頻和音頻

繪畫(huà)標(biāo)簽： canvas //畫(huà)圖 利用css3

新block標(biāo)簽：

header:頁(yè)眉（網(wǎng)頁(yè)（部分區(qū)域）的頭部 頂部 導(dǎo)航區(qū)域等等）;

footer:頁(yè)腳（網(wǎng)頁(yè)（部分區(qū)域）的底部|版權(quán)區(qū)域等等）;

section 標(biāo)簽定義網(wǎng)頁(yè)中的區(qū)域（部分）；

article 內(nèi)容是引用其他地方的；

aside 跟 article 是一起使用；是輔助 article 區(qū)域的內(nèi)容;

nav 導(dǎo)航鏈接部分;

hgroup 給標(biāo)題分組，不能就一個(gè)標(biāo)題;

figure 對(duì)多個(gè)元素進(jìn)行組合。通常與figcaption聯(lián)合使用;

3、input和textarea的區(qū)別

具體應(yīng)該是 <input type="text">和<textarea> 的區(qū)別。

他們之間最大的區(qū)別是，前者是單行文本框，后者是無(wú)限多行文本框。

4、用一個(gè)div模擬textarea的實(shí)現(xiàn)

使用很簡(jiǎn)單，一個(gè)普通的block元素上加個(gè)contenteditable="true"就ok了，如下：

<div contenteditable="true"></div>

是不是賊簡(jiǎn)單。樣式什么的自己加就好，contenteditable雖然是H5的屬性，但是IE很早之前就已經(jīng)開(kāi)始支持了，所以兼容的問(wèn)題不是很大。

5、移動(dòng)設(shè)備忽略將頁(yè)面中的數(shù)字識(shí)別為電話(huà)號(hào)碼的方法

<meta name="format-detection" content="telephone=no,email=no,adress=no">

一、telephone

你明明寫(xiě)的一串?dāng)?shù)字沒(méi)加鏈接樣式，而iPhone會(huì)自動(dòng)把你這個(gè)文字加鏈接樣式、并且點(diǎn)擊這個(gè)數(shù)字還會(huì)自動(dòng)撥號(hào)！想去掉這個(gè)撥號(hào)鏈接該如何操作呢？這時(shí)我們的meta又該大顯神通了，代碼如下：

telephone=no就禁止了把數(shù)字轉(zhuǎn)化為撥號(hào)鏈接！telephone=yes就開(kāi)啟了把數(shù)字轉(zhuǎn)化為撥號(hào)鏈接，要開(kāi)啟轉(zhuǎn)化功能，這個(gè)meta就不用寫(xiě)了,在默認(rèn)是情況下就是開(kāi)啟！

二、email

告訴設(shè)備不識(shí)別郵箱，點(diǎn)擊之后不自動(dòng)發(fā)送

email=no禁止作為郵箱地址！

email=yes就開(kāi)啟了把文字默認(rèn)為郵箱地址，這個(gè)meta就不用寫(xiě)了,在默認(rèn)是情況下就是開(kāi)啟！

三、adress

adress=no禁止跳轉(zhuǎn)至地圖！

adress=yes就開(kāi)啟了點(diǎn)擊地址直接跳轉(zhuǎn)至地圖的功能,在默認(rèn)是情況下就是開(kāi)啟！

版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請(qǐng)附上博文鏈接！

總結(jié)

以上是生活随笔為你收集整理的html多行文本框_前端面试集锦 HTML篇的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。