当前位置: 代码迷 >> HTML/CSS >> XHTML规约
  详细解决方案

XHTML规约

热度:506   发布时间:2013-07-04 11:45:32.0
XHTML规则
以正确的DOCTYPE和名字空间开始
使用的meta内容元素声明你的内容编码语言
用小写字母写所有的元素和属性名称
给所有属性值加引号
给所有属性赋值
关闭所有标签
用空格和斜杠关闭标签
不要在注释内容中使用“--”
把所有符号编码化

CSS样式表调用方式
1、利用@import引入
例如:<style type="text/css">
@import:url(将引入的样式表的路径/文件名.css);
      </style>
2、基本的命名规范
页眉:header
容器:container
版权:copyright
主导航:mainMenu
标志:logo
标题:title
图标:icon
搜索:search
登陆:login
信息框:message
内容:content
页脚:footer
导航:menu
子导航:subMenu
标语:banner
侧边栏:sidebar
按钮:btn
链接:link
3、每个选择器的样式独占一行
   这样能够大幅度的缩减代码的行数,便于查找选择器
  
   每类选择器的样式放在一起
    可防止重复定义,方便后期的维护

    派生选择器按派生层数在前面加tab键空格
     多少层就加多少个tab键,这样可使代码层次清楚

4、text-indent:2em;段前缩进
5、块级元素标签
address 地址
center 居中对齐块
dl     定义列表
h1     大标题
h3     3级标题
h5     5级标题
hr     水平分隔线
ol     排序表单
pre    格式化文本
ul     非排序列表
div    常用块级容器,也是CSS layout的主要标签
form   交互表单(只能用来容纳其他的块级元素)
noframes -frames可选内容,(对于不支持frames的浏览器显示此区块内容)
noscript 可选脚本内容(对于不支持script的浏览器显示此区内容)
blockquote 块引用
dir     目录列表
fieldset form控制组
h2       副标题
h4       4级标题
h6       6级标题
menu     菜单列表
p        段落
table    表格
内联元素:
a          锚点
acronym    首字
big        大字体
br         换行
dfn        定义字段
font       字体设定(不推荐)
img        图片
kbd        定义键盘文本
q     短引用
strike     中划线
sub        下标
var        定义变量
tt         电传文本
samp       定义范例计算机代码
code       计算机代码(在引用源码的时候需要)
span       常用内联容器,定义文本区块
abbr       缩进
b          粗体
small      小字体文本
cite       引用
em         强调
i          斜体
input      输入框
label      表格标签
s          中划线(不推荐)
strong     粗体强调
sup        上标
tesxtarea  多行文本输入框
u          下划线
select     项目选择
font字体
font 可选
   可选

       _____________|____________
       |            |           |
font:italic    small-caps     bold
       | |
     font:style    font-weight
       | font:variant    |
       |____________|___________|
   必选

       _____________|____________
       |            |           |
       |                        |
    34px/100px; |
       |    |                   |
       |line-height          font-family
       |
   font:style
                                             2012年04月10号
网站的基础知识
web前端工程师简介
网站的三成结构 ( 数据层  逻辑/业务层  表现层)
表现层  (结构层  表现/样式层   行为层  )
<html>
<head>
<body>
<title>
<div>
<style>
png     支持透明
bmp   无压缩格式
gif      支持透明,动画
jpeg   质量好,但不支持透明
pdf    可以做印刷的影印格式
psd    ps的基本格式
分辨率指的是单位长度中所具有的像素数目
                                       2012年04月11号  html的入门知识
<link herf="css/main" rel="stylesheet" type="text/css"
<meta name="keywords" content="美食,尽享圣诞温情,吃尽巴渝美食,重庆美食,重庆火锅,水果拼盘,重庆小吃,重庆有哪些特色小吃" />

pre 预编辑(带格式)
hr 标签 在文章和文章之间的线
cite 标签 (定义引用)使用的是斜体字
br  换行标签
<i></i>斜体字
<sub>平方公式
<sup>脚本公式H2O
dl
dt
dd
表单标签
from
input
select
option
button
表格
table
tr标签
td标签
th标签  表格头
caption标签   标题
cellpadding边距  bordercolorlight亮面   bordercolordark阴面 colspan跨行 rowspan跨列
<meta name="  robots" content="none">
content参数  all  index  noindex   follow   none nofollow。默认的值是all。
<meta name="  auther" content="Kidlts">
<meta http-equiv="expires"  content="Fri,12 Jan 2001">期限设置
<meta http-equiv="Pragma"  content="no-cache">
<meta http-equiv="X-UA-Compatible"  content="IE=IE7/8/9/6">
<Link href=“sion.ico”rel="Shortcut  Icon">
<Base href="http://www.taobao.com" taeget="_blank">
                                         2012年04月12号
内嵌  优点(权重高) 缺点 (结构混乱 代码臃肿 个别中断 显示混乱)                              
内部样式  优点(重构性高优先加载)缺点(html代码臃肿 不会缓存 样式文件)
外部样式标签<link rel ="stylesheet" href="文件路径".css type="text/css"优点(重构性高 代码简洁) 缺点(网络差时 加载页面 可能连接)
针对当前的页面有效<style type="text/css">样式规则表<style/>
<style type="text/css">@import  url(将引入的样式表路径/文件名.css);</style>(样式表中导入其他的样式)优点(重构性高 代码简洁)缺点(继承外部 调用缺点 最后加载)
                                                                                                               

                                 css的写法要点
selectors{property(属性):value(值);}
font-style:字体风格;
                                                                                                              概要

                               作用                                      优势                                     特点
标签                      默认初始化               一次可以定义全页面所有的标签             权重最低 其他样啊是可以覆盖

ID
派生选择器:可以使用派生选择器给一个元素里的子元素定义样式。
标签:权重固定为1
类:权重固定为10
ID:权重固定为100
派生选择器:权重为内含所有选择器权重之和。
伪类:link vistited(访问过后是什么样子的) active(访问之前是什么样子)  hover (鼠标移到是什么颜色)
文件名的规范 : global
框架布局
字体样式
链接样式
打印样式
初始样式:
页眉:header
容器:container
版权:copyright
主导航:mianMenu
标志:logo
标题:title
图标:icon
搜索:search
登陆:login
信息框:message
内容:content
页脚:footer
导航:menu
子导航:subMenu
标语:banner
侧边栏:sidebar
注释:note
按钮:btn
链接:link
网页外面的整体布局的宽度:wrapper
loginbar
注释书写规范/*................*/
每个选择器的样式独占一行
每一类的选择器的样式放在一起
派生选择器安派生层数在前面加TAB键空格
                               第七章 盒模型
content(内容)  border(边框)   padding(内间距)  margin(外间距)
上下的距离会叠加的。


                                                                                               2012年04月14号   什么是内联元素与垮元素
内联元素(inlline() element)又叫行内元素、行级元素
垮元素的分类
1、结构化
2、终端垮状
3、多目标
  结构化:特点:没有语义化含义:仅仅划分出了文档的组织方式
  终端:结构转向内容,都有语义含义。不能包含其他的垮元素,只能包含文本和行级元素
  <blockquote>断录引用
  多目标:可以自由扩展或嵌套文档的结构,但是不能同时包含2种元素,受限制。
  <noscript>弹出输入框
  垮元素的 特点就是独占一行。
      内联元素与垮元素的特点
block块级元素的特点:
      总是独占一行,高度 行高 及顶、底边距都可以控制,宽度缺省是他所在容器的100%除非设定一个宽度

inline内联元素的特点:
      和其他元素都在一行上,高度 行高 及顶 底边距都可以不变,高度就是他所容纳的文字或图片的宽度 不可以改变。
块元素(block element)通常作为其他元素的容器,它可以容纳内联元素和其他元素。
  div:是同是加载的,
  table:最后加载
                             块状元素的标签明细
address:地址
center居中对奇块
di:定义列表
h1:大标题
h3:3级标题
h5:5级标题
hr:水平分割线
ol:排序列表
pre:格式化文本
ul:非排序列表
div:常用块级容易
form:交互表单(只能用来容纳其他元素)
nofranes-frames:可选内容(对于不支持的frame的浏览器显示此区内容)
blockquote:快引用
dir:目录列表
fieldest-form:控制组
h2:副标题
h4:4级标题
h6:6级标题
menu:菜单列表
p:段落
table:表格
                                              内联元素标签明细
a:描点
acronym:首字
big:大字体
br:换行
dfn:定义字段
font:字体设定
img:图片
kbd:定义键盘文本
q:短引用
strike:中划线
sub:下标
var:定义变量
tt:电传文本
samp:定义范例计算机代码
code:计算机代码(在引用源代码的时候需要)
span:常用的内敛容器
abbr:缩写
b:粗体
small:小字体文本
cite:引用
em:强调
i:粗体
input:输入框
label:表格标签
s:中划线(不推荐)
strong:粗体强调
sup:上标
textarea:多文本输入框
u:下划线
select:项目选择
块元素:上下排列,内联元素:左右。
border:groove red
这样写也能行啊。
                                                                                                       概要
有序列表(ul)    无序列表 (ol)    定义列表(dl)      其他列表  列表的实例讲解
dl

  type的li前面的装饰:square方点   circle圆圈   disc圆点  I(罗马字母) type=  list-style-image:在li前面加上小图标。
   有序列表

                                                                                                      概要

什么是浮动
三块元素
块元素与内联元素
盒模型Z轴3D示意图
盒模型相关样式详解
盒模型的布局
float none left
坐标判断float(文档流)
    clear属性的参数
   both:秦楚所有浮动
   left:清楚左浮动
   right:清楚有浮动
   none:不清楚浮动
浮动与内敛元素的区别
                      浮动                                            内联元素
共同点   取消块元素的换行属性 可以让块元素到同一行
不同点   可以左右浮动
             浮动可以是块
             可以含块元素
                                                                                            2012年04月16号
排版  概要
字体样式(单位有 em(以倍数增加) px  pt(棒))   文字样式  段落大小   行高设置   首字下沉   图文混排
normal  bold bolder lighter(细的)
font-variant 字体大小写:
(font-style:  font-weight:) font-variant: line-height: font-family: font-size:。
文字样式:text-align:left     text-align:right      text-align:center   text-align:justify(两端对齐)    text-align:inherit继承父元素祖元素

text-decoration:underline(下划线)     text-decoration:overline(上划线)       text-decoration:line-through(中划线)    
   text-decoration:blink(字体连接的跳动)     text-decoration:normal(删除线)
text-Shadow(文字阴影)
段落:Robert Bringhurst的方法(文字大小*30,也即是360;)
   行高就是用来限制行与行的距离(一般就只是在文字大小)后面+6
   首字下沉
                                                                                                      背景偏移与实例

北京的属性
北京的定位,及背景偏移。
背景偏移量技术的应用。
background-postion:背景图片的位子
background-repeat:背景图片是否重复
background-attachment:fixed: 背景图是否随页面滚动
背景会占据背景的所有元素和内容包含padding和border
                                                                            overflow的样式详解
overflow属性的作用:
vidible溢出 hidden隐藏 scroll滚动条 auto
                                                                              
                                                                        2012年04月17号   绝对定位和相对定位
position的五个值:ststic    relative   absolute   fixed   inherit
ststic :显示方式为按文本流的顺序从上至下,从左到右顺序显示。
relative:偏移了原来的文本流的最初位子。
absolute:产生了偏移,脱离文本流。进入了该层的父容器的坐标原点,要在div的属性里面加上一个relative才有效果的。
inherit:继承
fixed :浮动广告
                                                                              概要  css hack
主流浏览器
以盒模型宽度差异为列讲述浏览器的兼容问题
css hack表
css hack优缺点
  相关解决方案