整合營銷服務商

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

          免費咨詢熱線:

          HTML必知必會

          HTML必知必會

          TML知識點梳理

          關注“教授學苑”,期待帶給你快樂的開發知識!

          信IDWEB_wysj(點擊關注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄

          (點擊頁底“閱讀原文”下載源代碼)

          ● ● ●

          1、對WEB標準以及W3C的理解與認識

          • 標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率;

          • 使用外鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快;

          • 內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件;

          • 容易維護、改版方便,不需要變動頁面內容;

          • 提供打印版本而不需要復制內容、提高網站易用性;

          2、xhtml和html有什么區別

          HTML是一種基本的WEB網頁設計語言,XHTML是一個基于XML的置標語言;

          最主要的不同:

          • XHTML 元素必須被正確地嵌套。

          • XHTML 元素必須被關閉。

          • XHTML 標簽名必須用小寫字母。

          • XHTML 文檔必須擁有根元素。

          3、Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式,區分它們有何意義?

          用于聲明文檔使用那種規范(html/Xhtml)一般為 :嚴格 、過度、基于框架的html文檔;

          加入XMl聲明可觸發,解析方式更改為IE5.5擁有IE5.5的bug;

          4、行內元素有哪些?塊級元素有哪些?CSS的盒模型?

          • 塊級元素:div p h1 h2 h3 h4 form ul

          • 行內元素:a b br i span input select

          • Css盒模型:內容,border,margin,padding

          5、CSS引入的方式有哪些? link和@import的區別是?

          引入方式:內聯、內嵌、外鏈、導入

          link和@import區別 :

          • 同時加載;

          • 前者無兼容性,后者CSS2.1以下瀏覽器不支持;

          • Link支持使用javascript改變樣式,后者不可;

          6、CSS選擇符有哪些?哪些屬性可以繼承?優先級算法如何計算?內聯和important哪個優先級高?

          選擇符:標簽選擇符、類選擇符、id選擇符;

          繼承不如指定Id>class>標簽選擇

          內聯和important優先級哪個高:important優先級高

          7、前端頁面有哪三層構成,分別是什么?作用是什么?

          • 結構層:Html

          • 表示層:CSS

          • 行為層:js

          8、css的基本語句構成是?

          選擇器{屬性1:值1;屬性2:值2;……}

          9、你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什么?

          IE(IE內核)、火狐(Gecko)、谷歌(webkit)、opear(Presto)

          10、寫出幾種IE6 BUG的解決方法

          • 雙邊距BUG:float引起的,使用display;

          • 像素問題:使用float引起的,使用dislpay:inline -3px;

          • 超鏈接hover點擊后失效:使用正確的書寫順序 linkvisited hover activen

          • IE z-index問題:給父級添加position:relative

          • Png 透明:使用js代碼改

          • Min-height 最小高度 !Important 解決’

          • select 在ie6下遮蓋:使用iframe嵌套;

          • 為什么沒有辦法定義1px左右的寬度容器(IE6默認的行高造成的,使用over:hidden,zoom:0.08line-height:1px)

          11、<img>標簽上title與alt屬性的區別是什么?

          • Alt :當圖片不顯示是用文字代表。

          • Title :為該屬性提供信息

          12、描述css reset的作用和用途。

          css reset的作用:Reset重置瀏覽器的css默認屬性;

          用途:瀏覽器的品種不同,樣式不同,然后重置,讓他們統一;

          13、解釋css sprites,如何使用。

          css sprites:把一堆小的圖片整合到一張大的圖片上,減輕服務器對圖片的請求數量

          14、瀏覽器標準模式和怪異模式之間的區別是什么

          • 盒子模型 渲染模式的不同

          • 使用window.top.document.compatMode 可顯示為什么模式

          15、你如何對網站的文件和資源進行優化?期待的解決方案包括:

          • 文件合并

          • 文件最小化/文件壓縮

          • 使用CDN托管

          • 緩存的使用

          16、什么是語義化的HTML?

          直觀的認識標簽 ,對于搜索引擎的抓取有好處

          17、清除浮動的幾種方式,各自的優缺點

          • 使用空標簽清除浮動clear:both(理論上能清楚任何標簽,,,增加無意義的標簽)

          • 使用overflow:auto(空標簽元素清除浮動而不得不增加無意代碼的弊端,使用zoom:1用于兼容IE)

          • 是用afert偽元素清除浮動(用于非IE瀏覽器)


          干貨!免費領取騰訊高級講師網頁設計教程


          點我領取

          ???

          關注網頁設計自學平臺,99%的努力都在這里

          ▼原碼打包下載可以點「閱讀原文」噢!群文件里哦!


          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的知識點,大家都掌握了嗎?


          主站蜘蛛池模板: 亚洲愉拍一区二区三区| 国产日韩高清一区二区三区| 亚洲AV无码国产一区二区三区| 国产在线精品一区二区高清不卡| 国产精品亚洲一区二区三区在线观看| 色一情一乱一伦一区二区三欧美| 国产内射在线激情一区| 久久精品一区二区三区中文字幕| 国产一区麻豆剧传媒果冻精品| 国产一区二区不卡在线播放| 久久国产精品一区| 亚洲熟女少妇一区二区| 亚洲AV日韩AV天堂一区二区三区| 国99精品无码一区二区三区| 午夜影视日本亚洲欧洲精品一区| 人妻久久久一区二区三区| 国产精品视频一区麻豆| 韩国一区二区三区视频| 亚洲Aⅴ无码一区二区二三区软件 亚洲AⅤ视频一区二区三区 | 国产乱码伦精品一区二区三区麻豆| 亚洲片一区二区三区| 国产色情一区二区三区在线播放 | 日本一区高清视频| 午夜视频久久久久一区| 在线视频一区二区三区三区不卡| 日本亚洲成高清一区二区三区| 午夜影视日本亚洲欧洲精品一区| 日韩在线一区二区| 色多多免费视频观看区一区| 国精品无码A区一区二区| 91久久精品国产免费一区| 亚洲国产欧美国产综合一区| 日本中文字幕在线视频一区| 精品国产亚洲一区二区三区 | 国产成人精品无码一区二区三区| 无码av免费一区二区三区| 秋霞日韩一区二区三区在线观看 | 91一区二区三区| 97av麻豆蜜桃一区二区| 国产精品无码一区二区三区在| 精品乱子伦一区二区三区高清免费播放|