排版標(biāo)簽

• h1-h6標(biāo)簽
  標(biāo)題語(yǔ)意：重要性遞減 h1 盡量少用
• p 段落標(biāo)簽
  標(biāo)題語(yǔ)意：分段 會(huì)自動(dòng)換行
• hr:水平線標(biāo)簽 單標(biāo)簽
• br 打斷換行 單標(biāo)簽
• div 盒子標(biāo)簽
• span 跨度范圍

文本格式標(biāo)簽

• b 加粗標(biāo)簽
• strong 加粗標(biāo)簽 加粗有兩個(gè)標(biāo)簽推薦使用這一個(gè)標(biāo)簽
• i 傾斜標(biāo)簽文字傾斜
• em 推薦的傾斜標(biāo)簽
• s 刪除的標(biāo)簽 文字上劃線
• del 刪除標(biāo)簽 推薦使用
• u 下劃線標(biāo)簽
• ins 推薦是有的下劃線

屬性標(biāo)簽

• age 格式 <標(biāo)簽名 屬性= ’‘ 屬性’‘> 內(nèi)容<屬性>

1.標(biāo)簽可以有多個(gè)屬性。

2. 屬性之間不分先后順序，標(biāo)簽與屬性、屬性與屬性之間均以空格分開(kāi)
3. 任何標(biāo)簽的屬性值都有默認(rèn)，省略該屬性則取默認(rèn)值

圖像標(biāo)簽

• img <img src="圖片的屬性> 圖片標(biāo)簽 單標(biāo)簽

1. src url 圖像路徑
2. alt 文本 圖像顯示不出來(lái)替換的文字
3. title 文本 鼠標(biāo)懸停的時(shí)顯示的內(nèi)容
4. width 像素 圖像的寬度
5. height 像素 圖片的高度
6. border 數(shù)字 設(shè)置圖像邊框的寬度

連接標(biāo)簽

• “<a href ="跳轉(zhuǎn)目標(biāo)" targer="目標(biāo)窗口彈出方式"》 文本或者圖像</a》”

• 外部連接 <a href ="路徑">百度</a>
  連接必須有href 屬性 路徑就是http地址

• 內(nèi)部鏈接 只需要寫(xiě)上頁(yè)面或者名稱就可以了，不要網(wǎng)絡(luò)后綴名

錨點(diǎn)定位

• 適合于較長(zhǎng)的頁(yè)面，我們可以點(diǎn)擊關(guān)鍵詞到一個(gè)關(guān)鍵位置
• 注意的兩點(diǎn)
  1 使用 《a href =“#id名”》鏈接文本《/a》創(chuàng)建鏈接文本
  2 使用相應(yīng)的id名標(biāo)注跳轉(zhuǎn)目標(biāo)的位置

base標(biāo)簽

• 設(shè)置頁(yè)面的鏈接都在新窗口中打開(kāi)
• head標(biāo)簽中 <base targer ="_blank"/>

特殊字符標(biāo)簽

• &nbsb 空格標(biāo)簽
• &lt 小于符號(hào) &gt 大于符號(hào)
• 這里符號(hào)就不說(shuō)了 到時(shí)候直接查表

注釋標(biāo)簽

• 多使用注釋是很好的代碼習(xí)慣
• 注釋標(biāo)簽里面的內(nèi)容是程序員看的 不是給瀏覽器看的
• < !-- 這是注釋 -->

路徑

相對(duì)路徑

• 圖像文件夾和HTML 文件夾位于同一文件夾；只需要輸入圖像文件的名稱就可以了例如：《imge src = “l(fā)ogo.gif/》”
• 圖像文件位于HTML 文件的下一級(jí)文件夾；輸入文件夾和和文件名，之間用/隔開(kāi)如：《img src = “img/img01/logo.gif/》”
• 圖像文件位于HTML文件上一級(jí)文件夾；在文件名之前加“../”,如果是上量級(jí)，則需要使用“../../”,以此內(nèi)推，如《img src = "../logo.gif"/》

絕對(duì)路徑

• “d:\web\img\logo.gif”,或者完整的網(wǎng)絡(luò)地址，如“http://www.itcast.con/images/logo.gif”

列表標(biāo)簽

• 無(wú)序列表 ul
  格式《ul》《li》《/li》《/ul》里面li標(biāo)簽
  注意點(diǎn)：
  1 ul 里面只能放li標(biāo)簽
  2 li 標(biāo)簽里面可以放任意的標(biāo)簽
• 有序列表ol
  格式《ol》《li》《/li》《/ol》里面li標(biāo)簽
  注意點(diǎn)：
  1 ul 里面只能放li標(biāo)簽
  2 li 標(biāo)簽里面可以放任意的標(biāo)簽
• 自定義列表 dl
  格式：《dl》《dt》《dd》《/dd》《/dt》《/dl》
  dl 里面放dt dt相當(dāng)于標(biāo)簽 dt里面放dd dd相當(dāng)于標(biāo)簽的內(nèi)容
  一般用于 頁(yè)面的底端結(jié)構(gòu)

表格標(biāo)簽

• 表格標(biāo)簽 table
  不是用來(lái)布局的，是用來(lái)像股票布局之內(nèi)的地方

  格式：《table》《tr》《td》項(xiàng)目1《td》《td》項(xiàng)目2《td《/tr》《/table》
  注意：table 里面只能放tr 標(biāo)簽 tr標(biāo)簽里面只能放td標(biāo)簽 td 里面可以放任何標(biāo)簽

• 表格的屬性
  屬性 含義 單位
  border 設(shè)置表格的邊框 像素
  cellspacing 設(shè)置單元格于單元格邊框之間的空白距離默認(rèn) 2像素
  cellpadding 設(shè)置單元格于單元格邊框的空白間距默認(rèn)為1像素
  align 設(shè)置單元格的對(duì)其方式 left center right

• 表頭標(biāo)簽 th
  表頭一般位于表格的第一行或第一列，其文本加粗劇中。設(shè)置表頭非常簡(jiǎn)單，只需用表頭標(biāo)記《th》《/th》替換相應(yīng)單元格的《td》《/td》就可以了

• 表的結(jié)構(gòu) 表頭：《thead》《/thead》
  表體：《tbody》《/tbody》

• 表格標(biāo)題 《catption》《/catption》 寫(xiě)在表格table里面

• 合并單元格
  rowspan 跨行合并《td rowspan = “2”》 合并兩行《td》
  colspan 跨列合并格式 《td colspan = “2”》 合并兩列《td》

表單標(biāo)簽

如銀行開(kāi)戶表單， 表單標(biāo)簽主要用來(lái)搜集用戶信息
表單由3部分組成

• 表單空間：包含兩具體的表單功能項(xiàng)，例如單行文本輸入框、密碼
• 提示信息 ： 一個(gè)表單中通常還需要包含一些說(shuō)明性的文字，提示用戶進(jìn)行填寫(xiě)和操作
• 表單域： 它相當(dāng)于一個(gè)容器，用來(lái)容納所有的表單控件和提示信息，可以通過(guò)他定義處理表單數(shù)據(jù)所用程序的url地址，以達(dá)到數(shù)據(jù)提交到服務(wù)器的方法。如果不支持制定一表單域，表單中的數(shù)據(jù)就無(wú)法傳送到后臺(tái)服務(wù)器。

表單控件

input 控件

• 單標(biāo)簽控件
• inpt 里面就可以堪稱變色龍的 可以通過(guò)type 屬性變化形狀

tye的屬性

• week 星期
• month 年和月
• data 年月日
• time 時(shí)間
• range 區(qū)域滑塊
• search 搜索
• url 網(wǎng)址
• number 數(shù)字
• tel 電話
• emal 郵箱
• text 文本
• password 密碼
• radio 單選按鈕
• checkbox 單選框
• button 按鈕
• submit 提交
• reset 重置按鈕
• image 圖像形式的提交按鈕
• file 選文件

name 用戶自定義

value 用戶自定

size 正整數(shù)

checked checkend

maxlength 最大長(zhǎng)度

• 默認(rèn)選中項(xiàng)目 chenck = “chenck”

label 點(diǎn)一行都可以輸入

• 例子《label》請(qǐng)輸入賬號(hào)《intput/ type=‘text“》《/label》
• 例子《label from=“two”》請(qǐng)輸入賬號(hào)《intput/ type=‘text“》 《intput/ type=‘text“，id = “two”》《/label》 這樣點(diǎn)擊后光標(biāo)會(huì)到id = two 的input 中

textarea 控制文本域

• 輸入大量的信息，類似ios 的textView
• <textarea>請(qǐng)輸入留言1</textarea>

下拉菜單

• select

<select>
        <option>選項(xiàng)1<option>
        <option>選項(xiàng)2<option>
        <option>選項(xiàng)3<option>
        <option>選項(xiàng)4<option>
        <option sekected =“selected”>選項(xiàng)5</option>
        <select>

1 selected 中至少包含一個(gè)option

2 optin 中 selected = ”selected“ 為默認(rèn)選中

表單域

我們現(xiàn)在學(xué)了三個(gè)域名

• 文本域 textarea 相當(dāng)于ios textView
• 文件域 input type = “file”
• 表單域 搜集表單控件信息，并且提交

<form action="url地址" method=“提交方式” name=“l(fā)ogin”>
   <input type="text" name=“pwd”>
   <input type="text" name=“use”>
   <input type="subit">

</form>

• url 是提交的地址， metod 是提交的方式 post 或者 get name 就是提交的參數(shù)

datalist html5的新功能 類似百度的搜索有選擇其他的功能

<input type="text" value="請(qǐng)輸入明星名" list="star">
    <datalist id="star">
        <option>劉德華</option>
        <option>劉小強(qiáng)</option>
        <option>劉小強(qiáng)</option>
        <option>陳杰</option>

    </datalist>

html 新增的屬性

• pleasehold input 站位文字
• autofocus input 自動(dòng)獲取焦點(diǎn)
• multiple input 多文件上傳
• autoncomplete input 有提交按鈕，有名字 提交后會(huì)記錄上次寫(xiě)的東西
• required input 必須要填寫(xiě)的參數(shù)
• accesskey +s input 獲取焦點(diǎn)

多媒體標(biāo)簽

embed ：標(biāo)簽定義嵌入的內(nèi)容 《embed = src“地址”》
audio：播放音頻《audio src = “地址” autoplay controls loop=”2“》《/audio》
autoplay 自動(dòng)播放
controls 顯示控制條 這里可以停止 快進(jìn)等
loop = -1 無(wú)限循環(huán)，loop=2 播放兩次

    audio 在不同的播放器上有不同的兼用，為了考慮兼容用以下的方法
    <audio controls autoplay>
        <source src="bgsound.mp3">
        <source src="music.ogg" >
        你的瀏覽器不支持播放審議    
    </audio>

• video 播放器 支持ogg MP4 webM格式

<video controls autoplay>
        <source src="bgsound.mp4">
        <source src="music.ogg" >
        你的瀏覽器不支持播放審議    
    </video>