html和css

 注释：<!--这是一段注释。注释不会在浏览器中显示。-->

一、块标签

1、<p> </p>标签，段落，p标签中不能嵌套块标签，如果嵌套了的话，解释器会自动截断p标签

2、<h1> </h1>  至<h6> </h6>标题标签，大小从大到小。

3、<hr />画一条水平线。

4、<ul> <li> </li> /ul> 列表

ul的例子1：

<ul style="list-style-type: none;padding: 0">
    <li><img src="abc.png" style="width: 100px;height: 100px"></li>
    <li><img src="abc.png" style="width: 100px;height: 100px"></li>
    <li><img src="abc.png" style="width: 100px;height: 100px"></li>
</ul>

显示效果：

ul例子2：

<ul style="list-style-type: none;padding: 0">
    <li><div style="width: 100px ;height: 100px;background-color: red;margin-bottom: 5px"></div></li>
    <li><div style="width: 100px ;height: 100px;background-color: red;margin-bottom: 5px"></div></li>
    <li><div style="width: 100px ;height: 100px;background-color: red;margin-bottom: 5px"></div></li>
</ul>

显示效果：

 

5、table

<table>
    <tr>
        <th>abc</th>
        <th>dfc</th>
    </tr>
    <tr>
        <th>abc</th>
        <th>dfc</th>
    </tr>
</table>

table的用处例1：

<table>
    <tr>
        <th><img src="abc.png"></th>
        <th><img src="abc.png"></th>
    </tr>
    <tr>
        <th><img src="abc.png"></th>
        <th><img src="abc.png"></th>
    </tr>
</table>

显示效果：

 

 

二、内联标签

<img src="xxxx"/> 图像标签，图像就是它的内容。

<a> </a>，超链接标签。

a标签属性：

#定义a标签超链接下划线属性
a{
text-decoration:none;
}

#超链接显示生效
a:link{
text-decoration:none;
color : black
}

# 点击完超链接后
a:visited{
text-decoration:none;
color: #555555;
}

#鼠标放到超链接上
a:hover{
text-decoration:none;
color: red
}

#鼠标点击超链接时
a:active{
text-decoration:none;
color: #00A000
}

　　

 

三、CSS style属性

alt：img标签定义的src加载失败时显示的内容。

style:

text-align : center,left,right 。文本类容居住，靠左，靠右

background-color:背景颜色 。背景颜色填充内容部分和padding部分。

padding: 10px 0 0 0 ，分别设置上、右、下、左 内边距。padding: 10px 20px，设置上下边距为10px，左右边距为20px。margin外边距。

list-style-type，ul和li标签用。 none无样式，disc带黑圆点。

line-height：行高、内容所占高度，边界为padding。img标签定义行高对src图片无效果，对alt加载图片失效时的文字内容有效。

background-image: url('xxxx')，背景图片，图片显示有内容觉决定

<div style="background-image: url('abc.png') ;">
</div>
# 没内容，看不见背景图片。
# 可定义高度，这样能看到背景图片
<div style="background-image: url('abc.png') ;height: 361px">
</div>

background-repeat，no-repeat ，不平铺，repeat-x横向平铺，repeat-y纵向平铺。

float： left ,right向左向右浮动，飘起来，在非float层的上面。clear：both,left,right清除浮动，紧跟浮动元素下方显示接下来的东西。

position：relative 相对定位，对其正常位置进行定位，可以left,right,top,bottom对其修改位置。absolute，固定定位，相对于static以外的第一个父元素定位，可以left,right,top,bottom对其修改位置，如果没定义这些值，那么他跟不定义position没区别。fixed，固定定位，可以left,right,top,bottom对其修改位置,如果没有定义其中任何一个值，他机会跟不定义fixed的位置在同一个位置，但是是固定的。static,正常定位，忽略left,right,top,bottom。

input文本框默认提示。<input type="text" placeholder="请输入账户" name="account"/>