HTML总结-CSDN博客

本文链接：https://blog.csdn.net/luoshui0428/article/details/47274825

HTML知识点总结

CSS样式的优点

1.实现内容和样式的分离,利于团队开发。

   2.实现复用，提高开发效率。

   3.实现页面的精确控制。

   4.利于搜索引擎的搜索。
选择器的分类

1.标签选择器

语法：标签名{   属性名1：属性值1;

                  属性名2：属性值2;

                  .......

}

2.类选择器

语法：   .类名{属性名1：属性值1;

             属性名2：属性值2;

               ......

}

3.ID选择器

语法：   #ID表示名{ 属性名1：属性值1;

                属性名2：属性值2;

               ......

}

注:内部样式>ID选择器>类选择器>标签选择器

行内样式表>内部样式表>外部样式表、
文本及字体属性

常用的文本属性：

line-height ：设置行高

   Text-align ：对齐方式（left:居左,right:居右,center:居中）

   Letter-spacing：设置字间距

   Text-decoration：文本修饰,underline（下划线）、none

   Whit-space：规定如何处理空白,例如规定是否换行。

取值：nowrap:不换行)

- 常用的字体属性：
  
  font：在一个声明中设置字体所有样式,
  
  例如：font:bold 12px 宋体)
  
  Font-family：定义字体类型例如：Font-family：宋体
  
     Font-size：定义字体大小
  
     Font-weight：定义载体粗细)
背景属性
- 常用的背景属性
  
  Background：在一个声明中设置所有背景属性
  
  (background：#ccc url(images/bd.jpg) repeat-x 20px -100px)
  
  Background-color：设置背景颜色
  
  Background-image：设置背景图片
  
  Background-repeat：设置背景的平铺
  
  Background-position：设置背景出现的初始位置

Background-repeat属性对应的取值

Repeat：纵向平铺，不填时的默认

Repeat-x：横向平铺)

Repeat-y：纵向平铺

No-repeat：背景图片不重复平铺

列表属性：list-style：

None：去掉修饰号

Disc：实心圆

Circle：空心圆

Square：实心正方形

Decimal：数字
盒子模型

盒子模型的常用属性：

边框(Border)、内边距(padding)、外边距(margin)、上(top)、下 (bottom)、左(left)、右(right)、高(htight)、宽(width)。

外边距(margin)的属性：

类别            属性       含义          举例

四个方向       Margin-top       上外边距             margin-top:1px

                        Margin-right    右外边距             margin-right:2px

                                               Margin-bottom 下外边距       margin-bottom:2px

             Margin-left     左外边距       margin-left:1px

缩写形式    Margin      统一设置4个边距 1px2px 3px 4px

                                                （上右下左）

Border属性如下:

类别	属性	含义	举例
修饰属性	Boder-color	边框颜色	border-color:#FF00FF
	Border-width	边框宽度	border-width:2px
	Border-style	边框样式常用的值如下 None:默认无边框 Solid:实线 Dashed:虚线	Border-style:solid
	Border-top	上边框	Border-top:2px
	Border-right	右边框	Border-right:5px
	Border-bottom	下边框	Border-bottom:5p X dotted
	Border-left	左边框	Border-left:4px
缩写形式	border	在一个声明中统一设置四个方向的边框属性	Border:1px solid red
	Border-left	在一个声明中设置左边框的属性	Border-left:1px Solid red

内边距Padding属性如下:

类别	属性	含义	举例
四个方向	Padding-top	内容与上边框的之间的距离	Padding-top:2px
	Padding-right	内容与右边框的之间的距离	Padding-right:3px
	Padding-bottom	内容与下边框之间的距离	Padding-bottom:1 Px
	Padding-left	内容与左边框之间的距离	Padding-left:5px
缩写形式	padding	在一个声明中统一设置四个方向的填充属性	Padding:2px 2px 2px 2px

浮动属性：

常见的浮动设置

                             Float:left                                                               设置元素左浮动

                             Float:right                                                                  设置元素右浮动

                             Float:none                                                                  默认值，不浮动

清除浮动(clear):

                       Clear:left                                                                   在左侧不允许有浮动元素

                       Clear:right                                                                        在右侧不允许有浮动元素

                       Clear:both                                                                        在左右两侧不允许有浮动元素

                       Clear:none                                                                       默认值,允许两侧都有浮动元素

超链接伪类

伪类

示例

含义

应用场景

A:link

a:link{color:#999

}

未单击访问时的

超链接样式

常用，超链接主

样式

A;visited

A:visited{color:#

333}

单击访问后的超

链接样式

需区分是否已

被访问

A:hover

A:hover{color:#

Ff7300}

鼠标悬浮其上的

超链接样式

常用，实现动态

效果

A:active

A:active{color:#9

99}

鼠标单击未释放

的超链接样式

少用，一般与

Link一致

多选器的常用符号及组合:

符号	中文	示例	含义
	空格	Div ul{list-style: None}	<div>内的<ul> 元素样式
,	逗号	Div,ul{text-align: Center}	<div>和<ul>元素采用相同样式
#	Id标识符	#nav{width:100% }	Id为nav的元素样式
.	类标识符	.pic{background: url(bg.gif)}	类名为pic的元素样式
:	冒号	A:hover{#ff0}	<a>标签的hover 伪类样式
li.	标签+类	li.pic{width:24px	类名为pic的<li> 标签样式
Div #	标签+id	Div#nav{text-alig n:center}	Id为nav的<div> 标签样式
#.	Id+空格+类	#nav .prc{border: 1px}	Id为nav元素内的pic类样式
#.,	Id+空格+逗号	#nav .prc,#nav .te Xt {height:24px}	Id为nav元素内的pic和text类都采用相同样式

背景透明效果

设置背景层的颜色，通过滤镜代码“filterr:alpha(opacity=50)”,设置背景为半透明。

注：由于此代码只适用于IE浏览器，因此还需通过代码“opacity：0.5；”设置背景的半透明来兼容其他的浏览器。
相对定位和绝对定位
- 相对定位（参照原来位置）
  
  Position：relative；
  
  top：10px；left：20px；
- 绝对定位（参照父容器位置）
  
  Position：absolute；
  
  top：200px；left：150px；
叠放次序
- 语法：z-index：num
- num默认为1，值越大越靠前。
Overflow
- Overflow与a:hover伪类组合，实现二级菜单的显示或隐藏。
- Overflow与<a>标签的锚点组合，实现类似框架窗口的关联效果。
- 采用“overflow：hidden”隐藏溢出容器尺寸的内容，隐藏后不占页面空间。
网站开发流程
- 网站开发流程一般包括：需求分析，网站制作，测试网页，发布网站几个环节。
- 制作网页前一般需要使用DW工具搭建站点的目录结构。
测试兼容性的方法
- 使用DW验证标签是否符合W3C相关规范以及浏览器兼容问题
- 使用FireFox验证是否符合W3C相关规范
- 发送网址到W3C官方网站验证是否符合W3C相关规范。
解决浏览器兼容性问题的两种方法：