xHtml+css学习笔记

第一节

xHTML规范

*文档方面

-必须定义文档类型(DTD)和名字控件

*标签方面

-所有标签均要小写、关闭、合理嵌套、ID不能重复

-标签属性药有值，属性值要加印号且不能为空

-图片一定要加上alt属性

-表格标签不准使用height属性,可以使用width属性

-禁止使用<embed><iframe>标签,非w3c标准

-连接不准使用target属性

*内容模型:

-body、form、blockquote仅能包含块状元素

-文本、图像、连接等内链元素不允许直接逻楼在body中,必须被p或div等块状元素包含

-内链元素不能包含块状元素

*其他内容

1:注释中的文字不能包含--

2:所有特殊符号需要用编码表示  

第二节

<块状元素>
-块元素一般是其他元素的容器元素, 快元素一般都从新行开始,它可以容纳文本、内联元素和其他块状元素，通过width和height属性可以设置其大小
，常用块元素是段落表"p"
*特例
-form标签只能容纳块元素
*疑问
-table标签是否属于块元素
常用块状元素
-div,p,table,h1~h6,ul,ol,li,dl,dt,dd,center,form
<内联元素>
-内联元素既是非块状元素,内联元素只能容纳文本或者其他内联元素, 不会独占一行,width和height属性对其不起作用,可以容纳内联元素和文本元素

xhtml共有91个标签

问题总结:
1>如何使块状元素不独占一行,使其可以并列一行
方法一:添加float属性，比如
    <div style="width:200px; height: 200px; background: red; float:left" ></div>
    <div style="width:200px; height: 200px; background: blue; float:left" ></div>
    <a href="#" style="width:200px; height: 200px; background: yellow; float:left">信息可以有限公司</a>
方法二:
2>如何使width和heigth属性对内联元素起作用
方法一:添加float属性，比如
    <div style="width:200px; height: 200px; background: red; float:left" ></div>
    <div style="width:200px; height: 200px; background: blue; float:left" ></div>
    <a href="#" style="width:200px; height: 200px; background: yellow; float:left">信息可以有限公司</a>
方法二:添加display:block样式,显示修改内联元素为块状元素
比如<a href="#" style="width:200px; height: 200px; background: yellow; float:left; display: block">x</a> 
 

第三节

<盒子模型>
*盒子模型四要素
-(content)内容  (border)边框   (padding)内边距 (margin)外边距

两个盒子上下放置  间距取上下间距最大值
    <div style="width:200px; height: 200px; background: #E16B11;margin-button: 10px;" ></div>
    <div style="width:200px; height: 200px; background: #13AB86;margin-top: 20px;" ></div>
==>20px
两个盒子左右放置  间距取左右间距之和
    <div style="width:200px; height: 200px; background: #E16B11;margin-right: 10px;float: left" ></div>
    <div style="width:200px; height: 200px; background: #13AB86;margin-left: 20px;float:left" ></div>

==>30px