HTML初识

最新推荐文章于 2024-05-03 16:09:15 发布

Tw368WJZ

最新推荐文章于 2024-05-03 16:09:15 发布

阅读量163

点赞数

分类专栏： html 样式

本文链接：https://blog.csdn.net/Tw368WJZ/article/details/79381887

版权

html 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

样式

2 篇文章 0 订阅

订阅专栏

HTML初识

1.什么是html

超文本标记语言
</>
标记分两种:单标记 双标记
标记特点:要闭合 大小写不敏感 有属性
标记语法<标记名 属性名="属性值"/>
双标记语法<前标记名 属性名 = "属性值"></后标记>

html模板
1.版本控制
2.html文档控制
3：文档包含头部(head)和身体(body)
4：头部包含编码格式(meta utf-8)和标题（title）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第一天</title>
    <!-- style标记是在html文档中创建一块书写css的区域 -->
    <style>
        div{
            border: 10px red solid;
        }
        span{
            border: 2px blue solid;
        }
    </style>
</head>
<body>
    <!-- body内部只允许包含标签 -->
    <div>asdasdasda1</div>
    <div>asdasdasda2</div>
    <div>asdasdasda3</div>
    <span>我是span1</span>
    <span>我是span2</span>
    <span>我是span3</span>
</body>
</html>

2.css层叠样式表单

css语法：
    样式名称:样式值;

样式：
    边界：
        border：给当前标记设置边界(默认上下左右)
        border-left: 给当前标记设置左边界
        border-right: 给当前标记设置右边界
        border-top: 给当前标记设置上边界
        border-bottom: 给当前标记设置下边界

        border-width: 给当前标记设置边界粗细 ex:1px
        border-left-width: 
        border-right-width: 
        border-top: 
        border-bottom: 


        border-color: 给当前标记设置边界颜色 ex:red
        border-left: 
        border-right: 
        border-top: 
        border-bottom: 

        border-style: 给当前标记设置边界的类型  ex:dotted
                    solid 实线
                    dotted 点状线
                    dashed 虚线
        border-left: 
        border-right:       
        border-top:
        border-bottom: 


        组合写法：
        border:border-width border-color border-style

3.常用css引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入外部文件的标记 可以引入多个样式表-->
    <link rel="stylesheet" href="index.css"/>
</head>
<body>
    <div>我是div</div>
</body>

3.文本样式

     文本颜色 color:颜色值; 
     文本位置 text-align:left(靠左对齐，默认) | right(靠右对齐) | center(居中对齐); 
     字号大小 font-size:;单位是px 
     文本修饰 text-decoration:underline(下划线)| line-through(中划线)

     div{
    border: 1px red solid;
    width: 400px;
    height: 400px;
    color: yellow;
    text-align: center;
    font-size: 40px;
    text-decoration: line-through;
}

4.样式-尺寸

     width:样式标签的宽度 单位是px
     height:样式标签的高度 单位是px 
     尺寸样式 块级标签支持，行级标签不支持

5.选择器优先级

        选择器的优先级
        1：标签(名)选择器
        2：id选择器
        3：class选择器
        4：后代选择器

        优先级
        1：相同选择器，样式冲突的情况下，后面覆盖前面

        标签(名)选择器优先级是1
        类选择器的优先级是10
        id选择器的优先级是100
        style行间样式的优先级是1000

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级</title>
    <style>
        #div1{
            border: 10px red solid;
        }
        .div1{
            border: 2px black solid;
        }

        div div div div div div div div div div div{
            border: 2px red solid;
        }

    </style>
</head>
<body>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div style="border:1px yellow solid;" class="div1" id="div1">
                                                我是div11
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

6.1基础选择器-后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        /*基础选择器-后代选择器*/

        #div1 .div5{
            border: 1px red solid;

        }
    </style>
</head>
<body>
    <div id="div1">
        <div>
            <div>
                <div>
                    <div class="div5">
                        wo shi div5
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

6.2类选择器

        一个标记可以起多个class名，建议不超过7个
        所有的div都需要3px red solid,但是第三个div,要求颜色是蓝色的
        优点：可以减少代码冗余，把相同样式的标记总结在一起
        缺点：会略微的破坏html结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        .hongse{
            border: 3px red solid;
        }
        .wangermazi{
            border: 5px gold dotted;
        }
        .lanse{
            border: 3px blue solid;
        }

    </style>
</head>
<body>
    <div class="hongse zhangsan lisi wangermazi">我是div1</div>
    <div class="hongse">我是div2</div>
    <div class="lanse">我是div3</div>
    <div class="hongse">我是div4</div>
</body>
</html>

6.4id选择器

        #id名称{}
        特点：唯一性
        优点：可以逐个控制标记，互相的样式的不影响
        缺点：唯一性，冗余代码多。
        使用场景：JS钩子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        #liergou{
            border: 3px red solid;
        }
        #wangdamao{
            border: 10px black dashed;
        }
        #datupiaozi{
            border: 6px gold dotted;
        }
    </style>
</head>
<body>
    <div id="liergou">我是div1</div>
    <div id="wangdamao">我是div2</div>
    <div id="datupiaozi">我是div3</div>
    <!-- id一定要唯一 -->
    <span id="liergou">我是span</span>
</body>
</html>