超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页标准标记语言

HTML文档后缀名

以上两种后缀名没有区别,都可以使用

注:浏览器页面使用键盘上的 F12 按键开启调试模式,就可以看到组成标签

什么是HTML?

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


HTML 标签

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

<标签>内容</标签>

HTML 元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.

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

HTML 元素:

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

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

<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器正确显示网页

网络上有很多不同文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容

doctype 声明是不区分大小写的,以下方式均可:

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

通用声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
http://www.w3.org/TR/html4/loose.dtd“>

XHTML 1.0

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

中文编码

目前在大部分浏览器中直接输出中文会出现中文乱码的情况,这时候我们需要头部字符声明为 UTF-8 或 GBK。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
页面标题</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

HTML 编辑器


HTML 编辑器推荐

可以使用专业的 HTML 编辑器编辑 HTML,教程大家推荐几款常用的编辑器

可以从以上软件官网下载对应软件,按步骤安装即可

接下来我们将为大家演示如何使用 VS Code 工具创建 HTML 文件


VS Code

Visual Studio Code(简称 VS Code)是一个由微软开发,同时支持 Windows 、 LinuxmacOS 等操作系统开放源代码代码编辑器编辑器内置扩展程序管理功能

VS Code 安装教程参考VScode 教程 | 教程

步骤 1: 新建 HTML 文件

在 VS Code 安装完成后,选择文件(F)->新建文件(N) “,在新建文件输入以下代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度(baidu.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

步骤 2: 另存为 HTML 文件

然后选择” 文件(F)->另存为(A) “,文件名baidu.html:

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

在一个容易记忆文件夹保存这个文件,比如baidu

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

然后鼠标右击编辑器上的文件名选择默认浏览器打开(也可以其他的浏览器):

 注:vscode 中使用浏览器打开 html 文件需要 安装 open in browser 扩展

HTML 基础- 4个实例

HTML 标题

HTML 标题(Heading)是通过<h1> – <h6> 标签来定义的。

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

HTML 段落

HTML 段落通过标签 <p> 来定义的。

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

<p>这是另外一个段落。</p>

HTML 链接

HTML 链接通过标签 <a> 来定义的。

<a href=”https://www.r.com“>这是一个链接</a>

提示:href 属性指定链接地址

(您将在本教程稍后的章节学习更多有关属性的知识)。

HTML 图像

HTML 图像通过标签 <img> 来定义的.

<img decoding=”asyncsrc=”/images/logo.pngwidth=”258″ height=”39″ />

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

HTML 元素


HTML 文档由 HTML 元素定义。


HTML 元素

开始标签 * 元素内容 结束标签 *
<p> 这是一个段落 </p>
<a href=”default.htm“> 这是一个链接 </a>
<br> 换行

*开始标签常被称为起始标签(opening tag,结束标签常称为闭合标签(closing tag

HTML 元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间内容
  • 某些 HTML 元素具有内容empty content
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性

注释: 您将在本教程的下一章中学习更多有关属性的内容


嵌套的 HTML 元素

大多数 HTML 元素可以嵌套(HTML 元素可以包含其他 HTML 元素)。

HTML 文档由相互嵌套的 HTML 元素构成。


HTML 文档实例

<!DOCTYPE html>
<html>

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

</html>

以上实例包含了三个 HTML 元素。


HTML 实例解析

<p> 元素:

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

这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>.
元素内容是: 这是第一个段落。

<body> 元素:

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

<body> 元素定义了 HTML 文档的主体
这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。
元素内容是另一个 HTML 元素(p 元素)。

<html> 元素:

<html>

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

</html>

<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html> ,以及一个结束标签 </html>.
元素内容是另一个 HTML 元素(body 元素)。


不要忘记结束标签

即使您忘记了使用结束标签,大多数浏览器也会正确地显示 HTML:

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

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

但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果错误


HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。

在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。

在开始标签中添加斜杠比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式

即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。


HTML 提示:使用小写标签

HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

此处使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。

HTML 标题


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


HTML 标题

标题(Heading)是通过 <h1> – <h6> 标签进行定义的。

<h1> 定义最大的标题。 <h6> 定义最小的标题。

实例

<h1>这是一个标题。

</h1> <h2>这是一个标题。

</h2> <h3>这是一个标题。</h3>

尝试一下 »

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


标题很重要

请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体大号文本而使用标题。

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

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

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


HTML 水平线

<hr> 标签在 HTML 页面创建水平线。

hr 元素可用于分隔内容。

实例

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

<hr>

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

<hr>

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


HTML 注释

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

注释写法如下:

实例

<!– 这是一个注释 –>

注释: 开始括号之后(左边括号需要紧跟一个叹号 ! (英文标点符号),结束括号之前(右边的括号)不需要合理地使用注释可以对未来的代码编辑工作产生帮助。


HTML 提示如何查看源代码

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

如果您想找到其中的奥秘,只需要单击右键然后选择查看源文件“(IE)或”查看页面源代码“(Firefox),其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码窗口

HTML 段落


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


HTML 段落

段落是通过 <p> 标签定义的。

实例

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

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

注意:浏览器会自动地在段落的前后添加空行。(</p> 是块级元素)


不要忘记结束标签

即使忘了使用结束标签,大多数浏览器也会正确地将 HTML 显示出来:

实例

<p>这是一个段落

<p>这是另一个段落

上面的例子在大多数浏览器中都没问题,但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果错误

注释: 在未来的 HTML 版本中,不允许省略结束标签。


HTML 折行

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br> 标签:

实例

<p>这个<br>段落<br>演示了分行的效果</p>

<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。


HTML 输出– 使用提醒

我们无法确定 HTML 被显示的确切效果屏幕大小,以及对窗口的调整都可能导致不同结果

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

当显示页面时,浏览器会移除代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格

HTML 文本格式

HTML 文本格式

加粗文本

斜体文本

电脑自动输出

这是 下标 和 上标

HTML 格式化标签

HTML 使用标签 <b>(“bold“) 与 <i>(“italic“) 对输出的文本进行格式, 如:粗体 or 斜体

这些HTML标签被称为格式化标签(请查看底部完整标签参考手册)。

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。

然而,这些标签的含义是不同的:

<b> 与<i> 定义粗体或斜体文本。

<strong> 或者 <em>意味着你要呈现的文本是重要的,所以要突出显示。现今所有主要浏览器都能渲染各种效果字体。不过,未来浏览器可能支持更好渲染效果。



HTML 文本格式化标签

标签 描述
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除

HTML “计算机输出” 标签

标签 描述
<code> 定义计算机代码
<kbd> 定义键盘
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本

HTML 引文, 引用, 及标签定义

标签 描述
<abbr> 定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用语
<cite> 定义引用、引证
<dfn> 定义一个定义项目

HTML 链接


HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。


HTML 超链接(链接)

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分

当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址

默认情况下,链接将以以下形式出现在浏览器中:

注意:如果为这些超链接设置了 CSS 样式展示样式会根据 CSS 的设定而显示。


HTML 链接语法

链接的 HTML 代码很简单。它类似这样:

<a href=”url“>链接文本</a>

href 属性描述了链接的目标。.

实例

<a href=”https://www.baidu.com/”>访问百度</a>

点击这个超链接会把用户带到百度首页

提示: “链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。


HTML 链接 – target 属性

使用 target 属性,你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档:

实例

<a href=”https://www.baidu.com/” target=”_blankrel=”noopener noreferrer”>访问百度!</a>


HTML 链接- id 属性

id 属性可用于创建一个 HTML 文档书签

提示: 书签不会以任何特殊方式显示,即在 HTML 页面中是不显示的,所以对于读者来说是隐藏的。

实例

在HTML文档中插入ID:

<a id=”tips“>有用的提示部分</a>

在HTML文档中创建一个链接到”有用的提示部分(id=”tips“)”:

<a href=”#tips“>访问有用的提示部分</a>

或者,从另一个页面创建一个链接到”有用的提示部分(id=”tips“)”:

<a href=”https://www.baidu.com/html/html-links.html#tips“>
访问有用的提示部分</a>


基本注意事项 – 有用的提示

注释: 请始终将正斜杠添加到子文件夹。假如这样书写链接:href=”https://www.baidu.com/html”,就会向服务器产生两次 HTTP 请求。这是因为服务器添加斜杠这个地址然后创建一个新的请求,就像这样:href=”https://www.baidu.com/html/”。

HTML 链接标签

标签 描述
<a> 定义一个超级链接

HTML <head>

HTML <head> 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本scripts), 样式文件(CSS),及各种meta信息

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。


HTML <title> 元素

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必需的。

<title> 元素:

一个简单的 HTML 文档:

实例

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<title>文档标题</title>

</head>

<body>

文档内容……

</body>

</html>


HTML <base> 元素

<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:

实例

<head>

<base href=”http://www.runoob.com/images/” target=”_blank“>

</head>


HTML <link> 元素

<link> 标签定义了文档与外部资源之间关系

<link> 标签通常用于链接到样式表:

实例

<head>

<link rel=”stylesheet” type=”text/css” href=”mystyle.css“>

</head>


HTML <style> 元素

<style> 标签定义了HTML文档的样式文件引用地址.

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

实例

<head>

<style type=”text/css“>

body {

backgroundcolor:yellow;

}

p {

         color:blue

}

</style>

</head>


HTML <meta> 元素

meta标签描述了一些基本的元数据

<meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析

META 元素通常用于指定网页的描述,关键词,文件的最后修改时间作者,和其他元数据。

元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务

<meta> 一般放置于 <head> 区域

<meta> 标签- 使用实例

搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="免费 Web &amp; 编程 教程">

定义网页作者:

<meta name="author" content="作者">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">


HTML <script> 元素

<script>标签用于加载脚本文件,如: JavaScript。

<script> 元素在以后的章节中会详细描述。


HTML head 元素

标签 描述
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间关系
<meta> 定义了HTML文档中的元数据

原文地址:https://blog.csdn.net/weixin_60535956/article/details/129792742

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_36698.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注