html標籤

HTML標籤

1.h標籤

<h1>主題一</h1>       <!-- 只能出現一次，利於搜索引擎爬取獲得 -->
<h2>主題二</h2>
<h3>主題三</h3>
<h4>主題四</h4>
<h5>主題五</h5>
<h6>主題六</h6>

2.p段落標籤

<p>
    內容...
</p>

3.加粗

<b>this is big tag</b><br>
strong標籤：<strong>this is strong</strong><br>
注：strong標籤不只能夠加粗，還能夠被檢索，相似一個關鍵字

4.a標籤

<a href="#">不會跳轉</a>
href屬性：跳轉的連接，可用互聯網的url地址或本地的html文件路徑，javascript:viod(0),不跳轉

5.img圖片標籤

<img src="" alt="" /> 
src 相對路徑、絕對路徑、http網絡圖片、../當前目錄跳上層
alt 用來描述圖片內容，僅供HTML識別該圖片內容，另方面供搜索引擎識別圖片
width   按照此寬度顯示、當失去比例則會拉伸
height  按照此高度顯示、當失去比例則會拉伸
title   鼠標在圖片上時候，顯示文字信息
注：width/height寬高強調根據圖片寬高來給定，若是沒有寬高則會去計算圖片的寬高度，計算的時候會浪費一些時間，雖然不是很明顯

圖片格式說明：

BMP 佔用空間大，色彩豐富(網頁原設計的時候會採用這種格式)
JPEG    壓縮方式一般是破壞數據性壓縮，在壓縮過程當中圖像的質量會遭受到課件的破壞，主要讓文件變小，提升加載速度
GIF 對 透明色 和 多幀動畫 的支持
PNG 無損壓縮的位圖 格式，支持Alpha通道的 透明/半透明 特性

6.列表

有序列表：
<ol type="A">
    <li>type值爲數字：默認按數字列表排序</li>
    <li>type="a":按小寫字母排序</li>
    <li>type="A":按大寫字母順序排列</li>
    <li>type="i"按小寫羅馬字母排序</li>
    <li>type="I"按大寫羅馬字母排序</li>
</ol>
無序列表：
<ul type="square">
        <li>disc:默認，實心小圓圈</li>
        <li>square：實心方塊</li>
        <li>circle：空心圓</li>
</ul>
自定義列表：
<dl>
    <dt>title</dt>
    <dd>date</dd>
    <dl>description</dl>
    <dd>date</dd>
</dl>

7.特殊符號

符號	做用
&nbsp	空格
&lt	小寫
&gt	大寫
&copy	版權
&times	X符號
&amp	&

表格&表單

1.表格table

<table>
    <tr border="1">
        <td></td>
        <td></td>
    </tr>
</table>

屬性	描述
tr	行元素
td	列元素

2.表單form

<form action="" method="">
    表單域，當提交時會將此域的數據收集併發送給服務器
</form>

屬性	描述
action	指定提交到某個url
method	提交方式,get:URL地址欄上做拼接？再加參數；post:隱式提交方式，看不到，能夠抓包

input標籤：賦予不一樣的type值可實現不一樣的控件
<input type="" />

type類型	描述
text	文本輸入框，maxlength最大長度、onlyready只讀、 disabled禁止
password	暗碼顯示
email	郵箱格式
radio	單選按鈕，checked默認選擇
checkbox	多選框
submit	提交選項，收集表單內name數據，提交到服務器
reset	重置表單選項
button	按鈕
hidden	隱藏域

多選框select

<select>
    <option value="">0</option>
    <option value="">1</option>
    <option value="">2</option>
</select>

快捷語法：option[value="$@0"]{$@0}*3，按tab鍵執行
屬性|描述
---|---
selected|默認選中
size|實現多行下拉
disabled|禁止選擇
多行文本輸入框textarea

<textarea cols="" raws=""></textarea>

屬性	描述
cols	顯示列數
raws	顯示行數

div標籤

div特色

<div></div>
1.默認寬度，自動將盒子拉伸的最寬
2.默認高度爲0，單個不給高度的盒子是沒有任何效果的，但若是有子元素的話會把父元素撐起來，父元素始終包括子元素
3.獨佔一行空間

塊級元素（display:block）：獨佔一行空間，先後元素都會被換行html,body,div,p,form,h,br,ul,ol,di,li,table都爲塊級元素
內聯元素：先後元素不會被換行，沒有寬高度和外邊距
外邊距：元素與元素之間的距離
css|desc
---|---
margin-top|距離頂部的距離，容許負值
margin-right|距離右邊的距離，容許負值
margin-bottom|距離底部的距離，容許負值
margin-left|距離左邊的距離，容許負值
margin|上右下左，垂直 水平, 上 水平 下,容許負值,auto:自適應居中
注：塊元素沒有寬度讓它自適應的話纔有右邊距；有寬度就沒有右邊距（右邊自動填滿內容，不容許更改）
內聯元素沒有寬高度，沒有垂直方向外邊距，只有margin-left,margin-right
內邊距
css|desc
---|---
padding|垂直 水平； 上 右 下 左； 上 水平 下；沒有auto屬性
特色：
1.撐大自身體積
2.不改變有寬度的內容區域
3.內邊距不能居中

邊框

css	desc
border-width	邊框寬度
border-color	邊框顏色
border-style	邊框風格
border-top	上邊框
border-right	右邊框
border-bottom	下邊框
border-left	左邊框
border	邊框簡寫，可包含以上全部樣式

邊框風格
css值|desc
solid|實線
dashed|虛線
double|雙實線
doted|點狀分佈

外邊距重合

同級元素：
當一個塊級元素的下外邊距和下面一個塊級元素的上外邊距同時含有邊距值，則只顯示值大的邊距值（只針對塊級元素的上下方向）
父子型元素：
在子元素內添加上外邊距會，父級元素會跟隨一塊兒下來。
1.如果兩者屬性不一致則不會產生這種狀況，父級爲border,子級爲background;
2.爲父級元素加上overflow屬性也能夠

附：margin:auto屬性配合display:flex（加在父級元素中），能夠達到上下左右居中的效果。