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">