前端设计的几条原则

一,所以标签和属性都必须小写
二,所有标签都必须闭合。若有的标签不表示内容,如br.则<br />
三,所有属性必须用“”标记。
四,合理内嵌元素。
[b]html和css[/b]
html表示内容,css用来展现内容。
[b]Block 和inline[/b]
所有的html元素分为两类:Block和inline。Block用于组织内容,可包括其他Block元素和inline元素。如Div,table,p.Inline表示在一行中表示元素,如span,em,img.
[color=red]block 不可内嵌在inline里面[/color]<span><div></div></span>是错误的。
[b]几个重要属性id,class,title,style[/b]
id:标记元素唯一性。
class:让多个元素使用同一样式
title:添加额外信息。
用法一:abbr元素是表示完整内容。blockquote时,表示块引用内容的出错。a元素是表示地址。
用法二:一些屏幕阅读器会读取这个标签。
用法三:鼠标pop up。
style:css代替
[b]html文档结构[/b]
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内容的相关信息。

[b]head几个element[/b]
title:浏览器左上角标题
link:用于外部资源的引入.rel表示引入的内容。如:stylesheet表示css文档,shutcut ico表示ico及一些浏览器自己定义的如next,home等。href表示资源的地址。
meta:除了上面说的表明content-type以外,只要用于搜索引擎,目前google只支持description。
[b]div和span[/b]
无特别意义,主要用于组织其他html元素。div块元素,span,inline元素,当有其他更好表示语义的内联元素时,span不要用。html5里面有section和actical可以代替。
[b]css 选择器[/b]
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
[b]css原则[/b]
1.覆盖。相同,后面覆盖前面。
2.继承。
3.精确性。即越精确指明某个元素,哪个css就先使用。
[b]@rule[/b]
@import 在一个css文件中引入其他css文件
@media 显示器或者打印机
@page 打印时的页面控制
[b]通配符[/b]
*,>父子关系,+相邻关系。
[b]绝对大小和相对大小[/b]
em相对。px绝对。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值