作者:广东工业大学普通话_333 | 来源:互联网 | 2022-04-13 22:54
这是一篇HTML5入门教程,为了让更多的初学者找到正确的方向,所以本篇都是关于初学者如何系统的学习HTML5。
1.什么是HTML文件?
TML的英文全称是Hypertext Marked Language,中文叫做“超文本标记语言”。
和一般文本的不同的是,一个HTML文件不仅包含文本内容,还包含一些Tag,中文称“标记”。
一个HTML文件的后缀名是.htm或者是.html。
用文本编辑器就可以编写HTML文件。
2.写一个HTML文件
TML的英文全称是Hypertext Marked Language,中文叫做“超文本标记语言”。
和一般文本的不同的是,一个HTML文件不仅包含文本内容,还包含一些Tag,中文称“标记”。
一个HTML文件的后缀名是.htm或者是.html。
用文本编辑器就可以编写HTML文件。
This is my first homepage.This text is bold
要浏览这个first.html文件,双击它。或者打开浏览器,在File菜单选择Open,然后选择这个文件就行了。
这个文件的第一个Tag是,这个Tag告诉你的浏览器这是HTML文件的头。文件的最后一个Tag是,表示HTML文件到此结束。
在和之间的内容,是Head信息。Head信息是不显示出来的,你在浏览器里看不到。但是这并不表示这些信息没有用处。比如你可以在Head信息里加上一些关键词,有助于搜索引擎能够搜索到你的网页。
在之间的内容,是这个文件的标题。你可以在浏览器最顶端的标题栏看到这个标题。
在和之间的信息,是正文。
在和之间的文字,用粗体表示。顾名思义,就是bold的意思。
HTML文件看上去和一般文本类似,但是它比一般文本多了Tag,比如,等,通过这些Tag,可以告诉浏览器如何显示这个文件。
HTML元素(HTML Elements)
HTML元素(HTML Element)用来标记文本,表示文本的内容。比如body, p, title就是HTML元素。
HTML元素用Tag表示,Tag以<开始,以>结束。
Tag通常是成对出现的,比如。起始的叫做Opening Tag,结尾的就叫做Closing Tag。
目前HTML的Tag不区分大小写的。比如,和其实是相同的。
HTML元素(HTML Elements)的属性
HTML元素可以拥有属性。属性可以扩展HTML元素的能力。
比如你可以使用一个bgcolor属性,使得页面的背景色成为红色,就像这样:
再比如,你可以使用border这个属性,将一个表格设成一个无边框的表格。如下:
属性通常由属性名和值成对出现,就像这样:name="value"。上面例子中的bgcolor, border就是name,red和0就是value。属性值一般用双引号标记起来。 属性通常是附加给HTML的Opening Tag,而不是Closing Tag。
正文标题
这个示例告诉你如何在HTML文件里定义正文标题。
HTML用
到这几个Tag来定义正文标题,从大到小。每个正文标题自成一段。 This is a heading
This is a heading
This is a heading
This is a heading
This is a heading
This is a heading
段落划分
在HTML里用
和
划分段落。This is a paragraph
This is another paragraph
换行
通过使用
这个Tag,可以在不新建段落的情况下换行。
没有Closing Tag。 用
换行是个坏习惯,正确的是使用
。
This
is a para
graph with line breaks
HTML注释
在HTML文件里,你可以写代码注释,解释说明你的代码,这样有助于你和他人日后能够更好地理解你的代码。
注释可以写在之间。浏览器是忽略注释的,你不会在HTML正文中看到你的注释。
一些小建议
HTML文件会自动截去多余的空格。不管你加多少空格,都被看做一个空格。一个空行也被看做一个空格。
有些Tag能够将文本自成一段,而不需要使用
来分段。比如之类的标题Tag。【
推荐阅读
-
本文介绍了如何使用Postman构建和发送HTTP请求,包括四个主要部分:方法(Method)、URL、头部(Headers)和主体(Body)。特别强调了Body部分的重要性,并详细说明了不同类型的请求体。 ...
[详细]
蜡笔小新 2024-11-15 13:35:01
-
前言这是本人第一次参加由Datawhale举办的组队学习活动,这个活动每月一次,之前也一直关注,但未亲身参与过,这次看到活动 ...
[详细]
蜡笔小新 2024-11-14 18:01:31
-
-
本文详细介绍了如何使用JavaScript实现面部交换功能,包括基本原理和具体实现步骤。 ...
[详细]
蜡笔小新 2024-11-14 15:54:06
-
本文探讨了C盘无法格式化的原因,并提供了详细的解决方案,帮助用户顺利进行系统维护。 ...
[详细]
蜡笔小新 2024-11-12 13:05:47
-
0x01快速自启动目录快速启动目录自启动方式源于Windows中的一个目录,这个目录一般叫启动或者Startup。位于该目录下的PE文件会在开机后进行自启动 ...
[详细]
蜡笔小新 2024-11-12 11:16:30
-
在使用 XAMPP 时遇到 404 错误,表示请求的对象未找到。通过详细分析发现,该问题可能由以下原因引起:1. `httpd-vhosts.conf` 文件中的配置路径错误;2. `public` 目录下缺少 `.htaccess` 文件。建议检查并修正这些配置,以确保服务器能够正确识别和访问所需的文件路径。 ...
[详细]
蜡笔小新 2024-11-11 18:20:00
-
技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统 ...
[详细]
蜡笔小新 2024-11-11 15:24:24
-
Vim 编辑器功能强大,但其默认的配色方案往往不尽如人意,尤其是注释颜色为蓝色时,对眼睛极为不友好。为了提升编程体验,自定义配色方案显得尤为重要。通过合理调整颜色,不仅可以减轻视觉疲劳,还能显著提高编码效率和兴趣。 ...
[详细]
蜡笔小新 2024-11-11 12:34:19
-
作为一名初学者,虽然之前有使用VB.NET和C#开发文本编辑器的经验,但在尝试用Java实现相同功能时,感觉Java的图形界面组件不如微软的产品(如C#和VB.NET)那么友好。本文将分享我在Java中开发简易文本编辑器的过程,并探讨Java在图形界面方面的优缺点。 ...
[详细]
蜡笔小新 2024-11-14 08:04:26
-
本文节选自《NLTK基础教程——用NLTK和Python库构建机器学习应用》一书的第1章第1.2节,作者Nitin Hardeniya。本文将带领读者快速了解Python的基础知识,为后续的机器学习应用打下坚实的基础。 ...
[详细]
蜡笔小新 2024-11-13 21:23:34
-
通过将常用的外部命令集成到VSCode中,可以提高开发效率。本文介绍如何在VSCode中配置和使用自定义的外部命令,从而简化命令执行过程。 ...
[详细]
蜡笔小新 2024-11-13 16:57:15
-
Visual Studio Code (VSCode) 是一款功能强大的源代码编辑器,支持多种编程语言,具备丰富的扩展生态。本文将详细介绍如何在 macOS 上安装、配置并使用 VSCode。 ...
[详细]
蜡笔小新 2024-11-12 19:45:55
-
在《Cocos2d-x学习笔记:基础概念解析与内存管理机制深入探讨》中,详细介绍了Cocos2d-x的基础概念,并深入分析了其内存管理机制。特别是针对Boost库引入的智能指针管理方法进行了详细的讲解,例如在处理鱼的运动过程中,可以通过编写自定义函数来动态计算角度变化,利用CallFunc回调机制实现高效的游戏逻辑控制。此外,文章还探讨了如何通过智能指针优化资源管理和避免内存泄漏,为开发者提供了实用的编程技巧和最佳实践。 ...
[详细]
蜡笔小新 2024-11-11 14:49:31
-
如何使用AU进行专业音频剪辑与处理?首先,创建多轨会话:在菜单中依次选择【文件】→【新建】→【多轨会话】。接下来,编辑项目的基本信息。对于初学者来说,初始设置可能会显得复杂且难以理解,但这是确保项目顺利进行的重要步骤。熟悉这些设置后,你将能够更高效地进行音频剪辑与处理。 ...
[详细]
蜡笔小新 2024-11-10 15:09:55
-
本文详细介绍了VIM的基础操作和常用快捷键,VIM作为Unix及类Unix系统中的一款经典文本编辑器,源自VI的改进与发展。其简洁的界面和强大的扩展性使其在开发者中备受青睐,同时也催生了多个适用于Windows平台的版本。通过图文并茂的方式,帮助读者快速掌握VIM的核心功能与使用技巧。 ...
[详细]
蜡笔小新 2024-11-10 10:09:13
-
广东工业大学普通话_333
这个家伙很懒,什么也没留下!