HTML標簽學習
文章目錄
- HTML標簽學習
- head標簽學習
- body標簽學習
- body文本標簽
- 1.標題標簽
- 2.水平線標簽
- 3.段落標簽
- 4.換行符標簽
- 文本標簽全部代碼
- body串列標簽
- 1.無序串列
- 2.有序串列
- 3.自定義串列
- 串列標簽全部代碼
- 圖片標簽學習
- 代碼粘貼
- 超鏈接標簽學習
- a標簽
- 錨點學習
- 代碼粘貼
- 表格標簽的學習
- 表格的合并
- 代碼粘貼
- 表格標簽練習（繪出求職簡歷表）
- 內嵌標簽的學習
- 框架標簽的學習
- form表單標簽的學習
- from表單域標簽學習
- 注冊頁面練習
head標簽學習
- 網頁標題標簽
<title>HTML學習</title> <!-- 告訴瀏覽器我們需要什么標題來顯示頁 -->
- 編碼格式標簽
<meta charset="utf-8" /> <!-- H5網頁決議編碼標簽 -->
<meta http-equiv="content-type" content="text/html; charset=utf-8"><!-- H4網頁決議編碼標簽 -->
- 網頁搜索優化標簽
<title>HTML學習</title> <!-- 告訴瀏覽器我們需要什么標題來顯示頁 -->
<meta name="Description" content="本網頁是關于HTML的head的學習，666，哈哈哈"/> <!-- 網頁描述 -->
<meta name="Keywords" content="azb,lll,xxx"/> <!-- 網頁關鍵字 -->
<meta name="author" content="安老師"/> <!-- 網頁作者 -->
- 網頁指定跳轉標簽
<meta http-equiv="refresh" content="5;url = https://www.baidu.com"/><!-- 表示五秒后跳轉指定URL -->
- 其他標簽
CSS或js引入的標簽
body標簽學習
body文本標簽
1.標題標簽
h1到h6：會將其中的資料加粗顯示，并且顯示依次減弱，標題標簽自帶換行功能（塊級標簽）
屬性：align ： center right left
<h1 align="center">我是標題</h1>
<h2 align="center">我是標題</h2>
<h3 align="middle">我是標題</h3>
<h4 align="right">我是標題</h4>
<h5>我是標題</h5>
<h6>我是標題</h6>
2.水平線標簽
hr:會在頁面中顯示一條水平線,默認居中顯示
屬性:
- width="寬度”設定水平線的寬度
- size=“高度”
- 設定水平線的高度
- color="顏色”設定水平線的顏色
<hr width="200px" size="20px" color="red" align="left">
<hr width="40%">
3.段落標簽
p:會將一段資料作為整體進行顯示,主要是進行css和js操作時比較方便.會自動換行(塊級元素)
特點:段間距比較大
4.換行符標簽
br:告訴瀏覽器需要在此位置換行
5.空格符標簽
 :告訴瀏覽器在此位置增加空格
6.權重標簽
- b:會將內容加黑顯示
- i :會將內容斜體顯示
- u:會將內容增加下劃線
- del :增加中劃線
權重標簽可以隨意疊加
注：
1標簽的屬性是對標簽的功能進一步的補充 ,可以由開發人員自由指定標簽的屬性值,來達到想要的顯示效果，
2像素單位占據的是電腦螢屏的大小，百分比占據的是瀏覽器視窗的大小，
<p>
<u>東方網·演兵場4月6日報道</u>：<br>多家央媒近日集中報道了入列一年多的首艘國產航
母山東艦，披露了其社區化生活、官兵伙食和近防裝備等諸多細節，演兵場注
意到
</p>
<p>
<b>東方網</b>·演兵場<i>4月6日</i>報道：多家央媒近日集中報道了入列一年多的首艘國產航
母山東艦，<del>披露了其社區化生活、官兵伙食和近防裝備等諸多細節，演兵場注
意到</del>
</p>
<b><i><u><del>今天適合學習d</del></u></i></b>
文本標簽全部代碼
<html>
<head>
<meta charset="utf-8"/>
<title>body標簽學習</title>
</head>
<body>
<h1 align="center">我是標題</h1>
<h2 align="center">我是標題</h2>
<h3 align="middle">我是標題</h3>
<h4 align="right">我是標題</h4>
<h5>我是標題</h5>
<h6>我是標題</h6>
<hr width="200px" size="20px" color="red" align="left">
<hr width="40%">
<p>
<u>東方網·演兵場4月6日報道</u>：<br>多家央媒近日集中報道了入列一年多的首艘國產航
母山東艦，披露了其社區化生活、官兵伙食和近防裝備等諸多細節，演兵場注
意到
</p>
<p>
<b>東方網</b>·演兵場<i>4月6日</i>報道：多家央媒近日集中報道了入列一年多的首艘國產航
母山東艦，<del>披露了其社區化生活、官兵伙食和近防裝備等諸多細節，演兵場注
意到</del>
</p>
<b><i><u><del>今天適合學習d</del></u></i></b>
</body>
</html>
body串列標簽
1.無序串列
ul
li :該標簽中書寫串列內容,一個1i標簽代表串列中的一行資料特點:默認資料前有一個黑圓圈符號.
2.有序串列
ol
li :該標簽中書寫串列內容,一個1i標簽代表串列中的一行資料特點:
會自動的給串列進行順序編碼,格式從小到大并且是連續的，
屬性:type:可以改變順序編碼的值，可以是1 a A I, ,默認使用阿拉伯數字進行順序編碼
3.自定義串列
dl
dt :資料的標題
dd:資料的具體內容,一個dd表示一 條資料、
串列標簽全部代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>body標簽（串列標簽）</title>
</head>
<body>
<h3>串列的學習</h3>
<hr >
<h3>無序串列</h3>
<ul>
<li>北京</li>
<li>廣州</li>
<li>上海</li>
<li>西安</li>
</ul>
<h3>有序串列</h3>
<ol type="A">
<li>xx</li>
<li>hh</li>
<li>ll</li>
<li>qq</li>
</ol>
<dl>
<dt>java</dt>
<dd>python</dd>
<dd>go</dd>
<dd>shell</dd>
<dt>hh</dt>
<dd>aa</dd>
<dd>xx</dd>
<dd>ll</dd>
</dl>
</body>
</html>
圖片標簽學習
img src :
圖片路徑
- 本地資源路徑:一般本地圖片資源使用相對路徑即可
- 網路資源路徑:圖片資源的URL地址
屬性
- width:設定圖片的寬度,如果是單獨設定,則再圖片保證不失真的情況下自動縮小或者放大；單位可以是px也可以是百分比
- height :設定圖片的高度,如果是單獨設定，則再圖片保證不失真的情況下自動縮小或者放大；單位可以是px也可以是百分比
- title:圖片標題，滑鼠放在圖片上的時候會顯示
- alt:圖片加載失敗后的提示語
注意:圖片是不會自動換行的(行內元素)
代碼粘貼
<html>
<head>
<meta charset="utf-8"/>
<title>圖片標簽學習</title>
</head>
<body>
<h3>圖片標簽學習</h3>
<hr >
<img src="D:/" title="hanpi" alt="shabi">
<img src="./img/1.jpg" height="200px" title="shabi" alt="hanpi">
<img src="img/2.jpg" width="200px" >
<hr >
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3767793794,672931879&fm=26&gp=0.jpg" >
</body>
</html>
超鏈接標簽學習
a標簽
href :要跳轉的網頁資源路徑
本地資源:相對路徑
網路資源:網路資源(網頁)的URL
target :指明要跳轉的網頁資源的顯示位置
- _self 在當前頁中重繪顯示
- _blank 在新的標簽頁中顯示
- _top 在頂層頁面中顯示
- _parent 在父級頁面中顯示
錨點學習
作用:在一張網頁中進行資源跳轉
使用:
- 先使用超鏈接標簽在指定的網頁位置增加錨點.格式為:
<a name="錨點名”></a> - 使用a標簽可以跳轉指定的錨點,達到網頁內部資源跳轉的目的,格式:
<a href="#錨點名">訪問方式/a>
代碼粘貼
#超鏈接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超鏈接</title>
</head>
<body>
<h3>超鏈接標簽</h3>
<hr >
<a href="圖片標簽 .html" target="_blank">圖片標簽</a>
<hr >
<a href="body標簽（串列標簽）.html" target="_parent"><img src="img/1.jpg" height="200px" ></a>
<hr >
<a href="http://www.baidu.com">baidu</a>
<h3>錨點學習</h3>
<a href="錨點學習.html">錨點學習</a>
</body>
</html>
#錨點學習
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>錨點學習</title>
</head>
<body>
<a href="#first">第一章</a><br>
<a href="#second">第二章</a><br>
<h5>第一章</h5>
<a name="first"></a>
<p>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
</p>
<p>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
</p>
<p>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
</p>
<p>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
</p>
<h5>第二章</h5>
<a name="second"></a>
<p>
哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或
</p>
<p>
哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或
</p>
<p>
哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或
</p>
<a href="#">回到頂部</a>
</body>
</html>
表格標簽的學習
table :宣告一個表格
- ? tr:宣告一行，設定行高及改行所有單元格的高度，
- ? th:宣告一個單元格,表頭格.默認居中加黑顯示
- ? td:宣告一個單元格,默認居左顯示原始資料
注：行高即改行所有單元格的寬度；單元格的寬度即列寬
屬性:
- border ：給表格添加邊框
- width：設定表格的寬度
- height：設定表格的高度
- cellpadding：設定內容居邊框的距離
- cellspacing：設定邊框的大小
特點：默認根據資料的多少進行表格的大小顯示
<table border="1px" bordercolor="red" cellpadding="10" cellspacing="0">
<tr height="50px">
<th width="100px">科目</th>
<th>分數</th>
<th>姓名</th>
<th>性別</th>
</tr>
<tr>
<td>英語</td>
<td>100</td>
<td>張三水電費水電費</td>
<td>男</td>
</tr>
<tr>
<td>漢語</td>
<td>10</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
表格的合并
步驟：
1.首先確保表格是一個規整的表格
2.根據要合并的單元格,找到其所在的原始碼位置
3.合并
- 行合并:在要合并的單元格中的第一個單元格 上使用屬性rowspan= “要合并的單元格的個數” ,并洗掉其他單元格完成合并
- 列合并:在要合并的單元格中的任意一個上使用屬性colspan=“要合并的單元格的個數” ,并洗掉其他單元格
<h4>表格合并的學習</h4>
<hr >
<table border="2" cellpadding="10" cellspacing="0" bordercolor="red">
<tr height="35px">
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
<td width="200px"colspan="2" rowspan="2"></td>
</tr>
<tr height="35px">
<td colspan="2"></td>
<td></td>
</tr>
<tr height="35px">
<td></td>
<td></td>
<td></td>
<td rowspan="2" ></td>
<td></td>
</tr>
<tr height="35px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
代碼粘貼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表格標簽</title>
</head>
<body>
<h3>表格標簽的學習</h3>
<hr >
<table border="1px" bordercolor="red" cellpadding="10" cellspacing="0">
<tr height="50px">
<th width="100px">科目</th>
<th>分數</th>
<th>姓名</th>
<th>性別</th>
</tr>
<tr>
<td>英語</td>
<td>100</td>
<td>張三水電費水電費</td>
<td>男</td>
</tr>
<tr>
<td>漢語</td>
<td>10</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
<h4>表格合并的學習</h4>
<hr >
<table border="2" cellpadding="10" cellspacing="0" bordercolor="red">
<tr height="35px">
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
<td width="200px"colspan="2" rowspan="2"></td>
</tr>
<tr height="35px">
<td colspan="2"></td>
<td></td>
</tr>
<tr height="35px">
<td></td>
<td></td>
<td></td>
<td rowspan="2" ></td>
<td></td>
</tr>
<tr height="35px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
表格標簽練習（繪出求職簡歷表）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格檔案作業</title>
</head>
<body>
<table border="green" cellpadding="10" cellspacing="">
<tr>
<th colspan="2" width="100px">基本資訊</th>
<td colspan="8" width="400px"></td>
</tr>
<tr>
<th colspan="2">姓名</th>
<td colspan="2" width="100px"></td>
<th colspan="2" width="100px">性別</th>
<td colspan="2" width="100px"></td>
<td rowspan="7" colspan="2" width="200px"></td>
</tr>
<tr>
<th colspan="2">民族</th>
<td colspan="2"></td>
<th colspan="2">出生年月</th>
<td colspan="2"></td>
</tr>
<tr>
<th colspan="2">政治面貌</th>
<td colspan="2"></td>
<th colspan="2">健康狀況</th>
<td colspan="2"></td>
</tr>
<tr>
<th colspan="2">籍貫</th>
<td colspan="2"></td>
<th colspan="2">學歷</th>
<td colspan="2"></td>
</tr>
<tr>
<th colspan="2">電子信箱</th>
<td colspan="2"></td>
<th colspan="2">聯系電話</th>
<td colspan="2"></td>
</tr>
<tr>
<th colspan="2">專業</th>
<td colspan="6"></td>
</tr>
<tr>
<th colspan="2" >畢業院校</th>
<td colspan="6"></td>
</tr>
<tr>
<th colspan="2">求職意向</th>
<td colspan="8"></td>
</tr>
</table>
</body>
</html>
內嵌標簽的學習
iframe
引數：
- ? src:要顯示的網頁資源路徑；可以是本地(相對路徑)也可以是網路資源(URL )
注：默認當前頁面打開及加載src指向的資源
- ? width:設定顯示區域的寬度
- height :設定顯示區域的高度
作用:在當前網頁中加載其他網頁的資源，達到不同網頁資源之間不相互干擾，并能在同一個頁面中展現給用戶的目的，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="https://www.csdn.net/" target="ifcsdn">csdn</a>
<a href="http://www.baidu.com" target="_ifbaidu">baidu</a>
<br>
<iframe src="" width="48%" height="500px" name="ifcsdn"></iframe>
<iframe src="" width="48%" height="500px" name="_ifbaidu"></iframe>
</body>
</html>
框架標簽的學習
1.洗掉body標簽
frameset
引數
-
rows :按照行進行切分頁面
-
cols :按照列進行切分頁面
-
子標簽:
- frame :進行切磁區域的占位,一個frame可以單獨加載網頁資源，
- src :資源路徑(本地或者網路)
- name :區域名， 結合超鏈接使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>框架標簽學習</title>
</head>
<frameset cols=" 20% ,*,50%">
<frame src="frame/left.html" >
<frameset rows="70% ,*">
<frame src="frame/top.html" >
<frame src="frame/bottom.html" >
</frameset>
<frame src="frame/right.html" name="_right" >
</frameset>
</html>
form表單標簽的學習
作用:收集并提交用戶資料給指定服務器
屬性:
- action :收集的資料提交地址也就是URL
- method :收集的資料的提交方式
- get :適合小量資料 ,表單資料以?隔開拼接在URL后面,不同的鍵值對使用&符號隔開,不安全，
- post:適合大量資料,安全,隱式提交
注:
- 表單資料的提交,要提交的表單項必須擁有name屬性值,否則不會提交，
- 提交的表單項資料為鍵值對,鍵為name屬性的值,值為用戶書寫的資料
- form標簽會收集其標簽內部的資料
- form表單的資料提交需要依賴于submit提交按鈕.
from表單域標簽學習
作用:給用戶提供可以進行資料書寫或者選擇的標簽，
使用:
（1）文本框:
- text 收集少量的文本資料，用戶可見
- password收集用戶密碼資料
- name :資料提交的鍵，也會被js使用
- value:默認值
（2）單選框:
- radio
- ? name : name屬性值相同的單選框只能選擇一項資料
- ? value :要提交的資料
- ? checked:checked使用此屬性的單選默認是選擇狀態
（3）多選框
- checkbox
- name:一個多選組需要使用相同的name屬性值
- value:要提交的資料
- checked:checked 使用此屬性的多選框默認選擇狀態
（4）單選下拉框
- select
- name :資料提交的鍵名，必須宣告
- 子標簽option:一個option標簽表示一個下拉選項
- value :要提交的資料
（5）文本域
- textarea:宣告一個可以書寫大量文字的文本區域
- name :資料提交的鍵名, js和CSS也會使用
- rows :宣告文本域的行數
- cols :宣告文本域的列數
（6）普通按鈕
<input type="button" name="" id="" value="普通按鈕" />
（7）隱藏標簽
隱藏標簽<input type="hidden" name="hidden" id="" value="啦啦" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form表單標簽的學習</title>
</head>
<body>
<h3>form表單標簽的學習</h3>
<hr >
<form action="#" method="get">
Login：<input type="text" id="" name="user" value="" /><br>
Password：<input type="password" name="password" value="" /><br>
sex：男<input type="radio" name="sex" value="n" checked="checked" />女<input type="radio" name="sex" value="w"/><br>
愛好：吃飯<input type="checkbox" name="fav" value="1"/>
睡覺<input type="checkbox" name="fav" value="2"/>
打豆豆<input type="checkbox" name="fav" value="3"/> <br>
籍貫：<select name="address">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="廣州" selected="selected">廣州</option>
</select><br>
文本域：<br>
<textarea rows="10" cols="30" name="intro">
</textarea>
<br>
<input type="button" name="" id="" value="普通按鈕" />
<br>
<hr >
隱藏標簽<input type="hidden" name="hidden" id="" value="啦啦" />
<hr >
<input type="submit" id="" name="" value="登錄"/>
</form>
</body>
</html>
注冊頁面練習
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注冊頁面</title>
</head>
<body>
<h1>注冊頁面</h1>
<hr >
<form action="" method="get">
<table border="" cellpadding="10px" cellspacing="">
<tr>
<td width="100px">用戶名</td>
<td><input type="text" name="user" id="" value="" /></td>
</tr>
<tr>
<td>密碼</td>
<td><input type="password" name="paw" /></td>
</tr>
<tr>
<td>郵箱</td>
<td><input type="email" id="" value="" name="email" /></td>
</tr>
<tr>
<td>手機號碼</td>
<td><input type="tel" name="tel" id="" value="" /></td>
</tr>
<tr>
<td>性別</td>
<td>
man<input type="radio" name="sex" id="" value="1" />
woman<input type="radio" name="sex" id="" value="1" />
</td>
</tr>
<tr>
<td>愛好</td>
<td>
吃飯<input type="checkbox" name="fav" id="" value="1" />
睡覺<input type="checkbox" name="fav" id="" value="2" />
打豆豆<input type="checkbox" name="fav" id="" value="3" />
</td>
</tr>
<tr>
<td>籍貫</td>
<td>
<select name="adress">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="廣州" selected="selected">廣州</option>
</select>
</td>
</tr>
<tr>
<td>個人介紹</td>
<td>
<textarea rows="10px" cols="30px" name="intro">
</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="middle">
<input type="checkbox" name="agree" id="agree" value="1" />是否同意本公司協議
</td>
</tr>
<tr>
<td colspan="2" align="middle">
<input type="submit" value="注冊"/>
</td>
</tr>
</table>
</form>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/274749.html
標籤：其他
上一篇：課程總結（第五周）
下一篇：HTML5