HTML5基础知识（一）---标签

FuGardenia 2024-10-27 16:19:05 原文

在HTML5中，Web页面中重新调整了页面规划，这其中新引入了几个新标记。


我们将创建一个简单的Web页面，该页面包含一个Header区、一个Navigation区、一个Article区(包含三个部分)、一个Aside区和一个Footer区，使用这种结构可以清楚地展示HTML5中新引入的标记，并且可以使用它们创建一个结构清晰、代码优雅的页面。
Header区
我们将使用

标记来创建页面中Header区的内容，一般在这部分添加正副标题,当然也可以包含其他的一些重要信息，代码示意如下:
代码清单1.

标记

正标题

副标题


.......


标记中还可以包含

标记，用来对

到

`的等级别的标题进行分组，代码如下: 代码清单2.标记主标题子标题 .......... Navigation区使用`
`标记创建Navigation区，代码如下: 代码清单3.`
标记标题一标题二标题三 Article和Section区在HTML5出现之前，标签是我们使用非常频繁的标签，它本身没有任何语义，仅仅是作为布局以及样式化所用。 HTML5新增了和标签，其实就是语义化的标签，并且div>section>article，其语义是逐渐增强的，如一段主题性的内容，适用于使用标签，而若其可以脱离上下文，作为独立的一段内容，则可以使用标签。代码清单4. 和标记第一板块新闻一新闻起因新闻经过新闻结果第二板块新闻二新闻一新闻起因新闻经过新闻结果可以这么认为，、、是特殊的，能使用标签的就尽量不要使用，而和等标签之间也是可以相互嵌套的，就如上述代码所示。 Aside区使用标记可以创建Aside区，该标记作用是容纳一些补充性内容，这些内容不属于文章的一部分。代码清单5. 标记 Some Tips bla bla bla bla.... Footer区使用标记来说明页面的页尾信息，代码如下: 代码清单6. 标记 &copy 2014 by zbx,scau 新增标记图像元素使用元素来包含图像信息，其中还可以包含，用来对图像的文字补充说明。代码如下所示: 代码清单7. 标记文字说明媒体元素 HTML5中新增了和标签来对媒体元素进行播放，其中是播放声音内容，而是用来播放视频内容中，在标签中还添加了preload、control、loop和autoplay属性来对音频进行播放控制。代码清单8.标记 Your browser does not support the audio tag. 代码清单9.标记 Your browser does not support the HTML 'audio' element. source标签的作用就是，若wma格式无法播放，则会尝试播放mp3格式的音乐代码清单10.标记 ? 1 embed标签的元素可以嵌入到页面中的内容，如上述代码所示。约定俗成声明在HTML5中声明统一为: HTML5基础知识（一）---标签的更多相关文章 HTML5基础知识及相关笔记 HTML5基础 1.1HTML文件的基本结构和W3C标准 1.1.1HTML简介 HTML是一种描述网页的语言,一种超文本标记的语言! 1.1.2HTML文件的基本结构头部(head) 头部是网页的 ... 【前端】之HTML5基础知识 HTML5 文件格式 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ... HTML5 基础知识（1）——基本标签 ## HTML概念:是最基础的网页开发语言(Hyper Text Markup Langage 超文本标记语言) > 1.超文本:超文本是用超链接的方式i,将各种不同空间的文字组织在一起 ... HTML5基础知识（2）--标题标签的使用 1.HTML文档中包含各种级别的标题,各种级别的标题由<h1>到<h6>元素来定义,<h1>至<h6>标题标记中的字母h是英文headline的简称.其 ... html5基础知识 html5+css3 html5定义很多简便东西和宽松语法: 文档头: <!doctype html> 文档编码: <meta cha ... 【HTML】 HTML基础知识一些标签额..是这样的,去年为了学习web框架,自己开发了一个zbx配置管理的二次开发系统,当时从零开始接触web开发,也第一次接触到了前端的一些知识.其中最基础的就是html/css了.我把那部分笔记整理上 ... Web的架构与html5基础知识图1:完整的Web应用构架图2:html5的基本结构 head 可添加在头部标签元素有→→title meta style link base script noscript meta 几个重要属性 ... HTML5基础知识汇总（一）一.HTML的开发工具和使用的浏览器开发工具:记事本等文本编辑器,Atom.VisualStudioCode( VSCode).Brackets.Sublime text和Hbuider. 浏览器: ... 前端 | HTML5基础知识 1 HTML定义 HTML(英文Hyper Text Markup Language的缩写)中文译为"超文本标签语言",主要是通过HTML标签对网页中的文本.图片.声音等内容进行描 ... 随机推荐【三支火把】---一份程序看懂C程序printf()的几种常用用法闲来继续巩固我的学习之路,今天略微整理了一下,C程序中Printf()的一些常用用法,虽然自己以前好像会,但是不够系统,今天大致整理了一些,先贴上来看看,以后在看到其他,继续补充,希望能帮到一些像我一 ... bug,不该怕~敢敢test就是了转载自:http://bbs.itcast.cn/thread-10103-1-1.html 当程序员的经历让我知道了一些关于软件编程的事情.下面的这些事情可能会让朋友们对软件开发感到惊讶: 一个程序 ... C++ 运行时类型识别知道实例父类类型，显示出子类类型 typeid(nets_[i]).name() 其中的nets_[i]是一个对象在Spring中使用JDK定时器实现调度任务在Spring中使用JDK定时器实现调度任务作者:chszs,转载需注明.博客主页: http://blog.csdn.net/chszs 本文探讨Spring如何集成JDK的Timer定时器,实现 ... Android执行shell命令一.方法 /** * 执行一个shell命令,并返回字符串值 * * @param cmd * 命令名称&参数组成的数组(例如:{"/system/bin/cat", &q ... Java虚拟机学习 - 对象访问对象访问会涉及到Java栈.Java堆.方法区这三个内存区域. 如下面这句代码: Object objectRef = new Object(); 假设这句代码出现在方法体中,"Object ... js渐变显示渐变消失以下是渐变的js代码(表示多余三行的要隐藏,点击"more"显示剩下的,点击“less”要逐渐隐藏): function showAccomplishmentTableRow(){ ... 使用split进行分割时遇到特殊字符的问题使用split分割时: String[] a="aa|bb|cc".split("|"); output: [a, a, |, b, b, |, c, c] 先 ... C++面试题算法 #include <iostream> #include <string> using namespace std ; /* 题目:给一个字符串.例如 "ababc& ... iOS多线程开发--NSThread NSOperation GCD 多线程当用户播放音频.下载资源.进行图像处理时往往希望做这些事情的时候其他操作不会被中断或者希望这些操作过程中更加顺畅.在单线程中一个线程只能做一件事情,一件事情处理不完另一件事就不能开始,这样势 ...

	
			
	热门专题
		
											
					css 盒子翻转效果				
								
					django 不存在就新增,存在就更新				
								
					数组内容拼接,sql in				
								
					feignclient注解配置name和url				
								
					jspa标签如何向后台传递的参数				
								
					mac 查看进程中的线程				
								
					LUA 字符串完全匹配				
								
					vue pop返回参数				
								
					@touchmove禁止上下滑动				
								
					webstorm package.json 文件说明				
								
					怎样写一个自动安装服务的exe				
								
					SQL_BUFFER_RESULT使用的好处				
								
					css 圆形 百分比				
								
					phpstorm 正则替换空行失效				
								
					springboot后端向前端传数据				
								
					kafka外网访问不了				
								
					python把所有子文件夹中的文件移到主文件夹				
								
					php popen 执行shell				
								
					html 页面的局部刷新				
								
					sqlserver里的date（）





	
		
			
			
				Home
				
				
					Powered By WordPress