什么是 HTML5?


HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5 新规则:


  • 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
  • 减少对外部插件的需求(比如 Flash)
  • 更优秀的错误处理
  • 更多取代脚本的标记
  • HTML5 应该独立于设备
  • 开发进程应对公众透明

新特性


HTML5 中的一些有趣的新特性:

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素,比如 article、footer、header、nav、section
  • 新的表单控件,比如 calendar、date、time、email、url、search

浏览器支持


最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

HTML基础讲解


1. 声明:<!DOCTYPE>

 HTML也有多个不同的版本, 只有完全明白页面中使用的确切HTML版本, 浏览器才能完全正确地显示HTML页面. 这就是<!DOCTYPE>的用处.

 HTML5:

<!DOCTYPE html>

HTML4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML1.0:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

2. HTML基础标签

  head, body

  • HTML 标签是由尖括号包围的关键词,比如 <html>
  • HTML 标签通常是成对出现的,比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签
  • <html>
    <head> </head>
    <body> <h1>My First title</h1> <p>here is the first paragraph.</p> </body>
    </html>

  例:

  • <html> 与 </html> 之间的文本描述网页
  • <head>与</head> 之间的是head部分
  • <body> 与 </body> 之间的文本是可见的页面内容
  • <h1> 与 </h1> 之间的文本被显示为标题
  • <p> 与 </p> 之间的文本被显示为段落

3. HTML标题

  <h1>...<h6>等标签进行定义

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>基础</title>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<p>这是我的第一个H5程序</p>
</body>
</html>

3. HTML段落

  <p>标签定义段落

4. HTML连接

  <a> 标签定义连接

<a href="www.baidu.com">找度娘</a>

5. HTML图像

  <img>标签定义图像

<img src="照片的路径, 可以是网络的, 可以是本地的">

注: 开发工具 推荐使用IntelliJ IDEA, 下载地址:http://www.jetbrains.com/idea/

  推荐下载企业版(旗舰版), 破解参考:http://idea.lanyus.com/

欢迎大家提问, 我尽我所能的为大家解答, 一起学习, 共同成长~

南心芭比: 热爱分享, 收获快乐~

HTML5学习笔记<一>: 认识H5的更多相关文章

  1. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  3. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  4. HTML5学习笔记(四):H5中表单新增元素及改良

    方便布局 表单内容可以放在表单标签之外,这样做的好处是方便设计时不用考虑一定要将表单元素放在指定的form标签之下,只要指定元素适用于哪个表单即可,如下: <form id="test ...

  5. HTML5学习笔记(一):HTML简介

    Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...

  6. CSS3秘笈第三版涵盖HTML5学习笔记6~8章

    第二部分----CSS实用技术 第6章,文本格式化 指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...

  7. CSS3秘笈第三版涵盖HTML5学习笔记1~5章

    第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...

  8. HTML5 学习笔记(一)——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  9. Html5学习笔记(1)

    1.figure\figcaption||detail\summary||mark学习笔记 效果图 代码为: <!DOCTYPE html> <html> <head&g ...

随机推荐

  1. Codeforces374A

    A. Inna and Pink Pony time limit per test1 second memory limit per test 256 megabytes input standard ...

  2. [html] 学习笔记-Canvas图形绘制处理

    使用Canvas API 可以将一个图形重叠绘制在另外一个图形上,也可以给图形添加阴影效果. 1.Canvas 图形组合 通过 globalCompositeOperation = 属性 来指定重叠效 ...

  3. 分布式搜索之搭建Solrcloud(Solr集群)

    Solrcloud介绍: SolrCloud(solr集群)是Solr提供的分布式搜索方案. 当你需要大规模,容错,分布式索引和检索能力时使用SolrCloud. 当索引量很大,搜索请求并发很高时,同 ...

  4. 内功心法 -- Java中的深拷贝和浅拷贝

    写在前面的话:读书破万卷,编码如有神--------------------------------------------------------------------这篇博客主要来谈谈" ...

  5. WPF DEV CellTemplateSelector(一个正确使用DevExpress CellTemplateSelector的Demo)

    说明 我在项目中根据需求需要用到WPF Dev CellTemplateSelector时,遇到不少坑.曾一度想要放弃使用模板转换器,但又心有不甘,终于在不断努力下,达到了需求的要求.所以写下来和大家 ...

  6. (@WhiteTaken)设计模式学习——单例模式

    单例模式,个人理解就是,使用了这个模式,可以保证一个类只生成唯一的实例对象.就是在整个程序中,这个类只存在一个实例对象. GoF对单例模式的定义:保证一个类,只有一个实例存在,同时提供能对该实例加以访 ...

  7. JavaScript嗅探执行神器-sniffer.js,你值得拥有!

    一.热身--先看实战代码 a.js 文件 // 定义Wall及内部方法 ;(function(window, FUNC, undefined){ var name = 'wall'; Wall.say ...

  8. 《解决在Word中为汉子插入拼音及音标的问题》

    说明:本人使用的是Word2007版本.以下示例都是基于本人电脑操作.如有疑问,欢迎留言交流. [1]为word中的一些文字添加拼音及音标. [2]开始为文字添加拼音及音标. 选中要添加拼音及音标的文 ...

  9. Swift 面向对象解析(二)

    接着上面一篇说的内容: 一 继承: 苹果继承与水果,苹果是水果的子类,则苹果是一种特殊的水果:这就是继承的关系,这个我们学OC的时候相信也都理解了,就不再描述定义了,下面的就叫继承: class ZX ...

  10. AngularJS自定义指令之可选参数replace

    replace是一个可选参数,如果设置了这个参数,值必须为true,因为默认值为false.默认值意味着模板会被当作子元素插入到调用此指令的元素内部: 如: <my-directive>& ...