目录
一、form表单
form表单一般用于收集用户输入信息。
<form action="" method=""></from> 表单内有两个参数
action：控制数据提交的地址。1. 不写，就默认是朝当前这个页面所在的地址提交数据。2.写全路径，比如https://www.baidu.com。3.只写路径后缀，如/index/
method：控制数据提交的方式。1.get，form表单默认的是get请求，表单数据会在URL上显示。2.post， 表单数据附加到 HTTP 请求的 body 内（数据不显示在 URL 中）
form和label
通常情况下，input需要结合label一起使用，如<label for="d1">用户名:<input type="text" id="d1"></label> 绑定id值 之后点击label标签内任何的位置都可以自动选中input框，即点击 ’ 用户名 ‘ 也可将光标聚焦到输入框内
form提交
能够触发form表单提交数据的动作有两个标签：
- input标签
<input type="submit" value="提交" /> - button标签
<button></button>
1. input标签
标签会根据行内 type 属性，变化为不同的形态
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入,会变成密文 | |
| date | 日期输入框 | |
| checkbox | 复选框,checked表示默认选中 | |
| radio | 单选框 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| button | 普通按钮 | |
| hidden | 将输入框隐藏 | |
| file | ke选择文件上传 |
1.1 input属性补充说明
- 表单在提交时，需要写上name，后台才能以k:v 键值对形式 接收到准确的数据信息。
- value：为input框，添加默认值
- checked：可在radio、checkbox中添加，表示网页开启时默认选中的，用户可修改
- readonly：控制text、password只读
- disabled：所有input框都可用，控制input框无法修改
2.select标签
<!-- select 下拉框语法-->
<form action="" method="">
<select name="city" id="city">
<option value="1">北京</option>
<option selected="selected" value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</form>
2.2 select属性说明
- select中option标签就是一个个的选项
- 默认是单选，可以给select标签
multiple参数，可以变成多选 selected="selected"表示网页开启时，该下拉框默认选择该选项
3.textarea标签
<!-- textarea 多行文本框语法-->
<textarea name="" id="" cols="30" rows="10"></textarea>
3.3 textarea属性说明
- name：名称
- cols：列数
- rows：行数
- disabled：禁用
二、CSS
1. CSS介绍及语法
CSS（层叠样式表)可以控制HTML标签样式。
语法结构为 ：选择器 {属性1：属性值1；属性2：属性值2}
2. CSS注释
/*单行注释*/
/*
多行注释1
多行注释2
*/
通常我们在写css的时候 都会单独写一个css文件 里面只有css代码
/*通用样式*/
/*导航条样式*/
/*轮播图样式*/
3. CSS的三种引入方式
-
通过link标签引入外部的CSS文件，如
<link rel="stylesheet" href="css样式.css"> -
在HTML页面head内 通过style标签直接编辑，如
<style>h1 {color: green;}</style> -
直接在行内，即标签内部 通过style属性直接编辑，如
<h1 style="color: red">我是红色的标签</h1>
三、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选择器(其次) > 类选择器(使用最频繁) > 元素选择器