HTML基礎標籤和CSS基礎樣式總結

阿新 • • 發佈：2020-12-13

HTML

1. 基礎

HTML 英文全稱 Hyper Text Markuo Language 超文字標記語言描述網頁內容和外觀的標準

1.1HTML檔案的基本結構

<html><!--開始標記-->
    <head>
        <!--檔案頭內容-->
    </head>
    <body>
        <!--檔案體內容-->
    </body>
</html>

2.HTML基本標記

2.1 頭部資訊標記

不會顯示在網頁上

<head>
    <meta name="引數"content="具體的引數值">
    <meta http-equiv="引數" content="具體的引數值"/>
    
    <title>頁面標題標記</title>
</head>

name的引數
1. keyword 定義具體的引數值為關鍵字
2. description 定義網頁的描述
3. robots 告訴爬蟲頁面許可權，具體引數值有：all, none, index, noindex, follow, nofollow,預設all
4. author 標註網頁作者
http-equiv有三個引數
1. content-type: 在content中定義文件型別和編碼
2. default-style: 規定預定義的樣式
3. expires 期限超時後重新從伺服器獲取時間格式：GMT格林威治標準時間
4. pragma （cache模式）禁止從快取中訪問頁面內容
5. refresh 在規定時間跳轉到指定網頁
  <meta http-equiv="Refresh"content="2;URL=http://www.****.com">
  
  2s後跳轉到URL指定頁面
6. set-cookie
  <meta http-equiv="Set-Cookie"content="cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">
  網頁過期後刪除cookie
7. window-type
  <meta http-equiv="window-target" content="_top" />
  強制以當前視窗獨立頁面顯示
8. content-language 顯示語言的設定
9. cache-control 快取控制 no-cache, no-store, max-age等

2.2 頁面的標記主體body

<body
	bgcolor="背景顏色" background="圖片地址" 
	text="文字顏色" link="超連結顏色" 
	alink="正在訪問的顏色" vlink="訪問後的顏色" 
	topmargin=""leftmargin=""
>

2.3

頁面註釋標記

3. 文字與段落

3.1 標題

<h1 align="對齊方式"></h1>
對齊方式=[left,center, right]
<h2></h2>
......
<h6></h6>
h為headline的簡寫

3.2文字font

<font size="" color="" face="字型"></font>

3.3文字格式化標記

粗體標記
```
<b></b>
<strong></strong>
```
斜體標記
```
<i></i>
<em></em>
<cite></cite>
```
上標標記

<sup></sup>
下標標記
<sub></sub>
大字號標記
<big></big>
小字號標記
<small></small>
下劃線標記
<u></u>

3.4 段落標記

段落標記

<p align=""></p>
- align屬性值：center、right
換行標記/不換行標記
<br>
<nobr>文字內容<nobr>

連續多個標記可以實現多次換行ngying

水平線

<hr width="寬度" size="高度" noshade color="十六進位制顏色程式碼" align="對齊方式">
noshade=去除水平線陰影

3.5 特殊符號和程式碼

HTML 原始碼	顯示結果	描述
`<`	<	小於號或顯示標記
`>`	>	大於號或顯示標記
`&`	&	可用於顯示其它特殊字元
`"`	“	引號
`®`	®	已註冊
`©`	©	版權
`™`	™	商標
`&ensp;`		半個空白位
`&emsp;`		一個空白位
` `		不斷行的空白

4. 影象

GIF：可以製作動圖
JPEG：不支援透明圖和動態圖
PNG：提供了最小壓縮又不失真的技術

4.1 影象插入

<img src="圖片原始檔地址" alt="提示文字" width="" height="" />
<img src="" border="邊框" vspace="垂直邊距" hspace="水平邊距" align="對齊格式" />
<img src="" dynsrc="設定視訊檔案的播放" loop="迴圈播放次數"/>
<img src="圖片原始檔地址" alt="提示文字" width="" height="" usemap=”映像地圖“/>

align的取值
- buttom：與當前行文字底部對齊
- top：與當前行文字頂端對齊
- middle、center 圖片水平中線與文字中線對齊
- left：左對齊
- right：右對齊

影象熱區連結

<img sre="" usemap="地圖名稱" />
<map name="地圖名稱">
	<area shape="形狀名稱" coords="座標" herf="連結地址">
    <area shape="形狀名稱" coords="座標" herf="連結地址">
    <area shape="形狀名稱" coords="座標" herf="連結地址">
</map>

5. 列表

5.1 有序列表

<ol type="序號型別" start="初始值（只能是數字）">
    <li></li>
    <li></li>
    <li></li>
</ol>

序號型別：1、A、a、I、i

5.2 無序列表

<ul type="序號型別">
    <li></li>
    <li></li>
    <li></li>
</ul>
<!--目錄列表標記-->
<dir>
	<li></li>
    <li></li>
    <li></li>
</dir>
<!--選單列表標記-->
<menu>
	<li></li>
    <li></li>
    <li></li>
</menu>

序號型別：Disc、circle、square分別對應實心圓、空心圓，和空心方塊

5.3 定義列表

<dl>
    <dt>定義</dt><dd>對定義的描述</dd>
    <dt>定義</dt><dd>對定義的描述</dd>
    <dt>定義</dt><dd>對定義的描述</dd>
</dl>

6. 表格

6.1 表格及基本樣式

<table height="" width="" align="" border="" bordercolor="#fff" cellspacing="單元格間距" cellpadding="文字與邊框距離值" bgcolor="背景顏色，可被覆蓋" background="背景影象地址">
    <caption>表格的標題</caption>
    <th>表頭1</th><th>表頭2</th>
    <tr height="行高" bordercolor="邊框顏色" bgcolot="" background="" align="行內文字對齊方式" valgin="top,middle,bottom">  
        <td></td>  <td width="" height="" bgcolor="" bordercolor="#fff" bordercolorlight="#fff" bordercolordark="#fff"></td>
    </tr>
    <tr>  
        <td colspan="水平跨度，列數"></td>
    </tr>
    <tr>  
        <td rowspan="垂直跨度，行數"></td>  <td></td>
    </tr>
    <tr>  
        <td align="" valign=""></td>  <td></td>
    </tr>
    
</table>

6.2 表格的結構

<table>
    <thead>
        <tr> <td></td><td></td> </tr>
    </thead>
    
    <tbody>
        <tr> <td></td><td></td> </tr>
    </tbody>
    
    <tfoot>
        <tr> <td></td><td></td> </tr>
    </tfoot>
</table>

7. 超連結

7.1 內部連結

<a href="檔案位置" target="視窗開啟方式"></a>

target引數
- _self：當前頁面開啟
- _blank：新頁面開啟
- _top：頂層框架中開啟
- _parent：當前的上一層框架中開啟

7.2 錨點

<!--建立錨點-->
<a name="錨點名稱"></a>
<!--使用錨點-->
<a href="#錨點名稱"></a>
<!--使用其他頁面錨點-->
<a href="連結地址#錨點名稱"></a>

7.3 外部連結

<a href="URL" target="視窗開啟方式"></a>
<a href="mailto:mail">發生郵件</a>
<a href="ftp://ftp地址">發生郵件</a>
<a href="telent://地址">發生郵件</a>
<a href="檔案地址">下載檔案</a>

8. 新增多媒體

8.1 滾動標記

<marquee direction="滾動方向" behavior="滾動方式" scrollamount="滾動速度" scrolldelay="時間間隔" loop="迴圈次數" height="" width="" bgcolor="" hspace="水平範圍" vspace="垂直範圍">滾動內容</marquee>

滾動方向：
- up
- down
- left(預設)
- right
滾動方式：
- scrool：（預設）迴圈滾動
- slide：滾動一次停止
- altermate：來回交替滾動
滾動速度：每次滾動的長度，畫素為單位
時間間隔：單位毫秒

8.2 插入音視訊，動畫

<embed src="資源地址" width="" height=""></embed>

8.3 背景音樂

<bgsound src="背景音樂地址.avi/.mp3" loop="迴圈次數"></bgsound>

8.4 Java applet

<applet code="**.class" width="" height="">
    <param name="資料夾名稱" value="圖片名稱">
</applet>

9. 框架

9.1 框架基本使用

<frameset rows="框架高度，框架高度，…" frameborder="0/1,no/yes" framespacing="邊框寬度" bordercolor="邊框顏色" border=“邊框寬度”>
    <frame src="頁面原始檔地址" name="頁面名稱" noresize></frame>
    <frame src="頁面原始檔地址" marginwidth=“” marginwidth=“”></frame>
	<frame src="頁面原始檔地址" scroling="yes, no, auto"></frame>
	...
</frameset>
<noframes>不支援frame時顯示的內容</noframes>

高度、寬度為畫素值或者百分比組成

9.2 浮動框架

<iframe src="" width="px"height="px" align="left\right\middle\bottom" scrolling="是否顯示滾動條">
    
</iframe>

9.3 建立框架連結

通過target互相連線起來

<frameset rows="框架高度，框架高度，…" frameborder="0/1,no/yes" framespacing="邊框寬度" bordercolor="邊框顏色" border=“邊框寬度”>
    <frame src="頁面原始檔地址" name="頁面名稱" noresize></frame>
	<frame src="頁面原始檔地址" scroling="yes, no, auto">
		<a href="URL" target="頁面名稱"></a>
	</frame>
</frameset>

浮動框架可以設定target為自己的名字

10. 使用表單

10.1 表單標記

<form ation="表單處理程式" name="表單名稱" method="傳輸方法" target="目標視窗開啟方式" enctype="傳送之前的編碼格式">
    
</form>

10.2 表單物件

<input name="控制元件名稱" type="型別" value="預設值" size="控制元件長度" maxlength="最長字元數" />
<input type="text" />
<input type="password" />
<input type="radio" value="單選按鈕的值" /> //可以設定屬性checked 預設選中
<input type="checkbox" value="複選框取值" />
<input type="button" onclock="處理程式"/>
<input type="submit" />
<input type="reset" />
<input type="image" src=""/>
<input type="hidden" /> //隱藏提交的，對使用者不可見的資料
<input type="file" />

10.3 按鈕

<button autofocus="autofocus" ></button>
<!--載入頁面後自動獲取焦點的按鈕-->
<button disable="disable"></button>
<!-- 禁用的按鈕 -->
<button form="form_id"></button>
<!-- 規定按鈕屬於一個或多個表單 -->
<button formation="URL" type="submit"></button>
<!-- 規定按鈕提交時向何處傳送表單資料，該url覆蓋表單的url -->
<button formenctype="applation/x-www-form-urlencoded"></button>
<button formenctype="multipart/form-data"></button>
<button formenctype="text/plain"></button>
<!-- 規定傳送至服務端之前如何編碼，覆蓋form的enctype屬性 -->
<button formmethod="get|post"></button>
<!-- 規定用於傳送表單的HTTP方法 -->
<button formnovalidate></button>
<!-- 對錶單資料不進行驗證 -->
<button formtarget=""></button>
<!-- 開啟action URL的位置 -->
<button name=""></button>
<!-- 按鈕名稱 -->
<button type="reset|buttom|submit"></button>
<!-- 規定按鈕的初始值 -->
<button value="text"></button>
<!-- 按鈕的初始值 -->

10.3 選單和列表

10.3.1 下拉選單

<select name="">
    <option vlue="選項值" selected="selected">顯示內容</option>
    <option vlue="選項值">顯示內容</option>
    <option vlue="選項值">顯示內容</option>
    <option vlue="選項值">顯示內容</option>
</select>

10.3.2 列表

<select name="" size="列表顯示數量" multiple>
    
</select>

10.4文字域

<textarea name="textarea" cols="35" rows="5"></textarea>

10.5 ID標記

id=元素標識名

11. HTML的元素分類

11.1塊元素：

常見塊狀元素：div,p,ul,ol,li,dl,dt,dd,form,hr,table,tr,td,h1-h6,filedset,caption
塊狀元素特點：

以塊的形式顯示為一個矩形區域；
塊狀元素獨佔一行，自上而下排列；
塊狀元素可以定義自己的寬度和高度，以及盒模型中的margin,padding,border；
塊狀元素可以作為一個容器包含其他的塊狀元素或內聯元素。

11.2 內聯元素（行內元素）

常見內聯元素：a,strong,b,i,em,span,label

內聯元素特點：

（a）內聯元素在一行逐個進行顯示；

（b）內聯元素沒有自己的形狀，不能定義寬度和高度，它的寬高由內容來決定；

（c）內聯元素設定與高度相關的一些屬性（如margin-top,margin-bottom,padding-top,padding-bottom,line-height），顯示無效或顯示不準確；

（d）內聯元素設定左右填充和外間距是可以的。

11.3內聯塊級元素

img,input,textarea

內聯塊狀元素特點：

　　（a）即具有內聯元素特點，也具有塊狀元素特點

　　（b）即可以定義容器的寬，高，margin，padding等，還可以和其他內聯元素在一行顯示

11.4元素型別轉換

display:block|inline|inline-block|none|list-item;

　　block:將元素轉換為塊狀元素（大部分塊狀元素的預設display屬性值）

　　inline:將元素轉換為內聯元素（大部分內聯元素的預設display屬性值）

　　inline-block:將元素轉換為內聯塊狀元素（img,input等元素的預設display屬性值）

　　list-item:將元素轉換為列表型別（li的預設display屬性值）

　　none:元素隱藏不可見

12. 佈局標籤

佈局標籤就是對div語義化

header ：頭部資訊
nav：導航欄
aside：側邊欄
main：內容區域
footer：底部資訊
article：文章詳情
section：頁面分割槽

CSS樣式表

1. 基本使用

選擇符{
樣式屬性：取值；
……
}

選擇符可以為標籤或定義了id或class的物件

html中引用外部樣式表

<link rel="stylesheet" type="text/css" href="style.css">

內部樣式表

<style type="text/css">
...
@import style.css //引用外部樣式表
<style>

內嵌樣式表：定義在HTML標籤裡面的樣式

2. 字型樣式

body{
    font-family:"字型1"，"字型2";//不支援字型1時採用自字型2，依次類推，瀏覽器不支援定義的所有字型，採用預設字型
    font-size:xx-small,x-small,small,medium,large,x-large,xx-large,larger,smaller,12px;
    font-style:normal,italic,oblique;//分別時正常，斜體，偏斜體
    font-width:normal,bold,bolder,lighter,number;
    //分別是正常、粗體、特粗體、特細體，number取100-900之間整百的數字
    font-variant:normal,small-caps;//正常和將小寫變為較小的大寫
    font:取值;字型的複合屬性，值之間以空格相連
    text-transform:none,capitalize,uppercase,lowercase;大小寫轉換
}

larger、small:相對於父物件字型尺寸進行相對增加、減少

3. 顏色、背景屬性

body{
	color:#ddd,red;
    background-color:#ddd,red;
    background-image:url(影象地址);
    background-repeat:no-repeat,repeat,repeat-x,repeat-y;//背景影象是否重複
    background-accachment:scroll,fixed;//背景滾動/固定；
    background-position:位置取值;
    background:取值;//背景複合屬性
        
}

位置取值：
- 長度屬性X，Y
- 百分比
- 關鍵字

4. 段落屬性

body{
    word-spacing:取值;//數值+單位
    letter-spacing:取值;
    text-decoration:none,underline,overline,line-through,blink;//blink是文字閃爍效果
    vertical-algin:baseline,sub,super,top,text-top,middle,text-bottom;
    //瀏覽器預設，下標，上標，垂直靠上對齊，和上級元素的字型向上對齊，垂直居中對齊，和上級元素中的字型向下對齊
    text:left,right,center,justify;//justify為兩端對齊
    text-indent:縮排量;//縮排量為長度值或一個百分比
    line-height:行高值;//長度、倍數、百分比
    write-space:normal,pre,nowrap;//預設，按照原始碼顯示，強制同一行顯示文字
}

body{
    unicode-bidi:bidi-override|normal|embed;
    direction:ltr|rtl|inherit;//排序左到右，右到左，使用父元素的設定
}

embed：作用於inline元素，direction屬性的值指定嵌入層，在物件內部進行隱式重排序

5. 盒模型

6. 邊框屬性

div{
    border-style:none|dotted|dashed|solid|double|groove|ridge|inset|outset;
    //無、點、虛線、實線、雙實線、溝槽、脊型、凹陷、突起
    border-width:medium|thin|thick|number;//預設寬度、小於預設、大於預設、數值單位
    border-color:#ddd|red;
    border:屬性;
}

7. 定位屬性

div{
    position:static|absolute|fixed|relative;
    //預設、絕對定位、元素不隨頁面滾動、相對定位，元素不可層疊
    top:auto|數值|百分比;
    right:auto|數值|百分比;
    left:auto|數值|百分比;
    buttom:auto|數值|百分比;
    float:none|left|right;
    claer:none|left|right|both;//指定一個元素是否允許其他元素漂浮在它周圍
    clip:auto|rect(數字);//數字依據上下左右的順序提供值左上角計算的四個偏移數值
}

z-index

8. 層

div{
    z-index:auto|數字;//預設為1，位於最底層
    width:auto|長度值;
    height:auto|寬度值;
    overflow:visible|auto|hidden|scroll;//可見，自動顯示滾動條，隱藏，總是顯示滾動條
    visible:inherit|visible|hidden;
}

9.列表屬性

.lsit{
    list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none;
    list-style-image:none|url();
    list-style-position:outside|inside;
    list-style:引數;//複合屬性
    
}

10. 游標屬性

div{
    cursor:auto|形狀取值|url();
}

形狀取值

11. 濾鏡屬性

11.1 不透明度

div{
    filter:alpha(引數=數值,引數=數值);
}

11.2 動感模糊

div{
    filter:blur(add=引數值,direction=引數值,strength=引數值);
}

add：是否顯示元素圖片
direction：設定動態模糊的方向
strength：設定動態模糊的強度，預設是五個，只能是整數

11.3 對顏色透明處理

div{
    filter:chroma(color=顏色程式碼或者關鍵字);
}

11.4 陰影效果

div{
    dropShadow(color=陰影顏色,offX=,offY=,positive=陰影是否透明)
}

11.5 物件翻轉

div{
    filter:FlipH;
    filter:FlipV;
}

11.6 發光效果

div{
    filter:Glow(color=#ddd, strength=強度值);
    //強度值1-155，預設為5
}

11.7 灰度處理、反相、X光效果、遮罩效果、波形效果

div{
    filter:gray;
    filter:invert;
    filter:xray;
    filter:Mask(color=#ddd;)
    filter:wave(add=是否按照波形打亂物件,freq=圖片上波浪數目,lightstrength=波浪光照強度0·100,phase=起始位置,strength=波浪強度大小)
}