html+css基础

最新推荐文章于 2024-11-19 20:40:54 发布

weixin_43661654

最新推荐文章于 2024-11-19 20:40:54 发布

阅读量137

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43661654/article/details/84032270

一、标签（写法分为：自闭和、双闭合）。

1.格式化标签（双闭合）

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

<b>字体加粗

<u>加下划线

<i>斜体

<sub>下标、<sup>上标

<pre>预先格式化标签

2.有序和无序列表（双闭合）

无序：

<ul>

</ul>

有序：

<ol>

</ol>

3.图像标签（自闭和）：<img>

注：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>

例如：

<tr>

</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

2.内嵌样式写法

例如：

<!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

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