當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML+CSS详细知识点（下）

發布時間：2024/3/13 HTML 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML+CSS详细知识点（下）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

🔥上一篇🔥HTML+CSS詳細知識點復習（上）

文章目錄

- 五、列表和超鏈接
- - 1、列表標簽
  - 2、CSS控制列表樣式
  - 3、超鏈接
- 六、表格和表單
- - 1、表格
  - 2、表單
- 七、浮動與定位
- - 1、元素的浮動
  - 2、清除浮動
  - 3、overflow屬性
  - 4、元素的定位屬性
  - 5、position屬性

五、列表和超鏈接

1、列表標簽

1、無序列表（<ul>）
無序列表是一種不分排序的列表，各個列表項之間沒有順序級別之分
語法：

type屬性 ul 和 li 都有
屬性值：
disc：默認屬性，實心圓
circle：空心圓
square：實心正方形
如：

演示：

2、有序列表（<ol>）
有序列表是一種強調排列順序的列表
語法：

type屬性：屬性值：
1（默認），1 2 3
a或A，a b c/A B C
i或I ，i ii iii /I II III

start屬性：屬性值：數字（規定項目符號的起始地址）
value屬性：屬性值：數字（規定項目符號的數字）
如：

演示：

3、定義列表（<dl>）
定義列表包含3個標簽，即di、dt、dd
語法：

<dl><dt>定義列表1</dt><dd>dd是定義列表1的描述信息1</dd><dd>dd是定義列表1的描述信息2</dd> </dl>

注意：①dl、dt、dd 3個標簽之間不允許出現其他標簽
②dl標簽必須與dt標簽相鄰

4、列表的嵌套
如：

演示：

2、CSS控制列表樣式

1、list-style-type屬性
屬性值：
disc:實心圓
circle:空心圓
square:實心方塊
none:不使用項目符號
如： li{list-style-type: none;}
演示：

2、list-style-image屬性
如： li{list-style-image: url("images/small.png");}
演示：

3、list-style-position屬性
控制列表項目符號相對于列表項內容的位置
屬性值：
inside：列表項符號位于列表項文本以內
outside：列表項符號位于列表項文本以外（默認值）
如： .in{list-style-position: inside;} .out{list-style-position: outside;}

演示：

4、list-style屬性
如： li{list-style: circle inside;}

3、超鏈接

語法： <a href="跳轉目標" target="目標窗口的彈出方式" >文本或圖像</a>
a 標簽是一個行內元素，用于定義超鏈接
屬性：

href：用于指定鏈接目標的url地址
target：用于指定鏈接頁面的打開方式，_self默認值，在原窗口打開，_blank在新窗口打開

如： <a href="http://www.baidu.com" target="_self">_self在原窗口打開</a> <a href="http://www.csdn.com" target="_blank">_blank在新窗口打開</a>
演示：

鏈接有4中狀態，分為未訪問、已訪問、懸停時和點擊時，可根據鏈接處于不同的狀態設置不同的樣式
通過如下方式獲取鏈接所處的狀態：

a:link 未被訪問 a:visited 已被訪問 a:hover 懸停時 a:active 被點擊

如果同時定義4種狀態的樣式，其書寫順序需要按link–visited–hover–active 順序進行設置，否則失效
如：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>a:link{color: red;}//未被訪問顯示紅色a:visited{color: aqua}//已被訪問顯示aqua色a:hover{color: pink;}//懸停顯示紫色a:active{color: yellow;}//點擊顯示黃色a{text-decoration: none;}</style></head><body><a href="#0">首頁</a><a href="#1">新聞</a><a href="#2">娛樂</a><a href="#3">體育</a><a href="#4">資訊</a><a href="#5">影視</a></body> </html>

演示：

六、表格和表單

1、表格

1、創建表格
語法：

<table><tr><td>單元格內文字</td></tr></table>

tr：用于定義表格的一行，有幾對tr表示表格有幾行
td：用于定義表中的單元格，有幾對td表示表格有幾列
如：

演示：

2、table標簽的屬性

border屬性
設置表格的邊框，默認值為0
如： <table border="10px" >
演示：（可以省略單位px）

cellspacing屬性
單元格與單元格之間的空間，默認距離2px
如： <table border="10px" cellspacing="20px">
演示：

cellpadding屬性
單元格內容與單元格之間的空白間距。默認距離1px
如： <table border="10px" cellpadding="20px">
演示：

width屬性和height屬性
默認表格的寬度和高度是自適應的，依靠表格內的內容來支撐
如： <table border="10px" width="200px" height="200px">
演示：

align屬性
定義表格水平對齊方式，單元格內容不受影響

bgcolor屬性
設置表格的背景顏色
如： <table border="10px" width="200px" height="200px" bgcolor="aqua">
演示：

background屬性
設置表格的背景圖像
如： <table border="10px" width="200px" height="200px" background="images/lufei.jpg">
演示：

3、tr標簽屬性
某一行特殊顯示
如： <tr height="70px" align="center" valign="middle" bgcolor="aqua">
演示：

4、td標簽屬性
某一單元格特殊顯示
如： <th colspan="2">性別</th> <td rowspan="2">北京</td>
演示：（colspan占幾列，rowspan占幾行）

5、th標簽屬性
應用表格時經常需要為表格設置表頭，以使表格的格式更加清晰

2、表單

1、表單的構成

表單控件；
包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、搜索框等
提示信息：
提示用戶進行填寫和操作
表單域：
相當一個容器，用來容納所有的表單控件和提示信息

2、創建表單

action屬性
用于指定接收并處理表單數據的服務器程序的url地址
如： <form action="form_action.asp">

method屬性
用于設置表單數據的提交方式，get/post方法
如： <form action="form_action.asp" method="get">

name屬性
用于指定表單的名稱
如： <form action="form_action.asp" method="get" name="first">

3、表單控件

input控件
語法：<input type="控制類型"/>
type屬性：屬性值：
text：單行文本輸入框
password：密碼輸入框
radio：單選框
checkbox：多選框
button：普通按鈕
submit：提交按鈕
reset：重置按鈕
image：圖像形式的提交按鈕
hidden：隱藏域
file：文件域
disable屬性：屬性值：disable：第一次加載頁面時禁用該控件
checked屬性：屬性值：checked：定義默認被選中的項
maxlength屬性：屬性值：正整數：允許輸入的最多字符
size：屬性值：正整數：input控件在頁面顯示的寬度
如：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><form action="form_action.asp" method="get" name="first">用戶名：<input type="text" value="大明" maxlength="6"/><br>密碼：<input type="password" size="40"/><br>性別：<input type="radio" name="sex" checked="checked" value="男"/><input type="radio" name="sex" value="女"/><br>興趣：<input type="checkbox" value="唱"/><input type="checkbox" value="跳"/><input type="checkbox" value="rap"/><input type="checkbox" value="籃球"/><br>上傳頭像：<input type="file"/><br><input type="submit" value="提交"/><input type="reset" value="重置"/><input type="button" value="普通按鈕"/><input type="image" src="images/small.png"/></form> </body> </html>

演示：

textarea控件
如果需要輸入大量的信息，單行文本輸入框就不在適用，通過textarea可以創建多行文本輸入框
語法：<textarea cols="每行中的字符數" rows="顯示的行數">文本內容</textarea>

如：

演示：（每行顯示50個字符，共顯示5行）

select控件
下拉菜單
語法：

size屬性：指定下拉菜單的可見選項數
multiple屬性：定義multiple="multiple"時，下拉菜單具有多項選擇功能，方法為按住Ctrl同時選擇多項
selected：默認選中
如：

普通下拉框<br><select><option>選項1</option><option>選項2</option><option>選項3</option></select><br>單選默認可見2項<br><select size="2"><option selected="selected">選項1</option><option>選項2</option><option>選項3</option></select><br>多選<br><select multiple="mutiple"><option>選項1</option><option>選項2</option><option>選項3</option></select>

演示：

七、浮動與定位

1、元素的浮動

浮動就是讓元素可以向左或向右移動，直到它的外邊距碰到其父級的內邊距或者是上一個元素的外邊距(這里指的上一個元素不管它有沒有設置浮動，都會緊挨著上一個元素)
語法：選擇器{float:屬性值}
屬性值：left（元素向左浮動）、right（元素向右浮動）、none（元素不浮動）
如：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father{width: 500px;border: 5px solid aqua;}.box1{width: 50px;height: 50px;border: 1px solid black;background-color: red;float: left; }.box2{width: 100px;height: 100px;border: 1px solid black;background-color: yellow;}.box3{width: 150px;height: 150px;border: 1px solid black;background-color: aqua; }p{width: 100px;height: 100px;border: 1px solid blue;background-color: bisque;}</style> </head> <body><div class="father"><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div><p>hello p標簽</p></div> </body> </html>

演示：（給box1設置向左浮動）

（給box1和box2設置向左浮動）

（給box1、box2和box3設置向左浮動）

注意：不管是什么屬性的元素，如果設置了浮動屬性，該元素就變成了具有inline-block屬性的元素
結論：
（1）沒有設置浮動的元素會填充浮動元素留下來的空間
（2）浮動元素會和非浮動元素發生重疊，浮動元素會在圖層最上面
（3）使用浮動時，該元素會脫離文檔流，后面的元素會無視這個元素，但依然會為這個浮動元素讓出位置，并且元素中的文字內容會環繞在其周圍

2、清除浮動

使用浮動時會影響后面相鄰的固定元素。受到其周圍元素浮動的影響，產生了位置上的變化。這時，如果要避免浮動對其他元素的影響，就需要清除浮動。
語法：選擇器{clear:屬性值}
屬性值：left（清除左側浮動）、right（清除右側浮動）、both（清除左右兩側浮動）
如： clear: left;
演示：（給p標簽設置清除左側浮動）

對子元素設置浮動時，如果父元素不設置高度，則子元素會對父元素造成影響（這里去除p標簽）

由于受到子元素浮動的影響，沒有設置高度的父元素就變成了一條直線。子元素與父元素屬于嵌套關系，不存在左右位置，所以使用clear屬性不能清除子元素對父元素的影響

解決方案一：
設置空標記：.box04{clear: both;} /*對空標記應用clear：both；*/
雖然可以清除浮動，但是在無形中增加了毫無意義的結構元素（空標記）。
解決方案二：
對父元素： .father{ overflow: hidden; }
??使用overflow: hidden時，實際上就創建了一個塊級格式化上下文，該塊級格式化上下文決定了height:auto（不設置height時，其默認值為auto）是如何計算的。
??計算塊級格式化上下文的高度時，浮動元素也參與計算。因此，父元素在計算其高度時，加入了浮動元素的高度，就達到了清理浮動的效果。

3、overflow屬性

當盒子模型內的元素超出盒子自身的大小時，內容就會溢出，如果想要規范溢出內容的顯示方式，就需要用到overflow屬性
屬性值：
visible：內容不會被修剪，會呈現在元素框之外（默認值）
hidden：溢出的內容被修剪，修剪的內容不可見
auto：在需要時顯示滾動條，自適應要顯示的內容
scroll：溢出內容被修剪，瀏覽器始終顯示滾動條
如：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> <style>div{width: 100px;height: 100px;border: 1px solid black;background-color: aqua;overflow: visible;} </style> </head> <body><div>初秋的天冰冷的夜回憶慢慢襲來真心的愛就像落葉為何卻要分開灰色的天獨自彷徨城市的老地方真的孤單走過憂傷心碎還要逞強 </div> </body> </html>

演示：（overflow默認屬性值visible）

（overflow屬性值hidden）

（overflow屬性值auto，不超出盒子不顯示滾動條）

（overflow屬性值scroll）

4、元素的定位屬性

1、定位模式
position屬性：

屬性值描述

static	靜態定位
relative	相對定位，相對于其原文檔流的位置進行定位
absolute	絕對定位，相對于上一個已經定位的父元素進行定位
fixed	固定定位，相對于瀏覽器窗口進行定位

2、邊偏移
定位模式僅僅用于定義元素以哪種方式定位，并不能確定元素的具體位置。在CSS3中，通過邊偏移屬性來精確確定元素的位置

屬性描述

top	頂端偏移量，定義元素相對于其父元素上邊線的距離
bottom	底部偏移量，定義元素相對于其父元素下邊線的距離
left	左側偏移量，定義元素相對于其父元素左邊線的距離
right	右側偏移量，定義元素相對于其父元素右邊線的距離

5、position屬性

1、靜態定位static
靜態定位是元素的默認定位方式，當position屬性的取值為static時，可以將元素定位于靜態位置。所謂靜態位置就是各個元素在HTML文檔中默認位置。所以當沒有定義position屬性時，并不說明該元素沒有自己的位置，它會遵循默認值顯示為靜態位置。在靜態定位狀態下，無法通過偏移屬性來改變元素的位置。

2、相對定位relative
相對定位是將元素相對于它在標準文檔流中的位置進行定位，對元素設置相對定位后，可以通過偏移屬性改變元素的位置，但是它在文檔流中的位置仍然保留
如：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father{width: 250px;height: 250px;border: 1px solid saddlebrown;background-color: aquamarine;margin: 0 auto;}.box1,.box2,.box3{width: 50px;height: 50px;border: 1px solid black;background-color: aqua;margin: 10px;}.box2{position:relative;left: 150px;top: 62px;}</style> </head> <body><div class="father"><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div></div> </body> </html>

演示：（box2設置相對定位，偏移都是相對于原來的位置移動，文檔流位置依然保留）

3、絕對定位absolute
絕對定位是將元素依據最近的已經定位的父元素進行定位，若所有父元素都沒有定位，則依據body根元素進行定位
如：

.box2{position:absolute;left: 120px;}

演示：（box2設置絕對定位，因為父元素沒有定位，所以相對于body根元素，即瀏覽器頁面定位）

發現：
（1）外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。
（2）發現當瀏覽器窗口放大或縮小時，box2相對于其父元素位置都發生變化。因為box2設置了絕對定位，相對于頁面固定不變，而父盒子頁面居中，隨頁面變化而變化，所以兩者位置發生變化
（3）對于（2）的解決方法，可以對父盒子設置相對定位relative但不設偏移量

4、固定定位fixed
固定定位是絕對定位的一種特殊形式，它以瀏覽器窗口作為參照物來定義網頁元素（相當于沒有父元素定位的絕對定位）

5、層疊等級屬性z-index
要想調整重疊定位元素的順序，可對定位元素應用z-index層疊等級屬性，其取值可為正整數、負整數和0。默認屬性值為0，取值越大，定位元素在層疊元素中越居上。僅對定位元素生效
如：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1,.box2,.box3{position: relative;}.box1{width: 50px;height: 50px;border: 1px solid black;background-color: red;z-index: 2;}.box2{width: 100px;height: 100px;border: 1px solid black;background-color: yellow;top: -30px;left: 30px;z-index: 1;}.box3{width: 150px;height: 150px;border: 1px solid black;background-color: aqua; top: -60px;left: 60px;}</style> </head> <body><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div> </body> </html>

演示：（box1層疊等級最高，box2第二，box3沒有）

總結

以上是生活随笔為你收集整理的HTML+CSS详细知识点（下）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： SDL—安全培训
下一篇： 9款用HTML5/CSS3制作的动物、人