CSSHTML新特性

HTML5 新特性探秘

在 Web 开发的不断演进中,HTML5 带来了一系列令人振奋的新特性,极大地提升了网页的功能和用户体验。今天,我们就来深入探究一下这些新特性。

语义化标签:让网页结构更清晰

语义化标签是 HTML5 的一大亮点。在过去,我们可能大量使用<div>来构建网页结构,但这样对于机器和开发者理解页面内容并不友好。HTML5 引入了一系列语义化标签,让网页结构一目了然。

<header>标签用于定义页面或页面区域的头部,通常包含网站标志、页面标题等内容。比如:

<header>我的第一个网页</header>

<nav>标签专门用于导航链接,使得搜索引擎和屏幕阅读器能更好地识别页面的导航结构。

<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>

<article>标签包裹独立的内容,比如一篇博客文章、新闻报道等。每一个<article>都有自己独立的意义。

<article>
<h2>HTML5新特性深度解析</h2>
<p>这里是文章的具体内容...</p>
</article>

<section>用于定义文档中的某个区域,它可以将相关内容分组,比如将一个页面按主题分成不同的部分。

<section><h3>精彩内容区</h3><p>这部分内容围绕某个特定主题展开...</p></section>

<aside>标签代表与页面主要内容相关但又相对独立的内容,常被用作侧边栏,展示一些补充信息、广告等。

<aside><h4>热门推荐</h4><ul><li><a href="#">热门文章1</a></li><li><a href="#">热门文章2</a></li></ul></aside>

<footer>标签定义页面或页面区域的底部,通常包含版权信息、联系方式等。

<footer><p>版权所有 © 2025 我的网站</p></footer>

这些语义化标签不仅提升了代码的可读性和可维护性,还对搜索引擎优化(SEO)大有裨益。

新增多媒体标签:丰富网页多媒体体验

HTML5 新增了<audio>和<video>标签,让在网页中嵌入音频和视频变得前所未有的简单。而且,MP4 格式在这些多媒体标签中应用广泛,因为它具有良好的兼容性和压缩比。

音频<audio>标签

使用<audio>标签可以轻松在网页中添加音频。例如:

<audio src="music.mp3" controls></audio>

视频<video>标签

<video>标签更是强大,它有许多实用属性。

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

input 新属性:增强表单交互性

HTML5 为<input>元素带来了许多新属性,大大提升了表单的功能和用户输入体验。

各种输入类型属性值

属性选择器

\

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网络爬虫【简介】

我叫补三补四&#xff0c;很高兴见到大家&#xff0c;欢迎一起学习交流和进步 今天来讲一讲爬虫 一、网络爬虫的定义 网络爬虫&#xff08;Web Crawler&#xff09;&#xff0c;又称为网络蜘蛛、网络机器人等&#xff0c;是一种按照一定规则自动抓取互联网信息的程序或脚本。它…

数字隔离器,如何提升储能系统的安全与效能?

随着全球对光伏、风电等可再生能源需求的持续增长&#xff0c;在全球能源转型的浪潮中&#xff0c;储能技术凭借着可平衡能源供需、提高能源利用效率等优势&#xff0c;已成为实现 “双碳” 目标的核心支撑。据国家能源局公布数据显示&#xff0c;截至2024年底&#xff0c;我国…

AI玩Flappy Bird || 基于Q-Learning和DQN的机器学习

一、游戏介绍 Flappy Bird 游戏需要玩家控制一只小鸟越过管道障碍物。玩家只可以进行“跳跃”或者“不操作”两种操作&#xff0c;即点或不点。点则让小鸟上升一段距离&#xff0c;不点小鸟继续下降。若小鸟碰到障碍物或地面&#xff0c;则游戏失败。 本项目目的是开发一个深层…

【Linux内核系列】:文件系统收尾以及软硬链接详解

&#x1f525; 本文专栏&#xff1a;Linux &#x1f338;作者主页&#xff1a;努力努力再努力wz &#x1f4aa; 今日博客励志语录&#xff1a; 世界上只有一种个人英雄主义&#xff0c;那么就是面对生活的种种失败却依然热爱着生活 内容回顾 那么在之前的学习中&#xff0c;我们…

【eNSP实战】三层交换机使用ACL实现网络安全

拓图 要求&#xff1a; vlan1可以访问Internetvlan2和vlan3不能访问Internet和vlan1vlan2和vlan3之间可以互相访问PC配置如图所示&#xff0c;这里不展示 LSW1接口vlan配置 vlan batch 10 20 30 # interface Vlanif1ip address 192.168.40.2 255.255.255.0 # interface Vla…

Trae与Builder模式初体验

说明 下载的国际版&#xff1a;https://www.trae.ai/ 建议 要选新模型 效果 还是挺不错的&#xff0c;遇到问题反馈一下&#xff0c;AI就帮忙解决了&#xff0c;真是动动嘴&#xff08;打打字就行了&#xff09;&#xff0c;做些小的原型效果或演示Demo很方便呀&#xff…

Canoe Panel常用控件

文章目录 一、Panel 中控件分类1. 指示类控件2. 功能类控件3. 信号值交互类控件4. 其他类控件 二、控件使用方法1. Group Box 控件2. Input/Output Box控件3. Static Text控件4. Button控件5. Switch/Indicator 控件 提示&#xff1a;Button 和 Switch 的区别参考 一、Panel 中…

睡不着运动锻炼贴士

在快节奏的现代生活中&#xff0c;失眠似乎已成为许多人的“夜间伴侣”。夜晚辗转反侧&#xff0c;白天精神不振&#xff0c;这样的恶性循环让许多人苦不堪言。其实&#xff0c;除了调整作息和饮食习惯&#xff0c;适当的运动也是改善睡眠的一剂良药。今天&#xff0c;就让我们…

java数据结构(复杂度)

一.时间复杂度和空间复杂度 1.时间复杂度 衡量一个程序好坏的标准&#xff0c;除了能处理各种异常&#xff0c;还有就是时间效率&#xff0c;当然&#xff0c;对于一些配置好的电脑数据处理起来就是比配置低的高&#xff0c;但从后期发展来看&#xff0c;当数据量足够庞大时&…

NAT和NAPT的介绍

一、NAT的介绍以及作用 二、NAPT的介绍以及作用 三、NAT vs NAPT 一、NAT的介绍以及作用 1.1 NAT的介绍 NAT&#xff08;Network Address Translation&#xff09;是一种广泛应用于互联网的技术&#xff0c;主要用于解决IPv4地址耗尽问题&#xff0c;同时提供网络安全和网络…

VSCode通过SSH免密远程登录Windows服务器

系列 1.1 VSCode通过SSH远程登录Windows服务器 1.2 VSCode通过SSH免密远程登录Windows服务器 文章目录 系列1 准备工作2 本地电脑配置2.1 生成密钥2.2 VS Code配置密钥 3. 服务端配置3.1 配置SSH服务器sshd_config3.2 复制公钥3.3 配置权限&#xff08;常见问题&#xff09;3.…

大模型训练全流程深度解析

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。https://www.captainbed.cn/north 文章目录 1. 大模型训练概览1.1 训练流程总览1.2 关键技术指标 2. 数据准备2.1 数据收集与清洗2.2 数据…

export、export default 和 module.exports 深度解析

文章目录 1. 模块系统概述1.1 模块系统对比1.2 模块加载流程 2. ES Modules2.1 export 使用2.2 export default 使用2.3 混合使用 3. CommonJS3.1 module.exports 使用3.2 exports 使用 4. 对比分析4.1 语法对比4.2 使用场景 5. 互操作性5.1 ES Modules 中使用 CommonJS5.2 Com…

AI芯片设计

目的&#xff1a;未来的时代&#xff0c;一定会是AI的时代&#xff0c;那么&#xff0c;AI时代的三个重要组成部分&#xff0c;我要参与其中之一&#xff01; 参考视频&#xff1a;AI芯片设计第一讲_哔哩哔哩_bilibili 端处理 云端

动手学深度学习:CNN和LeNet

前言 该篇文章记述从零如何实现CNN&#xff0c;以及LeNet对于之前数据集分类的提升效果。 从零实现卷积核 import torch def conv2d(X,k):h,wk.shapeYtorch.zeros((X.shape[0]-h1,X.shape[1]-w1))for i in range(Y.shape[0]):for j in range(Y.shape[1]):Y[i,j](X[i:ih,j:jw…

【开源代码解读】AI检索系统R1-Searcher通过强化学习RL激励大模型LLM的搜索能力

关于R1-Searcher的报告&#xff1a; 第一章&#xff1a;引言 - AI检索系统的技术演进与R1-Searcher的创新定位 1.1 信息检索技术的范式转移 在数字化时代爆发式增长的数据洪流中&#xff0c;信息检索系统正经历从传统关键词匹配到语义理解驱动的根本性变革。根据IDC的统计…

使用Node的http模块创建web服务,给客户端返回html页面时,css失效的根本原因(有助于理解http)

最近正在尝试使用node写后端&#xff0c;使用node创建http服务的时候&#xff0c;碰到了这样的一个问题&#xff1a; 这是我的源代码&#xff1a; import { createServer } from http import { join, dirname, extname } from path import { fileURLToPath } from url import…

JVM 2015/3/15

定义&#xff1a;Java Virtual Machine -java程序的运行环境&#xff08;java二进制字节码的运行环境&#xff09; 好处&#xff1a; 一次编写&#xff0c;到处运行 自动内存管理&#xff0c;垃圾回收 数组下标越界检测 多态 比较&#xff1a;jvm/jre/jdk 常见的JVM&…

IP风险度自检,互联网的安全“指南针”

IP地址就像我们的网络“身份证”&#xff0c;而IP风险度则是衡量这个“身份证”安全性的重要指标。它关乎着我们的隐私保护、账号安全以及网络体验&#xff0c;今天就让我们一起深入了解一下IP风险度。 什么是IP风险度 IP风险度是指一个IP地址可能暴露用户真实身份或被网络平台…

【鸿蒙】封装日志工具类 ohos.hilog打印日志

封装一个ohos.hilog打印日志 首先要了解hilog四大日志类型&#xff1a; info、debug、warm、error 方法中四个参数的作用 domain: number tag: string format: string ...args: any[ ] 实例&#xff1a; //普通的info日志&#xff0c;使用info方法来打印 //第一个参数 : 0x0…