第二天HTML&CSS

HTML&CSS
一、表单标签
1.表单标签：所有需要提交到服务器端的表单项必须使用<form></form>括起来
属性：
action,整个表单提交的位置(可以是一个页面，也可以是一个后台 java 代码)
method,表单提交的方式(get/post/delete……等 7 种)
分析：
Get 与 post 提交方式的区别？【默认提交方式为 get】
Get 提交方式，所有的内容显示在地址栏，不够安全，长度有限制。 Post 提交方式，所有的内容不会显示在地址栏，比较安全，长度没有限制。
2. 文本输入：

  <input type=”text”  name=”姓名(后期方便使用)” size=”文本框的大小” maxlenght=”文本框最多输入的个数” readonly=”只读” placehoder=”要显示的内容” require=“必须填写的内容”/> 

type的类型：

• text 文本类型
• password 密码类型
• radio 单选类型
• checkbox 多选类型
• file 文件上传类型
  hidden 隐藏类型
  submit 注册类型
  reset 注册类型

3.下拉框

<select name=””>  
<option value=”” selected=”默认选中”>北京
</option> <option>上海</option> 
</select> 

4.文本框

<textarea name=””></textarea>

二、 CSS 相关的知识
1.什么是CSS？
简单来说就是给界面化妆(给html文件化妆）
a.css全称是Cascading Style Sheets，中文翻译就是层叠样式表，这是一种用来表现HTML或者XML等 文件 样式的计算机语言，拥有对网页对象和模型样式编辑的能力。
b.css拥有很多独有的语言特点，比如说丰富的样式定义，能够自定义想要的页面样式；而且css非常容易使用和 修改 ，只需要找到相应的元素即可修改。
2.CSS 的作用？
HTML：它是整个网站的骨架。
CSS：它是对整个网站骨架的内容进行美化(修饰)
3.CSS 如何使用？
语法和规范
选择器
{ 属性名 1:属性值 1; 属性名 2:属性值 2; 属性名 3:属性值 3; }
4.DIV 的概述
Div 它是一个 html 标签，一个块级元素(单独显示一行)。它单独使用没有任何意义， 必须结合 CSS 来使用。它主要用于页面的布局。 Span 它是一个 html 标签，一个内联元素(显示一行)。它单独使用没有任何意义，必 须结合 CSS 来使用。它主要用于对括起来的内容进行样式的修饰。
5.CSS的引入
有三种方式（外部引入、内部引入、行内引入）
1.内部引入

2.行内引入

3.外部引入


优先级问题: 谁离需要修饰的元素近，谁的样式生效，其它的被覆盖掉。(就近原则)
权重：对于标签描述越准确，权重越高，权重高的样式会覆盖低的
html有3样标签属性
id：唯一的 用于表示单个的标签对象
css中会有 id选择器用于对单个的标签进行样式的控制 写法： #id{}
id选择器因为 权重太高，所以很少使用
js中 :documen.getElementById(“id”)；仅仅获取单独的标签对象
jq中: $("#id")
name：一般是唯一的（单选框，多选框不是唯一）,一般情况和id同名
浏览器端向服务器端发送请求时候，key -> value中的key就是name
get方法： http://www.baidu.com?name=username&pwd=123456
在js中也会用到name 多选框：document.getElementsByName(“name”)//标签属性name名称
document.getElementsByTagName(“div”)//标签名称
返回的是一个js数组
class：类名称
css中的类选择器（.类名称）开头的 可以为所有Class为 类名称的标签做统一样式
js中 document.getElementsByClassName(“类名称”)
6.CSS 的选择器
CSS 基本选择器有三种(元素选择器、类选择器、id 选择器)
1. ID 选择器
#id 属性名{ 属性名 1:属性值 1; 属性名 2:属性值 2; 属性名 3:属性值 3; }

Id 保证唯一。

2. 元素选择器
元素名{ 属性名 1:属性值 1; 属性名 2:属性值 2; 属性名 3:属性值 3; } 如果多个相同的元素设置相同的样式，使用此种方式最为合适。
3. 类选择器
.类名{ 属性名 1:属性值 1; 属性名 2:属性值 2; 属性名 3:属性值 3; }

对多个元素设置相同的样式，此时使用类选择器比较合适。
7. CSS 的浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为 止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在 一样。
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到界面

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到 包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使 框 2 从视图中消失。 如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左 浮动直到碰到前一个浮动框。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向 下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它 浮动元素“卡住”：

清除浮动

我们要对网站进行布局，显示效果希望是上图左边的效果，此时我们会将框 1 和框 2 向 左进行浮动，由于使用了浮动，它们已经脱离了文档流，框 3 会上移至原来框 1 的位置，导 致的现象是框 3 隐藏在框 1 下面。 那么此时，我们可以清除浮动来清除之前框 1 和框 2 使用浮动后造成的问题！
解决办法：
在框 3 的前面定义一个
div(<div id=”three”></div>)
定义 CSS 样式：
#three{ clear:both; }
8.CSS 中如何让块级元素成为内联元素
我们可以使用个 CSS 中的 display 属性(inline)进行设置
去掉超链接的下划线： a{ text-decoration: none; }

让 div 居中 margin：0px auto;

让块级元素成为内联元素 display:inline;

块级元素内容居中 text-align:center;
三、盒子模型
一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：
width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。

一般的带码