第二课 HTML的常用标签学习记录

1>描述HTML与HTTP是什么,他们之间有什么联系?

---

    HTML（超文本标记语言——HyperText Markup Language），是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

    http（HyperText Transfer Protocol，超文本传输协议）是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。

    HTML 是通过 HTTP协议与服务器通信的

---

2>制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素

---

实例

<ul>
    <li><a href="">首页</a></li>
    <li><a href="">会员</a></li>
    <li><a href="">商品</a></li>
    <li><a href=""><img src="https://www.php.cn/static/images/index_php_item3.jpg?1" alt="PHP中文网" width="150"></a></li>
</ul>

---

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

---

实例

<table border="1" cellspacing="0" cellpadding="0" width="100%">
   <caption><h2>商品信息表</h2></caption>
     <thead>
        <tr>
		<th>编号</th>
		<th>商品名称</th>
		<th>单价</th>
		<th>数量</th>
		<th>金额</th>
		<th >备注（合并）</th>
		</tr>
	</thead>
	<tbody>
	    <tr>
		<td>1</td>
		<td>小米手机</td>
		<td>1000</td>
		<td>1</td>
		<td>1000</td>
		<td rowspan="4">备注（合并）</td>
		</tr>
		<tr>
		<td>2</td>
		<td>华为手机</td>
		<td>2000</td>
		<td>1</td>
		<td>2000</td>
		</tr>
		<tr>
		<td>3</td>
		<td>鼠标</td>
		<td>50</td>
		<td>1</td>
		<td>50</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
		<td colspan="3" align="center" >合计：</td>
					
		<td>3</td>
		<td>3050</td>
		<td></td>
		</tr>
	</tfoot>
</table>

---

4>制作一个网站后面, 要求使用<iframe>内联框架实现

实例

<ul style="float: left;">
			<li><a href="https://www.baidu.com/" target="kj">百度</a></li>
			<li><a href="https://www.163.com" target="kj">网易</a></li>
			<li><a href="https://www.qq.com/" target="kj">腾讯</a></li>
		</ul>
		<iframe srcdoc="<h1>欢迎光临</h1>" frameborder="1" width="500" height="500" name="kj"></iframe>

5>制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件

---

实例

<h2>用户注册</h2>
		<form action="" method="">
			<p>
				<label for="username">用户：</label>
				<input type="text" name="username" placeholder="请输入用户名" id="username" value="" />
			</p>
			<p>
				<label for="password">密码：</label>
				<input type="password" name="password" id="password" value="" placeholder="请输入密码" />
			</p>
			<p>
				<label for="email">邮箱：</label>
				<input type="email" name="email" id="email" value=""  placeholder="email@email.com" />
			</p>
			<p>
				<label for="">性别：</label>
				<input type="radio" name="xb" id="man" value="" checked/><label for="man">男</label>
				<input type="radio" name="xb" id="madam" value=""/><label for="madam">女</label>
			</p>
			<p>
				<label for="">爱好：</label>
				<input type="checkbox" name="ah[]" id="basketball" value="" checked/><label for="basketball">篮球</label>
				<input type="checkbox" name="ah[]" id="football" value=""/><label for="football">足球</label>
			</p>
			<p>
				<label for="">所在城市</label>
				<select name="city" id="">
					<option value="">北京</option>
					<option value="">上海</option>
					<option value="">广州</option>
					<option value="">深圳</option>
				</select>
			</p>
			<p>
				<label for="">上传头像</label>
				<input type="file" name="touxiang" id=""  />
			</p>
			<p>
				<button type="">注册</button>
			</p>
		</form>

6>总结: 为什么推荐使用语义化的标签?

---

使用语义化的标签有助于SEO的优化