整合營銷服務商

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

          免費咨詢熱線:

          HTML面試題

          .html5的新特性

          文件類型聲明(<!DOCTYPE>)僅有一型:<!DOCTYPE HTML>。
          新的解析順序:不再基于SGML。
          繪畫 canvas;
          用于媒介回放的 video 和 audio 元素;
          語意化更好的內容元素:article、footer、header、nav、section;
          表單控件:calendar、date、time、email、url、search;
          input元素的新類型:date, email, url等。
          新的技術: webworker, websocket, Geolocation;
          新的屬性:ping(用于a與area), charset(用于meta), async(用于script)。
          全域屬性:id, tabindex, repeat。
          新的全域屬性:contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。
          新應用程序接口:
          HTML Geolocation
          HTML Drag and Drop
          HTML Local Storage
          HTML Application Cache
          HTML Web Workers
          HTML SSE
          HTML Canvas/WebGL
          HTML Audio/Video
          移除的元素:
          純表現的元素:basefont,big,center,font, s,strike,tt,u;
          對可用性產生負面影響的元素:frame,frameset,naframes;

          2.什么是Retina 顯示屏,帶來了什么問題?

          retina:一種具備超高像素密度的液晶屏,同樣大小的屏幕上顯示的像素點由1個變為多個,如在同樣帶下的屏幕上,蘋果設備的retina顯示屏中,像素點1個變為4個

          在高清顯示屏中的位圖被放大,圖片會變得模糊,因此移動端的視覺稿通常會設計為傳統PC的2倍
          那么,前端的應對方案是:
          設計稿切出來的圖片長寬保證為偶數,并使用backgroud-size把圖片縮小為原來的1/2
          //例如圖片寬高為:200px*200px,那么寫法如下

          .css{width:100px;height:100px;background-size:100px 100px;}
          


          其它元素的取值為原來的1/2,例如視覺稿40px的字體,使用樣式的寫法為20px

          .css{font-size:20px}
          

          3.ios系統中元素被觸摸時產生的半透明灰色遮罩怎么去掉?

          ios用戶點擊一個鏈接,會出現一個半透明灰色遮罩, 如果想要禁用,可設置-webkit-tap-highlight-color的alpha值為0,也就是屬性值的最后一位設置為0.X就可以去除半透明灰色遮罩
          a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0.X)}

          4.部分android系統中元素被點擊時產生的邊框怎么去掉

          android用戶點擊一個鏈接,會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣,可設置-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果

           a,button,input,textarea{ 
                            -webkit-tap-highlight-color: rgba(0,0,0,0;) 
                            -webkit-user-modify:read-write-plaintext-only; 
                      } 
          

          -webkit-user-modify有個副作用,就是輸入法不再能夠輸入多個字符
          另外,有些機型去除不了,如小米2
          對于按鈕類還有個辦法,不使用a或者input標簽,直接用div標簽

          5.webkit表單元素的默認外觀怎么重置

          通用

          .css{-webkit-appearance:none;}
          

          偽元素改變number類型input框的默認樣式

          input[type=number]::-webkit-textfield-decoration-container { 
              background-color: transparent;    
          } 
          input[type=number]::-webkit-inner-spin-button { 
              -webkit-appearance: none; 
          }                      
          input[type=number]::-webkit-outer-spin-button { 
              -webkit-appearance: none; 
          }
          
          

          6.webkit表單輸入框placeholder的顏色值能改變么

          input::-webkit-input-placeholder{color:#AAAAAA;}
          input:focus::-webkit-input-placeholder{color:#EEEEEE;}
          

          7.禁止ios 長按時不觸發系統的菜單,禁止ios&android長按時下載圖片

          .css{-webkit-touch-callout: none}
          


          8.禁止ios和android用戶選中文字

          .css{-webkit-user-select:none}
          

          9.打電話發短信寫郵件怎么實現

          打電話:<a href="tel:0755-10086">打電話給:0755-10086</a>
          發短信,winphone系統無效 <a href="sms:10086">發短信給: 10086</a>
          寫郵件:<a href=“mailto:peun@foxmail.com">peun@foxmail.com</a>

          10.audio元素和video元素在ios和andriod中無法自動播放

          應對方案:觸屏即播

          $('html').one('touchstart',function(){
              audio.play()
          })
          

          11.閃屏怎么解決

          通過transform的3d屬性改去硬件加速可以解決閃屏問題
          開啟硬件加速
          1)解決頁面閃白
          2)保證動畫流暢

          .css { 
              -webkit-transform: translate3d(0, 0, 0); 
              -moz-transform: translate3d(0, 0, 0); 
              -ms-transform: translate3d(0, 0, 0); 
              transform: translate3d(0, 0, 0); 
          } 
          

          12.取消input在ios下,輸入的時候英文首字母的默認大寫

          <input autocapitalize="off" autocorrect="off" />
          


          13.android 上去掉語音輸入按鈕

          input::-webkit-input-speech-button {display: none}
          

          14.設計高性能CSS3動畫的幾個要素

          盡可能地使用合成屬性transform和opacity來設計CSS3動畫
          不使用position的left和top來定位
          利用translate3D開啟GPU加速

          15.fixed bug

          ios下fixed元素容易定位出錯,軟鍵盤彈出時,影響fixed元素定位
          android下fixed表現要比iOS更好,軟鍵盤彈出時,不會影響fixed元素定位
          ios4下不支持position:fixed
          解決方案
          可用isroll.js,暫無完美方案

          16.移動H5前端性能優化指南


          1)PC優化手段在Mobile側同樣適用
          2)在Mobile側我們提出三秒種渲染完成首屏指標
          3)基于第二點,首屏加載3秒完成或使用Loading
          4)基于聯通3G網絡平均338KB/s(2.71Mb/s),所以首屏資源不應超過1014KB
          5)Mobile側因手機配置原因,除加載外渲染速度也是優化重點
          6)基于第五點,要合理處理代碼減少渲染損耗
          7)基于第二、第五點,所有影響首屏加載和渲染的代碼應在處理邏輯中后置
          8)加載完成后用戶交互使用時也需注意性能

          優化指南

          [加載優化]

          加載過程是最為耗時的過程,可能會占到總耗時的80%時間,因此是優化的重點

          減少HTTP請求

          因為手機瀏覽器同時響應請求為4個請求(Android支持4個,iOS 5后可支持6個),所以要盡量減少頁面的請求數,首次加載同時請求數不能超過4個
          a) 合并CSS、JavaScript
          b) 合并小圖片,使用雪碧圖

          緩存

          使用緩存可以減少向服務器的請求數,節省加載時間,所以所有靜態資源都要在服務器端設置緩存,并且盡量使用長Cache(長Cache資源的更新可使用時間戳)
          a) 緩存一切可緩存的資源
          b) 使用長Cache(使用時間戳更新Cache)
          c) 使用外聯式引用CSS、JavaScript

          壓縮HTML、CSS、JavaScript

          減少資源大小可以加快網頁顯示速度,所以要對HTML、CSS、JavaScript等進行代碼壓縮,并在服務器端設置GZip
          a) 壓縮(例如,多余的空格、換行符和縮進)
          b) 啟用GZip

          無阻塞

          寫在HTML頭部的JavaScript(無異步),和寫在HTML標簽中的Style會阻塞頁面的渲染,因此CSS放在頁面頭部并使用Link方式引入,避免在HTML標簽中寫Style,JavaScript放在頁面尾
          部或使用異步方式加載

          使用首屏加載

          首屏的快速顯示,可以大大提升用戶對頁面速度的感知,因此應盡量針對首屏的快速顯示做優化

          按需加載

          將不影響首屏的資源和當前屏幕資源不用的資源放到用戶需要時才加載,可以大大提升重要資源的顯示速度和降低總體流量
          PS:按需加載會導致大量重繪,影響渲染性能
          a) LazyLoad
          b) 滾屏加載
          c) 通過Media Query加載

          預加載

          大型重資源頁面(如游戲)可使用增加Loading的方法,資源加載完成后再顯示頁面。但Loading時間過長,會造成用戶流失
          對用戶行為分析,可以在當前頁加載下一頁資源,提升速度
          a) 可感知Loading(如進入空間游戲的Loading)
          b) 不可感知的Loading(如提前加載下一頁)

          壓縮圖片

          圖片是最占流量的資源,因此盡量避免使用他,使用時選擇最合適的格式(實現需求的前提下,以大小判斷),合適的大小,然后使用智圖壓縮,同時在代碼中用Srcset來按需顯示
          PS:過度壓縮圖片大小影響圖片顯示效果
          a) 使用智圖( http://zhitu.isux.us/ )
          b) 使用其它方式代替圖片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)
          c) 使用Srcset
          d) 選擇合適的圖片(1. webP優于JPG 2. PNG8優于GIF)
          e) 選擇合適的大小(1. 首次加載不大于1014KB 2. 不寬于640(基于手機屏幕一般寬度))

          減少Cookie

          Cookie會影響加載速度,所以靜態資源域名不使用Cookie

          避免重定向

          重定向會影響加載速度,所以在服務器正確設置避免重定向

          異步加載第三方資源

          第三方資源不可控會影響頁面的加載和顯示,因此要異步加載第三方資源

          [腳本執行優化]


          處理不當會阻塞頁面加載、渲染,因此在使用時需當注意
          CSS寫在頭部,JavaScript寫在尾部或異步
          避免圖片和iFrame等的空Src
          空Src會重新加載當前頁面,影響速度和效率

          盡量避免重設圖片大小

          重設圖片大小是指在頁面、CSS、JavaScript等中多次重置圖片大小,多次重設圖片大小會引發圖片的多次重繪,影響性能

          圖片盡量避免使用DataURL

          DataURL圖片沒有使用圖片的壓縮算法文件會變大,并且要解碼后再渲染,加載慢耗時長

          [CSS優化]


          * 盡量避免寫在HTML標簽中寫Style屬性
          * 避免CSS表達式
          CSS表達式的執行需跳出CSS樹的渲染,因此請避免CSS表達式
          * 移除空的CSS規則
          空的CSS規則增加了CSS文件的大小,且影響CSS樹的執行,所以需移除空的CSS規則
          * 正確使用Display的屬性
          Display屬性會影響頁面的渲染,因此請合理使用
          a) display:inline后不應該再使用width、height、margin、padding以及float
          b) display:inline-block后不應該再使用float
          c) display:block后不應該再使用vertical-align
          d) display:table-*后不應該再使用margin或者float
          * 不濫用Float
          Float在渲染時計算量比較大,盡量減少使用
          * 不濫用Web字體
          Web字體需要下載,解析,重繪當前頁面,盡量減少使用
          * 不聲明過多的Font-size
          過多的Font-size引發CSS樹的效率
          * 值為0時不需要任何單位
          為了瀏覽器的兼容性和性能,值為0時不要帶單位
          * 標準化各種瀏覽器前綴
          a) 無前綴應放在最后
          b) CSS動畫只用 (-webkit- 無前綴)兩種即可
          c) 其它前綴為 -webkit- -moz- -ms- 無前綴 四種,(-o-Opera瀏覽器改用blink內核,所以淘汰)
          * 避免讓選擇符看起來像正則表達式 高級選擇器執行耗時長且不易讀懂,避免使用

          [JavaScript執行優化]


          * 減少重繪和回流
          a) 避免不必要的Dom操作
          b) 盡量改變Class而不是Style,使用classList代替className
          c) 避免使用document.write
          d) 減少drawImage
          * 緩存Dom選擇與計算
          每次Dom選擇都要計算,緩存他
          * 緩存列表.length
          每次.length都要計算,用一個變量保存這個值
          * 盡量使用事件代理,避免批量綁定事件
          * 盡量使用ID選擇器
          ID選擇器是最快的
          * TOUCH事件優化
          使用touchstart、touchend代替click,因快影響速度快。但應注意Touch響應過快,易引發誤操作

          [渲染優化]

          * HTML使用Viewport
          Viewport可以加速頁面的渲染,請使用以下代碼
          <meta name=”viewport” content=”width=device-width, initial-scale=1″>
          * 減少Dom節點
          Dom節點太多影響頁面的渲染,應盡量減少Dom節點
          * 動畫優化
          a) 盡量使用CSS3動畫
          b) 合理使用requestAnimationFrame動畫代替setTimeout
          c) 適當使用Canvas動畫 5個元素以內使用css動畫,5個以上使用Canvas動畫(iOS8可使用webGL)

          * 高頻事件優化
          Touchmove、Scroll 事件可導致多次渲染
          a) 使用requestAnimationFrame監聽幀變化,使得在正確的時間進行渲染
          b) 增加響應變化的時間間隔,減少重繪次數

          * GPU加速
          CSS中以下屬性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)來觸發GPU渲染,請合理使用(PS:過渡使用會引發手機過耗電增加)

          17.CSS動畫與Canvas動畫性能優劣分析

          a、CSS動畫更為流暢、但內存占用過高,動畫元素在5個以內更為推薦;
          b、Canvas動畫存在丟幀現象,這一現象在android中低端手機中表現更為明顯;
          c、5個以內動畫元素,選用CSS動畫,80%的設備幀頻可達80以上。
          

          18.移動端怎么自適應?

          移動自適應的話一般我用的話就是rem,通過rem單位配合媒體查詢來完成幾個屏幕的適配,以iphone6位標準,向上適配plus,向下適配5,不做過多的適配,有時候有要求的話也用js來控制rem的大小達到適配效果,rem是相對單位,相對html元素的font-size值的屬性,比如font-size:100px; 的話1rem就得100px,這樣我子需要通過改變html的font-size就可以達到適配效果

          19.如何開啟gpu加速?

          為動畫DOM元素添加CSS3樣式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);,這兩個屬性都會開啟GPU硬件加速模式,從而讓瀏覽器在渲染動畫時從CPU轉向GPU

          通過-webkit-transform:transition3d/translateZ開啟GPU硬件加速之后,有些時候可能會導致瀏覽器頻繁閃爍或抖動,可以嘗試以下辦法解決之:
          -webkit-backface-visibility:hidden;
          -webkit-perspective:1000;

          通過-webkit-transform:transition3d/translateZ開啟GPU硬件加速的適用范圍:
          使用很多大尺寸圖片(尤其是PNG24圖)進行動畫的頁面。
          頁面有很多大尺寸圖片并且進行了css縮放處理,頁面可以滾動時。
          使用background-size:cover設置大尺寸背景圖,并且頁面可以滾動時
          編寫大量DOM元素進行CSS3動畫時(transition/transform/keyframes/absTop&Left)
          使用很多PNG圖片拼接成CSS Sprite時

          20.物理1像素怎么實現

          可以使用after插入的形式將寬度設置為200%,然后通過css transfrom 的scale 縮放0.5倍;

          21.響應式布局的原理

          Meta標簽定義

          使用 viewport meta 標簽在手機瀏覽器上控制布局

          <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
          

          通過快捷方式打開時全屏顯示

          <meta name="apple-mobile-web-app-capable" content="yes" />
          

          隱藏狀態欄

          <meta name="apple-mobile-web-app-status-bar-style" content="blank" />
          iPhone會將看起來像電話號碼的數字添加電話連接,應當關閉
          <meta name="format-detection" content="telephone=no" />
          使用Media Queries適配對應樣式

          常用于布局的CSS Media Queries有以下幾種:

          設備類型(media type):

          all所有設備;
          screen 電腦顯示器;
          print打印用紙或打印預覽視圖;
          handheld便攜設備;
          tv電視機類型的設備;
          speech語意和音頻盒成器;
          braille盲人用點字法觸覺回饋設備;
          embossed盲文打印機;
          projection各種投影設備;
          tty使用固定密度字母柵格的媒介,比如電傳打字機和終端。

          設備特性(media feature):

          width瀏覽器寬度;
          height瀏覽器高度;
          device-width設備屏幕分辨率的寬度值;
          device-height設備屏幕分辨率的高度值;
          orientation瀏覽器窗口的方向縱向還是橫向,當窗口的高度值大于等于寬度時該特性值為portrait,否則為landscape;
          aspect-ratio比例值,瀏覽器的縱橫比;
          device-aspect-ratio比例值,屏幕的縱橫比。

          設置多種視圖寬度

          @media only screen and (min-width:768px)and(max-width:1024px){}
          @media only screen and (width:320px)and (width:768px){}
          

          百分比布局

          寬度不固定,可以使用百分比

          #head{width:100%;}
          #content{width:50%;}
          

          響應式圖片

          #wrap img{
            max-width:100%;
            height:auto;
          }
          

          字體設置

          一個響應式的字體應關聯它的父容器的寬度,這樣才能適應客戶端屏幕。css3引入了新的單位叫做rem,和em類似但對于Html元素,rem更方便使用。em是相對于根元素的,需重置根元素字體大小:

          html{font-size:100%;}
          

          完成后,可以定義響應式字體:

          @media (min-width:640px){body{font-size:1rem;}}
          @media (min-width:960px){body{font-size:1.2rem;}}
          @media (min-width:1200px){body{font-size:2rem;}}
          
          

          22.常見dpr

          ip6 2、ip6+ 3、nexus5 3

          23.移動端適配

          1) 自適應方式
          2) viewport方式
          3) rem方式
          4) scale()方式縮放

          24.常用meta

          IE相關

          避免IE使用兼容模式 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
          為不支持viewport的IE Mobile設定寬度 <meta name="MobileOptimized" content="320" />
          是否對手持設備友好 <meta name="HandheldFriendly" content="true" />

          UC瀏覽器

          強制豎屏 <meta name="screen-orientation" content="portrait" />
          強制全屏 <meta name="full-screen" content="yes" />
          應用模式 <meta name="browsermode" content="application" />

          X5瀏覽器

          強制豎屏 <meta name="x5-orientation" content="portrait" />
          強制全屏 <meta name="x5-fullscreen" content="yes" />
          應用模式 <meta name="x5-page-mode" content="app" />

          360

          開啟極速模式 <meta name="renderer" content="webkit" />

          iphone相關

          啟動webapp功能 刪除工具欄和菜單欄 <meta name="apple-mobile-web-app-capable" content="yes">
          控制狀態欄顏色 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
          開啟號碼或郵箱檢測 <meta name="format-detection" content="telephone=no" />
          添加主屏幕icon <link rel="apple-touch-icon" href="touch-icon-iphone.png”>

          25.html5的新api

          重力感應 DeviceOrientation
          手機加速傳感器 DeviceMotion

          history 詳細

          以Pjax方式實現SPA history.pushState history.replaceState 解決ajax不能后退前進問題
          儲存
          客戶端儲存:localStorage sessionStorage>只存在一個會話周期內
          跨域
          postMessage

          26.你們怎么嵌套h5頁面的

          一般都是我前端這邊開發好h5頁面給安卓和ios一個地址,然后告訴他們我有哪些方法,然后在做一些安卓ios的接口調用,安卓和ios會吧他們的方法提供一個接口給我,我直接調用就好,一般都是調用一些分享,跳轉之類的方法

          27.webapp你主要做的是哪個模塊,是頁面布局做的多還是交互做的多

          webapp部分基本都是我自己負責開發,頁面交互都做,因為當時剛去公司的時候公司也剛往這個方向發展,讓我也一直就負責移動業務這塊的內容

          28.bootstrap用嗎?

          用,bootstrap組要就是用一些他的樣式組件,還有最強大的就是他的刪格化系統了,做響應式的網站,我們公司的官網就是用的bootstrap做的,后臺管理系統也是,當時也是我負責給我們公司的后臺分享如何使用bootstrap的

          了更方便地控制網頁中各種各樣的字體,CSS提供了一系列的字體樣式屬性,具體如下。

          (1)font-size屬性:字號

          font-size屬性用于設置字號,該屬性的屬性值可以為像素值、百分比數值、倍率等。表3-l列舉了fomt-size屬性常用的屬性值單位,具體如下。

          單位

          說明

          em

          倍率單位,指相對于當前對象內文本的字體倍率

          px

          像素值單位,是阿頁設計中常用的單位

          %

          百分比數值單位,指相對于當前對象內文本的字體百分比

          在表1所列的常用單位中,推薦使用像素值單位—px。例如,將網頁中所有段落文本的字號設為12px,CSS樣式示例代碼如下:

          · p(font-size:12px;)

          (2)font-family屬性:字體fomt-family屬性用于設置字體。網頁中常用的字體有宋體、微軟雅黑、黑體等。例如,將網頁中所有段落文本的字體設置為微軟雅黑,CSS樣式示例代碼如下:

          p[font-family:“微軟雅黑“:]

          fomt-family屬性可以同時指定多個字體,各字體之間以逗號隔開。如果瀏覽器不支持第一種字體,則會嘗試下一種,直到匹配到合適的字體。例如,同時指定3種字體的CSS樣式示例代碼如下:

          body[font-fanily:“華文彩云”,“宋體“,“黑體";]

          當應用上述代碼后,瀏覽器會首選“華文彩云”字體,如果用戶計算機上沒有安裝該字體則選擇“宋體”。以此類推,當fomt-fammily屬性指定的字體都沒有安裝時,瀏覽器就會選擇用戶計算機默認的字體。使用font-family屬性設置字體時,需要注意以下幾點。

          · 各種字體之間必須使用英文逗號隔開。

          · 中文字體需要加英文引號,但英文字體不需要加引號。當需要設置英文字體時,英文字體名必須位于中文字體名之前。CSS樣式示例代碼如下:

          body[font-fanily:Arial,“微款雅黑”,“未體”,”黑體”:] /“正確的書寫方式"
          body(font-fanijy:“微軟稚黑”,“宋體”。“黑體”,Arial:) /“錯誤的書寫方式"/

          · 如果字體名包含空格、#、S等符號,則該字體必須加英文引號,如“font-family.“Times New Roman":"

          · 盡量使用系統欺認字體,以保證網頁中的文字在任何用戶的瀏覽器中都能正確顯示。

          (3)font-weight屬性:字體粗細

          font-weighn 屬性用于定義字體的粗細,其屬性值如表所示。

          描述

          normal

          默認屬性值,定義標準樣式的字符

          bold

          定義粗體字符

          bolder

          定義更粗的字符

          lighter

          定義更細的字符

          100~900(100的整數倍)

          定義由細到相的字符,其中400等同于normal,700等同于bold,數值越大字體越粗

          表2列舉了常用的font-weight屬性的屬性值。在實際工作中,常用的屬性值為normal和bol,分別用于定義正常和加粗顯示的字體。

          (4)font-variant屬性:變體

          font-variant 屬性用于設置英文字符的變體,一般用于定義小型大寫字體,該屬性僅對英文字符有效。font-variant 屬性的可用屬性值如下。

          · normal:默認值,測覽器會顯示標準的字體。small-caps:瀏覽器會顯示小型大寫的字體,即所有的小寫字

          母均會轉換為大寫字母。但是所有使用小型大寫字體的字母和其余文本相比,字體尺寸更小。例如,圖3-l2中框線標注的小型大寫字母,就是使用font-variant屬性設置的。

          (5)font-style屬性:字體風格

          fomt-style屬性用于定義字體風格。例如,設置斜體、傾斜或正常字體。font-style屬性的可用屬性值如下。

          · nommal:默認值,測覽器會顯示標準的字體樣式。

          · italic:測覽器會顯示斜體的字體樣式。

          · oblique:測覽器會顯示傾斜的字體樣式。

          當font-style屬性取值為italic或oblique時,文字都會顯示傾斜的樣式,兩者在顯示效果上并沒有本質區別。但italie使用了字體的傾斜屬性,并不是所有的字體都有傾斜屬性;而obhique只是使文字傾斜,無關該字體有沒有傾斜屬性。

          (6)fomt屬性:綜合設置字體樣式

          fomt屬性用于對字體樣式進行綜合設置,其基本語法格式如下:

          選擇器{font:font-style font-varlant font-weight font-size/line-height font-fanlly:}

          使用fomt屬性綜合設置字體樣式時,必須按上述語法格式中的順序書寫,各個屬性以空格隔開(line-height用于設置行間距,屬于文本外觀屬性,在后面將具體介紹)。例如,下面設置字體樣式的示例代碼:

          p{font-fanily:Arial,"宋體";font-size:30px; font-style:italic; font-weight:boid; font-variant:
          amal1-cape; line-height:40px;}

          上述代碼可以使用fomt屬性綜合設置字體樣式,其等價于:

          p{font:italic small-caps bold 30px/40px Arial,"宋體";}

          其中,不需要設置的屬性可以省略(省略的屬性將取默認值),但必須保留fomt-size和 font-family屬性,否則font 屬性將不起作用。

          下面通過一個案例具體演示如何使用fomt屬性綜合設置字體樣式,如下所示。

          <!doctype html>
          <html>
          <head>
          <meta charset.-"utf-8">
          <title>font l國性</title>
          <style type-"text/css">
          .one{ font:italic 18px/30px"隸書":}
          .two{ font:italic l8px/30px;}
          </style>
          </head>
          <body>
          <p class="one">段落1:使用font 屬性綜合設置段落文本的字體風格、字號,行高和字體。</p>
          <p class="two“>段落2:使用font屬性綜合設置段落文本的字體風格、字號和行高。由于省略了字體屬性font-family,
          這時font屬性不起作用。</p>
          </body>
          </htnl>

          定義了兩個段落,同時使用fomt屬性分別對它們進行相應的設置,效果如圖。

          從圖中可以看出,font屬性設置的樣式并沒有對第二個段落文本生效,這是因為對第二個段落文本的設置中省略了字體屬性“font-family”。

          (7)@font-face規則

          @font-face是CSS3的新增規則,用于定義服務器字體。通過@font-face規則,可以使用計算機未安裝的字體。@font-face規則定義服務器字體的基本語法格式如下:

          @font-face{
               font-family:字體名稱:
               src:字體路徑;
          }

          在上述語法格式中,font-family用于指定該服務器字體的名稱,該名稱可以隨意定義;sre用于指定該字體文件的路徑。

          下面通過一個剪紙字體的案例來演示@font-face規則的具體用法,如下所示。

          <!doctype html>
          <html>
          <head>
          <meta charset-"utf-8">
          <title>afont-face規則</title>
          <style type-"text/css">
          @font-face{
          font-fanily:jianzhi;   /*服務器字體名稱*/
          src:url(FZJZJN.TTF);   /*服務器字體文件的路徑*/
          }
          p{
          font-fanily:jianzhi;   /*設置字體樣式*/
          font-size:32px;
          }
          </style>
          </head>
          <body>
          <p>明確責任</p>
          <p>肩負使命</p>
          </body>
          </htnl>

          在例3-6中,第7~10行代碼用于定義服務器字體;第12代碼用于為段落標簽設置字體樣式。效果如圖所示。

          從圖中可以看出,當定義并設置服務器字體后,頁面就可以正常顯示剪紙字體。總結例3-6,可以得出使用服務器字體的步驟。

          ①下載字體,并存儲到相應的文件夾中。

          ②使用@font-face規則定義服務器字體。

          ③對元素應用“font-family”字體樣式。

          本的網頁結構

          網頁基本結構:

          <html>
          	<head>
                  <title>這是網頁標題</title>
                  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
                  <meta name="keywords" content="這是關鍵字"/>
                  <link href="css文件路徑" rel="stylesheet"/>
                  <link rel="shortcut icon" href="favicon.ico"/>
              </head>
              <body>
                  
              </body>
          </html>

          常見網頁標簽:

          標簽

          含義

          常用屬性

          a

          超鏈接

          href / target / title

          img

          圖片

          src / alt / title / width / heiht

          h1-h6



          p



          br



          hr



          em



          strong



          i



          span



          div



          CSS美化網頁

          css樣式使用方式

          1. 行內(內斂)樣式
          2. 內部樣式
          3. 外部樣式

          css基本選擇器

          1. ID - > #
          2. CLASS -> .
          3. 標簽 -> 標簽名

          優先級

          1. ID > CLASS > 標簽 (在同一個元素上的ID , CLASS比較)
          2. 行內 > 內部> 外部
        1. *important 最高級別
        2. 高級選擇器:

          1. 并集選擇器
          2. 交集選擇器
          3. 后代選擇器
          4. 子元素選擇器
          5. 兄弟選擇器
          6. 屬性選擇器

          前提: 非繼承屬性 > 繼承屬性(除此條件外,基本可以適應以下計算規則)

          ID

          CLASS

          標簽

          100

          10

          1

          文本樣式

          樣式

          含義

          屬性值

          字體樣式

          列表與表格

          表單

          盒子模型

          浮動

          定位


          主站蜘蛛池模板: 韩国精品福利一区二区三区 | 99精品国产一区二区三区2021 | 国产精品无码一区二区在线| 成人精品一区二区激情| 久久综合亚洲色一区二区三区 | 偷拍精品视频一区二区三区| 国产情侣一区二区| 国产精品一区二区香蕉| 国产成人无码精品一区在线观看| 精品国产一区二区三区久久蜜臀| 日本高清无卡码一区二区久久| 亚洲av片一区二区三区| 无码AV一区二区三区无码| 午夜视频久久久久一区 | asmr国产一区在线| 国产一区二区精品久久岳| 三上悠亚日韩精品一区在线 | 日韩制服国产精品一区| 国产在线一区二区三区| 国产午夜精品一区理论片飘花| 无码人妻精品一区二| 熟女大屁股白浆一区二区| 精品国产一区二区三区麻豆| 福利在线一区二区| 精品一区二区三区影院在线午夜 | 无码人妻精品一区二区三区不卡| 色多多免费视频观看区一区| 亚洲色无码一区二区三区| 亚洲成AV人片一区二区密柚| 国产一区二区三区在线观看免费 | 福利一区二区视频| 亚洲人AV永久一区二区三区久久| 精品久久国产一区二区三区香蕉 | 精品国产AⅤ一区二区三区4区| 一区二区三区免费精品视频| 亚洲av午夜福利精品一区人妖| 国产精品一区二区久久精品涩爱| 日本精品高清一区二区2021| 国产一区二区三区免费观在线| 乱子伦一区二区三区| 国产精品一区二区四区|