,超文本標記語言,不是一種編程語言,而是一種標記語言 _思想:網頁中有很多數據,不同的數據可能需要不同的顯示效果,一個標簽相當於一個容器,想要修改容器內數據的樣式,只需要改變容器的屬性值,就可以實現容器內數據樣式的變化。_ 語言結構介紹: html學習 塊級標簽 顯示為"塊"狀,瀏覽器會在其前後顯示 ...
HTML
Hyper Text Markup Language
,超文本標記語言,不是一種編程語言,而是一種標記語言
思想:網頁中有很多數據,不同的數據可能需要不同的顯示效果,一個標簽相當於一個容器,想要修改容器內數據的樣式,只需要改變容器的屬性值,就可以實現容器內數據樣式的變化。
語言結構介紹:
<!-- 聲明文檔頁面使用的html版本,當前是html5 -->
<!DOCTYPE html>
<!-- html文檔的根元素標簽,表示html文檔的開始和結束 -->
<html>
<!-- html文檔的頭部標簽 -->
<head>
<!-- 定義文檔標題 -->
<title>html學習</title>
<!--
用於html頁面的元信息
http-equiv:指定元信息的名稱,該屬性指定的名稱具有特殊意義,它可以向瀏覽器傳回一些有用的信息,幫助瀏覽器正確地處理網頁內容。
name:指定元信息名稱,該名稱可以隨意指定
content:指定元信息的值
-->
<!-- 指定文檔的字元編碼 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!-- 3s後會自動跳轉到baidu主頁 -->
<meta http-equiv="refresh" content="3;url=http://www.baidu.com"/>
<!-- 指定作者 -->
<meta name="author" content="author_name"/>
<!-- 指定關鍵字,用逗號隔開(便於搜索引擎進行搜索) -->
<meta name="keywords" content="關鍵字1,關鍵字2,關鍵字3"/>
<!-- 對關鍵字進行描述 -->
<meta name="description" content="對關鍵字的描述...">
<!-- 鏈接外部js資源文件 -->
<script src="theme.js"></script>
<!-- 包含js腳本 -->
<script type="text/javascript">
// js代碼
</script>
<!-- 鏈接外部css資源文件 -->
<link rel="stypesheet" type="text/css" href="theme.css"/>
<!-- 定義內部css樣式 -->
<style type="text/css">
/* css代碼 */
</style>
</head>
<!-- html文檔主體標簽 -->
<body>
</body>
</html>
塊級標簽
顯示為"塊"狀,瀏覽器會在其前後顯示折行。常用的塊級元素包括:<p>
, <h1>~<h6>
, <div>
, <ul>
等
標題標簽
<!-- 標題標簽,從h1到h6依次文字減小 -->
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
段落標簽
<p>同一個世界,同一個夢想</p>
<p>夢想還是要有的,萬一實現了呢?</p>
水平線標簽
<!-- <hr/> size從1-7,越來越粗 -->
<hr/>
列表
<!-- ol:有序列表 type設置排序方式 1預設,還有a,i.. -->
<ol type="a">
<li>中國</li>
<li>日本</li>
<li>南韓</li>
</ol>
<!-- ul:無序列表 type:circle(空心圓),disc(實心圓),square(實心方塊),預設desc -->
<ul type="circle">
<li>蘋果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
<!-- dl:definition list,定義列表,最常用 -->
<!-- dl, dt, dd, 可以將or和ul放在dd裡面 -->
<dl>
<dt>亞洲</dt>
<dd>中國</dd>
<dd>日本</dd>
<dd>北韓</dd>
<dt>歐洲</dt>
<dd>英國</dd>
<dd>法國</dd>
<dd>德國</dd>
</dl>
分區標簽
<!-- div標簽一般當作結構化塊狀元素使用,一般最常用的用途是對網頁進行整體分塊佈局,即當容器來使用 -->
<div id="fruit">
<p>蘋果</p>
<p>香蕉</p>
<p>橘子</p>
</div>
<div id="country">
<p>中國</p>
<p>日本</p>
<p>北韓</p>
</div>
行級標簽
按行逐一顯示,前後不會自動換行,常用的行級標簽包括:<b>
, <i>
, <sub>
, <sup>
等
<!-- 定義粗體文本 -->
<b>粗體文本</b>
<!-- 定義傾斜文本 -->
<i>傾斜文本</i>
<!-- 效果和b類似,語氣較強 -->
<strong>粗體文本</strong>
<!-- 效果和i類似,語氣較強 -->
<em>傾斜文本</em>
<!-- 定義小號文本 -->
<small>小號文本</small>
<!-- 定義下標文本 -->
H<sub>2</sub>o
<!-- 定義上標文本 -->
10<sup>2</sup>
<!-- 定義文本顯示方向,內有dir屬性,只能取值ltr從左到右或rtl從右到左 -->
<bdo dir="rtl">文本內容</bdo>
<!--
超鏈接標簽
href:指定超鏈接所關聯的另一個資源
target:指定框架集中的哪個框架來裝載另一個資源,該屬性值有_self, _blank, _top, _parent四個值,分別代表使用自身、新視窗、頂層框架、父框架來裝載新資源
-->
<a href="超鏈接地址" target="目標視窗">點擊</a>
<!-- 圖像標簽 -->
<img src="圖片地址" alt="提示文字"/>
<!-- span標簽:內部放文本或者行級標簽 -->
<span>文本等行級內容</span>
<!-- 換行標簽 -->
<br/>
<!-- 常用的特殊符號 -->
<!-- 空格 -->
> <!-- 大於號(>) -->
< <!-- 小於號(<) -->
" <!-- 引號(") -->
© <!-- 版權符號(©) -->
框架
frameset
框架集
創建框架頁面的步驟:
- 創建各個子視窗對應的
html
文件 - 創建整個框架文件,分別引用子視窗文件
框架的使用
<!--
frameset:框架集標簽,不能與body標簽同時使用,除非與noframes標簽聯合使用時
將瀏覽器分割成多個框架頁,來載入多個html頁面
frame:框架標簽
cols:pixels, %, * 定義框架集中列的數目和尺寸
rows:pixels, %, * 定義框架集中行的數目和尺寸
noresize:設置框架尺寸不可調整
border:設置框架邊框寬度
-->
<frameset rows="25%,*" border="1" noresize="noresize">
<frame src="top.html">上邊/frame>
<frameset cols="25%,*">
<!-- 如果希望點擊左邊框架的超鏈接,右邊框架顯示超鏈接內容,可以將左邊超鏈接a標簽的target設置成右邊框架的名稱即可 -->
<frame src="left.html" name="leftFrame">左邊</frame>
<frame src="right.html" name="rightFrame">右邊</frame>
</frameset>
<!-- noframe標簽為那些不支持框架的瀏覽器顯示文本,noframes元素位於frameset內部 -->
<noframes>
<body>
您的瀏覽器無法處理框架!
</body>
</noframes>
</frameset>
iframe
內嵌框架
<!--
iframe:內嵌框架,在body標簽內部
frameborder:0, 1 規定是否顯示框架周圍的邊框
name:規定iframe的名稱
scrolling:yes(顯示), no(不顯示), auto(內容超過框架則顯示,否則不顯示) 規定是否在iframe中顯示滾動條
scr:規定在iframe中顯示的文檔的url
width:框架寬度
height:框架高度
-->
<body>
<!-- <iframe src="引用頁面地址" name="框架標識名" frameborder="邊框" scrolling="是否顯示滾動條"> -->
<!-- 和frameset類似,如果希望點擊iframe外的超鏈接,iframe中顯示相應的網頁,可以將超鏈接a標簽的target設置成iframe的名稱即可 -->
<iframe src="http://www.baidu.com" name="contentFrame" width="100%" height="400px"></iframe>
<p><a href="http://www.sina.com.cn/" target="contentFrame">新浪</a></p>
<p><a href="http://www.baidu.com/" target="contentFrame">百度</a></p>
</iframe>
</body>
表格
使用場景
- 主要用於規則的數據顯示;
- 適當的可以在表單頁面中使用;
使用表格標簽進行頁面佈局的缺點
-
代碼量比較大,頁面瀏覽速度比較慢;
-
層次結構比較複雜,不易於維護和改版;
-
不利於搜索引擎搜索查找數據;
我喜歡的NBA球隊 <!-- 定義表格頭 --> <thead> <!-- 定義表格行,該元素內只能包含th標簽和td標簽 --> <tr> <!-- 定義表格頁眉的單元格 --> <th>球隊名稱</th> <th>老闆</th> <th>當家球星</th> </tr> </thead> <!-- 定義表格的主體 --> <tbody> <tr> <!-- 定義單元格,包含兩個主要的屬性 colspan:單元格跨多少列 rowspan:單元格跨多少行 --> <td>騎士</td> <td>丹尼爾·吉爾伯特</td> <td>勒布朗·詹姆斯</td> </tr> <tr> <td>勇士</td> <td>喬·拉科布</td> <td>斯蒂芬·庫里</td> </tr> <tr> <td>馬刺</td> <td>皮特·霍爾特</td> <td>科懷·倫納德</td> </tr> </tbody> <!-- 定義表格尾部 --> <tfoot> <tr> <td colspan="3">總計3支球隊</td> </tr> </tfoot>
表單
基本語法
<!--
action:指定表單提交後由伺服器上的哪個處理程式進行處理
enctype:用於指定表單數據的編碼方式
method:指定向伺服器提交的方式 get post
-->
<form action="表單提交地址" method="提交方法" target="打開方式">
<!-- 文本框、按鈕等表單元素 -->
</form>
常見的表單元素使用
<!--
input元素中常用屬性:
checked:設置單選框、覆選框初始狀態是否處於選中狀態,只有當type屬性為checkbox或radio時才可指定
disabled:設置首次載入時禁用此元素,當type為hidden時不能指定該屬性
maxlength:指定文本框中所允許輸入的最大字元數
readonly:指定該文本框內的值不允許修改(可用js腳本修改)
size:指定該元素的長度
src:指定圖像域所顯示的圖像url,只有當type的值為image時才可以指定該屬性
-->
<!-- text,單行文本框 -->
單行文本框:<input type="text" maxlength="10" size="4" /><br/>
<!-- password,密碼輸入框 -->
密碼輸入框:<input type="password" disabled="disabled"/><br/>
<!-- hidden,隱藏域 -->
隱藏域<input type="hidden"/><br/>
<!-- radio,單選框 -->
單選框:男<input type="radio" name="sex" value="0" />
女<input type="radio" name="sex" value="1" checked="checked" /><br/>
<!-- checkbox,覆選框 -->
覆選框:籃球<input type="checkbox" name="hobby" value="0" />
足球<input type="checkbox" name="hobby" value="1" />
排球<input type="checkbox" name="hobby" value="2"><br/>
<!-- image,圖像域,可以指定width和height屬性,有submit按鈕的功能,會提交表單數據 -->
圖像域:<input type="image"/><br/>
<!-- file,文件上傳域 -->
文件上傳:<input type="file"/><br/>
<!-- submit、reset、button,提交、重置、普通按鈕 -->
提交按鈕:<input type="submit" value="提交按鈕"/><br/>
重置按鈕:<input type="reset" value="重置按鈕"/><br/>
普通按鈕:<input type="button" value="普通按鈕"/><br/>
使用button
定義按鈕
<!--
button按鈕與input按鈕相比,提供了更強大的功能和更豐富的內容
disabled:指定是否禁用此元素,該屬性的值只能是disabled或者省略
name:指定按鈕的唯一名稱
type:指定按鈕屬於哪種按鈕,只能是button、reset、submit
-->
<button type="按鈕類型" name="按鈕名稱">
普通文本、格式化文本、圖像
</button>
提交按鈕:<button type="submit"><b>提交按鈕</b></button><br/>
重置按鈕:<button type="reset"><i>重置按鈕</i></button><br/>
普通按鈕:<button type="button">普通按鈕</button>
使用label
定義標簽
<!--
label元素不會向用戶呈現任何特殊效果,不過它為滑鼠用戶改進了可用性。如果在label元素內點擊文本,就會觸發,瀏覽器會自動將焦點轉到和標簽相關的表單控制項上。
for:規定label綁定到哪個表單元素,值為表單元素的id
form:規定label欄位所屬的一個或多個表單
-->
<!-- <label>文本</label> -->
<label for="text">單行文本框:</label><input type="text" id="text"/>
列表菜單和下拉菜單
<!--
select標簽常用屬性:
disabled:指定是否禁用此元素,該屬性的值只能是disabled或者省略
mutiple:設置該列表框是否允許多選
size:指定該列表內同時顯示多少個列表項
-->
<!--
基本語法:
<select name="指定列表名稱" size="行數">
<option value="選項值" selected="selected">...</option>
</select>
-->
<!-- 列表菜單:多選項展示,可多選 -->
<select size="3" multiple="multiple" id="country">
<option value="0">中國</option>
<option value="1">美國</option>
<option value="2">日本</option>
<option value="3">南韓</option>
</select><br/>
<!-- 下拉菜單 -->
<select id="city">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">武漢</option>
<option value="3">廣州</option>
</select><br/>
<!--
在<select>標簽內,只能包含如下兩種子元素:
<option>:用於定義列表框選項或菜單項,它的常用屬性如下:
disabled:指定禁用該選擇,該屬性的值只能是disabled或省略
selected:指定該列表初始狀態是否處於選中狀態,值只能為selected
value:指定該選項對應的請求參數值
<optgroup>:用於定義列表項或菜單項組,它的常用屬性如下:
label:指定該選項組的標簽,必需
disabled:禁用該選項組裡的所有選項,該屬性值只能為disabled或省略
-->
<select>
<optgroup label="一線城市">
<option>北京</option>
<option>上海</option>
<option>廣州</option>
</optgroup>
<optgroup label="二線城市">
<option>杭州</option>
<option>武漢</option>
<option>南京</option>
</optgroup>
</select>
多行文本框
<!--
textarea:多行文本框,常用屬性如下:
cols:指定文本框的寬度,必填
rows:指定文本框的高度,必填
readonly:指定該文本框只讀,該屬性的值只能是readonly或省略
-->
<!--
基本語法:
<textarea name="..." cols="列寬" rows="行寬">
文本內容
</textarea>
-->
<textarea name="content" cols="50" rows="5" readonly="readonly">
1) 用戶可通過各種已有和未來新增的渠道註冊賬號及加入付費使用。
2) 在用戶使用具體某種方式加入付費會員時,須閱讀並確認相關的用戶協議和使用方法。
</textarea>
html
多媒體
web
上的多媒體指的是音效、音樂、視頻和動畫,現代網路瀏覽器已經支持很多多媒體格式。常見的視頻格式有avi
, wmv
, mpg/mpeg
, mov
, rm/ram
, mp4
等,常用的音頻格式有mid/midi
, rm/ram
, wav
, wma
, mp3/mpga
等。
在html5
之前,主要提供兩種元素來進行多媒體的展示,一個是<embed>
標簽,另一個是<object>
標簽。
<!--
embed是html5中新標簽,定義嵌入的內容,比如插件,常用屬性:
height:設置嵌入內容的高度
width:設置嵌入內容的寬度
src:設置嵌入內容的url
type:設置嵌入內容的類型
在html5中提供了audio(音頻)和video(視頻)標簽來進行音頻和視頻的播放,使用比較簡單,功能更強大。
-->
<!-- embed播放音頻 -->
<!-- <embed src="/Users/wangzhao/Music/網易雲音樂/電臺節目/這個少女不太冷丶 - 牽絲戲.mp3" width="0" height="0" autostart="false" loop="true"></embed> -->
<!-- embed播放flash視頻 -->
<embed src="xxx.swf" width="200" height="200" loop="true" quality="high" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFrash"></embed>
<!-- object標簽 -->
<!--
可以使用<object>標簽來給瀏覽器載入插件,通過載入的插件來播放音頻和視頻
微軟開發,對IE相容性很好,對其他瀏覽器相容一般
-->
<object data="/Users/wangzhao/Music/網易雲音樂/電臺節目/這個少女不太冷丶 - 牽絲戲.mp3">
<param name="src" value="/Users/wangzhao/Music/網易雲音樂/電臺節目/這個少女不太冷丶 - 牽絲戲.mp3">
<param name="autoplay" value="false">
</object>