HTML 新手教程零基础易懂!(万字解析,建议收藏)*^____^* 上
目录
使用 Notepad 或 TextEdit 来编写 HTML
HTML 简介
HTML 简介
现在您可以通过如下的一个 HTML 实例来建立一个简单的 HTML 页面,以此来简单了解一下 HTML 的结构。
HTML 实例
<html>
<head>
<title>页面标题(w3cschool.cn)</title>
</head>
<body><h1>我是第一个标题</h1>
<p>我是第一个段落。</p>
</body>
</html>
实例解析
DOCTYPE
声明了文档的类型<html>
标签是 HTML 页面的根元素,该标签的结束标志为</html>
<head>
标签包含了文档的元数据(meta
),如<meta charset="utf-8">
定义网页编码格式为utf-8。<title>
标签定义文档的标题<body>
标签定义文档的主体,即网页可见的页面内容,该标签的结束标志为</body>
<h1>
标签作为一个标题使用,该标签的结束标志为</h1>
,-- HTML标题<p>
标签作为一个段落显示,该标签的结束标志为</p>
-- p标签用法
<!DOCTYPE html> 在 HTML5 中也是描述了文档类型。 |
什么是 HTML?
HTML 语言用于描述网页。
- HTML 是指超文本标记语言: Hyper Text Markup Language
- HTML 不是一种编程语言,而是一种标记语言
- 标记语言是一套标记标签 ( markup tag )
- HTML 使用标记标签来描述网页
- HTML 文档包含了 HTML 标签及文本内容
- HTML 文档也叫做 web 页面
HTML 标签
HTML 标记标签通常被称为 HTML 标签 ( HTML tag )。您可以在 W3Cschool 的编程实战部分开始学习 HTML 标签。
- HTML 标签是由 尖括号 包围的关键词,比如
<html>
- HTML 标签通常是 成对出现 的,比如
<b>
和</b>
- 标签对中的第一个标签是开始标签,第二个标签是 结束标签
- 开始和结束标签也被称为开放标签 和 闭合标签
<标签>内容</标签>
HTML 元素
"HTML 标签" 和 "HTML 元素" 通常都是描述相同的意思。
但是严格来讲,一个 HTML元素包含了开始标签与结束标签,如下实例:
HTML 元素:
<p>这是一个段落。</p>
Web 浏览器
Web 浏览器(如谷歌浏览器、Internet Explorer、Firefox 和 Safari )是用于读取 HTML 文件,并将其作为网页显示。
Web 浏览器不会直接显示 HTML 标签,而是通过使用标签来决定如何向用户展现 HTML 页面的内容:
HTML 网页结构
下面是一个可视化的 HTML 页面结构(只有<body>
标签中的内容会显示在浏览器中):
HTML 版本
从最初的非标准化的超文本标记语言诞生后,HTML 已经更新了多个版本:
发布时间 | 版本 |
---|---|
1989 | Tim Berners-Lee 发明万维网 |
1991 | Tim Berners-Lee 制定 HTML 规范 |
1993 | Dave Raggett 拟定了 HTML+ |
1995 | HTML 工作组定义 HTML 2.0 |
1997 | W3C 推荐标准: HTML 3.2 |
1999 | W3C 推荐标准: html 4.01 |
2000 | W3C 推荐标准: XHTML 1.0 |
2008 | WhatWG 首次公开 HTML5 |
2012 | WHATWG 制定 HTML5 标准 |
2014 | W3C 推荐标准: HTML5 |
2016 | W3C 候选推荐: HTML 5.1 |
2017 | W3C 推荐: HTML5.1 第二版 |
2017 | W3C 推荐: HTML5.2 |
<!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">
查看完整网页声明类型 DOCTYPE 参考手册.
MDN CSS参考
中文编码
在 HTML 页面的头部声明字符为 UTF-8 可以解决在浏览器中出现中文乱码的现象。
HTML 实例
<html>
<head>
<meta charset="UTF-8">
<title>页面标题(w3cschool.cn)</title>
</head>
<body>
<h1>这是我的第一个标题</h1>
<p>这是我的第一个段落。</p>
</body>
</html>
HTML 编辑器的介绍及推荐
HTML 编辑器
HTML 编辑器是用于编写 HTML 的工具,使用 HTML 编辑器时以编辑主题,索引,自定义窗口,选择添加搜索页。
使用 Notepad 或 TextEdit 来编写 HTML
下列是三种专门用于编辑 HTML 的 HTML 编辑器:
-
Adobe Dreamweaver
-
Microsoft Expression Web
-
CoffeeCup HTML 编辑器
不过,我们同时推荐使用文本编辑器来学习 HTML,比如 Notepad(PC)或 TextEdit(Mac)。我们相信,使用一款简单的文本编辑器是学习 HTML 的好方法。
我们可以使用 Notepad 工具来创建 HTML 文件,具体的步骤参考如下:
步骤1:启动记事本
打开 Notepad 的步骤( Windows 系统中):
- 打开“开始”菜单
- 选择“所有程序”
- 选择“附件”
- 选择“记事本”
步骤2:使用记事本编辑 HTML
在记事本中输入 HTML 代码:
实例代码
<head>
<meta charset="utf-8">
<title>编程狮(w3cschool.cn)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
尝试一下 »
步骤3:保存你的 HTML
在 Notepad 文件菜单中选择另存为。
您可以以.htm
或者.html
扩展名保存您的 HTML 文件,两者没有区别,根据您的使用习惯即可。
将该文件保存在您常用的文件夹中,比如 w3cschool
步骤4:在浏览器中运行这个 HTML 文件
启动您的浏览器,然后选择“文件”菜单的“打开文件”命令,或者直接在文件夹中双击您的 HTML 文件。
运行显示结果类似如下:
常用HTML编辑器下载
1、UltraEdit(编辑工具)
UltraEdit 文本编辑器能够满足你一切编辑需要的编辑器。
UltraEdit 文本编辑器是一套功能强大的文本编辑器。
UltraEdit 文本编辑器内建英文单字检查,C ++ 及 VB 指令突显,可同时编辑多个文件,而且即使开启很大的文件速度也不会慢。
UltraEdit 软件附有 HTML 标签颜色显示,搜寻替换以及无限制的还原功能,一般大家喜欢用其来修改 EXE 或 DLL 文件。
2、Notepad++ (代码编辑器)
Notepad++ 是在微软视窗环境之下的一个免费的代码编辑器。它使用较少的 CPU 功率,降低电脑系统能源消耗,但轻巧且执行效率高,使得 Notepad++ 可完美地取代微软视窗的记事本。
3、Adobe Dreamweaver CC
Dreamweaver CC 是世界顶级软件厂商 Adobe 推出的一套拥有可视化编辑界面,用于制作并编辑网站和移动应用程序的网页设计软件。由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页,对于初级人员,你可以无需编写任何代码就能快速创建 Web 页面。其成熟的代码编辑工具更适用于 Web 开发高级人员的创作!
4、EditPlus (文本编辑器)
EditPlus(文字编辑器)一套功能强大,可取代记事本的文字编辑器,拥有无限制的 Undo/Redo、英文拼字检查、自动换行、列数标记、搜寻取代、同时编辑多文件、全屏幕浏览功能。而它还有一个好用的功能,就是它有监视剪贴簿的功能,能够同步于剪贴簿自动将文字贴进 EditPlus 的编辑窗口中,让你省去做贴上的步骤。另外它也是一个好用的 HTML 编辑器,除了可以颜色标记 HTML Tag (同时支持 C/C++、Perl、Java)外,还内建完整的 HTML 和 CSS1 指令功能,对于习惯用记事本编辑网页的朋友,它可帮你节省一半以上的网页制作时间,若你有安装 IE 3.0 以上版本,它还会结合 IE 浏览器于 EditPlus 窗口中,让你可以直接预览编辑好的网页(若没安装 IE,也可指定浏览器路径)。
- EditPlus3 编辑器手册:EditPlus3 编辑器手册_w3cschool
HTML 调试
在编写 HTML 代码的时候通常会有以下两种主要类型的错误:
- 语法错误:由于拼写错误导致程序无法运行;通常熟悉语法并理解错误信息后很容易修复。
- 逻辑错误:不存在语法错误,但代码无法按预期运行;通常逻辑错误比语法错误更难修复,因为无法得到指向错误源头的信息。
HTML 本身不容易出现语法错误,因为浏览器是以宽松模式运行的,这意味着即使出现语法错误浏览器依然会继续运行。浏览器通常都有内建规则来解析书写错误的标记,所以即使与预期不符,页面仍可显示出来。当然,是存在隐患的。
注释:HTML 之所以以宽松的方式进行解析,是因为 Web 创建的初心就是:人人可发布内容,不去纠结代码语法。
实例
我们通过一段含有错误的 HTML 代码来讨论一下:
实例标题
<p>什么使得 HTML 出错?
<ul>
<li>未闭合的元素:如果元素<strong>没有正确的结束标记,那么将影响下方整个区域,这不是你期望的。
<li>错误嵌套元素:正确进行嵌套是一项重要的编码习惯。<strong>重点(strong)<em>重点强调(strongly emphasised)?</strong>这又是什么鬼?
</em>
<li>未闭合的属性:另一种 HTML 常见错误。来看一个示例:<a href="https://www.w3cschool.cn/>W3Cschool 主页链接</a>
</ul>
尝试一下 »
以下是上述代码出现的问题:
- 段落(Paragraph) 和列表项(list item)元素没有结束标签。但是由于元素的结束和另一个的开始很容易推断出来,因此上图中并没有太严重的渲染错误。
- 第一个
<strong>
元素没有结束标签。这就严重了,因为该元素结束的位置难以确定。事实上所有剩余文本都加粗了。 - 第二个
<li>
元素中存在嵌套问题:对于下面这个代码,在浏览器很难做出正确解析,理由同上。<strong> 重点(strong)<em> 重点强调( strongly emphasised)? </strong> 这又是什么鬼? </em>
href
属性缺少了一个双引号。从而导致了一个最严重的问题:整个链接完全没有渲染出来。
但是浏览器会尝试修补代码错误:
<p>
和<li>
元素加上了关闭标签。- 第一个
<strong>
没有明确的关闭标签,因此浏览器为之后所有独立块都补全了<strong>
</strong>
。 - 浏览器(以下代码节选自Chrome修补后的页面代码)是这样修补嵌套错误的:
实例标题
<h1>HTML 调试示例</h1>
<p>什么使得 HTML 出错?</p>
<ul>
<li>未闭合的元素:如果元素
<strong>没有正确的结束标记,那么将影响下方整个区域,这不是你期望的。</strong>
</li>
<li>
<strong>错误嵌套元素:正确进行嵌套是一项重要的编码习惯。
<strong>重点(strong)
<em>重点强调(strongly emphasised)?</em>
</strong>
<em>这又是什么鬼?
</em>
</strong>
</li>
<li>
<strong>未闭合的属性:另一种 HTML 常见错误。来看一个示例:</strong>
</li>
</ul>
尝试一下 »
- 删除整个缺少双引号的链接。最后一个列表项就成了:
阅读以上示例后,你会发现保持良好 HTML 格式的重要性。
HTML 基础
HTML 基础- 4个实例
本章介绍了 HTML 中较为常用的基础标签的实例以及 HTML 基础知识。您可能还没接触过这些实例,不过不用担心,阅读完本章您就能够掌握它们了! 1
HTML 标题
HTML 标题(Heading)是通过 <h1> - <h6> 标签来定义的.
h
是英文header
标题的缩写,标题无处不在,它的应用范围十分广泛:网站结构、写作文、PPT 等。
这里有六个标题元素标签 —— <h1>
、<h2>
、<h3>
、<h4>
、<h5>
、<h6>
,每个元素代表文档中不同级别的内容:
<h1>
表示主标题( the main heading ),<h2>
表示二级子标题( subheadings ),<h3>
表示三级子标题( sub-subheadings ),<h4>
、<h5>
、<h6>
字体的大小依次递减。
实例
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<h4>这是标题4</h4>
<h5>这是标题5</h5>
<h6>这是标题6</h6>
你也可以通过实战实验来尝试挑战一个 h2 标题的设置:
HTML 段落
HTML 段落是通过标签<p>
来定义的,P
是英文paragraph
段落的缩写,经常被用来创建一个段落,就和你写作文一样,您可以进行实战演练。
实例
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
下面这个实例讲述了标题和段落的结构层次:
实例
<h1>三国演义</h1>
<p>罗贯中</p>
<h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>
<p>话说天下大势,分久必合,合久必分。</p>
<h2>第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</h2>
<p>且说董卓字仲颖</p>
<h3>却说张飞</h3>
<p>却说张飞饮了数杯闷酒</p>
上述实例所涉及的元素具体代表什么,完全取决于作者编辑的内容,只要确保层次结构是合理的。在创建此类结构时,您只需要记住以下几点:
- 首先,您应该只对每个页面使用一次
<h1>
,这是主标题,所有其他标题位于层次结构中的下方。 - 其次,请确保在层次结构中以正确的顺序使用标题。不要使用
<h3>
来表示副标题,后面跟<h2>
来表示副副标题,这是没有意义的,会导致奇怪的结果。 - 最后,在可用的六个标题级别中,您应该保证每个页面中标题级别的使用不超过三个,除非您认为有必要使用更多。具有许多标题级别的文档会变得难以操作并且难以导航。在这种情况下,如果可能,建议将内容分散在多个页面上。
HTML 中的空格
在代码中可能包含了很多的空格——这是没有必要的
下面的两个代码片段是等价的:
实例
<p>狗 狗 很 呆 萌。</p>
<p>狗 狗 很
呆 萌。</p>
无论你用了多少空格(包括空格字符,包括换行),当渲染这些代码的时候,HTML 解释器会将连续出现的空格字符减少为一个单独的空格符。
为什么我们会使用那么多的空格呢?
答案就是为了可读性——如果你的代码被很好地进行格式化,那么就很容易理解你的代码,反之就会很混乱。在我们的 HTML 代码中,我们让每一个嵌套的元素以两个空格缩进。
你使用什么风格来格式化你的代码取决于你(比如所对于每层缩进使用多少个空格),但是记住你应该坚持使用某种风格。
HTML 链接
HTML 链接是通过标签<a>
来定义的。a
标签,也叫anchor(锚点)
元素,既可以用来链接到外部地址实现页面跳转功能,也可以链接到当前页面的某部分实现内部导航功能。
实例
<a href="http://www.w3cschool.cn">这是一个链接</a>
提示:在
href
属性中指定链接的地址。(您将在本教程稍后的章节中学习更多有关属性的知识)
HTML 图像
HTML 图像是通过标签<img>
来定义的。使用img
元素来为你的网站添加图片,使用src
属性指向一个图片的具体地址。
举例如下:<img src="https://www.your-image-source.com/your-image.jpg" rel="external nofollow" >
请注意:img
元素是自关闭元素,不需要结束标记。
实例
<img src="logonew2.png" width="206" height="36">
注意: 图像的名称和尺寸是以属性的形式提供的。
HTML 强调
在人类语言中,为了突出一句话的意思,我们通常强调某些词,并且我们通常想要标记某些词作为重点或者表示某种程度上的不同。HTML 提供了许多语义化的元素,并且允许我们通过这些元素的意义标记正文内容,在这个章节中,我们将看到最常见的一小部分元素。
在 HTML 中我们可以使用em(emphasis)
元素来标记这样的情况,浏览器默认风格为斜体:
实例
<p>我 <em>很高兴</em>你不 <em>讨厌我</em>.</p>
在 HTML 中我们还可以使用<strong>(strong importance)
元素来标记这样的请况,浏览器默认风格为粗体:
实例
<p>这种液体是<strong>高毒性的</strong>.</p>
<p>我就指望你<strong>不会</strong> 迟到!</p>
注意:为了不同的字体风格,我们应该使用元素和一些 CSS 的样式.
HTML 元素
HTML 元素
HTML 文档由 HTML 元素定义,HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
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 文档实例
实例
<!DOCTYPE html>
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>
上述的实例包含了三个 HTML 元素。
HTML 实例解析
<p> 元素:
实例
<p>这是第一个段落。</p>
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p> 以及一个结束标签 </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 空元素即为没有内容的 HTML 元素。
HTML 空元素应该在开始标签中关闭。
HTML 的一个空元素为 <br>(用于定义换行),<br> 元素就是没有关闭标签。
HTML 空元素的关闭方法是在开始标签中添加斜杠,比如 <br />,HTML、XHTML 和 XML 都接受这种方式。
注意:在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭,即使是空元素。
HTML 提示:使用小写标签
由于 HTML 标签对英文字母的大小写不敏感,所以 <P> 和 <p> 表达的意思相同,不过早年的大部分网站喜欢使用大写的 HTML 标签。
W3CSchool 使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。
在HTML4之前,HTML的标准比较混乱,所以早年的HTML代码并不是那么规范,与XML的代码会更加相似,而XML代码的一大特点就是标签喜欢使用大写,所以在HTML刚发展的几年大部分网站都喜欢使用大写的标签。
随着HTML4甚至HTML5的普及,后续的网站都遵循HTML4的推荐——使用小写,这也是为什么现在的大多数网站使用小写的HTML标签的原因。
HTML 属性
HTML 属性
属性是为 HTML
元素提供的附加信息。
HTML 属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现,比如:name="value"。
属性实例
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:
实例
<a href="https://www.w3cschool.cn">这是一个链接使用了 href 属性</a>
HTML 属性常用引用属性值
属性值应该始终被包括在引号内。
双引号是最常用的,不过使用单引号也没有问题。
提示: 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='John "ShotGun" Nelson'
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 标题
标题(Heading)是通过 <h1> - <h6> 标签进行定义的.
<h1>定义最大的标题。<h6> 定义最小的标题。
实例
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<h4>这是标题4</h4>
<h5>这是标题5</h5>
<h6>这是标题6</h6>
注释: 浏览器会自动地在标题的前后添加空行。
注释:默认情况下,HTML 会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。
标题很重要
请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。
您可以在实战练习中学习编辑<h2>标签!
HTML 水平线
<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容,使用该元素产生的水平线可以在视觉上将文档分隔成各个部分。
实例
<p>hr 标签定义水平线:</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
HTML 注释
可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。
HTML 注释可以方便地用来帮助网页设计人员,提醒他们与程序相关的信息。
注释写法如下:
实例
<!-- 这是一个注释 -->
注释: 开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要,合理地使用注释可以对未来的代码编辑工作产生帮助。
您可以在实战练习中学习 HTML 注释语句!
HTML 提示 - 如何查看源代码
你是否看过一些网页然后惊叹它是如何实现的的。
如果您想找到其中的奥秘,只需要单击右键,然后选择"查看源文件"(IE)或"查看页面源代码"(Firefox),其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。
本站实例
标题
如何在 HTML 文档中显示标题。
隐藏注释
如何在 HTML 源代码中插入注释。
水平线
如何插入水平线。
HTML 标签参考手册
W3CSchool 的标签参考手册提供了有关这些标题及其属性的更多信息。
您将在本教程下面的章节中学到更多有关 HTML 标签和属性的知识。
标签 | 描述 |
---|---|
<html> | 定义 HTML 文档 |
<body> | 定义文档的主体 |
<h1> - <h6> | 定义 HTML 标题 |
<hr> | 定义水平线 |
<!--...--> | 定义注释 |
HTML 段落
HTML 开头
HTML 可以将文档分割为多个层次。
HTML 初步
开头是通过 <p>
标签定义的。
注意:浏览器会自动地在先前的前后添加空行。(</p>
是块级元素)
不要忘记结束标签
即使忘了使用结束标签,大多数浏览器也会正确地将 HTML 显示出来:
上面的例子在大多数浏览器中都没问题,但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。
注释:在未来的 HTML 版本中,重复省略结束标签。
HTML 折行
如果您希望在不产生一个新起点的情况下进行换行(新行),请使用 <br />
标签。
在 HTML 语言中,<br />
标签定义为一个换行符,它可以理解为简单的输入一个空行,而不是用来对内容进行拆分:
实例
<p>这个<br>段落<br>演示了分行的效果</p>
尝试一下»
<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。
HTML 输出-使用提醒
我们无法确定 HTML 被显示的效果。屏幕的大小,以及对窗口的调整都可能导致不同的结果。
对于 HTML,您无法通过在 HTML 代码中添加额外的空间或换行来改变输出的效果。
当显示页面时,浏览器会可移动源代码中多余的空间和空行。所有连续的空间或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行) )也被显示为一个空格。
(这个示例演示了一些 HTML 格式化方面的问题)
本站实例
如何在浏览器中显示 HTML 进行。
在 HTML 文档中使用换行。
浏览器在显示 HTML 时,会省略源代码中多余的空白字符(空格或回车等)。
更多实例
随之而来的行为。
HTML 标签参考手册
W3CSchool 的标签参考手册提供了有关 HTML 元素及其属性的更多信息。
标签 | 描述 |
---|---|
<p> | 定义一个段落 |
<br> | 插入单个折行(换行) |
原文地址:https://blog.csdn.net/m0_69824302/article/details/142737866
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!