html+css基础

 

一、标签(写法分为:自闭和、双闭合)。

1.格式化标签(双闭合)

<h>标题标签     作用:字体加粗、自动换行、改变大小。

<b>字体加粗

<u>加下划线

<i>斜体

<sub>下标、<sup>上标

<pre>预先格式化标签

2.有序和无序列表(双闭合)

无序:

<ul>

       <li>…</li>

</ul>

有序:

<ol>

       <li>…</li>

</ol>

3.图像标签(自闭和):<img>

<img src=…>

注:src后加图片路径,可分为:相对路径、绝对路径和远程路径。

4.超链接标签(双闭合):<a>

例如:<a href=www.baidu.com>百度</a>

5.段落标签(双闭合):<p>

<p align=”left”>html</p>左对齐

<p align=”center”>html</p>居中对齐

<p align=”right”>html</p>右对齐

6.文字标签(双闭合):<span>

7.块标签(双闭合):<div>

8.锚标签(双闭合):<a>  作用:跳转

9.表格标签(双闭合):<table>

例如:

<table border=”1” cellspacing=”0” cellpadding=”10” align=”center”>

<tr>

       <td>姓名</td>

       <td>年龄</td>

</tr>

注:border边框,cellspacing列与列间距,cellpadding列与文字间距。

10.标签框架

例如:<iframe src=”http://www.baidu.com”></iframe>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<iframe src="http://www.baidu.com"></iframe>
</body>
</html>

二、.样式的写法:

1.行内样式写法

在样式里面 有一些样式是复合样式:

border        border-width       border-style       border-color         border-left-width        border-left-style       border-left-color

<div style=" width: 200px; height: 300px; border:1px solid black;"></div>

2.内嵌样式写法

<style></style>在<head></head>和<body></body>中写都可以。

例如:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*选择器  匹配元素的*/
        /*1.基本元素选择器*/
        div{
            width: 100px;
            height: 300px;
            border: 1px solid black;
        }
        span{}
        p{}
        ul{}
        li{}
        /*2.class类名称选择器*/
        .block{
            width: 400px;
            height: 300px;
            background-color: red;
        }
        /*3.id选择器*/
        #b1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        /*4.子父元素选择器*/
        #ulmenu{
            border: 1px solid black;
        }
        #ulmenu>li{
            list-style: none;
            border: 1px solid silver;
        }
        #ulmenu li{
            color: red;
        }
        /*5.属性选择器*/
        /* div[class][id]{
             background-color: black;
         }*/
        div[class="block"][id="bb"]{
            background-color: black;
        }
        #centerBlock{
            height: 300px;
        }
    </style>
</head>
<body>
</div>
<div class="block"></div>
<div class="block"></div>
<div class="block" id="bb"></div>
<div class="block"></div>
<div id="b1"></div>
<ul id="ulmenu">
    <li>1
        <ul>
            <li>2</li>
            <li>2</li>
            <li>2</li>
            <li>2</li>
        </ul>
    </li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
</body>
</html>

3.外部样式写法

优先级:行内样式,内嵌样式,外部样式

相同样式下:按优先级

不同样式下:元素的样式上混合使用

三、定位(相对定位、绝对定位)

1.相对定位:占位置;

2.绝对定位:不占位置;

四、悬停伪类:hover

光标悬停在某字体上时,其发生的变化。

 

 

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页