一、HTML 表单
在我们日常上网是,经常会遇到登录是要填写账号密码等个人信息时,这就用到了HTML表单。
HTML表单包含了输入框、复选框、单选按钮、提交按钮等等不同的表单控件,用户通过表单中的元素,来完成表单,最后提交之后端程序,进行相应处理。
其中有两个属性 action 和 method 。
- action 属性用来指明将表单提交到哪个页面;
- method 属性表示使用哪个方式提交数据,包括 GET 和 POST 两种方式,它们两者的区别如下:
- GET:用户点击提交按钮后,提交的信息会被显示在页面的地址栏中。
- POST:如果表单包含密码这种敏感信息,建议使用 POST 方式进行提交,这样数据会传送到后台,不显示在地址栏中,相对安全。
控件/标签 | 描述 |
---|---|
<input> | 定义输入框 |
<textarea> | 定义文本域(一个可以输入多行文本的控件) |
<label> | 为表单中的各个控件定义标题 |
<fieldset> | 定义一组相关的表单元素,并使用边框包裹起来 |
<legend> | 定义 <fieldset> 元素的标题 |
<select> | 定义下拉列表 |
<optgroup> | 定义选项组 |
<option> | 定义下拉列表中的选项 |
<button> | 定义一个可以点击的按钮 |
<datalist> | 指定一个预先定义的输入控件选项列表 |
<keygen> | 定义表单的密钥对生成器字段 |
<output> | 定义一个计算结果 |
根据以上标签简单写一个HTML表单:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我眼里只有学习</title>
</head>
<body>
<h1>注册账号</h1>
<form action="css/../" method="POST">
<label>邮  箱: </label><input name="password" type="password"> <br />
<label>用户名 : </label><input name="username" type="text"><br />
<label>密  码: </label><input name="password" type="password"><br />
<label>确认密码: </label><input name="password" type="password"><br />
<label>性 别:</label>
<select name="sex">
<option value="1">男</option>
<option value="2">女</option>
</select>
<br>
<label>爱 好:</label>
<input type="checkbox" name="hobby" value="1">听音乐
<input type="checkbox" name="hobby" value="2">看动漫
<input type="checkbox" name="hobby" value="3">看书
<br>
<label>您的年龄在:</label>
<input type="radio" name="education" value="1">18-25岁
<input type="radio" name="education" value="2">26-35岁
<input type="radio" name="education" value="3">36-45岁
<input type="radio" name="education" value="4">46-55岁
<input type="radio" name="education" value="5">55岁以上
<br>
<input type="submit" value="提 交">  
<input type="reset" value="重 置">
</form>
</body>
</html>
运行结果如下:
二、 HTML嵌入CSS样式
有四种方法,分别为行内样式(内联样式)、内嵌样式、链接式、导入样式。
行内样式(内联样式)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>我眼里只有学习</title>
</head>
<body>
<p style="background-color: #779993">学习</p>
<h2 style="background-color: #FF6633">学习</h2>
<p style="background-color: #779993">学习</p>
<strong style="font-size:30px;">学习</strong>
<div style="background-color:#6e7fcc; color:#779993; height:30px; line-height:30px;">学习</div>
<em style="font-size:2em;">学习</em>
</body>
</html>
运行结果如下:
内嵌样式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内嵌式</title>
<style type="text/css">
p{
text-align: left; /*文本左对齐*/
font-size: 18px; /*字体大小 18 像素*/
line-height: 25px; /*行高 25 像素*/
text-indent: 2em; /*首行缩进2个文字大小空间*/
width: 500px; /*段落宽度 500 像素*/
margin: 0 auto; /*浏览器下居中*/
margin-bottom: 20px; /*段落下边距 20 像素*/
}
</style>
</head>
<body>
<p>
CSDN是<b>全球知名中文<font color="red">IT<sup>①</sup></font>技术交流平台</b>,创建于1999年,包含<i>原创博客</i>、
<i>精品问答</i>、<i>职业培训</i>、<i>技术论坛</i>、<i>资源下载</i>等产品服务,
<i>提供原创</i>、<i>优质</i>、<i>完整内容</i>的专业IT技术开发社区。
请<a href="https://www.csdn.net/">点击这里</a>进入官网,与众多博主共同学习。</p>
</body>
</html>
运行结果如下:
链接式
把HTML文件和CSS文件分开存放。减少HTML文件的冗余。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="diyi.css" type="text/css" rel="stylesheet" />
<link href="dier.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p>学习</p>
<h3>xuexi</h3>
</body>
</html>
diyi.css 文件代码:
h3{
font-weight: normal; /*取消标题默认加粗效果*/
background-color: #66CC99; /* 设置背景色 */
height: 50px; /*设置标签的高度*/
line-height:50px; /* 设置标签的行高 */
}
span{
color: #FFOOOO; /* 字体颜色 */
font-weight:bold; /* 字体加粗 */
}
dier.css 文件代码:
p{
color: #FF3333; /*字体颜色设置*/
font-weight: bold; /* 字体加粗 */
border-bottom: 3px dashed #009933; /* 设置下边框线 */
line-height: 30px; /* 设置行高 */
}