HTML页面的基本代码结构是什么?

HTML页面的基本代码结构是什么?

(推荐教程:html教程)

HTML页面的基本代码结构

    标题内容

这些由(左尖角号)、内容以及>(右尖角号)组成的叫做标签(tag),三者缺一不可。在 HTML 中,使用包围标签的目的是方便将它们与普通文本进行区分。

上述代码描述的是 HTML 的基本结构,主要使用了 >、 以及 等标签。我们来分别看一下:

立即学习“前端免费学习笔记(深入)”;

是 Document Type Declaration 的简称,用来声明文档,也就是告知 web 浏览器当前页面使用了哪种 HTML 版本编写代码,此处使用的是 HTML 5 的版本。声明文档必不可少,而且必须位于 HTML 文档的第一行;

表示页面编写的代码都是 HTML 代码。它是成对出现的标签,直到 结束。除了声明文档外的所有代码都必须写在 中间;

表示页面的”头部”,页面的 title(标题)一般写在 中间;

表示页面的标题;

表示页面的”身体”,页面中的绝大部分内容都可以写在 之间。

可分为几层:

1.webp.jpg

第一层:

——!文档类型,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档,在html5文档中,一般写为 ;值得注意的是,不属于html标签。

——-html标签,是html文档的根标签,所有的网页标签都放在这对标签中,是所有html标签的祖先容器。

第二层:

——-头部标签,代表着html文档的头信息,是所有头部元素的容器,内部一般包含: 这些头部元素。

——-网页主体标签,其内部主要包含着构成网页内容的一些元素,如

,,

,

等。这些元素都会在网页的内容部分显示。

3、标签的属性

就如人有这身高、体重、年龄等这些属性一样,html标签也有自己的属性,如字体颜色,宽,高,背景等。这些属性一般通过键值对的形式卸载标签中,是标签的一部分,并且每种标签的属性都不完全像同,有的标签有着自己特有的属性。如下图所示:

1.png

4、html注释

在实际开发中,我们需要在html文档中做一些标记,方便日后对代码的维护及修改,也方便其他程序员了解我们的代码。而在html文档中,注释的格式为:

2.png

HTML 2中标签的区别

HTML 中的标签根据闭合状态可以分为 2 种,单闭合标签和自闭和标签。接下来看一下它们之间的区别。

1. 单闭合标签

HTML 基本结构中的 、

以及 标签都属于单闭合标签。其中 、、 以及标签叫做起始标签,、、 以及 标签叫做结束标签。由此我们可以看出,单闭合标签是指起始标签和结束标签同时存在的标签。

2. 自闭和标签

自闭和标签与单闭合标签的区别在于,它的结束标签可以使用/(结尾斜线)替代,直接写在起始标签的尾部。例如图像标签 HTML页面的基本代码结构是什么? 可以写成 HTML页面的基本代码结构是什么?,换行标签
可以写成
。在后面的讲述中我们会讲解 HTML页面的基本代码结构是什么? 标签以及
,这里只需要了解。

更多编程相关知识,请访问:编程视频课程!!

以上就是HTML页面的基本代码结构是什么?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1548640.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 20:05:12
下一篇 2025年12月21日 20:05:25

相关推荐

  • HTML中必须掌握的知识点有哪些

    你是如何理解 HTML 语义化的? 学习视频分享:html视频教程 让页面内容结构化,它有如下优点 1、易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。 立即学习“前端免费学习笔记(深入)”; 2、有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。 3、方便其他设备解析,如盲人阅读器…

    2025年12月21日
    000
  • HTML网页自动跳转的5种方法

    (推荐教程:html教程) 在我们进行网站创建时经常会遇到需要进行网页跳转的情况,本文就来为大家介绍五种网页自动跳转的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 网页自动跳转5种方法: 第一种网页自动跳转方法:meta refresh自动跳转法 立即学习“前端免费学习笔记…

    2025年12月21日
    000
  • html是一种页面什么型语言?

    html是一种页面“描述”型语言。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。 (推荐教程:html教程) html是一种页面“描述”型语言。 HTML(Hyper Text Mark-up Language)即超文本标记语言或超文本链接标…

    2025年12月21日
    000
  • 一起了解script标签中的async和defer属性

    前端当然要从 HTML 开始,我们来聊聊在 script 标签中加上 async/defer 时的功能及差异。 都明白的道理 我们都知道,浏览器解析 HTML 是一行一行按照顺序向后读取的,在传统的写法中,当浏览器读到 时,便会暂停解析 DOM,同时立即开始下载 中定义的资源,并在下载完成后立刻执行…

    2025年12月21日
    000
  • 怎么在html中实现图片超链接

    在html中实现图片超链接的方法:可以通过将图像元素嵌套在a元素中,使其成为一个链接,如【】。 目的: 对整个一幅图像文件设置超链接 思路: 可以通过将图像元素嵌套在a元素中使其变为一个链接。 立即学习“前端免费学习笔记(深入)”; (学习视频推荐:html视频教程) 语法: @@##@@ 举例: …

    2025年12月21日
    000
  • HTML hr是什么意思

    HTML hr是用于在页面中创建一条水平线的一种标签,在HTML中,标签没有结束标签,其使用语法如“这是段落这是段落”。 推荐:《HTML视频教程》 HTML 标签 定义和用法 标签在 HTML 页面中创建一条水平线。 立即学习“前端免费学习笔记(深入)”; 水平分隔线(horizontal rul…

    2025年12月21日
    000
  • html中行内元素与块级元素的区别是什么

    html中行内元素与块级元素的区别是:1、块级元素总是在新行开始,行内元素和其他元素在同一行;2、块级元素的高度、行高可控制,行内元素的高度、行高部分可改变;3、块级元素的宽度与内容无关,行内元素的宽度只与内容有关。 块级元素: (学习视频分享:html视频教程) 1、总是在新行上开始,占据一整行;…

    2025年12月21日
    000
  • 添加背景音乐的html标签是什么

    添加背景音乐的html标签是,bgsound是用以插入背景音乐,但只适用于IE,在netscape和firefox中并不适用,其参数设定很少,语法如“”。 推荐:《HTML视频教程》 添加背景音乐的html标签是。 bgsound 是用以插入背景音乐,但只适用于 IE,在netscape 和 fir…

    2025年12月21日
    000
  • html中的ul标签的作用是什么

    html中的ul标签的作用是:用于定义无序列表,如【】。ul标签支持class、dir、id、lang、style、title、xml等核心属性。 作用: 标签用于定义无序列表。 (学习视频分享:html视频教程) 将 标签与  标签一起使用,创建无序列表。 立即学习“前端免费学习笔记(深入)”; …

    2025年12月21日
    000
  • span是块元素吗?

    span不是块元素,而是内联元素(行内元素),可以对文档中的行内元素进行组合。span只是把内容定义成一个整体进行操作,不影响布局和显示,而且span没有什么实用特性,它的作用是围绕HTML代码中的其他元素,为其指定样式。 (推荐教程:html教程) span不是块元素,而是内联元素(行内元素),主…

    2025年12月21日
    000
  • 利用前端基础制作html开关图标

    我们先来看下效果图: (学习视频分享:html视频教程) html代码: 立即学习“前端免费学习笔记(深入)”; 开关图标 ON OFF css样式: body { text-align: center } .SwitchIcon { margin: 200px auto; } #toggle-bu…

    2025年12月21日
    000
  • www中的超文本文件是用什么语言编写的

    www中的超文本文件是用HTML语言(即超文本标记语言)编写的。WWW服务器中所存储的页面是一种结构化的文档,采用超文本标记语言(HTML)书写而成。 万维网(world wide web)上的一个超媒体文档称之为一个页面(外语:page)。作为一个组织或者个人在万维网上放置开始点的页面称为主页(外…

    2025年12月21日
    000
  • html中的特殊字符如何源码输出

    要实现Html中特殊字符不被转义(源码输出),有以下三种方法:方法一: (推荐教程:html教程) 将HTML代码嵌入到 举例: 立即学习“前端免费学习笔记(深入)”; body>哈哈哈dfdfd 以上就是html中的特殊字符如何源码输出的详细内容,更多请关注创想鸟其它相关文章!

    2025年12月21日
    000
  • 利用html实现一个三级菜单

    首先我们先来看一下效果图: (推荐教程:html教程) 完整代码: 立即学习“前端免费学习笔记(深入)”; 下拉菜单 /*重置浏览器默认样式*/ * { padding: 0; margin: 0; font-family: “Microsoft YaHei”; list-style: none; …

    2025年12月21日
    000
  • 在html页面中加入js可以用什么方法

    方法一:在head标签内引入JS文件 (推荐教程:html教程) 方法二:在body标签内写JS代码 //在这里面写你的js代码 </html 以上就是在html页面中加入js可以用什么方法的详细内容,更多请关注创想鸟其它相关文章!

    2025年12月21日
    000
  • 谈谈HTML标签元素中alt和title属性的区别

    本篇文章给大家介绍一下HTML标签元素中alt和title属性的区别。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 概述 这道题大概还可以加个限定词,我们暂且把 标签排除在本次讨论之外。 元素的 alt 和 title 属性 有什么区别? (推荐教程:html教程) ALT 属性…

    2025年12月21日
    000
  • 分享三款美观的html按钮样式

    样式如下: (推荐教程:html视频教程) 按钮样式一: 立即学习“前端免费学习笔记(深入)”; #login_click{ margin-top:32px; height:40px;}#login_click a { text-decoration:none;background:#2f435e;…

    2025年12月21日 好文分享
    000
  • html怎么实现上角标效果

    先来看看效果: (推荐教程:html视频教程) 实现代码: 立即学习“前端免费学习笔记(深入)”; 制作角标的方法 .con{ height: 250px; width: 200px; margin: 0 auto; overflow: hidden; margin-top: 100px; posi…

    2025年12月21日
    000
  • 网页开发中实用的11个文本输入和6个按钮操作特效

    文本输入特效 1.power-mode-input PowerModeInput 可以让你的文本输入框更引人注目。 地址:https://github.com/lindelof/power-mode-input 2.TextInputEffects 简单的样式和效果,可增强文本输入交互。 地址:ht…

    2025年12月21日 好文分享
    000
  • 深入了解HTML中的编码规范

    本文档的目标是使HTML代码风格保持一致,容易被理解和被维护,如果自己没有这种习惯,请好好选择你的IDE,别再用“文本编辑器”。 1 代码风格 1.1 缩进与换行 [强制] 使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符。 示例: 立即学习“前端免费学习笔记(深入)”; …

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信