学习HTML5从0基础开始

html5

1.html是什么?

Hyper Text Markup Language( 超文本标记语言 )

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

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

2.html的发展史

​ HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。HTML产生于1990年,1997年HTML4成为互联网标准,并广泛应用于互联网应用的开发。 [4]

在前五年(1990-1995),HTML经历了多次修订并经历了许多扩展,主要是在欧洲核子研究中心首先托管,然后是IETF。 [2]

随着W3C的创建,HTML的发展再次改变了场地。 1995年第一次尝试在HTML 3.0中扩展HTML,然后在1997年完成了一种称为HTML 3.2的更实用的方法。同一年晚些时候,HTML 4.01很快就出现了。

第二年,W3C成员决定停止发展HTML,而是开始研究基于XML的等价物,称为XHTML。这项工作始于XML中的HTML 4.01重新编写,称为XHTML 1.0,除了新的序列化之外没有添加任何新功能,并且在2000年完成。在XHTML 1.0之后,W3C的重点转向使其他工作组更容易在XHTML模块化的旗帜下扩展XHTML。与此同时,W3C还开发了一种与早期HTML和XHTML语言不兼容的新语言,称之为XHTML 2.0。

大约在1998年停止HTML演变的时候,浏览器供应商开发的HTML部分API被命名并以DOM Level 1(1998年)和DOM Level 2 Core和DOM Level 2 HTML(从2000年开始)发布。最终于2003年)。这些努力随后逐渐消失,2004年发布了一些DOM Level 3规范,但工作组在所有3级草案完成之前就已关闭。

2003年,作为下一代Web表单定位的技术XForms的出版引发了对HTML本身发展的新兴趣,而不是寻找它的替代品。这种兴趣来自于认识到XML作为Web技术的部署仅限于全新技术(如RSS和后来的Atom),而不是替代现有的已部署技术(如HTML)。

一个概念证明,可以扩展HTML 4.01的表单,提供XForms 1.0引入的许多功能,而不需要浏览器实现与现有HTML网页不兼容的渲染引擎,这是第一个结果。重新兴趣。在早期阶段,虽然草案已经公开发布,并且已经从所有来源征求意见,但该规范仅受Opera Software的版权保护。

在2004年的W3C研讨会上测试了HTML应该重新开放的想法,其中提出了HTML工作的一些原则(如下所述),以及上述早期草案提案,仅涉及与表单相关的功能,由Mozilla和Opera联合推出的W3C。该提案被驳回,理由是该提案与之前选择的网络发展方向相冲突; W3C的工作人员和成员投票决定继续开发基于XML的替代品。

此后不久,Apple,Mozilla和Opera联合宣布他们打算在一个名为WHATWG的新场地的保护下继续努力。创建了一个公共邮件列表,草案已移至WHATWG站点。随后将版权修改为由所有三个供应商共同拥有,并允许重复使用该规范。

WHATWG基于几个核心原则,特别是技术需要向后兼容,规范和实现需要匹配,即使这意味着更改规范而不是实现,并且规范需要足够详细,实现可以实现完整的互操作性,无需相互逆向工程。后一要求特别要求HTML规范的范围包括先前在三个单独的文档中指定的内容:HTML 4.01,XHTML 1.1和DOM Level 2 HTML。它还意味着包含比以前被认为是标准更多的细节。

2006年,W3C表示有兴趣参与HTML 5.0的开发,并于2007年组建了一个工作组,专门与WHATWG合作开发HTML规范。 Apple,Mozilla和Opera允许W3C在W3C版权下发布规范,同时保留WHATWG网站上限制较少的许可版本。多年来,两个小组在同一编辑下共同工作:Ian Hickson。在2011年,小组得出的结论是,他们有不同的目标:W3C希望为HTML 5.0推荐的功能划清界限,而WHATWG希望继续致力于HTML的生活标准,不断维护规范和添加新功能。 2012年中期,W3C推出了一个新的编辑团队,负责创建HTML 5.0推荐标准,并为下一个HTML版本准备工作草案。

3.html编辑器

使用 Notepad 或 TextEdit 来编写 HTML

可以使用专业的 HTML 编辑器来编辑 HTML:

  • Adobe Dreamweaver
  • Microsoft Expression Web
  • CoffeeCup HTML Editor

不过,我们同时推荐使用文本编辑器来学习 HTML,比如 Notepad (PC) 或 TextEdit (Mac)。我们相信,使用一款简单的文本编辑器是学习 HTML 的好方法。

通过记事本,依照以下四步来创建您的第一张网页。


步骤一:启动记事本

如何启动记事本:

开始
所有程序
附件
记事本


步骤二:用记事本来编辑 HTML

在记事本中键入 HTML 代码:在这里插入图片描述

步骤三:保存html

在记事本的文件菜单选择“另存为”。

当您保存 HTML 文件时,既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别,完全根据您的喜好。

在一个容易记忆的文件夹中保存这个文件,比如 w3school。


步骤四:在浏览器中运行这个 HTML 文件

启动您的浏览器,然后选择“文件”菜单的“打开文件”命令,或者直接在文件夹中双击您的 HTML 文件。

结果应该类似这样:在这里插入图片描述

4.HTML基本结构

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

</head>

<body>

  

</body>

</html>

5.基本标签的使用

5.1title标签

在这里插入图片描述

5.2meta标签

在这里插入图片描述

5.3标题标签

HTML 标题(Heading)是通过

-

等标签进行定义的。

 <h1></h1> #一级标题
    <h2></h2> #二级标题
    <h3></h3> #三级标题
    <h4></h4> #四级标题
    <h5></h5> #五级标题
    <h6></h6> #六级标题

5.4段落标签

HTML 段落是通过

标签进行定义的。

<p></p>
    <p></p>

5.5 换行标签

<br/>

5.6 水平线标签

<hr/>

5.7 字体样式标签

<strong>…</strong>加粗  斜体:<em>…</em>

5.8 图像标签

1. 图片的格式

  • JPG

  • PNG

  • BMP

  • GIF

    2.标签

在这里插入图片描述

<img src="w3school.jpg" width="104" height="142" />

5.9 超链接

<a href="http://www.baidu.com.cn">百度网址</a> <!--页面间的跳转-->
<a href="hello.html">百度网址</a>

# target属性的值的区别 target="_blank" # 会打开一个新的窗口 target="_self" # 在自己的窗口打开

在这里插入图片描述

6.注释和特殊符号

6.1注释

<!--开头 以-->结尾 快捷键: Ctrl+/ 

6.2特殊符号

在这里插入图片描述

7.块元素和行内元素

块元素 : 无论内容多少,该元素独占一行(p、h1-h6…)
行内元素 : 内容撑开宽度,左右都是行内元素的可以排在一行(a、strong、em…)

猜你喜欢

转载自blog.csdn.net/xiamilaoshi/article/details/107791724
今日推荐