HTML5-CSS3

一、HTML5的新特性

HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。

这些新特性都有兼容性问题,基本是 **IE9+ 以上版本的浏览器**才支持,如果不考虑兼容性问题,可以大量使用这些新特性。

声明:新特性增加了很多,但是我们专注于开发常用的新特性。

1.1 HTML5 新增的语义化标签

以前布局,我们基本用 div 来做。div 对于搜索引擎来说,是没有语义的

<div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div>

发展到了HTML5后,新增了一些语义化标签,这样的话更加有利于浏览器的搜索引擎搜索,也方便了网站的seo(Search Engine Optimization,搜索引擎优化),下面就是新增的一些语义化标签

1.2 HTML5 新增的多媒体标签

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

1.音频:<audio>

2.视频:<video>

使用它们可以很方便的在页面中嵌入音频和视频,而不再去使用flash和其他浏览器插件。

HTML5在不使用插件的情况下,也可以原生的支持视频格式文件的播放,当然,支持的格式是有限的。

1.3 HTML5 新增的 input 类型

重点记住 number tel search 这三个

eg:

1.4 HTML5 新增的表单属性

二、CSS3的新特性

2.1 CSS3的现状

2.2 属性选择器

2.3 结构伪类选择器

最后一个E:nth-type(n)用的时候只需要更改()里面的n,()里只能是n不能是其他字母。

2.4 伪元素选择器

2.5 CSS3 盒子模型

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

2.6 CSS3 的其他特性(了解)

2.7 CSS3 过渡

三、狭义的HTML5 和 CSS3

四、广义的HTML5

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/401051.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

前端是做什么的?

前端很多时候代表从事前端开发的工程师&#xff0c;定义上来说&#xff0c;他们负责规划、设计、构建和运行网站、软件程序和基于 Web 的应用程序的用户界面系统。通俗点来说&#xff0c;我们看到的网站、点击网站所有的按钮以及和网站的交互都是前端所进行的工作。 概述 前端…

pclpy 窗口可视化多个点云

pclpy 窗口可视化多个点云 一、算法原理二、代码三、结果1.可视化结果 四、相关数据五、问题与解决方案1.问题2.解决 一、算法原理 原理看一下代码写的很仔细的。。目前在同一个窗口最多可视化两个点云。。 二、代码 from pclpy import pcldef CloudShow(cloud1, cloud2):&q…

java数据结构与算法刷题-----LeetCode222. 完全二叉树的节点个数

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 1. 法一&#xff1a;利用完全二叉树性质&#xff0c;进行递归二分查找 解…

145. Binary Tree Postorder Traversal(二叉树的后序遍历)

问题描述 给你一棵二叉树的根节点 root &#xff0c;返回其节点值的 后序遍历 。 问题分析 此问题与二叉树的前序遍历分析类似&#xff0c;只是在数组合并的时候顺序发生一下变化就行了。 代码 int* postorderTraversal(struct TreeNode* root, int* returnSize) {if(root…

【电子书】计算机课程

资料 wx&#xff1a;1945423050 个人整理了一些互联网电子书 计算机课程 Netty权威指南&#xff08;第2版&#xff09;.epubSharePoint Server 2016 IT Pro 部署指南.epubTensorFlow自然语言处理.epubWebGIS之OpenLayers全面解析.epub从Paxos到Zookeeper分布式一致性原理与实践…

《图解设计模式》笔记(一)适应设计模式

图灵社区 - 图解设计模式 - 随书下载 评论区 雨帆 2017-01-11 16:14:04 对于设计模式&#xff0c;我个人认为&#xff0c;其实代码和设计原则才是最好的老师。理解了 SOLID&#xff0c;如何 SOLID&#xff0c;自然而然地就用起来设计模式了。Github 上有一个 tdd-training&…

Javascript中var和let之间的区别

文章目录 一.变量提升(声)二.let和var的区别 区别&#xff1a; 1、var有变量提升&#xff0c;而let没有&#xff1b; 2、let不允许在相同的作用域下重复声明&#xff0c;而var允许&#xff1b; 3、let没有暂时性死区问题&#xff1b; 4、let创建的全局变量没有给window设置对应…

【广度优先搜索】【网格】【割点】【 推荐】1263. 推箱子

作者推荐 视频算法专题 涉及知识点 广度优先搜索 网格 割点 并集查找 LeetCode:1263. 推箱子 「推箱子」是一款风靡全球的益智小游戏&#xff0c;玩家需要将箱子推到仓库中的目标位置。 游戏地图用大小为 m x n 的网格 grid 表示&#xff0c;其中每个元素可以是墙、地板或…

ctfshow web入门 web141-145

1.web141 ^\w$表示在开头和末尾匹配字母数字_&#xff0c;传入的v3值不能有字母数字_&#xff0c;即无字母的命令执行 php中1-phpinfo()是可以执行的&#xff0c;加减乘除都可以实现 这里或&#xff0c;异或&#xff0c;取反等运算都可以 这里采用羽师傅的异或脚本生成paylo…

小白水平理解面试经典题目LeetCode 404 Sum of Left Leaves【Tree】

404 左叶之和 小白翻译 给定二叉树的root&#xff0c;返回所有左叶的总和。 叶子是没有子节点的节点。左叶是另一个节点的左子节点的叶。 例子 小白教室做题 在大学某个自习的下午&#xff0c;小白坐在教室看到这道题。想想自己曾经和白月光做题&#xff0c;现在大过年的&a…

[服务器-数据库]MongoDBv7.0.4不支持ipv6访问

文章目录 MongoDBv7.0.4不支持ipv6访问错误描述问题分析错误原因解决方式 MongoDBv7.0.4不支持ipv6访问 错误描述 报错如下描述 Cannot connect to MongoDB.No suitable servers found: serverSelectionTimeoutMS expired: [failed to resolve 2408]问题分析 首先确定其是…

Github 2024-02-22 开源项目日报 Top10

根据Github Trendings的统计&#xff0c;今日(2024-02-22统计)共有10个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量Python项目4非开发语言项目2Go项目2HTML项目1Dart项目1Vue项目1JavaScript项目1TypeScript项目1 《Hello 算法…

Docker镜像加速

前言 众所周知&#xff0c;我们常用的一些工具或系统的下载源都是国外的&#xff0c;这就会导致我们在下载一些东西时&#xff0c;会导致下载巨慢或者下载失败的情况&#xff0c;下面便是docker换下载源的教程 镜像加速 下面是几个常用的国内的镜像 科大镜像&#xff1a;ht…

ARMv8-AArch64 的异常处理模型详解之异常处理详解(进入异常以及异常路由)

在上篇文章 ARMv8-AArch64 的异常处理模型详解之异常处理概述Handling exceptions中&#xff0c;作者对异常处理整体流程以及相关概念做了梳理。接下来&#xff0c;本文将详细介绍处理器在获取异常、异常处理以及异常返回等过程中都做了哪些工作。 ARMv8-AArch64 的异常处理模型…

深度学习系列60: 大模型文本理解和生成概述

参考网络课程&#xff1a;https://www.bilibili.com/video/BV1UG411p7zv/?p98&spm_id_frompageDriver&vd_source3eeaf9c562508b013fa950114d4b0990 1. 概述 包含理解和分类两大类问题&#xff0c;对应的就是BERT和GPT两大类模型&#xff1b;而交叉领域则对应T5 2.…

C++ 之LeetCode刷题记录(三十三)

&#x1f604;&#x1f60a;&#x1f606;&#x1f603;&#x1f604;&#x1f60a;&#x1f606;&#x1f603; 开始cpp刷题之旅。 目标&#xff1a;执行用时击败90%以上使用 C 的用户。 11. 盛最多水的容器 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;…

贝叶斯统计——入门级笔记

绪论 1.1 引言 全概率公式 贝叶斯公式 三种信息 总体信息 当把样本视为随机变量时&#xff0c;它有概率分布&#xff0c;称为总体分布&#xff0e; 如果我们已经知道总体的分布形式这就给了我们一种信息&#xff0c;称为总体信息 样本信息 从总体中抽取的样本所提供的信息 先…

无人机的视频图传技术

在操控无人机时&#xff0c;视频图传技术显得尤为关键。通过这项技术&#xff0c;无人机的摄像头所捕捉的画面能实时回传至遥控器&#xff0c;使操作者全面掌握无人机的拍摄情况。同时&#xff0c;无人机图传技术也是衡量无人机性能的重要标准&#xff0c;它关乎飞行距离与时间…

先进语言模型带来的变革与潜力

用户可以通过询问或交互方式与GPT-4这样的先进语言模型互动&#xff0c;开启通往知识宝库的大门&#xff0c;即时访问人类历史积累的知识、经验与智慧。像GPT-4这样的先进语言模型&#xff0c;能够将人类历史上积累的海量知识和经验整合并加以利用。通过深度学习和大规模数据训…

C#,动态规划(DP)丢鸡蛋问题(Egg Dropping Puzzle)的三种算法与源代码

1 扔鸡蛋问题 动态规划&#xff08;Dynamic Programming&#xff0c;DP&#xff09;是运筹学的一个分支&#xff0c;是求解决策过程最优化的过程。20世纪50年代初&#xff0c;美国数学家贝尔曼&#xff08;R.Bellman&#xff09;等人在研究多阶段决策过程的优化问题时&#xf…