1. 程式人生 > >HTML基礎標籤及用法

HTML基礎標籤及用法

HTML5新增的標籤video 視訊標籤 屬性 src 路徑 controls 顯示工具欄audio 音訊檔案 屬性 src 路徑 controls 顯示工具欄如:<video src="a.mp4" controls ="controls " >次瀏覽器不支援次視訊標籤<video>autoplay 自動播放屬性controls 暫停、聲音等控制元件屬性表單元素支援表單元素增添 x最大值 setp 每次的變化量url 連結地址效驗range 滑塊search表單提交進行優化required 進行非空效驗placeholder 文字框進行文字提示
pattern 正則效驗
header標題頭部區域的內容(用於頁面或頁面中的一塊區域)
footer標記腳部區域的內容(用於整個頁面或頁面的一塊區域)
sectionWeb頁面中的一塊獨立區域
article獨立的文章內容
aside相關內容或應用(常用於側邊欄)
nav導航類輔助內容
判斷表單是否上傳<form onsubmit="return 函式A()" method="post" action="上傳路徑" ><input type=submit ><form>//表示函式A返回true或false onsubmit判斷是否上傳結尾的標記(是一種雙標籤) center 居中顯示(雙標籤) head 頭部標籤(是一種雙標籤) title 標題標籤 (是一 種雙標籤) body 主體標籤 進行顯示主體內容(是一種雙標籤) h1-h6 標題標籤 被包起來的內容以標題的形式進行展現 有換行效果 h1-h6字型大小逐漸減小 (是一種雙標籤) span 沒有任何效果的標籤(是一種雙標籤) p標籤 是段落標籤 在結束標籤後進行換行(是一種雙標籤) br標籤 是換行標籤 在br處換行(是一種單標籤) strong標籤 強調標籤 被包含起來的內容加粗顯示(是一種雙標籤) em 斜體標籤 被包含起來的內容進行傾斜(是一種雙標籤) &nbsp; 空格 &lt; 小於號 &gt; 大於號 &quot 引號 &copy 版權符號 html註釋 <!--註釋性的文字--> img標籤 叫做影象標籤 src=“路徑” width=“寬度” height="高度" alt=“圖片替代文字” title=“幫助性文字” a標籤 連結標籤 href="路徑" target="開啟位置"title="提示性的文字" a標籤中的錨鏈接。由連結和錨點(標記)構成錨點點位<a name="描點名稱">a標籤跳轉方式1:<a href="#描點名稱">(本身頁面)a標籤跳轉方式2:<a href="頁面路徑#描點名稱">(頁面間跳轉錨點處)功能性連結:a href="mailto:郵箱"連結分類:頁面間連結 、錨鏈接、功能性連結概念:路徑(指的檔案存放的位置)路徑分為相對路徑 以及 絕對路徑相對路徑:相對於當前檔案的位置絕對路徑:碟符--->檔案位置 ..\指的是返回上一層 做開發通常採用相對路徑進行操作第二章ul 無序列表標籤(宣告列表)(雙標籤)li 列表項標籤 (雙標籤) ul type屬性控制列表展示型別 disc(預設)square(實心方塊) circle(空心圓)ol 有序列表(雙標籤)li 列表項標籤 (雙標籤) ol type屬性控制列表展示型別 1 a/A i/Idl 定義列表dt 列表項標籤 dd 列表項內容table 表格標籤tr 行標籤td 單元格標籤colspan 所跨的列數rowspan 所跨的行數border 表格線的寬度width 屬性 指定寬度 可以為表格指定寬度 可以為單元格指定寬度height 屬性 指定高度 可以為表格指定高度 可以為單元格指定高度align 屬性 可以設定表格水平位置 left center right 可以設定單元格內容位置 left center rightvalign屬性 可以設定單元格垂直方向上的位置 top middle bottom (Xbaseline(基準線))框架(frameset)意義:可使一個頁面分多個視窗用法:<frameset cols="20%,35%,*" rows="50%,*" scrolling="yes"noresize="noresize"framborder="1"> <fram src="第一個頁面的路徑"> <fram src="第二個頁面的路徑"> <fram src="第三個頁面的路徑"> </frameset> cols 表示把頁面橫向分割 % 為大小 rows 表示把頁面縱向分割 scrolling 表示是否顯示滾動條 noresize 表示是否允許調整框架視窗大小 framborder 表示是否顯示視窗的邊框內聯框架(iframe)意義:用法:<iframe src="引用頁面的地址">第三章 表單<form method="post" action=""> <input type="" ></form>method 上傳方式action 上傳路徑<from> <input type={text submit reset radio checkbox image password file} required //表單為空不能提交
pattern="^1[358]\d{9}" //正則表示式placeholder="請輸入要搜尋的關鍵字" //提示內容重要用於文字框readonly //只讀disabled //禁用 for=“表單元素id” 點選時焦點轉移 ></from>text 輸入帳號密碼時用到password 使輸入帳號或密碼時不可見submit 提交按扭reset 重置按鈕radio 選擇男女時可用 checkbox 選擇愛好時可用 for=“表單元素id” 點選時焦點轉移 image 提交按鈕可用圖片代替file 用於實現檔案的選擇hidden 隱藏的文字框number 只能輸入數字 max最大值 min最小值 step 數字間隔range 橫向滑塊email 判斷是否為郵箱地址url 判斷是否為網址search 搜尋框和文字框類似value 表示表單的初始值和上傳的內容,但type為radio時必須指定一個值size 表單的初始寬度maxlength 在text中指定輸入的最大字元數,預設值為無限checked 指定按鈕是否被選中,當型別為radio或checkbox時使用此屬性列表框<select> <option value=""selected="selected">1</option> <option value="">2</option> <option value="">3</option> ...</select>selected 列表框的預設值多行文字域<textarea cols="顯示列的寬度" rows="顯示行的寬度"> 顯示的內容。。。</textarea>第四章<style type="text/css"> 雙標籤font-size:**px; 表示字型大小</style>color 表示字型顏色當為class時,在 <style type="text/css"> 中用 .class名{}表示當為p,h1,body,ul,ol...時,用p,h1,body,ul,ol...{}表示當為id時,用#id名{}表示第五章div 分板塊span 雙標籤,沒有任何凸顯作用,為預設值font-family 設定字型型別font-size 設定字型大小font-style 設定字型風格font-weight 設定字型粗細bold 加粗bolder 更粗的字lighter 更細的字font 設定字型屬性color 設定文字顏色text-align 設定文字水平對齊方式 left 瀏覽器左邊 預設 right 瀏覽器右邊 center 中間 justify 實現兩端對齊文字效果 text-indent:xpx 設定首行文字縮排line-height: 設定文字的行高text-decoration: 設定文字的裝飾 none 預設值 定義的標準文字 underline 設定文字的下劃線 overline 設定文字的上劃線 line-through 設定文字的刪除鍵 blink 設定文字閃爍。此值只在Firefox瀏覽器中有效,在IE無效標籤名 img{vertical-align:middle} 圖片與文字居中對齊a:link{} 未單擊訪問時超連結樣式a:visited{} 單擊訪問後超連結樣式a:hover{} 滑鼠懸浮其上的超連結樣式a:active{} 滑鼠單擊未釋放的超連結樣式 text-decoration:none; 超連結無下劃線 text-decoration:underline; 超連結有下劃線background-color: 設定背景顏色background-image:url(圖片路徑) 新增背景圖片background-repeat: repeat 沿水平和垂直兩個方向平鋪 no-repeat 不平鋪,只顯示一次背景圖片 repeat-x 只沿X軸平鋪 repeat-y 只沿Y軸平鋪backround-position:Xpx Ypx ,X% Y%,關鍵詞 水平left、center、right。垂直top、center、bottom。可組合 圖片出現的方向background:color image repeat; 以上簡寫方式list-style-type:列表項標記型別 none 無標記符號 disc 實心圓,預設值 circle 空心圓 square 實心正方形 decimal 數字list-style-image:url(圖片路徑) 設定列表標記圖片list-style-position: 屬性設定在何處放置列表標記項 outside 預設,標記放置在文字以外,標記在文字左側 inside 標記放置在文字以內,且環繞文字根據標記對齊list-style 以上簡寫樣式第六章 利用盒子時,很多情況需把盒子內外邊距清零;border 盒子邊框content 元素內容padding 內邊距margin 外邊據 margin:0px auto; 居中顯示box-shadow 盒子陰影box-shadow: inset 內陰影預設為外 Xpx Ypx Zpx 顏色border-radius 邊框的角度border-radius:上 右 下 左border-color 邊框顏色 border-top-color:上邊框顏色 border-right-color: 右邊框顏色 border-bottom-color:下邊框 border-left-color:左邊框 border-color:#上 #右 #下 #左border-width 邊框粗細 border-top-width:上邊框粗細 border-right-width: 右邊框 border-bottom-width:下邊框 border-left-width:左邊框 border-width:上px 右px 下px 左pxborder-style 邊框樣式,solid實線,dotted點線,dashed虛線 border-top-style:上邊框 border-right-style: 右邊框 border-bottom-style:下邊框 border-left-style:左邊框 border-style:上 右 下 左border-bottom:顏色 粗細 樣式; 以上的簡寫是否隱藏
display 顯示方式屬性 block 塊級元素預設值 元素會顯示為塊級元素 該元素前後會帶有換行符 inline 內聯元素預設值,元素會顯示為塊級元素,該元素前後沒有換行符 inline-block 使無序列表ul li變為整行順便使點消失 塊集元素加前後換行符 none 設定元素不會被顯示float 定義元素向哪浮動 left 元素向左浮動 right 元素向右浮動 none 預設值,元素不浮動,並會顯示在其文字中出現的位置clear 定義向哪不浮動 left 元素向左不允許浮動 right 元素向右不允許浮動 both 在左右兩邊不允許浮動元素 none 預設值,允許浮動元素出現在兩側position: absolute 絕對定位 //相對於祖先元素 relative 相對定位 //相對於自己 fixed 固定定位 //相對於瀏覽器