歡迎評論點贊交流,轉發請添加原博客連接謝謝!
Ctrl鍵+F 可以查找你想要的內容哦!
html常用標簽
- htmi結構
<!DOCTYPE html> <!--文檔聲明頭,它是指明了該頁面使用哪個 HTML 版本進行編譯。-->
<html lang="en"><!--最外層的標簽，它表示文檔內容的開始.-->
<head><!--用於表示網頁的中的一個基礎的信息(元信息)-->
<meta charset="UTF-8"><!--meta標簽共有兩個屬性，它們分別是http-equiv屬性和name屬性，不同的屬性又有不同的參數值，
這些不同的參數值就實現了不同的網頁功能。-->
<title>Title</title><!--當前網頁的主題。-->
</head>
<body><!--標簽包含頁面中所有的可見元素，網頁中的文本的展示內容-->
</body>
</html>
- HTML全稱HyperText Mackeup Language，超文本標記語言。比如網頁的超鏈接、圖片、音頻、視頻都稱為超文本。
| 標簽 | 作用 |
|---|---|
<!DOCTYPE html> |
文檔聲明 |
<!--注釋--> |
注釋 |
<html></html> |
最外層的標簽 |
<head></head> |
元素包含了所有的頭部標簽元素 |
<meta/> |
描述了一些基本的元數據。{單閉合} |
<title></title> |
標簽定義了不同文檔的標題。 |
<body></body> |
可見的頁面內容 |
<script></script> |
定義客戶端腳本 |
<h1></h1>到<h6></h6> |
標題標簽,數字越小字體越大{獨行} |
<p></p> |
段落標簽{獨行} |
<strong></strong>(已廢棄) |
強調,粗體 |
<em></em>(已廢棄) |
斜體 |
<i></i> |
斜體 |
<img/> |
圖片標簽 |
<a></a> |
超鏈接 |
<form></form> |
表單 |
<table></table> |
表格 |
<tr></tr> |
表格中的行 |
<td></td> |
表格的單元格 |
<th></th> |
加粗的單元格 |
<thead></thead> |
表格的標簽 |
<tbody></tbody> |
表格的標簽 |
<tfoot></tfoot> |
表格的標簽 |
<input/> |
輸入框 |
<select></select> |
下拉列表 |
<option></option> |
定義下拉列表中的一個選項 |
<textarea></textarea> |
多行文本輸入框 |
<abbr></abbr> |
定義首字母縮寫 |
<acronym></acronym> |
定義首字母縮寫 |
<label/> |
input元素定義標簽,進行關系綁定 |
<link/> |
文檔與外部資源的關系 |
<style></style> |
內部樣式表與網頁的關系 |
<font></font>(已廢棄) |
規定文本字體、大小和顏色 |
<u></u> |
下划線 |
<s></s>(已廢棄) |
中划線 |
<b></b> |
字體加粗 |
<sup></sup> |
上標 |
<sub></sub> |
下標 |
<div></div> |
文檔中的分區 |
<span></span> |
組合文檔中的行內元素 |
<br/>(已廢棄) |
強制換行{單} |
<hr/> |
分割線 |
<center></center> |
內容居中 |
<pre></pre> |
預定義 |
<ul></ul> |
無序列表 |
<ol></ol> |
有序列表 |
<dl></dl> |
定義列表 |
<li></li> |
列表項 |
| 特殊符號 | 表示意思 |
|
空格 |
< |
小於號 |
> |
大於號 |
& |
符號& |
" |
雙引號 |
' |
單引號 |
© |
版權© |
™ |
商標™ |
在早先發布的html規范中<br>/<hr>/<img>等標記元素是無需“封閉自身”的，這就造成了html規范本身的不嚴謹，
所以后來參考了更規范的XML語言的語法推出了xhtml。在xhtml中所有類似br這樣的孤立標簽都需要自行封閉，
具體的做法就是在標簽名字的后面跟個“/”，例如<br />，因此，是沒有</br>這個寫法的。
從邏輯上講<br />=<br>...</br>，這樣做的目的是為了盡量減少網頁的代碼量，同時保持邏輯嚴謹。
所以在寫這些單閉合標簽,后邊盡量加/如,<br/>,<hr/>,<img/>讓邏輯更加嚴謹.
如果還想知道其它的HTML特殊字符：特殊字符參考表
html常用標簽屬性
<!--maarquee相關-->
<marquee>...</marquee>普通卷動
<marquee behavior=slide>...</marquee>滑動
<marquee behavior=scroll>...</marquee>預設卷動
<marquee behavior=alternate>...</marquee>來回卷動
<marquee direction=down>...</marquee>向下卷動
<marquee direction=up>...</marquee>向上卷動
<marquee direction=right></marquee>向右卷動
<marquee direction='left'></marquee>向左卷動
<marquee loop=2>...</marquee>卷動次數
<marquee width=180>...</marquee>設定寬度
<marquee height=30>...</marquee>設定高度
<marquee bgcolor=FF0000>...</marquee>設定背景顏色
<marquee scrollamount=30>...</marquee>設定滾動速度
<marquee scrolldelay=300>...</marquee>設定卷動時間
<marquee onmouseover="this.stop()">...</marquee>鼠標經過上面時停止滾動
<marquee onmouseover="this.start()">...</marquee>鼠標離開時開始滾動
<!--鏈接格式 -->
<base href=位址>(預設好連結路徑)
<a href=位址></a>外部連結
<a href=位址 target=’_blank’></a>外部連結(另開新視窗)
<a href=位址 target=’_top’></a>外部連結(全視窗連結)
<a href=位址 target=’頁框名’></a>外部連結(在指定頁框連結)
A 所有超連接
A:link 超連接文字格式
A:visited 瀏覽過的連接文字格式
A:active 按下連接的格式
A:hover 鼠標移至連接
<!--圖片/音樂 -->
<img src=圖片位址>貼圖
<img src=圖片位址 width=’180’>設定圖片寬度
<img src=圖片位址 height=’30’>設定圖片高度 (提醒:當之定義高或者寬時,圖片會按照比例縮放)
<img src=圖片位址 alt=’提示文字’>圖片不顯示的時候顯示的文字
<img src=圖片位址’ border=’1’>設定圖片邊框
<bgsound src=MID音樂檔位址>背景音樂設定
<img src=圖片位址 title='圖片注釋'>圖片正常顯示的時候鼠標放到圖片上時顯示的文字
（補充：）align：值有left、right、top（圖片頂部與文字對齊）、bottom（圖片底部與文字對齊）
middle（圖片中間與文字對齊）
border屬性定義圖片邊框的寬度，默認值為0
align屬性設置圖片旁邊文字的位置
語法格式：<img src="" align""/>
可選值有：
top圖片和文字頂部對齊
middle圖片和文字居中對齊
bottom圖片和文字底邊對齊（默認）
left圖片居左對齊，文字沿圖片繞排
right圖片居右對齊，文字沿圖片繞排
absmiddle圖片對齊到目前文字行絕對中央
absbottom圖片對齊到目前文字行絕對底部
<!--表格-->
<table aling=left>...</table>表格位置,置左
<table aling=center>...</table>表格位置,置中
<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網址
<table border=邊框大小>...</table>設定表格邊框大小(使用數字)
<table bgcolor=顏色碼>...</table>設定表格的背景顏色
<table borderclor=顏色碼>...</table>設定表格邊框的顏色
<table borderclordark=顏色碼>...</table>設定表格暗邊框的顏色
<table borderclorlight=顏色碼>...</table>設定表格亮邊框的顏色
<table cellpadding=參數>...</table>指定內容與格線之間的間距(使用數字)
<table cellspacing=參數>...</table>指定格線與格線之間的距離(使用數字)
<table cols=參數>...</table>指定表格的欄數
<table frame=參數>...</table>設定表格外框線的顯示方式
<table width=寬度>...</table>指定表格的寬度大小(使用數字)
<table height=高度>...</table>指定表格的高度大小(使用數字)
<td colspan=參數>...</td>指定儲存格合並欄的欄數(使用數字)
<td rowspan=參數>...</td>指定儲存格合並列的列數(使用數字)
<!--font元素 -->
<font face="字體名稱" size="字體大小" color="字體顏色">
字體大小可選值為1——7，默認為3 例：〈fontface="黑體"size="4" color="#ff00ff">....</font>
<--div屬性-->
color : #999999 文字顏色
font-family : 宋體 文字字型
font-size : 10pt 文字大小
font-style:itelic 文字斜體育
font-variant:small-caps 小字體
letter-spacing : 1pt 文字間距
line-height : 200% 設定行高
font-weight:bold 文字粗體
vertical-align:sub 下標字
vertical-align:super 上標字
text-decoration:line-through 加?h除線
text-decoration:overline 加頂線
text-decoration:underline 加底線
text-decoration:none ?h除連接底線
text-transform : capitalize 首字大寫
text-transform : uppercase 英文大寫
text-transform : lowercase 英文寫
text-align:right 文字*右對齊
text-align:left 文字*左對齊
text-align:center 文字置中對齊
這些是一些簡單的文字效果，可以應用到css的頁面中。
<!--背景-->
background-color:black 背景顏色
background-image : url(image/bg.gif) 背景圖片
background-attachment : fixed 固定背景
background-repeat : repeat 重復排列-網頁預設
background-repeat : no-repeat 不重復排列
background-repeat : repeat-x 在x軸重復排列
background-repeat : repeat-y 在y軸重復排列
background-position : 90% 90% 背景圖片x與y軸的位置
<!--邊框-->
border-top : 1px solid black 上框
border-bottom : 1px solid #6699cc 下框
border-left : 1px solid #6699cc 左框
border-right : 1px solid #6699cc 右框
border: 1px solid #6699cc 四邊框
虛線
<TEXTAREA STYLE="border:1px dashedpink">
實線
<TEXTAREA STYLE="border:1px solidpink">
<!--輸入框-->
<input,type="checkbox",name="name">,創建一個復選框,文字在標簽后面;
<input,type="radio",name="name",value="">,創建一個單選框,文字在標志后面;
<input,type=text,name="foo",size=20>,創建一個單行文本輸入區域,size設置以字符串的寬度;
<input,type="submit",value="name">,創建提交(submit)按鈕;
<input,type="image",border=0,name="name",src="name.gif">,創建一個使用圖象的提交(submit)按鈕;
<input,type="reset">,創建重置(reset)按鈕;
<BUTTON></BUTTON>,創建一個按鈕;
disabled="...",把按鈕的狀態設置為不能;
name="...",按鈕的控制名,value="...",按鈕的值;
type="...",按鈕的類型(button,,submit,,reset);
查看更多標簽及用法:標簽用法
前端常用英語單詞表(未完待續)
| 單詞 | 中文意思 |
|---|---|
| charset{編碼信息} | 字符集,字元集 |
| style | 風格;時尚;類型;字體 |
| stylesheet | 樣式表;文檔的外部樣式表 |
| href | 超文本引用;超鏈接 |
| index | 為…編索引;將…編入索引; |
| background-color{背景色} | 背景顏色 |
| src | 標准要求代碼 |
| lang | 語言(language) |
| images | 圖像,影像 |
| alt{加載失敗顯示} | 高音,最高調的 |
| width{寬} | 寬度,廣度 |
| ordered | 有序的,整齊的 |
| bordersquare{li標簽方形} | 平方的;正方形的 |
| action{form 向哪發表單數據} | 行動;活動;功能;戰斗;情節 |
| method{表單獲取方法} | 方法;條理;類函數 |
| text | 文本;課文;主題 |
| radio | 收音機;選擇鈕;單選鈕 |
| sex | 性;性別;性行為;色情 |
| checked{input默認選中} | 選中的;已選取 |
| datetime-local{input選擇} | 時間選擇器 |
| cols{多文本輸入列} | 報表列數 |
| rows{多文本輸入行} | 行數 |
| submit{input提交} | 提交 |
| active | 積極的;活躍的 |
| color{顏色} | 顏色 |
| yellow | 黃色;黃皮膚 |
| green | 綠色的;青春的 |
| red | 紅的;紅色的 |
| font-size{字體大小} | 字體大小 |
| height{style 元素高度} | 高度;身高 |
| display{style標簽 顯示} | 展出;展示;顯示 |
| left | 左邊,左邊的 |
| right | 右邊,右邊的 |
| inline | 行內的;排成一條線的 |
| block | 塊;街區;障礙物;大塊的 |
| text-align | 文本對齊 |
| center{style標簽 參數} | 居中 |
| line-height{style標簽 元素} | 行高 |
| text-decoration{style 元素} | 文字修飾;文本裝飾 |
| underline{文本修飾 參數} | 下划線 |
| none{文本修飾 參數} | 無修飾 |
| line-through{文本修飾 參數} | 文字刪除線 |
| margin{style元素} | 設置元素的邊距 (可設置四個值) |
| padding{style 元素} | 設置元素的填充 (可設置四個值) |
| border{style 標簽 參數} | 在一行設置四個邊框的所有屬性 |
| outline{style 標簽 參數} | 在一行設置所有的outline屬性 |
| darkred | 深紅 |
| greenyellow | 黃綠色 |
| !important{color后+優先調用} | 重要的,重大的 |
| border-radius{style 元素} | 圓角;邊框圓角 |
| padding-top | 頂部屬性 |
| solid{border參數方邊框} | 一致的;可靠的;立方體 |
| visited{a標簽 訪問時顏色} | 訪問(互聯網上的網站) |
| link{a標簽 沒訪問的顏色} | 連接;聯系 |
| hover{a標簽 懸浮時顏色} | 盤旋;懸浮 |
| deeppink | 深粉紅色;深粉色;深粉紅 |
| deepskyblue | 深天藍色;深天藍色 |
| float{div 重要 元素} | 浮動;漂流;飄動 |
| checkbox{input type 參數} | 勾選框(方形) |
| first-letter{css 第一個字} | 第一個字母樣式 |
| before{在..之前} | 在……之前 |
| after{在...以后} | 在…以后 |
| content | 內容 |
| padding-left | 左填充 |
| border-width{四邊} | 邊框寬度(上右下左) |
| border-style{四邊} | 邊框樣式{上右下左} |
| dotted{border-style參數} | 點線 |
| dashed{border-style參數} | 虛線 |
| double{border-style參數} | 雙實線 |
| border-color{四邊} | 邊框寬度(上右下左) |
| border-top | 上邊框 |
| border-left | 左邊框 |
| border-right | 右邊框 |
| border-bottom | 底部邊框;下邊框 |
| purple | 紫色的 |
| auto{margin 參數} | 自動 |
| visibility hidden | 可見度隱藏的 |
| overflow hidden | 漫出;擴展出界;隱藏 |
| scroll{overflow 參數} | 滾屏;滾動 |
| inherit | 繼承 |
| position | 位置;地方;正確位置 |
| relative{position 參數} | 相對定位 |
| absolute{position 參數} | 絕對定位 |
| vertical-align | 垂直對齊 |
| list-style | 列表樣式 |
| z-index | 層級 |
| background-image | 背景圖 |
| background-repeat | 調整背景圖的位置 |
| no-repeat | 不平鋪 |
| background-position{兩個參數} | 背景位置{水平位置;垂直位置} |
| font-weight | 字體加粗 |
| transition: all .2s linear{移動} | 全部直線過渡0.2秒 |
| box-shadow{四個參數0 0 大小 顏色} | 邊框陰影 |
| table-cell | 單元格 |
| middle | 中間的;中部的 |
| bottom | 底部;末端 |
| child | 孩子 |
| url("地址") no-repeat center top | 背景圖 |