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	設定邊框陰影

soild是實線 dashed是虛線

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;

z-index:999;表示層疊順序或者層級

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%；

Web前端入門 HTML+CSS基礎