html标签和css参数
一、HTML標簽
1、實體標簽:
空格、
> 大于號
< 小于號
© 版本號
2、Meta標簽:
charset 指定網頁的字符集
name 指定的數據的名稱
content 指定的數據的內容
description 用于指定網站的描述
title標簽的內容會作為搜索結果的超鏈接上的文字顯示?
keywords 表示網站的關鍵字,可以同時指定多個關鍵字,關鍵字間使用,隔開。
3、語義標簽:
1、標題標簽
h1 ~ h6 一共有六級標題
從h1~h6重要性遞減,h1最重要,h6最不重要
標題標簽都是塊元素
在頁面中獨占一行的元素稱為塊元素(block element)
hgroup標簽用來為標題分組,可以將一組相關的標題同時放入到hgroup。
em標簽用于表示語音語調的一個加重。
strong表示強調,重要內容!
blockquote 表示一個長引用,? q表示一個短引用。 ?
2、布局標簽:
(1)header 表示網頁的頭部。
(2)main 表示網頁的主體部分(一個頁面中只會有一個main)。
(3)footer 表示網頁的底部。
(4)nav 表示網頁中的導航。
(5)aside 和主體相關的其他內容(側邊欄)。
(6)article 表示一個獨立的文章。
(7) section 表示一個獨立的區塊,上邊的標簽都不能表示時使用section。
(8)div 沒有語義,就用來表示一個區塊,目前來講div還是我們主要的布局元素 。
(9)span 行內元素,沒有任何的語義,一般用于在網頁中選中文字。
4、塊元素和行內元素的區別:
(1)塊元素(block element)
??????????? - 在網頁中一般通過塊元素來對頁面進行布局
???????? 行內元素(inline element)
??????????? - 行內元素主要用來包裹文字
??????????? (2)- 一般情況下會在塊元素中放行內元素,而不會在行內元素中放塊元素
??????????? - 塊元素中基本上什么都能放
??????????? - p元素中不能放任何的塊元素
5、列表標簽(html列表的三種創建方式):
??????? ??? 1、有序列表
?????? 2、無序列表
??????? ??? 3、定義列表
(1)有序列表,使用ol標簽來創建無序列表
?????? ??????使用li表示列表項?
??????? (2)無序列表,使用ul標簽來創建無序列表
??????? ?????使用li表示列表項
(3)定義列表,使用dl標簽來創建一個定義列表
?????? ??????使用dt來表示定義的內容
??????? ??????? ?使用dd來對內容進行解釋說明
?? 使用:列表之間可以互相嵌套。
6、超鏈接標簽
?? 使用 a 標簽來定義超鏈接
????? 屬性:
1、 href 指定跳轉的目標路徑
???????????? - 值可以是一個外部網站的地址。
???????????? - 也可以寫一個內部頁面的地址。
??????????? 2、target屬性,用來指定超鏈接打開的位置
?????????????? 可選值:
???????????????? _self 默認值 在當前頁面中打開超鏈接。
??????????????? ?_blank 在一個新的要么中打開超鏈接。
??????????? 3、可以使用 javascript:; 來作為href的屬性,此時點擊這個超鏈接什么也不會發生。
??????????? 4、可以直接將超鏈接的href屬性設置為#,這樣點擊超鏈接以后,頁面不會發生跳轉。
可以跳轉到頁面的指定位置,只需將href屬性設置 #目標元素的id屬性值。id屬性(唯一不重復的):
?????? - 每一個標簽都可以添加一個id屬性
??????? - id屬性就是元素的唯一標識,同一個頁面中不能出現重復的id屬性 。
7、圖片標簽:
使用img標簽來引入外部圖片,img標簽是一個自結束標簽。
屬性:
(1)src 屬性指定的是外部圖片的路徑(路徑規則和超鏈接是一樣的)
(2)alt 圖片的描述,這個描述默認情況下不會顯示,有些瀏覽器會圖片無法加載時顯示搜索引擎會根據alt中的內容來識別圖片,如果不寫alt屬性則圖片不會被搜索引擎所收錄
(3)width 圖片的寬度 (單位是像素)
(4)height 圖片的高度???
? - 寬度和高度中如果只修改了一個,則另一個會等比例縮放
注意:
(1)一般情況在pc端,不建議修改圖片的大小,需要多大的圖片就裁多大.
(2)但是在移動端,經常需要對圖片進行縮放(大圖縮小)。
(3)效果一樣,用小的,效果不一樣,用效果好的。
8、內聯框架
內聯框架,用于向當前頁面中引入一個其他頁面。
屬性:
???? src 指定要引入的網頁的路徑
???? rameborder 指定內聯框架的邊框
9、音視頻標簽
(1)音頻標簽
audio 標簽用來向頁面中引入一個外部的音頻文件的。音視頻文件引入時,默認情況下不允許用戶自己控制播放停止。
屬性: controls 是否允許用戶控制播放
???? ??autoplay 音頻文件是否自動播放, 如果設置了autoplay 則音樂在打開頁面時會自動播放,但是目前來講大部分瀏覽器都不會自動對音樂進行播放 , loop 音樂是否循環播放 。
(2)視頻標簽:
使用video標簽來向網頁中引入一個視頻, 使用方式和audio基本上是一樣的。
二、CSS屬性
1、常用選擇器
(1)元素選擇器
????????? ?作用:根據標簽名來選中指定的元素
????????? ?語法:標簽名{}
?????????? 例子:p{}? h1{}? div{}
(2)id選擇器
????????? ?作用:根據元素的id屬性值選中一個元素
???????? ??語法:#id屬性值{}
?????????? 例子:#box{} #red{}?
(3)類選擇器
???????? ?作用:根據元素的class屬性值選中一組元素
??????? ??語法:.class屬性值
(4)通配選擇器
????????? 作用:選中頁面中的所有元素
???????? ?語法: *
(5)class標簽和id標簽的區別:
class 是一個標簽的屬性,它和id類似,不同的是class可以重復使用,可以通過class屬性來為元素分組,可以同時為一個元素指定多個class屬性。
2、復合選擇器
(1)交集選擇器
????????? 作用:選中同時復合多個條件的元素
????????? 語法:選擇器1選擇器2選擇器3選擇器n{}
????????? 注意點:
???????????? 交集選擇器中如果有元素選擇器,必須使用元素選擇器開頭。
(2)選擇器分組(并集選擇器)
??????????????? 作用:同時選擇多個選擇器對應的元素
??????????????? 語法:選擇器1,選擇器2,選擇器3,選擇器n{}
3、關系選擇器
(1)子元素選擇器
??????? 作用:選中指定父元素的指定子元素
??????? 語法:父元素 > 子元素
(2)后代元素選擇器:
??????? 作用:選中指定元素內的指定后代元素
??????? 語法:祖先 后代
(3)兄弟選擇器
下一個兄弟:
???????????? 語法:前一個 + 下一個
??????? 選擇下邊所有的兄弟
???????????? 語法:兄 ~ 弟
(4)關系:
父元素:直接包含子元素的元素叫做父元素。
子元素:直接被父元素包含的元素是子元素。
祖先元素:直接或間接包含后代元素的元素叫做祖先元素,一個元素的父元素也是它的祖先元素。
后代元素:直接或間接被祖先元素包含的元素叫做后代元素,子元素也是后代元素。
兄弟元素:擁有相同父元素的元素是兄弟元素。
4、屬性選擇器
[屬性名] 選擇含有指定屬性的元素。
[屬性名=屬性值] 選擇含有指定屬性和屬性值的元素。
[屬性名^=屬性值] 選擇屬性值以指定值開頭的元素。
[屬性名$=屬性值] 選擇屬性值以指定值結尾的元素。
[屬性名*=屬性值] 選擇屬性值中含有某值的元素的元素。
5、偽類選擇器
?偽類(不存在的類,特殊的類)
????? - 偽類用來描述一個元素的特殊狀態
?????? 比如:第一個子元素、被點擊的元素、鼠標移入的元素...
????? - 偽類一般情況下都是使用:開頭
屬性:
??????? :first-child 第一個子元素
????? ??:last-child 最后一個子元素
??????? :nth-child() 選中第n個子元素
?????????? ?特殊值:
????????????????? n 第n個 n的范圍0到正無窮
???????????????? ?2n 或 even 表示選中偶數位的元素
???????????????? ?2n+1 或 odd 表示選中奇數位的元素
以上這些偽類都是根據所有的子元素進行排序
:first-of-type
:last-of-type
:nth-of-type()
這幾個偽類的功能和上述的類似,不同點是他們是在同類型元素中進行排序
:not() 否定偽類
??????????????? - 將符合條件的元素從選擇器中去除。
6、超鏈接偽類(a元素偽類)
:link 用來表示沒訪問過的鏈接(正常的鏈接)。
:visited 用來表示訪問過的鏈接,由于隱私的原因所以visited這個偽類只能修改鏈接的顏色。
:hover 用來表示鼠標移入的狀態。
:active 用來表示鼠標點擊。
7、偽元素選擇器
偽元素,表示頁面中一些特殊的并不真實的存在的元素(特殊的位置)
偽元素使用 :: 開頭
?????? ::first-letter 表示第一個字母
????? ?::first-line 表示第一行
?????? ::selection 表示選中的內容
???? ??::before 元素的開始
?????? ::after 元素的最后
???????????? before 和 after 必須結合content屬性來使用
8、樣式的繼承
樣式的繼承,我們為一個元素設置的樣式同時也會應用到它的后代元素上,繼承是發生在祖先后后代之間的。
繼承的設計是為了方便我們的開發,,利用繼承我們可以將一些通用的樣式統一設置到共同的祖先元素上,這樣只需設置一次即可讓所有的元素都具有該樣式
注意:并不是所有的樣式都會被繼承:
比如 背景相關的,布局相關等的這些樣式都不會被繼承。
9、選擇器的權重
??? 選擇器的權重
??????????????? 內聯樣式??????? 1,0,0,0
??????????????? id選擇器??????? 0,1,0,0
??????????????? 類和偽類選擇器?? 0,0,1,0
??????????????? 元素選擇器?????? 0,0,0,1
??????????????? 通配選擇器?????? 0,0,0,0
??????????????? 繼承的樣式?????? 沒有優先級
??????????? 比較優先級時,需要將所有的選擇器的優先級進行相加計算,最后優先級越高,則越優先顯示(分組選擇器是單獨計算的),
??????????????? 選擇器的累加不會超過其最大的數量級,類選擇器在高也不會超過id選擇器
??????????????? 如果優先級計算后相同,此時則優先使用靠下的樣式
??????????? 可以在某一個樣式的后邊添加 !important ,則此時該樣式會獲取到最高的優先級,甚至超過內聯樣式,
??????????????? 注意:在開發中這個玩意一定要慎用!
三、盒子模型
1、文檔流
? 文檔流(normal flow)
????????????? 我們所創建的元素默認都是在文檔流中進行排列
??????????? - 對于我們來元素主要有兩個狀態
??????????????? 在文檔流中
??????????????? 不在文檔流中(脫離文檔流)
??????????? - 元素在文檔流中有什么特點:
??????????????? - 塊元素
??????????????????? - 塊元素會在頁面中獨占一行(自上向下垂直排列)
??????????????????? - 默認寬度是父元素的全部(會把父元素撐滿)
??????????????????? - 默認高度是被內容撐開(子元素)
??????????????? - 行內元素
??????????????????? - 行內元素不會獨占頁面的一行,只占自身的大小
??????????????????? - 行內元素在頁面中左向右水平排列,如果一行之中不能容納下所有的行內元素
??????????????????????? 則元素會換到第二行繼續自左向右排列(書寫習慣一致)
??????????????????? - 行內元素的默認寬度和高度都是被內容撐開
2、盒子模型
(1)內容區(content)
元素中的所有的子元素和文本內容都在內容區中排列 。
???????? 內容區的大小由width 和 height兩個屬性來設置,width 設置內容區的寬度,height 設置內容區的高度。
(2)邊框
邊框(border),邊框屬于盒子邊緣,邊框里邊屬于盒子內部,出了邊框都是盒子的外部,邊框的大小會影響到整個盒子的大小,要設置邊框,需要至少設置三個樣式:
邊框的寬度 border-width,邊框的顏色 border-color,邊框的樣式 border-style
(3)盒模型、盒子模型、框模型(box model)
CSS將頁面中的所有元素都設置為了一個矩形的盒子, 將元素設置為矩形的盒子后,對頁面的布局就變成將不同的盒子擺放到不同的位置,每一個盒子都由一下幾個部分組成:
內容區(content), 內邊距(padding),邊框(border),外邊距(margin)
3、盒子模型-邊框
(1)邊框
邊框的寬度 border-width,邊框的顏色 border-color,邊框的樣式 border-style
border-width可以用來指定四個方向的邊框的寬度
??????????????????????? 四個值:上 右 下 左
??????????????????????? 三個值:上 左右 下
??????????????????????? 兩個值:上下 左右
??????????????????????? 一個值:上下左右
除了border-width還有一組 border-xxx-width, xxx可以是 top right bottom left, 用來單獨指定某一個邊的寬度。
(2) 邊框的顏色
?border-color用來指定邊框的顏色,同樣可以分別指定四個邊的邊框, 規則和border-width一樣,? border-color也可以省略不寫,如果省略了則自動使用color的顏色值。
(3)邊框樣式
border-style 指定邊框的樣式:solid 表示實線,dotted 點狀虛線,dashed 虛線,double 雙線, border-style的默認值是none 表示沒有邊框。
border簡寫屬性,通過該屬性可以同時設置邊框所有的相關樣式,并且沒有順序要求
除了border以外還有四個 border-xxx, border-top,border-right,border-bottom,border-left。
4、盒子模型-內邊距
內邊距(padding):內容區和邊框之間的距離是內邊距
一共有四個方向的內邊距: padding-top, padding-right,padding-bottom,padding-left
, - 內邊距的設置會影響到盒子的大小, 背景顏色會延伸到內邊距上
,一共盒子的可見框的大小,由內容區 內邊距 和 邊框共同決定,所以在計算盒子大小時,需要將這三個區域加到一起計算。
padding 內邊距的簡寫屬性,可以同時指定四個方向的內邊距,規則和border-width 一樣
5、盒子模型-外邊距
外邊距(margin): 外邊距不會影響盒子可見框的大小, 但是外邊距會影響盒子的位置
一共有四個方向的外邊距:
margin-top:上外邊距,設置一個正值,元素會向下移動。
margin-right:默認情況下設置margin-right不會產生任何效果。
margin-bottom:下外邊距,設置一個正值,其下邊的元素會向下移動。
margin-left:左外邊距,設置一個正值,元素會向右移動。
margin也可以設置負值,如果是負值則元素會向相反的方向移動。
元素在頁面中是按照自左向右的順序排列的,所以默認情況下如果我們設置的左和上外邊距則會移動元素自身,而設置下和右外邊距會移動其他元素。
margin的簡寫屬性,margin 可以同時設置四個方向的外邊距 ,用法和padding一樣。
margin會影響到盒子實際占用空間。
6、水平布局
元素的水平方向的布局: 元素在其父元素中水平方向的位置由以下幾個屬性共同決定“
margin-left, border-left,padding-left,width,padding-right, border-right,margin-right
,一個元素在其父元素中,水平布局必須要滿足以下的等式
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素內容區的寬度 (必須滿足)。
7、垂直布局
子元素是在父元素的內容區中排列的,如果子元素的大小超過了父元素,則子元素會從父元素中溢出,使用 overflow 屬性來設置父元素如何處理溢出的子元素
可選值:
????? visible,默認值 子元素會從父元素中溢出,在父元素外部的位置顯示
????? hidden 溢出內容將會被裁剪不會顯示
????? scroll 生成兩個滾動條,通過滾動條來查看完整的內容
????? auto 根據需要生成滾動條
8、外邊距的折疊
垂直外邊距的重疊(折疊):相鄰的垂直方向外邊距會發生重疊現象
兄弟元素:兄弟元素間的相鄰垂直外邊距會取兩者之間的較大值(兩者都是正值)
特殊情況:如果相鄰的外邊距一正一負,則取兩者的和, 如果相鄰的外邊距都是負值,則取兩者中絕對值較大的
兄弟元素之間的外邊距的重疊,對于開發是有利的,所以我們不需要進行處理
父子元素:父子元素間相鄰外邊距,子元素的會傳遞給父元素(上外邊距),父子外邊距的折疊會影響到頁面的布局,必須要進行處理。
9、行內元素的盒模型
(1)行內元素不支持設置寬度和高度。
(2)行內元素可以設置padding,但是垂直方向padding不會影響頁面的布局。
(3)行內元素可以設置border,垂直方向的border不會影響頁面的布局。
(4)行內元素可以設置margin,垂直方向的margin不會影響布局。
(5)display 用來設置元素顯示的類型
? 可選值: inline 將元素設置為行內元素, block 將元素設置為塊元素, inline-block 將元素設置為行內塊元素
(6)行內塊,既可以設置寬度和高度又不會獨占一行, table 將元素設置為一個表格, none 元素不在頁面中顯示,
(7)visibility 用來設置元素的顯示狀態,可選值:
visible 默認值,元素在頁面中正常顯示
hidden 元素在頁面中隱藏 不顯示,但是依然占據頁面的位置。
10、默認樣式
(1) 重置樣式表
專門用來對瀏覽器的樣式進行重置的,reset.css 直接去除了瀏覽器的默認樣式, normalize.css 對默認樣式進行了統一。
(2)默認樣式
通常情況,瀏覽器都會為元素設置一些默認樣式
默認樣式的存在會影響到頁面的布局,? 通常情況下編寫網頁時必須要去除瀏覽器的默認樣式(PC端的頁面)。
11、盒子尺寸
默認情況下,盒子可見框的大小由內容區、內邊距和邊框共同決定
box-sizing 用來設置盒子尺寸的計算方式(設置width和height的作用),可選值:?
content-box 默認值,寬度和高度用來設置內容區的大小。
border-box 寬度和高度用來設置整個盒子可見框的大小。
width 和 height 指的是內容區 和 內邊距 和 邊框的總大小。
12、輪廓和圓角
(1)box-shadow
box-shadow 用來設置元素的陰影效果,陰影不會影響頁面布局 。
第一個值 水平偏移量 設置陰影的水平位置 正值向右移動 負值向左移動。
第二個值 垂直偏移量 設置陰影的水平位置 正值向下移動 負值向上移動。
第三個值 陰影的模糊半徑。
第四個值 陰影的顏色。
(2)outline
outline 用來設置元素的輪廓線,用法和border一模一樣
輪廓和邊框不同的點,就是輪廓不會影響到可見框的大小 。
border-radius: 用來設置圓角 圓角設置的圓的半徑大小
border-top-left-radius:? 左上
border-top-right-radius : 右上
border-bottom-left-radius:? 左下
border-bottom-right-radius:? 右下
border-radius 可以分別指定四個角的圓角
???? 四個值 左上 右上 右下 左下
???? 三個值 左上 右上/左下 右下
???? 兩個值 左上/右下 右上/左下?
將元素設置為一個圓形??? border-radius: 50%;
總結
以上是生活随笔為你收集整理的html标签和css参数的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 强行在MFC窗体中渲染Cocos2d-x
- 下一篇: 王之泰/王志成《面向对象程序设计(jav