重新聽的html課,作為一個半路出家的人,還是收獲很大的.
浏覽器核心 — 渲染引擎 — 将代碼渲染為網頁
網頁主要由三部分組成: 結構(structure) 表現(presentation) 行為(behavior)
結構 : html 表現 : css 行為 : js(dom + es)
㈠ 結構
< !doctype html> 文檔類型聲明
<hr> 橫線标簽
<br> 換行标簽
<p> 段落标簽
<img> 圖像标簽 單标簽
<a> 超連結标簽 href中javascript: 不跳轉 # 跳轉到目前界面 target 規定在何處打開超連結
錨點跳轉 : 在同一個界面當中,可以設定标記,通過a跳轉到該标記. <a href="#id标記名稱">
<ul > 無序清單 type屬性設定無序前顯示
<ol> 有序清單
<li> 定義清單項目
<dl> 定義定義清單
<dt> 定義定義清單中的項目
<dd> 定義定義清單中項目描述
表單标簽
<form> 最外層 action 為送出到的位址
<label> 定義input元素标注
<input> 輸入控件 placeholder 輸入提示
<textarea> 多行文本輸入控件
<select> 下拉選擇清單
<option> 定義選擇清單中的選項
送出的方式
①直接定義<button>
②在表單中最常用的是<input type=“submit” value=“送出”>
<style> 定義樣式 存儲css 放在頭部
節标簽
<div>劃分大的區塊 預設獨占一行
<span>劃分小的區域 預設就是一小塊
語義化标簽 見名知意
header 頭
section 一個章節、組
footer 尾部
article 主要内容、文章
nav 導航
媒介标簽
video 視訊 controls設定播放器
audio 音頻 controls設定播放器
表單控件标簽
calendar 月曆
date 日期
time 時間
email 郵件
url & search
繪圖示簽
canvas
㈡ 表現/樣式
www.faviconico.org
生成favicon.ico格式的圖示檔案
在網址後面加上/favicon.ico可以擷取該網址的标簽圖示
在head中引入
優先使用webkit核心渲染界面 <meta name=“renderer” content=“webkit”/>
行内樣式作用于一行
外部樣式友善各個界面引用
優先級 : 行内最高 , 外部和頁内看a順序.
通用選擇器 選擇所有元素 *{ }
标簽選擇器 選擇某類标簽元素 标簽名{ } 例如: div{ }
類選擇器 選擇某一類名(class)的元素 .類名{ } 例如: .center { }
id選擇器 設定特定id元素 #id名{ } 例如: #big{ }
複合選擇器 多個選擇器複合使用 例如: div.test1{ } div中class為test1
的元素
群組選擇器 同時選擇多個選擇器使用一個樣式
選擇器1,選擇器2,選擇器3 { }
後代選擇器 沒有逗号,用空格分隔
祖先元素 後代元素 後代元素{ }
直接後代選擇器 父标簽 > 子标簽
兄弟選擇器
查找後面一個兄弟元素 文法:兄弟元素 + 兄弟元素{ }
查找後面所有的兄弟元素 文法: 兄弟元素 ~ 兄弟元素{ }
屬性選擇器 選擇帶有特殊屬性的标簽 [屬性名]、[屬性名= ’ ']
例如: div[name][age]
僞類和僞元素 特定場景根據規則改變不同内容的樣式
在css3中,僞類與僞元素在文法上有所差別.為元素為 : :開頭,僞類以 : 開頭.
僞類
名稱
解釋
css版本
:active
選擇正在被激活的元素
1
:hover
選擇被滑鼠懸浮着元素
:link
選擇未被通路的元素
:visited
選擇已被通路的元素
:first-child
選擇滿足是其父元素的第一個子元素的元素
2
:lang
選擇帶有指定lang屬性的元素
:focus
選擇擁有鍵盤輸入焦點的元素
:enable
選擇每個已啟動的元素
3
:disable
選擇每個已禁止的元素
:checked
選擇每個被選中的元素
:target
選擇目前錨點元素
僞元素
::first-letter
選擇指定元素的第一個單詞
::first-line
選擇指定元素的第一行
::after
在指定元素的内容後面插入内容
::before
在指定元素的内容前面插入内容
::selection
選擇指定元素中被使用者選中的内容
否定僞類 選擇不是其他标簽的某個标簽
文法 :not(選擇器){ }
塊級标簽
獨占一行,寬度高度随時設定
e.g. : div、p、h1~h6、ul、li
行内标簽(内聯标簽)
不會獨占一行,多個行内标簽可以同時顯示在一行.寬度高度不能随時設定
寬度和高度取決于内容的尺寸
e.g. : span、a、label
行内-塊級标簽(内聯-塊級标簽)
多個行内-塊級标簽可以顯示在同一行,可以随時設定高度寬度
e.g. : input、button
none : 隐藏标簽
block : 讓标簽變為塊級标簽
inline : 讓标簽變為行内标簽
inline-block : 讓标簽變為行内-塊級标簽( 内聯-塊級标簽 )
選擇器的針對性越強,它的優先級别就越高
選擇器的權值
* : 0
标簽 : 1
類 : 10
僞類/僞元素 : 10
id : 100
important : 1000
原則 : 選擇器的權值加到一起,大的有限,如果權值相同,後定義的優先
優先級排序
important > 内聯 > id > 類 > 僞類/僞元素|屬性 > * > 繼承
!important大于一切
标準盒子模型
水準居中
① 行内标簽 行内-塊級标簽
text-align:center (設定父級)
② 塊級标簽
margin : 0 auto (設定自己 上下 左右)
垂直居中
① line-height == height(設定父級 在高度内垂直居中)
② margin == height/2
③ 子絕父相 通過布局設定
預設情況下,所有的網頁标簽都在标準流布局中—從上到下,從左到右
float屬性
所謂浮動指的是使元素脫離原來的文本流,在父元素中浮動起來
可選值:
①left : 脫離标準流,浮動在父标簽的最左邊
②right : 脫離标準流,浮動在父标簽的最右邊
③none : 不浮動
塊級元素和行内元素可以浮動
當一個行内元素浮動以後将自動變為一個塊級元素
當一個塊級元素浮動以後,寬度會預設被内容撐開,是以當浮動一個塊級元素時我們會為其指定一個寬度.
position屬性和left、right、top、bottom屬性
可繼承屬性
父标簽的屬性值會傳遞給子标簽
一般是文字控制屬性
不可繼承屬性
父标簽的屬性值不會傳遞給子标簽
一般是區塊控制屬性
visibility 是否可見
區分 : display?
差別 : visibility如果設定隐藏會保留白間 display完全隐藏
cursor 光标顯示類型
color 文字顔色
font 字型
font-family 字型 後面可以加很多字型,逗号區分,依次使用
font-size 字型大小
font-weight 文本粗細
font-style 文本風格 斜體(italic)等
text-decoration 文本修飾
underline 下劃線
overline 上劃線
line-through 穿過文本線
blink 閃爍文本
none 标準文本
text-indent 設定首行縮進
改樣式需要指定一個長度,并且隻對第一行生效
text-align 對齊
left : 左對齊
right : 右對齊
justify : 兩邊對齊
center : 中間對齊
text-transform 将元素中的字母全部變為大小寫
大寫 : text-transform:uppercase
小寫 : text-transform:lowercase
首字母大寫 : text-transform:capitalize
正常 : text-transform:none
list-style 設定所有清單屬性 符合屬性
circle ●
square ◼
upper-roman Ⅰ
lower-alpha a
overflow 溢出顯示設定
visible 預設值
scroll 添加滾動條
auto 根據需要添加滾動條
hidden 隐藏超出盒子内容
line-height 設定行高,行高越大間距越大
行間距 = line-height - font-size
box-sizing
content-box 更改邊距的時候會放大盒子,往外擴
border-box 更改邊距的時候盒子整體大小不變,往裡縮