HTML+CSS基礎知識總結
1.web標準
| 結構上來說html頁面分為head和body兩部分 |
| head里面包含meta標簽（UTF8字符集）、title(網頁標題)、link(外部樣式表引入) body里面是各種常用的標簽， |
| web頁面標準分為結構（html）+樣式（css）+行為（js） |
2.HTML基本標簽
2.1基本標簽
<html> <head> <title> <body> <table> <tr> <td>
<span> <p> <form> <h1> <h2> <h3> <h4> <h5>
<h6> <object> <style> <b> <u> <strong> <i> <div>
<a> <script> <center>
單標簽：<br> <hr> <img> <input> <param> <meta> <link>
2.2表格
<table>
<th></th>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
表格橫向合并： <td colspan="橫向合并行數"></td>
表格豎向合并：<td rowspan="豎向合并行數"></td>
2.3表單
表單提交
<form action="提交地址"></form>
input type型別
<form action="提交地址">
<input type="text" placeholder="我是文本框">
<!-- checked="checked" 這是默認選中 -->
<input type="radio" checked="checked" placeholder="我是單選框">男
<input type="checkbox" placeholder="我是復選框">
<input type="password" name="" id="" placeholder="我是密碼框">
<!-- 固定文本域大小 禁止拖動 resize:none; -->
<textarea style="resize:none;">我是文本域</textarea>
<input type="submit" placeholder="我是提交按鈕">
<!-- 下拉選單 下拉選單默認選中disabled selected hidden -->
<select name="" id="" value="">
<option value="" disabled selected hidden>1</option>
<option value="">2</option>
</select>
</form>
2.4標簽分類和特性
| 塊元素： | div、p、h1-h6、ul、ol、li | 獨占一行 能直接設定寬 |
|---|---|---|
| 行內元素： | a、span、i、em | 可以和別的行內元素占一行、不能直接設定寬高、能設定水平margin,不能設定垂直 margin |
| 行內塊元素： | img、input | 可以和別的行內元素或者行內塊元素占一行、能直接設定寬高 |
3.選擇器
3.1 常用選擇器種類
id選擇器、類選擇器、后代選擇器、子集選擇器、標簽選擇器、并集選擇器
3.2選擇器權重和優先級(重點)
!important ∞無窮大
行內樣式 1000
id選擇器優先級 100
類選擇器優先級 10
標簽選擇器優先級 1
通配符優先級 0
即：!important > 行內樣式 > id選擇器 > 類選擇器 > 標簽選擇器 > 通配符
4.CSS屬性
4.1文字屬性
| font-family | 設定字體 |
| font-size | 設定字體大小 |
| color | 設定字體顏色 |
| font-weight | 設定字體加粗 |
| text-align:center | 設定文本水平居中 |
| line-height | 設定單行文本垂直居中 |
| margin:0 auto | 設定標簽水平居中 |
4.2背景
| background-color | 設定背景顏色 |
| background-color:rgba() | 設定背景透明度 |
| background-image:url() | 設定背景圖片 |
| background-repeat | 設定背景圖片是否重復 |
| background-position | 設定背景圖片位置 |
4.3邊框
| border:2px solid #000; | 設定邊框粗細 型別 顏色 |
| border-radius | 設定邊框圓角 |
| box-shadow | 設定邊框陰影 |
5.盒模型
一個盒子由content+padding+border+margin組成
| padding:10px | 代表上下左右都是10px |
| padding:10px 20px | 上下是10px 左右是20px |
| padding:10px 20px 30px; | 代表上 左右 下 |
| padding:10px 20px 30px 40px; | ;代表上右下左 |
margin同理
6.浮動
浮動的方式：
float: left; 左浮動
float: right;右浮動
float: none; 元素不浮動（默認值）
為什么要浮動？怎么清除浮動？（重點）
頁面布局的時候子元素不浮動的時候會撐起父盒子的高度，如果浮動了父盒子的高度為0，對后面的頁面布局造成影響，所以需要清除浮動，
清除浮動的幾種方式（重點）
(1)額外標簽法
是w3C推薦的做法是通過在浮動元素末尾添加一個空的標簽
例如<div style="clear:both"></div>
優點:通俗易懂，書寫方便
缺點:添加許多無意義的標簽，結構化較差，
(2)overflow:hidden
可以給父級添加:overflow為hidden/ auto/ scro11
優點:代碼簡潔
缺點:內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素，
(3))使用after偽元素清除浮動
使用方法:
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}/*IE6、7專有*/
7.定位
定位模式有三種：絕對定位 相對定位 固定定位
| 絕對定位 | position:absolute; |
| 相對定位 | position:relative; |
| 固定定位 | position:fixed; |
8.display屬性值
| display:none | 隱藏但是不占位置 | 作用：元素展和轉換為塊元素 |
| visibility:hidden | 隱藏但是占據位置 | |
| display:inline | 轉換成行內元素 | |
| display:inline-block | 轉換成行內塊元素 |
9.偽元素
簡記：lvha
| a:link | 初始狀態 |
| a:visited | 訪問過后的 |
| a:hover | 滑鼠經過 |
| a:active | 滑鼠點擊瞬間 |
10.注釋
html注釋 <!-- -->
css中注釋 /* */
js中的注釋 //
11.文本下劃線
| ul去除小圓點 | list-style:none |
| a標簽去除下劃線 | text-decoration:none |
| a標簽橫穿線 | text-decoration:line-through |
| a標簽添加下劃線 | text-decoration:underline |
12.CSS3屬性
旋轉 div 元素：
transform:rotate(30deg);
縮放div元素：
transform: scale(0.98);
div元素陰影：
box-shadow:6px 6px 6px 6px #969494;
邊框圓角：
box-radius:50%；
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/82752.html
標籤：其他
上一篇：js面試題中的異步問題
下一篇：js實作簡單的點名器隨機色