整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          一起來學習一下,這些你可能不知道的HTML知識


          HTML作為前端三大基礎知識點之一,是每一個前端開發人員都要掌握的部分。今天這篇文章我們來看看一些平時不太會注意,卻在面試時可能會問到的題目,來看看你都會嗎?

          HTML

          如何使用div模擬實現textarea?

          我們都知道textarea是form表單中一個很常見的元素,用于多行文本輸入,可以設置行數和列數。

          但是默認的textarea樣式在頁面上看起來是很丑的,很多頁面都是采用div模擬textarea實現。例如QQ空間主頁面的發表說說,在你看頁面源碼后就會發現這個輸入框其實是一個div元素,并不是一個textarea元素,現在我們就來看看這是如何實現的吧?

          首先來看看實現的效果是什么樣的。

          實現效果

          關鍵屬性:contenteditable

          正如這個屬性的字面意思,可以理解為可編輯的,如果在頁面標簽上設置contenteditable=true,該標簽就可以進行編輯了。

          可以配合user-modify屬性,該屬性表示的是控制用戶能否對頁面元素進行編輯,通過設置不同的值可以選擇富文本或者純文本內容,但是由于該屬性是非標準屬性,很少有人知道。

          首先我們來看看頁面的HTML部分代碼,就是一個很簡單的div標簽,然后設置contenteditable屬性為true。

          HTML部分代碼

          接下來我們就看看整個CSS代碼的完整實現吧。

          CSS樣式

          通過min-height和max-height屬性可以控制div的高度,在內容超出max-height后會出現滾動條。如果想要固定div的高度,則只需要設置height屬性就可以,而不用設置min-height和max-height屬性。

          src和href的區別

          src和href從使用上來看都是對外部資源的一種引用,但是在具體理解上是有差異的。

          href的值指定的是資源在網絡上的位置,定義的是當前頁面上的某個元素與需要的資源文件的一個鏈接。比如下面一個語句。

          href引用

          當瀏覽器解析到頁面的這條語句時,會知道在這里引用了一個外部樣式文件,但并不會阻止頁面解析。這與@import有很大不同,因此在引入外部樣式時,推薦使用link標簽。

          src的值表示的是頁面上必不可少的內容,需要將指定內容加載到當前頁面中。比如下面一個語句。

          src引用

          當瀏覽器解析到頁面上的這條語句時,瀏覽器會對這個文件進行解析,編譯和執行,從而導致整個頁面加載會被暫停,這也是為什么一般會選擇將script標簽放在body結束標簽的前面。

          有一種更好的理解方式,href表示的是一個資源的鏈接;src是對當前元素的替換,內容最終會嵌入到當前頁面中。

          DIV+CSS布局和Table布局對比

          雖然目前大多數網頁都是采用的DIV+CSS布局的方式,但是也有少數的老式Web網頁采用的是Table布局,我們可以一起來看看兩種布局方式的優劣。

          布局對比

          • div+css布局

          1. div+css的布局方式屬于W3C標準,而且由于CSS的存在,HTML部分的代碼會顯得很純凈,滿足行為,樣式,結構分離的原則。

          2. 頁面加載速度更快,這是目前DIV+CSS使用更廣泛的一個非常重要的原因。

          3. 頁面編碼量相對于Table布局會少很多。

          4. 頁面內容更容易維護,由于樣式都存在CSS文件中,只需要修改CSS文件即可,對HTML文件不會有影響。

          5. 由于DIV+CSS布局更容易進行SEO優化,所以更方便被搜索引擎收錄。

          • Table布局

          雖然DIV+CSS有各種各樣的優勢,但是Table布局也并不是完全無用的。這里也可以列舉出幾個采用Table布局的優勢。

          1. 新手學習方便(相信有很多后端RD在進行前端學習時剛開始都是從table布局開始的)。

          2. 兼容性更好,由于Table布局是從最古老的瀏覽器發展而來的,在兼容性上會滿足所有瀏覽器。而CSS3的出現卻要考慮瀏覽器的支持程度,一個樣式要考慮加上幾個不同瀏覽器前綴,類似于-webkit,-moz等

          結束語

          今天這篇文章主要講解了幾個關于HTML的知識點,大家都掌握了嗎?

          CSDN 編者按】這篇文章通過一個有趣的 JavaScript 問題,揭示了該 JavaScript 的復雜性和問題的巧妙之處。

          原文鏈接:https://dev.to/arjuncodess/javascript-is-extraordinarily-weird-hear-me-out-56j5

          未經允許,禁止轉載!


          作者 | Arjun Vijay Prakash 譯者 | 明明如月
          責編 | 夏萌
          出品 | CSDN(ID:CSDNnews)

          昨晚,我遇到了一個頗為有趣的 JavaScript 問題。我敢保證,除非你提前看答案,否則很難回答出來。

          請問這段代碼的輸出結果是什么?

          ("b" + "a" + + "a" + "a").toLowerCase()

          可選擇的答案如下:

          • baaa

          • ba01100001a

          • baa

          • ba1a

          這個問題表面看起來不難,但當我公布答案后,可能讓你驚掉下巴。

          所有上述選項都是錯的!請問,你選對了嗎?

          答案將在5秒后公布。

          5.

          4.

          3.

          2.

          1.

          答案是 "banana"

          JavaScript 真是匪夷所思


          主站蜘蛛池模板: 一区二区精品视频| 亚洲一区二区高清| 国产成人高清亚洲一区久久| 国内偷窥一区二区三区视频| 无码人妻一区二区三区在线视频| 人妻天天爽夜夜爽一区二区| 亚洲福利一区二区| 精品视频在线观看一区二区| 欧洲精品无码一区二区三区在线播放| 色妞色视频一区二区三区四区| 色一情一乱一区二区三区啪啪高| 制服美女视频一区| 无码人妻一区二区三区免费n鬼沢| 韩国一区二区视频| 国产一区在线视频观看| 日韩精品一区二区三区四区| 蜜桃AV抽搐高潮一区二区| 一区二区三区免费在线观看| 中文字幕在线一区二区在线 | 日本一区二区高清不卡| 内射女校花一区二区三区| 亚洲AV无码一区二区三区久久精品 | 日本一区二区三区久久| 韩日午夜在线资源一区二区 | 欧美日韩一区二区成人午夜电影| 久久精品一区二区影院| 亚洲乱码av中文一区二区| 三上悠亚一区二区观看| 免费无码A片一区二三区| 无码人妻精品一区二区三区66| 国产丝袜一区二区三区在线观看| 久久精品一区二区三区日韩| 波霸影院一区二区| 亚洲影视一区二区| 国产激情з∠视频一区二区| 欧洲精品码一区二区三区免费看 | 亚洲无线码一区二区三区| 色天使亚洲综合一区二区| 日韩人妻一区二区三区蜜桃视频 | 久久精品免费一区二区三区| 国产a久久精品一区二区三区|