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

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

Github代码仓库SSH配置流程

作者&#xff1a; Herman Ye Auromix 测试环境&#xff1a; Ubuntu20.04 更新日期&#xff1a; 2024/02/21 注1&#xff1a; Auromix 是一个机器人爱好者开源组织。 注2&#xff1a; 由于笔者水平有限&#xff0c;以下内容可能存在事实性错误。 相关背景 在为Github代码仓库配…

【LeetCode】升级打怪之路 Day 01:二分法

今日题目&#xff1a; 704. 二分查找35. 搜索插入位置34. 在排序数组中查找元素的第一个和最后一个位置 目录 今日总结Problem 1: 二分法LeetCode 704. 二分查找 【easy】LeetCode 35. 搜索插入位置 ⭐⭐⭐⭐⭐LeetCode 34. 在排序数组中查找元素的第一个和最后一个位置 【medi…

探索Linux系统中HTTP隧道技术的原理与实践

在Linux的世界里&#xff0c;HTTP隧道技术就像是一个神秘的魔法师&#xff0c;它能让你的网络请求穿越重重障碍&#xff0c;安全地到达目的地。今天&#xff0c;我们就来一起探索这个魔法师的奥秘&#xff0c;看看它是如何在Linux系统中施展魔法的。 首先&#xff0c;我们要明…

pcd文件介绍

pcd文件介绍 一、PCD文件格式二、为什么要使用新的文件格式&#xff1f;三、PCD 版本四、文件格式头五、数据存储类型六、优于其他文件格式七、结果展示八、相关链接 一、PCD文件格式 本文档描述PCD(点云数据)文件格式&#xff0c;以及它在点云库(PCL)中的使用方式。 二、为什…

备战蓝桥杯—— 双指针技巧巧答链表2

对于单链表相关的问题&#xff0c;双指针技巧是一种非常广泛且有效的解决方法。以下是一些常见问题以及使用双指针技巧解决&#xff1a; 合并两个有序链表&#xff1a; 使用两个指针分别指向两个链表的头部&#xff0c;逐一比较节点的值&#xff0c;将较小的节点链接到结果链表…

LLM 模型融合实践指南:低成本构建高性能语言模型

编者按&#xff1a;随着大语言模型技术的快速发展&#xff0c;模型融合成为一种低成本但高性能的模型构建新途径。本文作者 Maxime Labonne 利用 mergekit 库探索了四种模型融合方法&#xff1a;SLERP、TIES、DARE和passthrough。通过配置示例和案例分析&#xff0c;作者详细阐…

C++学习之list容器

C++ list基本概念 在C++中,std::list是一个双向链表(doubly linked list)容器,它包含在 <list> 头文件中。下面是一些关于C++ std::list的基本概念: 双向链表结构:std::list是由多个节点组成的双向链表结构,每个节点包含数据元素和指向前一个节点和后一个节点的指…

Java基础API(2) String、StringBuilder详解

文章目录 &#x1f378;1. String类&#x1f349;&#x1f349;1.1 String概述&#x1f349;&#x1f349;1.2 String类的构造方法&#x1f349;&#x1f349;1.3 创建字符串对象的区别对比&#x1f349;&#x1f349;1.4 字符串的比较1.4.1 字符串的比较 &#x1f349;&#x…

【办公类-16-07-01】“2023下学期 周计划-美术专用活动室写法”(python 排班表系列)

背景需求&#xff1a; 又到了开学季&#xff0c;新的活动室安排表出炉了。 为了贴在美术活动室的安排表&#xff0c;我需要转换成班级为单位的安排表&#xff0c;便于批量制作周计划。 主要用途——填写周计划中的特色美术活动室&#xff08;汉字大写&#xff09; 重点说明&am…

Maven私服搭建Nexus3

第一部分&#xff1a;仓库部署 下载地址&#xff1a;https://help.sonatype.com/en/download.html 备用下载链接&#xff0c;部分已经失效了 解压后会有两个文件夹&#xff1a; nexus-3.20.1-01 sonatype-work 访问地址配置路径 \nexus-3.20.1-01\bin\nexus.vmoptions -Xms1…

mac 安装H3C iNode + accessClient mac版

一、下载安装 官网下载地址 https://www.h3c.com/cn/Service/Document_Software/Software_Download/IP_Management/ 可以使用文末参考博文中的账号 yx800 密码 01230123登录下载 选择版本 下载 下载 H3C_iNode_PC_7.3_E0626.zip 文件后&#xff0c;解压下载到的PC端压缩包…

【设计模式】01-装饰器模式Decorator

作用&#xff1a;在不修改对象外观和功能的情况下添加或者删除对象功能&#xff0c;即给一个对象动态附加职能 装饰器模式主要包含以下角色。 抽象构件&#xff08;Component&#xff09;角色&#xff1a;定义一个抽象接口以规范准备接收附加责任的对象。具体构件&#xff08…

静态时序分析:保持时间分析

相关阅读 静态时序分析https://blog.csdn.net/weixin_45791458/category_12567571.html?spm1001.2014.3001.5482 在静态时序分析中&#xff0c;保持时间检查约束了触发器时钟引脚&#xff08;时钟路径&#xff09;和输入数据引脚&#xff08;数据路径&#xff09;之间的时序关…

ArcgisForJS如何访问Arcgis Server?

文章目录 0.引言1.准备ArcGIS相关工具2.创建含有ArcSDE地理数据库的MXD文件3.注册ArcSDE地理数据库4.发布数据到Arcgis Server5.ArcgisForJS访问ArcGIS Server数据 0.引言 ArcGIS API for JavaScript 是一个用于在Web和移动应用程序中创建交互式地图和地理空间分析应用的库。它…

量子加密机的工作原理是什么

量子加密机&#xff0c;作为现代加密技术的一大飞跃&#xff0c;正逐渐成为信息安全领域的研究热点。与传统的加密方法相比&#xff0c;量子加密技术以其独特的优势&#xff0c;为信息安全提供了更为坚实的保障。 量子加密的核心在于利用量子力学的特性&#xff0c;尤其是量子纠…

【电子书】计算机课程

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

开篇:通过 state 阐述 React 渲染

前段时间开始着手React项目的开发&#xff0c;关于React的一些思想也有了一些体会&#xff08;尤其是同vue之间的差异&#xff09;&#xff0c;特梳理&总结相关内容&#xff0c;便于理解。 ✓ &#x1f1e8;&#x1f1f3; 开篇&#xff1a;通过 state 阐述 React 渲染 说在…

Java SE 入门到精通—基础语法【Java】

敲重点&#xff01; 本篇讲述了比较重要的基础&#xff0c;是必须要掌握的 1.程序入口 在Java中&#xff0c;main方法是程序的入口点&#xff0c;是JVM&#xff08;Java虚拟机&#xff09;执行Java应用程序的起始点。 main方法的方法签名必须遵循下面规范&#xff1a; publ…

游戏配置二级缓存一致性问题解决方案

游戏服务器进程在启动的时候&#xff0c;一般会把所有策划配置数据加载到内存里&#xff0c;将主键以及对应的记录存放在一个HashMap容器里&#xff0c;这称为一级缓存。部分功能可能还需要缓存其他数据&#xff0c;这些称为二级缓存。举个例子&#xff0c;对于如下的玩家升级表…

电脑wifi丢失修复

当你打开电脑突然发现wifi功能不见了&#xff0c;可以先查看一下网卡的状态 在控制面板中找到设备管理器&#xff0c;打开就能找到网络适配器&#xff0c; 我这里是修复过的&#xff0c;wifi丢失后这里可能会显示WALN是丢失的&#xff0c;其他项显示黄色感叹号。 如何修复呢…