web前端编写注意点
1.
在语义不明显,既可以用 <P> 也可以用 <div> 的地方,尽量用 <P> ,因为 <P> 默认情况下有上下间隔,去样式后的可读性更好,对兼容特殊终端有利;
2.
如果漏写 DTD 声明, Firefox 仍然会按照标准样式来解析网页,但在 IE 中(包括 IE6、IE7、IE8)就会触发怪异模式;
3.
少使用子选择器,就需要多添加 class ;
4.
CSS Sprite “图片翻转技术” —— 将多张图片合并为一张,然后利用 background-position 属性来展示需要的部分. 是否使用 CSS Sprite 主要取决于网站流量;
5.
块级元素: div、p、form、ul、ol、li
行内元素: span、strong、em
块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度;
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不
下,才会换行,其宽度随元素的内容而变化;
6.
块级元素可以设置 width、height 属性;
行内元素设置 width、height 属性无效;
7.
块级元素可以设置 margin 和 padding 属性。
行内元素只有水平方向的 margin 和 padding 产生边距效果;
8.
块级元素和行内元素的 CSS 相关属性是 display ,其中块级元素对应于
display : block ,行内元素对应于 display : inline。 可以通过修改 display
属性来切换块级元素和行内元素;
9.
CSS中有一个用于竖直居中的属性 vertical-align ,但只有当父元素为
<td> 或 <th> 时,这个 vertial-align 属性才会生效;
<td> 标签默认情况下就隐式地设置了 vertical-align 的值为 middle ;
web前端编写注意点的更多相关文章
- 《编写高质量代码--Web前端开发修炼之道》读书笔记
前言 这两周参加公司的新项目,采用封闭式开发(项目成员在会议室里开发),晚上加班到很晚,所以没时间和精力写原创博客了,今天就分享下这篇<编写高质量代码--Web前端开发修炼之道>读书笔记吧 ...
- web前端学习(2):开始编写HTML
在第一章中,我们初步了解了上网的过程,同时也明白了所谓网页,其本质就是主要用HTML语言所写的一份文档.相信大多数人在了解HTML文件前,最先接触的是利用"记事本"所写的文档或者是 ...
- 《编写高质量代码:Web 前端开发修炼之道》 笔记与读后感
编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...
- 编写高质量代码:Web前端开发修炼之道(一)
最近老大给我们买来一些技术方面的书籍,其实很少搬着一本书好好的完整的看完过,每每看电子档的,也是打游击式的看看这章,瞅瞅那章,在那5本书中挑了一本比较单薄的<编写高质量代码web前端开发修炼之道 ...
- Web前端性能优化——编写高效的JavaScript
前言 随着计算机的发展,Web富应用时代的到来,Web 2.0早已不再是用div+css高质量还原设计的时代.自Gmail网页版邮件服务的问世开始,Web前端开发也开启了新的纪元.用户需求不断提高,各 ...
- Web前端温故知新-CSS基础
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...
- 也许你需要点实用的-Web前端笔试题
之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...
- web前端面试试题总结---html篇
HTML Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器 ...
- 关于大型网站技术演进的思考(二十一)--网站静态化处理—web前端优化—下【终篇】(13)
本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别 ...
随机推荐
- NodeJS优缺点及适用场景讨论
概述:NodeJS宣称其目标是“旨在提供一种简单的构建可伸缩网络程序的方法”,那么它的出现是为了解决什么问题呢,它有什么优缺点以及它适用于什么场景呢? 本文就个人使用经验对这些问题进行探讨. 一. N ...
- Load Mental Ray in Maya 2015
In Maya 2015, we usually use mental ray to render our model, some new users may not see the mental r ...
- JDBC链接oracle已经mysql的测试
1.链接oracle package cn.itcast.mybatis.dao; import java.sql.Connection;import java.sql.DriverManager;i ...
- BizTalk动手实验(五)Map开发测试
1 课程简介 通过本课程熟悉Map的相关开发与测试技术 2 准备工作 熟悉XML.XML Schema.XSLT等相关XML开发技术 新建BizTalk空项目 演示 3.1 基本操作 打开MapDev ...
- svn服务配置和日常维护命令
Subversion独立服务和与apache整合服务. 一 .Svn独立服务安装 操作系统: Redhat Linux AS3 AS 4 ContOS AS 4 安装包获取: 下载[url]ht ...
- 用refresh控制浏览器定时刷新
package cn.itcast.response; import java.io.IOException; import java.util.Random; import javax.servle ...
- .htaccess 重写去index.php
.htaccess 重写去index.php <IfModule mod_rewrite.c>RewriteEngine onRewriteCond %{REQUEST_FILENAME} ...
- setInterval对某个数值加加渐减
decrease_time = setInterval(decrease_opacity_val,10); function decrease_opacity_val(){ showID.style. ...
- Centos 6.5升级到Git2.1.2
安装需求 # yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel# yum install gcc pe ...
- switch多分支语句
1.switch多分支语句的语法 switch(表达式){ case 常量值:要执行的语句; break; case 常量值:要执行的语句; break; case 常量值:要执行的语句; break ...