1109HTML学习

<div>
<!--face里面用逗号隔开表示 字体优先选择。size是字体1到7 -->
<font color="red" face="微软雅黑,宋体" size="7">PHP的html学习</font>
<!-- ul是无序列表 ol是有序列表(前面有排序)
ul的type属性有三种,disc默认实心圆,circle空心圆,square方块。
Ol的默认值为,1默认值为阿拉伯数值,a小写英文,A是大写英文,i小写英文,I是大写罗马序号-->
<ul type="square">
<li>这是一个列表项1</li>
<li>这是一个列表项2</li>
</ul>
<ol type="a">
<li>这是一个ol项</li>
<li>这是一个ol项</li>
</ol>
<!-- noshade显示颜色为纯色,size厚度 -->
<hr size="10" noshade="noshade" width="100%" align="center">
<!--
&gt >
&lt <
&quot ""
&reg 注册商标符
&copy 版权符
&amp &符号
-->
<em>这是一个元素
&gt ;
&lt ;
&quot ;
&reg 注册商标符;
&copy 版权符;
&amp </em>

</div>

--------------------------------------------------------------

./   当前目录。  ../上一级目录  ../../上一级目录的上一级目录  /当前根目录

<frameset rows="30%,70%" >
<frame src="./a.html" name="top" noresize="noresize" />
<frameset cols="40%,*">
<frame src="./b.html" name="left" noresize="noresize" />
<frame src="./a.html" name="right" noresize="noresize" />
</frameset>
</frameset>
<noframes>
<body>
<h1>您的浏览器不支持框架</h1>
</body>
</noframes>

--------------------------------------------------------------

div+css 使网页表现与内容分离。
文档头:HTML 1.0 Transitional (过渡类型) 比较宽容的一种类型。

行内式:<h1 style="color:red;background:">...
内置式:
<style type="text/css">
h1{
color:red;
}
</style>
导入式:
<style type="text/css">
@import"mystyle.css";
</style>
链接式:
<link href="mystyle.css" ref="stylesheet" type="text/css">
---------------------------------------------------------------
class .
id #
(交集选择器)div.special div#special
并集选择器:p,h1{}
后代选择器:p font{}
* 代表所有

css优先级:行内样式>ID样式>类别样式>标记样式
---------------------------------------------------------------
介绍文字和图像的排版:
css文字样式:
准备网页:
设置字体:
文字大小:
行高:
文字颜色与背景颜色:
文字加粗、倾斜与大小写
文字的装饰效果:
文字的水平对齐方式:
文字布局:
短路的垂直对齐方式:
文本缩进:text-indent:px % cm 如果值是负数,则向左,-9999则是一种隐藏。
文本对齐:text-align: left right justify (两端)
色彩: color:#FFFFFF red rgb(0,0,255)
字体:font-family Arial
字体大小:font-size
字体粗细: font-weight normal bold(700) bolder 比normal 粗 lighter比normal细
字体修饰:text-decoration underline(下划线) line-through (删除线) overline (上划线)text-decoration="none"
大小写: text-transform :capitalize uppercase lowercase
行高: line-height 单行文本高度
写在style里面。
----------------------------------------------------------
css中背景的处理:
背景固定:background-attachment scroll 背景随对象滚动,fixed背景固定。
背景颜色:background-color
背景图像:background-image :url(图片路径)
背景定位:background-position top center bottom left center right -100px;-100px;
背景重复:background-repeat no-repeat repeat-x repeat-y
背景: background:url(../images/taotao.jpg) #990000 repeat-x 100px 50px; 横向重复
(只要针对图片不能铺满整个屏幕)

body{
height:1000px;
background-image:url();
background-color:
background-repeat:
background-attachment:fixed
}
盒子模型: margin: Border: Padding:Content

margin/padding 的简写:
方法是按照规定的顺序,给出2个或者3个或者4个属性值,他们的含义是将有区别。
如果给出2个属性值,前者表示上下边框的属性,后者表示左右边框的属性。
如果给出3个属性值,前者表示上边框的属性,中间的数值表示左右边框的属性,后者表示下边框的属性。
如果给出4个属性值,一次表示上、右、下、左边框的属性,即顺时针排序。

边框: 属性:
border-color:red green
border-1px 2px 3px;
border-style:dotted (点划线) dashed 虚线 solid (实线) double(双重线)
border:1px solid #FF0000;

 -----------------------------------------------------------

css定位:
position :static (默认) absolute relative fixed
Static 没有特别设置 对z-index无效
Absolute 使用left right top bottom 等属性相对于最接近的一个最有定位设置的父对象进行绝对定位。
Relative 使用left right top bottom 父对象进行相对定位z-index
width :100px
hei ght:100px
position:absolute
left:5px;
z-index:10px
----------------------------------------
position 为fixed的时候,当浏览器为IE6的时候,浏览器失效。
z-index块与块的层级关系。
div在没有设置层级关系的时候,谁写在后面谁就在上面。
例如:
<div z-index="-9999~9999">数字越大,层级越大,越容易覆盖其他元素。设置成负数的时候要注意,可能会导致会导致表单无法点击,默认值为0

list:
ul属性。 list-style-type:disc circle square
list-style-image:url();
list-style-position:outside(默认情况) Inside.与前面序列号的绑定。

css溢出:
Overflow:
hidden
scroll
auto
visible:
overflow-x overflow-y:

兼容问题。IE6较为特殊。
<!--[if !IE]><!-->除IE外都可识别<!--<![endif]>-->
IETest来解决浏览器兼容工具。或者开发人员工具。debugBar

原文地址:https://www.cnblogs.com/smartyman/p/4085141.html