首页 > 代码库 > xHtml+css学习笔记
xHtml+css学习笔记
第一节
xHTML规范
*文档方面
-必须定义文档类型(DTD)和名字控件
*标签方面
-所有标签均要小写、关闭、合理嵌套、ID不能重复
-标签属性药有值,属性值要加印号且不能为空
-图片一定要加上alt属性
-表格标签不准使用height属性,可以使用width属性
-禁止使用<embed><iframe>标签,非w3c标准
-连接不准使用target属性
*内容模型:
-body、form、blockquote仅能包含块状元素
-文本、图像、连接等内链元素不允许直接逻楼在body中,必须被p或div等块状元素包含
-内链元素不能包含块状元素
*其他内容
1:注释中的文字不能包含--
2:所有特殊符号需要用编码表示
-必须定义文档类型(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="http://www.mamicode.com/#" 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="http://www.mamicode.com/#" style="width:200px; height: 200px; background: yellow; float:left">信息可以有限公司</a>
方法二:添加display:block样式,显示修改内联元素为块状元素
比如
<a href="http://www.mamicode.com/#" style="width:200px; height: 200px; background: yellow; float:left; display: block">x</a> -块元素一般是其他元素的容器元素, 快元素一般都从新行开始,它可以容纳文本、内联元素和其他块状元素,通过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="http://www.mamicode.com/#" 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="http://www.mamicode.com/#" style="width:200px; height: 200px; background: yellow; float:left">信息可以有限公司</a>
方法二:添加display:block样式,显示修改内联元素为块状元素
比如
第三节
<盒子模型>
*盒子模型四要素
-(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>
*盒子模型四要素
-(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
xHtml+css学习笔记
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。