前端开发指南：HTML5与CSS3知识点总结

最新推荐文章于 2024-07-13 02:10:45 发布
最新推荐文章于 2024-07-13 02:10:45 发布
阅读量2.3k 收藏 69
点赞数 6
分类专栏： Web前端 文章标签： html css html5 css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43461520/article/details/113201713
版权

好好学习，天天向上

本文已收录至我的Github仓库DayDayUP：github.com/RobodLee/DayDayUP，欢迎Star

⭐⭐⭐⭐⭐转载请注明出处！⭐⭐⭐⭐⭐

原文链接：https://blog.csdn.net/weixin_43461520/article/details/113201713

⭐⭐⭐⭐⭐转载请注明出处！⭐⭐⭐⭐⭐

HTML5新增标签

HTML5针对以前的不足，新增了一些新的标签、表单以及表单属性等。

语义化标签

之前在做布局的使用，使用了大量的div，这些div都是没有语义的，我们不能很轻易的就判断出某个div大致是什么内容，所以在HTML5中新增了语义化标签来弥补这个缺陷，现在我们可以根据标签名去推断出其大致内容，方便代码的阅读，而且使用语义化标签也可以提高被搜索引擎检索的概率。

<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签

多媒体标签

HTML5原生支持音视频文件的播放，其中音频标签和视频标签的使用方式基本一致 。

<autdio>：音频

<audio>标签支持三种音频格式，分别是MP3、Wav以及Ogg，其中MP3格式所有的浏览器都支持。

语法：
<audio src="文件地址" controls="controls"></audio>

<audio>标签常见属性👇

属性值描述
autoplayautoplay表示音频在就绪后马上播放
controlscontrols表示向用户显示控件，比如播放按钮
looploop循环播放，即每当音频结束时重新开始播放
srcurl要播放的音频的url

<video>：视频

<video>标签支持三种视频格式，分别是MP4、WebM以及Ogg，其中MP4格式所有的浏览器都支持。

语法：
<video src="文件地址" controls="controls"></video>

其中<video>标签有很多属性，比较常见的有👇

属性值描述
autoplayautoplay视频就绪自动播放(谷歌浏览器不会自动播放，需要添加muted属性来自动播放)
controlscontrols向用户显示播放控件
widthpixels(像素)设置播放器宽度
heightpixels(像素)设置播放器高度
looploop插放完是否继续播放该视频，循环播放
preloadauto(预先加载视频)
none(不加载视频)		规定是否预加载视频 (如果有了 autoplay 就忽略该属性)
srcurl视频ur地址
poster图片的url加载等待的画面图片
mutedmuted静音插放

input表单

在HTML5中，增加了一些新的input类型，使其语义化更加明显。

属性值说明
type=“email”限制用户输入必须为Email类型
type=“url”限制用户输入必须为URL类型
type=“date”限制用户输入必须为日期类型
type=“time”限制用户输入必须为时间类型
type=“month”限制用户输入必须为月类型
type=“week”限制用户输入必须为周类型
type=“number”限制用户输入必须为数字类型
type=“tel”手机号码
type=“search”搜索框
type=“color”生成一个颜色选择表单

HTML5中不仅新增了一些input类型，还新增了一些表单属性👇

属性值说明
requiredrequired表单拥有该属性表示其内容不能为空，必填
placeholder提示文本表单的提示信息，存在默认值将不显示
autofocusautofocus自动聚焦属性，页面加载完成自动聚焦到指定表单
autocompleteoff / on当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如autocomplete=“on”，关闭autocomplete="off，需要放在表单内，同时加上name属性，并且提交成功过
multiplemultiple可以多选文件提交

CSS3新增选择器

属性选择器

属性选择器可以在不用借助于类或者id选择器的情况下直接根据元素特定属性来选择元素，它的权重为10。

E[att]：选择具有att属性的E元素

<!-- 将具有value属性的按钮1中文字颜色修改为红色，按钮2因为不具有value属性，所以文字颜色没有改变 -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input[value] {
            color: red;
        }
    </style>
</head>
<body>
    <input type="button" value="按钮1">
    <input type="button">
</body>

E[att="val"]：选择具有att属性且属性值等于val的E元素

<!-- 将value属性值为 “按钮2” 的button的文字颜色修改为蓝色 -->
<head>
    <style>
        input[value="按钮2"] {
            color: blue;
        }
    </style>
</head>
<body>
    <input type="button" value="按钮1">
    <input type="button" value="按钮2">
</body>

E[att^="val"]：匹配具有att属性且值以val开头的E元素
E[att$="val"]：匹配具有att属性且值以val结尾的E元素
E[att*="val"]：匹配具有att属性且值中含有val的E元素

结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级元素选择里面的子元素。

E: first-child：匹配父元素中的第一个子元素E
E: last-child：匹配父元素中最后一个E元素
E: nth-child(n)：匹配父元素中的第n个子元素E，n也可以是关键字even偶数、odd奇数，如果直接写字母n则表示选择所有的子元素

<head>
    <style>
        ul li:first-child {
            background-color: skyblue;
        }
        ul li:last-child {
            background-color: aquamarine;
        }
        ul li:nth-child(2) {
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <ul>
        <li>欢迎关注</li>
        <li>微信公众号：</li>
        <li>Robod</li>
    </ul>
</body>

E: first-of-type：指定类型E的第一个
E: last-of-type：指定类型E的最后
E: nth-of-type(n)：指定类型E的第n个

这三个和上面三个使用起来类似，不过还是有一点区别的，nth-child是对父元素里面所有子元素排序选择(序号是固定的)先找到第n个孩子，然后看看是否和E匹配；而nth-of-type则是对父元素里面指定子元素进行排序选择，先去匹配E，然后再根据E找第n个子元素。

<head>
    <style>
        ul li:nth-child(1) {
            /* 先对ul里的所有子元素排序，找到序号为1的元素，发现是p标签而不是li，所以样式不生效 */
            background-color: skyblue;
        }
        div li:nth-of-type(1) {
            /* 先匹配对应的li元素，对li元素进行排序，排序后选择第一个li */
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <ul>
        <p>微信公众号：Robod</p>     <!-- 序号是1 -->
        <li>欢迎关注</li>            <!-- 序号是2 -->
        <li>微信公众号：</li>
        <li>Robod</li>
    </ul>
    <div>
        <p>p</p>
        <li>li1</li>    <!-- 序号是1 -->    
        <li>li2</li>    <!-- 序号是2 -->  
    </div>
</body>

伪元素选择器

有的时候我们只需要一个简单的标签，如果用HTML做的话就会使代码结构变得复杂，这时候就可以用伪元素选择器，它可以帮助我们利用CSS创建新标签元素，从而简化HTML结构。伪元素选择器有两个，分别是::before（在元素内部的前面插入内容）和::after（在元素内部的后面添加内容），需要注意的是它们创建的元素是行内元素，而且在文档树里面是找不到的，这两个选择器必须要有content属性(可以没有值)，伪元素选择器的权重是1，

<!--语法：
	element::before{}
-->
<head>
    <style>
        div {
            position: relative;
            width: 300px;
            height: 200px;
            background-color: aquamarine;
        }
        div::before {
            content: '微信公众号';
        }
        div::after {
            position: absolute;
            font-size: 30px;
            content: "Robod";
            right: 10px;
        }
    </style>
</head>
<body>
    <div>
        :
    </div>
</body>

CSS3新特性

CSS3盒模型

之前我们在定义盒子大小的时候，指定了width属性，可是盒子实际的宽度并不是width，padding和border都会将盒子撑大，也就是实际的盒子宽度是width+padding+border，而现在可以用box-sizing来指定盒模型，box-sizing属性有以下两个值。

content-box：这个是默认值，盒子的宽度是width+padding+border

border-box：盒子的大小为width属性的值

<head>
    <style>
        .box1 {
            width: 400px;
            height: 100px;
            border: 20px solid red;
            background-color: aqua;
            padding: 10px;
            box-sizing: content-box;
        }
        .box2 {
            width: 400px;
            height: 100px;
            border: 20px solid green;
            background-color: blanchedalmond;
            padding: 10px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box1">请小伙伴们给我的文章来个赞！</div>
    <div class="box2">欢迎关注微信公众号：Robod</div>
</body>

CSS3滤镜filter

filter属性将模糊或颜色偏移等图形效果应用于元素，通常用于调整图像，背景和边框的渲染。常用的几个函数如下：

filter: blur(5px) 该函数用来对图片进行模糊处理，数值越大图片越模糊
filter: contrast(200%) 调整图像的对比度，0%会全黑，100%图像不变，超过100%更低的对比度
filter: grayscale(80%) 将图像转换为灰度图像，100%完全转为灰度图像，0%图像无变化
filter: hue-rotate(90deg) 给图像应用色相旋转

还有其它的一些可以参考https://developer.mozilla.org/en-US/docs/Web/CSS/filter

calc()函数

calc()函数可以在声明CSS属性值时执行一些计算，例如：

width: calc(100% - 30px);		<!-- 表示比父盒子小30像素 -->

CSS3过渡

过渡动画是从一个状态渐渐的过渡到另外一个状态，通常和**:hover**一起搭配使用。

/*语法：*/
transition:要过渡的属性 花费时间 运动曲线 何时开始
/*参数说明 */
1、属性：想要变化的css属性,宽度高度背景颜色内外边距都可以，如果想要所有的属性都变化过渡,写一个 all 即可
2、花费时间：单位是秒(必须写单位)比如0.5s
3、运动曲线：默认是ease(逐渐慢下来，可以省略)，还可以是linear(匀速)，ease-in(加速)，ease-out(减速)，ease-in-out(先加速后减速)
4、何时开始：单位是秒(必须写单位)，可以设置延迟触发时间默认是0s(可以省略)

<head>
    <style>
        div {
            width: 50px;
            height: 50px;
            background-color: aqua;
            /* 如果要写多个属性，用逗号隔开即可 */
            /* transition: width 1s ease-in-out .5s,height 1s ease-in-out .5s; */
            /* 如果所有的属性都要过渡，写 all 即可 */
            transition: all 1s ease-in-out .5s;
        }
        div:hover {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>微信公众号：Robod</div>
</body>

2D转换

移动translation

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

/*第一个参数是x方向移动的距离，第二个参数是y方向移动的距离，可以是百分比，值可以为0但不能没有*/
transform: translate(20px,0); 
/*也可以分开写，👆的一行等同于👇两行*/
transfrom: translateX(20px);
transform: translateY(30px);

translate的优点就是不会影响到其它元素的位置，如果单位不是px而是百分比的话，表示的就是自身元素的百分比，这种移动方式对行内标签是没有效果的。

<head>
    <style>
        div:first-child {
            width: 100px;
            height: 100px;
            background-color: red;
            transform: translate(50%,20px);
        }
        div:last-child {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>

旋转rotate

2D旋转指的是让元素在二维平面内顺时针或者逆时针旋转。

<!-- rotate中度数的单位是deg，顺时针是正数，逆时针是负数 -->
<!-- transfrom: rotate(度数); -->
<head>
    <style>
        img {
            transition: all 1s;
        }
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="./images/robod.png" alt="">
</body>

现在是以元素的中心为旋转点进行旋转，这也是默认的旋转点，也可以通过transfrom-origin属性更改旋转点。

<!-- 两个参数分别是x方向和y方向的位置，可以是像素也可以是方位名词 -->
<!-- transfrom-origin: x y; -->
<head>
    <style>
        img {
            transform-origin: 50px bottom;
            transition: all 1s;
        }
        img:hover {
            transform: rotate(90deg);
        }
    </style>
</head>
<body>
    <img src="./images/robod.png" alt="">
</body>

缩放scale

缩放的意思就是可以放大和缩小，可以用scale来设置缩放，这种方式相较于直接修改宽高而言优势就是不影响其它盒子，和rotate一样，也可以通过transform-origin属性来修改缩放中心。

<!-- 第一个参数表示宽缩放为原来的m倍，第二个参数表示高缩放为原来的n倍，如果只填一个参数代表宽高同时缩放为原来的x倍
transform: scale(m,n);
transform: scale(x); -->
<head>
    <style>
        img {
            transition: all 1s;
            transform-origin: right bottom;
        }
        img:hover {
            transform: scale(.5);
        }
    </style>
</head>
<body>
    <img src="./images/robod.png" alt="">
    <p>微信公众号：Robod</p>
</body>

上述的几个转换方式是可以同时使用的，中间用空格隔开即可

transform: translate() rotate() scale()...

需要注意的是，书写顺序会影响转换的效果，比如先旋转会改变坐标轴方向，所以在同时有位移和其它属性的时候，位移要放在最前面。

CSS3 动画

动画(animation)是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果，相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

动画的基本使用

  • 动画序列

    在学习动画之前，要先明确动画序列这个概念👇

    • 0%是动画的开始，**100%**是动画的结束（0%~100%代表不同阶段的动画，都可以设置）。这样的规则就是动画序列。
    • 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
    • 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
    • 请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to” ，等同于0%和100%。

  • 1、使用@keyframes定义动画

    @keyframes 自定义的动画名称 {
    0% {
        xxxxxx；
    }
    100% {
        xxxxxxx；
    }
}

  • 2、元素使用动画

    给需要使用动画的元素添加animation-name(调用动画)以及animation-duration(持续时间)这两个属性。

    <head>
    <style>
        @keyframes robod_animation {
            0% {
                transform: rotate(0) scale(1);
            }
            to {
                transform: rotate(90deg) scale(0.5);
            }
        }
        img {
            animation-name: robod_animation;
            animation-duration: 2s;
        }
    </style>
</head>
<body>
    <img src="./images/robod.png" alt="">
</body>

常用动画属性

属性描述
@keyframes规定动画
animation所有动画属性的简写属性，除了animation-play-state属性
animation-name规定@keyframes动画的名称（必须）
animation-duration规定动画完成一个周期所花费的秒或毫秒，默认是0（必须）
animation-timing-funtion规定动画的速度曲线，默认是 “ease”
animation-delay规定动画何时开始，默认是0
animation-iteration-count规定动画被播放的次数，默认是1，还有infinite(无限循环)
animation-direction规定动画是否在下一周期逆向播放，默认是“normal”，alternate逆播放
animation-play-state规定动画是否正在运行或暂停，默认是 “running”，还有 “paused”
animation-fill-mode规定动画结束后状态，保持forwards，回到起始backwards

动画属性也可以采用简写的方式：

animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

需要注意的是，简写属性里面不包含animation-play-state

速度曲线

上面提到了一个animation-timing-funtion属性用来设置动画的速度曲线，该属性的值一共有6个：

值描述
linear动画从头到尾的速度是相同的，匀速
ease默认，动画以低速开始，然后加快，在结束前变慢
ease-in动画以低速开始
ease-out动画以低速结束
ease-in-out动画以低速开始和结束
steps()指定了时间函数中的间隔数量（步长）

前面几个都很好理解，这个步长的意思就是整个操作划分为多少步，然后一步一步执行，类似于那种一格一格的进度条的感觉，可以做一些有意思的动画。

<head>
    <style>
        @keyframes steeeep {
            from {
                width: 0;
            }
            to {
                width: 160px;
            }
        }
        div {
            width: 160px;
            overflow: hidden;
            white-space: nowrap;
            font-size: 10px;
            background-color: aqua;
            animation: steeeep 2s steps(15) backwards;
        }
    </style>
</head>
<body>
    <div>
        欢迎关注微信公众号：Robod
    </div>
</body>

3D转换

透视 perspective

在了解3D转换之前首要要明确一个概念——“透视”，电脑屏幕是二维的，我们没办法直接看到立体的东西，如果要想看到物体在Z轴上的变化，就得使用透视，透视又称视距，其实就是3D的东西投影在2D平面的效果，下图中的d就是透视，当物体不变时，透视越大，在屏幕上看到的就越小，透视越小，在屏幕上看到的就越大，所谓近大远小。透视的单位是px。

3D移动 translate3d

3D移动和2D移动类似，只不过是多了个Z轴。

/*这三个参数分别代表在xyz轴要移动的距离，z轴一般以px为单位*/
transform: translate3d(x , y , z);
/*也可以分开写*/
translate: translateX(x);
translate: translateY(y);
translate: translateZ(z);

首先给需要移动的元素的父元素添加透视，在透视固定的情况下，改变translateZ的大小，就会改变元素在屏幕上的大小。

<head>
    <style>
        body {
            perspective: 500px;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            margin: 0 auto;
            transform: translateZ(100px);
        }
    </style>
</head>
<body>
    <div></div>
</body>

3D旋转 rotate3d

3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。

transform: rotateX(45deg);	/*沿x轴正方向旋转45度*/
transform: rotateY(45deg);	/*沿y轴正方向旋转45度*/
transform: rotateZ(45deg);	/*沿z轴正方向旋转45度*/
transform: rotate3d(1,1,0,45deg);	/*沿着x轴与y轴的对角线旋转45度*/

那么哪一个方向是旋转正方向呢？这里有一个技巧，就是左手准则，左手大拇指指向某一个轴的正方向，手指弯曲的方向就是旋转的正方向，反之就是反方向。

<head>
    <style>
        body {
            perspective: 500px;
        }
        img {
            transition: all 1s;
        }
        img:hover:first-child {
            transform: rotateX(45deg);
        }
        img:hover:nth-child(2) {
            transform: rotateY(45deg);
        }
        img:hover:nth-child(3) {
            transform: rotateZ(45deg);
        }
        img:hover:last-child {
            transform: rotate3d(1,1,0,45deg);
        }
    </style>
</head>
<body>
    <img src="./images/robod.png" alt="">
    <img src="./images/robod.png" alt="">
    <img src="./images/robod.png" alt="">
    <img src="./images/robod.png" alt="">
</body>

3D呈现 transform-style

3D呈现就是用来控制子元素是否开启三维立体环境，默认是transform-style: flat(不开启)，如果想开启，可以修改为transform-style: preserve-3d。注意：代码是写给父元素的，但影响的子元素。

<head>
    <style>
        body {
            perspective: 500px;
        }
        .box1 {
            width: 200px;
            height: 200px;
            transition: all 2s;
            transform-style: preserve-3d; /*和transform-style: flat*/
        }
        .box2 {
            width: 100%;
            height: 100%;
            background-color: aqua;
            transform: rotateX(45deg);
        }
        .box1:hover {
            transform: rotateY(45deg);
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

上面代码中的例子，先看一下transform-style: flat的效果：

当鼠标移到上面的时候，先是由本来的绕x轴旋转45度的状态转换为普通的平面图，再由平面图绕y轴进行旋转，这显然不是我们想要的效果。

再来看看transform-style: preserve-3d的效果👇

现在就是三维的转换效果了，直接由绕x轴旋转45度的状态直接再绕y轴旋转45度。

浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新的版本的浏览器无须忝加。

  • -moz-：代表 firefox浏览器的私有属性
  • -ms-：代表ie浏览器私有属性
  • -webkit-：代表 safari、chrome私有属性
  • -o-：代表Opera私有属性

比如圆角属性就可以这样写👇

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

总结

好了，这就是我这段时间学习HTML5和CSS3所总结出来的一些知识点，一方面是怕我自己以后忘了可以拿来复习使用，另一方面也是希望可以帮助到一起学习的小伙伴们！

码字不易，可以的话，给我来个点赞，收藏，关注

如果你喜欢我的文章，欢迎关注微信公众号 『 R o b o d 』

本文已收录至我的Github仓库DayDayUP：github.com/RobodLee/DayDayUP，欢迎Star

⭐⭐⭐⭐⭐转载请注明出处！⭐⭐⭐⭐⭐

原文链接：https://blog.csdn.net/weixin_43461520/article/details/113201713

⭐⭐⭐⭐⭐转载请注明出处！⭐⭐⭐⭐⭐

Robod
关注
  • 6
    点赞
  • 踩
  • 69
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
css知识点总结
guchiccc的博客
12-28 1041
一．什么是css？ CSS（Cascading Style Sheets）层叠样式表，专注于页面的表现层。 二．CSS引入方式 1.行内样式 在开始标签上加style=”样式属性名1:样式属性值1;样式属性名2:样式属性值2;...” 属性 内嵌式 把所有的css样式都写在<style></style>标签内，<style></style>放在head标签内 外链式 把所有的css样式均放在一个css单独的文件里（后缀名xx.css）,在h
《HTML5与CSS3实战指南》
11-13
### HTML5与CSS3实战指南知识点详解 #### 一、HTML5基础知识 ##### 1.1 HTML5概述 - **定义**：HTML5是HyperText Markup Language（超文本标记语言）第五代版本，是用于创建网页的标准标记语言。 - **特点**： - ...
HTML5 + CSS3 编程规范：构筑清晰、可维护的代码基石
不要让努力成为一种奢望，它应该如同呼吸一样自热而然。
04-18 1764
22-3- HTML + CSS 编程规范
基于HTML5和CSS3搭建一个Web网页（四）(完结)
阿常的博客
05-21 851
基于HTML5和CSS3搭建一个Web网页（四），结束了这个网页的开发
CSS3 知识点总结：详解篇
m0_57587753的博客
01-20 2257
CSS3 是 CSS2 的升级版本，它在 CSS2 的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。 CSS3 的新特性如下： ● 新增了更加实用的选择器，例如：动态伪类选择器、目标伪类选择器、伪元素选择器等等。 ● 新增了更好的视觉效果，例如：圆角、阴影、渐变等。 ● 新增了丰富的背景效果，例如：支持多个背景图片，同时新增了若干个背景相关的属性。 ● 新增了全新的布局方案 —— 弹性盒子。 ● 新增了 Web 字体，可以显示用户电脑上没有安装的字体。 ……
前端必备之HTML基础知识点
会思想的苇草i的博客
12-03 810
前端开发涉及使用HTML、CSS和JavaScript等技术创建网页。HTML（超文本标记语言）是构建网页结构的基础，通过标签描述页面内容。作为前端开发的基础，掌握HTML能够搭建页面框架、嵌入多媒体内容和实现超链接等功能。在前端开发中，HTML扮演着至关重要的角色，是构建网页的基础和起点。
前端色彩艺术：深入解析与实战指南
球球不吃虾WHR2349博客
05-28 996
本文旨在详细剖析前端颜色相关的各个方面，从基本概念到实际应用，从颜色模式解析到具体实现策略，力求为读者提供全面而实用的前端颜色详解，帮助大家更好地驾驭颜色这一强大的设计语言，提升前端作品的艺术表现力和技术执行力。
【前端】CSS的背景设置及CSS的三大特性
一以贯之的努力 不得懈怠的人生
07-10 6831
通过 CSS 背景属性，可以给页面元素添加背景样式背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等background-color 属性定义了元素的背景颜色 一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色background-image 属性描述了元素的背景图像，实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运.....................
前端框架与库的区别：深入解析与实战指南
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-13 709
本文旨在通过详细的比较和具体的代码示例，帮助开发者理解框架与库的本质区别，以及如何在实际项目中选择和利用它们。每一种工具都有其独特的优点和适用场景，理解它们之间的差异将帮助你在未来的项目中做出更明智的选择。在我个人的开发经历中，我倾向于在新项目中使用框架，因为它们能够快速搭建起项目的基础架构，减少样板代码。在实际开发中，灵活运用框架和库，结合项目需求和个人偏好，可以构建出既高效又可维护的Web应用。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
CSS基本知识总结（HTML+CSS）
m0_54088431的博客
06-09 1082
英文全称：Cascading Style Sheets中文名称层叠样式表。给页面中的HTML标签设置样式。是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS有3种引入方式：行内式：将样式写在元素(标签)的 style属性内。（配合javascript使用）-->是当前标签中内嵌式:将样式写在 style元素内。（任意位置，通常写在head标签中）-->当前页面中外链式：通过link标签，引入CSS文件内的样式。（多个页面）-->.css文
总结：前端开发从入门到高薪中文指南.pdf
web前端开发
03-08 334
提到前端工程师，很多人的第一反应都是：那个工资高，门槛低的职业。没错，也正因如此，越来越多的人开始投入前端岗位。可是有些人似乎不太了解前端岗位为何如此高薪，认为自己看了些教程，读了几本书，...
HTML5与CSS3实战指南
05-12
### HTML5与CSS3实战指南知识点详解 #### 一、HTML5基础知识 1. **HTML5简介** - HTML5是超文本标记语言（HyperText Markup Language）的第五个主要版本，它为网页开发提供了更丰富的功能和支持。 - HTML5在保留...
css3和h5实现王者荣耀官网
08-25
《使用CSS3与H5构建王者荣耀官网：技术详解与实践指南》 在现代网页开发领域，HTML5（H5）和CSS3已经成为构建交互式、动态网页的核心技术。本项目以“仅使用CSS3和H5实现的王者荣耀官网”为例，深入探讨如何利用这...
前端最佳实践：涵盖了前端Web开发最佳实践的实用指南
02-05
总结来说，这份“前端最佳实践”涵盖了前端开发中的重要知识点，从Sass的高级使用到Vue.js的组件化开发，再到编码规范的遵循和Vuex的状态管理，旨在帮助开发者构建出高质量的前端应用。在实践中不断学习和掌握这些...
手摸手带你学CSS
Robod的博客
12-27 8775
好好学习，天天向上 本文已收录至我的Github仓库DayDayUP：github.com/RobodLee/DayDayUP，欢迎Star HTML常用标签总结 前言 在大一的时候，上过网页设计的课程，当时感觉学的还不赖，但也确实挺长时间没碰了，很多东西都忘了，所以这段时间在B站上找了视频重新学了一遍。好记性不如烂笔头嘛，所以一边学一遍做了详细的笔记，以后有什么不记得的就可以拿出来复习复习。 基础选择器 CSS中的选择器可以将HTML中的标签选择出来，然后为其设置CSS样式。 标签选择器 标签选择器.
HTML常用标签总结 [建议收藏]
Robod的博客
11-25 8605
好好学习，天天向上 本文已收录至我的Github仓库DayDayUP：github.com/RobodLee/DayDayUP，欢迎Star 1. 标题标签 <h1> </h1> … <h6> </h6> 为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题 即<h1>-<h6> 2. 段落和换行标签 段落标签：<p> </p> 在HTML标签中,标签用.
手摸手带你学移动端WEB开发
Robod的博客
02-10 3019
HTML常用标签总结 手摸手带你学CSS HTML5与CSS3知识点总结 好好学习，天天向上 本文已收录至我的Github仓库DayDayUP：github.com/RobodLee/DayDayUP，欢迎Star ⭐⭐⭐⭐⭐转载请注明出处！⭐⭐⭐⭐⭐ 链接： ⭐⭐⭐⭐⭐**转载请注明出处！**⭐⭐⭐⭐⭐ 视口 视口就是浏览器显示页面内容的屏幕区域。视口分为布局视口、视觉视口和理想视口。 布局视口 layout viewport 布局视口是移动设备的浏览器默认设置的一个视口，用于解决早期的PC端.
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值