這篇文章主要介紹了HTML中用div模擬textarea的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇HTML中用div模擬textarea文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

成都創(chuàng)新互聯(lián)公司憑借專(zhuān)業(yè)的設(shè)計(jì)團(tuán)隊(duì)扎實(shí)的技術(shù)支持、優(yōu)質(zhì)高效的服務(wù)意識(shí)和豐厚的資源優(yōu)勢(shì)，提供專(zhuān)業(yè)的網(wǎng)站策劃、成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)站優(yōu)化、軟件開(kāi)發(fā)、網(wǎng)站改版等服務(wù)，在成都10年的網(wǎng)站建設(shè)設(shè)計(jì)經(jīng)驗(yàn)，為成都近1000家中小型企業(yè)策劃設(shè)計(jì)了網(wǎng)站。

1、語(yǔ)義化

為什么要語(yǔ)義化?

a. 為了在沒(méi)有CSS的情況下，頁(yè)面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu):為了裸奔時(shí)好看；

b. 用戶體驗(yàn)：例如title、alt用于解釋名詞或解釋圖片信息的標(biāo)簽盡量填寫(xiě)有含義的詞語(yǔ)、label標(biāo)簽的活用；

c. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲(chóng)抓取更多的有效信息：爬蟲(chóng)依賴(lài)于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重；

d. 方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備）以有意義的方式來(lái)渲染網(wǎng)頁(yè)；

e. 便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)，語(yǔ)義化更具可讀性，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化。

2. 寫(xiě)HTML代碼時(shí)，應(yīng)注意什么？

1. 盡可能少的使用無(wú)語(yǔ)義的標(biāo)簽div和span；

2. 在語(yǔ)義不明顯時(shí)，既可以使用div或者p時(shí)，盡量用p, 因?yàn)閜在默認(rèn)情況下有上下間距，對(duì)兼容特殊終端有利；

3. 不要使用純樣式標(biāo)簽，如：b、font、u等，改用css設(shè)置。

4. 需要強(qiáng)調(diào)的文本，可以包含在strong或em標(biāo)簽中，strong默認(rèn)樣式是加粗（不要用b），em是斜體（不要用i）；

5. 使用表格時(shí)，標(biāo)題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開(kāi)，表頭用th，單元格用td；

6. 表單域要用fieldset標(biāo)簽包起來(lái)，并用legend標(biāo)簽說(shuō)明表單的用途

7. 每個(gè)input標(biāo)簽對(duì)應(yīng)的說(shuō)明文本都需要使用label標(biāo)簽，并且通過(guò)為input設(shè)置id屬性，在lable標(biāo)簽中設(shè)置for=someld來(lái)讓說(shuō)明文本和相對(duì)應(yīng)的input關(guān)聯(lián)起來(lái)。

8. 補(bǔ)充一點(diǎn)：不僅寫(xiě)html結(jié)構(gòu)時(shí)，要用語(yǔ)義化標(biāo)簽，給元素寫(xiě)css類(lèi)名時(shí)，也要遵循語(yǔ)義化原則，不要，隨便起個(gè)名字就用，那樣等以后，再重構(gòu)時(shí)，非常難讀。最忌諱的是不會(huì)英文，用漢語(yǔ)拼音代替。別那么LOW 。

HTML5新增了哪些語(yǔ)義化標(biāo)簽？

1、header元素

header元素代表“網(wǎng)頁(yè)“和”section”的頁(yè)眉。通常包含H1~H6元素或者h(yuǎn)group元素。作為整個(gè)頁(yè)面或者內(nèi)容塊的標(biāo)題，也可以包裹一節(jié)的目錄部分，一個(gè)搜索框，一個(gè)nav，或者任何相關(guān)logo。整個(gè)頁(yè)面沒(méi)有限制header元素的個(gè)數(shù)，可以擁有多個(gè)，可以為每個(gè)內(nèi)容塊增加一個(gè)header元素

header使用注意：

• 可以是“網(wǎng)頁(yè)”或任意“section”的頭部部分；

• 沒(méi)有個(gè)數(shù)限制。

• 如果hgroup或h2-h7自己就能工作的很好，那就不要用header。

2、footer元素

footer元素代表“網(wǎng)頁(yè)”或“section”的頁(yè)腳，通常含有該頁(yè)面的一些基本信息，例如：文檔創(chuàng)作者的姓名、文檔的版權(quán)信息、使用條款的鏈接、聯(lián)系信息等等。。

footer使用注意：

• 可以是“網(wǎng)頁(yè)”或任意“section”的底部部分；

• 沒(méi)有個(gè)數(shù)限制，除了包裹的內(nèi)容不一樣，其他跟header類(lèi)似。

3、hgroup元素

hgroup元素代表“網(wǎng)頁(yè)”或“section”的標(biāo)題，當(dāng)元素有多個(gè)層級(jí)時(shí)，該元素可以將h2到h7元素放在其內(nèi)，譬如文章的主標(biāo)題和副標(biāo)題的組合

hgroup使用注意：

• 如果只需要一個(gè)h2-h7標(biāo)簽就不用hgroup

• 如果有連續(xù)多個(gè)h2-h7標(biāo)簽就用hgroup

• 如果有連續(xù)多個(gè)標(biāo)題和其他文章數(shù)據(jù)，h2-h7標(biāo)簽就用hgroup包住，和其他文章元數(shù)據(jù)一起放入header標(biāo)簽

4、nav元素

nav元素代表頁(yè)面的導(dǎo)航鏈接區(qū)域。用于定義頁(yè)面的主要導(dǎo)航部分。但是我在有些時(shí)候卻情不自禁的想用它，譬如：側(cè)邊欄上目錄，面包屑導(dǎo)航，搜索樣式，或者下一篇上一篇文章，但是事實(shí)上規(guī)范上說(shuō)nav只能用在頁(yè)面主要導(dǎo)航部分上。頁(yè)腳區(qū)域中的鏈接列表，雖然指向不同網(wǎng)站的不同區(qū)域，譬如服務(wù)條款，版權(quán)頁(yè)等，這些footer元素就能夠用了。

nav使用注意：

• 用在整個(gè)頁(yè)面主要導(dǎo)航部分上，不合適就不要用nav元素；

5、aside元素

aside元素被包含在article元素中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的相關(guān)資料、標(biāo)簽、名詞解釋等。（特殊的section）

在article元素之外使用作為頁(yè)面或站點(diǎn)全局的附屬信息部分。最典型的是側(cè)邊欄，其中的內(nèi)容可以是日志串連，其他組的導(dǎo)航，甚至廣告，這些內(nèi)容相關(guān)的頁(yè)面。

aside使用總結(jié)：

• aside在article內(nèi)表示主要內(nèi)容的附屬信息，

• 在article之外則可做側(cè)邊欄，沒(méi)有article與之對(duì)應(yīng)，最好不用。

• 如果是廣告，其他日志鏈接或者其他分類(lèi)導(dǎo)航也可以用

6、article元素

article元素最容易跟section和div容易混淆，其實(shí)article代表一個(gè)在文檔，頁(yè)面或者網(wǎng)站中自成一體的內(nèi)容，其目的是為了讓開(kāi)發(fā)者獨(dú)立開(kāi)發(fā)或重用。譬如論壇的帖子，博客上的文章，一篇用戶的評(píng)論，一個(gè)互動(dòng)的widget小工具。（特殊的section）

除了它的內(nèi)容，article會(huì)有一個(gè)標(biāo)題（通常會(huì)在header里），會(huì)有一個(gè)footer頁(yè)腳。

article使用注意：

• 自身獨(dú)立的情況下：用article

• 是相關(guān)內(nèi)容：用section

• 沒(méi)有語(yǔ)義的：用div

HTML5的十大新特性

(1)語(yǔ)義標(biāo)簽

(2)增強(qiáng)型表單

(3)視頻和音頻

4)Canvas繪圖

(5)SVG繪圖

(6)地理定位 Geolocation

(7)拖放API

(8)Web Worker

(9)Web Storage

(10)WebSocket

input與textarea的區(qū)別

input是單行文本框，不會(huì)換行。通過(guò)size屬性指定顯示字符的長(zhǎng)度，注意：當(dāng)使用css限定了寬高，那么size屬性就不再起作用。value屬性指定初始值，Maxlength屬性指定文本框可以輸入的最長(zhǎng)長(zhǎng)度?？梢酝ㄟ^(guò)width和height設(shè)置寬高，但是也不會(huì)增加行數(shù)。

textarea是多行文本輸入框，文本區(qū)中可容納無(wú)限數(shù)量的文本，無(wú)value屬性，其中的文本的默認(rèn)字體是等寬字體（通常是 Courier） ，可以通 過(guò) cols 和 rows 屬性來(lái)規(guī)定 textarea 的尺寸，不過(guò)更好的辦法是使用 CSS 的 height 和 width 屬性。

用div模擬textarea

在div標(biāo)簽里面加入contenteditable="true"