首页 > 其他分享 >HTML页面元素解释

HTML页面元素解释

时间:2023-06-14 14:36:34浏览次数:39  
标签:标签 元素 HTML 内容 文档 页面

HTML 代表超文本标记语言,是用于在万维网上创建网页和构建其内容的标准标记语言。

HTML 是 Web 开发的支柱,也是创建基于 Web 的文档的基本构建块。让我们快速看一下它是如何工作的。

(更多优质内容:java567.com)

HTML 有什么作用?

HTML 的主要作用是通过使用一组标签或元素来定义网页的结构和布局。这些标签代表不同类型的内容,例如标题、段落、图像、链接、表单和表格。

HTML 标记包含在尖括号 (<>) 中,由开始标记、内容和结束标记(由正斜杠“/”标识)组成。

通过使用 HTML,Web 开发人员可以定义网页的语义结构,指定标题、段落、列表和部分等元素。这是一个典型的 HTML 页面示例,其中<head>清楚地标识了<body>、<header>、 和<footer>部分:

 <!DOCTYPE html>
 <html>
 <head>
  <title>My Demo</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
 <header>
  <h3>My Demo</h3>
 </header>
 <div class="container2">
  <!--And a comment!
  -->
  Here are some important points to consider:<br>
  <ul>
  <li>Point One
  <li>Point Two
  <li>Point Three
  </ul>
 <footer>
  <p>&copy; 2023 My Demo. All rights reserved.</p>
  <nav>
    <ul>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
      <li><a href="/privacy">Privacy Policy</a></li>
    </ul>
  </nav>
 </footer>
 </div>
 </body>
 </html>

此外,HTML 允许包含图像和视频等多媒体内容。它还允许您集成其他 Web 技术,例如用于样式的 CSS(层叠样式表)和用于交互的 JavaScript。

下面是一个示例代码片段,显示了将图像和视频合并到网页中。

 <img src="test_image.png" width="800" alt="A test image">
 <hr>
 ​
 <div class="video-container">
  <video controls>
    <source src="sample_video.mkv" type="video/mp4">
    Your browser does not support the video tag.
  </video>
 </div>

HTML 文档由 Web 浏览器解释,呈现结构化内容并将其呈现给用户。它使浏览器能够理解网页上元素的层次结构、关系和表示。它确保一切都按预期显示,并且具有适当的交互性。

在本指南中,我们将探讨核心 HTML 元素,包括文档结构、外部链接、嵌入式媒体和简单表单。我们将通过实际创建东西来完成所有这些工作。不再有无聊的幻灯片。

了解 HTML 页面结构

好的。HTML 文档的基本结构(有时称为 HTML 骨架)为创建网页提供了基础。它由几个建立结构和定义页面内容的基本元素组成。

当我右键单击一个页面时,我可以选择查看页面源代码选项,然后我会发现自己正在查看 HTML 源代码。

好吧,从头开始。文档类型声明 (<!DOCTYPE>) 位于 HTML 文档的最开头,以指定正在使用的 HTML 版本。它确保浏览器正确解释页面。

HTML 标记是 HTML 文档的根元素。它包含页面的全部内容,并充当所有其他 HTML 元素的容器。

如果您一直滚动到页面底部,您会看到一个结束标记,如下所示:</html>。

HTML 代码的 <head> 部分是什么?

head 标签包含有关网页的元数据和其他不可见信息。它可以包括页面标题、字符编码、链接样式表和 JavaScript 文件等元素。head 标签中的内容对加载页面的用户不直接可见。

本例中的字符集标记使用UTF-8。那是怎么回事?HTML 字符编码是指在 HTML 文档中用于表示和显示字符、符号和特殊字符的方法。

这可能是这样的:

 <!DOCTYPE html>
 <html>
 <head>
  <title>My Demo</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>

由于 HTML 是一种基于文本的标记语言,因此它需要一种标准化的方式来表示大写字母 AZ、小写字母 az 和数字 0-9 等基本字母数字集之外的字符。

使用 UTF-8 编码时,ASCII 范围之外的字符使用多个字节表示。例如,像“A”这样的基本拉丁字符由单个字节 (0x41) 表示,而某些非拉丁字符可能需要两个或更多字节。

该<head>部分还可以包含样式信息,这些信息可以很容易地放在随附的 CSS 文件中。这可能是这样的:

 <style>
  .video-container {
    width: 500px; /* Set the desired width */
  }
 </style>

body 标签表示网页的可见内容。它包含将在屏幕上显示的所有元素,例如文本、图像、标题、段落和链接。body 标签中的内容是用户访问页面时看到的内容。

标题标签,如 h1、h2 等,用于定义页面正文中各节的标题或标题。h1 标签代表主标题,h2 代表副标题,h3 代表副标题,依此类推。

段落标签,<p>定义页面正文中的文本块或内容。它们创建单独的段落,通常用于构建文本内容。

 <p>Here is some new text:</p>

理解语义标签

最后,HTML5引入了一组语义标签,为内容提供更有意义和描述性的结构。这些标签包括页眉、导航、部分、文章、旁白和页脚。

尽管它们并不总是对页面在浏览器中的显示方式产生任何直接影响,但语义标签有助于组织并使我们更容易理解页面不同部分的用途。

以感叹号开头的标签实际上用于用户看不到的评论,并且不会影响浏览器阅读页面的方式。这是一个例子:

 <!-- Here's a comment that's just for developers' eyes. -->

注释标签的目的是帮助我们记住各个代码段的用途和功能。这一切都是为了记录您的代码。

事实上,“可读性”是所有编写良好的 HTML 代码的重要特征。我们在这里看到的每个元素——无论是控制元数据、样式、脚本、导航还是纯文本——在智能呈现时都可以为用户看到的页面和代码本身的价值做出贡献。

(更多优质内容:java567.com)

标签:标签,元素,HTML,内容,文档,页面
From: https://www.cnblogs.com/web-666/p/17480117.html

相关文章

  • JavaScript 动态编辑元素某属性值(例如:元素div的class属性)
    元素<divclass="h5-box-search-itemusimglistnodisplay"id="usimglist"></div>(满足条件)动态更新div元素的class属性值://获取目标容器letusimglist=document.getElementById('usimglist');//获取其class的属性值letclassinfo=usimglist.ge......
  • 从n个不同元素中有放回的取出r个且不计顺序,有多少种不同的取法?
    从n个不同元素中有放回的取出r个且不计顺序,有多少种不同的取法?答案是:\(C_{n+r-1}^r\)解析因为是有放回地取出,所以同一个元素可能会被取多次,并且取出的元素是不计顺序的,那么如果我们设\(x_i\)为第\(i\)个元素被取出的次数,问题就被转化为:\[\begin{aligned}x_1+x_2+\cdots+x_n......
  • web页面中导出Excel (方法二) 前端easyui-datagrid导出Excel 使用 datagrid-export.js
    这个示例使用 前端easyui-datagrid 后端php 前端easyui-datagrid导出Excel使用了datagrid-export.js datagrid-export.js文件可自行搜索下载优点:查询结果显示在datagrid中(不能分页),前端直接下载不用回后端,效率高速度快。缺点:查询结果不能分页,必须显示全部内容,显......
  • web页面中导出Excel 方法一 后端php导出Excel
    这个示例使用 前端easyui-datagrid 后端php 其中前端是不是easyui-datagrid不重要,这个方法主要是使用后端php来实现导出Excel优点:现在的应用中大部分是分页显示的,在前台只显示一部分,但导出Excel是要看全部的。所以此时用前端js导出则不太好实现。缺点:当查询数据量较......
  • java开发C语言解释器:数组元素的读取和赋值
    本节技术内容难度较大,请结合视频对代码的讲解和调试来理解本节内容:用java开发编译器一个成熟的编译器或解释器,要能够解析和执行目标语言开发的逻辑复杂的程序代码,我们用java开发的C语言解释器,能够执行用C语言开发的较为复杂的程序时,才称得上是合格的,从本节开始,我们致力于C语言解......
  • 面试算法:在整形数组中构建元素之和能整除数组长度的子集
    更详细的讲解和代码调试演示过程,请参看视频如何进入google,算法面试技能全面提升指南假设A是一个整数数组,长度为n,数组中的元素可能是重复的。设计一个算法,找到一系列下标的集合I={i(0),i(1),i(2)….i(n)}.使得(A[i(0)]+A[i(1)]+…A[i(n)])modn=0.例如假定A={711......
  • 面试算法:计算堆栈当前元素的最大值
    更详细的讲解和代码调试演示过程,请参看视频如何进入google,算法面试技能全面提升指南有一道堆栈相关算法题,我被面试过两次以上,看似其在算法面试中出现的概率很高,由此值得我们好好分析下。题目是这样的:对于堆栈的常用操作有,pop弹出堆栈顶部的元素;push向堆栈压入一个元素;peek获......
  • html 中拦截 js 的样式更改
    比如拦截html标签的font-size样式的更改:...<body><script>varobserver=newMutationObserver(function(mutations){mutations.forEach(function(mutation){if(mutation.type==='attributes'&&mutation.attribu......
  • 2357.使数组中所有元素都等于零
    问题描述2357.使数组中所有元素都等于零(Easy)给你一个非负整数数组nums。在一步操作中,你必须:选出一个正整数x,x需要小于或等于nums中最小的非零元素。nums中的每个正整数都减去x。返回使nums中所有元素都等于0需要的最少操作数。示例1:输入:nums=......
  • 怎么将WPS中文档页面调整为一页纵向一页横向?
    1.单击菜单栏中的章节;2.选择工具栏中的拆分章节单击下一页分节符,此时文档出现两页;3.单击菜单栏中的页面布局;4.选择工具栏中的纸张方向,单击横向完成文档页面调整为一页纵向一页横向。 ......