html学习笔记2

最新推荐文章于 2024-12-07 02:13:19 发布
最新推荐文章于 2024-12-07 02:13:19 发布
阅读量343 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： html 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/manbaforever/article/details/130165873

1.css样式表的三种使用方式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内嵌式 -->
    <style>
        /* 选择器， css样式表可以由很多选择器组成，选择器就是用来选择标签并给标签添加样式 */
        a {
            color:brown;
        }

        div{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>

    <!-- 外链式 -->
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <!-- 行内式 -->
    <p style="color: red;">我是一个段落标签</p>
    <a href="http://www.baidu.com">百度</a>
</body>
</html>

2.标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        p {
            color:red;
        }
    </style>

</head>
<body>
    <!-- 标签选择器,就是以标签名开头，根据标签名来选择html文件中的标签，给标签添加样式 -->
    <p>hello world</p>
    <p>你好</p>

</body>
</html>

3.类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 类选择器，以点开头，根据类名选择标签，给标签添加样式 */
        .myp{
            color:red;
        }

        .mybg{
            background: blue;
        }
    </style>
</head>
<body>
    <p>xxxx</p>
    <p class="myp">哈哈，我是一个段落标签</p>
    <!-- 这里标签使用了两个类选择器 -->
    <p class="myp mybg">哈哈，我是一个段落标签</p>
</body>
</html>

4.层级选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div div{
            color: green;
        }

        div .box2{
            color: aquamarine;
        }

        div div p{
            color: red;
        }

    </style>
</head>
<body>
    <div>
        <div>哈哈</div>

        <div class="box2">嘻嘻</div>

        <div>
            <p>hello</p>
        </div>
    </div>
    <div>哈哈</div>
    <!-- 层级选择器不一定必须是父子关系，祖孙关系的子标签也可以找到，完成添加样式操作 -->
</body>
</html>

5.id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* id选择器, 以#开头，根据id名选择html中的标签，给标签添加样式 */
        #myid1{
            color: blue;
        }
    </style>
</head>
<body>
    <p id="myid1">哈哈</p>
    <!-- 在html文件中标签的id是惟一的，不能重复，后续js会根据id获取对应的标签对象 -->
</body>
</html>

6.组选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /* 组选择器就是多个选择器的组合,把功能的代码可以放到组选择器里面 */
        /* 这里表达的意思是定义了三个类选择器，他们都有同样的样式规则 */
        .box1, .box2, .box3 {
            width: 100px;
            height: 100px;

        }
        /* 提示：在css里面出现同样的选择器，后面的不会覆盖前面的，后面的选择器会在前面选择器的基础上追加样式 */
        .box1{
            background: red;
        }
        .box2{
            background: blue;
        }
        .box3{
            background: green;
        }

    </style>
</head>
<body>
    <!-- div.box1*3:创建三个div并且指定class属性的名字是box1 -->
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

7.伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div{
            width: 100px;
            height: 100px;
            background: green;
        }
        /* 伪类选择器就是给其它选择器添加特殊效果，表现形式为选择器后加冒号再跟上伪类名字 */
        div:hover{
            width: 200px;
            height: 200px;
            background: red;

        }
    </style>

</head>
<body>
    <div>哈哈</div>
    
</body>
</html>

8.常用的布局样式属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box{
            width:100px;
            height:100px;
            background: green;             
            /*background: url(../day07+/876740312508119373.jpg);*/
            /* 设置标签的四周边框大小 */
            /*border:5px solid red;*/
            /* 设置标签的最上面边框 */
            border-top: 5px solid red;
            border-bottom: 5px solid red;
            border-left: 5px solid blue;
            border-right: 5px solid blueviolet;
            /* 设置浮动，只能设置左浮动和右浮动 */
            /* float: right; */
        }

        .box1{
            width: 200px;
            height: 200px;
            background: blue;
        }

        .box2{
            width: 100px;
            height: 100px;
            background: yellow;
            float:left
        }

        .box3{
            width: 50px;
            height: 50px;
            background: gray;
            float:right
        }

    </style>
</head>
<body>
    <!-- 布局常用空间是div -->
    <div class="box">哈哈</div>
    <br>

    <!-- div>div*2 创建一个父div,在父div中创建两个子div -->
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>

</body>
</html>

9.常用的文本样式属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        p{
            color:red;
            font-size: 30px;
            font-weight:bold;
            font-family: "Microsoft Yahei";
            background: beige;
            text-decoration: underline;
            line-height: 100px;
            text-align: center;
        }

        span{
            color:gold;
        }

        a{
            text-decoration: none;
        }


    </style>
</head>
<body>
    <!-- span标签可以给一段文字中的其中一段数据修改样式 -->
    <p>听说下雨天音乐和<span>辣条</span>更配呦~</p>
    <a href="http://www.baidu.com">百度</a>
</body>
</html>

10.元素溢出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box1{
            width:100px;
            height:100px;
            background:red;
            /* 超出部分隐藏 */
            overflow: hidden;
             
        }

        .box2{
            width:200px;
            height:50px;
            background:greenyellow;
        }
    </style>

</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

11.显示特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width:100px;
            height:100px;
            background: ghostwhite;
                        
        }

        .box2{
            width:100px;
            height:100px;
            background: rgb(87, 87, 183);
            display: inline;
                       
        }
        
    </style>
</head>
<body>
    <div class="box1">
        哈哈
    </div>
    <p>嘻嘻</p>
    <div class="box2">
        哈哈
    </div>
    <a href="https://www.baidu.com">百度</a>
</body>
</html>

12.盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width:200px;
            height:200px;
            background:goldenrod;
            border:10px solid blueviolet;
            padding: 10px;
        }

        .box2{
            width: 100px;
            height:150px;
            background:green;
        }

        .box3{
            width: 100px;
            height:50px;
            background:gray;
            margin-top: 10px;
        }

        

    </style>
</head>
<body>
    <!-- 盒子模型设置四部分内容:1.内容大小(width,height)2.边框大小(border)3.内边距(padding)4.外边距(margin) -->
    
    <div class="box1">
        <div class="box2"></div>
    </div>

    <div class="box3"></div>
</body>
</html>

manbaforever
关注
2021-07-13 HTML基础（一）
前端卡卡西的博客
07-13 823
1.HTML文档标签 <!DOCTYPE html> <!-- HTML5网页标准声明 --> <!-- lang="网页所使用的语言" en英语 zh_CN简体中文 zh_TW繁体中文 --> <html lang="zh_CN"> <!-- 告诉浏览器当前的文档类型是HTML类型 xml xhtml --> <!-- 头部（用户不可见的部分，定义网站信息，需要加载的文件） --> <head&gt
HTML入门02
最新发布
weixin_41468241的博客
01-19 3234
a>2、双标签：h1-h6、div、文本颜色、p段落、a、ul li。5、锚点？如：div、ol、ul、li、dl、dt、dd、h1-h6。4、
前端——html（基础）
老赖的小弟的博客
03-29 2052
双标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1&gt
网页核心页面设计（第2章）
m0_48431810的博客
12-07 2438
本文针对前端html，css的一些样式组件做了详细的模版介绍，可借鉴做自己的项目
html笔记
热门推荐
jsjbdjhd的博客
11-30 1万+
你喜欢的食物：<input type="checkbox" name="sex" id="" value="鱼">鱼。<input type="text" value="username" id="" name="元素的名称"><input type="radio" name="sex" id="" value="女">女 <br>性别：<input type="radio" name="sex" id="" value="男">男。同一个页面，可以存在多个class值相同的标签-->
HTML基础--CSS样式表（一）
m0_50315078的博客
08-04 4555
HTML基础之CSS样式表（一）
HTML第四章 常用标签
qq_27924553的博客
11-23 342
1、标题标签 作为标题使用，每个标题独占一行 <head></head> 代码实战 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
HTML的学习笔记.zip
01-01
HTML的学习笔记HTML的学习笔记HTML的学习笔记HTML的学习笔记 HTML的学习笔记HTML的学习笔记HTML的学习笔记HTML的学习笔记 HTML的学习笔记HTML的学习笔记HTML的学习笔记HTML的学习笔记 HTML的学习笔记HTML的学习笔记...
一些html的学习笔记
01-03
通过自学w3cschool上的html知识和上课所学的一些html知识，然后使用markdown汇总，整理的一些笔记
基于Dockerfile构建的HTML学习笔记设计源码
10-03
本项目是一套丰富的HTML学习笔记设计源码，其核心特征在于使用Dockerfile进行构建，这是一种高效且现代的软件开发实践，通过使用Dockerfile，可以创建一个轻量级、可移植的容器环境，使得开发和运行环境保持一致，...
HTML
执妄
12-02 2516
一、网页基本信息 <!-- DOCTYPE:告诉浏览器，我们要使用什么规范 --> <!DOCTYPE html> <html lang="en"> <!--head标签代表网页头部--> <head> <!-- meta描述性标签，用来描述网站的一些信息 --> <!-- meta一般用来做SEO(搜索优化） --> <meta charset="UTF-8"> <m
html学习笔记：meta标签
weixin_51235620的博客
05-11 302
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"><!--meta标签用于设置网页源数据 属性： name：指定数据名称 charset：设置网页字符集 conten：指定数据内容 --> <meta name="Keywords" content="html5,前端开发"><!--key
html
weixin_49308607的博客
11-25 2217
HTML 第一个html程序 <!-- DOCTYPE:告诉浏览器我们要使用什么规范 --> <!DOCTYPE html> <html lang="en"> <!-- head标签代表网页头部 --> <head> <!-- meta描述性标签，它用来描述我们网站的一些信息 --> <!-- meta一般用来做SEO --> <meta charset="UTF-8"> &
html全局属性
十三阿哥的博客
05-25 1637
【代码】html全局属性。
【HTML】HTML实现简单表单验证（正则表达式、非空判断、输入框提示信息）
A Lucky Boy的博客
02-20 6333
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>练习.
征婚网站代码
weixin_45818540的博客
04-14 1274
认真的完成任务，每天多学习一点
HTML新特性，新增的语义化标签
阿牛哥的博客
12-12 439
HTML新增的语义化标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值