对HTML5的初步认识(一)

本文介绍了HTML5的基本概念,包括其作为最新一代HTML标准的地位及其新增特性。详细解释了HTML5标签的作用,并通过实例展示了如何构建基本的HTML5网页结构。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、概述

1、HTML5是什么?

  HTML5是最新一代的HTML标准,它不仅拥有HTML中所有的特性,而且增加了许多实用的特性,如视频、音频、画布(canvas)等。 2012年12月17日,万维网联盟(W3C)正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称:“HTML5是开 放的Web网络平台的奠基石。”

 

2、HTML5的标签是指什么?什么是标签?

  标签是HTML语言最基本的元素和组成部分,他使一个网页分出范围,内容区,解释区及各种内容的引用,简单地说,标签是使网页内各种内容互相区分,使内容与数据更加有序的,特殊的。作为一种标签语言,HTML有着自己的规范,长久以来,HTML语言因为被浏览器全面卓越地兼容而产生了大量的应用,这不仅影响了世界,同时也吸引了大量的开发人员加入其中,与此同时,HTML在浏览器端应用在延申引发一系列的变化和问题。

 

3、HTML5标签的用途?

  1、使Web页面的内容更加有序和规范。

  2、使搜索引擎更加容易按照HTML5规则识别出有效的内容。

  3、使Web页面更接近有一种数据字段和表。

 

4、HTML5的优势:

 

  1、解决跨浏览器问题

  2、部分替代了原来的JavaScript

  3、更明确地语义支持

  4、增强了Web应用程序的功能

 

 5、HTML5网页的基本结构:

  1、想自己做也网页首先第一步:

  先建立一个文本,把格式换成html。

第二步:右键编辑下面的代码

1 <!DOCTYPE html>
2 <html>
3     <head>
4           <title>指定浏览器标题栏中的文本</title>    
5     <head>
6     <body>
7            <b>这是我的第一个网页</b>   
8     </body>
9 </html>

 注:编写时一定要注意语法的正确性。

双击打开编写好的网页,会看见

一定要注意的是标签都是有始就会有终在你定义一个标签的的时候

比如:你定义一个head容器时,你要在写完内容时,在内容后面加上</head>。

 

对标签有一定的了解后,下面我们学习一下每个标签的作用。

 

6、<h1>到<h6>标签

  <h1>到<h6>标签可定义标题的大小,<h1>定义最大的标题,<h6>定义最小标题。

  例如:

 

打开浏览器,看看运行效果

 

注意:<hn></hn>这些标签显示黑体字

   <hn><.hn>这些标签自动插入一个空行,不必用<p>标签再加空行,因此在一行中无法使用不同大小的字体,所以它们也是段落级标签。

 

7、<p>标签

  <p>标签定义段落。p元素会自动在前后创建一行空白行,浏览器会自动添加这些空间

 

 

8、<br>标签

<br />可插入一个简单的换行符。

 注:<br>标签是空标签(意味着它没有结束标签,因此这是错误的:<br></br>),在HTML5中,吧结束标签放在开始标签中,也就是<br />

  <br>标签只是简单地开始新的一行,在相邻的上下间不会出现行。

错误示范:刚接触的人,肯定会觉得换行就回车一下,可恰恰这是错误的

刚接触的人,肯定会觉得换行就回车一下,可恰恰这是错误的。

看错误效果

 

正确的示范:

  

 

 

运行效果

 

9、<hr>标签

  标签在HTML页面中创建一条水平线。

  水平分割线可以在视觉上将文档分隔成多个部分。

例如:

 

运行效果

 

 

10、<!--    -->标签

  对代码进行注释。

 

  每个标签都有属于他们的属性

效果

 

以上是对HTML5的小部分标签的总结。如果有不足的地方也希望能多多包含并指出问题,共同学习,谢谢!

 

转载于:https://www.cnblogs.com/xym15079750872/p/10628522.html

HTML 5 特性 官方详细的文档是寻找 HTML5 特性的最好地方,当然你还可以轻松通过 W3Schools 来学习HTML5 标签。我们将会在文章中涉及到以下的特性: • 语义化标记 • Form 表单增强功能 • 视频 / 音频 • 画布(Canvas) • 可编辑内容 • 拖放 • 稳健的数据存储 检测浏览器支持 在你开始尝试 HTML5之前,需要知道各主流浏览器的支持状况。这些有用的资源,将可以帮助你向着正轨走: • 何时能用 • 网页设计师的浏览器支持列表 • HTML5 测试 • 布局引擎对比 你还可以运行 Javascript(用Javascript 检测浏览器特性)来检测 HTML5 特性的支持。你还应该用用Modernizr: 个非常不错的检测 HTML5/CSS3 本地支持的 Javascript 库。如果你选择用 Mootools可以使用MooModernizr (MooTools port of Modernizr)。 你可能也会想留意不断变化的"浏览器市场份额分享" — 这些信息对于你决定用何种解决或折衷的方法将会是非常必要的。 值得注意的变更点 除了新的特征,你还应该记下这些重要的变更点: • 简洁的 DOCTYPE HTML5 只需个简洁的文档类型:。它有意不使用版本,因此文档将会适用所有版本的HTML。 • 简单易记的语言标签 你并不需要在 <html> 中使用 xmlns 或 xml:lang 标记。 <html lang="en"> 将对 HTML5 有效。 • 简单易记的编码类型 你现在可以在 meta 标签中使用 "charset":<meta charset="utf-8″ /> • 不需要闭合标签 在 HTML5 中,空标签(如:br、img 和 input )并不需要闭合标签。 • 废弃的标签 下面这些标签并不被 HTML5 支持: <acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<s>、<strike>、<tt>、<u> 和 <xmp> 简单代码示例: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Document</title> </head> <body> </body> </html> 你可以使用HTML5 Validator 或 W3C Markup Validation Service 来测试你的 HTML5 文档。 语义化标记 HTML5 新增的些新标签除了不仅仅是更具语义的 标签的替代品,并不提供额外的功能。这些都是新增的标签:、、、、<header>,、、、、 和 。 这些标签被除了IE 外的所有现代浏览器(Firefox 3+、Safari 3.1+、Chrome 2+、and Opera 9.6+)支持。Javascript 提供了document.createElement(tagName) 的方法,让你可以用来创建新的 HTML5 标签。代替自己创建这些元素,你还可以用HTML5 Enabling Script 或 IE Print Protector — 这些脚本将帮助 IE 正常处理 HTML5 元素的渲染。 你可能会想到添加 CSS Reset 到这些新元素上。这里是些可以用在你以 HTML5 为基础的项目的CSS Reset: • HTML5 Reset CSS • Reset5 简单代码示例: 兼容 IE 的 HTML5 页面布局 <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Semantic Markup Demo: Cross Browser</title> <link rel="stylesheet" href="html5reset.css" type="text/css" /> <link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" /> <!--[if lt IE 9]> [removed][removed] <![endif]--> </head> <body> <header> Page Header Page Sub Heading </header> Home Projects Portfolio Profile Contact <header> Article Heading May 5th, 2010 </header> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <header> Section Heading </header> Ut sapien enim, porttitor id feugiat non, ultrices non odio. Section Footer: Pellentesque volutpat, leo nec auctor euismod <header> Section Heading </header> Lorem ipsum dolor sit amet, consectetur adipiscing elit. FigCaption: Club, Heart, Spade and Diamond Ut sapien enim, porttitor id feugiat non, ultrices non odio Section Footer: Pellentesque volutpat, leo nec auctor euismod est. Article Footer <header> Siderbar Heading </header> Ut sapien enim, porttitor id feugiat non, ultrices non odio. Page Footer </body> </html> 注意:没有个 div 标签,id 或 class 属性被使用到 — 简洁、小巧和更语义化的标记 (View Demo)。你仍可以用 HTML5 Validator 或 W3C Markup Validation Service 来检测你的 HTML5 文档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值