HTML5 和 CSS3 提高

最新推荐文章于 2024-09-14 17:54:00 发布
最新推荐文章于 2024-09-14 17:54:00 发布
阅读量345 收藏
点赞数 1
分类专栏： web前端开发 文章标签： css3 html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61920612/article/details/122924041
版权

目录

一、HTML5 和 CSS3 提高

1. HTML5 的新增特性

请添加图片描述

1.1 HTML5 新增的语义化标签

请添加图片描述
请添加图片描述
Tips：

  • 这种语义化标准主要是针对搜索引擎的
  • 这些新标签页面中可以使用多次
  • 在IE9中，需要把这些元素转换为块级元素
  • 其实，我们移动端更喜欢使用这些标签
  • HTML5还增加了很多其他标签，后面再慢慢学

1.2 HTML5 新增的多媒体标签

新增的多媒体标签主要包含两个：

  1. 音频 < audio >
  2. 视频 < video >

使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用 flash 和其他浏览器插件。
HTML5在不使用插件的情况下，也可以原生的支持视频格式文件的播放，当然，支持的格式是有限的。

1.2.1 视频 < video >

当前< video >元素支持三种视频格式：尽量使用mp4格式
请添加图片描述
语法
请添加图片描述
常见属性
请添加图片描述

1.2.2 音频 < audio >

当前 < audio > 元素支持三种音频格式：
请添加图片描述
语法
请添加图片描述
常见属性
请添加图片描述

  • 现在很多浏览器把音频和视频自动播放禁止了

1.2.3 多媒体标签总结

请添加图片描述

1.3 HTML5 新增的 input 类型

请添加图片描述

  • 重点记住：number、tel、search 这三个
<!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>HTML5新增的input表单</title>
</head>

<body>
    <!-- 我们验证的时候必须添加form表单域 -->
    <form action="">
        <ul>
            <li>邮箱：<input type="email"></li>
            <li>网址：<input type="url"></li>
            <li>日期：<input type="date"></li>
            <li>日期：<input type="time"></li>
            <li>数量：<input type="number"></li>
            <li>手机号码：<input type="tel"></li>
            <li>搜索：<input type="search"></li>
            <li>颜色：<input type="color"></li>
            <!-- 当我们点击提交按钮就可以验证表单了 -->
            <li><input type="submit" value="提交"></li>
        </ul>
    </form>
</body>

</html>

请添加图片描述

1.4 HTML5 新增的表单属性

请添加图片描述
请添加图片描述

<!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>HTML5 新增的表单属性</title>
    <style>
        /* 修改placeholder里面字体的颜色 */
        input::placeholder {
            color: pink;
        }
    </style>
</head>

<body>
    <form action="">
        <input type="search" name="search" id="" required="required" placeholder="pink老师" autofocus="autofocus"
            autocomplete="off">
        <input type="file" name="" id="" multiple="multiple">
        <input type="submit" value="提交">
    </form>
</body>

</html>

请添加图片描述

2. CSS3 的新特性

请添加图片描述

2.1 CSS3 新增选择器

CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。

  1. 属性选择器
  2. 结构伪类选择器
  3. 伪元素选择器

2.2 属性选择器

请添加图片描述

  • 第二个是重点，必须记住
  • 类选择器、属性选择器和伪类选择器的权重都是10

2.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>CSS新增结构伪类选择器</title>
    <style>
        /* 1. 选择ul里面的第一个孩子 小li */
        ul li:first-child {
            background-color: pink;
        }

        /* 2. 选择ul里面的最后一个孩子 小li */
        ul li:last-child {
            background-color: red;
        }

        /* 3. 选择ul里面的第二个孩子 小li */
        ul li:nth-child(2) {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
</body>

</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">
    <title>CSS新增结构伪类选择器-nth-child</title>
    <style>
        /* 1. 把所有偶数的孩子选出来 */
        ul li:nth-child(even) {
            background-color: #ccc;
        }

        /* 2. 把所有奇数的孩子选出来 */
        ul li:nth-child(odd) {
            background-color: grey;
        }

        /* 3.nth-child(n) 从0开始 每次加1 往后面计算 这里面必须是n 不能是其他的字母 选择了所有的孩子 */
        .one li:nth-child(n) {
            background-color: pink;
        }

        /* 4.nth-child(2n) 选择了所有偶数的孩子 等价于even */
        .two li:nth-child(2n) {
            background-color: pink;
        }

        /* 5.nth-child(2n+1) 选择了所有奇数的孩子 等价于odd */
        .two li:nth-child(2n+1) {
            background-color: skyblue;
        }

        /* 6. 选择了第3个到最后的孩子 */
        .three li:nth-child(n+3) {
            background-color: skyblue;
        }

        /* 7. 选择了前3个孩子 */
        .four li:nth-child(-n+3) {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
    <ol class="one">
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ol>
    <ol class="two">
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ol>
    <ol class="three">
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ol>
    <ol class="four">
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ol>
</body>

</html>

请添加图片描述
区别:

  1. nth-child 对父元素里面所有孩子排列选择（序号是固定的）先找到第n个孩子，然后再看看是否和E匹配
  2. nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E 找到第几个孩子
<!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>CSS3新增nth-of-type选择器</title>
    <style>
        ul li:first-of-type {
            background-color: pink;
        }

        ul li:last-of-type {
            background-color: pink;
        }

        ul li:nth-of-type(even) {
            background-color: skyblue;
        }

        /* :nth-child() 会把所有的盒子排列序号 */
        /* 执行的时候首先看 ：nth-child(1) 之后回去看：前面div 不符合就无法实现*/
        section div:nth-child(1) {
            background-color: red;
        }

        /* nth-of-type() 会把指定元素的盒子排列序号 */
        /* 执行的时候首先看：div指定的元素 之后看：nth-of-type(1) 第几个孩子*/
        section div:nth-of-type(1) {
            background-color: blue;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
    <!-- 区别 -->
    <section>
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
    </section>
</body>

</html>

在这里插入图片描述
小结
请添加图片描述

2.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>伪元素选择器</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        /* div::before 权重是2 */
        div::before {
            /* 行内元素转换为行内块元素 */
            display: inline-block;
            /* 这个content属性是必须要写的 */
            content: '我';
            width: 50px;
            height: 50px;
            background-color: skyblue;
        }

        div::after {
            content: '小猪佩奇';
        }
    </style>
</head>

<body>
    <div>
        是
    </div>
</body>

</html>

在这里插入图片描述

2.4.1 使用场景1：伪元素字体图标

请添加图片描述

<!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>伪元素选择器使用场景-字体图标</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?ugft3w');
            src: url('fonts/icomoon.eot?ugft3w#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?ugft3w') format('truetype'),
                url('fonts/icomoon.woff?ugft3w') format('woff'),
                url('fonts/icomoon.svg?ugft3w#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        div {
            /* 子绝父相 */
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid red;
        }

        div::after {
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
            /* content: ''; */
            content: '\e915';
            color: red;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

在这里插入图片描述

2.4.2 使用场景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>伪元素仿土豆网显示隐藏遮罩案例</title>
    <style>
        .tudou {
            /* 子绝父相 */
            position: relative;
            width: 451px;
            height: 300px;
            background-color: pink;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        /* 伪元素选择器 */
        .tudou::before {
            content: '';
            /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
        }

        /* 当我们鼠标经过了土豆这个盒子 就让里面的遮罩层显示出来 */
        .tudou:hover::before {
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <img src="images/yuyan.jpg" alt="">
    </div>
</body>

</html>

在这里插入图片描述

2.4.3 使用场景3：伪元素清除浮动

之前学过的清除浮动的四个方法：
请添加图片描述
额外标签法
请添加图片描述
父级添加after伪元素
请添加图片描述

  • 只有一个冒号：是因为要照顾I8那些低版本浏览器

父级添加双伪元素
请添加图片描述

2.5 CSS3 盒子模型

请添加图片描述

<!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>CSS3盒子模型</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
            /* 默认设置 盒子最终的大小为width + padding + border*/
            box-sizing: content-box;
        }

        p {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
            /* css3盒子模型 盒子最终的大小就是width 的大小 */
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div>
        小猪乔治
    </div>
    <p>
        小猪佩奇
    </p>
</body>

</html>

在这里插入图片描述

2.6 CSS3 其他特性（了解）

  1. 图片变模糊
  2. 计算盒子宽度 width: calc 函数

2.6.1 图片变模糊 CSS3 滤镜filter:

filter 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>图片模糊处理filter</title>
    <style>
        img {
            /* blur是一个函数 小括号里面数值越大,图片越模糊 注意数值要加px单位 */
            filter: blur(5px);
        }

        img:hover {
            filter: blur(0);
        }
    </style>
</head>

<body>
    <img src="images/pink.jpg" alt="">
</body>

</html>

请添加图片描述

2.6.2 CSS3 calc 函数计算盒子宽度

calc( ) 此CSS函数让你在声明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>CSS3宽度calc函数</title>
    <style>
        .father {
            width: 300px;
            height: 200px;
            background-color: pink;
        }

        .son {
            /* 算术运算符左右两边必须有空格 */
            width: calc(100% - 30px);
            height: 30px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <!-- 要求:需要我们的子盒子宽度永远比父盒子小30像素 -->
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

请添加图片描述

2.7 CSS3 过渡（重点）

请添加图片描述
请添加图片描述

<!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>CSS3过渡效果(重点)</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 变化的属性 花费时间 移动曲线 何时开始; (后面两个可以省略)*/
            /* 如果想要写多个属性,利用逗号进行分割 */
            /* transition: width 0.5s, height 0.5s; */
            /* 如果想要多个属性都变化,属性写all即可 */
            /* 谁做过渡给谁加 */
            transition: all 0.5s;
        }

        div:hover {
            width: 400px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

请添加图片描述

2.7.1 进度条案例

<!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>CSS3过渡练习</title>
    <style>
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px;
        }

        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            /* 谁做过渡给谁加 */
            transition: all 0.7s;
        }

        .bar:hover .bar_in {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>

</html>

请添加图片描述

3. 课后作业

请添加图片描述

3.1 课后作业1-购物格模块

参考文章：https://blog.csdn.net/Cherish_hyx/article/details/110224680

3.1.1 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">
    <title>课后作业1-购物格模块</title>
    <link rel="stylesheet" href="xm.css">
</head>

<body>
    <div class="father">
        <!--1. 图片模块 -->
        <div class="pic">
            <img src="images/huawei.jpg" alt="">
        </div>
        <!-- 2. 标题 -->
        <p class="text">华为/HUAWEI P50 Pro 骁龙888 4G全网通 原色双影像单元 万象双环设计</p>
        <!-- 3. 价格 -->
        <div class="price">
            <span class="miaosha">￥6988</span>
            <span class="origin">￥6488</span>
        </div>
        <!-- 4. 进度条 -->
        <div class="progressbar">
            <span>已售</span><span class="red">87%</span>
            <div class="bar">
                <div class="bar_in"></div>
            </div>
            <span>剩余</span><span class="red">29</span><span>件</span>
        </div>
        <!-- 5. 立即抢购链接 -->
        <a href="#">立即抢购</a>
    </div>
</body>

</html>

3.1.2 CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: #f3f5f7;
}
.father {
    width: 300px;
    height: 470px;
    margin: 100px auto;
    background-color: #fff;
}
/* 1. 图片模块 */
.pic {
    width: 280px;
    height: 280px;
    background-color: skyblue;
    margin: 0 auto;
}
.pic img {
    width: 100%;
    height: 100%;
}
/* 2. 标题 */
.text {
    margin: 10px;
    color: #050505;
}
/* 3. 价格 */
.price,
.progressbar,
a {
    margin: 10px;
}
/* 4. 进度条 */
.miaosha {
    font-size: 20px;
    font-weight: 700;
    color: #e4393c;
}
.origin {
    font-size: 14px;
    color: grey;
    text-decoration: line-through;
}
.bar {
    display: inline-block;
    width: 130px;
    height: 13px;
    border: 1px solid #bd2716;
    border-radius: 10px;
    padding: 0.5px;
}
.bar_in {
    width: 87%;
    height: 100%;
    background-color: red;
    border-radius: 10px;
}
.progressbar span {
    font-size: 14px;
    color: grey;
}
.progressbar .red {
    color: red;
}
/* 5. 立即抢购按钮框 */
a {
    display: block;
    width: 280px;
    height: 50px;
    background-color: #bd2716;
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
    text-decoration: none;
}

3.1.3 效果图

在这里插入图片描述

3.2 课后作业2-logo过渡切换

参考文章：https://blog.csdn.net/Cherish_hyx/article/details/110245958

<!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>课后作业2-logo过渡切换</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?nwmc59');
            src: url('fonts/icomoon.eot?nwmc59#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?nwmc59') format('truetype'),
                url('fonts/icomoon.woff?nwmc59') format('woff'),
                url('fonts/icomoon.svg?nwmc59#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        .show {
            position: relative;
            width: 60px;
            height: 60px;
            background-color: #ff6a00;
            margin: 100px auto;
        }

        .box {
            position: absolute;
            left: 5px;
            top: 5px;
            width: 120px;
            height: 60px;
            margin: auto;
            /* background-color: skyblue; */
            transition: all .5s;

        }

        span {
            font-family: 'icomoon';
            font-size: 50px;
            color: #fff;
        }

        .box:hover {
            left: -50px;
        }
    </style>
</head>

<body>
    <div class="show">
        <div class="box">
            <span class="first"></span>
            <span class="second"></span>
        </div>
    </div>
</body>

</html>

请添加图片描述

@ Salt
关注
专栏目录
HTML5+CSS3
weixin_51166863的博客
07-03 1869
HTML5+CSS3入门笔记
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6401
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
HTML5和CSS3提高
surx123456的博客
02-23 3078
nth-child（n）里面的n可以是数字（选择第n个子元素，从1开始）、关键字（even偶数，odd奇数）、公式（从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）nth-of-type 会把指定的盒子排列序号，执行时候先看 div指定的元素 之后看 ：nth-of-type（1）第几个盒子。nth-child会把所有的盒子都排列序号，执行的时候首先看 ：nth-child（1） 之后回去看前面div。增加了一些新的标签，新的表单，新的表单属性，IE9+以上版本的浏览器才支持。
HTML5 + CSS3
坏蛋阿土的博客
10-29 8558
HTML指的是超文本标记语言(HyperText Markup Language)，它是用来描述网页的一种语言。 HTML不是一种编程语言，而是一种标记语言(markup language)。 标记语言是一套标记标签(markup tag)。所谓超文本，有2层含义∶ 1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。 2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本)。网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的。浏
万字讲解——基于HTML5和CSS3搭建一个Web网页
阿常的博客
05-21 2242
万字讲解——基于HTML5和CSS3搭建一个Web网页（总结）
HTML5+CSS3+JavaScript从入门到精通【文末送书】
一键难忘的博客
05-23 7474
第二，对图书内容进行了深度更新、优化，如优化了内容布置，弥补了讲解疏漏，将开发环境和工具更新为新版本，增加了对新技术点的剖析，将项目替换为更能体现当今IT开发现状的热门项目等，使其更与时俱进，更适合读者学习；全书共计有205个应用实例，141个编程训练，81个综合练习，1个项目案例，为初学者打造“学习+训练”的强化实战学习环境。读者对象：初学编程的自学者，编程爱好者，大中专院校的老师和学生，相关培训机构的老师和学员，进行毕业设计的学生，初、中级程序开发人员，程序测试及维护人员，参加实习的“菜鸟”程序员。
HTML5+css3课后习题【一】
缘友一世的博客
11-04 8835
因为静态网页的访问速度快，所以现在互联网上的所有网站都是静态网页组成的。（✖️）大多数网页是动静混合模式。“HTTP”是一种详细规定了浏览器和万维网服务器之间互相通信的规则。（✔️ ）在Web标准中，表现是指网页展示给访问者的外在样式。（ ✔️）在网页中，层叠样式表指的是JavaScript。（✖️ ）CSS所有的浏览器对同一个CSS样式的解析都相同，因此页面在不同浏览器下的显示效果完全一样。（ ✖️）结果不一样。
HTML5+CSS、CSS3基础知识点总结
热门推荐
m0_51981718的博客
11-05 1万+
一、选择器 选择器分为基础选择器和复合选择器两大类。 基础选择器由单个选择器组成 基础选择器包括：标签选择器、类选择器、id 选择器和通配符选择器（*） 标签选择器 优点 标签选择器可以把某一标签全部选择出来，快速为同类型标签设置统一样式。 缺点 不能设置差异化样式，只能选择全部当前标签。 id 选择器与类选择器的区别 类选择器可以被多个元素调用。 id 选择器只能允许一个标签调用。 类选择器使用的较多，id 选择器用于唯一特性的标签。 基础选择器 作用 特点 使用情况 用法 标签选
h5(html5)+css3+移动端前端
weixin_58997863的博客
07-12 6390
h5(html5)+css3+移动端前端 知识点详细总结
html5+CSS3总结
ttttsuki的博客
01-24 1632
html5+CSS3总结 一、html5概述 html5是构建web内容的一种语言描述方式，适用于描述网页文档，被认为是互联网的核心技术之一。 二、html5基础 1.html5文档基本格式：包括<!DOCTYPE>文档类型声明、<html>根标记、<head>头部标记、<body>主体标记。 <!DOCTYPE html> <html lang="en"> <head> ​ <meta charset="
HTML5 CSS3 chm中文参考手册_html5_CSS3_css3.chm_参考手册_
10-04
HTML5和CSS3是现代网页开发的两大核心技术，它们极大地扩展了网页的展现力和交互性。本资源提供了一份详尽的中文参考手册，旨在帮助开发者深入理解和运用这两种技术。 HTML5是HTML（超文本标记语言）的最新版本，它...
HTML5+CSS3网页设计模板(30例)zip
03-15
HTML5和CSS3是现代网页设计的两大核心技术，它们为创建功能丰富、视觉吸引人的网页提供了强大的工具。这个"HTML5+CSS3网页设计模板(30例)"压缩包文件包含了一系列现成的设计模板，适合初学者和专业设计师用于学习和...
css3-doraemon.rar_html5_html5 css3_html5画哆啦a梦
09-20
总的来说，这个“CSS3+HTML5画哆啦A梦”的项目不仅展示了HTML5和CSS3的强大功能，也体现了开发者创新和趣味性的结合。通过这样的实践，我们可以更好地理解和掌握这些技术，同时也能激发更多关于网页设计的灵感。无论...
HTML5+CSS3期末大作业——城市简介源码
05-05
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富、视觉效果吸引人的网页提供了强大的工具。在这个“HTML5+CSS3期末大作业——城市简介源码”项目中，学生或开发者将有机会实践这两门技术，构建一个...
《无懈可击的Web设计——使用HTML 5和CSS 3提高网站的灵活性与适应性（第3版）》
07-05
《无懈可击的Web设计——使用HTML 5和CSS 3提高网站的灵活性与适应性（第3版）》是一本深入探讨现代Web设计技术的权威书籍，它聚焦于如何利用HTML 5和CSS 3这两项核心技术来构建响应式、易用且功能丰富的网站。...
Layout 布局组件快速搭建
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
09-13 1434
Layout 布局组件快速搭建： 1. 设置主题样式变量 2. 封装公共布局组件 3. 经典布局 4. 水平布局 5. 响应式布局 6. 搭建 Layout 布局组件 7. 添加 Layout 路由配置 8. 启动项目
HTML5全面知识点
A_cot的博客
09-10 1178
HTML（HyperText Markup Language）是构建网页的基础语言。版本历史：从 HTML 的早期版本发展到现在的 HTML5，功能不断增强，支持更多的多媒体和交互特性。定义：HTML 是一种用于描述网页结构的标记语言，通过各种标签来定义网页的内容和布局。
HTML概述
最新发布
探索软件工程的奥秘
09-14 288
HTML超文本标记语言，其中超文本是链接，标记也叫标签（即带尖括号的文本）。
基于HTML5的下拉刷新效果
在无知中学习，在学习中成长，在成长中学习
09-11 630
基于HTML5的下拉刷新效果
HTML5和CSS3响应式设计实战指南
Web设计：HTML5和CSS3实战 本书《Web设计：HTML5和CSS3实战》是为读者提供了一本全面深入的Web设计指南，涵盖了当前Web设计中热门的响应式设计技术与HTML5和CSS3的结合应用。本书适合各个层次的Web开发和设计人员...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值