Html前端基础（form表单、img标签、a href标签、id的作用）

文章目录

一、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=“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>