表单
form> input|label|button|textarea|select
form表单属性
属性：action
值：url
含义：指定一个表单处理目标URL，表单数据将被提交到该URL地址的处理程序。如果该属性值为空，则提交到文档自身。该属性值可以为绝对地址、相对地址、文档片段，甚至是脚本代码
属性：method
值：get或post
含义： 将表单数据提交到http服务器的方法，可能值有两个：get和post
属性：enctype
值： application/x-www-form-urlencoded
含义： 指定表单数据的编码类型，此属性只有在method属性设置为post时才有效。默认值为application/x-www-form-urlencoded对所有字符进行编码。如果表单包含用于文件上传的控件（input type=“file”），那么这个属性值必须设为multipart/form-data ，不对字符进行编码
input标签
input属性大概介绍:
- type:按钮的属性
- id:标识
- name:与后端交互的key
- values:给后端的值,如果没有name则没法给到后端
案例介绍
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签</title>
</head>
<body>
<!--1、form的作用：完成前后台数据的交互的 - 将用户录入的信息提交给后台 | 文件上传 -->
<form action="">
<p>
<!--label作为input的文本解释标签，for绑定id-->
<!--value属性是表单标签的内容，就是提交给后台的-->
<!--name是提交给后台的key，value是值-->
<!--placeholder是文本占位符-->
<!--type是决定标签的类型本质(input|button)-->
<!--multiple,checked布尔类型属性，不需要写值，multiple多选 checked默认激活-->
<label for="username">账号：</label>
<input id="username" type="text" value="Owen" name="usr">
</p>
<p>
<label for="password">密码：</label>
<input id="password" type="password" placeholder="请输入密码" name="pwd">
</p>
<p>
<input type="hidden" value="123asd{asdf2q1})sdf12" name="pk">
</p>
<p>
<input type="file" name="file" multiple>
</p>
<p>
男<input type="radio" value="male" name="sex" checked>
女<input type="radio" value="female" name="sex">
</p>
<p>
男<input type="checkbox" value="male" name="hobby" checked>
女<input type="checkbox" value="female" name="hobby" checked>
哇塞<input type="checkbox" value="other" name="hobby">
</p>
<p>
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>
</p>
<p>
<textarea cols="30" rows="10"></textarea>
</p>
<p>
<input type="button" value="按钮" />
<input type="reset" value="重置" />
<input type="submit" value="登录" />
</p>
</form>
</body>
</html>
input标签type属性
| type属性 | 空间名称 | 对应代码 |
|---|---|---|
| text | 单行文本输入框 | <input type='text'> |
| password | 密码输入框 | <input type='password'> |
| checkbox | 复选框 | <input type='checkbox checked='checked> |
| radio | 单选框 | <input type="radio"> |
| submit | 提交按钮 | <input type='submit' value='提交'> |
| reset | 重置按钮 | <input type='reset' value='重置'> |
| button | 普通按钮 | <input type='button' value='普通按钮'> |
| hidden | 隐藏按钮 | <input type="hidden" value=“隐藏按钮”> |
| file | 文本选择框 | <input type="file"> |
select标签(下拉列表)
<form id="form1" name="form1" method="post" action="">
<select name="city" id="city">
<option value="北京">北京</option>
<option value="天津" selected="selected">天津</option>
<option value="河北">河北</option>
<option value="山东">山东</option>
<option value="内蒙">内蒙</option>
</select>
</form>
select属性
multiple : 布尔属性，设置后允许多选，否则只能选择一个
disabled : 禁用该下拉列表
selected : 首次显示时,为选中状态
value : 定义发往服务器的选项值
textarea标签
<form id="form1" name="form1" method="post" action="">
<textarea cols=“宽度” rows=“高度” name=“名称”>
默认内容
</textarea>
</form>
textarea属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| name | name | 控件名称 |
| rows | number | 设置多行文本框的显示行数（高度） |
| cols | number | 设置多行文本框的显示列数（宽度） |
| disabled | disabled | 布尔属性，设置当前文本框为禁用状态 |
label标签
<form id="form1" name="form1" method="post" action="">
<label for="username">用户名</label>
<input type="text" name="username" id="username" />
</form>
label属性
label元素不会向用户呈现任何特殊效果
<label> 标签的 for 属性应当与相关元素的 id 属性相同
结合CSS可以控制表单文本或控件对齐，美化表单
button标签
只是个简单的按钮
单标签
- br:换行
- hr:分割线
- 表单使用的标签
- img:图片标签
div标签
div标签自带换行,主要是用来网页大体的分区框架的划分
注意
- html中不区分大小写
- 如果你写的显示内容没有写在body内,浏览器解析后还是会默认把内容丢到body内
二、CSS
1. CSS介绍及语法
CSS（层叠样式表)可以控制HTML标签样式。
语法结构为 ：选择器 {属性1：属性值1；属性2：属性值2}
2. CSS注释
/*单行注释*/
/*
多行注释1
多行注释2
*/
通常我们在写css的时候 都会单独写一个css文件 里面只有css代码
/*通用样式*/
/*导航条样式*/
/*轮播图样式*/
3. CSS的三种引入方式
-
通过link标签引入外部的CSS文件，如
``
-
在HTML页面head内 通过style标签直接编辑，如
-
直接在行内，即标签内部 通过style属性直接编辑，如
我是红色的标签
三、CSS属性选择器
1. 基本选择器
1-1 元素选择器
/*元素 即标签,如p,span,h1..*/
p {color: "red";}
1-2 ID选择器
/*选择id时,要用 # 开头*/
#id1 {
background-color: red;
}
1-3 class选择器
/*选择class时,要用 . 开头 多个属性可用空格分隔*/
.c1 .c2 {
font-size: 14px;
}
/*p.c1 表示在p标签内的class值为c1的,颜色设置为红色*/
p.c1 {
color: red;
}
1-4 通用选择器
/*HTML内部的所有标签设置字体颜色*/
* {
color: white;
}
2. 组合选择器
2-1 后代选择器
/*li内部的a标签设置字体颜色*/
li a {
color: green;
}
2-2 子代选择器
/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {
color: green;
}
2-3 毗邻选择器
/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {
color: green;
}
2-4 兄弟选择器
/*i1后面所有的兄弟p标签*/
#i1~p {
color: green;
}
2-5 属性选择器
/*HTML标签可自定义属性*/
/*用于选取带有指定属性的元素。*/
p[title] {
color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
color: green;
}
3. 伪类选择器
/* 未访问的链接 */
a:link {
color: #FF0000
}
/* 鼠标移动到链接上 */
a:hover {
color: #FF00FF
}
/* 选定的链接 */
a:active {
color: #0000FF
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/*input输入框获取焦点时样式*/
input:focus {
outline: none;
background-color: #eee;
}
4. 伪元素选择器
/*控制<p>元素内容 第一个字*/
p:first-letter {
font-size: 48px;
color: red;
}
/*在每个<p>元素之前插入内容*/
p:before {
content:"*";
color:red;
}
/*在每个<p>元素之后插入内容*/
p:after {
content:"[?]";
color:blue;
}
四、选择器优先级
- 选择器相同的情况下，引入方式不同：
遵循就近原则 谁离标签更近 就听谁的 - 选择器不同的情况下 ：
行内选择器 > id选择器(其次) > 类选择器(使用最频繁) > 元素选择器