文章目录
一、img标签二、a标签（带href）三、form表单本篇主要分析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=“”
target: _blank :在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.
2、示例：
<a href="">Baidu</a><a href="" 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="">Baidu</a><a href="" 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:表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如/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="/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>
