11.13

一、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选择器(其次) > 类选择器(使用最频繁) > 元素选择器