XHTML规则

yantaoliu2006

浏览: 88296 次
性别:
来自: 北京

最近访客更多访客>>

wangyy

chengpeng_2015

牧夫天文

suncong1024

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

以正确的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
注释书写规范/*................*/
每个选择器的样式独占一行
每一类的选择器的样式放在一起
派生选择器安派生层数在前面加ＴＡＢ键空格
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　第七章　盒模型
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优缺点

分享到：