当前位置: 首页>JAVA>正文

java基礎面試題及答案,HTML CSS 基礎 面試題

java基礎面試題及答案,HTML CSS 基礎 面試題

HTML、CSS基礎

  1. 瀏覽器及內核:
    • IE - trident
    • chrome - blink
    • opera - blink
    • Safari - webkit
    • Firefox - gecko
  2. HTML中Doctype的作用
    • 文檔聲明頭
    • 告知瀏覽器的解析器按照何種規范解析頁面
    • DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現
    • 嚴格模式,以瀏覽器支持的最高標準運行
  3. div+css的布局較table布局有什么優點?
    • 符合W3C標準,結構清晰,結構、樣式和行為分離;
    • 更有語義化的標簽,SEO優化
    • 布局修改簡單、帶來足夠好的可維護性
    • 代碼體積小,頁面加載速度快、(整個table加載完了才顯示內容)
  4. 漸進增強、優雅降級
    • 漸進增強:針對低版本瀏覽器來構建頁面,保證基本的功能,針對高級瀏覽器追加功能;
    • 優雅降級:一開始構建網站的完整功能,再向下兼容;
  5. 圖片的格式有哪些?
    • jpg、JPEG、png、GIF、SVG;webp : 2010 Google I/O大會推出,無損壓縮體積更小;
  6. 微格式?
    • 結構化數據的開放標準
    • 適合人類閱讀、易被機器讀取,容易和外部進行數據通信
  7. 大量圖片的網站,如何優化?提升用戶體驗?
    • JQuery插件,lazy-load,判斷頁面向上卷曲的距離,根據scrollTop來加載圖片;
    • 如果為相冊,優先加載第一張;
    • 使用CSS精靈圖、iconfont字體圖標;
  8. HTML結構語義化?
    • 根據內容的語義化,選擇合適的標簽
    • 結構清晰
    • 用戶體驗好(label標簽)
    • 搜索引擎優化
    • 方便其他設備解析(盲人閱讀器)
    • 便于團隊的開發和維護
  9. 有哪項方式可以設置DOM的CSS樣式?
    • 行內
    • 內嵌
    • 外聯
  10. CSS選擇器?
    • p、.box、#box、*;
    • 后代選擇器(空格)、直接子代選擇器(>)、兄弟選擇器(+)
    • 交集選擇器(p.box),并集選擇器(,),屬性選擇器([]),偽類選擇器(:)
  11. 哪些CSS屬性定義,可以使DOM元素不再頁面可視區?
    • display:none
    • 寬高為0,visibility:hidden
    • 寬高為0,opacity:0
  12. CSS的hack?IE6、7、8的CSS hack?
    • 條件注釋語句 [if IE] ![endif]
    • IE6、7中*p{}、_p{}
    • IE6不認識!important
  13. 行內元素、塊級元素特點?
    • 塊級元素:div、p、h1-h6、ul 、ol、li、dl、dd、dt
    • 行內元素:span、a、img、input…
    • 空元素(單標簽):br、hr、img、input、link、meta
    • 塊級元素獨占一行、可設寬高;
    • 行內元素 一行顯示、不可設置豎直方向的padding和margin
    • line-block行內塊,一行、可設寬高:img、input、button、texterea、label
  14. margin塌陷?
    • 垂直兄弟關系:標準文檔流中、垂直方向margin以較大值為準;
    • 嵌套關系:子盒子設置margin-top時,父盒子一起下移,over-flow:hidden、透明邊框、給父盒子設padding;
  15. css中讓文字:垂直、水平方向重疊的屬性?
    • 水平:letter-spaceing設為負值(用于清除圖片3px空白)
    • 垂直:width太小,line-height為0時,垂直重疊;
    • 擴展:消除img3px空白1、給父元素設置高度;2、display:block;3、vertical-align;4、font-size:0;
  16. CSS優先級:
    • !important > 行內 > 內嵌 > 外聯
    • id > 類 > 標簽
    • 就近原則(后來樣式覆蓋之前的)
  17. CSS屬性哪些可以繼承?不可以繼承?
    • 繼承:以font-開頭、以text-開頭、color、列表元素list-style
    • 不可以繼承:寬、高、padding、margin
  18. display和position的值?
    • display:none、block、inline、inline-block;
    • position:static、relative(不脫標,相對自己原位置左上角定位)、absolute(脫標,相對已經定位的離自己最近的父元素定位)、fixed(脫標,相對瀏覽器窗口進行定位)、inherit
  19. 行內元素不能設置垂直方向的padding和margin
  20. 盒模型
    • content + padding + border + margin
    • W3C盒模型:width=content
    • IE盒模型:width = content + padding + border
  21. b標簽和strong標簽,i標簽和em標簽區別?
    • 前者無語義、后者有語義
  22. CSS樣式初始化?
    • 一些元素在不同的瀏覽器下默認樣式不同;
    • ?瀏覽器之間會出現頁面的差異;
  23. Quirks模式?它和Standards模式有什么區別?
    • IE6之后,引入標準模式,但IE6之前的頁面按照標準模式解析,頁面不能正常顯示;
    • 因此,增加了怪異模式的分支,例如當頁面沒有DTD時,將會議怪異模式解析;
    • 區別:
      • IE盒模型width = content + padding + border
      • 怪異模式給行內元素設置width、height會生效
      • 怪異模式使用margin:0 auto使盒子居中無效
  24. CSS樣式語句構成:
    • 選擇器 { 屬性 : 值; }
  25. 如何居中一個div?
    • 標準文檔流中:margin:0 auto
    • 脫標:已知寬高:position:absolute;top:50%;left:50%;margin-top、margin-left自身的一半
    • 脫標:寬高未知:position:absolute;top:0;left:0;bottom:0;right:0;
    • 如何居中img?display:table-cell;vertical-align:middle;text-align:center;
  26. 前端頁面又哪三層構成?作用?
    • html、CSS、JS
    • 結構、樣式、交互
  27. IE6的雙倍margin:
    • IE6并且float與margin方向相同時,會出現雙倍margin,解決方案:float與margin方向相反;
  28. HTML結構語義化?
    • 根據內容的語義化,選擇合適的標簽
    • 結構清晰
    • 用戶體驗好(label標簽)
    • 搜索引擎優化
    • 方便其他設備解析(盲人閱讀器)
    • 便于團隊的開發和維護
  29. px和em的區別?
    • px是固定單位
    • em是繼承父元素的font-size
    • rem是繼承根元素的font-size
  30. display:none與visibility:hidden的區別?
    • display:none;在頁面徹底消失
    • visibility:hidden;不脫離標準文檔流,只是可視為隱藏
  31. img的alt與title有何異同?strong和em的異同?
    • alt屬性是在圖片無法加載時顯示的文字,SEO優化
    • title是鼠標懸停時的提示信息
    • 同:有語義、強調標簽
    • 異:strong加粗、em斜體
  32. 為什么利用多個域名來存儲網站資源會更有效?
    • 突破瀏覽器并發限制
    • 節約cookie帶寬
    • CDN緩存更方便
    • 節約主域名的連接數,優化頁面響應速度
    • 防止不必要的安全問題
  33. BFC塊級格式化上下文?
    • Block formatting context 塊級格式化上下文
    • 創建獨立的渲染區域,該區域內元素布局與區域外元素布局互不影響
    • 哪些元素會生成BFC?
    • 1根元素、2float、3position為absolute或fixed、4overflow:hidden
  34. 從前端角度分析,如何做好SEO?
    • meta標簽優化:title、description、keywords
    • 有語義的標簽
    • 點擊付費的搜索引擎
    • 增加外部鏈接
  35. JS上線后一般有哪些緩存?
    • 服務器緩存
    • 瀏覽器緩存
    • CDN緩存
    • dns緩存
  36. rgba()和opacity()的異同?
    • 都可以設置透明度
    • rgba()背景色透明,不能繼承
    • opcity()元素透明度,可以繼承
  37. less是什么?
    • css預處理器
    • 變量、嵌套、函數
    • 利于維護、結構清晰、提高效率
  38. a鏈接點擊過后不具備hover、active樣式,怎么解決?
    • 遵守愛恨準則
    • link、visited、hover、active
  39. HTML、XHTML的區別?
    • XHTML更為嚴格
    • 標簽合理嵌套
    • 元素閉合
    • 標簽小寫
    • 必須有跟元素
    • 屬性用“”
    • 注釋內不能寫–
    • 圖片要有說明文字
  40. CSS中link和@import的區別?
    • link是HTML標簽,@import是CSS中提供的
    • link頁面加載時同時加載,@import在CSS加載完成后加載
    • @import存在兼容性問題,IE5以上
    • @import權重低
  41. CSS3新增偽類?
    • :nth-child(2n),實現奇偶選擇
    • :nth-of-type ,相同元素第一個
    • :nth-of-child, 父元素的第一個子元素
    • :empity、:checked、:disabled、
    • :target
  42. 包含塊:containing block
    • 為子元素提供尺寸、位置的參考
    • position:absolute,相對于離自己最近的已經定位的父元素定位
    • position:fixed,相對于瀏覽器窗口
  43. 瀏覽器兼容性問題
    • 元素默認樣式不同,padding、margin…=>初始化樣式
    • 雙倍margin,IE6、float與margin方向相同,hack:float與margin方向相反
    • IE6、7不支持小于12px的盒子,設置_font-size:0;
    • IE6不支持overflow:hidden;設置_zoom:1;
    • IE6的3px bug,子盒子margin-top會多3px,設置-margin
    • IE超鏈接后hover樣式不存在,愛恨準則
  44. web標準、W3C的理解?
    • 標準:結構、樣式、行為分離,便于代碼開發維護;
    • html的標簽小寫、閉合、合法嵌套,利于SEO優化;
    • W3C:統一標準,降低開發難度、成本,降低bug
  45. http和https的異同?
    • https需要申請證書,需要費用
    • http是明文傳輸,無狀態;https使用SSL加密傳輸,需要身份認證,更安全
    • http端口80;https端口443
  46. cookies,sessionStorage和localStorage的區別?
    • 相同點:存儲在瀏覽器端,同源
    • 區別:cookie每次請求都會攜帶,還有路徑概念;
    • 大小:cookie最多4K,PK 5M;
    • 有效期:cookie可以設置、sessionStorage瀏覽器窗口關閉前,localStorage始終有效
  47. src和href的區別?
    • src是頁面必不可少的一部分,是引入
    • href是引用,當前元素和外部資源建立聯系
    • 解析到src時,下載執行src文件,href不會影響當前頁面的解析

https://www.nshth.com/java/338893.html
>

相关文章:

  • java基礎面試題及答案
  • 前端面試題vue
  • css3面試題及答案
  • CSS面試題
  • mysql基礎面試題
  • c 面試題
  • HTML基本知識
  • vue3的面試題
  • pdf去水印軟件免費版,java批量去除pdf簽名,刪除簽名圖標
  • java多線程面試題及答案,JAVA8線程池THREADPOOLEXECUTOR底層原理及其源碼解析
  • java編程,java.lang.Class:是反射的源頭
  • java基礎面試題及答案,HTML CSS 基礎 面試題
  • java編寫軟件工具,Xson:Java對象序列化和反序列化工具
  • nlp預訓練模型,NLP-D62-nlp比賽D31刷題D15
  • kafka如何使用,kafka javax.management.InstanceAlreadyExistsException: kafka.consumer:
  • ssm畢設項目企業部門報銷管理g9d62(java+VUE+Mybatis+Maven+Mysql+sprnig)
  • java小游戲合集,java 煙花_Java 美麗的煙花
  • table列合并,poi操作excel之列合并
  • 找不到指定模塊怎么辦,在烏版圖安裝軟件包時候報錯:E:無法定位軟件包
  • 學云計算好就業嗎,對不起,云計算技術又走錯路了
  • 數電模電基礎知識總結,數電模電實驗課程
  • java的基礎知識,「JavaSE」-面向對象
  • 擴展內存,Java編程內存分析簡要
  • java多線程面試題及答案,【階段一】java之面向對象上
  • java 工作流框架,Activiti工作流使用之SpringBoot整合Activiti
  • 模型的應用形態包括哪些,模型設計準則
  • c語言程序設計培訓班南寧,南寧從零開始學習編程
  • 服務器,Spring Security oAuth2創建認證服務器模塊
  • Java jdk14.0.1安裝簡單步驟
  • 安裝ug12.0當前頁面的腳本發生錯誤,ug提示找不到html文件,[圖文教程] 以下文件無法加載,導致打開操作失敗: 使用當前搜索選項找不到文件,部件已卸載.
  • java執行cmd命令找不到指定文件,java編譯找不到文件_解決cmd運行java程序“找不到文件”提示的方案
  • 線上學畫畫的機構排名,拍樂云推出業內首個「線上美術教學音視頻方案」,打造極致互動體驗
  • day18-java
  • 取兩者中較小值函數,求兩個數中的較大值
  • java多線程面試題及答案,python中的多任務-多線程和多進程
  • 關于Arthas如何遠程監視Java程序
  • Java8 Stream流中的 collect() 方法,遠比你想象中的強大
  • 劉德華《天若有情》,天若有情