HTML5+CSS3(1)

已于 2022-03-31 15:55:49 修改
阅读量84 收藏
点赞数
分类专栏： HTML5+CSS3 文章标签： html5 html css3
于 2022-01-27 22:43:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60830137/article/details/122724728
版权
本文详细介绍了HTML5的新标签、语义化、多媒体音频和视频标签、新增的input标签、表单属性以及CSS3中的属性选择器、结构伪类选择器、伪元素选择器，包括它们的用法、注意事项和兼容性问题。通过实例演示帮助理解各项特性的应用。
摘要由CSDN通过智能技术生成
一、什么是 HTML5

  1. HTML5 的概念与定义

    • 定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML
    • 两个概念：
      • 是一个新版本的 HTML 语言，定义了新的标签、特性和属性
      • 拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5

  2. HTML5 拓展了哪些内容

    • 语义化标签
    • 本地存储
    • 兼容特性
    • 2D、3D
    • 动画、过渡
    • CSS3 特性
    • 性能与集成

  3. HTML5 的现状

    绝对多数新的属性，都已经被浏览器所支持，最新版本的浏览器已经开始陆续支持最新的特性，

    总的来说：HTML5 已经是大势所趋

二、HTML5 新增标签

  1. 什么是语义化

  2. 新增了那些语义化标签

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

语义化标签

  1. 使用语义化标签的注意

    • 语义化标签主要针对搜索引擎
    • 新标签可以使用一次或者多次
    • 在 IE9 浏览器中，需要把语义化标签都转换为块级元素
    • 语义化标签，在移动端支持比较友好，
    • 另外，HTML5 新增的了很多的语义化标签，随着课程深入，还会学习到其他的
三、多媒体音频标签

  1. 多媒体标签有两个，分别是

    • 音频 – audio
    • 视频 – video

  2. audio 标签说明

    • 可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放，
    • 但是：播放格式是有限的

  3. audio 支持的音频格式

    • audio 目前支持三种格式
      在这里插入图片描述

  4. audio 的参数
    在这里插入图片描述

5、audio 代码演示

<body>
    <!-- 谷歌浏览器把autoplay 属性给禁止了 -->
    <!-- IE浏览器播放不了，可以与工具栏设置自动播放 -->
    <!-- <audio src="./media/snow.mp3" controls="controls" autoplay="autoplay"></audio> -->
    <audio controls="controls">
      <!-- source单标签 -->
      <source src="./media/snow.mp3" type="audio/mpeg" />
      <source src="./media/snow.ogg" type="audio/ogg" />
     您的浏览器不支持播放声音 
    </audio>
  </body>
四、多媒体视频标签

  1. video 视频标签

    • 目前支持三种格式
      在这里插入图片描述

  2. 语法格式

    <video src="./media/video.mp4" controls="controls"></video>

  3. video 参数

    在这里插入图片描述

  4. video 代码演示

    <body>
  <!-- <video src="./media/video.mp4" controls="controls"></video> -->

  <!-- 谷歌浏览器禁用了自动播放功能，如果想自动播放，需要添加 muted 属性 -->
  <video controls
最低0.47元/天 解锁文章
宇智波-林中路
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
属性选择器实例.html
08-22
学习css3过程中　写的一些test例子，根据图解ｃｓｓ３大漠老师写的。
html5+css3+js登录页面
最新发布
04-10
html5+css3+js登录页面模板，适用于网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
HTML5的一些属性
zh_hunan的博客
10-22 638
什么是 HTML5 HTML5 的概念与定义 定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML 两个概念： 是一个新版本的 HTML 语言，定义了新的标签、特性和属性 拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5 HTML5 拓展了哪些内容 语义化标签 本...
jquery选择器_JQuery属性选择器
weixin_39965673的博客
12-03 127
[attribute]：选择具有指定属性值的元素。[attribute='value']：选择具有指定属性且属性值为指定值的元素。eg：选择target属性值为test的a元素，$("a[target='test']")。[attribute|='value']：选择具有指定属性的元素，或者属性值为指定值或指定值后跟连字符(-)。eg：选择包含target属性的a元素，$("a[target]")...
HTML之属性选择器
疯狂的菜鸡
05-17 1091
HTML之属性选择器 属性选择器的使用 : 标签名[属性]{ css样式 } <style> .demo a[id]{ background-color: #59f5ff; } .demo a[id=last]{ background-color: #ff4ccd; } .demo a[class]{ background-colo.
HTML属性选择器（上）
在线学习web前端开发教程
12-18 336
一、属性选择器 （1）定义：根据指定的 属性名称找到对应的标签，然后设置属性 （2）格式：标签[属性=值]：｛属性：值；] 注意:前一个值是不带引号的 （3）例子: p[id]{ color: red; } </style> </head> <body> <p id="identity1">我是段落1</p&g...
html5+css3+JS代码
05-22
在本篇文章中，我们将深入探讨这三种技术的详细知识点，并结合《精通html5+css3+JavaScript页面设计》这本书中的实践代码进行说明。 首先，HTML5（超文本标记语言第五版）是描述网页内容的标准语言。它引入了许多新...
html5+css3笔记资料
02-14
html5+css3笔记资料
HTML5+CSS3期末大作业——城市简介源码
05-05
在这个“HTML5+CSS3期末大作业——城市简介源码”项目中，学生或开发者将有机会实践这两门技术，构建一个介绍特定城市的网页。 HTML5作为最新的超文本标记语言版本，引入了许多新特性，旨在提高网页的交互性和可用...
HTML5+CSS3网页设计模板(30例)zip
03-15
这个"HTML5+CSS3网页设计模板(30例)"压缩包文件包含了一系列现成的设计模板，适合初学者和专业设计师用于学习和参考。 HTML5是超文本标记语言（HTML）的最新版本，它在原有的基础上引入了新的元素、属性和API，旨在...
html5 属性选择器
qq_37207090的博客
08-02 616
html选择器
菜鸡的博客
06-06 1637
基本选择器 : 网页选择器核心标签选择器: 直接拿标签名作为选择器的名字使用作用: 当前网页中所有该标签都有效ID选择器: 一个网页中指定一个效果只能用一次写法: 给标签加id="值",#值{声明};类选择器:指定一个样式可以多次使用写法:给标签加class="值", . 值{声明};
jQuery 元素选择器和属性选择器-6.2
S34497841的博客
06-02 371
6.2
HTML-选择器
Wh532530的博客
03-31 4885
四种状态的顺序最好固定，link visited hover active。逗号选择器，可以同时设置多个标签，使用逗号进行分割。要使用伪元素选择器一定要加上content属性。标签选择器：根据标签的名称获取。id属性唯一，class不唯一。获取的是某个标签的第一级子标签。获取的某个标签里面所有的子标签。id选择器：获取的是ID属性。类选择器 ：class属性。
HTML基础选择器之属性选择器的基本介绍
小杨的博客
07-12 1952
我们平常提到的 属性选择器 是指 [type = "radio"] 这类选择器，实际上 这是一种简称。 指的是 “属性值匹配选择器”； 在正式文档中: 类选择器 和 ID 选择器都属于 属性选择器。 应为本质上 类选择器 是 匹配 ......
html属性选择器 可见,HTML高属性选择器(一)
weixin_42472941的博客
06-09 163
$("div[id]") 选择所有含有id属性的div元素$("input[name='keleyicom']") 选择所有的name属性等于'keleyicom'的input元素$("input[name!='keleyicom']") 选择所有的name属性不等于'keleyicom'的input元素$("input[name^='keleyi']") 选择所有的name属性以'keleyi'...
属性元素选择器
weixin_30340775的博客
03-12 52
转载于:https://www.cnblogs.com/agansj/p/8552516.html
【CSS 笔记】 选择器、属性选择器
piano_diano的博客
06-30 405
id 和 class 选择器 控制对应的HTML元素的样式： ‘#’ 控制id，控制单个HTML元素的样式 <style> #a1{ color: red; text-align: center; } </style> <body> <h1 id="a1">123456</h1> </body> ‘.’ 控制class，控制多个HTML元素的样式 <style> .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值