2018-11-16

HTML:

? HTML(Hypertext Markup Language)超文本標(biāo)記語言霞赫。? 它負(fù)責(zé)網(wǎng)頁的三個(gè)要素之中的結(jié)構(gòu)。? HTML使用標(biāo)簽的的形式來標(biāo)識網(wǎng)頁中的不同組成部分肥矢。? 所謂超文本指的是超鏈接端衰,使用超鏈接可以讓我們從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面叠洗。

元素

? 我們還將一個(gè)完整的標(biāo)簽稱為元素,這里我們可以將元素和標(biāo)簽認(rèn)為是一個(gè)同義詞。

<h1>一級標(biāo)題</h1>

上邊的h1我們就稱為元素

<p>我是一個(gè)<em>段落</em></p>

p也是一個(gè)元素旅东,em是p的子元素灭抑,p是

em的父元素。

屬性

? 可以為HTML標(biāo)簽設(shè)置屬性抵代。

? 通過屬性為HTML元素提供附加信息腾节。

? 屬性需要設(shè)置在開始標(biāo)簽或自結(jié)束標(biāo)簽中。

? 屬性總是以名稱/值對的形式出現(xiàn)荤牍。

? 比如:name=“value”

? 有些屬性可以是任意值案腺,有些則必須是指定值。

<h1 title="我是一個(gè)標(biāo)題">標(biāo)題</h1>

<img src="" alt="" />

常見屬性

? id

– id屬性作為標(biāo)簽的唯一標(biāo)識康吵,在同一個(gè)網(wǎng)頁中不能出現(xiàn)相同的id屬性值劈榨。

? class

– class屬性用來為標(biāo)簽分組,擁有相同class屬性的標(biāo)簽我們認(rèn)為就是一組涎才,可以出現(xiàn)相同的class屬

性鞋既,可以為一個(gè)元素指定多個(gè)class。

? title

– title屬性用來指定標(biāo)簽的標(biāo)題耍铜,指定title以后邑闺,鼠標(biāo)移入到元素上方時(shí),會(huì)出現(xiàn)提示文字棕兼。

meta的用法

? 設(shè)置頁面的字符集

– <meta charset="utf-8">

? 設(shè)置網(wǎng)頁的描述

– <meta name="description" content="">

? 設(shè)置網(wǎng)頁的關(guān)鍵字

– <meta name="keywords" content="">

? 請求的重定向

– <meta http-equiv="refresh" content="5;url=地址"/>

<html>

? 作用:

– <html>標(biāo)簽用于告訴瀏覽器這個(gè)文檔中包含的信息是用HTML編寫的陡舅。

? 用法:

– 所有的網(wǎng)頁的內(nèi)容都需要編寫到html標(biāo)簽中,一個(gè)頁面中html標(biāo)簽只能有一個(gè)伴挚。

– html標(biāo)簽中有兩個(gè)子標(biāo)簽head和body 靶衍。

<head>

? 作用:

– <head>標(biāo)簽用來表示網(wǎng)頁的元數(shù)據(jù),head中包含了瀏覽器和搜索引擎使用的其他不可見信

息茎芋。

? 用法:

– head標(biāo)簽作為html標(biāo)簽的子元素的出現(xiàn)颅眶,一個(gè)網(wǎng)頁中只能有一個(gè)head。

<title>

? 作用:

– <title>標(biāo)簽表示網(wǎng)頁的標(biāo)題田弥,一般會(huì)在網(wǎng)頁的標(biāo)

題欄上顯示涛酗。

– title標(biāo)簽中的文字,是頁面優(yōu)化的最重要因素偷厦。在搜索引擎的搜索時(shí)最先看到的商叹、最醒目的內(nèi)容。

? 用法:

– 建議將title標(biāo)簽緊貼著head標(biāo)簽編寫只泼,這樣搜索引擎可以快速檢索到標(biāo)題標(biāo)簽剖笙。– 網(wǎng)站中的多個(gè)頁面的title也不應(yīng)該重復(fù),這樣不利于搜索隱藏檢索请唱。

<body>

? 作用:

– <body>標(biāo)簽用來設(shè)置網(wǎng)頁的主體弥咪,所有在頁面中能看到的內(nèi)容都應(yīng)該編寫到body標(biāo)簽中过蹂。

? 用法:

– body標(biāo)簽作為html的子標(biāo)簽使用。

<h1>~<h6>

? 作用:

– h1~h6都是網(wǎng)頁中的標(biāo)題標(biāo)簽酪夷,用來表示網(wǎng)頁中的一個(gè)標(biāo)題榴啸,不同的是,從h1~h6重要性越來越低晚岭。

– 標(biāo)題標(biāo)簽相當(dāng)于正文的標(biāo)題鸥印,通常認(rèn)為重要性僅次于頁面的title。

– 一般標(biāo)題標(biāo)簽我們只會(huì)使用到h3坦报,h3以后的標(biāo)題標(biāo)簽對于搜索引擎就沒有什么意義了库说。

– 一個(gè)頁面中只會(huì)使用一個(gè)h1標(biāo)簽。

<p>

? 作用:

– <p>標(biāo)簽表示網(wǎng)頁中的一個(gè)段落片择。

– 一般瀏覽器會(huì)在段落的前和后各加上一個(gè)換行潜的,也就是段落會(huì)在頁面中自成一行。

<br />

? 作用

– <br />標(biāo)簽表示一個(gè)換行標(biāo)簽字管,使用br標(biāo)簽可以使br標(biāo)簽后的內(nèi)容另起一行啰挪。

<hr />

? 作用:

– <hr />標(biāo)簽是水平線標(biāo)簽,使用hr標(biāo)簽可以在頁面中打印一條水平線嘲叔,水平線可以將頁面分

成上下兩個(gè)部分亡呵。

<img />

? 作用:

– < img />標(biāo)簽是圖片標(biāo)簽,可以用來向頁面中引入一張外部的圖片硫戈。

? 屬性:

– src

? 指向一個(gè)外部的圖片的路徑锰什。

– alt

? 圖片的描述

<a>

? 作用:

– <a>標(biāo)簽是超鏈接標(biāo)簽,通過a標(biāo)簽丁逝,可以快

速跳轉(zhuǎn)到其他頁面汁胆。

? 屬性:

– href

? 指向一個(gè)鏈接地址

– target

? 設(shè)置打開目標(biāo)頁面的位置,可選值:_blank新窗口霜幼、_self當(dāng)前窗口嫩码。

實(shí)體(轉(zhuǎn)義字符)

HTML這么厲害,但是多寫幾個(gè)空格就不行了呢罪既!

CSS

? 層疊樣式表 (Cascading Style Sheets)

? css可以用來為網(wǎng)頁創(chuàng)建樣式表铸题,通過樣式表可以對網(wǎng)頁進(jìn)行裝飾。

? 所謂層疊萝衩,可以將整個(gè)網(wǎng)頁想象成是一層一層的結(jié)構(gòu),層次高的將會(huì)覆蓋層次低的没咙。

? 而css就可以分別為網(wǎng)頁的各個(gè)層次設(shè)置樣

式猩谊。

基本語法

? CSS的樣式表由一個(gè)一個(gè)的樣式構(gòu)成,一個(gè)樣式又由選擇器和聲明塊構(gòu)成祭刚。

? 語法:

– 選擇器 {樣式名:樣式值牌捷;樣式名:樣式值 ; }

– p {color:red ; font-size:12px;}

行內(nèi)樣式

? 可以直接將樣式寫到標(biāo)簽內(nèi)部的style屬性中墙牌,這種樣式不用填寫選擇器,直接編寫聲明即可暗甥。

? 這種方式編寫簡單喜滨,定位準(zhǔn)確。但是由于直接將css代碼寫到了html標(biāo)簽的內(nèi)部撤防,導(dǎo)致結(jié)構(gòu)與表現(xiàn)耦合虽风,同時(shí)導(dǎo)致樣式不能夠復(fù)用,所以這種方式我們不使用寄月。

<p style="color: red;font-size: 30px"></p>

內(nèi)部樣式表

? 可以直接將樣式寫到<style>標(biāo)簽中辜膝。

? 這樣使css獨(dú)立于html代碼,而且可以同時(shí)為多個(gè)元素設(shè)置樣式漾肮,這是我們使用的比較多的一種方式厂抖。

? 但是這種方式,樣式只能在一個(gè)頁面中使用克懊,不能在多個(gè)頁面中重復(fù)使用忱辅。

<style>

p{color:red; font-size: 30px;}

</style>

外部樣式表

? 可以將所有的樣式保存到一個(gè)外部的css文件中,然后通過<link>標(biāo)簽將樣式表引入到文件中谭溉。

? 這種方式將樣式表放入到了頁面的外部墙懂,可以在多個(gè)頁面中引入,同時(shí)瀏覽器加載文件時(shí)可以使用緩存夜只,這是我們開發(fā)中使用的最多的方式垒在。

<link rel="stylesheet" type="text/css"

href="style.css">

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市扔亥,隨后出現(xiàn)的幾起案子场躯,更是在濱河造成了極大的恐慌,老刑警劉巖旅挤,帶你破解...
    沈念sama閱讀 206,968評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件踢关,死亡現(xiàn)場離奇詭異,居然都是意外死亡粘茄,警方通過查閱死者的電腦和手機(jī)签舞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來柒瓣,“玉大人儒搭,你說我怎么就攤上這事≤狡叮” “怎么了搂鲫?”我有些...
    開封第一講書人閱讀 153,220評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長磺平。 經(jīng)常有香客問我魂仍,道長拐辽,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,416評論 1 279
  • 正文 為了忘掉前任擦酌,我火速辦了婚禮俱诸,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘赊舶。我一直安慰自己睁搭,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,425評論 5 374
  • 文/花漫 我一把揭開白布锯岖。 她就那樣靜靜地躺著介袜,像睡著了一般。 火紅的嫁衣襯著肌膚如雪出吹。 梳的紋絲不亂的頭發(fā)上遇伞,一...
    開封第一講書人閱讀 49,144評論 1 285
  • 那天,我揣著相機(jī)與錄音捶牢,去河邊找鬼鸠珠。 笑死,一個(gè)胖子當(dāng)著我的面吹牛秋麸,可吹牛的內(nèi)容都是我干的渐排。 我是一名探鬼主播,決...
    沈念sama閱讀 38,432評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼灸蟆,長吁一口氣:“原來是場噩夢啊……” “哼驯耻!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起炒考,我...
    開封第一講書人閱讀 37,088評論 0 261
  • 序言:老撾萬榮一對情侶失蹤可缚,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后斋枢,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體帘靡,經(jīng)...
    沈念sama閱讀 43,586評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,028評論 2 325
  • 正文 我和宋清朗相戀三年瓤帚,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了描姚。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,137評論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡戈次,死狀恐怖轩勘,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情怯邪,我是刑警寧澤绊寻,帶...
    沈念sama閱讀 33,783評論 4 324
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響榛斯,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜搂捧,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,343評論 3 307
  • 文/蒙蒙 一驮俗、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧允跑,春花似錦王凑、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至弱睦,卻和暖如春百姓,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背况木。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1 262
  • 我被黑心中介騙來泰國打工垒拢, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人火惊。 一個(gè)月前我還...
    沈念sama閱讀 45,595評論 2 355
  • 正文 我出身青樓求类,卻偏偏與公主長得像,于是被迫代替她去往敵國和親屹耐。 傳聞我的和親對象是個(gè)殘疾皇子尸疆,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,901評論 2 345

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,728評論 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5惶岭? 答:HTML5是最新的HTML標(biāo)準(zhǔn)寿弱。 注意:講述HT...
    kismetajun閱讀 27,424評論 1 45
  • 學(xué)會(huì)使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握CSS三種顯示...
    七彩小鹿閱讀 6,306評論 2 66
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的,因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體俗他。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 3,828評論 0 0
  • 一 - 文件相關(guān) Ctrl + N => 查找類 Ctrl + Shift + N => 查找文件 Ctrl + ...
    iEpacJ閱讀 578評論 0 0