自我总结36
form表单
能够获取用户输入(输入，选择，上传的文件)
并且将用户输入的内容全部发送给后端
表单属性
action 控制数据提交的地址
三种书写方式
1.不写 默认就是朝当前这个页面所在的地址提交数据
2.写全路径(https://www.baidu.com)
3.只写路径后缀(/index/)
method
get form默认
post
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
input标签
form 表单中的input就类似于是前端的变形金刚
通常情况下input需要结合label一起使用
<label for="d1">用户名:<input type="text" id="d1"></label>
<!--绑定id值 之后点击label标签内任何的位置都可以自动选中input框-->
type属性 根据type参数的不同 展示不同的功能
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框 | |
| date | 日期输入框 | |
| checkbox | 复选框 | |
| radio | 单选框 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| button | 普通按钮 | |
| hidden | 隐藏输入框 | |
| file | 文本选择框 |
disable属性 禁用该input框
value属性 设置默认值
选择的标签 如何默认选中
radio
checkbox
checked='checked'
当属性名和属性值相同的时候 可以只写属性名
select标签
下拉框
一个个的 option 标签就是一个个的选项
select标签默认是单选
加一个 multiple参数 就可以变成多选
textarea标签
获取大段文本
注意细节：
有两个标签能够触发form表单提交数据的动作
input标签
type = submit
button标签
form表单如果要提交文件数据
必须修改以下参数 enctype="multipart/form-data"
所有获取用户输入的标签 都应该有name属性
name属性就类似于字典的key
input框获取到的用户输入都会放到input框的value属性中
针对选择框 传到后端的数据 有value属性决定
css
层叠样式表，用来控制html标签样式的
注释格式
/*单行注释*/
/*
多行注释1
多行注释2
*/
书写规范
通常我们在写css的时候 都会单独写一个css文件 里面只有css代码
/*这是网站首页的css样式文件*/
/*通用样式*/
/*导航条样式*/
/*轮播图样式*/
css的语法结构
选择器 {属性1:属性值1}
行内样式
行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。
<p style="color: red">Hello world.</p>
内部样式
嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
外部样式(*)
外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
基本选择器
元素选择器
p {color: "red";}
ID选择器
#i1 {
background-color: red;
}
类选择器
.c1 {
font-size: 14px;
}p.c1 { color: red;}
注意：
样式类名不要用数字开头（有的浏览器不认）。
标签中的class属性如果有多个，要用空格分隔。
通用选择器
* {
color: white;
}
组合选择器
后代选择器
/*li内部的a标签设置字体颜色*/
li a {
color: green;
}
儿子选择器
/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {
font-family: "Arial Black", arial-black, cursive;
}
毗邻选择器
/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {
margin: 5px;
}
弟弟选择器
/*i1后面所有的兄弟p标签*/
#i1~p {
border: 2px solid royalblue;
}
属性选择器
/*用于选取带有指定属性的元素。*/
p[title] {
color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
color: green;
}
伪类选择器
a标签有四种状态
-
没有被点过 link
-
鼠标悬浮hover悬浮
-
点击之后不松手
-
点击之后 再回去
/* 未访问的链接 */
a:link {
color: #FF0000
}
/* 鼠标移动到链接上 */
a:hover {
color: #FF00FF
}
/* 选定的链接 */
a:active {
color: #0000FF
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/*input输入框获取焦点时样式*/
input:focus {
outline: none;
background-color: #eee;
}
/*我们将input框鼠标点进去之后的那个状态叫做 input获取焦点 focus
鼠标移出去之后的状态 叫做input框失去焦点*/
伪元素选择器 (清除浮动带来的负面影响)
可以通过css添加文本内容
first-letter
常用的给首字母设置特殊样式：
p:first-letter {
font-size: 48px;
color: red;
}
before
/*在每个<p>元素之前插入内容*/
p:before {
content:"*";
color:red;
}
after
/*在每个<p>元素之后插入内容*/
p:after {
content:"[?]";
color:blue;
}
选择器优先级
1.选择器相同的情况下 引入方式不同
遵循就近原则 谁离标签更近 就听谁的
2.选择器不同的情况下
行内选择器 > id选择器(其次) > 类选择器(使用最频繁) > 元素选择器
