HTML结构
**!DOCTYPE html(文件的类型是HTML)
< html>是文档的开头和结束)
< head>头部的开头和结束)
< body>正文的开头和结束)
< title>页面的标题)
< meta> 元metadatda 元数据)
< br> 表示换行)
< hn> n = 1-6 标题 默认加粗 变大从大到小)
< p> 表示段落 )
< a> 表示链接)
< hr> 标尺线)
< Align=”center” 居中 默认为left 另外还有一个right
< div >标签的主要作用就是用来划分区域 ,可以类似于一个盒子,它是body标签中的属性,用body里面
bgcolor: 背景颜色,颜色的表示的方式
(1)使用颜色英文单词 red green blue yellow pink gold 等等
(2)可以使用十六进制来表示颜色 #rrggbb r —red g green b blue
(3)rgb(x,x,x) x的取值范围0-255
Background 背景图片
素材就非常的重要 不建议使用图片做背景。
文本颜色 text
未访问过的链接颜色 link
已访问过的链接颜色 vlink
基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
在这里插入代码片
<!DOCTYPE html>
<html lang="en"><!--<form>表单标签 作用:用于收集用户的信息-->
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<div align="center">
<body bgcolor="#ccc">
<h1>叫你别看</h1>
<hr>
<form action="first.html"method="get"><!--action:表单的提交位置 method:提交方式
默认属性为post
get与post的区别
get请求会把用户的信息暴露在地址栏上,导致信息泄露不安全
post请求不会把用户的信息暴露在地址栏上,相比之下更安全-->
<p>用户名:<input type="text"name="username" value="" /></p><!--<intput>:输入 text:文本框--> <!--text和password value的属性相当于文本框的值-->
<p>密 码:<input type="password" name="pwd" /></p><!--password:密码框-->
<p>
<p>
请选择您的性别:
<input type="radio" name="sex" value="男" /> 男<!--type="radio"表示单选框-->
<input type="radio" name="sex" value="女" />女
</p>
<p>
请选择您的爱好:
<input type="checkbox" name="hobby" value="睡觉">睡觉
<input type="checkbox" name="hobby" value="音乐">音乐
<input type="checkbox" name="hobby" value="跑步">跑步
<input type="checkbox" name="hobby" value="景色">景色
</p>
<p>请上传您的文件:<input type="file"/></p>
<p>请选择您的城市:
<select name="city"><!--select选择框 disabled="disabled" disabled:禁用下拉列表 multiple="multiple":多选-->
<option>--选择城市--</option><!--option:选项-->
<option value="北京">--北京--</option> <!--value送往服务器的选项值-->
<option value="重庆">--重庆--</option>
<option value="天津">--天津--</option>
<option value="上海">--上海--</option>
</select>
</p>
<p>
<textarea rows="5" cols="30">
这家伙很懒,什么都没有留下。
</textarea><!--rows:文本域可见宽度 cols:文本域可见行数-->
</p>
<p><input type="submit" value="提交"/><!-- :表示空格 sumbit:提交按钮--><!--submit和reset以及button value的属性相当于按钮的名称-->
<input type="reset" value="重置"/><!--reset:重置-->
<input type="button" value="点我"/>
</p>
</form>
</div>
</body>
</html>