一、HTML標簽

HTML標簽可以分為塊標簽，內聯標簽和內聯塊。

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

關于display

display用于表示元素的展示陳列方式。
display：block，把元素轉換成塊便簽，讓標簽擁有塊標簽的特點。
display：inline,把元素轉換成內聯標簽，讓標簽擁有內聯標簽的特點。
display：inline-block，,把元素轉換成內聯塊，讓標簽擁有內聯塊的特點。
display:table,表單元素。
display：none， 元素隱藏 它的位置都沒有了 。

最常用標簽介紹

div：盒子標簽 劃分區域。
p：段落便簽 每個段落之間會有間距。
a：1、 超鏈接 2、下載 跟壓縮包（href直接放壓縮包的路徑，點擊就會下載） 3、錨點（href=”#+id”點擊就會定位到對應id的位置）。
ul：導航類標簽（無序列表），每一條導航用

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

二、CSS樣式

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

<style>/*設置樣式*//*給某個標簽聲明樣式的時候，聲明了什么屬性，該屬性的指就會覆蓋原有的屬性值，沒有聲明的就還是用默認值*/h2{margin:0;//周圍占用的空間為0font-weight: normal;//字體不加粗}a{text-decoration: none;//沒有下滑線}ul{margin:0;}li{list-style: none;//去掉導航的點}.title{font-size: 18px;}/*可以通過 ".class名" 來定義樣式名稱并設置樣式 這叫類選擇器 并且父標簽的樣式屬性值會作用于子標簽上*/.title a{color: #333333;}/*可以通過 ".class名 便簽名"來定義設置了某個樣式的標簽的子標簽的樣式*/.list li{float:left;width:173px;height:120px;}.list li img{width:173px;height:120px;}/*可以通過 ".class名 便簽名 標簽名"來定義設置了某個樣式的標簽的子標簽的子標簽樣式，也就是說可以跨層定義標簽樣式*/#div1{border:1px solid blue !important;}/*可以用"#+id名稱"來給指定id元素配置樣式，并且css選擇器的優先級!important>style>id>class>群組選擇器標簽總體上說誰的范圍小 誰的優先級就高,!important除外* */.div2>.p1{border:1px solid red;}/** 后代選擇器 所有后代.div 元素 div>元素 直接后代 不能隔代 **/</style>

2、css樣式單獨寫在css文件中，

在css文件中直接寫css樣式代碼，不用被任何標簽包圍。例如：

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

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

3、css屬性

a、padding：造成盒子整體變大，并不是內容變大，背景會一直鋪到padding區，如果沒有padding ，背景的寬度就是width的寬度，高度同理。

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

b、margin：外邊距，邊框以外的部分，背景并不會鋪到margin的區域。

margin可以改變元素的位置
margin 一個值 上 右 下左 都是這個值
margin 二個值 上下 左右
margin 三個值 上 左右 下
margin 四個值 上 右 下 左
margin-top：上
margin-right：右
margin-bottom：下
margin-left：左

margin的重疊

當相鄰的元素出現垂直的margin的時候，margin會重疊，如果垂直方向的2個值不一樣，元素間的距離會以margin比較大的為準。

margin的傳遞

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

補充

當不同標簽設置同樣屬性值時，可以用“,”隔開，然后把要設置的樣式屬性寫在一起，例如：
p,body{
margin:0;
}

三、小知識點

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

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

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

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