標籤：煙台 字型 htm pad 開始 教育 target 功能 key
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 style="width: 100%;height: 40px;
background-color:red ;">
這是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 style="color: red;font-size: 48px;">帥</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：//[email protected]>點擊發送郵件！</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 style="width: 100%; height: 800px;
background-color: red;">111111111</div>
<a href="01-HTML基本標籤的head部分.html" target="_blank"
title="123">這是一個超連結</a>
<a href="mailto://[email protected]"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 style="text-decoration: underline;">css實現底線</span>
<s>s標籤帶刪除線</s>
<span style="text-decoration: line-through;">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 style="background-color:red" />
<colgroup style="background-color:blue:">
<col/>
<col/>
</colgroup>
-->
<table border="1" cellspacing="0" style="border-collapse:
collapse;" 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="width:100px; height:100px;"
② 設定文本域大小不能拖動：
style="resize: none;"
③ 設定文本域為唯讀模式，不能修改：
<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 style="width: 200px; height: 100px; resize: none; overflow-y: scroll; overflow-x: hidden;" 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 style="height:400px; background-color: #ff8040;"></div>
</body>
</html>
HTML基本標籤
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
