pre_eminent
pre_eminent

HTML_01_基础

HTML_01_基础_第1张图片

HTML_01_基础_第2张图片


HTML 指超文本标签语言,英文全称是HyperText Markup Language。

HTML发展史

HTML没有1.0，因为关于它的初版存在争议，1995年HTML 2.0横空出世，

1997年由国际官方组织W3C隆重推出了HTML 3.2以及HTML 4.0标准，

后面W3C(万维网联盟)也渐渐变成Web技术领域的权威，经过漫长岁月的演变，

2014年，时隔15年之后, HTML 5  标准在人们的千呼万唤,翘首以盼之下,终于出现在历史舞台的正中心。

HTML 2.0——1995年11月，RFC 1866发布

HTML 3.2——1997年1月14日，W3C发布推荐标准

HTML 4.0——1997年12月18日，W3C发布推荐标准

HTML 4.01——1999年12月24日，W3C发布推荐标准

HTML 5——2014年10月28日，W3C发布推荐标准

HTML结构

HTML的结构一般包括标签和标签，

和这2个标记符分别表示网页的头部和正文。

头部中可包含页面的标题、关键词、描述说明等内容，它本身不作为内容来显示，但影响网页显示和传播的效果。

当中是网页实际显示的内容，正文标记符 又被称为 实体标记。

页面当中通常包含有很多 指向其他相关页面 或 其他节点的指针(???Excuse Me???)，

通过点击，可以很方便地获取新的网页，这是HTML获得广泛推广运用最最最重要的原因之一，

而由这些相互之间存在关联的页面组成的有机集合便是网站。


究竟HTML为什么会被普及?这就要归功于互联网的高速发展，对于编程语言的需求直线上升。

而HTML5具有超集方式的简易性、运用广泛的可拓展性、灵活应变的平台适应性以及简单的通用性。

凭借着这些特性，HTML越来越受到人们的喜爱。

HTML5 编辑规范

1、文件拓展名默认使用htm，便于操作系统或者程序辨认文件，而图片则基本上存为gif或jpg

2、浏览器默认忽视回车符，不过为了方便阅览，人们还是会习惯地在写完一段代码后进行回车

3、标记符号用尖括号括起来，带斜杠的元素表示该标记说明结束，大多数标记符必须成对使用，用以说明起始和结束。

4、必须使用半角而不是全角字符

5、HTML注释的内容不给予显示。

开始学习HTML

接下来，你可以打开这本教程，先了解html的基本概念，

然后一个一个地掌握HTML标签、HTML语法、HTML注释、HTML框架等用法，

并且参考借鉴一些优秀的网站，通过浏览器的“查看源代码”功能来steal别人写的HTML代码结构。

HTML对于系统环境配置要求一点也不高，基本上，你只需要有一台电脑就够了。

HTML 教程导读- (HTML5 标准)

HTML也叫作超文本标记语言，标准通用标记语言下的一个应用，您可以使用 HTML 来建立自己的 WEB 站点。

通过学习本教程，您将可以使用 HTML 来创建站点。

HTML 是非常容易学习的！相信您能很快学会它！


HTML 简介

现在您可以通过如下的一个 HTML 实例来建立一个简单的 HTML 页面，以此来简单了解一下HTML的结构。

HTML_01_基础_第3张图片

运行效果如下:

HTML_01_基础_第4张图片

实例解析

  • DOCTYPE 声明了文档类型
  • 标签描述了文档类型，该标签的结束标志为
  • 标签定义文档的主体，即网页的可视化内容，该标签的结束标志为

  • 标签作为一个标题使用，该标签的结束标志为

  • 标签作为一个段落显示，该标签的结束标志为

lamp DOCTYPE html> 在 HTML5 中也是描述了文档类型。

什么是 HTML?

HTML 语言用于描述网页。

  • HTML 是指超文本标记语言: Hyper Text Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签  及  文本内容
  • HTML 文档也叫做 web页面

HTML 标签

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

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

HTML 元素

"HTML 标签" 和 "HTML 元素" 通常都是描述相同的意思。

但是严格来讲，一个 HTML元素  包含了  开始标签 与 结束标签，如下实例:

HTML 元素:

<p>This is a paragraph.p>

Web 浏览器

Web 浏览器（如谷歌浏览器、Internet Explorer、Firefox 和 Safari等）是用于读取 HTML 文件，并将其作为网页显示。

Web 浏览器  不会直接显示 HTML 标签，而是通过使用标签来决定如何向用户展现 HTML 页面的内容：

HTML_01_基础_第5张图片

HTML 网页结构

下面是一个可视化的 HTML 页面结构（只有 标签中的内容会显示在浏览器中）：

文本

文本2

文本3


HTML 版本

从最初的非标准化的超文本标记语言诞生后，HTML 已经更新了多个版本：

版本 发布时间
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013

声明

是标准通用标记语言的文档类型声明，有助于在浏览器中正确地显示网页。

由于网络上文件的类型不一，因此需要正确声明 HTML 版本，以使得浏览器能够正确识别并显示您的网页内容。

doctype 声明是不区分大小写的，以下方式均可使用：

  推荐用这种

通用声明

HTML5

HTML 4.01

XHTML 1.0

查看完整网页声明类型 DOCTYPE 参考手册.

中文编码

在 HTML 页面的头部声明字符为 UTF-8 可以解决在浏览器中出现中文乱码的现象。




	
	这是标题



 hello beyond 


 god is a girl
运行效果:
HTML_01_基础_第6张图片


HTML 基础- 4个实例

本章介绍了 HTML 中较为常用的标签的实例。

HTML 标题

HTML 标题（Heading）是通过

-
 标签来定义的.

h 是英文header标题的缩写，

标题无处不在，它的应用范围十分广泛：网站结构、写作文、PPT 等。

h1 是主标题，h2 是副标题，h3、h4、h5、h6 依次递减字体的大小。

代码如下:




	
	未闻花名



 我们仍未知道那年夏天所见到的花的名字1 


 我们仍未知道那年夏天所见到的花的名字2 


 我们仍未知道那年夏天所见到的花的名字3 


 我们仍未知道那年夏天所见到的花的名字4 


 我们仍未知道那年夏天所见到的花的名字5 


 我们仍未知道那年夏天所见到的花的名字6

运行效果如下:

HTML_01_基础_第7张图片



HTML 段落

HTML 段落是通过标签

来定义的，

P 是英文paragraph段落的缩写，

经常被用来创建一个段落，就和你写作文一样。

代码如下:




	
	beyond


加粗文本

斜体文本

这是下标

这是上标

这是Code代码啦

运行效果如下:

HTML_01_基础_第8张图片


HTML 链接

HTML 链接是通过标签 来定义的.a标签，也叫anchor（锚点）元素，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。

代码如下:




	
	beyond


未闻花名

效果如下:

HTML_01_基础_第9张图片


提示:在 href 属性中指定链接的地址。

HTML 图像

HTML 图像是通过标签 来定义的。

使用img元素来为你的网站添加图片，使用src属性指向一个图片的具体地址。

举例如下：

请千万注意：img元素是自关闭元素，不需要结束标记。

代码如下:




	
	beyond


图片加载失败

运行效果如下:

HTML_01_基础_第10张图片

注意： 图像的 名称 和 尺寸 是以属性的形式提供的。



HTML 元素

HTML 文档由 HTML 元素定义,

注意喔:HTML 元素指的是 从开始标签（start tag）到  结束标签（end tag）之前的所有代码喔。

HTML 元素

开始标签 * 元素内容 结束标签 *

这是一个段落

这是一个链接

这是一个换行标签  

*开始标签 常被称为 起始标签（opening tag），结束标签 常称为 闭合标签（closing tag）。

HTML 元素语法

  • HTML 元素以 开始标签 起始
  • HTML 元素以 结束标签 终止
  • 元素的内容是  开始标签  与  结束标签  之间的全部内容喔
  • 特别注意: 某些 HTML 元素具有  空内容（empty content）喔,妳懂的哈~
  • 空元素 在 开始标签中 进行关闭（以开始标签的结束而结束）
  • 大多数 HTML 元素可拥有属性

嵌套的 HTML 元素

HTML 文档由嵌套的 HTML 元素（可以包含其他 HTML 元素）构成。 

HTML 文档实例


<html>
    
    beyond

<body>
<p>这是第一个段落p>
body>

html>

上述的实例包含了6个 HTML 元素

HTML 实例解析

元素:

<p>这是第一个段落。p>

这个

元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签

以及一个结束标签

。
元素内容是: 这是第一个段落。


元素:

<body>
<p>这是第一个段落。p>
body>

元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 以及一个结束标签 。

元素内容是另一个 HTML 元素（p 元素）


元素：

<html>

<body>
<p>这是第一个段落。p>
body>

html>

元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 ，以及一个结束标签 .
元素内容是另一个 HTML 元素（body 元素）。

永远不要忘记结束标签

如果您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：

<p>这是一个段落
<p>这是一个段落

上述实例在浏览器中也能正常显示，因为关闭标签是可选的。

但您不能对此产生依赖性，因为忘记使用结束标签会产生不可预料的结果或错误或损失或悲剧。

HTML 空元素

HTML 空元素 即为没有内容的 HTML 元素。

HTML 空元素 应该在开始标签中关闭。

HTML 其中的一个空元素:
（用于定义换行），
元素就是没有关闭标签。

HTML 空元素的关闭方法是:在开始标签中添加斜杠，比如
，HTML、XHTML 和 XML 都接受这种方式。

注意：在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭，即使是空元素也不例外。

HTML 提示：推荐使用小写标签

由于 HTML 标签对英文字母的大小写不敏感，所以

和

表达的意思相同。

推荐使用小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。


HTML 属性

属性是为 HTML 元素提供的附加信息。

HTML 属性

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现，比如：name="value" (注意双引号喔)。

属性实例

HTML 链接 由 标签定义。

链接的地址在 href 属性中指定： 

实例

未闻花名


HTML 属性中的引号

属性值  应该始终被包括在引号内。

双引号是最常用的，不过使用单引号也没有问题。

Remark提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您就必须使用单引号，例如：name='god is a "girl" '

HTML 推荐：使用小写属性

属性和属性值对大小写不敏感。

不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。

HTML 属性参考手册

查看完整的 HTML 属性列表: HTML 标签参考手册(见本文的附录)

下面列出了适用于大多数 HTML 元素的属性：

属性 描述
class 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id 定义元素的唯一id
style 规定元素的行内样式（inline style）
title 描述了元素的额外信息 (作为工具条使用)

更多 HTML 标准属性说明如下： HTML 标准属性参考手册.


HTML 全局属性

HTML 元素的意义与语境,通过属性可以通过 HTML 属性来描述。

HTML 中的全局属性对任何 HTML 元素有效！

New : HTML5 新属性。

属性 描述
accesskey 设置访问元素的键盘快捷键。
class -->√规定元素的类名（classname）
contenteditableNew 规定是否可编辑元素的内容。
contextmenuNew 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单
data-*New 用于存储页面的自定义数据
dir 设置元素中内容的文本方向。
draggableNew 指定某个元素是否可以拖动
dropzoneNew 指定是否将数据复制，移动，或链接，或删除
hiddenNew hidden 属性规定对元素进行隐藏。
id -->√规定元素的唯一 id
lang 设置元素中内容的语言代码。
spellcheckNew 检测元素是否拼写错误
style -->√规定元素的行内样式（inline style）
tabindex 设置元素的 Tab 键控制次序。
title 规定元素的额外信息（可在工具提示中显示）
translateNew 指定是否一个元素的值在页面载入时是否需要翻译

HTML 标题

在 HTML 文档中，标题很重要。

HTML 标题可以用来呈现文档结构，设置得当的标题有利于用户浏览您的网页。

HTML 标题

标题（Heading）是通过 

-
 标签进行定义的.

定义最大的标题。

定义最小的标题。

注释: 浏览器会自动地在标题的前后添加空行。

注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

HTML_01_基础_第11张图片

标题非常非常非常重要

请确保将 HTML 标题 标签只用于标题。

千万注意: 绝对不要仅仅是为了生成粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

HTML 水平线

标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容，使用该元素产生的水平线可以在视觉上将文档分隔成各个部分。

代码如下:




	
	beyond



这个是段落1




这个是段落2




这个是段落3

运行效果如下:

HTML_01_基础_第12张图片 


HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

HTML 注释可以方便地用来帮助网页设计人员，提醒他们与程序相关的信息。

注释写法如下:

实例

  

注释: 开始括号之后（左边的括号）需要紧跟一个叹号，不过,结束括号之前（右边的括号）不需要，

合理地使用注释可以对未来的代码编辑工作产生帮助。

HTML 提示 - 如何查看源代码

你是否看过一些网页然后惊叹它是如何实现的的。

如果您想steal其中的奥秘，只需要单击右键，然后选择"查看源文件"（IE）或"查看页面源代码"（Firefox等）。

这么做会打开一个包含页面 HTML 代码的窗口。

HTML 标签参考手册

标签参考手册 提供了有关这些标题及其属性的更多信息。

您将在本教程下面的章节中学到更多有关 HTML 标签和属性的知识。

标签 描述
定义 HTML 文档
定义文档的主体

-

定义 HTML 标题
定义水平线
定义注释

HTML 段落

HTML 可以将文档分割为若干段落。

HTML 段落p

段落是通过标签定义的

注意：浏览器会自动地在段落的前后添加空行。（

是块级元素）

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用标签。

在 HTML 语言中， 

标签定义为一个换行符，它可以理解为简单的输入一个空行，而不是用来对内容进行分段： 

代码如下:




	
	beyond



我们
仍未知道
那年夏天
所见到的
花的名字

运行效果如下:

HTML_01_基础_第13张图片

元素是一个空的 HTML 元素。

由于关闭标签没有任何意义，因此它没有结束标签。

HTML 输出- 使用提醒

我们无法确定 HTML 被显示的确切效果。

屏幕的大小，以及对窗口的调整都可能导致不同的结果。

对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时，浏览器会移除 源代码中多余的空格和空行。

所有连续的空格或空行都会被算作一个空格。

需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。


在 HTML 代码中的排版几部催泪神作:

代码如下:




	
	beyond



动漫催泪神作



	未闻花名

	东京地震8.0

	萤火虫之墓

	可塑性记忆

	坷朵莉

	AIR

	...



注意:多余的空格和空行 全变成了一个

运行效果如下:


HTML_01_基础_第14张图片

浏览器在显示 HTML 时，会省略源代码中多余的空白字符（空格或回车等会变成一个）

HTML 标签参考手册

标签参考手册提供了有关 HTML 元素及其属性的更多信息。

标签 描述

定义一个段落

插入单个折行（换行）




附录:

HTML 参考手册- (HTML5 标准)

按字母顺序排列

New : HTML5新标签

标签 描述
-->√定义注释
-->√定义文档类型
-->√定义超文本链接
定义缩写
定义只取首字母的缩写，不支持HTML5
定义文档作者或拥有者的联系信息
定义嵌入的 applet。HTML5中不支持使用。
定义图像映射内部的区域
New
 定义一个文章区域
定义页面的侧边栏内容
New -->√定义音频内容
-->√定义文本粗体
定义页面中所有链接的默认地址或默认目标。
定义页面中文本的默认字体、颜色或尺寸。HTML5不支持使用。
New 允许您设置一段文本，使其脱离其父元素的文本方向设置。
定义文字方向
定义大号文本，HTML5不支持使用。
定义长的引用
-->√定义文档的主体

-->√定义换行
定义一个点击按钮
New 定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形
定义表格标题
定义居中文本。HTML5不支持使用。
定义引用(citation)
-->√定义计算机代码文本
-->√定义表格中一个或多个列的属性值
定义表格中供格式化的列组
New 定义命令按钮，比如单选按钮、复选框或按钮
New 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
定义定义列表中项目的描述
定义被删除文本
New
 用于描述文档或文档某个部分的细节
定义定义项目
New 定义对话框，比如提示框
定义目录列表。HTML5不支持使用。
定义文档中的节
定义列表详情
定义列表中的项目
定义强调文本
New 定义嵌入的内容，比如插件。
定义围绕表单中元素的边框
New
 定义
元素的标题
New
 规定独立的流内容（图像、图表、照片、代码等等）。
定义文字的字体、尺寸和颜色。HTML5不支持使用。
New
 定义 section 或 document 的页脚。
-->√定义了HTML文档的表单
-->√定义框架集的窗口或框架
-->√定义框架集

to

-->√定义 HTML 标题
-->√定义关于文档的信息
New
 定义了文档的头部区域
-->√定义水平线
-->√定义 HTML 文档
-->√定义斜体字