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属性
用打开一个完整的浏览器窗口,使用 target 更通常的方法是在一个