Html 介紹
特殊标簽： 空格
1.什麼是html ？
html是用來描述網頁的一種語言 1.0 ＨＴＭＬ 值的是超文本标記語言 2.0 HTML 不是一種程式設計語言 3.0标記語言是一套标記标簽 4.0HTML使用标記标簽來描述網頁
2.HTML的作用？
Web浏覽器的作用是讀取html文檔，并以網頁的形式顯示他們。浏覽器不會顯示HTML标簽，而是使用标簽來解釋頁面上的内容 HTML就是用來展示資訊的。
3. HTML書寫規範
a HTML标簽 a.0 HTML标簽是有尖括号包圍的關鍵詞，比如<html> a.1 HTML标簽通常是成對出現的 。 比如<b>和 </b> a.2 标簽對中，第一個标簽是開始标簽，第二個标簽是結束标簽 a.3 絕大多數标簽都具有屬性，建議屬性值使用引号引起。例如<body> text="red"> a.4 大多數标簽是可以嵌套的 b html 的建立 HTML可以用文本編輯器來建立，儲存的時候字尾名為html或者htm，整個檔案夾在<html>與</html>标簽之間，在<html> 标簽之間有<head>和<body> c 空的HTML标簽 <br/>關閉空元素的正确方式 d html 大小寫不敏感 <P>等同于<p> 建議使用小寫
檔案标簽
1.HTML标簽
整個 檔案都處在<html>标簽中 <html> 用以聲明這是HTML檔案，讓浏覽器認出并且正确處理這個HTML檔案
在HTML檔案有兩部分<head>與<body>
2.head标簽
<head>用于加載一些重要的資訊 它的内容不會被顯示，隻有<body>的内容才會被顯示
3.title 标簽
<title>隻能出現于<head>中 ，它代表的是标題
4.body标簽
<body>中的内容會被顯示。 常用屬性： text : 用于設定文字顔色 background 用于設定背景圖檔 bgcolor 用于設定背景顔色
5.關于HTML中的顔色取值
顔色由紅 綠 藍 混合而成 有三種取值方式： 1.rgb(0.0.0) 值在0- 255之間 2. #000000 #ffffff 3. red green blue
排版标簽
1.注釋 在html中的注釋是<!-- 注釋--> 2.p标簽 <p>标簽是段落标簽，可以将html文檔分割為若幹段落。浏覽器會自動在段落前後添加空格。 <p>标簽的常用屬性 align 用于設定對齊方式，可選 legt right center 預設值是left 3.br 标簽 <br>标簽是換行标簽 4.hr 标簽 <hr>标簽會生成一條水準線 常用屬性： align 設定水準對齊方式，可選 left right center size 設定水準厚度 以像素為機關。預設為2 width 設定水準線長度，可以是絕對值或相對值，預設為100% color 設定水準線顔色，預設為黑色 5.關于HTML中的數值機關 html的數值預設機關為像素（px） <hr size='3'> 這個代表水準線的厚度為3px <hr width='30%'>這個代表水準線的長度為總長度的30%
<body>
靜夜詩<br />
李白<br />
<hr width="200px" size="2" color="red" align="left" />
<p align="center">
窗前明月光<br />
</p>
疑是地上霜
</body>
塊标簽:
1.div标簽 用于在文檔中設定一塊區域 常用屬性：align:left center right 2. span标簽 用于在行内設定一塊區域。
html中絕大多數元素被定義為塊級元素或内聯元素。
塊級元素在浏覽器顯示時，通常會以新行來開始。例如 div p等
内聯元素在浏覽器顯示時，通常不會以新行來開始。span
<body> <div style="background-color: red;">div1</div> <div style="background-color: green;">div2</div> <span style="background-color: blue;">span1</span> <span style="background-color: pink;">span2</span> </body>
文體标簽
1.font<font>用于規定文本的字型，大小 ，顔色常用屬性face:規定文本的字型size:規定文本的大小最大值 7 最小值 1color:規定文本的顔色2.h1 - h6 标題标簽<h1> - <h6>标簽用于定義标題<h1>最大标題<h6>最小标題<body>
<font color="red" size="1" >最帥</font> <br />
<font color="red" size="2" >最帥</font><br />
<font color="red" size="7" >最帥</font><br />
<hr /> <!--一個橫線-->
<h1>你好</h1>
<h2>你好</h2>
<h6>你好</h6>
</body>
清單标簽
1. ul<ul>标簽表示的是一個無序清單。常用屬性:type:規定清單的項目符号類型,可取值 disc,square,circle.預設值為disc2. li<li>标簽表示的是一個清單項常用屬性:type:這個屬性隻适用于無序清單，用于設定項目符号，預設值為discvalue:這個屬性隻适用于有序清單，用于設定清單的項目數字3. ol<ol>表示的是一個有序清單。常用屬性:type:這個屬性規定清單中使用的标記類型。可取值1 A a I i.start:這個屬性規定清單的起始值 是數值 12<body>3<ul type="square">4<!--無需清單-->5<li type="1">我是大帥哥</li>6<li type="1">我是大帥哥</li>7 8<li type="1">我是大帥哥</li>9<!--有序清單-->10<ol type="a" start="5">11<li type="a">我是大帥哥</li>12<li type="a">我是大帥哥</li>13<li type="a">我是大帥哥</li>14</ol></ul>
圖形标簽
1. img
<img>是一個圖檔标簽，用于在頁面上引入圖檔.
常用屬性：
src:用于設定要引入的圖檔的url
alt:用于設定圖像的替代文字
width:用于設定圖檔的寬度
height:用于設定圖檔的高度
border：圖檔邊框厚度
align:用于設定圖檔的文字的對齊方式 top middle botom
12<body>3<img src="img/1.png" alt="帥哥" width="50%" height="50%" 5" align="bottom"/>4我是一個文本</body>
連結标簽
1. a<a>标簽用于定義超連接配接，用于從一個頁面連結到另一個頁面。常用屬性:href:用于設定連結指向頁面的url.1.通路網際網路的時候要加協定http://2.例子：<a name="top"></a><a href="#top" target="_blank" rel="external nofollow" >top</a>name:用于設定錨的名稱target:用于設定在何處打開連結頁面。_self 預設是self 覆寫本網頁打開連結—_blank 另起一個新的頁面，打開鍊
例子
1
<html> 2
<head> 3
<meta charset="utf-8" /> 4
<title></title> 5
</head> 6
<body> 7
<a href="http://www.baidu.com" target="_self">我是百度</a> 8
<a name="top"></a><!--錨點--> 9
你好<br> 10
你好<br> 11
你好<br> 12
你好<br> 13
你好<br> 14
你好<br> 15
你好<br> 16
你好<br> 17
<a href="#top">傳回頂部</a> 18
</body> 19
</html> 20
表格标簽
1. table<table>标簽用于定義表格常用屬性:
align:用于設定表格的對齊方式bgcolor:用于設定表格的背景顔色。border:用于設定表格邊框的寬度width:用于規定表格的寬度。
2. tr
<tr>标簽用于定義表格的行,包含一個或多個th或td元素。<tr>常用屬性:
align:用于設定表格中行的内容對齊方式。bgcolor:用于設定表格中行的背景顔色。
3. td
<td>标簽用于定義表格單元td元素中的文本一般顯示為正常字型且左對齊。<td>常用屬性:
align:用于設定單元格内容的對齊方式。bgcolor:用于設定單元格背景顔色。l height:用于設定單元格的高度。width:用于設定單元格的寬度。colspan:用于設定列合并rowspan:用于設定行合并。
4. caption
<caption>用于定義表格标題<caption>标簽必須緊随<table>标簽之後，一個表格隻能有一個标題。通常這個标題會被居中于表格之上。
5. th
<th>标簽用于定義表格的表頭，<th>内部的文本通常呈現為居中加粗文本。Html表格中有兩種類型的單元格：表頭單元格th:包含表頭資訊。标準單元格td:包含資料。
6. thead
<thead>标簽用于定義表格的頁眉<thead>标簽用于組合HTML表格的表頭内容。<thead>元素應該與<tbody>和<tfoot>元素結合起來使用。注意:<thead>内部必須有<tr>标簽。
7. tbody
<tbody>标簽用于定義表格的主體<tbody>标簽用于組合HTML表格的主體内容。
8. tfoot
<tfoot>标簽用于定義表格的頁腳<tfoot>标簽用于組合HTML表格中的表注内容。
9.<hr/>一橫線
例子
1
<!DOCTYPE html> 2
<html> 3
<head> 4
<title>王小虎虎的HTML</title> 5
</head> 6
<body> 7
<!-- 表格标簽 --> 8
<table 1" with="30%" align="center" bgcolor="yellow"> 9
<caption>王虎最帥</caption> 10
<tr align="center"> 11
<th>姓名</th> 12
<th>性别</th> 13
<th>婚否</th> 14
</tr> 15
<tr align="center"> 16
<td rowspan="2">虎</td> 17
<td colspan="2">18</td> 18
</tr> 19
<tr align="center"> 20
<td>是</td> 21
<td>否</td> 22
</tr> 23
</table> 24
25
<hr/> 26
</body> 27
</html> 28
書城的demo
1
<!DOCTYPE html> 2
<html> 3
<head> 4
<meta charset="utf-8" /> 5
<title>文藏圖書商城</title> 6
</head> 7
<body> 8
<div id="page"> 9
<!--top--> 10
<div id="top"> 11
<table width="100%"> 12
<tr> 13
<td width="70%"> 14
<img alt="logo" src="img/logo.png" /> 15
</td> 16
<td > 17
<img alt="cart" src="img/cart.gif"/> 18
<a href="#">購物車</a> 19
<a href="#">幫助中心</a> 20
<a href="#">登入</a> 21
<a href="#">注冊</a> 22
</td> 23
</tr> 24
</table> 25
</div> 26
<div id="menu"> 27
<table width="100%" bgcolor="#1C3F09"> 28
<tr align="center"> 29
<td> 30
<a href="http://www.baidu.com"><font color="#ffffff" size="5">紫禁城</font></a> 31
<a href="http://www.baidu.com"><font color="#ffffff" size="5">中國收藏</font></a> 32
<a href="http://www.baidu.com"><font color="#ffffff" size="5">收藏投資導刊</font></a> 33
<a href="http://www.baidu.com"><font color="#ffffff" size="5">收藏家</font></a> 34
<a href="http://www.baidu.com"><font color="#ffffff" size="5">玉委會</font></a> 35
<a href="http://www.baidu.com"><font color="#ffffff" size="5">文藏頭條</font></a> 36
</td> 37
</tr> 38
</table> 39
</div> 40
<div id="search"> 41
<table width="100%" bgcolor="#B6B684"> 42
<tr align="right"> 43
<td> 44
<font color="#ffffff" size="5">搜尋</font> 45
<input type="text" /> 46
<input type="button" value="搜尋" /> 47
</td> 48
</tr> 49
</table> 50
</div> 51
<!--content--> 52
<div id="content"> 53
<div align="right"> 54
<font color="darkgreen" size="5">首頁</font> > 55
<font color="darkgreen" size="5">圖書清單</font> > 56
</div> 57
<h1>商品目錄</h1> 58
<hr /> 59
<h1>北京華星成彙發展有限公司明星雜志</h1> 60
<span>共計6種産品</span> 61
<hr /> 62
</div> 63
<div> 64
<img alt="productlist" src="img/productlist.gif" width="100%"/> 65
</div> 66
<!--書架--> 67
<div> 68
<table width="100%"> 69
<tr align="center"> 70
<td> 71
<div> 72
<img alt="紫禁城" src="zhijincheng/zhijingcheng01.jpg" width="30%" height="35%"/> 73
</div> 74
<div> 75
<span> 76
<span>書名：紫禁城一月刊</span><br /> 77
<span>價格：99$</span> 78
</span> 79
</div> 80
</td> 81
<td> 82
<div> 83
<img alt="紫禁城" src="zhijincheng/zhijingcheng02.jpg" width="30%" height="35%"/> 84
</div> 85
<div> 86
<span> 87
<span>書名：紫禁城二月刊</span><br /> 88
<span>價格：199$</span> 89
</span> 90
</div> 91
</td> 92
<td> 93
<div> 94
<img alt="紫禁城" src="zhijincheng/zhijingcheng03.jpg" width="30%" height="35%"/> 95
</div> 96
<div> 97
<span> 98
<span>書名：紫禁城三月刊</span><br /> 99
<span>價格：299$</span> 100
</span> 101
</div> 102
</td> 103
<td> 104
<div> 105
<img alt="紫禁城" src="zhijincheng/zhijingcheng04.jpg" width="30%" height="35%"/> 106
</div> 107
<div> 108
<span> 109
<span>書名：紫禁城四月刊</span><br /> 110
<span>價格：399$</span> 111
</span> 112
</div> 113
</td> 114
<td> 115
<div> 116
<img alt="紫禁城" src="zhijincheng/zhijingcheng02.jpg" width="30%" height="35%"/> 117
</div> 118
<div> 119
<span> 120
<span>書名：紫禁城五月刊</span><br /> 121
<span>價格：499$</span> 122
</span> 123
</div> 124
</td> 125
<td> 126
<div> 127
<img alt="紫禁城" src="zhijincheng/zhijingcheng02.jpg" width="30%" height="35%"/> 128
</div> 129
<div> 130
<span> 131
<span>書名：紫禁城二月刊</span><br /> 132
<span>價格：699$</span> 133
</span> 134
</div> 135
</td> 136
</tr> 137
</table> 138
</div> 139
</div> 140
</body> 141
</html> 142
表單标簽
1.from标簽 <from></from>标簽代表一個表單，表單用于向伺服器傳輸資料 <from>标簽能夠包含<input>,可以是文本字段。複選框。單選框或者送出按鈕等，還可以包含<textarea> <select>等 <from>常用屬性： 01. name 用于定義表單的名稱 02. action 用于規定送出表單時候向何處發送表單資料 03 mehtod 用于規定送出方式， 一般是post或者get 關于post與get方式的差別： 1.get方式隻能送出少量資料，post可以攜帶大資料 2.get方式送出時，資料會在位址欄上顯示，安全性差。post方式送出不會再位址欄上顯示資料，更加安全。
input 種類
<input> 标簽用于搜集使用者資訊 根據不同的type屬性值，輸入多種類型字段。例如：文本字段，複選框，掩碼後的文本控件 <input type="text"> 定義單行的輸入字段，使用者可在其輸入文本。預設寬度為20個字元 name：定義标簽的名稱 value ： 定義标簽值 size 定義輸入字段的長度 maxlength ： 定義輸入可輸入最大字元個數 <input type="password"> 定義密碼字段。該字段的字元被掩碼
name：定義标簽的名稱value ： 定義标簽值size 定義輸入字段的長度maxlength ： 定義輸入可輸入最大字元個數
<input type="radio"> 定義單選按鈕 name ： 定義标簽名稱 注意：對于單選按鈕，如果想要做到單一選擇，多個radio的name值必須一樣 value ： 定義标簽的值 checked ： 定義該标簽預設被選中 <input type=“button”> 定義可點選按鈕 name ： 定義标簽名稱 value ： 按鈕顯示名稱 <input type=“hidden”> 定義隐藏的輸入字段 name ： 定義标簽的名稱 value ： 定義标簽值 <input type=“file”> 定義輸入字段和“浏覽”按鈕，供檔案上傳 name 定義标簽名稱 <input type=“submit”> 定義送出按鈕。送出按鈕會把表單資料發送到伺服器 name ： 定義标簽名稱 value ： 按鈕 <input type=“reset”> 定義重置按鈕。重置按鈕會清除表單中的所有資料 name ： 定義标簽名稱 value ： 按鈕顯示名稱 <input type=“image”> 定義圖形形式的送出按鈕 name ： 定義标簽名稱 src ： 圖檔url alt ： 圖像的替代文本
select 與option标簽
1.<slect> 用于定義下拉清單 屬性： name： 定義下拉清單的名稱 size： 定義下拉清單可見選項的數目 multiple ： 定義可選擇多個選項 2.<option> 用于定義下拉清單中的選項，需要為與<select>内部 屬性： value ： 定義送往伺服器的選項值 selected ： 定義選項為選中狀态
textarea 标簽
<textarea> 标簽用于定義一個多行文本輸入控件 屬性： name： 定義多行文本框名稱 cols ： 定義多行文本框可見寬度 rows ： 定義多行文本框可見行數 wrap ： 規定多行文本框中文字如何換行 表單執行個體
1
<!DOCTYPE html> 2
<html> 3
<head> 4
<meta charset="UTF-8"> 5
<title>表單</title> 6
</head> 7
<body> 8
<form name="myfrom" action="#" method="post"> 9
<tr> 10
<td> 11
姓名 12
</td> 13
<td> 14
<input type="text" name="username" value="wanghu"/> 15
</td> 16
</tr> 17
<br /> 18
<tr> 19
<td> 20
密碼 21
</td> 22
<td> 23
<input type="password" name="username" value="123456"/> 24
</td> 25
</tr> 26
<br /> 27
<tr> 28
<td> 29
性别 30
</td> 31
<td> 32
<input type="radio" name="sex" checked="checked" /> 男 33
<input type="radio" name="sex" /> 女 34
</td> 35 36
</tr> 37
<br /> 38
<tr> 39
<td> 40
愛好 41
</td> 42
<td> 43
<input type="checkbox" name="like" checked="checked" />足球 44
<input type="checkbox" name="like" />籃球 45
<input type="checkbox" name="like" />排球 46
</td> 47
</tr> 48
<br /> 49
<tr> 50
<td> 51
位址 52
</td> 53
<td> 54
<select name="省" > 55
<option value="bj">北京</option> 56
<option>上海</option> 57
<option>天津</option> 58
<option>武漢</option> 59
</select> 60 61
<select name="區" > 62
<option >朝陽區</option> 63
<option>海澱區</option> 64
<option>大興區</option> 65
</select> 66
</td> 67
</tr> 68
<br /> 69
<tr> 70
<td> 71
郵箱 72
</td> 73
<td> 74
<input type="email" /> 75
</td> 76
</tr> 77
<br /> 78
<tr> 79
<td> 80
上傳頭像 81
</td> 82
<td> 83
<input type="file" /> 84
</td> 85
</tr> 86
<br /> 87
<tr> 88
<td> 89
備注 90
</td> 91
<td> 92
<textarea cols="30" rows="10">文本域</textarea> 93
</td> 94
</tr> 95
<br /> 96
<tr> 97
<input type="submit" value="送出資訊" /> 98
</tr> 99
</form> 100
</body> 101
</html> 102
其它标簽與特殊字元
1. 其它标簽
1. meta标簽
<meta> 元素可提供有關頁面的元資訊（meta-information），比如針對搜尋引擎和更新頻度的描述和關鍵詞。<meta> 标簽位于文檔的頭部，不包含任何内容。<meta> 标簽的屬性定義了與文檔相關聯的名稱/值對。
常用屬性：
l content:定義與http-equiv或name屬性相關的元資訊
l http-equiv:把content屬性關聯到HTTP頭部
l name:把content屬性關聯到一個名稱。
2. link标簽
<link> 标簽定義文檔與外部資源的關系。
<link> 标簽最常見的用途是連結樣式表。
<link>隻能存在于 head 部分，不過它可出現任何次數。
常用屬性:
l type:定義被連結的文檔的MIME類型
l href:定義被連結的文檔的URL href引入css檔案的位址 src: js的檔案位址
l rel:定義目前文檔與被連結文檔之間的關系。
關于<link>标簽詳細用法，我們會在css中介紹
2. 特殊字元
| Html原始碼 | 顯示結果 | 描述 |
| 不斷行的空白符 | ||
| < | < | 小于号 |
| > | > | 大于号 |
| ® | ® | 已注冊 |
| © | © | 版權 |
架構标簽
所謂架構就是将頁面劃分成幾個窗框，就可以讓我們在同一個浏覽器中顯示不止一個頁面。
1. <frameset>
<frameset>是架構結構标簽，它定義如果将視窗分割為架構.
注意:不能與 <frameset></frameset> 标簽一起使用 <body></body> 标簽。
常用屬性:
l cols:垂直切割
l rows:橫向切割
l frameborder:定義架構的邊框，其值可以有0和 1，0表示不要邊框，1表示要顯示邊框。
l border:定義架構的邊框厚度
l bordercolor:定義架構的邊框顔色
l framespacing:定義架構與架構之間的距離。
2. <frame>
<frame>是架構标簽，它定義放置在每個架構中的頁面。
常用屬性:
l src:定義此架構要顯示的頁面url
l name:定義此架構的名稱
l frameborder:定義架構的邊框，其值可以有0和 1，0表示不要邊框，1表示要顯示邊框。
l framespacing:定義架構與架構之間的距離
l bordercolor:定義架構的邊框顔色
l scrolling:定義是否顯示卷軸，YES表示要顯示，NO表示不顯示，AUTO視情況而定。
l noresize:定義架構大小不可以改變。
l marginhight:定義架構高度部分邊緣所保留的空間。
l marginwidth:定義架構寬度部分邊緣所保留的空間。
3. <iframe>
iframe 元素會建立包含另外一個文檔的内聯架構（即行内架構）
常用屬性:
l src:定義些架構要顯示的頁面url
l name:定義些架構的名稱
l width:定義些架構的寬度
l height:定義些架構的高度
l marginwidth:定義插入的頁面與框邊所保留的寬度
l marginheight: 定義插入的頁面與框邊所保留的高度
l frameborder:定義架構的邊框，1表示顯示邊框 ，0表示不顯示
l scrolling:定義是否允許卷動，YES允許，NO不允許
代碼
1
<!DOCTYPE html> 2
<html> 3
<head> 4
<meta charset="UTF-8"> 5
<title></title> 6
</head> 7
<frameset rows="300,*"> 8
<frame src="index.html" /> 9 10
<frameset cols="300,*"> 11
<frame src="from.html"/> 12
<frameset cols="200,*"> 13
<frame src="from.html"/> 14
<frame name="right" src="https://www.baidu.com" /> 15
</frameset> 16
</frameset> 17
</frameset> 18
</html> 19
代碼 left.html
1
<!DOCTYPE html> 2
<html> 3
<head> 4
<meta charset="UTF-8"> 5
<title></title> 6
</head> 7
<body> 8
<a href="https://www.baidu.com" target="right">百度</a> 9
<a href="http://www.sohu.com" target="right">火狐</a> 10
</body> 11
</html> 12
架構标簽.html
1
<!DOCTYPE html> 2
<html> 3
<head> 4
<meta charset="UTF-8"> 5
<title></title> 6
</head> 7
<frameset rows="300,*"> 8
<frame src="index.html" /> 9 10
<frameset cols="300,*"> 11
<frame src="left.html"/> 12
<frame name="right" /> 13
</frameset> 14
</frameset> 15
</html> 16
![Struts入門基礎[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)