html與css的知識(shí)點(diǎn)

1、HTML與CSS第二遍1 .HTML 是網(wǎng)頁(yè)內(nèi)容的載體。內(nèi)容就是網(wǎng)頁(yè)制作者放在頁(yè)面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。2 .CSS羊式是表現(xiàn)。就像網(wǎng)頁(yè)的外衣。比如，標(biāo)題字體、顏色變化，或?yàn)闃?biāo)題加入背景圖片、 邊框等。所有這些用來(lái)改變內(nèi)容外觀的東西稱之為表現(xiàn)。3 .JavaScript 是用來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)上的特效效果。如： 鼠標(biāo)滑過(guò)彈出下拉菜單。 或鼠標(biāo)滑過(guò)表格的背景顏色改變。還有焦點(diǎn)新聞（新聞圖片）的輪換?？梢赃@么理解，有動(dòng)畫(huà)的，有交互的一般都是用 JavaScript 來(lái)實(shí)現(xiàn)的。4 . font-size 字體大小text-align:center 文字居中5 . 注釋 &nbs

2、p; 空格6 . 關(guān)于 html 的一些標(biāo)簽 表示強(qiáng)調(diào) 斜體 表示更強(qiáng)烈的強(qiáng)調(diào) 粗體兩者是強(qiáng)調(diào)一段話中的關(guān)鍵字是使用 設(shè)置單獨(dú)的樣式 引用短文本 引用某個(gè)作家的一句詩(shī) 引用長(zhǎng)文本一段文字 設(shè)置水平橫線 沒(méi)有結(jié)束標(biāo)簽文本地址為網(wǎng)頁(yè)加入地址信息 在文本中加入一行代碼 加入多行代碼 添加信息列表無(wú)序 排行榜 在網(wǎng)頁(yè)中默認(rèn)樣式一般為：每項(xiàng)前自帶一個(gè)序號(hào) 網(wǎng)頁(yè)上的表格 整個(gè)表格以 table 開(kāi)始 表格中的內(nèi)容全部下載完后才會(huì)顯示若沒(méi)有 標(biāo)簽，表格會(huì)下載一點(diǎn)顯示一點(diǎn) 行數(shù) 列數(shù) 表格頭部的一個(gè)單元格 表格表頭 tr td,th 利用css樣式表，為表格添加邊框 為表格添加標(biāo)題table summary=

3、摘要”添加摘要但摘要內(nèi)容不會(huì)在瀏覽器中顯示超鏈接默認(rèn)在當(dāng)前瀏覽器窗口中打開(kāi)，鏈接到另一個(gè)頁(yè)面a href=目標(biāo)網(wǎng)址target= _blank在新建瀏覽器窗口打開(kāi)點(diǎn)擊鏈接會(huì)打開(kāi)電子郵件應(yīng)用，參數(shù)可以是郵件主題subject”郵件內(nèi)容body=； 利用HTML表單(form)與用戶進(jìn)行交互；把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端method=(get/post)傳送方式action:瀏覽者輸入的數(shù)據(jù)被傳送到的地方 文本輸入框密碼輸入框textarea rows=行數(shù) colsMU數(shù)”文本 在表單中輸入大段文字時(shí)，用文本輸入域Radio為單選框 checkbox為復(fù)選框當(dāng)checkbox= checkb

4、o對(duì)；選項(xiàng)被默認(rèn)選中J示的值 下拉列表框selected- selectd設(shè)置成這樣代表選項(xiàng)默認(rèn)選中 提交按鈕重置按鈕label for=控件id名稱”控件包括：文本框、密碼框輸入，單選框、復(fù)選框，7 .css的樣式代碼定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式/*注釋語(yǔ)句*/font-size: 字體大小、字號(hào)color: 字體顏色font-weight:字體粗細(xì) font-weight:bold 粗體line-height:行間距設(shè)置word-spacing:單詞間距設(shè)置 letter-spacing:字母與字母之間間距font-family:設(shè)置字體 bodyfont- familt:宋體”;

5、font-style:italic斜體text-decoration:underline; 設(shè)置下劃線text-decoration:line-through 設(shè)置刪除線text-align:center 文字居中 text-align:left 文字居左text-align:right 文字居右8 .CSS#式代碼方法有：內(nèi)聯(lián)式、嵌入式、外部式內(nèi)聯(lián)式：把css代碼直接寫(xiě)在 HTML的標(biāo)簽中嵌入式：把 css代碼寫(xiě)在 /style之間 spansyle需要力口 css樣式的標(biāo)簽有： h冷外部式：把css代碼寫(xiě)一個(gè)單獨(dú)的外部文件中以.css為擴(kuò)展名，在內(nèi)使用標(biāo)簽將css樣式文件鏈接到HTML文件

6、內(nèi)嵌入式外部式 9.css選擇器標(biāo)簽選擇器： HTML 文件中的標(biāo)簽，有 P樣式彳弋碼類選擇器：標(biāo)簽中加入 class 在 script 中的 css 樣式代碼為：.類選擇器名稱樣式代碼 如： .spanID 選擇器：在標(biāo)簽中加入 id ID 選擇器只能在文檔中使用一次#id 名 樣式代碼子選擇器：（ ）用于選擇指定標(biāo)簽元素的第一代子元素僅僅指直接后代.id 名第一代子元素樣式代碼包含選擇器：空格 .id 名 后代元素所有指定的后代元素通用選擇器：（*） 作用是匹配HTML所有標(biāo)簽元素* 偽類選擇符：給HTML 的標(biāo)簽 鼠標(biāo)滑過(guò)的狀態(tài)設(shè)置字體顏色a:hover 可以兼容所有瀏覽器分組選擇器：

7、（， ）為多個(gè)標(biāo)簽設(shè)置同一個(gè)樣式h1,span 10. css繼承：css樣式不僅應(yīng)用于某個(gè)特定的HTML標(biāo)簽元素，而且應(yīng)用于其后代pcolor:red; 三年級(jí)時(shí)，我還是一個(gè)膽小如鼠的小女孩。上面例子，顏色不僅應(yīng)用于p 標(biāo)簽，還應(yīng)用于span 標(biāo)簽Css特殊性：為同一個(gè)元素設(shè)置不同的css代碼，權(quán)值大，優(yōu)先級(jí)大P 權(quán)值為 1 p span 為 1+1=2.類名 為 10P span.類名為 1+1+10=12 #id 名 為 100css 層疊： 為同一個(gè)元素設(shè)置不同的 css 并且權(quán)值相同時(shí)， 根據(jù) css 樣式的前后順序決定，在最后面的 css 樣式被應(yīng)用。為某些樣式設(shè)置最高權(quán)值 pco

8、lor:red !important ;11. css將HTMLfe簽元素分為三種：塊狀元素，內(nèi)聯(lián)元素（行內(nèi)元素），內(nèi)聯(lián)塊狀元素常用的塊狀元素有： 、 、 . 、 、 、 、 、 、 、 常用的內(nèi)聯(lián)元素有：、 、 、 、 、 、 、 、 、 、 常用的內(nèi)聯(lián)塊狀元素有： 、 12. 塊級(jí)元素： display ： block 將元素顯示為塊級(jí)元素adisplay:block 使a元素具有塊狀元素特點(diǎn)塊級(jí)元素特點(diǎn)：每個(gè)塊級(jí)元素都從新的一行開(kāi)始，并且其后的元素也另起一行。一個(gè)塊級(jí)元素獨(dú)占一行元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬

9、度一致），除非設(shè)定一個(gè)寬度。13. 內(nèi)聯(lián)元素： display:inline 將元素設(shè)置為塊狀元素divdisplay:inline 使 div 元素具有內(nèi)聯(lián)元素的特點(diǎn)內(nèi)聯(lián)元素特點(diǎn)：和其他元素都在一行上元素的高度、寬度及頂部和底部邊距不可設(shè)置元素的寬度就是它包含的文字或圖片的寬度，不可改變14. 內(nèi)聯(lián)塊狀元素： dispiay:inline-block特點(diǎn)：和其他元素都在一行元素的高度、寬度及頂部和底部邊距可設(shè)置15. 盒模型 一個(gè)塊級(jí)元素相當(dāng)于一個(gè)盒模型邊框：border設(shè)置粗細(xì)、樣式、顏色border-top/bottom/left/right:樣式包括： dashed 虛線 dotted

10、 點(diǎn)線 solid 實(shí)線填充：padding 邊框與內(nèi)容之間的距離padding-top/bottom/left/right邊界： margin 元素與另一個(gè)元素的距離padding 和 margin 的區(qū)別， padding 在邊框里， margin 在邊框外盒子的寬度等于+左右邊框+左右填充+內(nèi)容寬度16. css布局模型：流動(dòng)模型flow 浮動(dòng)模型float層模型layerflow 默認(rèn)網(wǎng)頁(yè)布局模型塊狀元素自上而下垂直分布 內(nèi)聯(lián) 從左到右水平分布顯示float 能夠讓兩個(gè)塊狀元素水平發(fā)布float:left左浮動(dòng)float:right右浮動(dòng)層模型（layer）三種形式：絕對(duì)定位absol

11、ute相對(duì)定位relative 固定定位 fixed17. 絕對(duì)定位 position:absolute; 將元素從文檔流中拖出來(lái) 相對(duì)其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位，若沒(méi)有，就相對(duì)body ，即瀏覽器窗口。position:absolute; top/left/bpttom/right:px;相對(duì)定位：position:relative 相對(duì)于以前的位置移動(dòng)，偏移前的位置保留不動(dòng)固定定位：position:fixed; 相對(duì)于屏幕內(nèi)的網(wǎng)頁(yè)窗口移動(dòng)。由于視圖本身是固定的，它不會(huì)隨瀏覽器窗口的滾動(dòng)條滾動(dòng)而變化， 除非你在屏幕中移動(dòng)瀏覽器窗口的屏幕位置， 或改變?yōu)g覽器窗口的顯示大

12、小， 因此固定定位的元素會(huì)始終位于瀏覽器窗口內(nèi)視圖的某個(gè)位置，不會(huì)受文檔流動(dòng)影響1 是 2 的父元素，則 1 進(jìn)行相對(duì)定位， 2 進(jìn)行絕對(duì)定位用于下拉菜單18. 水平居中設(shè)置行內(nèi)元素通過(guò)給父元素設(shè)置 text-align:center 來(lái)實(shí)現(xiàn) （文本水平居中 ）定寬塊狀元素通過(guò)設(shè)置左右margin 值為 auto 來(lái)實(shí)現(xiàn) （整體居中）Width:200px; margin:20px auto; margin-left 與 margin-right 設(shè)置為 auto不定寬塊狀元素:1） 加入table 標(biāo)簽2）給塊狀元素設(shè)置display:inline 具有行內(nèi)元素特點(diǎn),然后設(shè)置text-align:center 來(lái)實(shí)現(xiàn)3）父元素設(shè)置position:relative, 然后子元素設(shè)置position:relativ