WEB学习Day02——html常用标签

最新推荐文章于 2024-04-27 19:14:57 发布

pyrans

最新推荐文章于 2024-04-27 19:14:57 发布

阅读量170

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/pyrans/article/details/82985251

版权

Web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

02.01_HTML的常用标签

1.表单标签

作用：可以提交不同的数据到服务器

标签：

<form></form>:表示表单的范围【父标签】

主要作用：用于采集用户信息

子标签的分类：

表单标签：包含数据提交服务器地址、提交方式【get和post】

表单域：用于采集用户信息【姓名，密码，邮箱，上传文件。。。。。】

表单按钮：提交按钮，复原按钮

属性：

action：提交到服务器的地址【#】

method：提交采用的方式

enctype：很少用，做文件上传的时候需要设置这个属性

<input />:表示输入项，可以输入内容【子标签】

type:输入内容的类型

普通输入项：type=“text”

密码输入项：type=“password”

单项输入项：type=“radio”

多项输入项：type=“checkbox”

文件输入项：type=“file”

邮箱输入项：type=“email”

name:用于提交

value:标记【值】

checked:checked= “checked“表示默认选中

重置按钮：type=“reset”

提交按钮：type=“submit”

普通按钮：type=“button”

<select></select>:下拉输入项【年份，城市的选择】【子标签】

     <option></option>:select标签的子标签，表示可以选择的选项

     name:名称

     value:值

     selected=“selected”

<textarea></textarea> ：文本域【子标签】

cols:列

rows:行

表单提交案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
        	form标签
        	input标签:
        		type:
        			text
        			password
        			radio
        			checkbox
        			file
        			email
        			reset
        			
        		name:
        		value:
        		checked:checked="checked"
        		
        -->
        <form>
        	手机号码：<input type="text" name="phone" placeholder="请输入手机号码"/><br />
        	创建密码：<input type="password" name="pwd" placeholder="请输入密码"/><br />
        	重复密码：<input type="password" name="repwd" placeholder="请再次输入密码"/><br />
        	用户姓名：<input type="text" name="username" placeholder="请输入您的姓名"/><br />
        	性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：<input type="radio" name="sex" value="man"/>男
        					 &nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="sex" value="woman"/>女<br />
        	爱&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好：<input type="checkbox" name="hobby" value="basketball"/>篮球
        	<input type="checkbox" name="hobby" value="football"/>足球<input type="checkbox" name="hobby" value="yumaoball"/>羽毛球
        	<br />
        	上传头像：<input type="file" />
        	<br />
        	出生年月：<select name="birth">
        				<option>1988</option>
        				<option>1989</option>
        				<option>1990</option>
        				<option>1991</option>
        				<option>1992</option>
        				<option>1993</option>
        				<option>1994</option>
        	</select>
        	<br />
        	邮箱地址：<input type="email" placeholder="请输入注册邮箱"/>
        	<br />
        	<input type="hidden" name="err" value="wrong"/>
        	<br />
        	在线时间：<input type="date" name="time" />
        	<br />
        	自我描述：<textarea rows="5" cols="20" placeholder="请输入自我描述信息"></textarea>
        	<br />
        	<input type="color" name="color" />
        	<br />
        	<input type="range" name="range" max="100" min="0" value="10"/>
        	<br />
        	<input type="submit" value="注册"/>
        	<input type="reset" value="重置"/>
        </form>
	</body>
</html>

问题：提交的内容提交到哪去了？

使用method指定的方式，提交到action表示的服务器

【经典面试题】get和post的区别

a.get请求地址栏中会携带页面中所有的信息，post中不会【http请求】

b.get请求安全性低，post相对较高

c.get请求效率高，post相对较低

d.get请求对数据的大小限制，而post没有任何限制

无意标签
针对 HTML5 中的那些有明确表示文档结构含义的标签

2.头标签

head和body

<title></title>:指定浏览器标题栏显示的内容

<base></base>:设置超链接的基本位置，可以统一设置超链接的打开方式

<meta></meta>:设置和页面相关的一些信息

name：关键字

content:内容

charset:编码格式

<link></link>:一般用于引入外部文件【css中】

无意标签案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" name="keywords" content="千锋，it">
		<meta http-equiv="refresh" content="3;url=http://www.baidu.com"></meta>
		<base target="_blank" />
		<title>无意标签</title>
	</head>
	<body>
		无意标签
		<a href="formDemo02.html">注册账户</a>
	</body>
</html>

3.框架标签

<frameset></frameset>：划分规则【父标签】

rows:按照行进行划分

cols:：按照列进行划分

<frame />:显示具体的页面【子标签】

frame框架使用案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	
	<!--<frameset cols="20%,50%,30%">
		<frame src="formDemo01.html" />
		<frame src="index.html" />
		<frame src="markupDemo.html"/>
	</frameset>
	
	<frameset rows="20%,50%,30%">
		<frame src="formDemo01.html" />
		<frame src="index.html" />
		<frame src="markupDemo.html"/>
	</frameset>-->
	
	<frameset rows="20%,80%">
		<frame src="formDemo01.html"/>
		
		<frameset cols="50%,50%">
			<frame src="index.html"/>
			<frame src="markupDemo.html" />
		</frameset>
	</frameset>
</html>