详解HTML5语言
文章目录
- 前言
- 任务一 认识HTML5
- 任务描述:
- 知识一 HTML5基础知识
- 任务二 HTML 5语义元素
- 任务描述:
- 知识一 HTML5新增结构元素
- 知识二 HTML5文本语义元素
- 总结
前言
HTML5是一个新的网络标准,现在仍处于发展阶段。目标是取代现有的HTML 4.01和XHTML 1.0 标准。它希望能够减少互联网富应用(RIA)对Flash、Silverlight、JavaFX等的依赖,并且提供更多能有效增强网络应用的API。HTML5应用越来越广泛,移动设备例如iPhone、android等提供了对HTML5的支持。
任务一 认识HTML5
任务描述:
开始用HTML5设计网页之前,首先要掌握HTML5基础知识,如HTML5定义、浏览器的支持情况、编辑工具和文档格式,同时,要厘清HTML5与之前版本文档结构方法的不同,为HTML5构建网站准备必要的知识。
知识一 HTML5基础知识
1.什么是HTML5
HTML5 是超文本标签语言 (Hypertext Markup Language, HTML) 的最新版本,也是迄今为止最为激进的版本。HTML5比较其引人注目的一些新功能:
用于音频和视频的内置多媒体标签
用于在浏览器中绘制内容的画布标签
灵活的形式,允许通过使用必要属性完成诸如认证之类的操作。
HTML5使用一组新的结构化标签改进了 HTML文档构建方法。新标签重点关注如何将一个 HTML文档分成几个逻辑部分,标签名称对计划包含的内容类型进行了描述。
2. 浏览器支持情况
HTML5是一组独立标准的组合,有些标准已经得到一些浏览器很好的支持,有些标准则没有得到支持,不过,近年来主流浏览器的最新版本支持度越来越高,以下浏览器支持HTML5的绝大部分标准。
谷歌Chrome8及更高版本
Firefox3.5及更高版本
Safari4及更高版本
Opera10.5及更高版本
IE9及更高版本
注意:智能手机中绝大多数的浏览器对HTML5标准有很好的支持,HTML5开发移动web更为高效便捷。
3. 编写HTML5的工具
编写HTML5可以使用HTML之前的工具,如记事本、Notepad和Editplus等文本编辑器,当然,使用可视化编辑工具Dreamweaver,可以快速建立HTML5文档模板,也是很好的选择。本教材主要使用SublimeText3编辑器,Sublime Text3是一款非常实用的码编辑器,是一个轻量、简洁、高效、跨平台的编辑器,界面设置非常人性化,左边是代码缩略图,右边是代码区域,可以在左边的代码缩略图区域轻松定位程序代码的位置,高亮色彩功能非常方便编程工作。SublimeText3编辑器界面如图2.1所示。
4. HTML5基本文档格式
HTML5文档模板文件主要代码如下:
下面展示一些 内联代码片
。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>……
</body>
</html>
其中第一行<!DOCTYPE html>为文档类型声明,<!DOCTYPE> 声明必须位于 HTML5 文档中的第一行,也就是位于 <html> 标签之前。该标签告知浏览器文档所使用的 HTML 规范。
第二行HTML 的 lang 属性可用于网页或部分网页的语言,这对搜索引擎和浏览器是有帮助的。“en”表示英文,“zh”则表示中文。
第四行<meta charset="UTF-8">中设置字符编码为UTF-8,UTF-8是国际字符编码,也就是独立于任何一种语言,任何语言都可以使用。
任务二 HTML 5语义元素
任务描述:
HTML5与之前的版本一个最大不同,就是新增了语义和结构元素,因此,全面理解、掌握这些语义和结构元素,是构建HTML5网站的重要环节。部分元素有完整的示例代码,要亲自动手,编写代码,在浏览器中运行示例,最终掌握这些元素的具体用法。
知识一 HTML5新增结构元素
HTML5 通过提供一组标签更清晰地定义构成某个 HTML 文档的主要内容块。不管Web页面最终如何显示内容,大多数Web页面都是由常见页面和元素的不同组合构成的。
1.section元素
<section><h1>1 HTML5构建网站</h1><section><h2>任务一 认识HTML文档结构</h2><section><h3>1.1 知识一 HTML4文档结构方法</h3>(1.1的正文)<h3>1.2 知识二 HTML5文档结构方法</h3>(1.2的正文)</section><h2>任务二 HTML 5结构元素与大纲</h2><section><h3>2.1 知识一 HTML5新增结构元素</h3>(2.1的正文)<h3>2.2 知识二 HTML5中的大纲</h3>(2.2的正文)</section></section>
</section>
注意: 当描述一件具体的事物的时候,通常鼓励使用article来代替section;当使用section时,仍然可以使用h1来作为标题,而不用担心它所处的位置,以及其它地方是否用到;当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div元素而非section。
2. nav元素
nav元素代表页面的一个部分,是一个可以作为页面导航的链接组,其中的导航元素链接到其它页面或者当前页面的其它部分,使html代码在语义化方面更加精确,同时对于屏幕阅读器等设备的支持也更好。示例代码如下所示。
下面展示一些 内联代码片
。
<nav><ul><li>网络技术</li><li>多媒体设计</li><li>动漫设计</li></ul>
</nav>
3.aside元素
aside元素用来装载非正文的内容,被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的,可以被删除,而不会影响到网页的内容、章节或是页面所要传达的信息。例如广告、成组的链接、侧边栏等等。示例代码如下所示。
<aside><h1>教材简介</h1><p>《HTML5+CSS3网页制作与实训》</p></aside>
4.header元素
<header><hgroup><h1>网站标题</h1><h1>网站副标题</h1></hgroup>
</header>
5.footer元素
footer元素定义section或document的页脚,包含了与页面、文章或是部分内容有关的信息,比如说文章的作者或者日期。作为页面的页脚时,一般包含了版权、相关文件和链接。它和header元素使用基本一样,可以在一个页面中多次使用,如果在一个区段的后面加入footer,那么它就相当于该区段的页脚了。示例代码如下所示。
<footer>Copyright@张学义</footer>
6.hgroup元素
hgroup元素是对网页或区段section的标题元素(h1-h6)进行组合。例如,在一区段中有连续的h系列的标签元素,则可以用hgroup将它们括起来。示例代码如下所示。
<hgroup><h1>这是一篇介绍HTML 5结构标签的文章</h1><h2>HTML 5的革新</h2></hgroup>
7.figure 元素
用于对元素进行组合。多用于图片与图片描述组合。示例代码如下所示。
<figure><img src="img.gif" alt="figure元素" title="figure元素" /><figcaption>这儿是图片的描述信息</figcaption></figure>
知识二 HTML5文本语义元素
一个语义元素能够清楚的描述其意义给浏览器和开发者。
无语义元素无需考虑内容如
1.time元素
time元素定义日期、时间文本。实例代码如下所示:
<!doctype html>
<html>
<head><title>time</title>
</head>
<body><p>我的生日和 <time datetime="1980-02-14">情人节</time> 是同一天 ①</p><p>我每天 <time>9:00</time> 上班 ②</p><article><p>我是 article 的内容</p><footer>本 article 的发布日期是 <time datetime="2011-09-14" pubdate>昨天</time> ③ </footer></article><p>本html的发布日期是<time datetime="2011-09-15T12:46:46" pubdate>今天</time> ④</p><script type="text/javascript">// 目前无浏览器支持 valueAsDatealert(document.getElementsByTagName("time")[0].valueAsDate); ⑤</script>
</body>
</html>
代码解释:
① time用来定义日期、时间文本。
② datetime 用来定义元素的日期时间,如果不设置此属性则必须在time元素的内容中设置日期时间。
③pubdate 属于bool (逻辑)类型,标识 time 是否是发布日期。在 article 中则代表当前 article 的发布日期,否则代表整个 html 的发布日期。
④datetime值中的“T”代表时间(“T”前面是日期,后面是时间)。
⑤valueAsDate 是只读属性,将 time 中的日期时间转换为 Date 对象,目前无浏览器支持。
time元素实例运行效果如图2.8所示。
2.em元素
定义被强调的文本(一般浏览器会渲染斜体)(em是emphasis的缩写)。实例代码如下所示:
<!doctype html>
<html>
<head><title>em</title>
</head>
<body><em>被强调的文本(一般浏览器会渲染斜体)</em>
</body>
</html>
em元素实例运行效果如图所示。
3.mark元素
定义一个标记文本,用于醒目显示。实例代码如下所示:
<!doctype html>
<html>
<head><title>mark</title>
</head>
<body><p>我觉得咖啡的味道像 <mark>感冒冲剂</mark> </p>
</body>
</html>
- s元素
定义不再精确或不再相关的文本(s 是 strike 的缩写)。实例代码如下所示:
<!doctype html>
<html>
<head><title>s</title>
</head>
<body><p>windows 8 平板电脑</p><p><s>原价:5000元</s></p><p><strong>促销价:5元</strong></p>
</body>
</html>
效果如图所示。
5. strong元素
定义重要的文本(一般浏览器会渲染为粗体)。实例代码如下所示:
<!doctype html>
<html>
<head><title>strong</title>
</head>
<body><strong>重要的文本(一般浏览器会渲染为粗体)</strong>
</body>
</html>
strong元素实例运行效果如图所示。
6. small元素
定义小号文本。实例代码如下所示:
<!doctype html>
<html>
<head><title>small</title>
</head>
<body><small>小号文本</small>
</body>
</html>
small元素实例运行效果如图所示。
总结
本文讲解了HTML5的基本概念及结构网页的方法,然后讲解了HTML5的结构元素和文本语义元素,重点介绍了HTML5新元素,希望你对HTML5有一个全面的认识和掌握。
相关文章:

详解HTML5语言
文章目录 前言任务一 认识HTML5任务描述:知识一 HTML5基础知识 任务二 HTML 5语义元素任务描述:知识一 HTML5新增结构元素知识二 HTML5文本语义元素 总结 前言 HTML5是一个新的网络标准,现在仍处于发展阶段。目标是取代现有的HTML 4.01和XHT…...
docker compose一键启动ES集群和kibana
集群启用了XPACK后,只有第一次可以启动成功。要是宕机了。就启动不了了。(除非删除data目录所有数据)生产环境 启用了后 建议配置 自定义证书。 services:es01:image: "docker.elastic.co/elasticsearch/elasticsearch:7.17.25"co…...

遗传算法与深度学习实战(25)——使用Keras构建卷积神经网络
遗传算法与深度学习实战(25)——使用Keras构建卷积神经网络 0. 前言1. 卷积神经网络基本概念1.1 卷积1.2 步幅1.3 填充1.4 激活函数1.5 池化 2. 使用 Keras 构建卷积神经网络3. CNN 层的问题4. 模型泛化小结系列链接 0. 前言 卷积神经网络 (Convolution…...

pytest+allure生成报告显示loading和404
pytestallure执行测试脚本后,通常会在电脑的磁盘上建立一个临时文件夹,里面存放allure测试报告,但是这个测试报告index.html文件单独去打开,却显示loading和404, 这个时候就要用一些办法来解决这个报告显示的问题了。 用命令产生…...
为何划分 Vue 项目结构组件?划分结构和组件解决了什么问题?为什么要这么做?
在一个大型 Vue 项目中,合理的目录结构和组件划分至关重要。良好的结构可以提高开发效率,减少维护成本,并使得团队合作更加顺畅。下面我将详细讲解如何在 Vue 项目中进行目录结构和组件划分,并结合实际项目代码示例进行说明。 1. 为什么要划分结构和组件? 1.1 提高可维护…...

springboot中使用mongodb完成评论功能
pom文件中引入 <!-- mongodb --> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-mongodb</artifactId> </dependency> yml中配置连接 data:mongodb:uri: mongodb://admin:1234561…...
Dubbo的RPC泛化调用
目录 一、RPC泛化调用的应用场景 二、Dubbo RPC泛化调用的实现原理 三、Dubbo RPC泛化调用的实现步骤 四、示例代码 五、泛化调用怎么发现提供该接口的服务及服务的IP和端口? Dubbo的RPC泛化调用是一种在调用方没有服务方提供的API的情况下,对服务方…...
【k8s深入理解之 Scheme】全面理解 Scheme 的注册机制、内外部版本、自动转换函数、默认填充函数、Options等机制
参考 【k8s基础篇】k8s scheme3 之序列化_基于schema进行序列化-CSDN博客【k8s基础篇】k8s scheme4 之资源数据结构与资源注册_kubernetes 的scheam-CSDN博客常见问题答疑 【k8s深入理解之 Scheme 补充-1】理解 Scheme 中资源的注册以及 GVK 和 go 结构体的映射-CSDN博客【k8s深…...

接口性能优化宝典:解决性能瓶颈的策略与实践
目录 一、直面索引 (一)索引优化的常见场景 (二)如何检查索引的使用情况 (三)如何避免索引失效 (四)强制选择索引 二、提升 SQL 执行效率 (一)避免不必…...

雨晨 Windows Server 2025 数据中心 极简 26311.5000
文件: 雨晨 Windows Server 2025 数据中心 极简 26311.5000 install.esd 大小: 1740910278 字节 修改时间: 2024年11月29日, 星期五, 19:00:20 MD5: 5B946B9DED569E04917E804B25A0F736 SHA1: E78BB430B3E0397F6ACFEB821CF85EA7CFB5A00F CRC32: B3F76BD7 常规制作旨在测试YCDIS…...

关于IDE的相关知识之三【插件安装、配置及推荐的意义】
成长路上不孤单😊😊😊😊😊😊 【14后😊///C爱好者😊///持续分享所学😊///如有需要欢迎收藏转发///😊】 今日分享关于ide插件安装、配置及推荐意义的相关内容…...
JSP+Servlet实现列表分页功能
分享一种最简单的JSPServlet实现分页的方式! 旧:无分页功能的查询列表功能,仅供参考! Servlet try {Connection conn null;PreparedStatement ps null;ResultSet rs null;List<Dept> arrayList null;conn DBUtil.get…...
操作系统存储器相关习题
1 为什么要配置层次式存储器? 设置多个存储器可以使存储器两端的硬件能并行工作; 采用多级存储系统特别是Cache技术,是减轻存储器带宽对系统性能影响的最佳结构方案; 在微处理机内部设置各种缓冲存储器,减轻对存储器存取的压力。…...

QUICK 调试camera-xml解析
本文主要介绍如何在QUICK QCS6490使能相机模组。QCS6490的相机基于CameraX的框架,只需通过配置XML文件,设置相机模组的相关参数,就可以点亮相机。本文主要介绍Camera Sensor Module XML和Camera Sensor XML配置的解析,这中间需要c…...
【linux】shell脚本编写基础
shell 脚本关键字: 1、变量定义:前后不能空格 输入: zhao"Joe" echo ${zhao} echo "I am ${zhao}" 输出: yuxin I am Joe2、echo 输出 输入: echo "123" 输出: 1233、readonly 定义变…...
STM32 外设简介
STM32 外设简介 STM32 是由意法半导体 (STMicroelectronics) 开发的一系列基于 ARM Cortex 内核的微控制器,广泛应用于嵌入式系统中。STM32 系列的一个重要特点是其丰富而强大的外设模块,支持多种接口和功能,能满足工业控制、物联网、消费电…...
Django-Vue3-Admin - 现代化的前后端分离权限管理系统
项目介绍 Django-Vue3-Admin是一个基于RBAC(Role-Based Access Control)模型的综合性基础开发平台,专注于权限控制,支持列级别的细粒度权限管理。该项目采用前后端分离架构,技术栈包括: 后端: Django Django REST …...

Cesium K-means自动聚合点的原理
Cesium K-means自动聚合点的原理 Cesium 是一个开源的 JavaScript 库,用于在 Web 环境中创建 3D 地球和地图应用。它能够处理地理空间数据,并允许开发者对大规模的地理数据进行可视化展示。在一些应用中,尤其是当处理大量地理坐标点时&#…...
Vue 项目中如何解决组件之间的循环依赖
前言 在大型 Vue 项目中,组件之间的关系可能会变得非常复杂,甚至会出现循环依赖的问题。循环依赖是指两个或多个模块互相依赖,形成一个闭环。这类问题会导致项目无法正常编译或运行,甚至可能引发意想不到的错误。本文将通过通俗易…...

交通流量预测:基于交通流量数据建立模型
✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏…...

【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...
系统设计 --- MongoDB亿级数据查询优化策略
系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log,共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题,不能使用ELK只能使用…...

srs linux
下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935,SRS管理页面端口是8080,可…...

【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术,它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton):由层级结构的骨头组成,类似于人体骨骼蒙皮 (Mesh Skinning):将模型网格顶点绑定到骨骼上,使骨骼移动…...
rnn判断string中第一次出现a的下标
# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...
JAVA后端开发——多租户
数据隔离是多租户系统中的核心概念,确保一个租户(在这个系统中可能是一个公司或一个独立的客户)的数据对其他租户是不可见的。在 RuoYi 框架(您当前项目所使用的基础框架)中,这通常是通过在数据表中增加一个…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战,克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...
A2A JS SDK 完整教程:快速入门指南
目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库ÿ…...
Java编程之桥接模式
定义 桥接模式(Bridge Pattern)属于结构型设计模式,它的核心意图是将抽象部分与实现部分分离,使它们可以独立地变化。这种模式通过组合关系来替代继承关系,从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

论文阅读:Matting by Generation
今天介绍一篇关于 matting 抠图的文章,抠图也算是计算机视觉里面非常经典的一个任务了。从早期的经典算法到如今的深度学习算法,已经有很多的工作和这个任务相关。这两年 diffusion 模型很火,大家又开始用 diffusion 模型做各种 CV 任务了&am…...