HTML5+CSS3基础（day17）

最新推荐文章于 2024-08-27 17:15:42 发布
最新推荐文章于 2024-08-27 17:15:42 发布
阅读量91 收藏
点赞数
文章标签： css3 html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52372037/article/details/128750762
版权
本文介绍了CSS的初始化方法，包括清除内外边距、设置字体和鼠标样式等。接着，详细讲解了HTML5中的新特性，如语义化标签（header,nav,section等）、视频和音频标签的使用，以及新的input表单类型。此外，还探讨了CSS3的新选择器，如属性选择器、结构伪类选择器（nth-child）以及伪元素选择器的应用。
摘要由CSDN通过智能技术生成

一、CSS初始化在这里插入图片描述

示例：京东CSS初始化

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0
}

/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}

/* 去掉li的小圆点 */
li {
    list-style: none
}

img {
    /* border: 0 照顾低版本浏览器 如果 图片外边包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过 button按钮的时候 鼠标会变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}

/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0;
}

.clearfix {
    *zoom: 1
}

二、HTML5和CSS3提高

1.HTML5和CSS3提高导读在这里插入图片描述

2.HTML5在这里插入图片描述

（1）HTML5提高-新增语义化标签在这里插入图片描述在这里插入图片描述在这里插入图片描述

示例

<title>HTML5新增语义化标签</title>
    <style>
        header,
        nav {
            height: 120px;
            background-color: pink;
            border-radius: 15px;
            width: 800px;
            margin: 15px auto;
        }

        section {
            width: 500px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <header>头部标签</header>
    <nav>导航栏标签</nav>
    <section>某个区域</section>
</body>

（2）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>
        video {
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- controls播放控件在不同浏览器里面的按钮样式不一样 后面通过js实现一样 -->
    <video src="media/mi.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop"
        poster="media/mi9.jpg"></video>
</body>

</html>

（3）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>
</head>

<body>
    <audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>
</body>

</html>

（4）HTML5新增input表单在这里插入图片描述

示例

<!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="data"></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>

（5）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>
        /* 伪元素选择器【标签：：伪元素】 */
        input::placeholder {
            color: pink;
        }
    </style>
</head>

<body>
    <!-- 必须包含在form表单域中 -->
    <form action="">
        <!-- input:search -->
        <input type="search" name="sear" id="" required="required" placeholder="全棉时代" autofocus="autofocus"
            autocomplete="off">
        <input type="file" name="" id="" multiple="multiple">
        <input type="submit" value="提交">
    </form>
</body>

</html>

3.CSS3在这里插入图片描述在这里插入图片描述

（1）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>
        /* 必须是input 但是同时具有 value这个属性 选择这个元素 [] */
        /* input[value] {
            color: pink;
        } */
        /* 只将 type=text文本框的input 选取出来 */
        input[type=text] {
            color: pink;
        }

        /* 选择首先是div 然后具有clas属性 并且属性值 必须是 icon开头的这些元素 */
        /* 权重1+10 */
        div[class^=icon] {
            color: red;
        }

        section[class$=data] {
            color: blue;
        }

        /* *是任意的意思 */
        /* 权重是10 */
        /* .icon1 {
            color: skyblue;
        } */
        /* 加！也可 */
        /* 权重10+1 就近原则 */
        div.icon1 {
            color: skyblue;
        }

        /* 类选择器、属性选择器和伪类选择器 权重都是10 */
    </style>
</head>

<body>
    <!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
    <!-- <input type="text" value="请输入用户名">
    <input type="text"> -->
    <!-- 2. 属性选择器还可以根据属性=值选择某些元素  重点掌握-->
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>我是打酱油的</div>
    <!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">我是安琪拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">那我是谁</section>
</body>

</html>

（2）CSS3新增结构伪类选择器-选择第n个元素在这里插入图片描述在这里插入图片描述

示例

<!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>
        /* 1. 选择ul里面的第一个孩子 小li */
        ul li:first-child {
            background-color: pink;
        }

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

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

        ul li:nth-child(6) {
            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>

（3）CSS3新增nth-child选择器在这里插入图片描述

在这里插入图片描述

示例

<!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-child</title>
    <style>
        /* 1. 把所有的偶数 even的孩子选出来 */
        /* ul li:nth-child(even) {
            background-color: #ccc;
        } */

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

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

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


        /* ol li:nth-child(2n+1) {
            background-color: skyblue;
        } */


        /* ol li:nth-child(n+3) {
            background-color: pink;
        } */

        ol li:nth-child(-n+3) {
            background-color: pink;
        }
    </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>
        <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>

（4）CSS3新增nth-of-type选择器

示例

<!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;
        }
    </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>

（5）nth-child和nth-of-type的区别在这里插入图片描述

示例

<!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>
        /* nth-child 会把所有的盒子都排列序号 */
        /* 执行的时候首先看 :nth-child(1) 之后回去看 前面div */
        section div:nth-child(1) {
            background-color: red;
        }

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

<body>
    <ul>
        <section>
            <p>光头强</p>
            <div>熊大</div>
            <div>熊二</div>
        </section>
    </ul>
</body>

</html>

在这里插入图片描述

（6）CSS3新增伪元素选择器使用场景和由来在这里插入图片描述

在这里插入图片描述

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

        /* 权重1+1=2 */
        div::before {
            /* 这个content是必须要写的 */
            display: inline-block;
            content: '我';
            width: 30px;
            height: 40px;
            background-color: purple;
        }

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

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

</html>
澈如冬雪^
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web前端html5+css3前端开发入门学习笔记
m0_62516225的博客
10-16 2046
Web前端html5+css3前端开发入门学习笔记
HTML5+CSS3+JavaScript 实现淘宝购物车
qq_47735503的博客
12-15 6070
HTML5+CSS3+JavaScript 实现淘宝购物车 1.在一个里面写的，好复制。。。。。下边有分开写的 备注详细 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车</title> <style> .block{ width: 800px;
html5+Css总结(附带案例)
ThegreatHaige的博客
09-10 3340
HtmL5 和CSS一些常见总结 前端(通常指的是用户能够看到)网页通常是由三部分组成： 1.html:也是前端网页基本框架结构，类似于骨架一样的作用 2.CSS: 也叫层叠样式表，就是为美化界面而存在 3.Javascript: 使页面具有动态的效果(包括与用户的一个交互) 一&二.Html HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它是一种用来告知浏览器如何组织页面的标记语言。 所谓超文本Hypertext，是指连接单个或
HTML5+CSS3+Web--day7
qq_60069693的博客
12-20 965
1.制作pc端网页：（1）在head标签的title标签下用link标签引入：css文件，iconfont.css文件（精灵图），favicon.ico文件（搜索导航的网页图标2.制作Web端网页（1）同上（2）在body标签中用script标签引入：flexible.js文件（用于自动调节html字号大小）JavaScript文件引入要放在body尾部。JavaScript执行会阻塞HTML的渲染, 因此将JavaScript的引入置于尾部, 可以使页面先呈现出来,
HTML5+CSS3实现鼠标悬停图文卡片动画切换特效
qq_36595761的博客
07-15 2563
HTML5+CSS3实现鼠标悬停图文卡片动画切换特效
100行Html5+CSS3+JS代码实现元旦倒计时界面
热门推荐
知心宝贝的博客
12-29 1万+
一、前言 二、圣诞树 效果展示： 三、步骤 如果之前看过我这篇文章的 1.下载VSCode 下载链接：VSCode 在Hbuilder、idea运行也是可以的，这里推荐使用VSCode 2.配置插件 三个插件对应的功能： 改写标签后自动完善 切换成中文页面 让代码在网页中打开，默认键Alt+B 3.构建三个文件 在桌面新建一个空的文件夹，用VSCode打开 在VSCode新建三个文件 index .html domtree....
html+css3基础知识部分详记
qq_41662017的博客
07-04 3253
1.VsCode操作 1）语言切换 2）“文件”——首选项——“设置” 3）插件：view in browser open in browser 4）快捷键 alt+b 使用默认浏览器打开 shift+alt+向下箭头 向下复制一行 shift+alt+向上箭头 向上复制一行 alt+向下箭头 向下移动行 alt+向上箭头 向上移动行 shift+tab 向前移动 ctrl+z 回退一步 2.浏览器及内核 1）chrome谷歌： 特点——简洁、快速、安全 内核——webkit,Blink 费用——收费 2）
2018版Html5+Css3由浅入深教程
python9991的博客
04-10 596
2018版Html5+Css3由浅入深教程 day1_01-HTML5CSS3-阶段任务说明 day1_02-HTML5-什么是HTML5 day1_03-HTML5-语义化标签的使用 day1_04-HTML5-语义化标签的兼容性处理 day1_05-HTML5-表单新增的type属性 day1_06-HTML5-表单新增的其它属性 day1_07-HTML5-表单新增元素(datalist) ...
html+css+js设计电子日历
m0_62387059的博客
04-20 761
HTML： <!DOCTYPE html> <html> <head> <title>简单电子日历的设计与实现</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/calendar.css"> <script src="js/calendar.js"></script> &lt.
HTML+CSS+JS+MYSQL入门总结：
Nov_14的博客
05-14 1285
HTML+CSS+JS+MYSQL入门总结： HTML： 概念：最基础的网页开发语言--->Hyper Text Markup Language超文本标记语言 *超文本：用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。 *标记语言：由标签构成的语言。<标签名称> #标记语言不是编程语言。 2、语法： *html文档后缀名为 .html 或者 .htm *标签分类： #围堵标签：有开始和结束标签。 eg:xxx> #自闭和标签：开始和结束标签.
2020求知讲堂web前端（html5+css3）(Day1).pdf
03-14
根据提供的文件内容，下面是对“2020求知讲堂web前端（html5+css3）(Day1).pdf”文件中知识点的详细说明。 首先，课程大纲概述了前端开发所需掌握的技能和知识点，包括但不限于： 1. Photoshop：虽然主要是一款...
html5+css3day3.rar
12-21
在这个系列的视频中，我们将从最基础的HTML、CSS和JavaScript开始，并逐步介绍各种前端开发的核心概念和技术。我们还将学习如何使用流行的前端框架和工具，如React、Vue.js和Webpack等，来构建功能强大、响应迅速的...
html5+css3day5.rar
12-21
在这个系列的视频中，我们将从最基础的HTML、CSS和JavaScript开始，并逐步介绍各种前端开发的核心概念和技术。我们还将学习如何使用流行的前端框架和工具，如React、Vue.js和Webpack等，来构建功能强大、响应迅速的...
html5+css3day4.rar
12-21
在这个系列的视频中，我们将从最基础的HTML、CSS和JavaScript开始，并逐步介绍各种前端开发的核心概念和技术。我们还将学习如何使用流行的前端框架和工具，如React、Vue.js和Webpack等，来构建功能强大、响应迅速的...
html5+css3day2.rar
12-21
在这个系列的视频中，我们将从最基础的HTML、CSS和JavaScript开始，并逐步介绍各种前端开发的核心概念和技术。我们还将学习如何使用流行的前端框架和工具，如React、Vue.js和Webpack等，来构建功能强大、响应迅速的...
CSS3动画——飞行的小精灵
懒羊羊大王的博客
08-25 1779
通过多层结构、渐变色、圆角、多种动画效果以及细节处理，成功地创造了一个充满活力和趣味性的飞行小精灵动画效果。
CSS3视图过渡动画
m0_46281382的博客
08-24 886
手写视图过过渡动画，讲解如何实现Element Plus和Antdesign UI两种主题切换的实现逻辑；
CSS3多行多栏布局
业精于勤荒于嬉，行成于思毁于随
08-24 466
当前布局由6个等宽行组成，其中第四行有三栏，第五行有四栏。
js实现3d拖拽环绕旋转
最新发布
SHX_fusheng的博客
08-27 339
js实现拖动节点围绕圆心进行转动
2020求知讲堂：HTML5+CSS3 Web前端入门与进阶
2020求知讲堂web前端（html5+css3）(Day1)课程内容涵盖了web前端开发的基础和进阶学习，适合初学者和希望提升技能的专业人士。课程大纲分为基础阶段和深度学习阶段，分别聚焦于HTML5与CSS3技术。 在基础阶段，学员...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值