亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 34
粉絲 0
評論 0
訪問量 28322
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
Html5常用標(biāo)簽及屬性學(xué)習(xí)-九期線上班
只貓
原創(chuàng)
777人瀏覽過


一、描述HTML與HTTP是什么，他們之間有什么聯(lián)系？

    HTML：超文本標(biāo)記語言（Hyper Text Markup Lanuage）

    HTML是一種通用的編寫超文本的標(biāo)記語言，html文檔可以在瀏覽器中直接被解析和渲染。

    HTTP：超文本傳輸協(xié)議（Hyper Text Transfer Protocol）

    一個超大的協(xié)議族，將用戶請求發(fā)送到服務(wù)端并且將服務(wù)端的請求和響應(yīng)返回。

    二者聯(lián)系：web網(wǎng)頁上的信息通?？梢酝ㄟ^html文檔的格式通過HTTP協(xié)議進(jìn)行傳輸。

二、制作一個導(dǎo)航，要求使用到列表、鏈接、圖片、并使用圖片做為鏈接元素

實(shí)例

<!DOCTYPE html>
<html lang="ch-ZN">
<head>
	<meta charset="utf-8">
	<title>導(dǎo)航</title>
</head>
<body>
	<ul>
		<a href="#"><li>首頁</li></a>
		<a href="#" target="_blank"><li>訂單</li></a>
		<a href="#" target="_top"><li>好友</li></a>
		<a href="#" target="parent"><li>個人信息</li></a>
	</ul>
	<a href="http://ipnx.cn/">
	<img src="http://ipnx.cn/static/images/logos.png" alt="php.cn">
	</a>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

運(yùn)行效果：

QQ圖片20191030165748.png

三、制作一張商品信息表，要求用到標(biāo)題，頭部與底部，行與列方向的合并

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>商品信息表</title>
</head>
<body>
	<table border="1" cellspacing="0" cellpadding="6">
		<caption>商品信息表</caption>
		<thead>
			<tr>
				<th>編號</th>
				<th>名稱</th>
				<th>數(shù)量</th>
				<th>單價</th>
				<th>總價</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>牛奶</td>
				<td>5</td>
				<td>2.00</td>
				<td>10.00</td>
			</tr>
			<tr>
				<td>2</td>
				<td>面包</td>
				<td>5</td>
				<td>3.00</td>
				<td>15.00</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3" align="center">合計</td>
				<td>10</td>
				<td>25.00</td>
			</tr>
		</tfoot>
	</table>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

運(yùn)行結(jié)果：

QQ圖片20191030172055.png

四、制作一張完整的用戶注冊表單，要求盡可能多的用到學(xué)到的表單控件

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注冊</title>
</head>
<body>
	<h3>注冊</h3>
	<form action="login.php" method="post">
		<p>
			<label for="username">賬號：</label>
			<input type="text" id="username" name="username" placeholder="英文字母下劃線">
		</p>
		<p>
			<label for="password">密碼：</label>
			<input type="password" id="password" name="password" placeholder="不少于6位">
		</p>
		<p>
			<label for="email">郵箱：</label>
			<input type="email" id="email" name="email" placeholder="xxxxx@qq.com">
		</p>
		<p>
			<label for="date">預(yù)約日期：</label>
			<input type="date" id="date" name="date">
		</p>
		<p>
			<label for="number">人數(shù)：</label>
			<input type="number" name="number" id="number" min="1" max="4">
		</p>
		<p>
			<label for="">發(fā)型師：</label>
			<select name="person" id="">
				<optgroup label="總監(jiān)">
					<option value="" selected>Tony老師</option>
					<option value="">Nick老師</option>
				</optgroup>
				<optgroup label="設(shè)計師">
					<option value="">Alen老師</option>
					<option value="">阿飛</option>
				</optgroup>
			</select>
		</p>
		<p>
			<label for="morning">預(yù)約時間段：</label>
			<input type="radio" name="time" id="morning"><label for="morning">上午</label>
			<input type="radio" name="time" id="afternoon" checked><label for="afternoon">下午</label>
			<input type="radio" name="time" id="nignt"><label for="nignt">晚上</label>
		</p>
		<p>
			<label for="wash">服務(wù)項(xiàng)目：</label>
			<input type="checkbox" name="service[]" value="wash" id="wash"><label for="wash">洗</label>
			<input type="checkbox" name="service[]" value="cut" id="cut" checked><label for="cut">剪</label>
			<input type="checkbox" name="service[]" value="blow" id="blow"><label for="blow">吹</label>
		</p>
		<p>
		<label for="photo">頭像上傳：</label>
		<input type="file" name="photo" id="photo">
		</p>
		<p>
		<button>提交</button>
		</p>		
	</form>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

運(yùn)行效果：

QQ圖片20191030181225.png

五、制作一個網(wǎng)站后臺，要求使用`<iframe>`內(nèi)聯(lián)框架實(shí)現(xiàn)

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>管理后臺</title>
</head>
<body>
<ul style="float: left; margin-right: 15px">
	<li><a href="homework2.html" target="content">商品列表</a></li>
	<li><a href="homework3.html" target="content">添加用戶</a></li>
	<li><a href="homework1.html" target="content">系統(tǒng)設(shè)置</a></li>
</ul>
<iframe srcdoc="<h2>歡迎使用后臺管理</h2>" frameborder="1" name="content" width="500" height="450">
</iframe>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

運(yùn)行結(jié)果：

QQ圖片20191030183834.png

六、總結(jié): 為什么推薦使用語義化的標(biāo)簽？

  1. 使用語義化標(biāo)簽可以讓html文檔看起來更加清晰有層次。

  2. 語義化標(biāo)簽符合W3C的標(biāo)準(zhǔn)，使用語義化標(biāo)簽有利于SEO。

  3. 瀏覽器可以通過語義化標(biāo)簽知道網(wǎng)頁的內(nèi)容更利于瀏覽器處理。


手抄代碼圖片：

QQ圖片1.png

QQ圖片2.png

QQ圖片3.png

1.png

2.png

3.png

4.png

總結(jié)：html是做web開發(fā)比不可少的技能之一，熟練掌握課上所學(xué)的標(biāo)簽和屬性，要能更加靈活的運(yùn)用。之前不知道label標(biāo)簽可以這么靈活的運(yùn)用，通過這節(jié)課也了解到語義化標(biāo)簽的重要性。

批改狀態(tài)：合格

老師批語：代碼寫得很規(guī)范 望堅持下去
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)