HTML+CSS基础+web前端编码规范
2017-10-31 00:09
1061 查看
一.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
伪对象/伪元素选择：（E、F为基本选择器）
文字选择：E::first-letter、E::first-line
插入内容：E::before、E::after
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.样式层叠
层叠性指的是样式的优先级，当产生冲突时以优先级高的为准
权值高低：id>class>标签
优先级区分：
•1、看是否所有的选择器都选中了指定标签，如果全部选中就数权值
•2、如果没有选中，则遵循就近原则
•3、都选中同一级别，则看个体元素的权值
注：! important优先级最高，*优先级最低
三.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库
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
伪对象/伪元素选择：（E、F为基本选择器）
文字选择：E::first-letter、E::first-line
插入内容：E::before、E::after
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.样式层叠
层叠性指的是样式的优先级，当产生冲突时以优先级高的为准
权值高低：id>class>标签
优先级区分：
•1、看是否所有的选择器都选中了指定标签，如果全部选中就数权值
•2、如果没有选中，则遵循就近原则
•3、都选中同一级别，则看个体元素的权值
注：! important优先级最高，*优先级最低
三.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库
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 这几天买了很多书，最近这2个月的学习目标是：熟悉Linux、C、Python、Web前端基础(HTML、XHTML，CSS)
- Web前端开发精品课HTML CSS JavaScript基础教程第五章课后编程题答案
- 【从入门到放弃】WEB前端之HTML+CSS基础02
- html css 前端 编码规范
- Web前端开发基础 第一天（Html和CSS）
- python爬虫——web前端基础HTML+CSS
- 20150726 Web前端开发基础html+css
- 【从入门到放弃】WEB前端之HTML+CSS基础01
- Web前端开发精品课HTML CSS JavaScript基础教程第四章课后编程题答案
- Web前端开发精品课HTML CSS JavaScript基础教程第二十三章课后编程题答案
- Web前端开发精品课HTML CSS JavaScript基础教程第九章课后编程题答案
- HTML编码规范 - (WEB前端命名规范)
- Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结
- Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
- Web前端开发工具（html+css基础）
- Web前端开发规范【HTML/JavaScript/CSS】
- Web前端开发精品课HTML CSS JavaScript基础教程第六章课后编程题答案
- HTML+DIV+CSS+JSweb前端基础
- 【麦子学院】02.web前端开发之HTML+CSS基础入门
- Web前端开发精品课HTML CSS JavaScript基础教程第十三章课后编程题答案