【温故而知新】HTML5代码规范/语义元素

文章目录

  • 一、概念
  • 二、HTML5代码规范
  • 三、案例代码
  • 四、语义元素

一、概念

HTML5是HTML的最新版本,它引入了许多新的元素和功能,以适应现代网页开发的需求。以下是HTML5的一些主要特点:

  1. 新增语义元素:HTML5引入了许多新的语义元素,如<header>、<footer>、<article>、<section>等,这些元素有助于提高网页的结构化和可访问性。
  2. 媒体支持:HTML5引入了<audio><video>元素,使得开发者可以在网页上直接嵌入音频和视频内容,而不需要依赖第三方插件。
  3. Canvas绘图:HTML5引入了<canvas>元素,使得开发者可以使用JavaScript在网页上绘制图形和动画。
  4. 语义化标签:HTML5的语义化标签使得网页的结构更加清晰和易于理解。例如,使用<nav>元素表示导航链接,使用<article>元素表示独立的内容等。
  5. 交互性:HTML5提供了更多的API和事件处理程序,使得开发者可以创建更加交互式的网页和应用。例如,拖放功能、文件上传和下载、地理定位等。
  6. 离线和存储:HTML5提供了离线存储和会话存储功能,使得开发者可以在用户的设备上存储数据,以便在离线时使用。
  7. 更好的表单控制:HTML5改进了表单元素和输入类型,使得表单的验证和输入更加方便和智能。

HTML5是一个非常强大的工具,它为开发者提供了更多的功能和灵活性,使得他们可以创建出更加丰富、交互性更强、功能更全面的网页和应用。

二、HTML5代码规范

  1. DOCTYPE声明:,必须放在HTML文档的第一行。
  2. 编码声明:使用UTF-8编码,放在文档的第一行:<meta charset="UTF-8">
  3. 标签语义化:使用语义化标签,如<header>、<nav>、<main>、<section>、<article>、<aside>、<footer>等。
  4. 标签闭合:所有标签必须被正确地闭合,空标签也要自闭合。
  5. 属性使用双引号:属性值必须使用双引号括起来。
  6. 标签嵌套规范:标签必须按正确的层次嵌套,不允许交叉嵌套。
  7. ID和类命名:ID和类名应该使用有意义的名称,采用小写字母、短横线分隔。
  8. 嵌入脚本和样式:尽量使用外部脚本和样式文件,避免将脚本和样式直接嵌入到HTML中。
  9. 注释规范:使用<!-- -->进行注释,注释应该清晰明了,便于其他开发者理解。

三、案例代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>HTML5 Code Example</title>
</head>
<body><header><h1>Welcome to my website</h1><nav><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul></nav></header><main><section><h2>About Me</h2><article><h3>My Background</h3><p>I have a bachelor's degree in Computer Science and have been working as a web developer for 5 years.</p></article><article><h3>My Skills</h3><ul><li>HTML5</li><li>CSS3</li><li>JavaScript</li></ul></article></section><aside><h2>Latest News</h2><p>Check out my latest blog post on HTML5 coding standards.</p></aside></main><footer><p>&copy;2021 My Website. All rights reserved.</p></footer>
</body>
</html>

这是一个简单的HTML5网页模板,包含了使用语义化标签、正确嵌套、使用外部脚本和样式文件等规范。

四、语义元素

HTML5引入了一些语义化的标签,这些标签能够更好地描述页面的结构和内容,提高了页面的可读性和可访问性。以下是一些常用的HTML5语义元素及案例代码:

  1. <header>:定义文档或节的头部,通常包含网站的标题、导航等。
<header><h1>My Website</h1><nav><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Services</a></li><li><a href="#">Contact</a></li></ul></nav>
</header>
  1. <nav>:定义页面的导航部分。
<nav><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Services</a></li><li><a href="#">Contact</a></li></ul>
</nav>
  1. <main>:定义文档的主要内容,每个文档只能包含一个<main>元素。
<main><h1>Welcome to My Website</h1><p>This is the main content of the website.</p>
</main>
  1. <section>:定义文档的一个区域或节。
<section><h2>About</h2><p>This is the about section of the website.</p>
</section>
  1. <article>:定义独立的、完整的内容块,如博客文章、新闻报道等。
<article><h3>Article Title</h3><p>This is the content of the article.</p>
</article>
  1. <aside>:定义与页面内容相关但又不是主要内容的部分,通常用于侧边栏、广告等。
<aside><h2>Related Links</h2><ul><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li></ul>
</aside>
  1. <footer>:定义文档或节的底部,通常包含版权信息、联系方式等。
<footer><p>&copy; 2021 My Website. All rights reserved.</p>
</footer>

使用这些HTML5语义元素可以更加清晰地定义页面的结构和内容,提高可读性和可访问性。

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

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

相关文章

用julia演示蝴蝶效应:洛伦兹吸引子

文章目录 Lorentz吸引子julia绘图关闭抗锯齿 蝴蝶效应的名字来源于蝴蝶扇动翅膀的动作&#xff0c;虽然这个动作微小&#xff0c;但可能会在数周后引起飓风等极端天气的发生。这种现象表明&#xff0c;微小的变化可能会被放大并产生非线性的结果。这个概念最早由美国气象学家爱…

linux 网络文件共享服务

存储类型 DAS 直连式存储 SAN 存储区域网络 NAS 网络附近存储 FTP文件传输协议 文件传输协议 FTP 早期的三个应用级协议之一&#xff0c;基于c/s架构 数据传输格式&#xff1a;二进制&#xff08;默认&#xff09;和文本 tcp 21端口&#xff08;权限&#xff0c;…

jmeter--8.加密传输

目录 1. Base64加密 2. MD5加密 3. SHA加密&#xff08;sha1\sha\sha224\sha256\sha384\sha512&#xff09; 4. RSA加密-公钥加密&#xff0c;私钥解密 1. Base64加密 1.1 在需要加密传输的接口下新增BeanShell 预处理程序&#xff0c;${username}可替换成value值&#xff…

微软推出了Copilot Pro 每月20美金

微软推出了Copilot Pro 每月20美金 Copilot Pro在Word、Excel和PowerPoint等Office应用中提供AI驱动的增强体验。 在Word中生成文本和总结文档&#xff0c;回复电子邮件&#xff0c;以及在Excel中分析数据和生成图表等。 订阅者可以优先使用最新的OpenAI模型&#xff0c;包括…

基于springboot的环保网站的设计与实现

&#x1f345;点赞收藏关注 → 私信领取本源代码、数据库&#x1f345; 本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目希望你能有所收获&#xff0c;少走一些弯路。&#x1f345;关注我不迷路&#x1f345;一 、设计说明 1.1 研究背景 当…

【UE5】交互式展厅数字博物馆交互是开发实战课程

长久以来&#xff0c;我们总是不断被初学者问到类似这样的问题&#xff1a;如何从头到尾做一个交互式程序开发项目&#xff1f;本套课程尝试对这个问题进行解答。 课程介绍视频如下 【UE5】数字展厅交互式开发全流程 【谁适合学习这门课】 本套课程面向初学者&#xff0c;满足…

Spring使用注解管理Bean

引入lib包 Spring对Bean管理的常用注解 Component组件(作用在类上) Spring中提供了Component的三个衍生注解:(功能在目前为止是一致的) Controller WEB层 Service 业务层 Repository 持久层 属性注入的注解:(使用注解注入的方式,可以不用提供set方法) Value 用于注入普…

抢注好域名策略

在当今数字化时代&#xff0c;域名已成为企业和个人在互联网上的重要身份标识和品牌形象。因此&#xff0c;抢注一个好的域名对于网站的成功至关重要。本文为您介绍如何抢注好的域名秘诀与策略&#xff0c;帮助您在竞争激烈的头部市场中锻炼。 一、规划提前与研究 在抢注好域…

【上分日记】第380场周赛(数位dp+ KMP + 位运算 + 二分 + 双指针 )

文章目录 前言正文1.3005. 最大频率元素计数2.3007.价值和小于等于 K 的最大数字3.3008. 找出数组中的美丽下标 II 总结尾序 前言 本场周赛&#xff0c;博主也只写出两道题(前两道, hhh菜鸡勿喷)&#xff0c;第三道涉及位运算 &#xff0c;数位dp&#xff0c;第四道涉及KMP。 下…

“货到人”拣选系统模式|智能四向穿梭车系统如何节约仓储空间优化企业供应链?

随着仓储物流和电商行业的快速发展&#xff0c;自动化立库设备的技术不断完善。“货到人”拣选技术越来越受到行业的重视&#xff0c;且已逐渐成为供需双方关注的焦点。“货到人”拣选系统主要由储存系统&#xff0c;补货系统&#xff0c;输送系统&#xff0c;拣选系统和包装系…

嵌入式软件工程师面试题——2025校招社招通用(二十)

说明&#xff1a; 面试群&#xff0c;群号&#xff1a; 228447240面试题来源于网络书籍&#xff0c;公司题目以及博主原创或修改&#xff08;题目大部分来源于各种公司&#xff09;&#xff1b;文中很多题目&#xff0c;或许大家直接编译器写完&#xff0c;1分钟就出结果了。但…

Hive条件函数详细讲解

Hive 中的条件函数允许你在查询中基于某些条件执行逻辑操作。以下是你提到的条件函数的详细讲解,包括案例和使用注意事项: IF() 功能:根据条件返回两个表达式中的一个。语法:IF(boolean_test, value_if_true, value_if_false)案例:SELECT IF(1=1, true, false); 结果为 tr…

C语言宏定义(#define定义常量​、#define定义宏​、 带有副作用的宏参数、 宏替换的规则、 宏函数的对比)

目录 一、#define的基本语法 二、什么是宏 三、#define定义常量用法 基本语法&#xff1a; 思考&#xff1a;在define定义标识符的时候&#xff0c;要不要在最后加上 ; 四、#define定义宏 五、带有副作用的宏参数​ 六、宏替换的规则​ 七、宏与函数的对比​ 一、#def…

tinyxml2

tinyxml2类对象 链接 XMLDocument xml文档(文件)对象。 作用&#xff1a; 加载xml文件&#xff0c;

前端js 数据结构:对象 object、数组Array 、Map 的创建、增删改 / 遍历数据

目录 前端js 数据结构&#xff1a;对象、数组、Map 的使用1 对象&#xff08;object&#xff09;1.1 创建对象1.1.1 对象字面量(最常用): {}1.1.2 使用 new 关键字和对象构造函数1.1.3 Object.create() 1.2 修改对象1.2.1 直接赋值&#xff1a;对象的属性名直接赋值1.2.2 点号/…

介绍 Apache Spark 的基本概念和在大数据分析中的应用

Apache Spark 是一个开源的分布式计算系统&#xff0c;它旨在处理大规模数据集并提供高性能和易用性。Spark 提供了一个统一的编程模型&#xff0c;可以在多种编程语言中使用&#xff0c;包括 Scala、Java、Python和R。Spark 的主要特点包括&#xff1a; 快速&#xff1a;Spark…

网页设计(八)HTML5基础与CSS3应用

一、当当网企业用户注册页面设计 当当网企业用户注册页面 改版后当当网企业用户注册页面 <!-- prj_8_1.html --> <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>当当网企业用户注册页面设计</title><s…

第13章 1 进程和线程

文章目录 程序和进程的概念 p173函数式创建子进程Process类常用的属性和方法1 p175Process类中常用的属性和方法2 p176继承式创建子进程 p177进程池的使用 p178并发和并行 p179进程之间数据是否共享 p180队列的基本使用 p180使用队列实现进程之间的通信 p182函数式创建线程 p18…

Docker的本地化部署:加速软件开发周期的利器

在软件开发中&#xff0c;部署是一个至关重要的环节。随着云计算的兴起&#xff0c;人们开始在云端环境中进行应用部署&#xff0c;以获得更好的灵活性和可扩展性。然而&#xff0c;一些场景中&#xff0c;本地化部署仍然是必要的&#xff0c;它提供了更高的安全性和可控性。 本…

【算法Hot100系列】接雨水

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…