一、HTML標(biāo)簽

HTML標(biāo)簽可以分為塊標(biāo)簽，內(nèi)聯(lián)標(biāo)簽和內(nèi)聯(lián)塊。

1、塊標(biāo)簽block：div p h1-h6 ul li ol li dl dd dt 。
特點(diǎn)：a、支持任何的樣式。b、獨(dú)占一行。c、不設(shè)置寬度時(shí)（不等于width:0;），寬度默認(rèn)充滿整行。
2、內(nèi)聯(lián)標(biāo)簽inline: a span time em mark
特點(diǎn)：a、不支持寬高（設(shè)置后無(wú)效）。b、可以在一行顯示。c、寬度由內(nèi)容撐開(kāi)。d、換行被解析成空格（標(biāo)簽內(nèi)容和標(biāo)簽之間的換行都是解析成空格）。e、無(wú)法設(shè)置上下margin 只有左右margin。
3、內(nèi)聯(lián)塊inline-block：img。
特點(diǎn)：a、支持寬高。b、可以在一行顯示。c、換行被解析成空格。

關(guān)于display

display用于表示元素的展示陳列方式。
display：block，把元素轉(zhuǎn)換成塊便簽，讓標(biāo)簽擁有塊標(biāo)簽的特點(diǎn)。
display：inline,把元素轉(zhuǎn)換成內(nèi)聯(lián)標(biāo)簽，讓標(biāo)簽擁有內(nèi)聯(lián)標(biāo)簽的特點(diǎn)。
display：inline-block，,把元素轉(zhuǎn)換成內(nèi)聯(lián)塊，讓標(biāo)簽擁有內(nèi)聯(lián)塊的特點(diǎn)。
display:table,表單元素。
display：none， 元素隱藏 它的位置都沒(méi)有了 。

最常用標(biāo)簽介紹

div：盒子標(biāo)簽 劃分區(qū)域。
p：段落便簽 每個(gè)段落之間會(huì)有間距。
a：1、 超鏈接 2、下載 跟壓縮包（href直接放壓縮包的路徑，點(diǎn)擊就會(huì)下載） 3、錨點(diǎn)（href=”#+id”點(diǎn)擊就會(huì)定位到對(duì)應(yīng)id的位置）。
ul：導(dǎo)航類(lèi)標(biāo)簽（無(wú)序列表），每一條導(dǎo)航用

表示。
ol:導(dǎo)航類(lèi)標(biāo)簽（無(wú)序列表），會(huì)在每個(gè)導(dǎo)航前加上序號(hào)，type=”a”表示用字母表示序號(hào)，type=”1”用數(shù)字表示序號(hào)，start=”2“表示序號(hào)從第二個(gè)開(kāi)始。ol用得非常少。
b:標(biāo)簽規(guī)定粗體文本。
big:標(biāo)簽呈現(xiàn)大號(hào)字體效果。
body:元素定義文檔的主體
span:可擁有操作字體樣式。
br:可插入一個(gè)簡(jiǎn)單的換行符。
br 標(biāo)簽是空標(biāo)簽（意味著它沒(méi)有結(jié)束標(biāo)簽，因此這是錯(cuò)誤的：
）。在 XHTML 中，把結(jié)束標(biāo)簽放在開(kāi)始標(biāo)簽中，也就是<br />。
button： 標(biāo)簽定義一個(gè)按鈕。
center：對(duì)其所包括的文本進(jìn)行水平居中。
dialog： 標(biāo)簽定義對(duì)話框或窗口。
dl： 標(biāo)簽定義了定義列表（definition list）。
dt： 標(biāo)簽定義了定義列表中的項(xiàng)目（即術(shù)語(yǔ)部分）。
form： 標(biāo)簽用于為用戶輸入創(chuàng)建 HTML 表單。
h1-h6:標(biāo)題。
head： 標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。 中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等。
hr： 標(biāo)簽在 HTML 頁(yè)面中創(chuàng)建一條水平線。
img： 元素向網(wǎng)頁(yè)中嵌入一幅圖像。
input： 標(biāo)簽用于搜集用戶信息。
label： 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。
li： 標(biāo)簽定義列表項(xiàng)目。
option： 元素定義下拉列表中的一個(gè)選項(xiàng)（一個(gè)條目）。
progress： 標(biāo)簽標(biāo)示任務(wù)的進(jìn)度（進(jìn)程）。
script： 標(biāo)簽用于定義客戶端腳本，比如 JavaScript。
select： 元素可創(chuàng)建單選或多選菜單。
source： 標(biāo)簽為媒介元素（比如 <video> 和<audio>）定義媒介資源。
span: 標(biāo)簽被用來(lái)組合文檔中的行內(nèi)元素。
style:標(biāo)簽用于為 HTML 文檔定義樣式信息。
table: 標(biāo)簽定義 HTML 表格。簡(jiǎn)單的 HTML 表格由 table 元素以及一個(gè)或多個(gè) tr、th 或 td 元素組成。tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元。
tbody: 標(biāo)簽表格主體（正文）。該標(biāo)簽用于組合 HTML 表格的主體內(nèi)容。
td: 標(biāo)簽定義 HTML 表格中的標(biāo)準(zhǔn)單元格。
th:定義表格內(nèi)的表頭單元格。
thead:標(biāo)簽定義表格的表頭。該標(biāo)簽用于組合 HTML 表格的表頭內(nèi)容。
time: 標(biāo)簽用于包含時(shí)間，不會(huì)在任何瀏覽器中呈現(xiàn)任何特殊效果。
title： 元素可定義文檔的標(biāo)題。
tr： 標(biāo)簽定義 HTML 表格中的行。
u： 標(biāo)簽可定義下劃線文本。
ul： 標(biāo)簽定義無(wú)序列表。
video： 標(biāo)簽定義視頻，比如電影片段或其他視頻流。

二、CSS樣式

1、可以在HTML文件中的head部分定義style標(biāo)簽，在里面定義各種樣式，詳細(xì)用法如下：

<style>/*設(shè)置樣式*//*給某個(gè)標(biāo)簽聲明樣式的時(shí)候，聲明了什么屬性，該屬性的指就會(huì)覆蓋原有的屬性值，沒(méi)有聲明的就還是用默認(rèn)值*/h2{margin:0;//周?chē)加玫目臻g為0font-weight: normal;//字體不加粗}a{text-decoration: none;//沒(méi)有下滑線}ul{margin:0;}li{list-style: none;//去掉導(dǎo)航的點(diǎn)}.title{font-size: 18px;}/*可以通過(guò) ".class名" 來(lái)定義樣式名稱(chēng)并設(shè)置樣式 這叫類(lèi)選擇器 并且父標(biāo)簽的樣式屬性值會(huì)作用于子標(biāo)簽上*/.title a{color: #333333;}/*可以通過(guò) ".class名 便簽名"來(lái)定義設(shè)置了某個(gè)樣式的標(biāo)簽的子標(biāo)簽的樣式*/.list li{float:left;width:173px;height:120px;}.list li img{width:173px;height:120px;}/*可以通過(guò) ".class名 便簽名 標(biāo)簽名"來(lái)定義設(shè)置了某個(gè)樣式的標(biāo)簽的子標(biāo)簽的子標(biāo)簽樣式，也就是說(shuō)可以跨層定義標(biāo)簽樣式*/#div1{border:1px solid blue !important;}/*可以用"#+id名稱(chēng)"來(lái)給指定id元素配置樣式，并且css選擇器的優(yōu)先級(jí)!important>style>id>class>群組選擇器標(biāo)簽總體上說(shuō)誰(shuí)的范圍小 誰(shuí)的優(yōu)先級(jí)就高,!important除外* */.div2>.p1{border:1px solid red;}/** 后代選擇器 所有后代.div 元素 div>元素 直接后代 不能隔代 **/</style>

2、css樣式單獨(dú)寫(xiě)在css文件中，

在css文件中直接寫(xiě)css樣式代碼，不用被任何標(biāo)簽包圍。例如：

div{width:80px;height:80px;border:1px solid green;}

然后在需要應(yīng)用的HTML文件中引入即可使用，引用方法如下：
<link href="css/css.css" rel="stylesheet" />
補(bǔ)充：href的值是引入的css文件的路徑，rel=”stylesheet”告訴瀏覽器引入的是樣式表。
每個(gè)HTML文件可以引入多個(gè)css文件，沒(méi)有限制。
一個(gè)css文件也可以同時(shí)被多個(gè)HTML文件引用。

3、css屬性

a、padding：造成盒子整體變大，并不是內(nèi)容變大，背景會(huì)一直鋪到padding區(qū)，如果沒(méi)有padding ，背景的寬度就是width的寬度，高度同理。

padding-top:上
padding-right：右
padding-bottom：下
padding-left：左
padding 一個(gè)值 上 右 下左 都是這個(gè)值
padding 二個(gè)值 上下 左右
padding 三個(gè)值 上 左右 下
padding 四個(gè)值 上 右 下 左
盒子總體寬度大小=width+邊框+左右padding
盒子總體高度大小=height+邊框+上下padding

b、margin：外邊距，邊框以外的部分，背景并不會(huì)鋪到margin的區(qū)域。

margin可以改變?cè)氐奈恢?
margin 一個(gè)值 上 右 下左 都是這個(gè)值
margin 二個(gè)值 上下 左右
margin 三個(gè)值 上 左右 下
margin 四個(gè)值 上 右 下 左
margin-top：上
margin-right：右
margin-bottom：下
margin-left：左

margin的重疊

當(dāng)相鄰的元素出現(xiàn)垂直的margin的時(shí)候，margin會(huì)重疊，如果垂直方向的2個(gè)值不一樣，元素間的距離會(huì)以margin比較大的為準(zhǔn)。

margin的傳遞

當(dāng)父子級(jí)結(jié)構(gòu)的時(shí)候，子級(jí)設(shè)置了垂直方向的margin會(huì)傳遞給父級(jí)，當(dāng)父元素沒(méi)有設(shè)置垂直的margin值的時(shí)候，就像是子元素把垂直margin的值賦值給父元素的垂直margin的值，當(dāng)父元素有垂直margin值的時(shí)候，父元素與其他元素的垂直距離取，父子元素中垂直margin比較大的那個(gè)。左右方向的margin父子元素互不影響。
那如果子元素想設(shè)置與父元素的周邊（父元素的外圍，上下左右）的距離，該怎么做呢？
1、 給父級(jí)加邊框
2、 在父元素設(shè)置padding，要注意父元素設(shè)置了padding體積會(huì)變大，若想保持原來(lái)大小，要將寬高減去padding。

補(bǔ)充

當(dāng)不同標(biāo)簽設(shè)置同樣屬性值時(shí)，可以用“,”隔開(kāi)，然后把要設(shè)置的樣式屬性寫(xiě)在一起，例如：
p,body{
margin:0;
}

三、小知識(shí)點(diǎn)

1、去掉導(dǎo)航的點(diǎn)
li{
list-style: none;
}
2、讓字體在該容器內(nèi)垂直居中的方法：
line-height:容器的高度；
3、內(nèi)聯(lián)標(biāo)簽不能放塊標(biāo)簽。
4、脫離文檔流的元素設(shè)置margin沒(méi)有用。
5、text-align: center;能設(shè)置文本和內(nèi)聯(lián)子標(biāo)簽水平居中顯示。

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專(zhuān)家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的HTML标签和CSS个人总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。