HTML超详细教程
后台-插件-广告管理-内容页头部广告(手机) |
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
HTML文档的后缀名
- .html
- .htm
以上两种后缀名没有区别,都可以使用。
- 声明为 HTML5 文档
- 元素是 HTML 页面的根元素
- 元素包含了文档的元(meta)数据,如 定义网页编码格式为 utf-8。
元素描述了文档的标题 - 元素包含了可见的页面内容
- 元素定义一个大标题
- 元素定义一个段落
注:在浏览器的页面上使用键盘上的 F12 按键开启调试模式,就可以看到组成标签。
什么是HTML?
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言,而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词,比如
- HTML 标签通常是成对出现的,比如 和
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
<标签>内容标签>
HTML 元素
"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例:
HTML 元素:
这是一个段落。
Web 浏览器
Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)是用于读取HTML文件,并将其作为网页显示。
浏览器并不是直接显示的HTML标签,但可以使用标签来决定如何展现HTML页面的内容给用户:
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
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
中文编码
目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。
我的第一个标题
我的第一个段落。
HTML 编辑器
HTML 编辑器推荐
可以使用专业的 HTML 编辑器来编辑 HTML,教程为大家推荐几款常用的编辑器:
- VS Code:Visual Studio Code - Code Editing. Redefined
- Sublime Text:Sublime Text - Text Editing, Done Right
- 在线编辑器:HTML/CSS/JS 在线工具 | 工具
你可以从以上软件的官网中下载对应的软件,按步骤安装即可。
接下来我们将为大家演示如何使用 VS Code 工具来创建 HTML 文件。
VS Code
Visual Studio Code(简称 VS Code)是一个由微软开发,同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器,编辑器中内置了扩展程序管理的功能。
VS Code 安装教程参考:VScode 教程 | 教程
步骤 1: 新建 HTML 文件
在 VS Code 安装完成后,选择" 文件(F)->新建文件(N) ",在新建的文件中输入以下代码:
我的第一个标题
我的第一个段落。
步骤 2: 另存为 HTML 文件
然后选择" 文件(F)->另存为(A) ",文件名为baidu.html:
当您保存 HTML 文件时,既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别,完全根据您的喜好,我建议统一用 .html。
在一个容易记忆的文件夹中保存这个文件,比如baidu
步骤 3: 在浏览器中运行这个 HTML 文件
然后鼠标右击编辑器上的文件名,选择在默认浏览器打开(也可以其他的浏览器):
注:vscode 中使用浏览器打开 html 文件需要 安装 "open in browser" 扩展。
HTML 基础- 4个实例
HTML 标题
HTML 标题(Heading)是通过
- 标签来定义的。
这是一个标题
这是一个标题
这是一个标题
这是一个标题
这是一个标题
这是一个标题
HTML 段落
HTML 段落是通过标签
来定义的。
这是一个段落。
这是另外一个段落。
HTML 链接
HTML 链接是通过标签 来定义的。
这是一个链接
提示:在 href 属性中指定链接的地址。
(您将在本教程稍后的章节中学习更多有关属性的知识)。
HTML 图像
HTML 图像是通过标签 来定义的.
注意: 图像的名称和尺寸是以属性的形式提供的。
HTML 元素
HTML 文档由 HTML 元素定义。
HTML 元素
开始标签 * | 元素内容 | 结束标签 * |
---|---|---|
这是一个段落 | ||
这是一个链接 | ||
换行 |
*开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)。
HTML 元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容(empty content)
- 空元素在开始标签中进行关闭(以开始标签的结束而结束)
- 大多数 HTML 元素可拥有属性
注释: 您将在本教程的下一章中学习更多有关属性的内容。
嵌套的 HTML 元素
大多数 HTML 元素可以嵌套(HTML 元素可以包含其他 HTML 元素)。
HTML 文档由相互嵌套的 HTML 元素构成。
HTML 文档实例
这是第一个段落。
以上实例包含了三个 HTML 元素。
HTML 实例解析
元素:
这是第一个段落。
这个
元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签
以及一个结束标签
.元素内容是: 这是第一个段落。
元素:
元素定义了 HTML 文档的主体。
这是第一个段落。
这个元素拥有一个开始标签 以及一个结束标签 。
元素内容是另一个 HTML 元素(p 元素)。
元素:
这是第一个段落。
元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 ,以及一个结束标签 .
元素内容是另一个 HTML 元素(body 元素)。
不要忘记结束标签
即使您忘记了使用结束标签,大多数浏览器也会正确地显示 HTML:
这是一个段落
这是一个段落
以上实例在浏览器中也能正常显示,因为关闭标签是可选的。
但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。
HTML 空元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
就是没有关闭标签的空元素(
标签定义换行)。
在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。
在开始标签中添加斜杠,比如
,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
即使
在所有浏览器中都是有效的,但使用
其实是更长远的保障。
HTML 提示:使用小写标签
HTML 标签对大小写不敏感:
等同于
。许多网站都使用大写的 HTML 标签。
此处使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。
HTML 标题
在 HTML 文档中,标题很重要。
HTML 标题
标题(Heading)是通过
- 标签进行定义的。
定义最大的标题。 定义最小的标题。
实例
这是一个标题。
实例
这是一个标题。
这是一个标题。
这是一个标题。
尝试一下 »
注释: 浏览器会自动地在标题的前后添加空行。
标题很重要
请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。
HTML 水平线
标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
实例
这是一个段落。
这是一个段落。
这是一个段落。
HTML 注释
可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。
注释写法如下:
实例
注释: 开始括号之后(左边的括号)需要紧跟一个叹号 ! (英文标点符号),结束括号之前(右边的括号)不需要,合理地使用注释可以对未来的代码编辑工作产生帮助。
HTML 提示 - 如何查看源代码
你是否看过一些网页然后惊叹它是如何实现的。
如果您想找到其中的奥秘,只需要单击右键,然后选择"查看源文件"(IE)或"查看页面源代码"(Firefox),其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。
HTML 段落
HTML 可以将文档分割为若干段落。
HTML 段落
段落是通过
标签定义的。
实例
这是一个段落
这是另一个段落
注意:浏览器会自动地在段落的前后添加空行。(
是块级元素)不要忘记结束标签
即使忘了使用结束标签,大多数浏览器也会正确地将 HTML 显示出来:
实例
这是一个段落
这是另一个段落
上面的例子在大多数浏览器中都没问题,但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。
注释: 在未来的 HTML 版本中,不允许省略结束标签。
HTML 折行
如果您希望在不产生一个新段落的情况下进行换行(新行),请使用
标签:
实例
这个
段落
演示了分行的效果
元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。
HTML 输出- 使用提醒
我们无法确定 HTML 被显示的确切效果。屏幕的大小,以及对窗口的调整都可能导致不同的结果。
对于 HTML,您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。
HTML 文本格式化
HTML 文本格式化
加粗文本
斜体文本
电脑自动输出
这是 下标 和 上标
HTML 格式化标签
HTML 使用标签 ("bold") 与 ("italic") 对输出的文本进行格式, 如:粗体 or 斜体
这些HTML标签被称为格式化标签(请查看底部完整标签参考手册)。
通常标签 替换加粗标签 来使用, 替换 标签使用。 然而,这些标签的含义是不同的: 与 定义粗体或斜体文本。 或者 意味着你要呈现的文本是重要的,所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过,未来浏览器可能会支持更好的渲染效果。 |
HTML 文本格式化标签
标签 | 描述 |
---|---|
定义粗体文本 | |
定义着重文字 | |
定义斜体字 | |
定义小号字 | |
定义加重语气 | |
定义下标字 | |
定义上标字 | |
定义插入字 | |
定义删除字 |
HTML "计算机输出" 标签
标签 | 描述 |
---|---|
定义计算机代码 | |
定义键盘码 | |
定义计算机代码样本 | |
定义变量 | |
定义预格式文本 |
HTML 引文, 引用, 及标签定义
标签 | 描述 |
---|---|
定义缩写 | |
定义地址 | |
定义文字方向 | |
定义长的引用 | |
定义短的引用语 | |
定义引用、引证 | |
定义一个定义项目。 |
HTML 链接
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
HTML 超链接(链接)
HTML使用标签 来设置超文本链接。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。
在标签 中使用了href属性来描述链接的地址。
默认情况下,链接将以以下形式出现在浏览器中:
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时,链接显示为红色并带有下划线。
注意:如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定而显示。
HTML 链接语法
链接的 HTML 代码很简单。它类似这样:
href 属性描述了链接的目标。.
实例
访问百度
点击这个超链接会把用户带到百度的首页。
提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
HTML 链接 - target 属性
使用 target 属性,你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档:
实例
访问百度!
HTML 链接- id 属性
id 属性可用于创建一个 HTML 文档书签。
提示: 书签不会以任何特殊方式显示,即在 HTML 页面中是不显示的,所以对于读者来说是隐藏的。
实例
在HTML文档中插入ID:
有用的提示部分
在HTML文档中创建一个链接到"有用的提示部分(id="tips")":
访问有用的提示部分
或者,从另一个页面创建一个链接到"有用的提示部分(id="tips")":
访问有用的提示部分
基本的注意事项 - 有用的提示
注释: 请始终将正斜杠添加到子文件夹。假如这样书写链接:href="https://www.baidu.com/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="https://www.baidu.com/html/"。
HTML 链接标签
标签 | 描述 |
---|---|
定义一个超级链接 |
HTML
HTML 元素
元素包含了所有的头部标签元素。在 元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。可以添加在头部区域的元素标签为:
HTML 元素
meta标签描述了一些基本的元数据。
标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。
META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。
一般放置于
区域标签- 使用实例
为搜索引擎定义关键词:
为网页定义描述内容:定义网页作者:
每30秒钟刷新当前页面:
HTML <script> 元素
<script>标签用于加载脚本文件,如: JavaScript。
<script> 元素在以后的章节中会详细描述。
HTML head 元素
标签 | 描述 |
---|---|
定义了文档的信息 | |
定义了文档的标题 | |
定义了页面链接标签的默认链接地址 | |
定义了一个文档和外部资源之间的关系 | |
定义了HTML文档中的元数据 | |
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。
在线投稿:投稿 站长QQ:1888636
后台-插件-广告管理-内容页尾部广告(手机) |