軟件開發流程
網頁組成
根據W3C標準，一個網頁主要由三部分組成
-
結構
HTML用於描述頁面的結構 -
表現
CSS用於控制頁面中元素的樣式 -
行爲
JavaScript用於響應用戶操作
萬維網聯盟(W3C)
- 萬維網聯盟 World Wid Web Consortium
- W3C專門爲了定義網頁相關的標準而成立
- W3C定義了網頁中的HTML , CSS , DOM , HTTP , XML 等標準
WHATWG
- 網頁超文本應用技術工作小組(WHATWG)
- 一個以推動網絡HTML5標準爲目的而成立的組織。在2004年，由Opera、Mozilla基金會和蘋果這些瀏覽器廠商組成
HTML
- HTML(Hypertext Markup Language)超文本標記語言
- 它負責網頁的三要素中的結構
- HTML使用標籤的形式來標識網頁中的不同組成部分
- 所謂超文本指的是超鏈接，使用超鏈接可以讓我們從一個頁面跳轉到另一個頁面
<html>
<head>
<title>這是一個非常好的網頁</title>
</head>
<body>
<h1>這是我的第一個網頁</h1>
</body>
</html>
HTML的發展
• 1993 年6月： HTML第一個版本發佈。
• 1995 年11 月： HTML2.0
• 1997 年1月： HTML3.2（W3C 推薦）
• 1999 年12 月：HTML4.01（W3C 推薦 ）
• 2000 年底： XHTML1.0（W3C 推薦 ）
• 2014 年10 月：HTML5（W3C 推薦 ）
標籤（元素）
- HTML中的標記指的就是標籤
- HTML使用標記標籤來描述網頁
標籤格式
- 成對出現標籤
<標籤名>標籤內容</標籤名>
- 自結束標籤
<標籤名 />
<h1>一級標題</h1>
這個h1就稱爲標籤(元素)
標籤的屬性
可以通過屬性來設置標籤如何處理標籤中的內容
-
只能在開始標籤中添加屬性
-
屬性實際就是一個key-value對
屬性名="屬性值"
<標籤名 屬性名="屬性值" 屬性名="屬性值"></標籤名>
<標籤名 屬性名="屬性值" 屬性名="屬性值" />
<font color="red">第二個</font>
<h1>這是我的<font color="red">第二個</font>網頁</h1>
html註釋
<!-- 註釋內容
...
...
-->
<!--
html根標籤，一個頁面中有且只有一個根標籤，網頁中所有內容都應該寫在html根標籤中
-->
<html>
<!--
head標籤中的內容不會在網頁中直接顯示，它用來幫助瀏覽器解析頁面
-->
<head>
<!--
title網頁的標題標籤，默認會顯示在瀏覽器的標題欄中
搜索引擎在檢索頁面時，會首先檢索title標籤中的內容
它是網頁中對於搜索引擎來說最重要的內容，會影響到網頁在搜索引擎中的排名
-->
<title>這是一個非常好的網頁</title>
</head>
<!--
body標籤用來設置網頁的主體內容，網頁中所有可見的內容，都在body中編寫
-->
<body>
<!-- 註釋內容
...
...
-->
<h1>這是我的第一個網頁</h1>
</body>
</html>
doctype(HTML版本)
爲了讓瀏覽器知道我們使用的HTML版本，需要在網頁的最上邊添加一個doctype聲明，告訴瀏覽器網頁的版本
帶html版本的html
<!--
h5文檔聲明，如果不寫文檔聲明，則會導致有些瀏覽器會進入一個怪異模式，瀏覽器解析會導致頁面無法正常顯示
-->
<!doctype html>
<html>
<head>
<title>這是一個非常好的網頁</title>
</head>
<body>
<h1>這是我的<font color="green" size="7">第二個</font>網頁</h1>
</body>
</html>
編碼
<!doctype html>
<html>
<head>
<!--
meta標籤用來設置網頁的元數據，比如網頁的字符集，關鍵字，簡介
meta是自結束標籤
-->
<meta charset="utf-8" />
<title>網頁標題</title>
</head>
<body>
<h1>這是一個非常漂亮的網頁</h1>
</body>
</html>
常用標籤
標題標籤
<!doctype html>
<html>
<head>
<title>常用標籤</title>
<meta charset="utf-8" />
</head>
<body>
<!--
標題標籤,一共六級標題標籤
h1-h6
6級標題中 h1最重要，表示網頁中的主要內容，標籤都是語義化標籤
對於搜索引擎來說，h1的重要性僅次於title
頁面只能寫一個h1
一般頁面中標題標籤只使用h1, h2, h3 以後的基本不使用
-->
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
</body>
</html>
段落標籤
使用p標籤表示一個段落
p標籤中的文字，默認會獨佔一行，並且段與段之間會有一個間距
<p>我是一個p標籤，我用來表示一個段落</p>
<!doctype html>
<html>
<head>
<title>常用標籤</title>
<meta charset="utf-8" />
</head>
<body>
<!--
標題標籤,一共六級標題標籤
h1-h6
6級標題中 h1最重要，表示網頁中的主要內容，標籤都是語義化標籤
對於搜索引擎來說，h1的重要性僅次於title
-->
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<!--
段落標籤
使用p標籤表示一個段落
-->
<p>我是一個p標籤，我用來表示一個段落</p>
</body>
</html>
換行標籤(br)
<!--
在html中，空格，換行(回車)瀏覽器會解析成一個空格
-->
<p>
鋤禾日當午，<br/>
汗滴禾下土，<br/>
誰知盤中餐，<br/>
粒粒皆辛苦。
</p>
水平線
<hr/>
實體
在html中，一些如 < > 這種特殊字符是不能直接使用
需要使用一些特殊符號表示這些特殊字符，這些特殊符號稱爲實體（轉義字符）
語法：
&實體的名字;
< <!-- < -->
> <!-- > -->
<!-- 表示一個空格 -->
  <!-- tab 製表符 -->
© <!-- 版權符號 -->
" <!-- 雙引號 -->
' <!-- 單引號 -->
a<b>c <!-- a<b>c -->
<p>今天天氣 好晴朗</p>
圖片標籤
<img />
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>圖片標籤</title>
</head>
<body>
<!--
使用img標籤向網頁中引入一個外部圖片
屬性：
src: 設置一個外部圖片的路徑
alt: 可以用來設置在圖片不能顯示時，對圖片的描述
搜索引擎可以通過alt屬性來識別不同的圖片
如果不寫alt屬性，則搜索引擎不會對img中的圖片進行收錄
width： 可以用來修改圖片的寬度 , 一般使用px作爲單位
height：可以用來修改圖片的高度
寬度和高度兩個屬性如果只設置一個，則另一個也會同時等比例調整大小
-->
<img src="1.gif" alt="這是一個大松鼠" width="100px" height="500px" />
</body>
</html>
相對路徑
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>圖片標籤</title>
</head>
<body>
<!--
使用img標籤向網頁中引入一個外部圖片
屬性：
src: 設置一個外部圖片的路徑(相對路徑)
-->
<img src="abc/bcd/2.gif" alt="這是一個大松鼠" />
</body>
</html>
- 圖片格式
jpeg(jpg)
jpeg圖片支持的顏色比較多，圖片可以壓縮，不支持透明
用於保存照片等顏色豐富的圖片
gif
支持的顏色少，只支持簡單地透明，支持動態圖
圖片顏色單一或者動態圖可以使用gif
png
支持的顏色多，並且支持複雜的透明
可以用來顯示顏色複雜的透明的圖片
- 圖片使用原則：
效果不一致，使用效果好的
效果一致，使用小的
meta標籤
<!doctype html>
<html>
<head>
<title></title>
<!--
meta標籤用來設置網頁的元數據，關鍵字
-->
<meta name="keywords" content="HTML5,JavaScript,前端,Java" />
<!--
meta指定網頁的描述
搜索引擎在檢索頁面時，會同時檢索頁面中的關鍵詞和描述
-->
<meta name="description" content="發佈h5、js等前端相關信息" />
<!--
使用meta可以用來做請求的重定向
-->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
</head>
<body>
<h1>5秒以後跳轉頁面</h1>
</body>
</html>
xhtml語法規範
- HTML中不區分大小寫，但是一般都使用小寫
- HTML中的註釋不能嵌套
- HTML標籤必須結構完整，要麼成對出現，要麼自結束標籤
- HTML標籤可以嵌套，但是不能交叉嵌套
- HTML標籤中的屬性必須有值， 且值必須加引號
內聯框架
可以引入一個外部的頁面
使用iframe來創建一個內聯框架
屬性：
src： 指向一個外部頁面的路徑，可以使用相對路徑
在開發總不推薦使用內聯框架，因爲內聯框架中的內容不會被搜索引擎檢索
<!doctype html>
<html>
<head>
<title>內聯框架</title>
<meta charset="utf-8" />
</head>
<body>
<h1>我是demo03</h1>
<iframe src="demo01.html" name="tom"></iframe>
</body>
</html>
框架集
框架集和內聯框架作用類似，都是用於在一個頁面中引入其它的外部的頁面
框架集可以同時引入多個頁面
h5標準中，推薦使用框架集
frameset 創建一個框架集
注意：frameset 不能和 body 出現在同一個頁面中
在frameset中使用frame子標籤指定要引入的頁面
frameset中也可以再嵌套frameset
frameset和iframe一樣，它裏邊的內容都不會被搜索引擎檢索
框架集不能有自己的內容，都是引入外部頁面，每單獨加載一個頁面，瀏覽器都需要重新發送一次請求，引入幾個頁面就需要發送幾次請求
如果非得用建議使用frameset
- 屬性
rows 指定框架集中的所有的頁面，一行一行的排列
cols 指定框架集中的所有的頁面，一列一列的排列
這兩個屬性 frameset必須選擇一個，並且需要在屬性中指定每一部分所佔大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--<frameset rows="50% , 50%">-->
<!--<frameset cols="30% , 40%, 30%">-->
<frameset cols="30% , *, 30%">
<frame src="01.表格.html"/>
<frame src="02.表格.html"/>
<frame src="03.長表格.html"/>
</frameset>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--<frameset rows="50% , 50%">-->
<!--<frameset cols="30% , 40%, 30%">-->
<frameset cols="30% , *, 30%">
<frame src="01.表格.html"/>
<frame src="02.表格.html"/>
<frameset rows="30%, 50%,*">
<frame src="04.表格佈局.html"/>
<frame src="05.完善clearfix.html"/>
<frame src="06.表單.html"/>
</frameset>
</frameset>
</html>
超鏈接
超鏈接可以從一個頁面跳轉到另一個頁面
使用a標籤創建一個超鏈接
-
屬性：
href: 指向鏈接跳轉的目標地址，可以是相對路徑也可以是一個完整的地址 -
a標籤中的target屬性可以用來指定打開鏈接的位置
可選值：
_self 表示在當前窗口中打開(默認值)
_blank 在新的窗口中打開鏈接
可以設置一個內聯框架的name屬性值，鏈接將會在指定的內聯框架中打開
創建超鏈接時，如果地址不確定，可以直接寫一個# 作爲佔位符
如果將鏈接地址設置爲#，則點擊超鏈接以後，會自動跳轉到當前頁面的頂部
<a href="#">超鏈接顯示內容</a>
<!doctype html>
<html>
<head>
<title>超鏈接</title>
<meta charset="utf-8"/>
</head>
<body>
<h1>我是demo04</h1>
<a href="http://www.baidu.com">百度</a><br/><br/>
<a href="demo03.html">demo03.html</a>
</body>
</html>
<!doctype html>
<html>
<head>
<title>超鏈接</title>
<meta charset="utf-8"/>
</head>
<body>
<h1>我是demo04</h1>
<a href="http://www.baidu.com">百度</a><br/><br/>
<!--
a標籤中的target屬性可以用來指定打開鏈接的位置
可選值：
_self 表示在當前窗口中打開(默認值)
_blank 在新的窗口中打開鏈接
可以設置一個內聯框架的name屬性值，鏈接將會在指定的內聯框架中打開
-->
<a href="demo01.html" target="tom">我是一個超級鏈接</a>
<br /> <br />
<iframe src="demo02.html" name="tom"></iframe>
</body>
</html>
center標籤
center標籤中的內容會居中顯示
<center>內容會居中顯示</center>
<!doctype html>
<html>
<head>
<title>超鏈接</title>
<meta charset="utf-8"/>
</head>
<body>
<center>
<h1>我是demo04</h1>
<a href="http://www.baidu.com">百度</a><br/><br/>
<!--
a標籤中的target屬性可以用來指定打開鏈接的位置
可選值：
_self 表示在當前窗口中打開(默認值)
_blank 在新的窗口中打開鏈接
可以設置一個內聯框架的name屬性值，鏈接將會在指定的內聯框架中打開
-->
<a href="demo01.html" target="tom">我是一個超級鏈接</a>
<br /> <br />
<iframe src="demo02.html" name="tom"></iframe>
<p>我是一個p標籤</p>
</center>
</body>
</html>
特殊屬性(id)
html中有一個屬性(id)，每一個元素都可以設置，該屬性可以作爲標籤的唯一標識, id屬性在同一個頁面中只能有一個不能重複
綜合練習
<!doctype html>
<html>
<head>
<title>我的博客</title>
<meta charset="utf-8"/>
</head>
<body>
<center>
<!--
跳轉到id爲bottom的元素所在位置
-->
<a href="#bottom">去底部</a><br />
<a href="#hello">去指定位置</a>
<h1>這是我的個人博客</h1>
<hr/>
<h2>東風破</h2>
<a href="#">周杰倫</a>
<p id="hello">
一盞離愁孤燈佇立在窗口 <br />
我在門後假裝你人還沒走 <br />
舊地如重遊月圓更寂寞 <br />
夜半清醒的燭火不忍苛責我<br />
一壺漂泊浪跡天涯難入喉 <br />
你走之後酒暖回憶思念瘦 <br />
水向東流時間怎麼偷 <br />
花開就一次成熟我卻錯過 <br />
誰在用琵琶彈奏一曲東風破<br />
歲月在牆上剝落看見小時候<br />
猶記得那年我們都還很年幼<br />
而如今琴聲幽幽我的等候你沒聽過<br />
<img src="1.jpg" alt="圖片" width="400px"/> <br />
誰在用琵琶彈奏一曲東風破 <br />
楓葉將故事染色結局我看透 <br />
籬笆外的古道我牽着你走過 <br />
荒煙蔓草的年頭就連分手都很沉默 <br />
一壺漂泊浪跡天涯難入喉 <br />
你走之後酒暖回憶思念瘦 <br />
水向東流時間怎麼偷 <br />
花開就一次成熟我卻錯過 <br />
誰在用琵琶彈奏一曲東風破 <br />
歲月在牆上剝落看見小時候 <br />
猶記得那年我們都還很年幼 <br />
而如今琴聲幽幽我的等候你沒聽過 <br />
<img src="2.jpg" alt="圖片" width="400px"/> <br />
誰在用琵琶彈奏一曲東風破 <br />
楓葉將故事染色結局我看透 <br />
籬笆外的古道我牽着你走過 <br />
荒煙蔓草的年頭就連分手都 <br />
誰在用琵琶彈奏一曲東風破 <br />
歲月在牆上剝落看見小時候 <br />
猶記得那年我們都還很年幼 <br />
而如今琴聲幽幽我的等候你沒聽過 <br />
</p>
<hr />
友情鏈接：<a href="#">A網站</a> | <a href="#">B網站</a> | <a href="#">C網站</a> <br /><br />
<a id="bottom" href="#">回到頂部</a> |
<!--
發送電子郵件的超鏈接，點擊鏈接以後可以自動打開計算機中默認的郵件客戶端
-->
<a href="mailto:[email protected]">聯繫我們</a>
</center>
</body>
</html>
文本標籤
<em>和<strong>
- em標籤表示一端內容中的着重點
- strong標籤表示一個內容的重要性
- 這兩個標籤可以單獨使用，也可以一起使用
- 通常em顯示爲斜體， strong顯示爲粗體
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
今天天氣<em>真不錯</em>！
</p>
<p>
<strong>
注意：如果你不認真上課，你就找不到好工作！
</strong>
</p>
</body>
</html>
<i> 和 <b>
- i標籤會使文字變成斜體
- b標籤會使文字變成粗體
- 這兩個標籤和em和strong類似，但是這兩個標籤沒有語義
- 當只想設置文本特殊顯示，而不需要強調內容時就可以使用i和b標籤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
今天天氣<em>真不錯</em>！
</p>
<p>
<strong>
注意：如果你不認真上課，你就找不到好工作！
</strong>
</p>
<p>
<i>我是i標籤中的內容</i>
<b>我是b標籤中的內容</b>
</p>
</body>
</html>
<small>
- small標籤表示細則一類的旁註，通常包括免責聲明、注意事項、法律限制、版權信息等
- 瀏覽器在顯示small標籤時會顯示一個比父元素小的字號
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
我是p標籤中的內容<small>我是small標籤中的內容</small>
</p>
</body>
</html>
<cite>
使用cite標籤可以指明對某內容的引用或參考。例如，戲劇、文章或圖書的標題，歌曲、電影的名稱等所有加書名號的內容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<cite>《論語》</cite>是最喜歡的一本書
</p>
</body>
</html>
<blockquote>和<q>
- blockquote和q表示標記引用的文本
- blockquote用於長引用(塊級引用)，q用於短引用（行內引用）
- 在兩個標籤中還可以使用 cite 屬性來表示引用的地址
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
子曰: <q>學而時習之不亦說乎！</q>
</p>
<div>
子曰：
<blockquote>
有朋自遠方來，樂呵樂呵！
</blockquote>
</div>
</body>
</html>
<sup> 和 <sub>
- sup定義上標，sub定義下標
- 上標主要用於表示 10^3 中的3
- 下標用於表示 H2O 中的2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>10<sup>2</sup></p>
<p>牛頓<sup><a href="#">[1]</a></sup></p>
<p>H<sub>2</sub>O</p>
</body>
</html>
<ins> 和 <del>
- ins表示插入的內容，顯示時通常會加上下劃線
- del表示刪除的內容，顯示時通常會加上刪除線
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<del>17.75</del> <br />
15.54
</p>
<p>
我們的老師真<ins>好</ins>啊!
</p>
</body>
</html>
<code> 和 <pre>
- code元素表示代碼
- pre元素表示的是預格式化文本，可以使用pre包住code來表示一段代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<pre>
<code>
window.onload = function{
alert("hello world");
};
</code>
</pre>
</body>
</html>
列表
無序列表
使用 ul 和 li 創建一個無序列表
type屬性可以修改無序列表的項目符號
- disc 默認值 實心圓點
- square 實心方塊
- circle 空心圓
type屬性不使用，使用css去掉
如果需要設置項目符號，則可以採用爲li設置背景圖片的方式來設置
ul 和 li 都是塊元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
去掉項目符號
* */
ul{
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>張三</li>
<li>李四</li>
<li>王五</li>
</ul>
</body>
</html>
有序列表
使用 ol 和 li 創建一個有序列表
type屬性，指定序號類型
1 默認值 使用阿拉伯數字
a/A 採用小寫或大寫字母作爲序號
i/I 採用小寫或大寫的羅馬數字
ol 也是塊元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<ol type="I">
<li>結構</li>
<li>表現</li>
<li>行爲</li>
</ol>
</body>
</html>
列表之間可以相互嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<p>菜譜</p>
<ul>
<li>
魚香肉絲
<ol>
<li>魚</li>
<li>香</li>
<li>肉絲</li>
</ol>
</li>
<li>
宮保雞丁
<ul>
<li>宮保</li>
<li>雞丁</li>
</ul>
</li>
<li>青椒肉絲</li>
</ul>
</body>
</html>
定義列表
使用 dl , dd , dt 來創建一個定義列表
- dt 被定義的內容
- dd 對定義內容的描述
定義列表用來對一些詞彙或內容進行定義
dl和ul和ol之間都可以相互嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<dl>
<dt>武松</dt>
<dd>景陽岡打虎英雄，戰鬥力99</dd>
<dd>後打死西門慶，投奔梁山</dd>
<dt>武大</dt>
<dd>著名餐飲企業家，戰鬥力0</dd>
</dl>
</body>
</html>
表格
table也是塊元素
- table 創建一個表格
- tr 表格中的一行
- tr 中可以編寫一個或多個th或td
- th 表頭
- td 表格中的一個單元格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1" width="40%" align="center">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<td>B4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
</tr>
</table>
</body>
</html>
合併單元格
- 橫向合併
- colspan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1" width="40%" align="center">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<td>B4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td colspan="2">D3</td>
<!--<td>D4</td>-->
</tr>
</table>
</body>
</html>
- 縱向合併
- rowspan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1" width="40%" align="center">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<td rowspan="2">B4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<!--<td>C4</td>-->
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td colspan="2">D3</td>
<!--<td>D4</td>-->
</tr>
</table>
</body>
</html>
長表格
在一些情況下表格會很長，這時需要將表格分爲三個部分：表頭，表格主體，表格底部
在html中有三個標籤：
-
thead 表示表格的頭部
thead中的內容永遠會顯示在表格的頭部 -
tbody 表示表格的主體
tbody中的內容永遠都會顯示在表格的中間 -
tfoot 表示表格的底部
tfoot中的內容永遠都會顯示在表格的底部
如果表格中沒有寫tbody，瀏覽器會自動在表格中添加tbody並且將所有的tr都放到tbody中， tr是tbody的子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table>
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合計</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合計</td>
<td>100</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
</tbody>
</table>
</body>
</html>
表單
網頁中的表單是用來向服務器提交信息的
使用 form 標籤創建表單
form標籤中必須指定一個 action 屬性，該屬性指向的是一個服務器的地址 ，當提交表單時將會提交到 action 屬性對應的地址
-
使用 input 創建一個文本框，它的 type 屬性值是 text
-
使用 input 創建提交按鈕，它的 type 屬性值是 submit
-
使用input創建一個密碼框，它的type屬性值是 password
-
如果要表單中的數據提交到服務器中，必須給表單項指定一個 name 屬性， name表示提交內容的名字
-
用戶填寫的信息會附在url地址的後邊以查詢字符串的形式發送給服務器
url地址?查詢字符串
查詢字符串格式： 屬性名=屬性值&屬性名=屬性值&屬性名=屬性值…
-
在提交按鈕中可以通過 value 屬性指定按鈕上的文字
-
在文本框中也可以指定value屬性值，該值將會作爲文本框的默認值顯示
-
在文本框和文本域中可以通過 placeholder 指定提示文字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="target.html">
用戶名<input type="text" name="username" /><br /><br />
密碼<input type="password" name="password"/><br /><br />
<input type="submit" value="註冊"/>
</form>
</body>
</html>
target.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>表單提交成功！！</h1>
</body>
</html>
表單項
- 文本框
<input type="text" name="username" />
表單項添加 disabled=“disabled” ，則表單項變成不可用的狀態
- 密碼框
<input type="password" name="pwd" />
- 提交按鈕
<input type="submit" value="註冊"/>
- 重置按鈕
<input type="reset" />
- 按鈕
<input type="button" value="按鈕"/>
- 多選框
<input type="checkbox" name="sports" value="xxx"/>
- 單選框
<input type="radio" name="gender" value="xxx"/>
單選按鈕通過name屬性進行分組，name屬性相同的是一組按鈕
這種需要用戶選擇但是不需要用戶直接填寫內容的表單項，還必須指定一個value屬性，這樣被選中的表單項的value屬性值將會提交給服務器
如果希望在單選框或者多選框中指定默認選中的選項，可以在希望選中的項中添加 checked=“checked” 屬性
- 下拉列表
<select>
<option>北京</option>
</select>
下拉列表的name屬性需要指定給select ， 而value屬性需要指定給option
通過在option中添加 selected=“selected” 將選項設置爲默認選中
select添加 multiple=“multiple” ，則下拉列表變爲一個多選的下拉列表
在select中可以使用 optgroup 對選項進行分組，同一個 optgroup 中的選項是一組，可以通過 label 屬性指定分組的名字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="target.html">
用戶名<input type="text" name="username" /><br /><br />
密碼<input type="password" name="password"/><br /><br />
性別<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female" checked="checked"/>女
<br /><br />
愛好<input type="checkbox" name="hobby" value="zq"/>足球
<input type="checkbox" name="hobby" value="lq"/>藍球
<input type="checkbox" name="hobby" value="ymq" checked="checked"/>羽毛球
<input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球<br /><br />
你喜歡的明星
<select name="star" >
<optgroup label="女明星">
<option value="fbb">范冰冰</option>
<option value="lxr">林心如</option>
<option value="zw">趙薇</option>
</optgroup>
<optgroup label="男明星">
<option value="zbs" selected="selected">趙本山</option>
<option value="ldh">劉德華</option>
<option value="pcj">潘長江</option>
</optgroup>
</select><br /><br />
<input type="submit" value="註冊"/>
</form>
</body>
</html>
textarea
創建一個文本域，可以輸入多行數據
- cols=“30” 文本域的列數
- rows=“10” 文本域的行數
<textarea name="info"></textarea>
button
專門用來創建各種類型的按鈕
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按鈕</button>
label
專門用來選中表單中的提示文字
該標籤可以指定一個for屬性，該屬性的值需要指定一個表單項的id值
<label for="um">用戶名</label>
<input id="um" type="text" name="username" /><br /><br />
<label for="pwd">密碼</label>
<input id="pwd" type="password" name="password"/><br /><br />
fieldset
用來爲表單項進行分組
legend 子標籤用於指定組名
<fieldset>
<legend></legend>
</fieldset>
所有示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="target.html">
<fieldset>
<legend>用戶信息</legend>
<label for="um">用戶名</label>
<input id="um" type="text" name="username" /><br /><br />
<label for="pwd">密碼</label>
<input id="pwd" type="password" name="password"/><br /><br />
</fieldset>
<fieldset>
<legend>用戶愛好</legend>
性別<input type="radio" name="gender" value="male" id="male"/><label for="male">男</label>
<input type="radio" name="gender" value="female" checked="checked" id="female"/><label for="female">女</label>
<br /><br />
愛好<input type="checkbox" name="hobby" value="zq"/>足球
<input type="checkbox" name="hobby" value="lq"/>藍球
<input type="checkbox" name="hobby" value="ymq" checked="checked"/>羽毛球
<input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球<br /><br />
</fieldset>
你喜歡的明星
<select name="star" >
<optgroup label="女明星">
<option value="fbb">范冰冰</option>
<option value="lxr">林心如</option>
<option value="zw">趙薇</option>
</optgroup>
<optgroup label="男明星">
<option value="zbs" selected="selected">趙本山</option>
<option value="ldh">劉德華</option>
<option value="pcj">潘長江</option>
</optgroup>
</select><br /><br />
自我介紹<textarea name="info"></textarea>
<br /><br />
<input type="submit" value="註冊"/>
<input type="reset" />
<input type="button" value="按鈕"/>
<br /><br />
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按鈕</button>
</form>
</body>
</html>