菜鳥前端日記1（HTML+CSS ）
HTML+CSS
HTML
HTML超文字標記語言（Hyper Text Markup Language），是一種用於描述網頁文件的準標記語言。
副檔名用.html和.htm都可以，但index.html和index.htm是不同的兩個檔案。
HTML是一個個成對的標籤組成的，標籤對中的第一個標籤是開始標籤，第二個是結束標籤。
HTML標籤是由尖括號包圍的關鍵詞 。
少量的標籤單個出現。（沒有結束標籤）
如：
<img/><input/></br><meta>標籤之間是可以相互巢狀的。
HTML的版本
現在有用到的是HTML4.01和HTML5
文件宣告：
HTML4.01：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML5：<!DOCTYPE html><!DOCTYPE> 宣告必須是 HTML 文件的第一行，位於 <html> 標籤之前。
HTML標籤
<html>
<head> <titile> <meta>(設定網頁關鍵字，設定編碼，設定網站內容，有利於seo)
<link> <script 表單標籤
<form action method>
<input type=’text 標籤的分類
- 塊級標籤：也叫塊元素
獨佔一行。可設定寬高，行高以及頂和底邊距。不設定寬的情況下， 是它本身父級的100%。
- 內聯標籤：也叫行內元素
和其它元素在一行上，不能設定寬高，行高及頂部距離。寬度就是它包含的 文字或圖片的寬度，不可改變
- 內聯塊標籤：也叫內聯塊元素
–同時具備內聯元素和塊元素的特點。和其它元素在一行，元素的高寬、行高及頂和底邊距都可以設定。
標籤的分類
- 塊元素:
<div>、<p>、<table>、<ul>、<li>、<ol>、h1-h6- 行內元素：
<a><span><em><i><strong><b>- 行內塊級元素：
<img>、<input>標籤型別的轉換
轉換成塊標籤：
display:block;
轉換成行內標籤：
display:inline;
轉換成內聯塊標籤：
display:inline-blockdiv和table佈局的區別
- 用div佈局html渲染時，是載入一行渲染一行。
- 用table佈局html渲染時，是等表格結構及資料都載入完成之後，才渲染出來，現在主要用於資料展示類的佈局。
CSS
CSS:層疊樣式表，Cascading Style Sheets的縮寫，我們常說的css樣式就是樣式表簡稱。它的主要功能是美化網頁。
副檔名為.css。
功能：美化網頁統一站風格。
分類及引入方式：
1､內部樣式：在head標籤裡<style></style>時
2､行內樣式：寫在html的標籤行裡。
3､外鏈樣式：寫在以.css為副檔名的檔案裡，
通過link標籤引用：
<link type=“text/css” rel=“stylesheet” href=“css的url路徑”/>
通過@import標籤引用：
@import url(css檔案的路徑名)
不推薦使用它，網路慢時樣式載入不進來。優先順序：行內樣式>內部樣式=外鏈樣式
結構、表現、行為分離：
html是網頁的結構，css是網頁的表現，javascript是網頁的行為。
css程式碼解析:
選擇器{屬性:屬性值;}
----宣告（屬性:屬性值;）
css選擇器
Id選擇器 #
一個id名字在一個頁面中只能用一次
Class選擇器 .
一個名字頁面中可以出現多次
標籤選擇器
標籤名tag div span img ul li ….
通配 *
子類選擇器
以空格隔開 div ul li
組選擇器
以逗號隔開 div,ul,li
偽類選擇器
:link :visited :hover :active
選擇器優先順序：id>class>tag>*
樣式
背景：
背景顏色 background-color
背景圖片 background-image
背景圖片是否平鋪 background-repeat
背景圖片定位 background-position
背景圖片固定 backgroundd-attachment
文字 ：
文字縮排 text-indent
文字對齊：text-align
文字修飾線 text-decoraction
字型：
字型：font-family
字型大小 font-size
字型粗細 font-weight
字型傾斜 font-style
a連結 :
a:link - 未被訪問的連結
a:visited - 已訪問的連結
a:hover - 滑鼠指標經過連結的上方 所有標籤都能用
a:active - 滑鼠按下去時的連結
列表：
列表圖片 list-style-image
列表點的樣式 list-style-type
css屬性推薦書寫順序
選擇器名稱｛
位置/顯示隱藏；
大小；
文字系列；
背景/邊框；
其它(動畫類)
｝
盒子模型
padding 內邊距
邊框到內容的距離
margin 外邊距
一個元素的邊框到另外一個元素的邊框的距離
border 邊框
邊框大小 border-width
邊框顏色 border-color
邊框樣式 border-style
盒子的寬度=左右padding+左右border+內容寬度
高度同理。
div+css佈局概念
用div將整個網頁分成一部分一部分，並且填充css樣式和標籤的過程
Padding : 上 右 下 左
Padding :上 左右 下
Padding: 上下 左右
Margin同上
定位
相對定位：position:relative相對本身
絕對定位：position:absolute絕對定位
-相對帶relative的父級，如果沒向上級查詢直到body
固定定位：position:fixed固定定位-相對於視窗
浮動
浮動產生的問題:
子元素進行浮動，父元素沒有設高度的情況下，高度沒了，這種情況叫高度塌陷。
解決方法：
1、清除浮動
.clearfix:after{
content:” . “;
clear:both；
display:block；
height：0;
overflow:hidden；
visibility：hidden;
}
2、給父級加{position:relative;overflow:hidden}
3、給父級設定高
border-radius
border-radius：一個值時是四個角
50%圓
兩個值 （上左 下右）（上右 下左）
三個值 上左 上右 下左 下右
四個值 上左 上右 下右 下左