Html/CSS02(基本標(biāo)簽,Css選擇器痛单,盒子模型)

今天是2018年7月10日

1.標(biāo)簽

1.1<h1>-<h6>標(biāo)簽

使用<h1>~<h5>標(biāo)簽設(shè)置標(biāo)題嘿棘,按升序標(biāo)題從大到小。

1.2<p>

<p>是段落標(biāo)簽

1.3<img>

img標(biāo)簽用于插入圖片桦他,它有兩個(gè)屬性作用如下
//src:將要插入的圖片路徑
//alt:當(dāng)圖片無法顯示時(shí)蔫巩,替代顯示的文本內(nèi)容
<img src="xxx" alt="xxx">

1.4<input>

通過設(shè)置input標(biāo)簽的type屬性可以用input標(biāo)簽生產(chǎn)文本框,按鈕快压,提交/重置等按鈕。
input標(biāo)簽的type屬性

1.5<button>

button標(biāo)簽用于生成按鈕垃瞧,等效于
<input type="button">

1.6<a>

a標(biāo)簽用于生成超鏈接蔫劣,如下
<a href="url....">value</a>

1.7<div>

div標(biāo)簽可以把HTML中的元素分成塊級(jí)別的元素

1.8<ul>

ul-li用于生成無序列表,修改CSS樣式可以生成有序列表个从。

2.選擇器

2.1元素選擇器

元素選擇器以頁(yè)面元素(標(biāo)簽)為單位進(jìn)行CSS樣式的設(shè)置脉幢,其弊端在于一旦對(duì)某種頁(yè)面元素進(jìn)行了設(shè)置,所有的相同頁(yè)面元素樣式都會(huì)改變嗦锐,因此要慎用嫌松。
<style>
   div{
          ...
        }
</style>

<body>
     <div>...</div>
</body>

2.2類名選擇器

類名選擇器是依據(jù)元素的Class屬性來對(duì)元素進(jìn)行Css樣式設(shè)置的,一個(gè)元素可以使用多個(gè)Class樣式奕污。
<style>
      .class1{
          ...
}
      .class2{
          ...
}
</style>

<body>
      <div class="class1 class2">//可以使用多個(gè)類樣式
            ...
      </div>
</body>

2.3ID選擇器

ID選擇器跟類選擇器類似萎羔,其依據(jù)是元素的ID屬性,但因?yàn)樵氐腎D屬性都是唯一的碳默,因此ID樣式也不能重復(fù)使用贾陷,故慎用
<style>
   #xxx{
          ...
        }
</style>

<body>
     <div id="xxx">...</div>
</body>

2.4偽類選擇器

偽類選擇器用來對(duì)某些元素添加特殊的效果,語法相對(duì)靈活缘眶。
<style>
      a:hover{
          ...
      }
</style>

<body>
      <a></a>
</body>

3.盒子模型

盒子模型可以明確網(wǎng)頁(yè)中元素的定并方便開發(fā)者進(jìn)行排版
盒子模型圖示
常用的屬性如下,通過他們我們可以方便的進(jìn)行網(wǎng)頁(yè)的布局髓废。
  • margin

  • border

  • padding

利用網(wǎng)頁(yè)F12調(diào)試工具調(diào)試布局
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末巷懈,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子慌洪,更是在濱河造成了極大的恐慌顶燕,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,126評(píng)論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件冈爹,死亡現(xiàn)場(chǎng)離奇詭異割岛,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)犯助,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,421評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門癣漆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人剂买,你說我怎么就攤上這事惠爽。” “怎么了瞬哼?”我有些...
    開封第一講書人閱讀 169,941評(píng)論 0 366
  • 文/不壞的土叔 我叫張陵婚肆,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我坐慰,道長(zhǎng)较性,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,294評(píng)論 1 300
  • 正文 為了忘掉前任结胀,我火速辦了婚禮赞咙,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘糟港。我一直安慰自己攀操,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,295評(píng)論 6 398
  • 文/花漫 我一把揭開白布秸抚。 她就那樣靜靜地躺著速和,像睡著了一般。 火紅的嫁衣襯著肌膚如雪剥汤。 梳的紋絲不亂的頭發(fā)上颠放,一...
    開封第一講書人閱讀 52,874評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音吭敢,去河邊找鬼碰凶。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的痒留。 我是一名探鬼主播谴麦,決...
    沈念sama閱讀 41,285評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼伸头!你這毒婦竟也來了匾效?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,249評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤恤磷,失蹤者是張志新(化名)和其女友劉穎面哼,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體扫步,經(jīng)...
    沈念sama閱讀 46,760評(píng)論 1 321
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡魔策,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,840評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了河胎。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片闯袒。...
    茶點(diǎn)故事閱讀 40,973評(píng)論 1 354
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖游岳,靈堂內(nèi)的尸體忽然破棺而出政敢,到底是詐尸還是另有隱情,我是刑警寧澤胚迫,帶...
    沈念sama閱讀 36,631評(píng)論 5 351
  • 正文 年R本政府宣布喷户,位于F島的核電站,受9級(jí)特大地震影響访锻,放射性物質(zhì)發(fā)生泄漏褪尝。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,315評(píng)論 3 336
  • 文/蒙蒙 一期犬、第九天 我趴在偏房一處隱蔽的房頂上張望河哑。 院中可真熱鬧,春花似錦哭懈、人聲如沸灾馒。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,797評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至轨功,卻和暖如春旭斥,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背古涧。 一陣腳步聲響...
    開封第一講書人閱讀 33,926評(píng)論 1 275
  • 我被黑心中介騙來泰國(guó)打工垂券, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,431評(píng)論 3 379
  • 正文 我出身青樓菇爪,卻偏偏與公主長(zhǎng)得像算芯,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子凳宙,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,982評(píng)論 2 361

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

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理熙揍,服務(wù)發(fā)現(xiàn),斷路器氏涩,智...
    卡卡羅2017閱讀 134,720評(píng)論 18 139
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5届囚? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 27,528評(píng)論 1 45
  • 學(xué)會(huì)使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握CSS三種顯示...
    七彩小鹿閱讀 6,319評(píng)論 2 66
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁(yè)的形式展示給用戶的是尖,因此網(wǎng)頁(yè)是網(wǎng)絡(luò)信息傳遞的載體意系。網(wǎng)頁(yè)文件是用...
    阿啊阿吖丁閱讀 3,911評(píng)論 0 0
  • 枚舉 rawValue indirect
    娘親Joanna閱讀 456評(píng)論 0 0