前端设计的几条原则
一,所以标签和属性都必须小写
二,所有标签都必须闭合。若有的标签不表示内容,如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绝对。