HTML及CSS學習筆記
javascript
day-01
HTML
一、HTML 基本語法
html標籤php
-
單標籤
<img />、<img>css -
雙標籤
<html> </html>html
屬性 屬於標籤java
<img src="圖片的地址">
<table width="100" height="200"></table>
1.1 語法規範
-
標籤嵌套 用縮進web
-
標籤名 不區分大小寫 建議小寫chrome
-
屬性名 不區分大小寫 建議小寫瀏覽器
註釋ruby
<!-- 多行 -->
<!--
多行
-->
1.2 經常使用HTML實體
-
空格服務器 -
<< -
>> -
&；& -
©；版權 -
¥；人民幣
二、HTML經常使用標籤
主體結構
-
<html></html> -
<head></head> -
<body></body>
HEAD標籤
-
<title></title>網站標題 -
<meta>指定網頁的元信息 指定關鍵字 指定描述 指定字符集 屬性： charset、name、content -
<style></style> -
<link>導入css或者指定網頁圖標 屬性 src、 type 、 rel -
<script> </script>導入javascript
格式排版標籤
-
<hn></hn>1~6 標題 -
<p></p>段落 -
<pre></pre>原樣輸出 -
<br>換行 -
<hr>分隔 -
<div></div>
2.1 文本標籤
-
<em></em>強調 表現爲斜體 -
<strong></strong>強調 表現爲粗體 -
<mark></mark>H5新增 表示被選擇 -
<sup></sup>上標 -
<sub></sub>下標 -
<ins></ins>添加的內容 -
<del></del>刪除的內容 -
<ruby></ruby>/<rt></rt>加拼音 H5新增
三、CSS基本語法
使用CSS
-
link 引入外部的CSS文件
<link rel="shortcut icon" type="image/x-icon" href="圖標文件路徑">
<link rel="stylesheet" href="外部CSS文件路徑"
-
<style> </style>在html中寫 -
使用html元素的style屬性
格式
選擇器 {
CSS屬性: 值;
CSS屬性: 值;
}
選擇器 {屬性:值;屬性:值}
註釋
/* */
CSS長度單位
px 像素
em 默認大小的倍數
百分比 默認大小參照
cm
mm
pt
CSS 顏色單位
colorName： red/green/bue/purple/orange/yellow/pink/skyblue
rgb數字 rgb(34,45,23) rgb(20%, 57%, 100%)
16進制數字 #abcdef #f90 #ccc
四、CSS選擇器
標籤名選擇器
tagName {
}
類名
.className {
}
ID選擇器
#idName {
}
全局選擇器
* {
}
組合 後代元素：空格鏈接，包含子代選擇器
選擇器 選擇器{
}
組合 子元素：> 鏈接
選擇器>選擇器 {
}
羣組
選擇器,選擇器,選擇器{
}
多條件
p.item
五、選擇器優先級
ID > CLASS > tagName > *
組合選擇器 數數
六、CSS經常使用屬性
6.1 字體
-
font-family 字體家族
-
font-size
-
font-weight normal | bold
-
font-style normal | italic
-
font-variant normal | small-caps
-
font 複合屬性
font:[weith | style | variant] size family
顏色
-
color
6.2 文本
-
word-spacing
-
letter-spacing 字間距
-
text-align: left / center / right 水平居中
-
vertical-align: baseline / middle .... 垂直居中
-
line-height 行高
-
text-decoration ： none/overline/underline/line-through 通常用於a標籤去除下劃線
-
text-indent: 2em
-
word-wrap: break-word
-
overflow-wrap word-wrap的別名 CSS3
-
white-space pre pre-wrap
day_02
七、CSS 屬性/尺寸/邊框/背景
尺寸
-
width max-width min-width
-
height max-height min-height
邊框
-
border-style 邊框風格 solid / dotted / dashed / double / none
-
border-width 邊框寬度
-
border-color 邊框顏色
-
border 複合屬性
border: 1px solid #ccc
內邊距
-
padding-left
-
padding-top
-
padding-right
-
padding-bottom
-
padding
padding: 值; 上下左右
padding: 值1 值2； 上下 左右
padding: 值1 值2 值3; 上 左右 下
padding: 值2 值2 值3 值4； 上 右 下 左
7.1 背景屬性
-
background-color 背景顏色
transparent -
background-image 背景圖片 url()
-
background-repeat 背景圖片平鋪 repeat no-repeat repeat-x repeat-y
-
background-position 背景圖片位置
-
background-attachment 背景圖片固定 scroll / fixed
-
background 複合屬性
background: color image repeat postion attachment
CSS Sprite 精靈圖 雪碧圖
-
利用 background-position 設置背景圖片的位置
-
把不少小的圖片 集成到一張大圖上
-
好處： 減小網絡請求數量
八、超級連接
8.1 a 元素
屬性
-
href
-
target _blank（空白頁打開） / _self
-
title 鼠標懸浮時的文本提示
-
download H5新增的
特殊用法
-
發短信 smsto
-
打電話 telto
-
發郵件 mailto
8.2 路徑
-
相對路徑 ./（當前路徑） ../（上一級路徑）
-
絕對路徑 URL
http://www.biadu.com/index.html -
特殊的相對路徑
/lesson/path/index.html
8.3 cursor css屬性
pointer / move / no-drop
8.4 錨點
設置錨點
第一種方式
<a name="錨點名字"></a>
第二種方式
隨便一個元素
<tagname id="錨點的名字"></tagname>
跳轉到指定錨點
<a href="#錨點名"></a>
8.5 完整URL
http://www.badiu.com/path/demo/contents/index.php?a=100&b=300#mao1
協議protocol http
主機名hostname www.baidu.com / IP
路徑 path /path/demo/contents/
文件名filename index.php
查詢內容query ?a=100&b=300
錨點 #mao1
九、圖片
img元素
屬性
-
src
-
title 圖片的文本信息（鼠標懸浮時展現）
-
alt 圖片資源加載失敗時的文本提示
-
usemap
9.1 圖片映射
map元素
-
-
name
-
id
-
area元素
-
-
shape rect circle poly
-
coords
-
target
-
href
-
title
-
day_03
頁面中的組成部分
十、列表
列表標籤
有序列表
<ol> <li>
<ol>的屬性： start type ="1/a/A/i/I" reversed
無序列表
<ul><li>
定義列表
<dl> <dt> <dd>
列表相關的CSS屬性
適用於<ol>和<ul> 也能夠設置給 <li>
list-style-type: disc/circle/square.../none
list-style-position: outside/inside
list-style-image: url()
list-style: 複合屬性
reset操做:
ol,ul {
margin: 0;
padding: 0;
list-style: none;}
十一、表格
HTML標籤
<table></table>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
<caption></caption> 標題
<tr></tr> 行
<td></td> 單元格
<th></th> 表頭單元格
CSS屬性
table-layout: auto / fixed 列寬固定(相等)
border-collapse: separate/ collapse 合併單元格邊框
border-spacing: 長度; 單元格和單元格之間的間隙 單元格不能合併
caption-side: top/bottom 標題的位置
empty-cells:hide/show 空的單元格顯示/隱藏 單元格不能合併
合併單元格
td或者th的屬性：
colspan 跨列
rowspan 跨行
十二、表單
12.1 表單的組成(控件)
- 文本輸入框
<input name="" type="text">
placeholder
maxlength
value
- 密碼框
<input name="" type="password">
placeholder
maxlength
value
- 單選按鈕
<input type="radio" name="" value="" checked>
- 複選框
<input type="checkbox" name="" value="" checked>
- 文件選擇
<input type="file" name="">
multiple 多個
- 規定類型的文本輸入框 (H5)
input:email
input:url
input:number max/min/step
input:search
input:tel
- 範圍選擇框 (H5)
<input type="range" name="" value="" max="" min="" step="">
- 顏色選擇(H5)
input:color
- 時間日期(H5)
<!--日期-->
<input type="date" name="date">
<!--月份-->
<input type="month" name="month">
<!--星期-->
<input type="week" name="week">
<!--時間-->
<input type="time" name="time">
<!--時間日期-->
<input type="datetime-local" name="dt">
- 下拉選項
<select name="">
<option value=""></option>
<option value="" selected></option>
<option value=""></option>
</select>
multiple 多選
- 多行文本
<textarea name="" rows="" cols=""></textarea>
maxlenth
- 按鈕
input:submit input:reset input:button
button:submit button:reset button:button 默認submit
12.2 表單標籤
<form></form> action（提交的後臺接口，即請求的服務器路徑） method（請求方式）
<input> type name max/min/step maxlength checked value placeholder（H5） list(H5)
<select></select> name
<option></option> value
<textarea></textarea> rows cols name placeholder
<fieldset></fieldset>
<legend></legend>
<datalist></datalist>(H5) 嵌套option
12.3 表單驗證 （H5）
必須
required 屬性 給全部能夠輸入的表單控件
指定類型
email/url/number
正則
pattern 屬性 全部可輸入
ttile
12.4 表單控件的通用屬性
disabled 全部的表單控件元素 禁用 enabled 可用 readonly 只讀 用於能夠輸入的表單控件(input/textarea) autofocus 自動獲取焦點 全部的表單元素 H5 autocomplete 自動完成 on/off H5 pattern title required
1三、視頻/音頻(H5)
視頻
<video src=""></video> controls autoplay poster= "" preload 預加載 loop
mp4 / ogg / webm
音頻
<audio src=""></audio> controls autoplay preload loop
mp3 / wav / ogg
source
<video> <source src="" type=""> <source src="" type=""> <source src="" type=""> </video> <audio> <source src="" type=""> <source src="" type=""> <source src="" type=""> </audio>
day_05
1四、浮動
-
如何設置浮動
float:left\right\none -
設置浮動以後的特色
脫離文檔流。 對父元素和後面元素的影響 塊狀元素，能夠共享一行。多個元素浮動，寬度超過父元素會自動換行 元素一旦浮動，都變爲塊狀。 浮動元素的默認寬度，被內容撐開 父元素的寬度仍然會對浮動的元素產生限制
-
消除浮動的影響
父元素：
設置overflow: auto/hidden
父元素也浮動
後面的元素 設置 css屬性 `clear:both`
14.1 浮動
-
元素能夠設置向左 或者 向右浮動 （不會跳出父元素的寬）
-
元素浮動後，會脫離文檔流。 （對後面的元素產生影響）
-
元素一旦浮動，會轉換爲塊狀元素
-
浮動的元素並不獨佔一行(仍然是塊狀元素) 由於脫離標準文檔流
-
浮動的元素，寬度默認會是auto，被內容撐開
-
多個元素浮動，會排成一行，寬度超過父元素寬度，會自動換行
14.2 浮動的影響
-
對後面元素影響。 後面元素會總體向前
-
對父元素有影響 （父元素的高不能被撐開）
14.3 消除浮動影響
-
消除元素對後面元素的影響， 在後面的元素設置
clear:both/left/right
：after | before {
concent：「」；
display：block；
clear：both；
}
-
消除子元素浮動對父元素的影響 。 給元素浮動者設置
overflow:hidden
1五、定位佈局
15.1 相對定位
-
經過
position:relative設置元素爲相對定位元素 -
元素設置爲相對定位以後，不會脫離文檔流，不影響其餘元素
-
能夠經過
left、top、right、bottom給相對定位的元素設置位置 -
定位元素： 根據 原先默認的位置 去定位
15.2 絕對定位
-
經過
position:absolute來設置絕對定位 -
元素絕對定位後，脫離文檔流，影響後面的元素。 寬度默認會被內容撐開
-
能夠經過
left、top、right、bottom給絕對定位的元素設置位置 -
定位規則： 根據第一個定位的祖先元素，若是沒有定位的祖先元素，根據html元素。 祖先元素什麼定位均可以
15.3 固定定位
position: fixed; left/top/right/bottom: 長度單位；
-
根據屏幕進行定位
-
脫離文檔流 （寬度默認變成內容撐開）
-
元素設置爲
固定定位或絕對定位以後，會變爲塊狀元素
15.4 元素的層級位置
z-index: number; 只能用於被定位的元素
1六、定義使用的CSS屬性
position:
left
top
right
bottom
z-index
day_06
1七、佈局知識點總結
元素垂直左右居中
position: absolute;
left: 50%;
top: 50%;
marign-top: -高的一半
margin-left: -寬的一半
元素水平居中
margin-left:auto;
margin-right: auto;
margin:0 auto;
text-align
-
讓文字水平居中
-
內聯元素(inline 和 inline-block)
line-height
-
讓一行文字垂直居中。 line-height的值等於元素的高
-
內聯元素(inline inline-block)
1八、佈局
18.1 CSS重置
-
reset.css
去掉全部元素的默認樣式 也能夠保證瀏覽器效果相同
/*總體設置 start*/ html{ color:#000; background:#FFF; } body, div, dl, dt, dd, ul, ol, li,h1, h2, h3, h4, h5, h6, pre, code,form, fieldset, legend, input, button,textarea, p, blockquote, th, td { margin: 0; padding: 0; } fieldset, img { border:0; } input,select,textarea,button { outline:none; } textarea{ resize:none; } /*i通常做爲字體圖片使用*/ i { font-style: normal; /*文本垂直居中*/ vertical-align: middle; } a{ text-decoration:none; color: #333; } table { border-collapse:collapse; border-spacing:0; } address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal; } ol, ul { list-style:none; } caption, th { text-align:left; } /*總體設置 end*/
-
normalize.css
從新設計了全部元素的默認樣式 保證全部瀏覽器效果相同 優勢： 添加了H5新元素的樣式重置 沒有簡單粗暴
18.2 佈局的H5新增標籤(瞭解)
header footer main aside article section dialog 雙標籤，沒有任何默認樣式，跟div同樣。 有語義
1九、字體圖標
詳情點擊☛http://fontawesome.dashgame.com/
day_07
20、CSS3 的選擇器
20.1 基本選擇器
tagName .className #idName * slector,selector,selector
20.2 層級選擇器
selector1 selector2 後代 selectoer1>selectoer2 子元素 selector1+selector2 緊鄰在後面的兄弟元素 selector1~selector 後面全部兄弟元素
20.3 屬性選擇器
selector[attr] 包含指定的屬性 selector[attr=value] 指定屬性的值 selector[attr^=value] 屬性值以value開頭 selector[attr$=value] 屬性值以value結束 selector[attr*=value] 屬性值包含value selector[][][] 多個屬性選擇器
屬性選擇器優先級 同 class
20.4 僞類選擇器
/*語法*/
selector:僞類 {
}
:link 未訪問的超連接 :visited 訪問過的超連接 :hover 鼠標懸停 任意元素 :actived 激活狀態的超連接 :focus 得到焦點時 :first-child :last-child :nth-child() 指定數字，也能夠指定關鍵字"odd", "even" :nth-last-child :only-child :fist-of-type :last-of-type :nth-of-type() 指定數字，也能夠指定關鍵字"odd", "even" :nth-last-of-type() :only-of-type()
20.5 僞元素選擇器
::first-letter 第一個字
::first-line 第一行
::before 最前面插入一個子元素
::after 最後面追加一個子元素
2一、CSS3 基礎
21.1 瀏覽器私有前綴
-weibkit-* chrome/safari
-moz-* firefox
-ms-* ie
-o-* opera
21.2 CSS3 新增的顏色
background:rgba(r,g,b,不透明度) 不透明度：0~1 小數， 數越大，越不透明
21.3 CSS3新增加度單位
px em 默認字體大小的倍數 rem 根元素字體大小的倍數 vw 窗口寬度分紅100份 50vw vh 窗口高度分紅100份
21.4 CSS3新增屬性
# 從新設置 盒子模型的規則 box-sizing: content-box(默認) / border-box （width/height盒子的寬高） # 外輪廓 在border的外面 不算盒子 outline: outline-style outline-color outline-width # 不透明度 opacity 0~1 小數
21.5 設置圓角
border-radius border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius
2二、CSS3 選擇器
22.1 層級
-
空格
-
> -
+.item+li -
~.item~p
22.2 屬性選擇器
-
[attr]
-
[attr=value]
-
[attr^=value]
-
[attr$=value]
-
[attr*=value]
-
[][][]
22.3 僞類選擇器
-
:link
-
:visited
-
:hover
-
:active
-
:focus
-
:first-child
.list li:first-child -
:last-child
-
:nth-child() 從1開始 odd even
-
:nth-last-child() 從1開始
-
:only-child
li:only-child -
:first-of-type
-
:last-of-type
-
nth-of-type()
-
nth-last-of-type()
-
only-of-type
<ul> <li></li> <li></li> <p></p> <li>li:nth-of-type(3) </li> <li></li> <li></li> </ul> li:nth-of-type(3) #選擇到 li:nth-child(3) #沒有知足條件的元素
22.4 僞元素選擇器
-
::before
.item::before -
::after
.clearfix::after {content:''; display:block; clear:both}
<div class="nav clearfix"> 子元素浮動 [::after 此處是僞元素建立的] </div> <div class="banner"> </div>
-
::first-letter
-
::first-line
-
::selection
-
::placeholder
::placeholder {color:red}<input placeholder="請輸入用戶名">
2三、CSS3 基礎
23.1 新增顏色單位
-
rgba() 不透明0~1
23.2 新增加度單位
-
rem
-
vw
-
vh
2四、新增的CSS3屬性
24.1 邊框圓角
border-radius 長度單位 border-top-left-radius border-top-righ-radius border-bottom-left-radius border-bottom-right-radius
24.2 佈局
display: 值不少不少 .... table table-row... box-sizing: content-box（默認值） / border-box
24.3 外輪廓
outline:1px solid #ccc outline-style outline-color outline-width
24.4 不透明度
opacity: 0~1
24.5 陰影
box-shadow:水平偏移 垂直偏移; 偏移能夠負值 box-shadow:水平偏移 垂直偏移 顏色; box-shadow:水平偏移 垂直偏移 模糊值 顏色; /*最多見的*/ box-shadow:水平偏移 垂直偏移 模糊值 外延值 顏色;
24.5 背景
background-size: cover / contain / 400px 300px / 100% 100% background: color image postion/size repeat attachment
24.6 CSS3變換
-
transform
-
translatex()
-
translatey()
-
translate(x, y) 翻轉
-
rotate() 旋轉 角度 deg
-
skewx() 歪斜角度deg
-
skewy()
-
skew(x, y)
-
-
transform-origin 變換的原點。 對translate沒有意義。 對rotate影響大
24.7 過渡效果
- 哪些CSS屬性能夠過渡
長度 (padding margin width height left/top/right/bottom border-width background-position ...) 顏色 變換 純數字 (opacity、z-index)
- 觸發過渡
僞類觸發 :hover :focus .... 媒體查詢 @media JS
- 相關屬性
transition-property 指定要過渡的屬性 用,隔開。默認是 all transition-duration 過渡持續時間 transition-timing-function 過渡線性效果 默認 ease transition-delay 過渡延遲 transition：property timing-function duration delay
24.8 CSS3動畫
關鍵幀
@keyframes 動畫名字 {
0% {
}
20% {
}
40% {
}
100% {
}
}
相關CSS屬性
animation-name 指定動畫的名字
animation-duration 動畫的執行時間
animation-timing-function 執行效果速度
animation-delay 延遲
animation-iteration-count 循環 次數 infinite(無限)
animation-direction: alternate （正向 反向 交替）\ reverse（反向）
animation-play-state: running / paused
animation 複合屬性
- 1. HTML+CSS學習筆記（六）
- 2. html / css學習筆記-1
- 3. HTML/CSS/jQuery學習筆記
- 4. css html 學習筆記001
- 5. html&css學習筆記----YJZJZQA
- 6. html和css學習筆記
- 7. Html+CSS學習筆記
- 8. HTML+CSS學習筆記（二）
- 9. HTML+CSS學習筆記四
- 10. HTML/CSS/JS 學習筆記
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. HTML+CSS學習筆記（六）
- 2. html / css學習筆記-1
- 3. HTML/CSS/jQuery學習筆記
- 4. css html 學習筆記001
- 5. html&css學習筆記----YJZJZQA
- 6. html和css學習筆記
- 7. Html+CSS學習筆記
- 8. HTML+CSS學習筆記（二）
- 9. HTML+CSS學習筆記四
- 10. HTML/CSS/JS 學習筆記