HTML基本标签
1、01-HTML基本標簽的head部分.html
<!DOCTYPE html>
<!--
文檔類型聲明：讓瀏覽器，按照html5的標準對代碼進行解釋與執行。
文檔類型聲明必不可少，而且，必須放在文檔最上方。
如果不寫文檔類型聲明，瀏覽器會默認按照兼容模式運行，可能會出現不明BUG。
-->
<html>
<head>
<!--
head中，主要放一些關于網頁設置的相關語句。
-->
<!--
設置網頁的字符集編碼格式：
GB2312：國標碼。簡體中文的編碼格式。
GBK：擴展的國標碼。比國標碼多了更多的編碼格式。
utf—8：萬國碼。可以兼容絕大多數國家的語言。
HTML4.01之前，聲明字符集編碼的格式：
<meta http-equiv="Conent-type" content="text/html;
charset=utf-8" />
-->
<meta charset="utf-8" />
<!--
設置網頁關鍵字：
name=“keywords”表示當前語句用于設置網頁關鍵字
content=“”表示網頁的關鍵字內容。多個關鍵字之間用英文逗號分隔。
-->
<meta name="keywords"/ content="杰瑞教育，HTML5，Web開發">
<!--
設置網頁描述：
網頁的描述，在搜索引擎中搜索網站時，標題下面的一段文字，就是網頁的描述內容。
-->
<meta name="description" content="。。。。。。。。。。。。。。"/>
<!--
title：網頁的標題，也就是網頁選項卡上的文字。
-->
<title>我最帥</title>
<!--
鏈接網頁小圖標：選項卡上的小圖片。
rel屬性：選擇icon，表示鏈接的文件，將作為網頁的icon圖標。
href屬性：選擇圖片所在的路徑地址。
-->
<link rel="icon" href="img/icon.png" />
</head>
<body>
<!--
body中的內容，會顯示在瀏覽器的展示區域。
-->
</body>
</html>
2、02-HTML基本塊級標簽.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML基本標簽</title>
</head>
<body>
<!--
HTML標簽，分為“塊級標簽”和“行級標簽”。
【塊級標簽和行級標簽的區別】
①塊級標簽自動換行，前后隔一行；
行級標簽不會自動換行，從左往右依次顯示；
②塊級標簽的寬度默認是100%；
行級標簽的寬度由文字內容撐開；
③塊級標簽可以設置寬度、高度、邊距等屬性；
行級標簽不能設置上述屬性
從寫法上，HTML標簽分為“成對標簽”和“自閉合標簽（空標簽）”
①成對標簽：成對出現，有開始標簽，必須有結束標簽，內容包裹在兩個標簽之間。
例如：<h1></h1> <p></p> <title></title>
②自閉合標簽/空標簽：只有一個標簽，用/表示標簽的自動閉合（/可以省略）。
例如：<hr/> <link/> <meta/>
-->
<!--【常見的塊級標簽】-->
<!--
h標簽：標題標簽，默認加粗，h1最大，h6最小。
-->
<h1>我最帥！</h1>
<h2>我最帥！</h2>
<h3>我最帥！</h3>
<h4>我最帥！</h4>
<h5>我最帥！</h5>
<h6>我最帥！</h6>
<!--
hr標簽：水平線標簽。
-->
<hr />
<!--
p標簽：段落標簽，表示網頁中的一段文字。
br標簽：換行符號，在代碼中敲回車，在網頁中并沒有作用。必須使用<br>斷行
-->
<p>這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。
這是一個段落。這是一個段落。<br />這是一個段落。這是一個段落。這是一個段落。</p>
<p>這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。
這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。</p>
<a name="center">123</a>
<!--
blockquote:引用標簽。表示標簽中的文字是引用自其他網站的內容。
瀏覽器默認顯示效果：整段向后縮進
cite屬性：表示引用內容的來源，常寫引用的網址URL
-->
<blockquote cite="www.jredu100.com">我最帥！</blockquote>
<!--
pre標簽：預格式標簽。與p標簽不同的是，pre標簽會保留代碼中的空格和回車，在網頁直接顯示。
最常用的作用，是在網頁中顯示代碼段，保留代碼段格式。
-->
<pre>
jsloader({
dasdasadaa addsadsaddd
})
</pre>
<!--【基于布局的塊級標簽】-->
<!--
有序列表ol order list
一個有序列表由多個li組成
-->
<ol>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ol>
<!--
無序列表ul unorder list
-->
<ul>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ul>
<!--
定義列表dl
定義列表包含兩部分：
<dt></dt>：定義列表的標題，標題頂格顯示，一般一個定義列表
只有一個標題
<dd></dd>：定義列表的描述項，相對于標題向后縮進顯示，一個
列表可以有多個描述項。
-->
<dl>
<dt>定義列表的標題</dt>
<dd>定義列表的描述項1</dd>
<dd>定義列表的描述項2</dd>
<dd>定義列表的描述項3</dd>
</dl>
<!--
了解：組合標簽figure
包含兩部分：
img 一張圖片
figcaption： 圖片的標題，在圖片正下方顯示。
-->
<figure>
<img src="img/icon.png"/>
<figcaption>圖片的標題</figcaption>
</figure>
<!--
div 分區標簽，用于配合css使用。將網頁劃分為區塊，可以包裹各種
標簽。
-->
<div>
這是div里面的文字
</div>
</body>
</html>
3、03-HTML基本行級標簽.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a name="top"></a>
<!--
span標簽：用于包裹行內的文字。常配合css使用修改文字樣式。
-->
<span>我最帥！</span>
我最<span>帥</span>！！！
<!--
【em/strong/i/b 區別】
1、em和i都能傾斜，strong和b都能加粗。但是，em和strong多了一層強調的
含義。（強調的作用：可以讓搜索引擎快速的抓取網頁的重部分。實現代碼的語義化）
2、em和strong都有強調的作用，但是em是傾斜，strong是加粗。
而且，strong的強度程度要比em更高。
-->
<em>em標簽，傾斜+強調</em>
<strong>strong標簽，加粗+強調</strong>
<i>i標簽，傾斜</i>
<b>b標簽，加粗</b>
<u>u標簽，下劃線</u>
<!--【】常見引用標簽
常見的引用標簽有：blockquote、q、cite
區別：
①顯示效果上：blockquote整段縮進、q加引號、cite傾斜
②從功能上：blockquote用于引用一整段內容，是塊級標簽。q用于
引用一句話，是行級標簽。cite常用于引用作品名、書畫名。
-->
<blockquote cite="www.jredu100.com">塊引用</blockquote>
<q cite="www.jredu100.com">q標簽，短引用</q>
<cite cite="www.jredu100.com">cite引用</cite>
<!--
字體大一號和字體小一號，但是已經被淘汰了，修改字體統一使用css
-->
<small>小一號字體</small>
<big>大一號字體</big>
<!--
【img圖片標簽】
1.src屬性：表示圖片所在的路徑。
[路徑的表示方式]
①網絡圖片地址。并不建議使用。
②可以使用圖片的絕對路徑。但是，嚴禁使用絕對路徑。因為，絕對路徑
使用file：//協議，網頁使用http：//協議無法打開訪問file：//文件。
file：//C：/sunyang.jpg--絕對路徑寫法：flie：///盤符：/文件路徑
③使用相對路徑。推薦使用的唯一方式。
a.圖片在當前文件的下一層，“文件加名/圖片名”
b.圖片與當前文件在同一層，直接寫“圖片名”
c.圖片在當前文件的上一層，“../圖片名”
注意：圖片必須包含在項目里，不能退出項目根目錄。
2.width、height 寬度、高度屬性
3.title：鼠標指上時顯示的文字
4.alt：圖片無法加載時，顯示的文字。省略alt，將默認顯示title內容
5.align：圖片周圍的文字，相對于圖片的排列方式；top 文字居上，
center 文字居中 bottom 文字局底
-->
<img src="img/icon.png"/ width="100" height="100"
title="鼠標指上時顯示的文字" alt="111" align="bottom">
<!--
【a標簽 超鏈接】
1.href屬性：超鏈接跳轉的地址。可以是網絡連接，也可以是本地
HTML文件的相對路徑。
2.target屬性：超鏈接新頁面打開的位置。
_slef在當前頁面打開（默認） _blank在新頁面打開
3.title屬性：鼠標指在超鏈接上顯示的文字。
【功能性超鏈接】
1.mailto：給指定郵箱發送郵件。
<a href=mailto：//714143855@qq.com>點擊發送郵件！</a>
2.tencent：與指定QQ聊天。
<a href="tencent://message/?uin=1277980605">聊天
</a>
3.錨鏈接：點擊超鏈接，可以跳轉到頁面的指定位置（錨點）
①在頁面的指定位置，定義一個錨點：
<a name="center"></a>
②將超鏈接的href屬性，改為“#錨點名稱”
<a href="#center">跳到div上方</a>
③跳轉到其他頁面指定錨點的方式：
<a href="其他頁面地址.html#center">123321</a>
-->
<a name="center"></a>
<div>111111111</div>
<a href="01-HTML基本標簽的head部分.html" target="_blank"
title="123">這是一個超鏈接</a>
<a href="mailto://714143855@qq.com"target="_blank"
title="123">點擊發送郵件！</a>
<a href="tencent://message/?uin=1277980605"
target="_blank"title="123">聊天</a>
<a href="#top">調回頂部</a>
<a href="#center">跳到div上方</a>
<a href="02-HTML基本塊級標簽.html#center">123321</a>
<!--
【W3C倡導的Web結構】
1、內容與表現分離。Html與css分離。
2、內容與行為分離。Html與JavaScript分離。
3、Html代碼，必須要實現語義化。
【W3C的規范】
1、標簽名和屬性名稱必須小寫
2、HTML標簽必須關閉
3、屬性值必須用引號括起來
4、標簽必須正確嵌套
①嵌套的標簽，不能發生交叉；
②塊級標簽可以包裹行級，行級標簽不能包裹塊級；P標簽不能包裹P標簽等。。
-->
<!--
其他的行級標簽（了解即可）
-->
<u>u標簽帶下劃線</u>
<span>css實現下劃線</span>
<s>s標簽帶刪除線</s>
<span>css實現刪除線</span>
<!--定義專業術語
dfn 定義專業術語 abbr 專業術語縮寫詞
-->
我們正在學習<dfn>HTML5</dfn>，簡稱為<abbr>H5</abbr>。
<!--
code標簽：提示搜索引擎，當前為一段計算機代碼。
但是code不會保留代碼格式，需要配合pre標簽共同使用。
-->
<pre>
<code>
jsLoader({
name : 'iplookup',
url : 'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js'
});
</code>
</pre>
<!--
表示變量
-->
<var>x</var>+<var>y</var>=1
<!--
bdo：定義文本的顯示方向
有一個重要屬性dir： ltr 從左往右顯示 、 rtl 從右往左顯示
-->
<bdo dir="rtl">姜浩真帥</bdo>
<!--
表示需要用戶輸入的文字
-->
請輸入“<kbd>Esc</kbd>”退出系統。
<!--
sub 下標 sup 上標
-->
H<sub>2</sub>O X<sup>2</sup>
<!--
表示時間
-->
現在是<time>16:10</time>
</body>
</html>
4、表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--
表格table
表格中每一行，用tr表示；
一行中的每個單元格，用td表示；
首行的表頭中每個單元格，用th表示，th默認文字會加粗、居中。
【表格中的各種屬性】
1.border：給表格的每個td和整個table加邊框。如果border的值>1，則只
有最外層邊框加粗，td上的邊框不變。
2.cellspacing：設置單元格與單元格之間的間距。
cellspacing=“0”可以設置邊框之間的間距為0，但是相鄰的邊框不會合并，而是
顯示為兩條線的寬度。
[設置表格邊框合并]
可以使用css設置：style="border-collapse: collapse;"
設置邊框合并以后，cellspacing屬性將會失效。
3.cellpadding：單元格內邊距，單元格中文字與邊距之間的距離。
4.width/height:表格的寬度、高度
5.align：設置表格在瀏覽器中，居左、居中、居右
6.bgcolor：表格背景色
bordercolor：表格的邊框顏色
background:表格背景圖。背景色和背景圖同時存在時，背景圖生效。
【表格的行列屬性】
作用于tr或者td上的屬性：
1.width、height：寬度、高度
2.bgcolor：背景色。
當表格的屬性與行列的屬性發生沖突時，優先級采用“近者優先”的原則：
table<tr<td
3.align:設置單元格中的文字，水平對齊方式；left center right
valign：設置單元格中的文字，垂直對齊方式：top center bottom
【表格的跨行與跨列】
1.跨列：colspan=“n”如果某個單元格跨n列，則該單元格右側n-1個td就不需要了；
2.跨行：rowspan=“n”如果某個單元格跨n行，則該單元格下方n-1個td就不需要了；
表格的結構化：
完整的表格結構，包括：
caption：表格的標題，無論<caption>標簽放在表格第幾行，表格標題遠在表格
正上方居中。
thead：表格的表頭部分，永遠在表格最上部。
tbody：表格的身體部分，在thead之下，tfoot之上。
tfoot：表格的尾部。永遠在表格最下部。
表格的直列化
表格有幾列，就可以在表格的最上方寫幾個<col />標簽，每個<col />就對應著第幾列，
可以對<col />標簽修改樣式、添加name等屬性，表示這一列的所有td同步修改：
如果，需要對多列修改共同樣式，可以使用<colgroup></colgroup>標簽包裹
多個<col />。
<col />
<colgroup>
<col/>
<col/>
</colgroup>
-->
<table border="1" cellspacing="0" cellpadding=100 width="500" height="400"
align="left" bgcolor="yellow" bordercolor="red"
/*background="img/icon.png"*/>
<tr>
<th>1-1</th>
<th>1-2</th>
<th>1-3</th>
<th>1-4</th>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
</body>
</html>
5、表單
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>用戶注冊</h1>
<!-- 【form表單】
1、form表單有兩個重要的屬性：
action：表示，將表單提交給哪個服務器地址；
method：表單提交數據的方式，可選值有 get 和 post 兩種。
[get和post區別]
① get使用URL傳遞數據。所有內容在地址欄可見，不安全；
post的數據無法在地址欄看到，比較安全。
② get傳遞的數據量有限，而且只能傳遞純文字內容；
post可以傳遞大量數據，并且可以傳遞圖片、視頻等文件。
③ get的傳輸速度要比post快。
[get傳遞數據的URL格式]
http://原來的地址.html?name1=value1&name2=value2
比如：http://127.0.0.1:8020/0595.html?username=123
所以，input使用時，name屬性必不可少。缺少name，將導致該輸入框的數據不向后臺傳遞。
2、 input的常用屬性：
① type ：表示當前輸入框是何種類型的輸入框；
② name ： 給輸入框起別名。向后臺傳遞時，使用name=value的形式傳遞
③ value： 當前input的默認值；
④ placeholder: 輸入框的提示內容。當輸入框有value時，提示內容消息。
⑤ hidden： 隱藏當前輸入框。 可以寫為hidden="hidden",也可以省略屬性值，只寫<input type="text" hidden />
隱藏的輸入框內容，依然可以向后臺傳遞數據
⑥ disabled： 禁用當前輸入框。 可以顯示，不能使用。
被禁用的輸入框內容，將不能向后臺傳遞數據。
⑦ checked="checked" 設置單選按鈕/多選按鈕，默認選中
3、input的type類型：
① text： 普通的文本框；
② password： 密碼框。 輸入的內容 ，顯示為小黑點。
③ radio： 單選按鈕。 單選按鈕的value不能省略，這個value需要傳到后臺；
單選按鈕，憑借name是否相同，區分按鈕是否為同一組。 同一組按鈕只能選中一個，name必須相同。
checked="checked" 設置單選按鈕，默認被選中。
④ checkbox： 多選按鈕。 其他與單選按鈕相同。
⑤ file: 文件上傳框。
accept屬性，可以限制只能上傳何種類型的文件。 "*"表示可以接受所有文件，"image/*"表示只能接受圖片。
multiple="multiple" 設置可以上傳多個文件。
⑥ submit： 表單提交按鈕。
⑦ reset ： 表單重置按鈕。點擊將表單恢復為初始狀態。
⑧ image ： 圖形提交按鈕。src屬性導入圖片，與submit都具有提交表單的作用。
⑨ button： 顯示為按鈕形狀，但是沒有任何作用。
⑩ hidden： 隱藏的輸入框。與普通輸入框+hidden="hidden"的作用相同。
4、 select 下拉選擇區塊
① select里面的每一項，用<option></option>標簽表示；
② name屬性，需要寫到select標簽上；
③ option標簽如果有value屬性，則向后臺傳遞的將是value屬性的值，如果沒有value屬性，則傳遞的是<option></option>標簽之間的文字。
④ option添加屬性selected="selected"， 設置默認選中項。
⑤ select添加屬性multiple="multiple"， 設置當前下拉控件可以多選
⑥ option添加屬性title，表示鼠標指上后顯示的文字。
⑦ select可以使用<optgroup></optgroup> 標簽對選項進行分組，用label屬性顯示分組名。
<select >
<optgroup label="沿海">
<option>青島</option>
<option>煙臺</option>
</optgroup>
<optgroup label="內地">
<option>濟南</option>
<option>臨沂</option>
</optgroup>
</select>
5、 textarea 文本域
① 文本域大小控制：
可以用文本域屬性cols="20"(寬度多少字符) rows="10"(高度多少行)
可以使用CSS樣式style="100px; height:100px;"
② 設置文本域大小不能拖動：
③ 設置文本域為只讀模式，不能修改：
<textarea readonly="readonly"></textarea>
④ 文字超出區域處理：
使用style="overflow: xx;"可以設置文字超出區域的顯示的方式：
>>> overflow: hidden; 超出區域的文字隱藏不顯示；
>>> overflow: scroll; 無論文字多少，都會顯示水平垂直滾動條
>>> overflow: auto; 自動，默認效果。文字多顯示滾動條，文字少，不顯示滾動條。
>>> 可以使用overflow-x和overflow-y單獨修改兩個方向的滾動條
overflow-y: scroll; overflow-x: hidden;
【HTML5 智能表單】
1、H5給我們提供了將form外的input與表單關聯的方式。只需要給form表單起一個id，然后給表單外面的input添加form屬性，指向這個id，就可以實現表單與input的綁定；
<form id="ff"></form>
<input form="ff"/>
2、 H5給我們新增了許多input的新的type類型。
range color date email url
3、H5新增的input屬性：
① form屬性： 關聯指定表單的id。
② Placeholder： 輸入框的提示內容
③ required="required" 必填
④ autofocus="autofocus" 指定輸入框，自動獲得焦點
⑤ autocomplete: 是否開啟自動提示完成功能。 默認為開啟狀態，設置為off表示關閉，設置為on表示打開。
可以給form標簽設置autocomplete，控制表單所有輸入框的自動提示功能。
-->
<form action="" method="get" id="form1">
<table>
<tr>
<td>用戶名</td>
<td>
<input type="text" name="username" value="jianghao" disabled/>
<input type="text" name="username" value="jianghao" hidden/>
<input type="hidden" name="username" value="jianghao" />
</td>
</tr>
<tr>
<td>密碼</td>
<td>
<input type="password" name="password" placeholder="請輸入密碼"/>
</td>
</tr>
<tr>
<td>性別</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女" />女
<input type="radio" name="sex" value="不明" checked="checked" />不明
</td>
</tr>
<tr>
<td>興趣</td>
<td>
<input type="checkbox" name="hobby" value="吃"/>吃
<input type="checkbox" name="hobby" value="喝" />喝
<input type="checkbox" name="hobby" value="玩" checked="checked" />玩
<input type="checkbox" name="hobby" value="樂" checked="checked" />樂
</td>
</tr>
<tr>
<td>身份證</td>
<td>
<input type="file" name="card" accept="image/*" multiple="multiple" />
</td>
</tr>
<tr>
<td>城市</td>
<td>
<select name="city" >
<optgroup label="沿海城市">
<option value="123">青島</option>
<option selected="selected">煙臺</option>
</optgroup>
<optgroup label="內地城市">
<option title="濟南">濟南</option>
<option>臨沂</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td>閱讀服務協議：</td>
</tr>
<tr>
<td colspan="2">
<textarea readonly="readonly">這是一份你必須同意的協議。這是一份你必須同意的協議。這是一份你必須同意的協議。這是一份你必須同意的協議。這是一份你必須同意的協議。這是一份你必須同意的協議。這是一份你必須同意的協議。這是一份你必須同意的協議。這是一份你必須同意的協議。
</textarea>
</td>
</tr>
<tr>
<td>
<input type="submit" value="注冊" />
</td>
<td>
<input type="reset" value="重置" />
</td>
</tr>
<tr>
<td>
<input type="image" src="img/icon.png" />
</td>
<td>
<input type="button" value="一個并沒有什么卵用的按鈕" />
</td>
</tr>
</table>
</form>
<input type="text" name="test" form="form1" required="required" autofocus="autofocus" autocomplete="off" />
<div></div>
</body>
</html>
總結
- 上一篇： Angular jasmine单元测试框
- 下一篇： ps免费素材网站