`
xff1874
  • 浏览: 4863 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

前端设计的几条原则

    博客分类：
  • html
 
阅读更多
一，所以标签和属性都必须小写
二，所有标签都必须闭合。若有的标签不表示内容，如br.则<br />
三，所有属性必须用“”标记。
四，合理内嵌元素。
html和css
html表示内容，css用来展现内容。
Block 和inline
所有的html元素分为两类：Block和inline。Block用于组织内容，可包括其他Block元素和inline元素。如Div，table,p.Inline表示在一行中表示元素，如span,em,img.
block 不可内嵌在inline里面<span><div></div></span>是错误的。
几个重要属性id,class,title,style
id:标记元素唯一性。
class:让多个元素使用同一样式
title:添加额外信息。
用法一：abbr元素是表示完整内容。blockquote时，表示块引用内容的出错。a元素是表示地址。
用法二：一些屏幕阅读器会读取这个标签。
用法三：鼠标pop up。
style：css代替
html文档结构
1.刚开始是申明。表示html版本，语言，及浏览器渲染html的模式。如xhtml-strict.dtd,xhtml-transitional.dtd.若是未指明，浏览器会默认用quirk mode渲染。html5中只要<!DOCTYPE html>即可
<html xml:lang="en">表明html所用语言。与lang的不同是，这个属性，必须定义为xhtml doctype时才可用。中文ZH。
2.content-type和charset
  表明文件的MIME类型。html的类型为text/html.css,text/css.gif,imges/gif.
通常写在head里面的meta元素。原则：1.先时header里面的charset，然后是meta的，最后根据正文内容。header里面可以在服务器上的.htaccess设置。
   head，表明html内容的相关信息。

head几个element
title：浏览器左上角标题
link:用于外部资源的引入.rel表示引入的内容。如：stylesheet表示css文档，shutcut ico表示ico及一些浏览器自己定义的如next,home等。href表示资源的地址。
meta：除了上面说的表明content-type以外，只要用于搜索引擎，目前google只支持description。
div和span
无特别意义，主要用于组织其他html元素。div块元素，span，inline元素，当有其他更好表示语义的内联元素时，span不要用。html5里面有section和actical可以代替。
css 选择器
1.html 选择器。即html元素。如p，h3等
2.id选择器 #id
3.class  .class  id和class 以字母和下划线开头。h3.class 表明只用于h3
4.Group 选择器。表示多个元素用同个css，用逗号，区分。p，.class,#id{....}
5.内嵌选择器，表示范围 p h3{} 表示段落p下面的h3
css原则
1.覆盖。相同，后面覆盖前面。
2.继承。
3.精确性。即越精确指明某个元素，哪个css就先使用。
@rule
@import 在一个css文件中引入其他css文件
@media 显示器或者打印机
@page 打印时的页面控制
通配符
*,>父子关系,+相邻关系。
绝对大小和相对大小
em相对。px绝对。
分享到：
| string replace 函数
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics