HTML5 自学 （一）

最新推荐文章于 2024-04-08 19:01:40 发布
最新推荐文章于 2024-04-08 19:01:40 发布
阅读量1.4k 收藏 2
点赞数 2
分类专栏： html 文章标签： html5 html 自学 超文本标记语言 web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YuYunTan/article/details/49993213
版权

HTML5简介

HTML（HyperText Markup Language ，超文本标记语言），是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
HTML是一种描述语言，不是编程语言，主要用于描述超文本中内容的显示方式。

HTML发展史

版本发布日期说明
超文本标记语言（第一版）1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）
HTML 2.01995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.21997年1月14日W3C推荐标准
HTML 4.01997年12月18日W3C推荐标准
HTML 4.011999年12月24日微小改进,W3C推荐标准
ISO/IEC 15445:2000（“ISO HTML”）2000年5月15日基于严格的HTML 4.01语法，是国际标准化组织和国际电工委员会的标准。
XHTML1.02000年1月26日是W3C推荐标准，后来经过修订于2002年8月1日重新发布。
XHTML 1.1于2001年5月31日W3C推荐标准。
XHTML 2.0未发布W3C工作草案。
HTML 5草案2008年1月22日第一份正式草案发布。
HTML52014年10月28日W3C推荐标准

浏览器兼容性分析

作为广泛应用的标记语言，HTML5出现很多特性，但却不是颠覆性的。其核心概念是新特性平滑过渡，一旦遇到浏览器不支持新功能，则以准备好的备选行为执行，以保障内容的正常显示。

效率和用户优先特性

HTML5标准的制定是以用户优先为原则的，一旦遇到无法解决的冲突，规范会把用户放到第一位，其次是网页作者，再次是浏览器，接着是规范制定者（W3C/WHATWG），最后才考虑理论的纯粹性。
因此，从整体看，HTML5的绝大部分特性还实用，只是某些情况下不完美。

本人使用的HTML的编辑器有记事本，intellij Idea 14.0.2，Subline text。
浏览器是使用火狐firefox，以及谷歌chrome。

学习HTML5

HTML简介

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b>和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

HTML 文档 = 网页

  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。

HTML5基本结构

文档类型说明

HTML5对文档进行了简化，简单到15个字符就可以，代码如下。

<!doctype html>

doctype 的声明需要出现在HTML文件的第一行。

HTML标记

HTML标记代表了文档的开始，由于HTML语法的松散特性，该标记可以省略，但为了使之符合Web标准和文档的完整性，养成良好习惯，建议不要省略。
HTML标记以<html>开头，以</html>结尾，文档的所有内容书写在开头和结尾的中间部分。
HTML标记的语法格式如下：

<!doctype html>
<html>
...
</html>

头标记

头标记head是用于说明文档头部相关信息，一般包括了标题信息、元信息、定义CSS样式和脚本代码等。
HTML的头部信息以<head>开头，以</head>结尾，语法格式如下。

<!doctype html>
......
<head>
......
</head>
......

<head>元素的作用范围是整篇文档，定义在HTML头部的内容往往不会在网页上直接显示。

在head标记中一般可以设置title和meta等标记的内容。

标题标记title

HTML页面的标题一般用来说明页面的用途，它显示在浏览器的标题栏中。在HTML文档中，标题信息设置在<head>和</head> 之间。标题标记以 <title> 开头，以</title>结尾，语法格式如下。

<!doctype html>
......
<title>
......
</title>
......

标记中间的”…“就是标题内容，可以帮助用户更好的识别页面。预览页面时，设置的标题在浏览器标题栏的左上方显示。此外还在Windows任务栏中显示中国标题。页面的标题只有一个，它们于HTML文档的头部，即<head>和</head>之间。

打开intellij idea14.0.2
1
选择file下面的newProject
2
选择static web
3
这里我创建demo
4

5
点击鼠标右键，如下图所示，选择new>html file
6
7
点击ok
8
范例1
这是示范demo1的源码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>第一个网页</title>
</head>
<body>
这是我编写的第一个网页
</body>
</html>

这是用网页打开的效果。【PS：intellij Idea把鼠标放置于编写网页源码的地方，停留不久会出现几个浏览器标志，点击便可预览】
采用火狐浏览器进行预览。
9

元信息标记meta

<meta>元素可提供有关页面的元信息（meta-information），如针对搜索引擎和更新频率的描述的关键词。
<meta>标签位于文档的头部，不包含任何内容。
<meta>标签的属性定义了与文档的相关的名称值对
下面是<meta>标签通过的属性及取值

1
1、字符集charset属性
在HTML5中，有一个新的charsett属性，使字符集定义更容易。

<meta charset="ISO-8859-1">

2、搜索引擎的关键字

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />

说明：
(1) content写入的是关键字
(2)不同关键字之间，应该用半角逗号(英文输入)隔开，不要使用”空格“或”|“。
(3) 是”keywords“不是”keyword“。
(4) 关键字标签内容应该是一个个短语，而不是一段话。

关键字标签设置要注意:

  • 关键字标签中的内容要与网页内容相关，确信使用的关键字在网页文本出现。
  • 使用用户易于通过搜索引擎检索的关键字，过于生僻字不适合。
  • 不要重复使用关键字
  • 不要超过5个关键字

  • 每个网页的关键字应该不一样

    3、页面描述
    Description元标签（描述元标签）是一种html元标签，用来初略描述网页的主要内容，通常被搜索引擎结果页给最终用户看的一段文字片段。页面描述在网页中不显示。
    格式：

<meta name="description" content="这里是我自学的地方" />

4、页面定时跳转
使用‘’标记可以使网页经过一段时间后自动刷新，可通过http-equiv属性值设置为refresh来实现。content属性值可以设置为更新时间。

<meta http-equiv="refresh" content="5" />

定时跳转到其他网页：

<meta http-equiv="refresh" content="秒;url=网址" />

5、 定义页面的最新版本：

<meta name="revised" content="tqw, 2015/11/23/" />

网页的主体标记

其本身可以控制网页的背景颜色或背景图像。
主体标记以<body>开头，以</body>标记结束，语法格式如下。

<!doctype html>
......
<body>
......
</body>
......

构建html结构，标记不允许交错，否则会造成错误
例如

<!doctype html>
<html>
<head>
<title>html标记</title>
<body>
</head>
</body>
</html>

body标签和head标签的结束标签发生交叉，这是绝不允许的。

页面注释标记

<!– –>
注释是在HTML代码中插入的描述性文本，用来解释该代码或提示其他信息。注释只出现在代码中，浏览器不会进行解释，并不显示出来。在HTML源码适当加入注释是一个好习惯，对日后的修改和维护有好处。也使得其他人很快读懂。
<!– 注释内容 –>
注释语句元素由前后两半部分组成，前半部分是由一个左尖括号、一个半角感叹号和两个连字符头组成，后半部分由两个连字符和一个右尖括号组成。

注意:

HTML5的页面中，大部分标签是成对出现，部分可以单独出现，如换行标签<p/>、<br/>、<img/>和<hr/>等

YuYunTan
关注
专栏目录
零基础学HTML5（完结）
m0_57541893的博客
01-28 660
嗨！大家好，我是子钦。目前读大二的菜菜，在不断摸索中...... 今天是HTML5的学习笔记及一点学习心得。我会尽量写的清楚，希望可以帮助到零基础的同学。HTML5中有各种各样的标签，加强记忆和练习掌握这部分知识是很容易的。 通常我们看到的网页是是以.htm或.html结尾的文件，通俗称为HTML文件。HTML是超文本标记语言，是用来描述网页的一种语言。 接下来我们一起开始学习HTML叭~ 网页的基本信息 下面是一段简单的代码 <!DOCTYPEhtml><!-- !D...
html5自学资料
11-26
html5 最新的开发技术最新的资料 供大家参考学习
HTML5自学笔记
m0_60121089的博客
03-10 375
HTML5 初识HTML Hyper Text Markup Language（超文本标记语言） 超文本包括：文字、图片、音频、视频、动画等 W3C World Wide Web Consortium (万维网联盟)。 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构。 http://www.w3.org/ http://www.chinaw3c.org/ W3C标准包括 结构化标准语言(HTML、 XML) 表现标准语言(CSS) 行为标准(DOM、ECMA
html5自学容易吗,HTML5自学难不难？
weixin_42347486的博客
05-30 161
原标题：HTML5自学难不难？HTML5自学难不难？很多人在自学HTML5的过程中，发现一个很严重的问题，那就是自学时好像并不是想象中的那么简单。 主要原因有以下几个方面：1.没有人指导。遇到难题如果没有人指导， 单纯的靠自己琢磨特别花费时间，不仅进度缓慢，而且最后自己也不一定能弄懂，时间一久就很容易放弃，这也是很多自学HTML5的人学着学着就放弃了的一个重要的原因。2.没有系统的学习思路。很多自...
3天html自学教程,HTML5自学
weixin_31863707的博客
05-31 130
1.1 标题文本在HTML5中，文本的结构除了以行和段落出现之外，还可以作为标题存在，通常一篇文档最基本的结构就是由不同级别的标题和正文组成的。例如1：(中国门户网站)例如2：(百度知道)例如3:(百度百科)1.1.1 标题文本的标签HTML5文档中的各级标题由< h1>到元素来定义，英文h是headline(标题行)的简称，其中，h1表示1级标题，级别最高，文字...
html5自学第一天
qq_30545445的博客
03-26 171
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf8"&gt; &lt;title&gt;文本列表&lt;/title&gt;&lt;/head&gt;&lt;body&gt; b元素：作用将文字加粗&lt;b&gt;html5&lt;/b&gt;
HTML5 自学文件【可以用于复习】
03-03
这个“HTML5自学文件”是一个非常适合用来复习和巩固HTML5知识的资源包。下面我们将深入探讨HTML5中的关键知识点。 1. 结构元素：HTML5引入了新的结构元素，如`<header>`、`<nav>`、`<section>`、`<article>`、`...
HTML5手册，自学HTML5
05-06
HTML5是现代网页开发的核心标准，它极大地扩展了HTML4的能力，提供了许多新的元素、属性和API，使得开发者能够创建更强大、更具交互性的网页应用。...这个手册将是你学习HTML5的宝贵工具，祝你在自学过程中收获满满。
最全自学笔记，自学路线Html5+css3.mmap
09-14
Html5+css3最全自学笔记，自学路线，最快入门方法，你指的拥有
HTML5自学教材源码
07-12
这个"HTML5自学教材源码"提供了HTML5中的一个重要组件——canvas的学习资源，它主要用于在网页上绘制图形、创建动画以及构建游戏。Canvas是HTML5的一个核心元素，允许开发者通过JavaScript进行动态图像处理，为网页...
HTML5自学之路12.28
jack_zj123的博客
12-28 329
源码+注释，学习canvas的使用 /*************************/ 功能：设置并显示文字，并通过浏览器进行查看 /************************/ &lt;html&gt;     &lt;canvas id = "MyCanvans"&gt;&lt;/canvas&gt;     &lt;script type="text/javascript"...
html5初学,[初学者html5如何学习]
weixin_33917217的博客
06-27 213
怎样才能有效的学习H5前端开发呢?学习前端开发我们都知道要学HTML、CSS、JS这些基本的知识，学习的内容基本差不多，但是学习的成果却千差万别。下面小编收集了一些关于html5习方法，希望对你有帮助html5习方法方法1 整体到局部，骨架到血肉在学习HTML和CSS时，会涉及到网页的搭建。学习这个知识时，我们采用的方法是“由外及内”，“由整体到部分”，“由全局到细节”。 学习东西，特别是在初识某...
HTML5（入门）
热爱编程、热爱生活、热爱探索
01-18 9807
<!--1.我的第一个网页.html(为HTML文件名)--> <!DOCTYPE html> <!--表示浏览器的使用规范，一般默认都是html的规范,所以可不要--> <html lang="en"> <head> <!--网页标题--> <meta charset="UTF-8"> <!--告诉浏览器编码类型为字符型编码 常见的字符编码--> <title>网页一.
HTML5基础入门
hhwzy_mqh的博客
08-13 885
精简的html入门介绍，目的在于让完全没接触过的同志能快速的了解html。通过学习最基本的html中的知识，即可以看懂大多数网站源代码中html的内容，也可以自己编写简单的静态web网站。
快速上手HTML5
weixin_74889578的博客
02-03 1768
HTML即超文本标记语言，是描述网页的一种标记语言，而不是编程语言。HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。
HTML5快速入门
最新发布
m0_58982887的博客
04-08 869
标题标签用<h1>来表示，不能超过h6，数字越大标签会越来越小；标题很重要，搜索引擎会根据标题来搜索（<h1>），会在标题下显示网页的内容（<h2>）当我们熟悉了之后会发现，h1标题是6号字体，h6标题是1号字体。<h1>标签内被叫做元素</h1>某些元素可以为空元素中可以嵌套元素，就像Python中多个IF嵌套一样。
HTML5学习（01）HTML概述
qq_33240767的博客
08-23 349
  学习开发网页，我们需要先了解网页的组成；他是由结构、表现、行为三部分组成，对应表现标准也是分为三部分； 结构化标准；HTML和XML。 表现标准；CSS。 行为标准；对象模型（W3CDOM）、JavaScript(简称JS）。   HTML是超文本标记语言（文本文件用特殊字符增添标记的一种规则），标记语言不能直接在网页上显示，需要通过浏览器的解析和编译之后才能显示出来。   HTML之...
自己学习html5培训到底好就业吗？
qianfeng_php的博客
12-22 980
在家买了几本书，看看免费视频，不懂就上百度问，我想这是大家自学的常用套路，说实话要想学好html5单靠自学真的学不好。在这里我总结了几个在家学习的弊端。
html5学习日志02
Interest_Soul的博客
03-21 514
h5基础 表单语法 文本框 密码框 单选按钮 复选框 列表框 按钮 多行文本域 文件域 邮箱 网址 数字 滑块 搜索框 placeholder input类型的文本框提供一种提
HTML5移动应用开发24小时自学指南
《Teach Yourself HTML5 Mobile Application Development in 24 Hours》是一本全面且实用的教程，适合对HTML5和移动应用开发感兴趣的初学者，通过系统的自学，能够在短时间内掌握构建移动应用所需的关键技术和实践...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YuYunTan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值