HTML(5)

Version one

問答

一、樣式有幾種引入方式? link 和 @import有什么區(qū)別?

  1. 嵌入式: 在Html頁面內(nèi)部定義的CSS樣式表,叫做嵌入式CSS 樣式表宦搬,也就是在HTML文檔的head部分中牙瓢,使用 style 標簽并在該標簽中定義一系列 CSS 規(guī)則。如<style type ="text/css"></style>
  2. 鏈接式:外部CSS樣式表是一個以 .css為后綴的外部文件,定義一個外部樣式表可以應用于多個頁面间校。在html頁面中使用link標簽矾克,可以將外部的css樣式表連接進來,其語法如下:
    <link rel="stylesheet" href="*.css” type="text/css">
  3. 行內(nèi)樣式:行內(nèi)樣式指的是在HTML特定的標簽中定義的CSS樣式表憔足。常用的HTML 標簽主要是BODY中的一些元素胁附,例如:<p>,<h2>四瘫,<ul>,<div>等。如:<p style="color:#ff0000; font-style: italic; ">IT部落窩</p>
  4. 導入式:導入外部樣式表指的是欲逃,在html文件中已經(jīng)建立了嵌入式樣式表找蜜,但是還要使用外部樣式表的某些設置,這時就可以在<style>里導入一個外部樣式表稳析,導入時用@import洗做。如@import url("mystyle.css");

<link rel="stylesheet" type="text/css" href="index.css">

  • link是XHTML標簽,HTML 中<link>元素指定了外部資源與當前文檔的關系. 這個元素的使用方法包括為導航定義關系框架.這個元素經(jīng)常用來鏈接css文件彰居。
  • rel: relationship
  • StyleSheet:樣式表
  • text/css:文本/css,即css文本诚纸。
  • type="text/css具體說明調(diào)用樣式的文件類型為css樣式。
  • rel屬性表示樣式表將以何種方式與HTML文檔結(jié)合陈惰。rel取值:Stylesheet,表示指定一個外部的樣式表畦徘。*.css是單獨保存的樣式表文件√Т常總的意思就是調(diào)用一個外部的css樣式文件井辆,它是通過<link />這個標簽來調(diào)用的。href="index.css"表示外部樣式的路徑溶握。

@import url(index.css)

  • @import是CSS@規(guī)則杯缺,用于加載外部外部層疊樣式表。@import規(guī)則必須放在其他除了@charset規(guī)則以外的CSS規(guī)則的前面睡榆;@import規(guī)則不可嵌套于條件規(guī)則組中萍肆。
    @import可在URI后面附帶媒體查詢;每條媒體查詢間用逗號分隔胀屿。若沒有媒體查詢塘揣,則該導入是無條件的,相當于指定媒體為all宿崭。

link 和 @import

  • @import url()機制是不同于link的勿负,link是在加載頁面前把css加載完畢,而@import url()則是讀取完文件后再加載,所以在請求文件較大或者網(wǎng)速較慢時@import url()會出現(xiàn)一開始沒有css樣式奴愉,閃爍一下出現(xiàn)樣式后的頁面(網(wǎng)速慢的情況下)琅摩。
  • @import 是css2里面的,所以古老的ie5不支持锭硼。
  • 當使用javascript控制dom去改變樣式的時候房资,只能使用link標簽,因為@import不是dom可以控制的檀头。
  • link除了能加載css外還能定義RSS轰异,定義rel連接屬性,@import只能加載css暑始。
  • @import url(xxx.css);有最大次數(shù)的限制搭独,經(jīng)測試IE6的最大次數(shù)是31次,第32個import及以后的都不能生效廊镜。
  • 總結(jié):使用link標簽比較好牙肝,另:新浪等網(wǎng)站的首頁或欄目首頁代碼,他們總會把css或js直接寫在html里嗤朴,而不用外部文件配椭。
    MDN
    css語法格式0
    四種css樣式表的引入方式
    關于css @import url()總結(jié)寫得比較好

二、文件路徑../main.css 雹姊、./main.css股缸、main.css、/main.css有什么區(qū)別吱雏?

  • main.css:相對于html文件來說敦姻,main.css文件在和其同一目錄。
  • ./main.css:當前目錄的main.css
  • ../main.css:相對遇html文件來說歧杏,main.css文件在上級目錄里替劈。
  • /main.css 是相對虛擬目錄,"/"代表的是虛擬目錄的根目錄

參考

三得滤、console.log是做什么用的

向web控制臺輸出一條消息陨献,常用來插入代碼段里進行測試。

四懂更、text-align有幾個值眨业,分別有什么用?

描述
left 把文本排列到左邊沮协。默認值:由瀏覽器決定龄捡。
right 把文本排列到右邊。
justify 把文本排列到中間慷暂。
inherit 實現(xiàn)兩端對齊文本效果聘殖。
inherit 規(guī)定應該從父元素繼承 text-align 屬性的值晨雳。

text-align:justify對于強制換行的一行及最后一行(包括僅有一行的情況)不作處理。有時為了實現(xiàn)兩端對齊奸腺,文字之間的間距會變大餐禁,不好看,這時可用letter-space調(diào)整間距突照。


1_1478059634680_2.png

0_1478059634679_1.png

五帮非、px、em讹蘑、rem分別是什么末盔?有什么區(qū)別?如何使用座慰?

  • px: 像素陨舱,給定文字大小
  • em:相對于父元素來改變,如2em 表示字體大小為父元素的字體大小的2倍版仔。如果一個元素的父元素沒有指定大小游盲,則會不斷地向上尋找規(guī)定了大小的父元素,甚至可以找到根元素去邦尊。
  • rem: r是root的縮寫背桐,所以這個表示依據(jù)根元素优烧,即<html>的大小來調(diào)整字體大小蝉揍。
    rem可以用在寫響應式的頁面中,因為調(diào)整了根元素的字體大小畦娄,整個頁面的字體大小也可以同步改變又沾。
  • 以下這兩個表達的意思相同,結(jié)果都是根元素html默認值的3倍熙卡。p標簽的直接父元素沒有直接控制字體大小杖刷,于是會在往上找,知道找到一個控制大小的元素為止驳癌。如果沒有滑燃,則以根元素html的字體大小為基準。


    0_1478059715524_3.png

    0_1478059732065_4.png

    0_1478059746348_5.png

六對chrome 審查元素的功能做個簡單的截圖介紹

  • 0_1478059796703_6.png

    直接修改颓鲜,來測試邊界條件表窘,如輸入很多個字。

  • 右邊可以調(diào)試顏色甜滨,寫頁面時在這里調(diào)試好乐严,然后復制到css- console:調(diào)試js這里可以看到全局變量,js都在全局中央域里面衣摩“貉椋可以添加alert(1)和console.log(變量) 這個只能在控制臺上看到。也可以點sources,里面囊括了所有的html.css.js〖惹伲可以加多個斷點后刷新網(wǎng)頁進行調(diào)試js占婉。 - network:調(diào)試ajax接口有用


    0_1478059807447_7.png

    Priview:預覽
    Response:響應
    timing:時序

  • 原版的resouces在現(xiàn)在的application里面


    0_1478059815365_8.png

代碼

js BIN

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市呛梆,隨后出現(xiàn)的幾起案子锐涯,更是在濱河造成了極大的恐慌,老刑警劉巖填物,帶你破解...
    沈念sama閱讀 218,122評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件纹腌,死亡現(xiàn)場離奇詭異,居然都是意外死亡滞磺,警方通過查閱死者的電腦和手機升薯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,070評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來击困,“玉大人涎劈,你說我怎么就攤上這事≡牟瑁” “怎么了蛛枚?”我有些...
    開封第一講書人閱讀 164,491評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長脸哀。 經(jīng)常有香客問我蹦浦,道長,這世上最難降的妖魔是什么撞蜂? 我笑而不...
    開封第一講書人閱讀 58,636評論 1 293
  • 正文 為了忘掉前任盲镶,我火速辦了婚禮,結(jié)果婚禮上蝌诡,老公的妹妹穿的比我還像新娘溉贿。我一直安慰自己,他們只是感情好浦旱,可當我...
    茶點故事閱讀 67,676評論 6 392
  • 文/花漫 我一把揭開白布宇色。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上秽梅,一...
    開封第一講書人閱讀 51,541評論 1 305
  • 那天,我揣著相機與錄音植影,去河邊找鬼。 笑死涎永,一個胖子當著我的面吹牛思币,可吹牛的內(nèi)容都是我干的鹿响。 我是一名探鬼主播,決...
    沈念sama閱讀 40,292評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼谷饿,長吁一口氣:“原來是場噩夢啊……” “哼惶我!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起博投,我...
    開封第一講書人閱讀 39,211評論 0 276
  • 序言:老撾萬榮一對情侶失蹤绸贡,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后毅哗,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體听怕,經(jīng)...
    沈念sama閱讀 45,655評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,846評論 3 336
  • 正文 我和宋清朗相戀三年虑绵,在試婚紗的時候發(fā)現(xiàn)自己被綠了尿瞭。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,965評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡翅睛,死狀恐怖声搁,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情捕发,我是刑警寧澤疏旨,帶...
    沈念sama閱讀 35,684評論 5 347
  • 正文 年R本政府宣布,位于F島的核電站扎酷,受9級特大地震影響檐涝,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜霞玄,卻給世界環(huán)境...
    茶點故事閱讀 41,295評論 3 329
  • 文/蒙蒙 一骤铃、第九天 我趴在偏房一處隱蔽的房頂上張望拉岁。 院中可真熱鬧坷剧,春花似錦、人聲如沸喊暖。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,894評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽陵叽。三九已至狞尔,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間巩掺,已是汗流浹背偏序。 一陣腳步聲響...
    開封第一講書人閱讀 33,012評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留胖替,地道東北人研儒。 一個月前我還...
    沈念sama閱讀 48,126評論 3 370
  • 正文 我出身青樓豫缨,卻偏偏與公主長得像,于是被迫代替她去往敵國和親端朵。 傳聞我的和親對象是個殘疾皇子好芭,可洞房花燭夜當晚...
    茶點故事閱讀 44,914評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,753評論 1 92
  • 1.計算機中的文件 二進制文件 文本文件區(qū)別:使用windows記事本打開是否出現(xiàn)亂碼 2.網(wǎng)頁組成 超文本標記語...
    一只寫程序的猿閱讀 3,593評論 1 10
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理冲呢,服務發(fā)現(xiàn)舍败,斷路器,智...
    卡卡羅2017閱讀 134,657評論 18 139
  • 曰右敬拓、端邻薯、滯。 右乘凸,右手邊也弛说,成功的二次測試后也。 端翰意,區(qū)間兩端也木人。滯,走勢緩滯也冀偶。 又醒第,開前多考慮,開時勿猶豫进鸠。...
    天生斯人1970閱讀 170評論 0 0
  • 已經(jīng)很久沒有晚上寫東西的感覺了客年,完全靜不下心霞幅,或許電腦的誘惑,也有可能一星半點的懶惰量瓜。簡言之司恳,在作死。 有人曾私信...
    不見竹馬見流年閱讀 326評論 0 0