学习前端第三天（二）

最新推荐文章于 2024-07-23 21:42:00 发布
最新推荐文章于 2024-07-23 21:42:00 发布
阅读量266 收藏
点赞数 8
文章标签： 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2202_75428540/article/details/136993307
版权

01  CSS初识

<!-- CSS
    层叠样式表： Cascading Style Sheets
            书写位置：title标签下方，style双标签，style标签里书写css代码
    

-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识 CSS</title>
    <style>
        /* CSS代码 */
        /* 选择器 {   CSS代码    } */
        /* 属性名和属性值成对出现  键值对 */
        p {
            /* 文字颜色 */
           color: red;  
           /* 字号 */
           font-size: 30px;   
        }
    </style>
</head>
<body>
    <p>体验  CSS</p>
</body>
</html>

02 CSS引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS引入方式</title>
    <!-- link引入外部样式表 -->
    <link rel="stylesheet" href="./my.css">
</head>
<body>
    <!-- 
        1.内部样式表 
                CSS代码写在stytle标签里 
        2.外部样式表
                开发使用
                CSS代码写在单独的CSS文件里（.css）
                在HTML使用link标签引入
                <link rel="stylesheet" href="./my.css">
        3.行内样式
                配合JavaScript使用


     -->
     <p>这是p标签</p>
    <div style="color: aquamarine; font-size: 30ox;">这是div标签</div>
</html>

03 选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中同名标签设置相同样式，无法差异化同名标签 */
        p {
            color: red;

        }
    </style>
</head>
<body>
    <!-- 选择器
            作用：查找标签，设置样式
    -->
    <!-- 基础选择器 
            1.标签选择器
                    使用标签名作为选择器 选中同名标签设置相同样式
            2.类选择器

            3.id选择器
            4.通配符选择器
    
    -->
<p>这是p标签</p>
<p>1111</p>
<p>22222</p>
</body>
</html>

04  类选择器

<!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>
<style>
    /* 类名见名知义 多个单词可以用-连接 */
    .red {
        color: red;
    }
    .size {
        font-size: 50px;
    }
</style>
<body>
    <!--查找标签，差异化设置标签的显示效果 -->
    <!-- 步骤
                1.定义类选择器   .类名
                2.使用类选择器   标签加  class="类名"
    
    -->
    <!-- 一个类选择器可以给多个标签使用 -->
    <p class="red">11111</p>
    <p>22222</p>
    <!-- 一个标签可以使用多个类名，class属性值写多个类名，类名用空格隔开 -->
    <div class="red size">这是div标签</div>
</body>
</html>

05  id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            #red {
                color: red;
            }

    </style>
</head>
<body>
    <!-- 作用：查找标签，差异化设置标签的显示效果 -->
    <!-- id选择器一般配JavaScript使用，很少用来设置CSS样式 -->
    <!--步骤
            1.定义id选择器   #id名
            2.使用id选择器  标签添加id="id名"
    
    -->
    <!-- 注意：同一个id选择器在一个页面只能使用一次 -->
<div id="red">div标签</div>
</body>
</html>

 06  通配符选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符选择器</title>
    <style>
        * {
            color: azure;
        }
        /*  开发项目初期清理标签样式使用*/
    </style>
</head>
<body>
    <!-- 作用： 查找页面所有标签，设置相同样式 -->
    <!-- 通配符选择器 ： *不需要调用，浏览器自动查找页面所有标签，设置相同的样式 -->
    <p>这是p标签</p>
    <div>div标签</div>
    <h1>h1</h1>
</body>
</html>

07  画盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            /* 宽度 */
            width: 100px;
            /* 高度 */
            height: 100px;
            /* 背景色 */
            background-color: red;
        }
        .orange {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <!-- 画盒子
            选择合适的选择器画盒子
            属性：
                width：宽度
                height：高度
                background-color：背景颜色    
    
    -->
<div class="red">div1</div>
<div class="orange">div2</div>
</body>
</html>

08文本控制属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字控制属性</title>
    <style>
        p {
            /* 必须带单位 */
            /* 谷歌浏览器文字有默认大小  16px */
            font-size: 30px;
        }
    </style>
</head>
<body>
    <!-- 字体大小
        font-size  常用单位px（必须带）
    
    -->
    <p>测试字体</p>
    <div>div</div>
</body>
</html>

09文字加粗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3 {
            font-weight: 400;
        }
        div {
            font-weight: 700;
        }

    </style>
</head>
<body>
    <!-- 字体粗细
        font-weight
        属性值：1.数字
                    取消加粗效果 400
                    加粗效果700
                2.关键字
                   取消加粗效果normal
                   加粗bold
    
    -->
    <h3>h3标题</h3>
    <div>div标签</div>
</body>
</html>

10  字体倾斜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体倾斜</title>
    <style>
        em {
            font-style: normal;
        }
        div {
            font-style: italic;
        }
    </style>
</head>
<body>
    <!-- 作用：清楚字体默认的倾斜效果 -->
    <!-- font-style -->
    <!-- 属性值：normal 正常不倾斜 
                倾斜：italic
    
    -->
    <em>em 标签</em>
    <div>div 标签</div>
</body>
</html>

11  行高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            font-size: 20px;
            /* line-height: 30px; */
            line-height: 2;
        }
    </style>
</head>
<body>
    <!-- 设置多行文本的间距 -->
    <!-- line-height -->
    <!-- 属性值：
                1.数字+px
                2.数字（当前标签font-size属性值的整数倍）
    
    -->
    <!-- 行高等于上间距+文本高度+下间距 -->
    <!-- 测量行高的方法：从一行文字的最底端量到下一行文字的最底端 -->
    <p> 去杭州之前，我同学给我介绍了一个杭州本地导游-阿涛，他带我们游玩，我们不仅玩的很开心，而且还在预算上节省了将近一半的费用，阿涛不仅按照我们的想法给提前规划好了4天3晚的行程，抵达杭州之前就帮我们把住宿、门票、交通等都安排好了，还负责接送站，所以我们只需要负责享受轻松的旅程就好啦。关键是，我形容江南是“好美噢~~”，阿涛他讲的江南是"江南太多味，谁不忆江南。细细来品味，时时心中安。" 看来游江南这种地方还得跟着这样专业的导游才能细细品味到水乡的风情。</p>
</body>
</html>

12 行高-垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 100px;
            background-color: skyblue;
            /* 注意：只使用单行文字垂直居中 */
            line-height: 100px;
        }
    </style>
</head>
<body>
    <!--垂直居中技巧：行高属性值等于盒子高度属性值  
            只适用于单行文字
    -->
    <div>文字</div>
</body>
</html>

13 字体组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            font-family: 楷体;
        }
    </style>
</head>
<body>
    <!-- font-family
                属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序从左向右
                属性最后设置一个字体族名，网页开发建议使用无衬线字体  sans-serif
    -->
    <div>测试字体</div>
</body>
</html>

14  font复合属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* font: italic 700 30px/2 楷体; */
            font: 30px 楷体;
            /* font: italic 700 30px/2 ; */
        }
    </style>
</head>
<body>
    <!-- 开发初期 -->
    <!-- 使用场景：设置网页文字公共样式 -->
    <!-- 复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开
    font：是否倾斜 是否加粗 字号/行高 字体 （必须按顺序写）
            注意：字号和字体值只必须书写，否则font属性不生效
    -->
    <div>测试  font 属性</div>
</body>
</html>

15 文本缩进

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <!-- text-indent  首行缩进
        属性值：
             数字+px
             数字+em（推荐  1em =  当前标签的字号大小）
    
    -->
    <p> 去杭州之前，我同学给我介绍了一个杭州本地导游-阿涛，他带我们游玩，我们不仅玩的很开心，而且还在预算上节省了将近一半的费用，阿涛不仅按照我们的想法给提前规划好了4天3晚的行程，抵达杭州之前就帮我们把住宿、门票、交通等都安排好了，还负责接送站，所以我们只需要负责享受轻松的旅程就好啦。关键是，我形容江南是“好美噢~~”，阿涛他讲的江南是"江南太多味，谁不忆江南。细细来品味，时时心中安。" 看来游江南这种地方还得跟着这样专业的导游才能细细品味到水乡的风情。</p>
</body>
</html>

16  文本对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            /* 本质：居中的是文本内容 */
            text-align:center ;
            /* text-align: right; */
        }
    </style>
</head>
<body>
    <!-- text-align
        属性值：
            left  默认
            center
            right
    
    -->
    <h1>标题文字</h1>
</body>
</html>

17 水平对齐方式-图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- text-align本质是控制内容的对齐方式，属性要设置给内容的父级 -->
    <div><img src="../课件/下载.jpg" alt=""></div>
</body>
</html>

18  文本修饰线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            text-decoration: none;
        }
        div {
            text-decoration: underline;
        }
        p {
            text-decoration: line-through;
        }
        span {
            text-decoration: overline;
        }
    </style>
</head>
<body>
    <!-- text-decoration -->
    <!-- 属性值：
                none
                underline
    
    
    -->
     <a href="javaScript:;">a 标签去掉下划线</a>
     <div>div 标签</div>
     <p>p 标签添加删除线</p>
     <span>span 标签，添加顶划线</span>
</body>
</html>

19   文本颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            background-color: #5b718d;
            /* color:red ; */
            /* color: rgb(0, 255, 0); */
            /* color: rgba(0, 0, 0, 0.5); */
            /* color: #0000ff; */
            color: #00f;

        }
    </style>
</head>
<body>
    <!-- color -->
    <!-- 颜色关键字
        rgb表示法
        rgba表示法    a表示透明度  0---1
        十六进制表示法  #RRGGBB
    
    -->
    <h1>h1 标签</h1>
</body>
</html>

小白学前端3.22
关注
  • 8
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
学习前端第三天
sinat_41143098的博客
07-14 2331
一、HTML5介绍 html5不仅仅只是作为标记语言的一个最新版本，更最要的是它制定了Web应用开发的一系列标准，成为第一个将Web作为应用开发平台的html语言。 html5定义了一系列新元素，如新语义标、只能表单、多媒体标签等，可以帮助开发者创建互联网应用，还提供了一系列JavaScript api，如地理定位、重力感应、硬件访问等，可以在浏览器内实现原生应用，甚至结合Canvas我们可以开发网页版游戏，同事结合css3的过度、转换、动画等特性，可以极大的增强用户体验，提升开发功能的可应用性。 我们日.
学习前端第二天
m0_59060850的博客
02-03 142
前端学习第二天
前端页面的简单学习与项目搭建（主要针对HTML和VUE的学习）
热门推荐
张彦峰的博客
04-09 169万+
备注：只是本人的自学与备注，自己本身不是做前端的，只是简单搭建一些前端的东西，自己玩的。 一、HTML简单的回顾 （一）HTML 基本结构 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html&...
前端学习路线（简洁清晰，直击学习途径）
m0_67911008的博客
03-30 6万+
第一阶段：前端入门 1.Html5 2.Css3 第二阶段：JavaScript ①JavaScript 基础语法 ②JavaScript 高级（WebAPI/Dom Bom） ③JavaScript 框架（jQuery） ④数据可视化（echarts） 第三阶段 服务端编程 1.node js基础 2.ajax 3.promise 4.axios 5.了解学习es6语法，http协议规则 6.TypeScript 第四阶段 Vue.js
前端学习第三天
weixin_43805192的博客
11-29 3832
第三天学习 今天是学习前端的第三天，准确的可以说是第四天因为第三天是自习，用来巩固前两天所学的前端知识，今天一上课老师就找同学上去进行例行检查，我也被叫上去了，结果就是20遍单词的抄写，接下来就是今天的教程了。 css选择器 1.后代选择器 空格 sel1 sel2 sel1里面的所有sel2 2. 子选择器 &gt; 右括号 sel1&gt;sel2 sel1下一目录下所有sel2 3. 兄弟选...
零基础学习前端的第三天
10-11
零基础学习前端的第三天
学习前端的第三天复习.rar
10-13
在学习前端开发的过程中，第三天的复习至关重要，因为这标志着你已经初步接触并理解了一些基础概念。前端开发是构建互联网应用程序的重要部分，它涉及到用户在浏览器中直接可见和交互的所有内容。下面，我们将深入...
web前端开发技术储久良第三版答案
12-09
综上所述，《Web前端开发技术储久良第三版答案》不仅包含了前端开发的基础知识，还涉及了高级技术和最佳实践，是学习和提升Web前端技能的宝贵资源。通过深入学习和实践书中的答案，开发者可以更好地掌握前端开发的...
前端学习的第04天.zip
09-22
-- 这个表格用于展示销售数据，第一列是日期，第二列是产品，第三列是销售额 --> <!-- ... --> ``` 在编辑器中，你可以利用快捷键如`CTRL+/`（在许多IDE或文本编辑器中）快速插入或删除注释，这大大提高了编写和...
前端主流框架vue学习笔记第二篇
08-29
前端主流框架Vue学习笔记第二篇 本篇文章主要讲解了使用Vue框架来实现一个简单的TODO List程序，涵盖了基本的增删改查操作，并且使用了Bootstrap来美化页面结构。下面是本篇文章的知识点： 1. Vue框架的基本使用：...
编程学习之路：从零到一的成长指南
KsuferNotes
07-22 293
在当今数字化时代，编程技能已经成为许多人职业发展的重要组成部分。不论你是已经在IT业从业多年的老手，还是刚刚起步的编程新手，这篇博客将带你走过编程学习的每一个重要阶段，从而顺利完成从零到一的华丽转变。
5.CSS学习（浮动）
ShawLee0925的博客
07-23 172
css浮动——float特点
手写简易版Spring IOC容器02【学习】
weixin_44794897的博客
07-19 573
其中applyPropertyValues用于从beanDefinition中读取属性的配置信息然后通过BeanUtil(hutool-all中提供的类)为其赋值@Overridetry {// 创建bean实例Class<?if (null!break;// 设置属性值try {// 从beanDefinition中获取property通过Resource获取文件流。
昇思25天学习打卡营第16天|munger85
MungerVC
07-20 432
MobileNet网络是由Google团队于2017年提出的专注于移动端、嵌入式或IoT设备的轻量级CNN网络，相比于传统的卷积神经网络首先安装依赖下载数据。
2024论文精读：利用大语言模型（GPT）增强上下文学习去做关系抽取任务
YxinMiracle's Studio.
07-20 1007
高引论文精度，如何利用大预言模型做关系抽取任务
MISRA C2012学习笔记(7)-Rules 8.12
赞的博客
07-20 686
为便于理解以下示例，应注意，1u 的基本类型是 unsigned char，而 1UL 的基本类型是 unsigned long。在下面这个示例中，表达式 DELAY + WIDTH 的值为 70000，但是在具有 16 位 int 类型的计算机上，该。所有这些都是合规的，但取决于 a，b 和 c 的类型，具有多个运算符的任何表达式都可能违反其他规则。，可以消除程序员的期望与事实不符的可能性。下面的示例显示具有单目或后缀运算符的表达式，其操作数是主表达式或顶级运算符具有优先级 15 的表达式。
从0开始的STM32HAL库学习6
hwq_1229_0525的博客
07-21 267
配置红色框图中的各种配置时钟源选择外部时钟 21.预分频器Prescaler，下面填0，不分频2.计数模式，计数模式选择为向上计数3.自动重装寄存器，自动重装计数器填为10，计数到10后清空并出发中断4.滤波器的频率分频：不使用影子寄存器。
学习华为IPD流程黑话2.0
最新发布
产品线负责人
07-23 368
管道管理是指根据资源需求（管道需求）尽早地对可获得性资源（管道供给）进行平衡，任何企业做研发、做产品，它的可用资源都是有限的，可以把企业的资源比喻成管道。既是对产品包进行验证，也是内部技能传递的重要环节，同时能为客户带来价值。这个时候就只需要对切片的概念做一下了解就应该可以直接应用了。而且主要做的是 C 语言，Python 也确实没具体用过。并保证在任意时刻产出的研发价值（即出口流量）的最大化，好了，这个话题就不展开来讲了，后续可以单独展开聊聊。评审的对象是新产品的业务计划，而不是产品的开发计划。
FreeModbus学习——eMBPoll轮询
rerrick_rose的博客
07-23 685
接收状态机为空闲态时（每次定时器溢出中断会将接收机状态置为空闲态），接收到一个字符，会进入串口接收中断，串口接收中断中会将接收到的字符保存作为帧首，并且把接收状态机变为STATE_RX_RCV。直到一帧结束，也就是距离下个字符超过定时器溢出时间，进入定时器中断，此时接收状态机还为STATE_RX_RCV，这就意味着接受完成了一帧。协议栈使能后，会将接收状态机赋值为初始化态，且定时器也使能，定时器进入溢出中断，会将接收状态机由初始化态变为空闲态，并且发布一个EV_READY事件。
web前端开发技术第二版代码
11-11
《Web前端开发技术第二版代码》是一本涵盖了前端开发领域的技术知识和实践经验的图书。该书包含了HTML、CSS、Javascript等前端开发的基础知识和最新的技术趋势。在书中，作者详细介绍了如何利用HTML5和CSS3创建响应...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值