HTML總結

時間 2019-11-18

標籤 html 總結欄目 HTML 简体版

原文原文鏈接

HTML基礎知識總結html

1.基本架構
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>這裏是頁面頭部</title>
</head> 
<body
這裏是頁面主體
</body>
</html>瀏覽器

2.<br/>和<p>標籤
<body>
當一段文字在網頁中過長而顯得累贅，<br/>就能夠使用換行標籤來修飾
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
</body>網絡

3.標題標籤與文本格式化
<body>
<h1><b>標題1</b></h1> 
<h2><i>標題2</i></h2> 
<h3><del>標題3</del></h3> 
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>
X<sup>2</sup>+Y<sup>2</sup><br/> 
H<sub>2</sub>O 
</body>架構

4.連接
<body>
<a href="http://www.baidu.com">外部連接</a>
<a target="blank" href="about.html">訪問本地網絡</a>
框架

<a href=「mailto:郵箱地址」>郵件連接</a>
<a href=「tel:電話號碼」>一鍵撥打</a>
<a href="sms:139xxxxxxx">一鍵發送短信</a>
</body>ide

5.圖像
<img src="URL" width="100" height="100" >
oop

圖片相對地址：
./ 當前目錄
../ 回到上一層目錄
images/ 進入一層目錄
../images/ 回到上一層目錄，而後再進入images目錄post

圖像熱區字體

<img src="URL" usemap="# map 名稱" />
<map name="map 名稱">
<area shape="形狀" coords="座標值" href="URL" />
</map>ui

shape 熱區形狀(rect、circle、poly )
coords 形狀的座標值

rect 選取正方形左上角座標軸位置和右下角座標軸位置（X1，Y1，X2，Y2）
circle 測量圓的半徑和圓心的位置（X1，Y1，r）
poly 多邊形的多個點（X1,Y1,X2,Y2,X3,Y3,X4,Y4,X5,Y5）

6.音頻、視頻
(音頻)
帶控制器的音頻播放器

語法：
<audio src="song.ogg" controls="controls"></audio>

考慮到不一樣瀏覽器對視頻文件的兼容性
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">

<p>Your browser does not support the audio tag.</p>

</audio >

autoplay autoplay 若是出現該屬性，則音頻在就緒後立刻播放。
controls controls 若是出現該屬性，則向用戶顯示控件，好比播放按鈕。
loop loop 若是出現該屬性，則每當音頻結束時從新開始播放。
preload preload 若是出現該屬性，則音頻在頁面加載時進行加載，並預備播放。若是使用 "autoplay"，則忽略該屬性。
src url 要播放的音頻的 URL。

(視頻)
帶控制器的視頻播放器

語法：
<video src=「movie.mp4」 controls="controls"></video>

考慮到不一樣瀏覽器對視頻文件的兼容性
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">

<p>Your browser does not support the video tag.</p>

</video>

autoplay autoplay 若是出現該屬性，則視頻在就緒後立刻播放。
controls controls 若是出現該屬性，則向用戶顯示控件，好比播放按鈕。
loop loop 若是出現該屬性，則當媒介文件完成播放後再次開始播放。
muted muted 規定視頻的音頻輸出應該被靜音。
poster URL 規定視頻下載時顯示的圖像，或者在用戶點擊播放按鈕前顯示的圖像。
preload preload 若是出現該屬性，則視頻在頁面加載時進行加載，並預備播放。若是使用 "autoplay"，則忽略該屬性。

7.實體字符
實體字符字符實體
大於號(>) >
小於號(<) <
引號(") "
註冊商標(®) ®
版權(© ) ©
&號 &

8.列表
(無序列表)
<ul type="square"> 
<li>123</li>
<li>123</li>
<li>123</li>
</ul>

(有序列表)
<ol type="a" start="3"> 
<li>123</li>
<li>456</li>
<li>789</li>
</ol>

(定義列表)
<dl>
<dt>HTML</dt>
<dd>html 是超文本標記語言</dd>

<dt>XHTML</dt>
<dd>可擴展超文本置標語言 </dd>
<dd>表現方式與超文本置標語言（HTML）相似，不過語法上更加嚴格 </dd>
</dl>

9.表格
<table>
tr*3>td*3 + table 
</table>

屬性值說明
width px、 % 指定表格的寬度
height px、% 表格的高度
border px 指定表格邊框的寬度
cellpadding px 指定邊框與內容之間的空白
cellspacing px、 % 指定單元格之間的空白
align left、 right 、 center 指定對齊方式
valign top、 middle 、 bottom 垂直排列方式
colspan 合併列單元格
rowspan 合併行單元格

設置表格各項屬性可參考上文。

<ifram>內嵌框架
<iframe width="500px" scrolling="yes" frameborder="1" height="500px" src="http://www.163.com"></iframe>
屬性屬性值說明
width px , % 指定框架的寬度
height px , % 指定框架的高度
scrolling yes,no,auto 是否顯示滾動條
frameborder 1, 0 是否顯示邊框

10.表單
<input type="text/password/submit/button/radio name=""/checkbox name/reset/images name="" src="""/>
文本/密碼提交 /按鈕 /單選 /複選框 /重置 /圖片

<input type="hidden" name="uid" "file" >
隱藏域文件上傳
multiple：控制多個文件上傳

<textarea name="content" rows="5" cols="50"> </textarea> 
高度爲5行寬度爲50每行
屬性說明
name 元素的名稱
rows 指定文本框的高度
cols 指定文本框的寬度

select 表單元素下拉框
<select name="city">
<option value="sz">深圳</option
<option value="bj">北京</option>
<option value="gz">廣州</option>
</select>

name 下拉列表框的名稱
size 下拉列表框的顯示行數
multiple 是否多選
disabled 是否禁用
selected 設置默認選中的選項
value 選項的值

optgroup 表單下拉框分組
<select name="city" multiple>
<optgroup label="廣東"> 
<option value="1">廣州</option>
<option value="2">深圳</option>
</optgroup>
<optgroup label="其餘">
<option value="3">長沙</option>
<option value="4">香港</option>
</optgroup>
</select>

lable 標籤的做用是將輸入項或選項及其標籤文字關聯起來。<input type="radio" name="sex" value="1" id="male" /> <label for="male">男</label> <!-- 點擊中文字符也會彈回輸入框 --!> <input type="radio" name="sex" value="0" id="female" /> <label for="female">女 </label>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。