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