赞
踩
1、标签嵌套的规则:
不能在内联标签内嵌套块标签
2、img下的属性:
img标签:
src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮时的提示信息.
width: 图片的宽
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
3、示例:
<img id="abcd" src="test.png" alt="截图" title="回旋梯" width="200px" height="200px">
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>
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>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。