1 .基本結構
<!DOCTYPE html> <html> <head>標題文本... </head> <body>內容文本... </body> </html>
基本解釋
-
<!DOCTYPE html>為標識符,它指出了網頁遵循的HTML標準,有時還指出了定義規范的文檔類型定義(DTD) -
<html>包含了組成網頁的所有標簽 -
<head>包含了所有提供網頁信息的標簽,且不包含現在在頁面中的信息 -
<body>包含了所有的文本和其他內容(鏈接、圖片等) -
<html>``<head>``</head>``<body>``</body>``</html>都稱為標簽
<html></html>稱為根標簽
<html>``<head>``<body>稱為開始標簽
</head>``</body>``</html>稱為結束標簽
- 一般來說,標簽都是成對出現的
- 標簽和標簽之間可以相互嵌套,但順序必須一致
- 標簽不區分大小寫,但建議使用小寫
2.基本標簽及其用法
head部分
<title>標簽
<title>標題內容<title>
將標題內容顯示在瀏覽器的標題欄中,一般簡短,易懂
<meta>標簽元數據(metadata)
<meta name="**" content="**"/>
name 和content的作用為描述頁面的內容
<style>標簽
<style type="**">
規定HTMLL元素在瀏覽器中呈現的樣式
body部分
- 段落類
<p>標簽
<p>段落文本</p>
將文本分段后輸出
<br />標簽用于分行,相當于回車換行
用在句子的末端
標簽文本
文本
將文本分割輸出,相當于空格
<hr>標簽用于創建一條水平的線(分割線)
用在段落的首端
- 字體類
<hx>標簽(x=1~6)
<hx>標題</hx>
將文本以標題形式輸出
其中<h1>字體最大,<h6>相對最小
<strong>標簽
<strong>強調部分</strong>
將文本以粗體輸出
<em>標簽
<em>強調部分</em>
將文本以斜體輸出
<span>標簽
<span>強調部分</span>
將文本以特殊形式輸出
<font>標簽
<font>要輸出的文本</font>將文本自定義大小輸出
<font size= "1">要輸出的文本</font>
size可取1~7,其中7最大,1最小
將文本自定義顏色輸出
<font color ="#000000"></font>
其中color后可以接RGB值,也可以用顏色的單詞來表示
- 引用
<q>標簽
<q>引言</q>
自動給引言加上""
<blockquote>標簽
<blockquote>引文</blockquote>
自動在頁面左右兩側進行縮進處理
<code>標簽
<code>代碼</code>
將代碼完整輸出,不改變任何符號
只能對一行代碼進行輸出
<pre>標簽
<pre>代碼段</pre>
將代碼段完整輸出,保留空格和換行符
不受分行的影響
- 表格類
<ul>標簽
<li>一條內容</li>
<li>一條內容</li>
...
</ul>將信息分條排序
通常由"·"起行
<ol>標簽
<li>第一條內容<li>
<li>第二條內容<li>
...
</ol>將信息分條排序
每一行都有固定的編號
- 特殊類
<address>標簽
<address>地址信息</address>
在網頁中提供聯系信息,通常自動顯示為斜體
<div>標簽
<div>...</div>
將標簽放入div中,可以更清晰的看懂標簽的邏輯
``
注釋部分只會在源代碼頁面顯示,從而方便管理員理解代碼,而不會在頁面中輸出
<input type>"..."<placeho.der>
3.表格
表格的組成部分
- 表題:指出表格包含什么內容.(表題是可選的)
- 表頭:標識行、列或兩者,通常使用突出的字體.(可選)
- 單元格:表格中的各個方框,包含的可能是表格數據,也可能使表頭.
- 表格數據:表格中的值
<table>元素
<table>表格</table>
表格摘要
- 提供解釋性的信息,從而對表格作簡要的介紹
在表格前面的段落中進行描述
在表題中進行描述
在表題的<details>元素中進行描述
在表格后面的示意圖或者圖題中進行描述
單元格
- 表格是逐行定義的,每一行定義都應該包含該行的所有單元格
<tr>表格行..</tr>可包括表頭單元格或數據單元格
<th>表頭單元格..</th>通常為粗體,且在水平和垂直方向上都居中
<td>數據單元格..</td>使用常規字體顯示,在水平方向上左對齊,在豎直方向上居中
空單元格
在單元格中包含一行換行符
如:<td><br><td>
表題
元素<caption>位于<table>之內,但位于第一行<tr >之前
<table> <caption>表題名稱...</caption> <tr >若信息過多,也可以將詳細信息隱藏起來
在<caption>中嵌入<derails>元素,可完成對內容的單擊隱藏<caption> <details>詳細內容...</details> </caption>
設置表格
- 設置寬度
<table border="1" style="width: 100%">
設置為與瀏覽器窗口等寬
- 設置邊框
<table border="10" style="width: 100%">
邊框設置為10像素
- 單元格內邊距(單元邊緣與內容的距離)
<table cellpadding= "10" border= "1">
內邊距設置為10像素
- 單元格間距(單元格與單元格的距離)
<table cellspacing= "8">
單元格間距為8像素
4.圖像
圖像
圖像格式
大多數瀏覽器都支持的格式:GIF.JPEG.PNG,而HTML5中增加了SVG格式圖像的支持
- GIF
圖像交換格式(Graphics Interchange Format)
支持簡單的動畫
- GPEG
聯合圖像專家組(Jointment Photographic Experts Group)
多用于儲存攝影圖像
- SVG
可縮放的矢量圖像
可隨意改變大小而不會對圖像質量有任何影響
- PNG
便攜式網絡圖形(Portable Network Graphics)
將圖像轉化為PNG格式,不會丟失任何數據
添加圖像
<img>標簽
<img>標簽有兩個屬性:src和altsrc:指定圖像的URL
alt:簡單的圖像文本描述可將圖片放在
<body>標簽中的任意位置指向本地目錄
指向服務器
圖像替代文本
當圖像無法顯示或加載時會顯示"對圖片的文字描述"
圖像與文本
將圖像標簽放置在文本標簽中,就可以將圖片顯示在文本內
圖像的縮放
<img>標簽的兩個屬性height和width指定了圖像的高度和寬度
<img mrc="****.png" height="高度" width="寬度">
!!寬度調用
目的
- 調整瀏覽器現實的圖像尺寸,使其更適合頁面
- 讓瀏覽器預先知道圖像有多大,有助于瀏覽器在加載圖片完成前,排版正確
5.鏈接
創建鏈接
- 要有鏈接到的文件名(或URL)
- 要有可單擊的鏈接文本
鏈接標簽<a>
基本組成部分,href、表示鏈接的文本、結束標簽
鏈接標簽<a>必須包含一些屬性
- 本地文件
文本<a href="點擊鏈接時將加載的文件">**可被點擊的文本**</a>
文本<a href="點擊鏈接時將加載的文件">可被點擊的文本</a>
- web文檔
文本<a href="網站">**注釋**</a>
文本<a href="網站">注釋</a>
文件的路徑
路徑分為兩種
相對路徑:http:\****.****
絕對路徑:本地目錄<br
錨(anchor)
用name屬性創建一個文檔內的標簽
<a name="label">錨(顯示的文本)</a>
<a href= "#tips">錨</a>
6.表單
表單
收集信息并處理
form標簽
標簽
<form>的兩個常用屬性action和method
action: 提交表單的地址(另一個網頁的鏈接或moilto鏈接)
method: 提交表單的使用方法,一般分get和post兩種
<label>標簽
<label>描述表單字段的文本</label>
<input>標簽
- input元素由起始標簽和結束標簽組成,其中其實標簽中包含屬性.
- 其實標簽和結束標簽之間沒有任何其他內容.
文本
文本框只有一行,無法回車換行<label for= "usuername">姓名:</label> <input type="text" id= usuername><label for= "usuername">姓名:</label>
<input type="text" id= usuername>密碼
密碼框中輸入的信息會做掩碼處理<label for= "password">密碼:</label> <input type="password" id="password"><label for= "password">密碼:</label>
<input type="password" id="password">單選框
同一組選項,name屬性必須相同<label>性別:</label> <input type="radio" name= "sex" value="male">男 <input type="radio" name= "sex" value="female">女 <input type="radio" name= "sex" value="futa">扶他<label>性別:</label>
<input type="radio" name= "sex" value="male">男
<input type="radio" name= "sex" value="female">女
<input type="radio" name= "sex" value="futa">扶他復選框
<label>愛好</label> <input type="checkbox" name= "sex" value="male">男 <input type="checkbox" name= "sex" value="female">女 <input type="checkbox" name= "sex" value="futa">扶他<label>愛好:</label>
<input type="checkbox" name= "sex" value="male">男
<input type="checkbox" name= "sex" value="female">女
<input type="checkbox" name= "sex" value="futa">扶他下拉列表
<label for= "sex">我的性別</label> <select id= "sex" name= "sex"> <option value= "男">男</option> <option value= "女">女</option> <option value= "扶她">扶她</option> </select><label for= "sex">我的性別:</label>
<select id= "sex" name= "sex">
<option value= "男">男</option>
<option value= "女">女</option>
<option value= "扶她">扶她</option>
</select>提交按鈕
<input type= "submit" value= "提交"><input type= "submit" value= "提交">
重置按鈕
重置按鈕可以清空表單中已經填寫了的信息
<input type= "reset" />
<input type= "reset" />隱藏文本
<input type= "hidden" name="country" value="Norway" /><input type= "hidden" name="country" value="Norway" />
打開文件
<input type= "file" name= "pic" accept= "image/gif" />
textarea標簽
多行文本
<textarea name= "article">文本內容</textarea>
7. 多媒體
<video>標簽
用法
<video src= "***.mp4">作用
播放視頻
屬性
src
要播放視頻的地址<embed src="地址.mp3"> <br>
height
元素的高度<height=200>width
元素的寬度<width=200>
autoplay
一個布爾屬性,制定是否在網頁加載完畢后立即播放視頻<embed src="**" autostart=true>(自動播放) <embed src="**" autostart=false>(手動播放)loop
一個布爾屬性,如果包含它,將循環播放視頻(到達末尾后重新播放,直至手動暫停)<loop="ture">(自動循環)preload
一個布爾屬性,如果包含它,瀏覽器將在頁面加載完畢后開始下載視頻,為播放所好準備(指定了屬性autoplay時,將忽略此屬性的設置)
controls
一個布爾屬性,告訴瀏覽器是否提供視頻播放控件poster
開始播放視頻前顯示的圖像(封面)muted
一個布爾屬性,如果包含它,視頻將沒有聲音
