HTML学习笔记Day2

一、部分表单元素的使用

　　1.表单的作用：用来收集用户信息

　　2.表单元素

　　　　（1）表单控件：

　　　　　　单行文本框：<input  type="text" value="默认值" />

　　　　　　密码框：<input type="password" placeholder="文本提示信息" />

　　　　　　提交按钮：<input type="submit" value="按钮内容" />

　　　　　　重置按钮：<input type="reset" value="重置" />

　　3.表单域

　　　　（1）表单域标签：

　　　　　　<form method="post/get（传输方式）" action="相对路径"></form>

　　　　　　扩展知识点：post和get的区别：

　　　　　　　　1）get是从服务器上获取数据，post是想服务器传送数据

　　　　　　　　2）get是把参数数据队列加到提交表单的action属性所指的URL中，在URL中可以看到。post是通过HTTP post机制，用户看不到这个过程。

　　　　　　　　3）get传送的数据量小，不能大于2KB。post传送数据量较大，一般认为不受限制。

　　　　　　　　4）get安全性非常低，post安全性较高。但执行效率post方法好。

二、标签

　　<div></div>文档区域，文档区域对象

　　<span></span>文本节点

三、Css基础

　　1.Css简介：cascading style sheet 汉译：层叠样式表；

　　2.Css语法：

　　　　选择符{属性：属性值；属性：属性值；}　　选择符+{声明} 　　标签可为选择符

　　　　1）css语法由两部分组成，分别是选择符和声明，声明包括属性和属性值；

　　　　2）属性与属性值之间用冒号连接；

　　　　3）当一个选择符有多个属性时，用分号隔开；

　　　　4）当一个属性有多个属性值时，属性之和属性值之间用空格分隔；

　　　　5）使用空格、换行不影响css样式的显示。

　　3.css样式表的创建：

　　　　（1）内部样式表（强烈建议写在head文件内）

　　　　　　语法：<style type="text/css"></style>

　　　　（2）外部样式表

　　　　　　1）第一种：<link rel="stylesheet" type="text/css" hreaf="目标文件路径及全称" />

　　　　　　2）第二种：@import url（相对路径）；

　　　　　　3）link与import区别：

　　　　　　　　本质上的区别，link属于HTML的标签，import属于css提供的一种方法；

　　　　　　　　加载顺序上的区别，用link导入HTML和css会同时加载；

　　　　　　　　兼容性区别，link兼容性更好点；

　　　　　　　　使用dom控制样式时的差别，当使用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的（不支持）

　　　　（3）内联样式表（也叫样式表或直进式样式表或者叫做行内样式表）

　　　　　　语法：<标记 style=“属性：属性值；”></标记>

　　4.css样式表的权重（优先级）

　　　　（1）内联样式的权重级别最高

　　　　（2）内部样式表和外部样式表的权重与书写位置有关，后书写的权重更高

　　5.css样式表的作用域

　　　　内联样式表的作用域：只针对当前标签起作用；

　　　　内部样式表的作用域：只针对当前页面起作用；

　　　　外部样式表的作用域：可以连接到多个页面，对多个页面起作用。

　　6.css属性：

　　　　width：100px；宽度

　　　　height：100px；高度

　　　　background-color：100px；背景颜色

　　　　border：1px solid red；边框

　　　　color：#ff00ff；文本颜色

　　7.css选择符：

　　　　概念：选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者是指定名称的元素。

　　　　css选择符包括四大类：类型选择符、id选择符、class类型选择符、特殊选择符

　　　　（1）类型选择符：

　　　　　　语法：元素名称{属性：属性值；}

　　　　　　说明：类型选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符；

　　　　　　特点：能够选中页面中所有相同的标签并添加样式

　　　　　　应用：想统一某一个标签样式的时候

　　　　（2）id选择符

　　　　　　语法：#id名{属性：属性值}

　　　　　　说明：当我们使用id选择符时，应先为每个元素定义一个id属性，如<div id="top"></div>

　　　　　　特点：唯一性（在同一页面中，id名只能出现一次)

　　　　　　应用：划分网页的外围结构

　　　　（3）class选择符

　　　　　　语法：.class名{属性：属性值；}

　　　　　　说明：类选择符的语法格式是：“.”加上定义的class名称，也就是class类选择符；

　　　　　　　　　当我们使用类选择符时，应先为每个元素定义一个class属性，如<div class="top"></div>

　　　　　　特点：可以书写一类样式

　　　　（4）群组选择符

　　　　　　语法：选择符1，选择符2，选择符3{属性：属性值；}

　　　　　　说明：当多个选择符应用样式相同时，可以将选择符用英文逗号分隔的方式，合并为一组

　　　　（5）包含选择符

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

　　　　　　说明：选择符1和选择符2之间用空格隔开。含义就是所有选择符1中包含选择符2

　　　　（6）伪类选择符

　　　　　　a:link{属性：属性值；}未访问状态

　　　　　　a:visited{属性：属性值；}已访问状态

　　　　　　a:hover{属性：属性值；}鼠标滑过状态

　　　　　　a:active{属性：属性值；}鼠标按下状态

　　　　（7）通配符

　　　　　　语法：*{属性：属性值；} eg：*{margin：0；padding：0；}

　　　　　　说明：通配选择符的写法是“*”，其含义就是所有元素。

　　8.选择符权重

　　　　（1）css中，用四位数表示权重，权重表达方式如：0,0,0,0

　　　　　　类型选择符权重：0001；

　　　　　　类（class）选择符权重为：0010；

　　　　　　ID选择符的权重为：0100；

　　　　　　伪类选择符的权重为：0010；

　　　　　　包含选择符的权重为：包含选择符权重之和；

　　　　　　内联样式的权重为：1000；

‘　　　　　　通配符权重为：0000；

　　　　　　伪类选择符的权重为：0001；

　　　　　　子选择符的权重为：0000；

　　　　　　属性选择符的权重为：0010；

　　　　　　继承的样式权重为：0000；

四、扩展

　　1.HTML注释<!--注释内容-->

　　2.css、js注释：单行文本注释//；多行文本注释/**/

　　3.关键选择器<div class="box1 box2"></div>权重与书写位置有关（有争议，有人说后面的类名权重较高）