HTML5+CSS3(一)

最新推荐文章于 2024-05-21 13:46:15 发布
最新推荐文章于 2024-05-21 13:46:15 发布
阅读量320 收藏 4
点赞数 1
分类专栏： # HTML5+CSS3 文章标签： html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45419127/article/details/116236593
版权

HTML5

HTML5作为html的第五次重大修改，作为新的HTML语言，具有新的元素，新的属性及行为。

广义的HTML5=HTML5+css+javascript HTML5具有兼容性，但具有发展趋势。

HTML5新增语义化标签

  • header:头部标签
  • nav:导航标签
  • article:内容标签
  • section:块级标签
  • aside:侧边栏标签
  • footer：脚部标签

在这里插入图片描述注意事项

  • 新增语义化标签可以使用多次
  • IE9以下的版本具有兼容性问题，需要转换成块级元素
<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        header,
        nav,
        article,
        section,
        aside,
        footer {
            display: block;
            width: 1800px;
            height: 100px;
            margin: 20px auto;
            text-align: center;
            line-height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <header>header</header>
    <nav>nav</nav>
    <article>article</article>
    <section>section</section>
    <aside>aside</aside>
    <footer>footer</footer>
</body>

</html>

在这里插入图片描述

HTML多媒体标签

audio标签

在这里插入图片描述

<audio>音频标签常见属性
  • autoplay:自动播放
  • controls:控件
  • loop:无限次循环播放
  • src:播放的地址
<!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>多媒体标签之audio标签</title>
</head>

<body>
    <!-- 第一种方法 -->
    <audio src="./audio/horse.ogg" controls></audio>

    <!-- 第二种方法 -->
    <audio controls>
        <source src="./audio/Sakura Tears.mp3" type="audio/mpeg">
        <source src="./audio/horse.ogg" type="audio/ogg">
        <!-- 浏览器不支持音频 -->
    </audio>
</body>

</html>

在这里插入图片描述

video视频标签

在这里插入图片描述

<!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>多媒体标签之video标签</title>
</head>

<body>
    <!-- 第一种方法 -->
    <video src="./video/movie.mp4" controls autoplay muted></video>

    <!-- 第二种方法 -->
    <video controls muted poster="./imges/desktop.jpg">
        <source src="./video/movie.mp4" type="video/mp4">
        <source src="./video/movie.ogg" type="video/ogg">
        <!-- 浏览器不支持视频 -->
    </video>
</body>

</html>

在这里插入图片描述

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>HTML5新增表单及表单属性</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        form {
            width: 600px;
            height: 800px;
            margin: 200px auto;
        }
        
        ul,
        li {
            list-style: none;
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <form action="Yao.php">
        <ul>
            <li>账号: <input type="text" placeholder="账号" required autocomplete="on"></li>
            <li>密码: <input type="password" placeholder="密码"></li>
            <li>手机号: <input type="tel" placeholder="手机号" autofocus></li>
            <li>数值: <input type="number" placeholder="数值"></li>
            <li>网址: <input type="url" placeholder="网址"></li>
            <li>颜色: <input type="color" placeholder="颜色"></li>
            <li>邮箱: <input type="email" placeholder="邮箱"></li>
            <li>文件: <input type="file" placeholder="文件" multiple></li>
            <li>日期: <input type="date" placeholder="日期"></li>
            <li>时间: <input type="time" placeholder="时间"></li>
            <li>月份 <input type="month" placeholder="月份"></li>
            <li>星期: <input type="week" placeholder="星期"></li>
            <li>搜索框: <input type="search" placeholder="搜索"></li>
            <li>
                <span><input type="submit" value="提交"></span>
                <span> <input type="reset" value="重置"></span>
            </li>
        </ul>
    </form>
</body>

</html>

在这里插入图片描述

CSS3选择器

属性选择器

在这里插入图片描述

注意：类选择器，属性选择器，伪类选择器的权值为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>属性选择器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            float: left;
            width: 50px;
            height: 50px;
            margin: 20px 50px;
        }
        
        button {
            background-color: yellow
        }
        
        input[disabled] {
            background-color: purple;
        }
        
        div[class^='ico'] {
            background-color: rebeccapurple;
        }
        
        div[class$='ico'] {
            background-color: saddlebrown;
        }
        
        div[class*='box'] {
            background-color: sandybrown;
        }
    </style>
</head>

<body>
    <section>
        <button>按钮</button>
        <button>按钮</button>
        <input type="text" disabled>
        <input type="text" disabled>
    </section>
    <div class="ico2020"></div>
    <div class="ico2020"></div>
    <div class="2020ico"></div>
    <div class="2020ico"></div>
    <div class="20box02"></div>
    <div class="20box02"></div>

</body>

</html>

在这里插入图片描述

结构伪类选择器

在这里插入图片描述

nth-chid(n):n可以为公式 也可以为关键字 even(偶数) old(奇数)

nth-child(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>nth-child(n)</title>
    <style>
        ul li:first-child {
            background-color: red;
        }
        
        ul li:nth-child(4) {
            background-color: purple;
        }
        
        ul li:last-child {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>

在这里插入图片描述
nth-of-type(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>nth-of-type(n)</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box a:first-of-type {
            background-color: teal;
        }
        
        .box p:nth-of-type(2) {
            color: yellow;
        }
        
        .box button:last-of-type {
            color: violet;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#">百度</a> <br />
        <input type="text"> <br />
        <button>提交</button><br />
        <p>Hello word</p>
        <a href="#">百度</a> <br />
        <input type="text"> <br />
        <button>提交</button><br />
        <p>Hello word</p>
        <a href="#">百度</a> <br />
        <input type="text"> <br />
        <button>提交</button><br />
        <p>Hello word</p>
    </div>
</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>伪元素选择器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        p::before {
            content: '你';
        }
        
        P::after {
            content: '帅';
        }
    </style>
</head>

<body>
    <p>好</p>
</body>

</html>

在这里插入图片描述

注意事项

  • ::before和::after属于伪元素选择器，content属性必须要写
  • 伪元素不存在dom结构
  • 伪元素选择器为行内元素
  • 权重为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>
        * {
            margin: 0;
            padding: 0;
        }
        
        p {
            position: relative;
            width: 500px;
            height: 500px;
            margin: 200px auto;
            background-color: red;
        }
        
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?cv013x');
            src: url('fonts/icomoon.eot?cv013x#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?cv013x') format('truetype'), url('fonts/icomoon.woff?cv013x') format('woff'), url('fonts/icomoon.svg?cv013x#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        
        P::after {
            position: absolute;
            top: 50%;
            left: 50%;
            content: '\e901';
            font-size: 50px;
            font-family: 'icomoon';
        }
    </style>
</head>

<body>
    <P></P>
</body>

</html>

在这里插入图片描述

注意：根目录下必须要fonts文件

transition:过渡

在这里插入图片描述
注意事项

  • 过渡效果是一种效果从另一种效果的变化
  • 过渡有多组属性之间用逗号相隔
  • all代表所有的属性
  • 过渡的效果在自身元素上
<!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>transition</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 200px;
            height: 400px;
            background-color: violet;
            transition: all 2s linear 2s;
        }
        
        .box:hover {
            width: 1000px;
            height: 600px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
</body>

</html>

在这里插入图片描述

焦点选择器

focus:焦点选择器适用于表单元素

<!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>
        input {
            width: 25px;
            height: 60px;
            border: 1px solid red;
            transition: all 5s linear 0s;
        }
        
        input:focus {
            width: 500px;
            height: 100px;
        }
    </style>
</head>

<body>
    <input type="text">
</body>

</html>

在这里插入图片描述

「已注销」
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
h5页面选择颜色、颜色查询对照表
11-29
h5页面选择颜色 ，多选颜色 ，input、select、img选择、颜色选择器 | RGB颜色查询对照表
CSS3详解
clover_page的博客
04-12 4450
CSS3详解 一、CSS3 1-1、基本概念 层叠样式表(Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力 1-2、发展历程 CSS1.0：网页基本样式 CSS2.0：DIV（块）+ CSS，提出HTML与CSS结构分离的思想，网页变得简单，
基于HTML5和CSS3搭建一个Web网页（四）(完结)
最新发布
阿常的博客
05-21 839
基于HTML5和CSS3搭建一个Web网页（四），结束了这个网页的开发
CSS3知识总结
weixin_51109349的博客
12-15 1831
CSS3什么是css3浏览器前缀css3选择器边框圆角渐变径向渐变线性渐变文本和盒子阴影文字换行CSS3字体css3 背景倒影滤镜过渡2D装换3D转换动画1.指定动画2.使用动画flex布局多媒体查询怪异盒子多列布局 什么是css3 CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了， IE10以后也开始全面支持CSS3了。 最需要注意的问题是各个浏览器
Css3详解
Zheng_xinle的博客
08-30 7221
Css3 一、什么是Css3? “CSS3是CSS（层叠样式表）技术的升级版本，是CSS2的升级版本，3只是版本号，它在CSS2.1 的基础上增加了很多强大的新功能。CSS3原理同CSS，是在网页中自定义样式表的选择符，然后在网页中大量引用这些选择符。” 二、Css3可以做什么？ css3可以使用的图片和脚本来实现的效果 比如：圆角、图片边框、文字阴影和盒阴景、渐变、个性化字体、多图片背景、过渡、动画、多栏布局、媒体查询等 Css3动画 一、Css3动画 CSS3 可以创建动画，它可以取代许多网
CSS3(入门)
热爱编程、热爱生活、热爱探索
02-19 8255
目录一、CSS3基本概念和作用 一、CSS3基本概念和作用 Html5是网页的结构，css3是网页的表现（美化），javaScript是网页的交互。 菜鸟教程（学习的工具网站） 概念：CSS又叫层叠样式表( Cascading Style Sheets )是一种用来表现HTML或XML等文件样式的计算机语言，3是版本号。CSS于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 作用：美化网页（字体
html5+css3+js登录页面
04-10
html5+css3+js登录页面模板，适用于网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
HTML5+CSS3网页设计实例教程实例源代码.rar
01-05
HTML5+CSS3网页设计实例教程实例源代码
HTML5+CSS3
09-17
该文档是HTML5+CSS3的总结笔记，把工作中的常用的知识点个记录下来，仅供学习和工作的参考资料，不做商业用途，版权归本人所有，侵权必究！
html5+css3+JS代码
05-22
在本篇文章中，我们将深入探讨这三种技术的详细知识点，并结合《精通html5+css3+JavaScript页面设计》这本书中的实践代码进行说明。 首先，HTML5（超文本标记语言第五版）是描述网页内容的标准语言。它引入了许多新...
html5+css3笔记资料
02-14
html5+css3笔记资料
HTML5&CSS3提高
weixin_51353891的博客
05-06 301
目标 能够说出 3~5 个 HTML5 新增布局和表单标签 能够说出 CSS3 的新增特性有哪些 HTML5新特性 概述 HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 语义化标签 （★★） 以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的 <div class=“header”> </div&g.
HTML5 + CSS3
坏蛋阿土的博客
10-29 8482
HTML指的是超文本标记语言(HyperText Markup Language)，它是用来描述网页的一种语言。 HTML不是一种编程语言，而是一种标记语言(markup language)。 标记语言是一套标记标签(markup tag)。所谓超文本，有2层含义∶ 1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。 2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本)。网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的。浏
【前端基础篇】HTML5 + CSS3 入门知识
前端知识分享喵
06-09 1891
，HTML5和CSS3核心知识
css_css3新增属性
qq_57226103的博客
04-13 1504
w3c提出的某个css属性，再被浏览器正式支持前，浏览器厂商会根据浏览器内核，使用私有前缀来测试该属性，浏览器正式支持改属性后，就不需要该前缀了，Chrome、Safari和Edge浏览器私有前缀。动态伪类选择器、目标伪类选择器、UI伪类选择器、语言伪类选择器、结构伪类选择器、否定伪类选择器、伪原素选择器。表格单元格(table、thead、tbody、tfoot、th、td、tr、caption)、column-span为all原素(即使该原素没有包裹在多列容器中)、绝对定位、固定定位原素、
CSS3 简介
梁辰兴的博客
09-21 626
CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案。CSS3主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块，它在CSS2的基础上增加了一些新的特性，主要有更多的渲染效果、改进的文字排版和更高级的选择器。CSS3的引入主要是为了满足当时网页设计日益增长的需求，以及提供更高级别的样式和布局支持。
Html5 + Css3笔记详细汇总大全
weixin_50637054的博客
04-10 4125
Html5 + Css3笔记详细汇总大全
HTML5+CSS
weixin_53954126的博客
10-31 2020
HTML- CSS复习
HTML5+CSS3企业网站实战教程
在构建基于HTML5和CSS3的企业网站时，我们可以看到这个PPT课程的主要目标是教会学员如何创建一个界面美观、风格统一、结构完整且内容丰富的静态商业网站。课程由高小梅在2018年07月24日讲解，主要涉及的技术包括...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值