文章目录
本篇主要分析Html前端开发中的img图片标签、a href超链接标签、form表单标签，其中form是重点
一、img标签
1、标签嵌套的规则：
不能在内联标签内嵌套块标签
2、img下的属性：
img标签：
src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮时的提示信息.
width: 图片的宽
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
3、示例：
<img id="abcd" src="test.png" alt="截图" title="回旋梯" width="200px" height="200px">
二、a标签（带href）
1、href: 要连接的资源路径 格式如下: href=“http://www.baidu.com”
target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.
2、示例：
<a href="https://www.baidu.com">Baidu</a>
<a href="https://www.baidu.com" target="_blank"> <img src="baidu.png"> </a>
3、name: 定义一个页面的书签.
4、三种列表：
-
<ul> 无序列表
<li> 列表中的每一项 -
<ol> 有序列表
<li>:列表中的每一项. -
<dl> 定义列表
<dt> 列表标题
<dd> 列表项
5、id的作用： 每个id是一个页面中唯一的存在，不能重名
<div id="abc">顶部</div>
<a href="#abc"></a>
这样就是一个回到顶部的一个标签，使用id定位时必须带#号
6、img和a标签练习代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Zahuw</title>
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
</head>
<body>
<div id="abc">Top</div>
<div style="color: green; background-color:aquamarine; height:100px; width:50%; font-size: 40px">I have color!</div>
<img id="abcd" src="test.png" alt="截图" title="回旋梯" width="200px" height="200px">
<a href="https://www.baidu.com">Baidu</a>
<a href="https://www.baidu.com" target="_blank"> <img src="baidu.png"> </a>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
<dl>
<dt>chapter one</dt>
<dd>section one</dd>
<dd>section two</dd>
<dd>section three</dd>
</dl>
<a href="#abc">Back Top</a>
</body>
</html>
三、form表单
1、表单标签<form>
表单用于向服务器传输数据。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label 元素。
2、表单元素
（1）基本元素
-
text 文本输入框
-
password 密码输入框
-
checkbox 多选框，供用户勾选的
-
radio 单选框，只能选一个
（2）单选框设置为只能单选的原理：
Username:<input type="text" name="user">：将多选框中输入的内容组成一个键值对，键为user
Sex: <input type="radio" name="gender" value="male">male <input type="radio" name="gender" value="female">female
有两个键值对，键名都为gender,值有两个，但是只能选择一个一个值，键值对实际上只有一个，一个键对应一个值
（3）示例：
<p>Username:<input type="text"> </p>
<p>Password:<input type="password" name="pwd"> </p>
<p> Hobby: <input type="checkbox" name="hobby" value="game">game <input type="checkbox"
name="hobby" value="music">music </p>
<p> Sex: <input type="radio" name="gender" value="male">male <input type="radio" name="gender"
value="female">female </p>
（4）提交、按钮、上传文件、重置
submit 提交类型，是与服务端交互的类型
<input type="submit" value="register">：将提交按钮文本改成register
-
button 按钮
-
<form action=""></form>表单：action后跟需要提交的服务端路径
以上内容都放进form表单中才能够提交给服务端，让服务端获取用户提交的数据 -
reset 重置表单，将输入的内容都清空
-
placeholder 输入框内的属性，显示在输入框背景的文字
-
file 上传文件
3、表单属性
（1）概念： HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.
（2）action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.baidu.com/web
（3）method: 表单的提交方式 post/get 默认取值 就是 get（信封）
-
get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.
-
post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制
-
get/post是常见的两种请求方式.
4、练习代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Zahuw</title>
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
<link rel="icon" href="http://www.jd.com/favicon.ico">
</head>
<body>
<h1>Register</h1>
<form action="http://192.168.43.247:8080/index method="post" enctype="multipart/form-data">
<p>Username:<input type="text" placeholder="user"> </p>
<p>Password:<input type="password" name="pwd" placeholder="pwd"> </p>
<p> Hobby: <input type="checkbox" name="hobby" value="game">game <input type="checkbox"
name="hobby" value="music">music </p>
<p> Sex: <input type="radio" name="gender" value="male">male <input type="radio" name="gender"
value="female">female </p>
<p> <input type="submit" > </p>
<p> <input type="button" value="Register"> </p>
<p> <input type="reset" value="Reset"> </p>
<p> <input type="file" name="put_file"> </p>
</form>
</body>
</html>
