客户端笔记二

Html：语法要求相对不严谨

Xhtml：严格按照XML语法来要求

<meta name=”KEYWords” content=””> 向搜索引擎说明你页面的关键词

<meta name=”DEscription” content=””>告诉搜索引擎你的站点的主要内容

<meta charset=”UTF-8”> 设置网页编码集

<meta http-equiv=”Refresh”content=”n;url=http://yourlink”>定时让网页在指定的时间n内，跳转到页面的http：//yourlink

 

表单元素：

Input

         Type=

1.      Text 文本框

2.      Password 密码框

3.      Radio 单选框

4.      Checkbox 复选框

5.      Hidden 隐藏表单

6.      File 文件表单（可以选文件）

7.      Submit  提交按钮

8.      Reset 重置按钮

9.      Image  图片提交按钮

10.  Button  命令按钮（用于JS）

Select 下拉框，属性加上multiple是列表框

TextArea 多行文本

 

CSS:是层叠样式表（cascadingstyle sheets）的缩写，他用于定义HTML元素的显示形式。是一种格式化网页内容的技术。

 

添加样式表的方式：

1.      内联式：直接在元素中加入style属性，只能用于网页中的一个元素

<div style="border: 1px solid red;width:300px;height: 200px"></div>

2.      嵌入式：书写style标签，在标签中指明样式，可以用于网页中的不同元素。一般写于head里。

    <style>

        div{

            width: 300px;

            height: 300px;

            background-color: yellow ;

            border: 2px solid red;

        }

</style>                      

 

3.      外联式：将样式规则书写到文件中，可以用于不同的网页，重用度最好。

<link rel="stylesheet"href="abc.css">  （在head内）、

 

4.      如果有多个样式表达方式作用于同一个元素，优先规则是内联式大于嵌入式大于外联式

 

 

层叠样式表的含义是：如果有多个规则来描述同一个元素，那么会根据样式表的优先级，来决定最终显示什么样式。

 

对于导入css方式的优先级，内联式>嵌入式>外联式。（如果导入多个外联式，以最后导入的为准，针对相同元素的样式，谁最后导入采用谁（谁写最后用谁））

 

     

CSS选择器：

元素选择器：利用元素的标签名称作用选择范围。Div｛｝表示所有的div元素均采用该样式。H1,h2{}表示所有的h1标签和h2标签均采用该样式

 

类选择器.：利用元素的class属性来引入类选择器的样式。可以用于多种元素，而且同一种元素可以选择性使用。

                   .mm{}   <div class=”mm”></div>  该div采用mm类选择器定义样式

 

ID选择器#：让拥有该ID属性的元素采用该样式。

                      <p id=”p1”></p>  #p1{} id号为p1的元素采用该样式

 

包涵选择器：元素内的子元素采用该样式。

                   <divid=”mydiv”></div>  #mydivspan{}  id号为mydiv元素中所有的span标签都采用该样式

                   Div.aaa{} 表示所有的div中，class属性为aaa的元素采用该样式

 

通配符*：所有的元素均采用该样式。

                   #onediv*{} 表示ID为onediv 中所有的元素均采用该样式。

 

 

伪类及伪元素选择器：

伪类选择器：执行完某个动作的元素采用该样式。

                            #data1tr:hover{} 表示鼠标悬停在id 为data1 下的tr元素是采用该样式。

 

 

 

CSS属性单位

颜色单位：用百分百 如color:rgb(50%,0,50%);

使用0-255之间的整数值来设置如 color：rgb（29，39，255）

使用16进制数组定义颜色  如 #ffaa99

使用简化十六进制  如#080

为颜色取名字：black white red green blun 等

 

 

字体属性：

 

 

Margin属性：

分为margin-top， margin-right，margin-left，margin-bottom，margin（里面值是上右 下 左） 5个属性。

水平盒子的间距为2个盒子间距的和。

垂直盒子的间距为两个盒子间距的较大值

Margin值可以设置为负数

 

Padding属性：

是用来描述盒子模型的边框和内容之间插入多少空间，和margin属性类似，也分为上下左右和一个快捷方式padding（里面值是上右 下 左）。

Margin是当前元素和border的距离，padding是内容和border的距离

Margin是对外的，padding 是对内的

Margin 只对块级元素有效，padding 对所有元素都有效

 

 

CSS盒子模型

在盒子模型中，我们可以控制四个不同的分层属性：

内容（content）：元素中的内容

外边距（margin）：代表元素外边的空间，这个控件将元素相互分开

边框（border）：位于元素的边距内和元素的边框距外之间的可配置的线

内边距（padding）：元素内容和元素边框之间的空间

 

边框、边距、边框距、这三个属性可以单独设置，但是他们同时可以相互配合在一起来格式化一个元素。

盒子模型均可以用“上右下左“的方式设置。如果仅给出两个或三个值，那么缺失边的属性值取决于对边相同的值

 

 

盒子之间的关系：

标准文档流：所谓标准流，就是指在不适用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则。

1.      文本元素按照从上到下、从左到右的格式布局

2.      块级元素按照从上到下依次排列

3.      内嵌元素按照从左到右一次排列

 

 

定位属性：

         relative相对于元素现在的位置，定位元素

absolute绝对定位，如果父元素没有定位，那么相对浏览器定位，会脱离文档流

fixed 固定定位，固定在浏览器的某位置上移动后也在那个位置

z-index:数字越大在越上层 越小在越下层

display:none和visibility：hidden区别

这两个样式都可以隐藏元素，前者元素看不见，同时元素不占用位置。

而visibility：hidden 元素看不见，但是元素会占用位置

 

 

Overflow: hidden:超出部分自动隐藏

                   Scroll:超出部分加滚动条显示

                   Auto:如果没有超出容器，那么正常显示，如果超出容器则显示滚动条

Word-break：break-all 超出后自动换行

 

内嵌元素和块级元素相互转换

内嵌元素----》块级元素Display:block

块级元素----》内嵌元素float：left    display:inline