web

一起来复习一下HTML和CSS吧

2017-03-16  本文已影响27人  小小奶狗

HTML部分

meta可以用于跳转网页
能用css实现的,就不要用图片实现!
mete base属性已经几乎不用了

粗体尽量用语义化strong
粗体最好的选择是用CSS font-weight

斜体i,em,cite,尽量用em
斜体最好的选择是CSS font-style
指数上标用sup,下标sub

删除线s,下划线u
CSS的text-decoration
版权声明small

特殊符号表: 空格 ;
CSS缩进text-indent
inline元素里面放block元素?

有序列表,无序列表,定义列表
type=1,a,A,i,I
CSS的list-style-type
type=disc,circle,square

表格标题caption,
表头th,行头tr,单元格td对应语义化:
thead,tbody,tfoot
合并行rowspan
合并列colspan

图片src,alt,title给搜索引擎和用户看
名字不要用中文

位图(点阵图)和矢量图(向量图)
8/16/24/32位图

超链接的target:
_self
_blank,
_top
_parent(HTML框架)

内部链接、外部链接和锚点链接

常用表单元素:
input
textarea
select,option
form标签属性:
name
action
method
enctype
target

表单对象的属性:
value
size
maxlength

复选框checkbox必须配合label和其for属性使用

表单按钮
button
submit
reset

图片域: image属性
隐藏域: hidden属性
文件域: file属性,要声明编码方式enctype="multi/form-data"
多行文本框textarea: rows clos
下拉列表select+option属性:
multiple(Ctrl+鼠标左键选择多个)
size(显示的行数,其他出现滚动条)

在线音频视频用embed src
frameset框架集标签被HTML5舍弃,用浮动框架iframe和scrolling属性: auto(默认左对齐),yes,no(滚动条)

CSS部分

三种引入样式的办法: 外部样式表,内部样式表,内联样式表
注意: link在加载CSS后加载HTML
@import(先加载HTML再加载CSS)

id选择器也可以写成name,但是id是HTML的标准,name是XHTML的标准,尽量不用name。

子元素选择器,相邻选择器,群组选择器(#a,#b)

关于字体(类型,大小,粗细,斜体,颜色)
字体单位(关键字): xx-small,x-small,
small,medium,large,x-large,xx-large
字体粗细(100-900): normal,lighter,bold,
nolder
字体斜体(font-style): normal,italic,
oblique(没有倾斜属性的特殊字体)

关于文本
text-decoration取代s和u标签
(空,下划线,删除线,顶划线)
text-transform转换大小写
(none,uppercase,lowercase,capitalize)
font-variant小型大写字母
(normal,small-caps)
text-indent段落首行缩进
p段落字体14px,则text-indent: 28px
text-align文本和img水平对齐
(left,center,right)
line-height行高
letter-spacing字距
word-spacing词距

边框样式
border-width
border-color
border-style
(none,hidden,solid,dashed,dotted,double)
3D: (inset内,outset外,ridge脊,groove槽)
简洁写法:border: 1px red solid;
局部边框样式:border-bottom

背景样式
web2.0都在CSS中使用background
background-color:背景颜色
image:url()背景图像
repeat:横纵平铺
(no-repeat,repeat,repeat-x,repeat-y)
position:图像显示位置(用法margin)
top button left right
attachment:是否随内容滚动(响应式)
(默认scroll,可选fixed)

超链接伪类(必须按顺序定义4)
a:link,未访问时
a:visited,访问后
a:hover,鼠标经过
a:actived,单击激活时
:hover伪类可以定义于每个元素!

浏览器鼠标样式
cursor: pointer,default,wait,help等等。
自定义鼠标样式
cursor:url(" "),属性;

图片水平对齐用text-align,垂直对齐用vertical-align(top,middle,baseline,bottom)
文字环绕效果float(图文混排)

列表样式:
统一使用list-style-type
无序ul列表:(decimal,lower-roman,
upper-romam,lower-alpha,upper-alpha)
有序ol列表:(disc,circle,square,none)
自定义列表项符号:
list-style-image: url();

表格样式
边框合并和边框间距
border-collapse(默认sqparate,collapse)
border-spacing:(一或两个像素参数)
标题位置
caption-side(top,bottom)

CSS盒子模型(块元素和行内元素)
content-padding-margin-border四大属性
content区三属性:width,height,overflow
宽高属于内容区,不包括"补白",溢出属性用于处理超出内容区的范围
负margin重叠技术
行内变块级display:block;

浮动布局和定位布局
CSS: 正常文档流和脱离文档流
relative,absolute,fixed,
默认是静态定位static
相对定位元素始终会获得相应的空间
绝对定位和固定定位会完全脱离文档流

上一篇下一篇

猜你喜欢

热点阅读