一.HTML页面骨架
1.常用html标签:
文件标记标签:head、title、body
排版标记标签:p、br、hr、center、div
字体标记标签:stronger、b、i、u、H1、H2、H3、H4、H5、H6、font
清单标记标签:ol、li、ul、dl、dt、dd
表格标记标签:table、tr、td、th
表单标记标签:form、input、select、option、textarea
框架标记标签:iframe(页内框架)、frameset(设定框架)、frame
超链接标签:a
其它标签:embed(插入声音或影像)、img、link、meta、marquee(跑马灯)
2.html的头为<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
Html5的头为<!DOCTYPE HTML>
二. CSS页面样式
1.css特点:丰富的样式定义、易于使用和修改、多页面应用、层叠、页面压缩
2.css语法由三部分构成:选择器、属性和值 exp: selector{property: value}
3.选择器分类:
四大基本选择器:
通配符选择器:*{property:value}
标签选择器:标签名{property:value}
id选择器:#id名{property: value}
class选择器:class名{property: value}
注:挂类法
类就是被重用的
一个标签可以有多个类
一个类可以用在多个标签上
三大复杂选择器:
后代选择器格式:E F{property:value}
交集选择器格式:EF{property:value} 如:div.classname{}
并集选择器格式:E,F,G{property:value}
三个非常用选择器:(E、F为基本选择器)
子元素选择器: E>F{property:value}选取符合F选择器的所有E子元素
直接相邻选择器:E+F{property:value} 选取与紧随E元素的下一个符合F选择器的元素
普通相邻选择器:E~F{property:value} 当前选中E元素后的所有符合F选择器的元素
伪类选择:(E、F为基本选择器)
伪对象选择器主要是对当前选择的内容进行操作
例:超链接选择::link、:visited、:hover、:active
第一个子元素:E:first-child
结构性伪类:
:last-child
:nth-child
:first-of-type
:last-of-type
:nth-of-type
:empty
伪对象/伪元素选择:(E、F为基本选择器)
文字选择:E::first-letter、E::first-line
插入内容:E::before、E::after
属性选择器
具有某个属性 [属性名]
属性为指定的值 [type="checkbox"]
属性值包含某个字符串 [href*="example"]
属性值以空格分割后包含某个字符串 [lang~="zh-cn"]
属性值以某个字符串开头 [href^="http:"]
属性值以某个字符串结束 [href$="jpg"]
4.属性
•背景:background-color、background-image、background-repeat、background-position:center
•文本:text-indent、text-align、word-spacing、letter-spacing、text-decoration、color、direction、line-height
•字体:font-family、font-size、font-style、font-weight
•列表:list-style、list-style-image、list-style-type
•内边距:padding-top、padding-right、padding-bottom、padding-left
•外边距:margin-top、margin-right、margin-bottom、margin-left
•边框:border、border-style、border-width、border-color
•定位:position、top、right、bottom、left、overflow、z-index、float
•尺寸:width、height、max-height、max-width、min-height、min-width
margin属性:
塌陷现象:通过margin设置外边距的时候,如果重叠,则取大值
Margin和padding如何区别使用:兄弟元素用margin,父子元素用padding
注意点:
如果父子元素设置内边距,用margin来做,margintop是会存在问题
解决方式1)给父盒子设置一个边框即可
2)添加overflow属性,值位hidden
5.css继承性
后代元素对文本样式设置的基本属性才能被继承(颜色color\样式text\字体font\行属性line)
所有关于对于盒子模型(div、span等)的属性设置(border、定位、布局)都不能被继承
6.样式层叠
6.1样式根据规则来源,优先级从低到高:
浏览器预设用户设置
网页样式
含 !important 的网页样式
含 !important 的用户设置
6.2 层叠性指的是样式的优先级,当产生冲突时以优先级高的为准
6.3 权值高低:id>class>标签
6.4 优先级区分:
三.web前端编程规范
1html.命名规范:
①Html class名统一用小写的字母、数字和下划线的组合
②页面文件名命名规则:
首页统一取名为:index或者home,一般默认都是用index为首页命名
其他子页面统一用英文翻译或者中文拼音取名,但是不建议英文和中文拼音混合使用
2.图片文件命名:
放在页面首部的广告、装饰图等长方形大图取名:banner
标志性图片取名:log
有链接的图片取名:button
没有链接的标题图片取名:title
装饰用的照片取名:pic
在页面上连续出现、性质相同的栏目图片取名:menu
3.js命名规范
自定义js文件模块:模块.描述.js格式,如:check.js(校验)、login.js、regist.js、pop.js(跳转)
公用文件模块:commom.js或者basic.js
外部资源模块:Jquery.min.js、Jquery.js
4.文件目录规范
js:存放编写的js文件
css:存放编写的css文件
image:存放需要使用的图片文件
flash:存放需要使用的flash文件
media:存放需要使用的多媒体文件,包括视频和音频
library:存放一些库文件,包括js库和css库
根据规则来源,优先级从低到高:
浏览器预设用户设置
网页样式
含 !important 的网页样式
含 !important 的用户设置