博客列表 >html标签(10.29)

html标签(10.29)

程煜
程煜原创
2019年10月30日 13:20:38604浏览
1.描述HTML与HTTP是什么,他们之间有什么联系?
    HTML:是一种通用的编写超文本的标记语言(简称超文本标记语言),他使用一系列的标签使网络上的文档格式统一,
          使分散的Internet资源成为一个整体。
    HTTP:超文本传输协议,是一套客户端和服务端都必须遵守的请求和响应的标准和规范。
    联系:客户端发送HTTP请求给服务器端,服务器端响应HTTP请求将存储在服务期端的大量的HTML文档或图像视频等资源供服务器端访问
2.制作一个导航,要求使用到列表,链接,图片并使用图片作为链接元素
实例
img标签的alt属性是对这张图片进行的一些描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<main>
			<h2>制作一个导航,要求使用到列表,链接,图片并使用图片作为链接元素</h2>
			<article>
				<ul>
					<li><a href="https://www.w3school.com.cn">W3School</a></li>
					<li>
						<a href="https://www.imooc.com">
							<img src="../../img/1.jpg" width="300px" alt="慕课网"/>
						</a>
					</li>
				</ul>
			</article>
		</main>
		<hr />
	</body>
</html>

运行实例 »点击 "运行实例" 按钮查看在线实例

3.制作一张商品信息表,要求用到标题,头部与底部,行与列方向的合并

实例
rowspan:行合并  colspan:列合并
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>制作一张商品信息表,要求用到标题,头部与底部,行与列方向的合并</h2>
		<article>
			<table border="1" cellspacing="0" cellpadding="8px">
				<caption>商品信息表</caption>
				<thead>
					<tr>
						<th>商家</th>
						<th>商品名称</th>
						<th>商品单价</th>
						<th>商品数量</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td rowspan="2">华为</td>
						<td>荣耀手环5</td>
						<td>198</td>
						<td>10</td>
					</tr>
					<tr>
						<td>荣耀20</td>
						<td>2699</td>
						<td>10</td>
					</tr>
					<tr>
						<td rowspan="2">小米</td>
						<td>小米手环四</td>
						<td>169</td>
						<td>10</td>
					</tr>
					<tr>
						<td>小米8</td>
						<td>1699</td>
						<td>10</td>
					</tr>

				</tbody>
				<tfoot>
					<tr>
						<td colspan="4" align="center">余货不多想买速购</td>
					</tr>
				</tfoot>
			</table>
		</article>
		<hr />
	</body>
</html>

运行实例 »点击 "运行实例" 按钮查看在线实例

4.制作一张完整的用户注册表

实例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<h2>制作一张完整的用户注册表</h2>
			<article>
				<form action="register.php" method="post">
				<!--label标签中for的属性值需要与input标签的name属性值一致-->
					<label for="username">姓名:</label>
					<input type="text" name="username" id="username" placeholder="请输入姓名" /><br />
					<label for="password">密码:</label>
					<input type="password" name="password" id="password" placeholder="请输入不得少于6位密码" /><br />
					<label for="mail">邮箱:</label>
					<input type="email" name="mail" id="mail" placeholder="123456@qq.com" /><br />
					<label for="address">住址:</label>
					<select name="address">
						<optgroup label="江苏">
							<option value="南通">南通</option>
							<option value="无锡">无锡</option>
							<option value="南京" selected="">南京</option>
						</optgroup>
						<optgroup label="江西">
							<option value="南昌">南昌</option>
							<option value="景德镇">景德镇</option>
						</optgroup>
					</select><br />
					<label for="man">性别:</label>
					<input type="radio" name="sex" id="man" checked="" /><label for="man">男</label>
					<input type="radio" name="sex" id="woman" /><label for="woman">女</label><br />
					<label for="">爱好:</label>
					<input type="checkbox" name="hoppy" id="book" checked="" /><label for="book">看书</label>
					<input type="checkbox" name="hoppy" id="basketball" /><label for="basketball">篮球</label>
					<input type="checkbox" name="hoppy" id="code" /><label for="code">敲代码</label>
					<input type="checkbox" name="hoppy" id="game" /><label for="game">打游戏</label><br />
					<button>提交</button>
				</form>
			</article>
	</body>
</html>

运行实例 »点击 "运行实例" 按钮查看在线实例

5.制作一个网站后台面,要求使用iframe内联框架实现

实例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>十月29号作业</title>
	</head>
	<body>
		<h2>制作一个网站后台面,要求使用iframe内联框架实现</h2>
		<article>
			<!-- target属性的值要与iframe标签中name属性值一致 -->
			<ul style="float: left;">
				<li><a href="1.html" name="navigation" target="content">导航</a></li>
				<li><a href="2.html" name="table" target="content">表格</a></li>
				<li><a href="3.html" name="form" target="content">表单</a></li>
			</ul>
			<iframe frameborder="1" height="380px" width="480" name="content" srcdoc="<p>Hello world!</p>"></iframe>
		</article>
		<hr />
	</body>
</html>
运行实例 »点击 "运行实例" 按钮查看在线实例

6.为什么推荐使用语义化的标签?

    (1).有利于搜索引擎爬虫更好的理解我们的网页,从而获取更多的有效信息,提升网页的权重。

    (2).使开发者更好的理解网页开发的内容。

    (3).标签语义化有助于构架良好的HTML结构,有利于搜索引擎的建立索引、抓取。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议