1.标签

常用的单标签

< !— xx –>：注释标签 快捷键：ALT+/

< br/>：换行标签

注释：自动生成空白行

< hr/> ：水平线标签

常用的双标签

段落

< p>< /p> –段落标签

标题

h1-h6 –标题标签

文本格式化标签 strong , b

区别

strong - 着重，强调标签，

b – 加粗

建议：工作中一般使用 strong

文本倾斜标签：< em>< /em>、< i>< /i>

区别：

em 元素代表对其内容的强调

i 元素代表在普通文本中具有不同语态或语气的一段文本，某种程度上表明一段不同特性的

文本，比如一个分类学名称，一个技术术语，一个外语习语，一个音译，一个想法，或者西方文本中的一艘船名。

建议：工作中一般使用 em

删除线标签：< del>< /del> 、< s>< /s>

建议：工作中一般使用del

下划线标签：< ins>< /ins>、< u>< /u>

建议：工作中一般使用ins

提示：上诉建议的理由，一方面内容提示，另一方面语义化强。

图片标签: img

< img src=”/i/eg_tulip.jpg” alt=”上海鲜花港 - 郁金香” width=”300” height=”360” />

注意图片：width=100%可以让图片的宽随浏览器变动

图片常用属性

Src 图片的来源 必写属性

Alt 替换文本 图片不显示的时候显示的文字

Title 提示文本 鼠标放到图片上显示的文字

Width 图片宽度

Height 图片高度

超链接

< a href=”http://www.w3school.com.cn”>W3School< /a>

–常用属性：

href 去往的路径（跳转的页面） 必写属性

title 提示文本 鼠标放到链接上显示的文字

target=”_self” 默认值 在自身页面打开（关闭自身页面，打开链接页面）

*target属性值*

列表

无序列表：

< ul>

< li>< /li>

< li>< /li>

< li>< /li>

< /ul>

常用属性：

type=”square” 小方块

Type=”disc” 实心小圆圈

Type=”circle” 空心小圆圈

有序列表

< ol>

< li>< /li>

< li>< /li>

< li>< /li>

< /ol>

常用属性：

type=”1,a,A,i,I” type的值可以为1,a,A,i,I

start=”3” 决定了开始的位置。

自定义列表

< dl>

< dt>< /dt> 小标题

< dd>< /dd> 解释标题

< dd>< /dd> 解释标题

< /dl>

音乐标签

< embed> 标签是 HTML 5 中的新标签。

< embed src=”helloworld.swf” hidden=”true|false” />

2.定位

CSS 定位机制：

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

1、静态定位（static）

一般的标签元素不加任何定位属性都属于静态定位，对象遵循正常文档流。top、right、bottom、left等属性无效。

2，相对定位与绝对定位

relative：对象遵循正常文档流，相对于对象左上角位置（移动前）进行定位，移动后仍占据原空间，对象不可层叠。

absolute：对象脱离正常文档流，其层叠可通过css z-index属性定义

3、固定定位（fixed）

对象脱离正常文档流，使用top、right、bottom、left等属性以窗口左上角为参考点进行定位，当出现滚动条时，对象不会随着滚动，其层叠通过z-index属性定义。

（锚点定位）

3.选择器

1.标签选择器

注意点：1. 标签选择器选中当前所有的标签，而不能单独选择某个标签

2.标签选择器不无多深都能被选中

3.只要是HTML中的标签就可以作为表亲啊选择器（h/a/img/ul/ol/dl/input....）

2.id选择器

注意点：

1.每个HTML标签都有一个属性叫做id，也就是说每个标签都可以设置id

2.在同一个界面中id的名称是不可以重复的

3.在编写id选择器时一定要在id名称前加上＃

4.id的名称有一定的规范

4.1名称不能以数字开头，只能以字母／数字／下划线组成

4.2id不能以HTML标签名称命名

4.3在开发中一般不会使用id，留给js使用

3.类选择器

4.属性选择器

5.序选择器

6.通配符选择器 *

由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器

7.兄弟选择器

作用：给指定选择器后面紧跟的那个选择器选中的标签设置属性

注意点:1.相邻兄弟选择器必须通过＋连接

2.相邻兄弟选择器职能选中紧跟其后的那个标签，不能选中被隔开的标签

8.通用选择器

作用:给指定选择器后面的选择器选中的所有标签设置属性

注意：

1.通用兄弟选择必须用～连接

2.通用兄弟选择器选择后面某个选择器中的所有标签，无论有没有被隔开都可以选中

4.HTML加载顺序

用户输入url地址，浏览器根据域名寻找IP地址

浏览器向服务器发送http请求，如果服务器段返回以301之类的重定向，浏览器根据相应头中的location再次发送请求

服务器端接受请求，处理请求生成html代码，返回给浏览器，这时的html页面代码可能是经过压缩的

浏览器接收服务器响应结果，如果有压缩则首先进行解压处理，紧接着就是页面解析渲染

　　解析渲染该过程主要分为以下步骤：

解析HTML

构建DOM树

DOM树与CSS样式进行附着构造呈现树

布局

绘制

5.css单位的种类和区别

A 文字

    1 font-family:字体名称

    注意： 当指定多种字体时，用“，”分隔每种字体的名称

    当字体名称包含两个以上分开的单词是，用“”把该字体名称括起来。

    当样式规则外已经有“”时,用‘’代替“”。

    2 font-size:字号参数。

    3 font-style:斜体字的名称。

    normal正常状态、italic斜体字、oblique 斜体和正常状态之间。

    4 font-weight:字体粗细。    

    取值是：number(100～900) 或者参数 lighter（细体） 和bold(粗体)bolder（特粗体） 参数 显示更细或更粗。    

    5     text-transform:参数

    参数的范围： uppercase 所有文字大写显示

    lowercase:所有文字小写显示    

    capitalize 每个单词的头字母大写

    none 不继承母体的文字变形参数。

    6 text-decoration:参数

    参数的范围： underline 为文字加下划线

    overline 为文字加上划线

    line-through 为文字加删除线

    blink 使文字闪烁

    none 不显示上叙任何效果。

    7 color:#rrggbb或者 #rgb原则(还可以参考资料有多种方式，但是只要掌握基本的一种方式)。

    8 可以用font 属性全部定位

    示例：p{font:italic bold 12pt;}

B 背景

    1 background-color 背景颜色

    2 background-image 背景图片

    示例：{background-image:url('http://baidu.com/zhouliang.gif')}

    3 background-repeat:参数

    参数的范围：

    repeat 表示图像从水平和垂直角度平铺       

    no-repeat 不重复平铺背景图片

    repeat-x 使图片只在水平方向上平铺

    repeat-y 使图片只在垂直方向上平铺。

    4 background-attachment 参数

    fixed 网页滚动时，背景图片相对浏览器而言固定不动。

    scroll 网页滚动时，背景图片相对浏览器而言一起滚动。

    5 background-postion 参数 （背景定位）

    参数：top 相对前景对象顶对齐

    bottom 相对前景对象底对齐

    left 相对前景对象左对齐

    right 相对前景对象右对齐

    center 相对前景对象中心对齐

    说明：一般用坐标的方式来确定图片的位置。

    6 可以直接用 background 复合属性来确定式样

    示例：table{background:#001122 url(zhouliang.jpg) no-repeat bottom right}

C 文本

    1 英文单词间距 word-spacing:

    取值可以是：normal或者是单位像素；

    2 英文字母间距 letter-spacing:间隔距离

    取值可以是：normal或者是单位像素；

    3 行距 line-height:值

    可以是精确的值，也可以是百分比。

    4 文本水平排列text-aglin:参数

    left: 左对齐 right：右对齐 center: 居中 justify:相对左右对齐。

    注意：text-aglin 是块级属性

    5 文本垂直排列 vertical-align:参数

    top 顶对齐 bottom 底部对齐 text-top 相对文本顶对齐

    text-bottom相对文本底对齐 baseline:基准线对齐 middle 中心线对齐

    sub 以下标的形式对齐 sup 以上标的形式对齐,相对于元素行高属性的百分比。

    6 文本缩进 text-indent 缩进距离

    说明：缩进距离必须是值或者%比

    7 white-space

    设置值：normal：合并连续的多个空格

    pre：保留原样式

    nowrap：不换行，直到遇到
    标签

    8 text-decoraition

    值：none :表示不对文本进行修饰，也是默认值，

    underline:表示对文字添加下划线

    overline:表示添加上划线

    line-through:表示对文本添加删除线

    blink:表示文字具有闪烁效果

    9：text-transform文本转换

    取值范围：none:表示原有值

    capitalize:使每个字的第一个字母大写

    uppercase:大写

    lowercase:小写

D 定位

    是指指定元素的位置，他是CSS-P(cascading style sheets positioning)中的内容，CSS-P是CSS的一个扩展，

    它可以用来控制任何网页元素在浏览器文档窗口中的位置。

    1：postion

    设置值： 含义

    absolute 采用绝对定位（分别用四个边框来定位）

    relative 采用相对定位（也得用四个边框来设定位置）

    static 默认值

    2：left/top/width/height

    说明:设置值可以是

    3:z-index(也就是元素的堆叠,大的在上，小的在下。默认是按照先后顺序)

    说明：取值auto默认值，表示它遵循其父对象的定位属性；如果设置为数字,必须是无单位的正整数，可以取负值，

    但是一般为正数,一般数字为1时间是最底层。

E 布局

    1 visibility 可视性

    设置值：inherit：表示对象继承父本的继承性。

    visible:表示对象可见

    hidden：表示对象隐藏

    2 display 设置或检索对象是否及如何显示

    设置值：block、inline、list-item、none

    3 clip 可视区域

    设置值：auto表示对象不裁剪

    rect(数值表示)(一般有四个设置值：方向定位于上右下左的顺序，一般以左上角(0,0)坐标计算4个偏移数值。其中 任何一个值都可以用auto代替)

    4 overflow 超出范围：

    设置值：isible 扩大浏览器

    hidden 裁剪掉多余的文本

    scroll 滚动条

    auto 当有多余的时候才显示滚动条

    5 float 浮动属性

    设置值：left表示文字浮在元素左侧

    right 表示文字浮在元素右侧

    none 默认值，表示不浮动。<该属性特别重要，一定要掌握>

    6 clear 表示指定一个元素周围是都允许有其他元素漂浮在它的周围。

    设置值：left ,right,none,both;指要清除本元素四周的浮动对象。

    7 page-break-before 设置值：always 是否强制分页

    8 page-break-after 设置值：always 打印后设置是否强制分页

    9 width和height 表示层的宽度与高度。设置值为 auto|数值

F 边距与填充属性

    1 复合属性margin：与边距的距离

    (margin-top margin-left margin-bottom margin-left)

    取值可以是：auto默认

    %比或者具体的值：

    说明：取值可以是一个或者两个或者三个或者四个（每个都具有不同的含义）。

2 复合属性填充（指用白值填充）：padding

    说明：和margin的用法一样。

    3 border-width

    边框宽度：

    border-top-width:上边框宽度

    border-right-width:右边框宽度

    border-bottom-width:底边框宽度

    border-left-width:左边框宽度

    取值为：medium 默认宽度；thin 细边框 thick 粗边框

4 border-style

    border-top-style:上边框样式

    border-right-style:右边框样式

    border-bottom-style:底边框样式

    border-left-style:左边框样式

取值： 含义

    none 不现实边框，为默认值

    dotted 点线（电线）

    dashed 虚线，也称短线

    solid 实线

    double 双实线

    groove 边框带有立体感的沟槽

    ridge 边框成脊形

    inset 使整个表框凹陷，即在边框内嵌入一个立体边框

    outset 使整个边框凸起，即在边框外嵌入一个立体边框

5 border-color

    设置边框的颜色：用法同上margin

6: border

    复合属性：border:边框宽度|样式|颜色

    那么还有：border-top|border—right|border—bottom|border-left

G 列表

1:list-style-type 指显示于列表项前的标识符号

    取值： 含义

    none 表示不显示列表符号

2：列表缩进 list-style-postion 列表位置描述列表在何处显示

    参数：inside 列表内容和列表标识符号处在不同垂直位置，在符号内测。

    outside 列表内容和列表标识符号处在同一垂直位置

3： list-style-image

    说明：用图片符号作为链接标题

    取值 含义

    none 表示不指定图像

    url(网页地址) 指定图片位置

    4：复合属性：list-style

    实现以上三种属性

H 光标属性

    1 cursor 当点击某个内容时，鼠标显示其他的图形

    style="cursor:hand" 手形

    style="cursor:crosshair" 十字形

G 滤镜属性

    1 filter

6.颜色

1.单词表示法：

      英文单词表示法，这个还需要讲吗？如：red,yellow,blue

2.16进制表示法

      16进制表示的方法分为两种：

       1. 以”0x“开头表示，这种表示方法才是标准的16进制的表示方法。例如“0x00ffffff”或"0xffffff"

       2.以“#”开头表示，例 如“#FFFFFF”或“#FFF”。

      区别：其实也没啥区别，都是16进制的，只是常见的是以“#”开头，”0x“开头多在电子这方面，不用太关注.

      需要注意的是：透明度设置，以"0x"开头的，如果后面是六位，那么就没有透明度，如果是八位，那么“0x”后面的两位就是透明度值，范围是：FF~00(不透明~透明)，以“#”开头的也是一样前面两位；关于透明度值的计算：透明度共有256阶，按百分比来计算，如30%透明度，计算方法为：255x30%，取整后转16进制即可。

      关于这两种详细的说明可以参考：Android之颜色表示法：#与0x的区别

3.RGB表示法

    1.使用rgb表示

       r：红；g：绿；b：蓝。就是光的三原色

      例如：rgb(0,0,0)，rgb可大写

      每个值的范围是0-255

    2.使用rgba表示

      仅仅比第一种多了一个a，a 表示的是alpha(阿尔法)，表示透明度，取值范围是0-1。

      例如：rgba(10,10,10，0.5)，也可写rgba(10,10,10，.5)，rgba可大写

/*4.使用hsl表示

    1.使用hsl表示

      表示格式和rgb相似，不同的是数值不同。hsl分别表示的是色调,饱和度,亮度

      h：色调，取值0-360，颜色的底色调，表示色轮周围的角度

      s：饱和度，取值0%-100%，0是没有颜色显示为灰色，100%是全彩色

      l：亮度，取值0%-100%，0是无光显示为全黑的，100%是充满光，表现为全白。

      例如：hsl(100,23%,50%)，hsl可大写

    2.使用hsla

      和rgba类似，比第一种多一个a(alpha)透明值，取值范围也是0-1

      例如：hsla(100,23%,50%，0.5)，也可写hsla(100,23%,50%，.5)，hsla可大写*/

7.浮动

    方法一： 使用clear属性的空元素

    方法二：使用overflow属性

    给浮动的元素容器添加overflow:hidden/auto；

    在添加overflow属性后，浮动元素又回到了容器层，把容器层撑起来，达到清理浮动的效果

    另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。

    方法三：给浮动元素后边的元素添加clear元素

    方法四：使用css的:after伪元素

    .clearfix:after{

    content:'020';

    display:block;

    height:0;

    clear:both;

    visibility:hidden;

    }

    .clearfix{

    zoom:1;

    }

 8.A标签-target属性

    <a> 标签的 target 属性规定在何处打开链接文档。

        如果在一个 <a> 标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。

        用打开一个完整的浏览器窗口，使用 target 更通常的方法是在一个 <frameset> 显示中将超链接内容定向到一个或者多个框架中。可以将这个内容列表放入一个带有两个框架的文档的其中一个框架中，并用这个相邻的框架来显示选定的文档：

        _blank浏览器总在一个新打开、未命名的窗口中载入目标文档。

        _self这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。

        _parent这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。

        _top这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。