热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

什么是HTML文件?HTML文件的初步认识

本篇主要讲解HTML5入门的一些细节
这是一篇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部分的重要性,并详细说明了不同类型的请求体。 ... [详细]
  • Leetcode学习成长记:天池leetcode基础训练营Task01数组
    前言这是本人第一次参加由Datawhale举办的组队学习活动,这个活动每月一次,之前也一直关注,但未亲身参与过,这次看到活动 ... [详细]
  • 本文详细介绍了如何使用JavaScript实现面部交换功能,包括基本原理和具体实现步骤。 ... [详细]
  • C盘无法格式化的原因及解决方法
    本文探讨了C盘无法格式化的原因,并提供了详细的解决方案,帮助用户顺利进行系统维护。 ... [详细]
  • 开机自启动的几种方式
    0x01快速自启动目录快速启动目录自启动方式源于Windows中的一个目录,这个目录一般叫启动或者Startup。位于该目录下的PE文件会在开机后进行自启动 ... [详细]
  • XAMPP 遇到 404 错误:无法找到请求的对象
    在使用 XAMPP 时遇到 404 错误,表示请求的对象未找到。通过详细分析发现,该问题可能由以下原因引起:1. `httpd-vhosts.conf` 文件中的配置路径错误;2. `public` 目录下缺少 `.htaccess` 文件。建议检查并修正这些配置,以确保服务器能够正确识别和访问所需的文件路径。 ... [详细]
  • 技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统
    技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统 ... [详细]
  • Vim 编辑器功能强大,但其默认的配色方案往往不尽如人意,尤其是注释颜色为蓝色时,对眼睛极为不友好。为了提升编程体验,自定义配色方案显得尤为重要。通过合理调整颜色,不仅可以减轻视觉疲劳,还能显著提高编码效率和兴趣。 ... [详细]
  • 使用Java开发简易文本编辑器
    作为一名初学者,虽然之前有使用VB.NET和C#开发文本编辑器的经验,但在尝试用Java实现相同功能时,感觉Java的图形界面组件不如微软的产品(如C#和VB.NET)那么友好。本文将分享我在Java中开发简易文本编辑器的过程,并探讨Java在图形界面方面的优缺点。 ... [详细]
  • 本文节选自《NLTK基础教程——用NLTK和Python库构建机器学习应用》一书的第1章第1.2节,作者Nitin Hardeniya。本文将带领读者快速了解Python的基础知识,为后续的机器学习应用打下坚实的基础。 ... [详细]
  • 通过将常用的外部命令集成到VSCode中,可以提高开发效率。本文介绍如何在VSCode中配置和使用自定义的外部命令,从而简化命令执行过程。 ... [详细]
  • Visual Studio Code (VSCode) 是一款功能强大的源代码编辑器,支持多种编程语言,具备丰富的扩展生态。本文将详细介绍如何在 macOS 上安装、配置并使用 VSCode。 ... [详细]
  • 在《Cocos2d-x学习笔记:基础概念解析与内存管理机制深入探讨》中,详细介绍了Cocos2d-x的基础概念,并深入分析了其内存管理机制。特别是针对Boost库引入的智能指针管理方法进行了详细的讲解,例如在处理鱼的运动过程中,可以通过编写自定义函数来动态计算角度变化,利用CallFunc回调机制实现高效的游戏逻辑控制。此外,文章还探讨了如何通过智能指针优化资源管理和避免内存泄漏,为开发者提供了实用的编程技巧和最佳实践。 ... [详细]
  • 如何使用AU进行专业音频剪辑与处理?首先,创建多轨会话:在菜单中依次选择【文件】→【新建】→【多轨会话】。接下来,编辑项目的基本信息。对于初学者来说,初始设置可能会显得复杂且难以理解,但这是确保项目顺利进行的重要步骤。熟悉这些设置后,你将能够更高效地进行音频剪辑与处理。 ... [详细]
  • 本文详细介绍了VIM的基础操作和常用快捷键,VIM作为Unix及类Unix系统中的一款经典文本编辑器,源自VI的改进与发展。其简洁的界面和强大的扩展性使其在开发者中备受青睐,同时也催生了多个适用于Windows平台的版本。通过图文并茂的方式,帮助读者快速掌握VIM的核心功能与使用技巧。 ... [详细]
author-avatar
广东工业大学普通话_333
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有