HTML5学习笔记<一>: 认识H5

时间：2022-02-17 21:03:29

什么是 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学习笔记&lpar;1&rpar;

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

随机推荐

  1. ADO&period;NET存取数据库数据

    步骤: //数据库连接串 string conStr = "......" //创建连接对象 SqlConnection connection = new SqlConnectio ...

  2. Microsoft Help Viewer

    Microsoft Help Viewer 1.0 Microsoft Help Viewer 2.0 Help Library 管理器 -Microsoft Help 查看器 打开VS 2010   ...

  3. 网络数据包发送工具PacketSender中文源码

    在网上发现了一个好用的工具PacketSender,数据包发送器.对于写网络程序来说,有很大的便利性.虽然在linux下,netcat工具也很好用,但是这个也不错. 原本是英文的,给翻译了一下.这是基 ...

  4. 清除行内元素之间HTML空白的几种解决方案

    行内块(inline-block)是非常有用的,特别是想要不用'block'和'float'来控制这些行内元素的margin,padding之时. 问题来了,HTML源码中行内元素之间的空白有时候显示 ...

  5. Windows Azure VM的两种shut down 方式

    今天在调查Azure的价格时,发现下面的语句,来自http://azure.microsoft.com/en-us/pricing/details/virtual-machines/ * If my ...

  6. 一个RTSP&sol;RTP over TCP 的丢包引起的问题

    背景知识:可以查看https://www.cnblogs.com/lidabo/p/4483497.html RTSP/RTP over TCP TCP承载RTSP/RTP   When you us ...

  7. 浅析mpvue的事件代理系统

    前言 说来惭愧,用 mpvue 大半年,小程序快一年了,居然还试图用 event.stopPropagation 方法阻止事件冒泡,也是有点蠢.痛定思痛,写篇博文来认真捋一捋小程序的事件系统和 mpv ...

  8. vue2&period;X的路由

    以 / 开头的嵌套路径会被当作根路径. <router-link> 在vue-router1.X中是以<a v-link=""></a>存在的 ...

  9. Linux -- 之HDFS实现自动切换HA（全新HDFS）

    Linux -- 之HDFS实现自动切换HA(全新HDFS) JDK规划 1.7及以上  https://blog.csdn.net/meiLin_Ya/article/details/8065094 ...

  10. winSockets编程（四）阻塞模式（服务端）

    在阻塞模式下,在I/O操作完成前,执行的操作函数将一直等候而不会立即返回,该函数所在的线程会阻塞在这里.相反,在非阻塞模式下,套接字函数立即返回,而不管I/O是否完成. 重点知识和思想: ////// ...

相关文章