Html知識點(diǎn)

番茄西紅柿發(fā)布于2019-04-23 13:35 / 1787人閱讀

摘要：和的區(qū)別表示只讀，只能用于文本框，不能修改內(nèi)容，它的值可以隨表單提交給服務(wù)器表示該元素不可用，不響應(yīng)事件，不能修改內(nèi)容。同時不響應(yīng)事件。通配選擇器屬性為的元素中，所有的子元素均采用該樣式。表示按照格式規(guī)則正常定位。

1、企業(yè)應(yīng)用計算模式主要有：CS模式（客戶端/服務(wù)器）和BS模式（瀏覽器/服務(wù)器模式）

2、html:超文本標(biāo)記語言。以標(biāo)記和子標(biāo)記描述網(wǎng)頁元素。
　　http：超文本傳輸協(xié)議。

3、網(wǎng)頁以*.html作為后綴名。
　　網(wǎng)頁以作為根元素，該元素中包含和兩個子元素。
　　標(biāo)記一般用于設(shè)置網(wǎng)頁標(biāo)題、設(shè)置網(wǎng)頁編碼、書寫或?qū)霕邮健鴮懟驅(qū)隞S等。
　　標(biāo)記用于描述網(wǎng)頁內(nèi)容。

4、設(shè)置網(wǎng)頁編碼集

5、網(wǎng)頁注釋：
css注釋：/* */
js注釋：//單行 /* */多行

6、標(biāo)題標(biāo)記：

~

　　段落標(biāo)記

　　無序列表：
　　

第一選項(xiàng)

第二選項(xiàng)

　　有序列表：
　　

第一選項(xiàng)

第二選項(xiàng)

7、在網(wǎng)頁中有些符號必須以特殊的符號代替：
　　空格：
　　小于：<
　　大于：>

8、超鏈接
　　href表示需要跳轉(zhuǎn)的頁面路徑。相對于本網(wǎng)頁而言，如果跳轉(zhuǎn)頁面和本網(wǎng)頁在同一目錄，則直接寫文件名。
　　如果跳轉(zhuǎn)頁面在本網(wǎng)頁所在目錄的子目錄下，則書寫為html/aa.html。
　　如果跳轉(zhuǎn)頁面在本網(wǎng)頁的上級目錄，則書寫為../aa.html。

9、圖片： src屬性鏈接圖片路徑。規(guī)則和超鏈接鏈接路徑一樣

10、表格

，表示表頭，表示表格內(nèi)容。

11、框架網(wǎng)頁iframe：
　　其中src為框架網(wǎng)頁鏈接路徑，name為框架網(wǎng)頁名稱
　　顯示點(diǎn)擊超鏈接時，改變名稱為main的框架網(wǎng)頁內(nèi)容。

12、塊級元素和內(nèi)嵌元素：
　　塊級元素定義的文本是換行的，而內(nèi)嵌元素定義的文本是不換行的。
　　常見的塊級元素包括：div、blockquote、列表元素（dl、ol、ul）、fieldset、form、h1-h6、hr、p、pre、table等。
　　內(nèi)嵌元素包括：span、a、img、label、所有的表單輸入元素、iframe、object等。

13、表單
：
　　action表示表單提交的服務(wù)器URL地址。
　　method表示提交方式。常用的是GET和POST。
　　GET方式會在地址欄顯示提交的表單數(shù)據(jù)，POST不會顯示相對安全。

14、表單元素：
　　文本框
　　密碼框
　　單選框，當(dāng)name一致時，可以互斥。提交時，會將選中單選框的value值提交給服務(wù)器
　　復(fù)選框，提交時，會將選中單選框的value值提交給服務(wù)器。
　　隱藏表單，頁面上不顯示，但表單提交時，會將該表單數(shù)據(jù)提交給服務(wù)器。
　　文件表單，可以選擇本地文件
　　
　　下拉框，提交時，會將選中項(xiàng)option的value值提交給服務(wù)器。
　　多行文本框
　　提交按鈕，可以將表單數(shù)據(jù)提交給服務(wù)器
　　重置按鈕，將表單數(shù)據(jù)還原成初始值
　　圖片按鈕，作用類似于submit。但可以將按鈕做成圖片方式
　　命令按鈕，主要書寫javascript事件

15、id和name的區(qū)別：
　　id表示網(wǎng)頁元素在網(wǎng)頁中的唯一標(biāo)識，不能重復(fù)，可以用于任何網(wǎng)頁元素，它的值不會隨表單提交給服務(wù)器
　　name一般用于表單元素，可以重復(fù)，它的值會隨表單提交給服務(wù)器。

16、readonly和disabled的區(qū)別：
　　readonly表示只讀，只能用于文本框，不能修改內(nèi)容，它的值可以隨表單提交給服務(wù)器
　　disabled表示該元素不可用，不響應(yīng)事件，不能修改內(nèi)容。它的值不能隨表單提交給服務(wù)器。

17、CSS層疊樣式表，使用的方式有：
　　外部樣式表：在 href中導(dǎo)入css文件路徑。這種方式重用度好，可以用于多個網(wǎng)頁

　　嵌入式樣式表，可以在本網(wǎng)頁中使用
　　

　　內(nèi)聯(lián)樣式：

只能在當(dāng)前元素中使用

　　層次的優(yōu)先級別從大到小依次為：內(nèi)聯(lián)樣式 > 嵌入樣式表 > 外部樣式表

18、CSS選擇器規(guī)則：
　　元素選擇器： p{} 表示所有的p標(biāo)簽均采用該樣式
　　h1,h2{}：表示h1標(biāo)簽和h2標(biāo)簽均采該樣式

　　類選擇器： .aa{} 定義類選擇器，通過class="aa"將當(dāng)前元素應(yīng)用該選擇器，可以用于多個元素。

　　id選擇器： #mm{} 定義id選擇器，表示id為mm的元素采用該樣式，只能用于一個元素。

　　包含選擇器： div img{} 表示div元素下面所有的img子元素均采用該樣式。

　　通配選擇器： #mydiv *{} 表示id為mydiv下面所有的子元素均采用該樣式。

　　偽類選擇器： #data tr:hover{} 表示id為data的元素下面所有的tr子元素，在鼠標(biāo)移上去時，采用該樣式。

　　屬性選擇器： input[type=password]{}表示所有input標(biāo)簽中，type屬性的值為password的元素，采用該樣式。

　　優(yōu)先級：
　　!important > id > class > element > 偽類 > *

19、在CSS盒模型中，我們可以控制四個不同的分層屬性：
　　內(nèi)容(content)：元素中的內(nèi)容。
　　外邊距（Margin）：代表元素外邊的空間，這個控件將元素相互分開。
　　邊框（Border）：位于元素的邊距內(nèi)和元素的邊框距外之間的可配置的線。
　　內(nèi)邊距（Padding）：元素內(nèi)容和元素邊框之間的空間。

　　盒模型均可以用“上右下左”方式設(shè)置。如果僅給出兩個或三個值，那么缺失邊的屬性值取與對邊相同的值。

20、margin和padding：
　　margin是和border的距離；padding是內(nèi)容和border的距離
　　margin是對外的，padding是對內(nèi)的

　　對于margin:
　　水平盒子的間距為兩個盒子間距的和
　　垂直盒子的間距為兩個盒子間距的較大值

21、盒子的浮動，float:left左漂移，將塊級元素轉(zhuǎn)化為內(nèi)嵌元素。clear:left清除左漂移。

22、定位屬性：
　　static靜態(tài)定位。表示按照HTML格式規(guī)則正常定位：
　　relative相對定位。相對于元素原始位置進(jìn)行偏移
　　absolute絕對定位，是指某元素將定位在已經(jīng)定位的父元素框架或?yàn)g覽器窗口本身的左上角絕對位置。
　　fixed固定定位。類似 absolute，不過其包含塊是視窗本身

23、顯示屬性：
　　在css中，有兩個屬性可以控制元素的顯示和隱藏，即display屬性和visibility屬性
　　diplay=none，元素不會占空間
　　visibility=hidden元素會占用空間

向搜索引擎說明你的網(wǎng)頁的關(guān)鍵字

高數(shù)搜索引擎你的站點(diǎn)的主要內(nèi)容

設(shè)置網(wǎng)頁編碼集

表單：
readonly和disabled的區(qū)別

1.readonly表示只讀，只能用于文本框，表示該文本框的內(nèi)容不可以編輯，
表單提交時，readonly修飾的文本框，可以將值提交服務(wù)器。

2.disabled表示不可用。可以用于任何網(wǎng)頁元素，表示該元素不可以使用，不可以編輯。同時不響應(yīng)事件。
當(dāng)表單提交時，disabled修飾的表單元素，不能將值提交服務(wù)器。

（產(chǎn)生框）,包裹表單。

一起使用。一個框的樣式以及框的線上有個名字,包裹表單。

CSS：
CSS是層疊樣式表（Cascading Style Sheets）的縮寫，它用于定義html元素的顯示形式，是一種格式化網(wǎng)頁內(nèi)容的技術(shù)。

導(dǎo)入CSS的方式：

1.內(nèi)嵌式

只能針對一個網(wǎng)頁元素書寫樣式。

2.嵌入式

針對與本網(wǎng)頁中的元素有效。一般放在之間。

3.外連接

可以在不同的網(wǎng)頁中，引入樣式表文件，重用度最好。一般也放在之間。

樣式表的層疊：
層次的優(yōu)先級別從小到大依次為外部樣式表嵌入式樣式表內(nèi)聯(lián)樣式

CSS選擇器：

1.元素選擇器
P{} 所有的p標(biāo)簽均采用該樣式。
h1,h2{} 所有的h1標(biāo)簽和h2標(biāo)簽均采用該樣式。

2.類選擇器
.aa{} 所有加入類class="aa" 屬性的元素均采用該樣式，類選擇器可以用于不同的標(biāo)記。

3.id選擇器
#myspan{}
id屬性為myspan的元素采用該樣式，由于id不能重復(fù)，id選擇只能給一個元素加樣式。

4.包含選擇器
#imgDiv img{}(注意中間有空格)
id屬性為imgDiv的元素中，所有的img元素均采用該樣式。

5.通配選擇器
#myDiv *{}
id屬性為myDiv的元素中，所有的子元素均采用該樣式。

6.偽類選擇器
#data tr：hover｛｝
當(dāng)鼠標(biāo)懸停在id為tr的元素上時，該元素采用該樣式。

opacity:透明度設(shè)置0-1之間；

input標(biāo)簽和focus一起使用：得到焦點(diǎn)

7.屬性選擇器
input[type=password] :
focus{

background-color: #cd5c5c;

}

8.CCS優(yōu)先級

! import >id > class > element>偽類>*

9.CSS盒模型
在盒模型中，我們可以控制四個不同的分層屬性：

1.內(nèi)容（content）：元素中的內(nèi)容

2.外邊距（Margin）：代表元素外邊的空間，這個空間將元素相互分開。

3.邊框（Border）：位于元素的邊距內(nèi)和元素的邊框距外之間的可配置的線。

4.內(nèi)邊距（Padding）：元素內(nèi)容和元素邊框之間的空間。
盒模型均可以用 “上右下左” 方式設(shè)置。如果僅給出兩個或三個值，那么缺失邊的屬性值取與對邊相同的值。

10.margin屬性：

1.水平盒子的艱巨為兩個盒子的間距為兩個盒子間距的和

2.垂子盒子的間距為兩個盒子間距的較大值
3.margin值可以設(shè)置為負(fù)值

margin是當(dāng)前元素和border的距離；padding時內(nèi)容和border的距離
margin是對外的，padding是對內(nèi)的。

11.盒子之間的關(guān)系：
所謂標(biāo)準(zhǔn)留，就是指在不實(shí)用其他與排列和定位相關(guān)的特殊CSS規(guī)則時，各種元素的排列規(guī)則。

1.文本元素按照從上到下、從左到右的格式布局

2.塊級元素按照從上到下依次排列。

3.內(nèi)嵌元素按照從左到右依次排列。

clear屬性除了可以設(shè)置為了left和right之外，還可以設(shè)置為both，表示同時清楚左右兩邊的影響。

隱藏內(nèi)容，不會占用原來的為位置

當(dāng)內(nèi)容超出div后設(shè)置overflow的值可以設(shè)置隱藏或出現(xiàn)滾動條或auto。

12.定位屬性：
是position的值

1."static" 靜態(tài)定位。表示按照html格式規(guī)則正常定位。

2.“relative” 相對定位。相對于元素原始位置進(jìn)行偏移。

3.“absolute” 絕對定位，時值某元素將定位在已經(jīng)定位的父元素框架或?yàn)g覽器窗口本身的左上角絕對位置。

4.“fixed” 固定定位。類似absolute，不過其包含塊時視窗本身。

margin：0 auto
居中顯示

list-style:none
去掉無需列表的圓點(diǎn)

padding-top:5px;
內(nèi)容到變卡ugnde距離