表单+css基础

一、表单

作用：用来搜集用户信息

语法：

注：所有的表单元素都要放置在form中

1.文本框

语法：

2.密码框

语法：

3.提交按钮

语法：

注：

• 通过value属性重新设置提交按钮上的文字内容
• 提交按钮和要提交的内容必须放置在同一个form中

4.单选按钮

语法：

注：

• 一组中的单选按钮设置一致的name属性值，可以达到多选其一的效果
• checked="checked" 在页面加载完成后添加默认选中项
• 当属性和属性值相同时，可以省略属性值

5.复选按钮

语法：

6.普通按钮

语法：

注：

-普通按钮不具备提交功能，通常结合js点击事件来使用
-普通按钮默认文字内容为空，可通过value属性设置

7.下拉列表

语法：
a b ...

注：selected改变默认选中项

8.文本域

语法：

扩展：禁止用户拖拽改变文本域大小，设置如下：

9.重置按钮

语法：

注：

-重置按钮必须和重置的内容放置在一个form中

• disabled="disabled" 给表单元素添加禁用状态

---

扩展： get和post的区别

• get用来获取数据，post用来发送数据
• get发送数据时，信息会显示在url地址栏中，post直接通过服务器发送数据，用户看不到这个过程
• get可以传送的数据量较小，一般不能超过2kb，post可以传送的数据量较大，理论上没有限制
• get安全性较低，post安全性较高

---

二、div

作用：无语义标签，主要用于布局和划分板块

语法：

...

三、span

语法：
...

作用：
-span标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化
-span标签提供了一种将文本的一部分或者文档的一部分独立出来的方式

四、iframe框架

作用：将外部文件的内容嵌入到本页面中的某个位置
语法：

注：
如何去掉或隐藏iframe的滚动条：
scrolling="no"

五、html注释

语法：

html注释

---

CSS基础

一、css概念及特点

css———层叠样式表

特点：很好的实现了结构与表现相分离

作用：对html页面中的标记进行样式的设置，如字体颜色，大小，对齐方式等

二、css基础语法

css由选择符和声明两大部分组成，声明又是有属性和属性值组成。
即：

选择符{属性:属性值;}

eg:
h1{color:red;}

注：

css属性和属性值之间用冒号连接，每条声明结束要加分号

三、样式表的创建

1.内联样式表(行间样式，行内样式)

语法：
<标记 style="属性:属性值;">

eg:

千锋教育

2.内部样式表（嵌入式样式）

语法：

eg:

注：style标签一般放在head部分

3.外部样式表

a）使用link标签引入外部样式表

首先创建一个后缀名为.css的文件
然后在html页面使用link标签引入，语法如下：

注：

1. rel用来设置引入文件与当前文件之间的关系

2. link标签一般也放在head部分

b) 使用@import引入css文件

语法：@import "css文件路径";

注：@import导入css文件时，必须放在所有本页面样式之前才能生效

link和@import引入外部样式的区别：

• link是html标签，除了可以引入css文件外，还可以引入其他内容。

  @import是属于css范畴，只能引入css文件。

• link引入的css文件和页面同时加载，@import引入的css文件在页面加载完成后载入

注：加载顺序不同

• link是html标签，无兼容性问题，所有浏览器都支持，@import低版本浏览器不支持

注：浏览器支持不同

• link是html标签，支持js控制dom改变样式，@import不支持

注：是否支持js改变dom

四、样式表的优先级（三种样式表创建的区别）

采取就近原则，即离被设置的元素越近，优先级越高，一般为：

内联>内部>外部

当在css属性值中出现!important关键词时，它的优先级最高，即

!important>内联>内部>外部

五、css注释

语法：/* 注释内容 */

六、css选择器

1.id选择器

语法：<标记 id="id名">

id名{属性:属性值;}`

eg:

千锋教育

#edu{color:red;}

注：

• id名要语义化命名，不能使用中文，数字，或以数字开头，也不能使用关键词，敏感词

常见命名方法：驼峰命名法(qfEduTit),下划线连接命名法（qf_edu_tit）

• id名是唯一的，不能出现同名的id

2.class选择器（类选择器）

语法：<标记 class="类名"> .类名{属性:属性值;}

eg:

西安千锋

北京千锋

.edu{color:red;}

注：我们可以给具有相同样式的元素添加相同的class名

3.元素选择符（类型选择符，标签选择器）

语法：标记名称{属性:属性值;}

eg: a{text-decoration:none;} body{font-family:"微软雅黑";}

注：
a)如果想改变某个元素的默认样式时，可以使用类型选择符；
b)当统一文档某个元素的显示效果时，可以使用类型选择符；

4.后代选择器

语法：选择符1 选择符2{属性:属性值;}

eg: .uls li{color:red;}

注：使用后代选择器必须满足条件：选择符1和选择符2必须是包含与被包含的关系

5.群组选择器

语法：选择符1,选择符2,选择符3{属性:属性值;}

eg: h1,h2,h3,h4,h5,h6,strong{font-weight:normal;}

6.通配符

语法： *{属性:属性值;}

eg: *{margin:0; padding:0;}

注：*匹配html根元素下所有的标签元素

7.伪类选择器

语法：选择符:hover{属性:属性值;}

注：a的四个状态，按照顺序依次为：

a:link 超链接的初始状态

a:visited 超链接被访问过后的状态

a:hover 鼠标滑过超链接时的状态

a:active 鼠标按下时的状态

记忆方法：爱恨原则

L o V e H A t e

注：在实际项目中我们会这样简写a的四个状态：

a{color:gray;} a:hover{color:blue;}

注：可以给任意一个html元素添加滑过状态，例如：

li:hover{background:pink;}

七、css选择器权重

概念：当多个选择器针对同一个元素设置相同的样式时，会优先使用选择器权重较高的样式

我们将选择器的权重分为以下四个等级：

a)内联样式

权重：1000

b)id选择器 权重：100

c)class选择器，伪类选择器，属性选择器 权重:10

d)类型选择符，伪元素选择器 权重：1

注：

• 后代选择器的权重为所有选择器权重之和
• 群组选择器权重为选择器自身的权重
• 当权重相同时，取后面定义的样式

★ css层叠的含义

层叠指的是样式的优先级，当产生冲突时以优先级高的为准

1. 内联样式>内部样式>外部样式（除非使用!important标记 ）

2. id选择符>类选择符>元素选择符

3. 权重相同时取后面定义的样式