HTML

1、語義化

何為語義化，字面意思就是根據html語言做一個讓代碼變得有意義的轉化。

emmm 大家都知道，html標簽有很多，<h1> <p> <div> <span>等等等。看看這些可愛的標簽，有什么想說的？咱們先看一個語義化的頁面布局，如下：

1、<header>

<header>定義文檔或者文檔的部分區域的頁眉，應作為介紹內容或者導航鏈接欄的容器。

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

2、<nav>

<nav>描述一個含有多個超鏈接的區域，該區域包含跳轉到其他頁面或頁面內部其他部分的鏈接列表。

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

3、<main>

<main> 定義文檔的主要內容，該內容在文檔中應當是獨一無二的，不包含任何在文檔中重復的內容，比如側邊欄，導航欄鏈接，版權信息，網站logo，搜索框（除非搜索框作為文檔的主要功能）。

需要注意的是在一個文檔中不能出現多個<main>標簽。

4、<article>

<article>元素表示文檔、頁面、應用或網站中的獨立結構，是可獨立分配的、可復用的結構，如在發布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、交互式組件，或者其他獨立的內容項目。

當<article>元素嵌套使用時，則該元素代表與外層元素有關的文章。例如，代表博客評論的<article>元素可嵌套在代表博客文章的<article>元素中。

5、<aside>

<aside> 元素表示一個和其余頁面內容幾乎無關的部分，被認為是獨立于該內容的一部分且可以被單獨的拆分出來而不會影響整體。通常表現為側邊欄或嵌入內容。

6、<footer>

<footer>定義最近一個章節內容或者根節點元素的頁腳。一個頁腳通常包含該章節作者、版權數據或者與文檔相關的鏈接等信息。

使用footer插入聯系信息時，應在 footer 元素內使用 <address> 元素。

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

7、<section>

<section>表示文檔中的一個區域（或節），比如，內容中的一個專題組。

現在vue開發，拿起div就是擼，簡單方便快捷。也說不上哪種模式更好吧，但是非框架開發的時候，建議還是語義化，這樣瀏覽器理解起來更好，而且，當css樣式加載失敗的時候，不至于頁面亂到不能看。 下面介紹一下語義化優點：

• 易于用戶閱讀，樣式丟失的時候能讓頁面呈現清晰的結構。
• 有利于SEO，搜索引擎根據標簽來確定上下文和各個關鍵字的權重。
• 方便其他設備解析，如盲人閱讀器根據語義渲染網頁
• 有利于開發和維護，語義化更具可讀性，代碼更好維護，與CSS3關系更和諧。

2、新標簽新特性

上面說 了語義化，而H5出的新標簽，大部分都是為了讓開發者更好的去使用語義化去開發。

新block標簽：header, footer, main, aside, article, section, nav, hgroup, （主要8個）。

新表單標簽，calendar、date、time、email、url、search

媒介標簽： video 和 audio // 視頻和音頻

繪畫標簽： canvas //畫圖 利用css3

新block標簽：

header:頁眉（網頁（部分區域）的頭部 頂部 導航區域等等）;

footer:頁腳（網頁（部分區域）的底部|版權區域等等）;

section 標簽定義網頁中的區域（部分）；

article 內容是引用其他地方的；

aside 跟 article 是一起使用；是輔助 article 區域的內容;

nav 導航鏈接部分;

hgroup 給標題分組，不能就一個標題;

figure 對多個元素進行組合。通常與figcaption聯合使用;

3、input和textarea的區別

具體應該是 <input type="text">和<textarea> 的區別。

他們之間最大的區別是，前者是單行文本框，后者是無限多行文本框。

4、用一個div模擬textarea的實現

使用很簡單，一個普通的block元素上加個contenteditable="true"就ok了，如下：

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

是不是賊簡單。樣式什么的自己加就好，contenteditable雖然是H5的屬性，但是IE很早之前就已經開始支持了，所以兼容的問題不是很大。

5、移動設備忽略將頁面中的數字識別為電話號碼的方法

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

一、telephone

你明明寫的一串數字沒加鏈接樣式，而iPhone會自動把你這個文字加鏈接樣式、并且點擊這個數字還會自動撥號！想去掉這個撥號鏈接該如何操作呢？這時我們的meta又該大顯神通了，代碼如下：

telephone=no就禁止了把數字轉化為撥號鏈接！telephone=yes就開啟了把數字轉化為撥號鏈接，要開啟轉化功能，這個meta就不用寫了,在默認是情況下就是開啟！

二、email

告訴設備不識別郵箱，點擊之后不自動發送

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

email=yes就開啟了把文字默認為郵箱地址，這個meta就不用寫了,在默認是情況下就是開啟！

三、adress

adress=no禁止跳轉至地圖！

adress=yes就開啟了點擊地址直接跳轉至地圖的功能,在默認是情況下就是開啟！

版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。