什么是 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. 自用LogSystem入库分享

    .mytitle { background: #2B6695; color: white; font-family: "微软雅黑", "宋体", "黑 ...

  2. 转载:深入探讨 Java 类加载器

    转载地址 : http://www.ibm.com/developerworks/cn/java/j-lo-classloader/ 深入探讨 Java 类加载器 类加载器(class loader) ...

  3. 史上最全的synchronized解释

    首先:推荐使用synchronized(obj)这种方法体的使用方式,一个类里面建议尽量使用单一的同步方法,多种方法混用,维护成本太大. 其次:关于java5.0新增的ReenTrantLock方法: ...

  4. MATLAB绘制等高线和梯度场

    clear;clc;close all [X,Y] = meshgrid(-:.:); % 产生网格数据X和Y Z = X.*exp(-X.^ - Y.^); % 计算网格点处曲面上的Z值 [DX,D ...

  5. 02月刊(上) | 微信小程序

    * { margin: 0; padding: 0 } .con { width: 802px; margin: 0 auto; text-align: center; position: inher ...

  6. ActionMode 就记这么一点,不能更多了

    话说程序猿都是段子手,看到有的程序猿写文章,前面都会先写一个段子,我这么有幽默感的段子手,也决定效仿一下. "段子." 写完段子,下面开始进入正题. 今天要说的 ActionMod ...

  7. C/C++中的联合体

    C/C++中的联合体 利用union可以用相同的存储空间存储不同型别的数据类型,从而节省内存空间.当访问其内成员时可用"."和"->"来直接访问. 当多个 ...

  8. 使用express.js框架一步步实现基本应用以及构建可扩展的web应用

    最近过年在家有点懈怠,但是自己也不断在学习新的前端技术,在家琢磨了express.js的web框架. 框架的作用就是提高开发效率,快速产出结果.即使不使用框架,我们也会在开发过程中逐渐形成构成框架. ...

  9. matlab 逻辑数组及其应用

    这几天学习了matlab的逻辑数组功能,总的感觉就有两点: 第一,通过对原来的数组a进行逻辑判断后得到逻辑数组b 第二,逻辑数组进行某种运算符操作又回到原数组类型 第三,利用逻辑数组mask功能 测试 ...

  10. Unity渲染优化中文翻译(三)——GPU的优化策略

    如果游戏的渲染瓶颈来自于GPU 首要任务就是找出造成GPU瓶颈的因素所在,通常GPU的性能受到像素分辨率的影响,特别是在移动客户端的游戏,但是内存带宽和顶点计算的影响也需要注意.这些因素的影响都需要实 ...