新手入門記得筆記的可能不如某些大神的意 請勿噴 各自有各自的學(xué)習(xí)習(xí)慣 能進步就??
--原iOS程序猿一枚 坐標(biāo)北京 如有誤人子弟之處 敬請各位大神指點
網(wǎng)頁的組成
一個具有功能的完整網(wǎng)頁,一般由三個部分組成
- 1□HTML
?網(wǎng)頁的具體內(nèi)容和結(jié)構(gòu)
- 2□CSS
?網(wǎng)頁的樣式(美化網(wǎng)頁最重要的一項)
- 3□JavaScript
?網(wǎng)頁的交互效果,比如對用戶的鼠標(biāo)事件做出相應(yīng)
HTML全稱是HyperText Markup Language 超文本標(biāo)記語言
注 : HTML5中新增了27個標(biāo)簽元素,廢棄了16個標(biāo)簽元素,主要包括:結(jié)構(gòu)性標(biāo)簽,集塊性標(biāo)簽,行內(nèi)語義性標(biāo)簽,交互性標(biāo)簽
一個基礎(chǔ)的網(wǎng)頁結(jié)構(gòu)
<!DOCTYPE html> DTD聲明 ! 不要忘 H5版本的聲明 不屬于標(biāo)簽`
<html lang="en"> 本網(wǎng)頁是否自動轉(zhuǎn)換英文
<head>
<meta charset="UTF-8"> 編碼格式
<title>這是標(biāo)題標(biāo)簽</title>
</head>
<body>
<div>常用標(biāo)簽</div> 空白標(biāo)簽
<h1>我是最大的</h1> h1 ~ h6 h1最大
</body>
</html> 是根標(biāo)簽
- 具體各種標(biāo)簽的功能請去http://www.w3school.com.cn網(wǎng)站 各種姿勢的標(biāo)簽都有,標(biāo)簽的那就這樣吧,某些標(biāo)簽的大小值是由百分比與PX像素值組成恩溅。
CSS
CSS的全稱是Cascading Style Sheets , 層疊樣式表,它是用來控制HTML標(biāo)簽的樣式,在美化網(wǎng)頁中起到非常重要的作用饵撑。
CSS的編寫格式是鍵值對形式. 冒號左邊是屬性名,冒號右邊是屬性值样傍。
CSS的三種樣式
- 1.行內(nèi)樣式:(內(nèi)聯(lián)樣式)直接在標(biāo)簽的style屬性中書寫 璃赡。
例: <body style = "background-color:red;font-size:25px;border: 5px solid red">
注: 邊框?qū)傩阅J三個值,一個是寬度,樣式(虛線,實線,顏色)陨享。
- 2.頁內(nèi)樣式:在本網(wǎng)頁的style標(biāo)簽中書寫
<style>
body{
color:red;
}
</style>
注: style標(biāo)簽寫在<head>里面拿到需要修改的標(biāo)簽名的.
- 3.外部樣式:在單獨的CSS文件中書寫,然后在網(wǎng)頁中使用link標(biāo)簽引用
<link rel = "stylesheet" href = "index.css">
//stylesheet是層疊樣式表的意思,index是文件名.也是需要寫在<head>里面
樣式的規(guī)律:CSS遵循就近原則,疊加原則.(那個樣式離內(nèi)容近用那個,如果你有,我就用你的.你沒有我在選擇別的)
CSS兩大重點
CSS常用選擇器
標(biāo)簽選擇器 :根據(jù)標(biāo)簽名找到標(biāo)簽
類選擇器 :可以給多個使用 class = "test1" 設(shè)置標(biāo)簽時.test{ font-size:20 }
ID選擇器 :獨一無二的, id= "main" 設(shè)置標(biāo)簽時#maim{ font-size:20 }
并列選擇器 : '或 ' div ,.height{ font-size:20 }用于多個標(biāo)簽設(shè)置相同的內(nèi)容
符合選擇器 : '與' div.height { font-size:20 }用于精準(zhǔn)定位標(biāo)簽
后代選擇器 : div p { font-size:20 }用于選擇父類中的子類
直接后代選擇器:div > p { font-size:20 } 只管自己里面的子類標(biāo)簽
CSS:遵循:
1.相同級別的選擇器遵循:a > 就近原則 b > 疊加原則
2.相同級別的選擇器遵循: ID選擇器 > 類選擇器 > 標(biāo)簽選擇器
選擇器的針對性越強,他的優(yōu)先級就越高
HTML標(biāo)簽類型
塊級標(biāo)簽
1.能夠獨占一行的標(biāo)簽 2.能隨時隨地設(shè)置寬度和高度(比如div,p,,h1)
行內(nèi)標(biāo)簽
1.多個行內(nèi)標(biāo)簽?zāi)軌蛲瑫r現(xiàn)在一行 2,寬度和高度取決于內(nèi)容比如(span ,a,label)
行內(nèi)-塊級標(biāo)簽
1.多個行內(nèi)-塊級可以顯示在一行 2,能夠隨時設(shè)置寬高(比如input,button)
修改標(biāo)簽顯示類型 --->通過display修改屬性
none :隱藏
block:讓標(biāo)簽變?yōu)閴K級標(biāo)簽
inline:讓塊級標(biāo)簽變?yōu)樾袃?nèi)標(biāo)簽
inline-block:讓行內(nèi)標(biāo)簽變?yōu)樾袃?nèi)塊級標(biāo)簽
CSS的屬性
根據(jù)繼承性分為兩大類
可繼承屬性 :父標(biāo)簽的屬性值會傳遞給子標(biāo)簽, 一般是文字控制屬性
不可繼承屬性:父標(biāo)簽的屬性值不能傳遞給子標(biāo)簽,一般是區(qū)塊控制屬性
CSS中的偽類 當(dāng)你去觸發(fā)某個操作的時候它才會去改變一些樣式
###第一天的學(xué)習(xí)結(jié)束-.- ,
