html、css整理笔记 | 易学教程

1.表单（form） <form name="form_name" action="url" method="get|post"></form>

a.input控件---属性:type/name/value/size/readonly/disabled/checked/maxlength

（1）单行文本框--- text

（2）密码框---password

（3）单选框---radio

（4）复选框---checkbox

*******<input type="radio/checkbox" name="名称" value="值" cheched="checked"/>，同一组的单选按钮name要一致，这样才能起到单选的作用，多选按钮可以不一致

（5）普通按钮---bottom

（6）提交按钮---submit

（7）重置按钮---reset

（8）图像形式提交按钮---image

（9）隐藏域---hidden

（10）文件域---file

b.textarea控件---创建多行文本输入框

c.select控件---下拉菜单

</select>

d.组合表单

2.不同相对路径下文件的加载 ../表示上级目录，被加载文件在上级目录中../../被加载文件名；被加载文件在下级目录中文件名/文件名/被加载文件名。

3.设置表格边框的方法

（1）对table设置<table width="400" border="1" cellpadding="0" cellspacing="0" bordercolor="green"></table>,这种方法只针对table标签进行设置，但是表格中间出现双边框

（2）分别对table和table td进行设置：

table{border-right:1px solid green; border-bottom:1px solid green;}

table td{border-left:1px solid green; border-top:1px solid green;}

（3）通过设置table与table td不同的背景色设置表格边框，并且设置表格单元间的间距：

table td{backgroundcolor:#fff;}

********立体表格效果，其实就是将表格的亮边框颜色与暗边框颜色进行对比,表格自身有边框，单元格自身也有边框

凸起效果：<table width="960" border="1" bgcolor="gray" cellpadding="5" bordercolorlight="black" bordercolordark="white"></table>

凹陷效果：<table width="960" border="1" bgcolor="gray" cellpadding="5" bordercolorlight="white" bordercolordark="black"></table>

细线表格效果：将表格自身border=0；给表格设置背景颜色（细线颜色）；给表格设置单元格之间的距离（细线的粗细）；设置tr背景颜色。

16.网页布局方式

传统的网页布局采用table表格，保存格式清晰的数据

后来布局采用div+ul>li的方式代替table、tr、td

布局的核心思想是：过程

（1）分析页面结构图

（2）选择适合标签来规划内容

（3）再通过css来控制这些内容样式

布局分析：先从大的区域再到局部进行划分

4.链接的类型

链接重要的使用原则：必须是回落，有去有回-----优化相关链接

（1）内部链接当前文档与目标文档在同一站点内

（2）外部链接当前文档与目标文档不在同一站点内

（3）E-mail链接 <a href=mailto:电子邮件地址></a>

（4）局部链接跳转到同一网页或其他文档中的指定位置 --可以跳转到某个页面的的某个位置

创建：<a name="锚点名称"></a>

链接：<a href="#锚点名称"></a>

（5）空链接 <a href="#"></a>

设为首页<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.sethomepage('http://www.baidu.com')">设为首页</a>

添加收藏<a href="#" onClick="javascript:window.external.addfavorite('http://www.baidu,com','百度')">加入收藏夹</a>

（6）脚本链接单击时可运行相应的JavaScript语句

打开窗口：<a href=javascript:window.open("http://www.baidu.com")></a>

关闭窗口：<a href=javascript:window.close（）></a>

5.多媒体

（1）在网页中插入flash的方式：embed标签或通过dw自动生成object

（2）滚动字幕 marquee

6.SEO搜索引擎优化

网站结构布局优化：控制首页链接数量、扁平化的目录层次（最好三级）、导航SEO优化、面包屑导航、细节、其他（加载速度）

代码SEO优化：<title>标题、<meta keywords>关键词、<meta description>网页描述、语义化标签

7.特殊标记

blockquote 定义一个块引用，使文本缩进 cite属性指定引用来源

pre常见应用：显示计算机的源代码

8. web上支持的图片格式

GIF（图形交换格式）：最多保存256中颜色，支持透明色，支持动画效果

JPEG（联合图像专家组）：不支持透明色及动画，颜色可达1670万种

PNG（网络可移植格式）：支持透明色，不支持动画，颜色从几种至1670万种

9.同一元素三种样式优先级：内联式>嵌入式>外部式，其中嵌入式>外部式的前提是嵌入式在外部式的后面，总之遵循就近原则

内联式：<p style="color:red; background:blue"></p>

嵌入式：<style type="text/css">p{ color:red; background:blue;}</style>

外部式：<link href="style.css">

10.选择器类型

选择器{样式；}

标签选择器：html、body、p......

类选择器：.类选择器名称{css样式代码；}

ID选择器：#ID名称{css样式代码；}

交集选择器：div.special{}

分组选择器：，例如：h,p{css样式代码；}

子选择器：

（1）子元素选择器 > father>li{css样式代码；}--作用于第一代后代，两代必须连续，不能隔代使用

（2）后代选择器空格 .father span{css样式代码;} >作用于元素的第一代后代，空格作用于元素的所有后代

（3）兄弟元素选择器 h1+p {}---只能选择两个相邻兄弟中的第二个元素，+前的元素无法被选中

通用选择器：*{css样式代码；}

属性选择器：

（1）简单属性选择器 h1 [class] {} a [href][alt]{}

（2）具体属性值选择器 a [href="htttp://www.w3.org/"] ---需要完全匹配

（3）部分属性值选择器 p[class~="warning"]{}---选择class属性中包含warning(必须空格分开的词)的元素---子串匹配

（4）span[class*="cloud"]{}----选择class属性中包含子串“cloud”的所有元素----子串匹配，不要求以空格分开的词，只要连续出现即可

（5）span[class^="bar"]{}---选择class属性以bar开头的所有元素

（6）span[class$="y"]{}---选择class属性以y结尾的所有元素

（7）特定属性选择器 img[src|="figure"]{}--选择src属性以figure或figure-开头的p元素，常用语匹配语言值

伪类和伪元素选择器：可以兼容所有浏览器的伪类选择器a:hover{css样式代码；}

（1）伪类选择器：链接伪类：link 、：visited

动态伪类：focus、：hover、：active

选择第一个子元素 p：first-child----选择某元素第一个子元素的所有p元素

选择最后一个子元素p：p:last-child

根据语言选择：lang()

结合伪类 a:link:hover

（2）伪元素选择器：设置首字母样式 p:first-letter{}

设置第一行样式 p:first-line{}

设置之前和之后元素的样式 h1:before{}、h1:after{}

11.元素分类

块状元素（block）：<div><p><h1>...<h6><ol><ul><dl><table><address><blockquote><form> 另起一行，高、宽、行高、顶边距、底边距都可设置

内联元素（行内元素inline）：<a><span><br><i><strong><em><label><q><var><cite><code>和其他元素在一行，高、宽、顶边距、底边距都不可设置

内联块状元素（inline-block）：<img><input>和其他元素在一行，高、宽、行高、顶边距、底边距都可设置

12.css三大特征

层叠性：多种css样式的叠加

继承性：子标签会继承父标签的某些样式

特殊性（优先级）：行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式

!important > 内联 > ID > 伪类|类 | 属性选择 > 标签 > 伪对象 > 通配符 > 继承

内联样式表1000>ID选择器权值0100>Class选择器（属性选择器）权值0010>标签选择器权值0001>继承权值0.1

标有"!important"的权值最大；

权值相等时后出现的样式设置优先权高于先出现的样式设置；

浏览器默认的样式<网页制作者样式<用户自己设置的样式<!important

13.css伪类

:link 未被访问的链接，IE6不兼容，可用a标签

:hover鼠标指针悬停的元素，IE7+兼容

:active被激活的元素（被点击或被按下的按钮）

:visited被访问过的链接

:focus拥有键盘输入焦点的元素

伪类选择符顺序：L-V-H-A

14.css布局模型

流动模型（Flow）:默认的网页布局模式；在默认状态下，块状元素（宽度100%）自上而下按行的形式垂直排列；内联元素从左到右水平分布；

浮动模型（Float）:可以实现块状元素并排显示 float:left/right;

层模型（Layer）:可以实现元素在网页中的精确定位

15.定位

静态定位：position：static;---元素标准流默认显示方式

绝对定位：position:absolute;---实现相对于浏览器（body元素）进行定位；将元素从文档流中拖出来，利用top/bottom/left/right属性相对于最近的一个具有定位属性的父包含块进行绝对定位，如果不存在具有定位功能的父包含块，则相对于body元素，即浏览器进行绝对定位，特点如下：

（1）单一元素设置绝对定位时以浏览器（body）为基准进行定位；

（2）嵌套时，如果父盒子不进行定位，子盒子会相对于浏览器进行绝对定位；

（3）嵌套时；如果父盒子进行绝对定位，子盒子进行绝对定位，子盒子相对于父盒子的左上角进行绝对定位；

（4）设置绝对定位后，元素不占位置（脱标）；

（5）给行内元素设置绝对定位后，行内元素可转换为行内块状元素

相对定位：position:relative;---实现相对文档流的定位；表示元素在正常文档流中的偏移位置，相对位置完成的过程：先像层一样浮动起来，然后利用top/bottom/left/right属性来控制相对以前位置的移动，特点如下：

（1）仍占原来的位置

（2）以自己的位置进行相应移动（自恋型）

固定定位：position:fixed;实现相对于视图进行定位，即看到的屏幕，可以将元素固定在屏幕的某个位置，滚动条的滚动对其没有影响,特点如下：

（1）设置固定定位后，元素不占位置（脱标）；

（5）给行内元素设置固定定位后，行内元素可转换为行内块状元素

******* absolute与relative组合使用，可以实现相对于其他元素的定位,例如：将img定位于div的底部操作：（1）参照元素必须是定位元素的前辈元素<div><img href=""></div> （2）将参照元素进行相对定位 div{position:relative;}（3）将定位元素进行绝对行为 img{position:absolute;...}-----子绝父相

15.水平居中设置

行内元素：通过给父元素设置text-align:center;来实现居中设置

块状元素：（1）定宽块状元素居中：width:xxpx;margin:xxpx auto;

（2）不定宽块状元素居中：

a.利用table标签的长度自适应性，先加入table标签，然后利用定宽块元素居中（margin:0 auto;）

b.设置元素为行内元素：display:inline; 并在其父元素中设置text-align:center;

c.通过给父元素设置float进行水平居中，对于父元素：position:relative;left:50%;对于子元素： position:relative;left:-50%;

16.垂直居中设置

父元素高度确定的单行文本：通过设置父元素height与line-height高度一致来实现

父元素高度确定的多行文本：（1）插入table（包括tbody、tr、td），设置vertical-align:middle;（td中默认vertical-align:middle;）

（2）设置块级元素：display:table-cell; vertical-align:middle;该方法兼容性较差，适用在chrome/firefox及IE8以上的浏览器

17.给行内元素设置宽、高的方式--行内元素转换成块状元素的方法---脱标方法