html标记
加粗 下划 倾斜 删除
……
HTML文档中的特殊字符：
空格： < : < > : >
版权号：© 注册商标：®
图片标记：
align=”” vspace=”” hspace=”” />
说明：src=”url”图片的路径；
alt=”文本”图片无法显示时替代的文本；
title=”文本”鼠标悬停时显示的内容；
width=” px/%”设置图片宽；
height=”px/%”设置图片高；
border=”数字”设置图像边框；
align=””left ( right ) 图片靠左，文字靠右（right相反）；
top/middle/bottom 文字垂直居上、中、下（默认）；
vspace=”px”定义图像顶部和底部的空白（垂直边距）；
hspace=”px”定义图像左侧和右侧的空白（水平边距）；
提示：img的align属性只体现图片与文字之间的关系，不能改变图片在网页中的对齐方式。
如果想让插入网页中的图片居中显示，则可以设置包含标记的外层标记的align=”center”属性。如：
表格元素的属性：
表格列（单元格）的属性：
frame=””void 不要显现表格的边线；
above 只要显现出表格的上边线；
below 只要显现出表格的下边线
hsides 只显示表格的上下边线；
vsides 只显示表格的左右边线；
lhs 只显示表格的左边线；
rhs 只显示表格的右边线；
border/box 显示表格的所有边线；
rules=””rows 只显示横行的格框线；
cols 只显示直行的格框线；
all 显示全部格框线；
groups 表示列组合水平部分；
none 不显示任何格框线；
表格的结构化：
…… 表头区；
直列化表格：
align=” left/center/right”水平对齐方式；
valign=” top/middle/bottom”垂直对齐方式；
span=”数字”直列数；
bgcolor=”颜色”背景颜色；
超级链接：内容
_blank 在新窗口中打开；
_self 在自身窗口中打开（默认值）；
_parent 在上一级窗口中打开，框架会经常使用；
_top 在浏览器的整个窗口中打开，忽略任何框架；
链接类型：①内部链接、②外部链接、③E-mail链接、
④锚点链接：
创建锚点：链接目标位置内容
链接锚点：超链接对象内容
如果要跳转到其它网页的一个位置，创建超链接时的写法：
⑤空链接:
设为首页：onClick=”this.style.behavior=’url(#default#homepage)’;this.sethomepage(‘http://www.xinde https://www.360docs.net/doc/3213550642.html,’)”>设为首页
onClick=”this.style.behavior=’url(#default#homepage)’;this.sethomepage(‘http://www.xinde https://www.360docs.net/doc/3213550642.html,’)”>设为首页
添加收藏：onClick=”javascript:window.external.addfavorite(‘https://www.360docs.net/doc/3213550642.html,’,’我看频道’)”>加入收藏夹
onClick=”javascript:window.external.addfavorite(‘https://www.360docs.net/doc/3213550642.html,’,’我看频道’)”>加入收藏夹
⑥脚本链接:单击该链接可以运行相应的javascript语句。例：
关闭窗口：关闭窗口
打开窗口：打开某窗口
表单标记：
action=url(传送目标，规定当提交表单时，向何处发送表单数据)
method=”get/post”规定如何发送表单数据
name=””规定表单的名称
表单元素标记：
文本框：
注：disabled (设置为不可操作)
密码框：
单选框：
注：checked(是否被选中)
复选框：
标注内容 该标签可为input元素定义标注。for的值应与id的值相同。
男
按钮：
注：按钮类型（reset-重置表单，submit-提交表单、button-普通按钮）
图片按钮：
隐藏域：
浏览框：
表单外框：
为fieldset定义标题（写在此处）
菜单式列表框：
列表1
列表2
分组：
列表式列表框：
多行文本框：
<></p><p>初始内容……</p><p>
插入多媒体元素标记：
插入Flash动画：
…
注：wmode=”transparent”表示：使flash背景部分透明
在网页中插入Flash的方式有两种：1、使用；2、通过DW自动生成代码
滚动字幕：滚动的文字
direction=”left/right/up/down”滚动方向；
behavior=”scroll/slide/alternate”滚动方式：一圈一圈、只走一次、来回走；
loop=””循环次数，若未指定则循环不止（loop=”infinite”）
bgcolor=”” width=””height=””
onMouseOver=”this.stop()”onMouseOut=”this.start()”
scrollamount=”速度”数值越大速度赶快；
scrolldelay=”延时”走一步，停一停；
这种标记有局限性，所以现在的滚动字幕是用js.
框架：写框架时不需要写
注：noresize=”true/false”是否允许改变框架尺寸； scrolling=”yes/no/auto”滚动条显示控制；
内嵌式框架：【在网页中嵌入网页】
HTML与XHTML1.0的区别：
XHTML标签必须被正确地嵌套；
XHTML标签必须被关闭；
标签名必须用小写字母；
属性名必小写，必有值，值必加引号；
web标准：HTML/XHTML、javascript、CSS
常用长度单位：em px (pixel)
CSS一些常用属性Array字体：font-family:arial,”宋体”;
字号：font-size:20px;
字体颜色：color:#ff22cc/rgb/red;
字体粗细：font-weight:normal正常/ bolod粗体 ;
行高：line-height:150%/1.5em/30px;
CSS在网页中的应用方式：
1、内联式（行内式）：直接写在现有的标记中。
2、嵌入式：使用标签嵌入到html文件的头部
3、链接式：样式写在一个独立的.css文件中，然后在
格式如：
4、导入式：
导入式的另一个用法：将多个CSS文件导入到一个CSS文件中，这种方法很常用。
CSS选择符：
1、标签选择符：直接以html标签为选择符；
2、id选择符：【具有唯一性】以#idname{…}定义，以id=”idname”形式调用；
3、类选择符：【可多次调用】以 .name{…} 形式定义，以class=”name”形式调用；
4、通配选择符：*{…} 用于定义所有元素；【慎用】
5、包含选择符【选择符之间以空格】：e1 e2 {…} 设置选择符e1包含的e2的样式；
如：table td{…} #header li a {…} .teacher li {…}
6、选择符分组【集体控制】：选择符之间以逗号分隔，如： p, div, .waring, #sun {…}
7、标签指定式选择符：把id或class同标签选择符同时使用，中间无间隔。例：
h1#content{…} 设置id为content的h1标签的CSS样式；
p.password{…} 设置所有class为password的p标签的CSS样式；
8、组合应用：p.password, h1#content, div, #header li a {…}
可以综合应用各种选择符，例：
CSS样式的优先权：
①、样式类型：内联式 > 内嵌式 > 链接式 > @import导入式；
就近原则，作用范围越小，优先权越高；离要修饰的目标越近的样式优先权越高。
②、选择符：行内 > id > class > 标签选择符
可以用 !important语法来提升其优先权。如：p{background-color:red !important; …;}
CSS控制字体：
设置字体样式：font-style:normal [正常] / italic [斜体] ;
修饰文字：text-decoration:none [正常]/ underline [下线]/ overline [上线]/ line-through [删除线] ;
字符间距：letter-spacing:normal [默认]/ length [长度单位em/px];
单词间距：word-spacing:normal [默认]/ length [长度单位em/px];
CSS控制文本：
设置对象中文本缩进：text-indent:2em; 缩进2字符，可以为负值；
文本水平对齐方式：text-align:left/center/right;
对象中空白处理：white-space:normal / pre [换行和空白受保护]/vowrap [强制在同一行显示];
文本大小写控制：text-transform:none / capitalize / uppercase / lowercase;
注：capitalize[每单词首字母大写] / uppercase[转换成大写] / lowercase [转换成小写]
元素的垂直对齐方式：vertical-align:sub [下标]/super [上标]/ top []/ text-bottom ;
注：top [把元素顶端与行中最高元素的顶端对齐];
text-bottom [把元素的底端与父元素字体的底端对齐];
*单词：vertical adj. n. 垂直的、垂直线
伪类：选择符：伪类状态｛属性：值；｝
a.类选择符：状态｛属性：值；｝-----> a.web:visited{…}
CSS伪类控制链接：Array未访问的链接：a:link {color:#f00;}
已访问的链接：a:visited {color:#0f0;}
鼠标移到链接上：a:hover {color:#f0f;}
鼠标按下链接：a:active {color:#00f;}
设置对象在成为输入焦点（该对象的onfocus
语法格式：对象：focus{…} 例：
input:focus{font-size:14px;text-decoration:underline;color:blue;}
页面模块的常用CSS命名：
头：header 热点：hot 内容：cintent 新闻：news 下载：download
尾：footer 导航：nav 广告：banner 侧栏：siderbar 栏目：column
页面主体：main 子导航：subnav 菜单：menu 左中右：left center right
子菜单：submenu 登录条：loginbar 版权：copyright 标志：logo
页面外围控制整体布局宽度：wrapper 友情链接：friendlinks
CSS盒子模型：
盒模型主要控制四个区域：①内容content、②边框border、③填充padding(也叫内边距、内补丁)、④边界margin(也叫外边界、外补丁)
整个盒模型在页面中所占的宽度 = 左边界+左边框+左填充+内容+右填充+右边框+右边界
控制元素的尺寸：
宽度：width:100px; 高度： height:100px;
设置元素的某一个方向外边距：margin-top/right/bottom/left: 10px;
通过参数个数不同来设置元素的外边距：
margin:10px; 上下左右四个方向；
margin:10px 20px ; 上下左右；
margin:10px 20px 30px; 上左右下；
margin: 10px 20px 30px 40px; 上右下左；
设置元素的内边距：padding: 10px 20px 30px 40px; 上右下左；
属性清零：不使用通配符*，网页中用到什么选择符就都写上。例：
body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div { border: 0 none; margin: 0; padding: 0; }
ul, ol { list-style-type: none; }
边框属性：border:border-width border-style border-color ;
例：border:2px solid #ccc; 边框粗细为2像素，线型为实线，线颜色为灰色；
盒子水平居中【只需设置左右外边界为auto即可】： margin:100px auto 0;
html元素分两种：块状元素和内联元素
1、块状元素：{display:block;}
一般是其它元素的容器，可容纳内联元素和其它块状元素，块状元素排斥其它元素与其位于同一行（独占一行），可设置宽度（width:）和高度（height:）。
常见的块状元素有：div、p、body、h1~h6、dl、ul、ol、blockquote、center、form、hr、menu、table、pre等。
2、内联元素：{display:inline;}
内联元素也叫行内元素，只能容纳文本或者其它内联元素，它允许其它元素与其位于同一行，但是宽、高、行高、内外边距都不能改变。常见的内联元素：a、em、span、img、big、small、br、font、b、i、u、input、lable、select、sub、sup、textarea、var 等。
块状元素与内联元素的相互转换：
将内联元素转换成块状元素：a{display:block;}
将块状元素转换成内联元素：div{display:inline;}
CSS控制背景：
背景：background:颜色;图片;平铺方式;固定方式;位置;
背景颜色：background-color:#ccc;
背景图像：background-image:url(图像位置及文件名)
背景图像的重复方式：background-repeat: repeat; 默认值，背景图像在纵向和横向上平铺；
no-repeat; 不平铺；
repeat-x; 仅在横向上平铺；
repeat-y; 仅在纵向上平铺；
背景图像的位置：background-position:top [left/center/right] ;
center [left/center/right];
bottom [left/center/right];
x坐标 y坐标;
背景图像默认在元素的左上角显示。
背景图像的依附方式：【存在兼容性问题】
backbround-attachment:scroll默认值，背景图像是随对象内容滚动
backbround-attachment:fixed 背景图像固定（是将图像固定在屏幕的某个位置，而不是元素）兼容性：IE6只有html与body这两个元素支持这个属性值
CSS精灵：
制作翻转按钮效果的两种方法：
1、需要两张图片，一张用于正常状态（a:line{background:url(pic1.jpg)}），一张用于鼠标经过状态（a:hover{background:url(pic2.jpg)}）。
2、将上面两张图片合并成一张，设置为按钮的背景，然后将a:hover{…}背景属性向上移动相应的像素即可。
技巧：在使用图片时，能合成一张图片使用的尽量使用一张图片，这样可以减少HTTP请求。
CSS布局的三种方式：
1、默认的文档流布局方式：按默认的html元素的结构顺序显示；
2、浮动布局方式：通过设置html元素的float属性显示；
3、定位布局方式：通过设置html元素的position属性显示；
浮动float:none/left/right; 不浮动、左浮动、右浮动
如果想让多个块显示在同一行中，可以将这些块都设置为浮动，并且浮动方向相同。
清除浮动【就是去掉前面的元素浮动对父元素及后面元素的影响（布局错乱）】
属性 clear: none; 默认值，允许两边都可以有浮动对象；
left;不允许左边有浮动现象；
right; 不允许右边有浮动现象；
both;左右两侧不允许有浮动现象；
让块元素在html窗口中居中显示：margin: 0 auto;
注意：设置一个块元素为水平居中时，一般要给它设置一个宽度值，这样它的宽度才是固定不变的，否则，它默认宽度是浏览器窗口的100%宽，这样的宽度是不固定的，它会随着浏览器窗口的大小改变而发生变化。
清除浮动的方法：
浮动元素对父元素的影响：当父元素没有指定高度时，并且它的子元素有浮动，这时，这个父元素的高度不会自动适应。下面清除浮动的几种方法或解决这个问题。
1、额外标签法：在容器的末尾增加一个“clear:both;”的元素。
2、父元素使用overflow的方法：通过设置父元素overflow值设置为hidden 。
3、利用伪对象after的方法：定义一个类，使用伪对象after，控制浮动元素的影响。
网上最流行的清除浮动代码：
.clearFix: after{
clear:both;
visibility:hidden;
height:0;
line-height:0;
content:”.”;
}
定位布局：position
Position: static;静态定位，默认值；
Absolute;绝对定位，设置left/right/top/bottom，相对父级定位，无父级依据body。
Relative;相对定位，设置left/right/top/bottom，相对自身定位。
注意：当我们想使用绝对定位时，必须要具备两个条件：
①、必须给父元素加定位属性，一般建议使用position:relative;
②、给子元素加绝对定位：position:absolute; 同时要加方向属性。
CSS中溢出的使用：
属性overflow: visible; 默认值；
auto; 在必需时对象内容都会被裁切或显示滚动条；
hidden;不显示超过对象尺寸的内容；
scroll;总是显示滚动条；
HTML CSS标签属性大全 a卷标, 属性名称, 简介 批注 1、跑马灯 …普通卷动 …滑动 …预设卷动 …来回卷动 …向下卷动 …向上卷动 向右卷动 向左卷动 …卷动次数 …设定宽度 …设定高度 …设定背景颜色 …设定卷动距离 …设定卷动时间 2、字体效果
