html經常使用標籤及屬性,經常使用英語單詞

時間 2019-12-14

標籤 html 經常使用標籤屬性英語單詞欄目 HTML 简体版

原文原文鏈接

目錄css

歡迎評論點贊交流,轉發請添加原博客鏈接謝謝!
Ctrl鍵+F 能夠查找你想要的內容哦!html

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);

查看更多標籤及用法:標籤用法api

前端經常使用英語單詞表(未完待續)

單詞	中文意思
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	背景圖