HTML標籤和CSS個人總結
一、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;//周圍佔用的空間為0
font-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;能設定文字和內聯子標籤水平居中顯示。
相關文章
- Python HTML和CSS 1:html文件結構和常用標籤PythonHTMLCSS
- HTML中IMG標籤總結HTML
- CSS&HTML標籤CSSHTML
- html和css總結HTMLCSS
- 常用的HTML標籤詳解與總結HTML
- day42:HTML標籤和CSS選擇器HTMLCSS
- HTML中Progress標籤的定義及用法總結!HTML
- HTML簡介,結構,標籤以及標籤語義HTML
- HTML <a> 標籤HTML
- html標籤HTML
- HTML標籤(基本標籤的使用)HTML
- 常用HTML標籤2:表格和列表HTML
- HTML 常用的標籤和屬性HTML
- 初入HTML/Css的總結HTMLCSS
- html標籤整理HTML
- HTML 常用標籤HTML
- HTML <label> 標籤HTML
- HTML <body>標籤HTML
- html基本標籤HTML
- HTML <div>標籤HTML
- html列表標籤HTML
- HTML <meta>標籤HTML
- HTML <iframe>標籤HTML
- HTML <span>標籤HTML
- HTML <head>標籤HTML
- HTML <figcaption> 標籤HTMLGCAPT
- HTML <dialog> 標籤HTML
- HTML <time> 標籤HTML
- HTML <aside> 標籤HTMLIDE
- HTML <article> 標籤HTML
- HTML <section> 標籤HTML
- HTML <main> 標籤HTMLAI
- HTML <var> 標籤HTML
- HTML <canvas> 標籤HTMLCanvas
- HTML常用標籤HTML
- HTML <header> 標籤HTMLHeader
- HTML <footer> 標籤HTML
- HTML <nav> 標籤HTML
- 01 HTML標籤HTML