百度360必应搜狗淘宝本站头条
HTML APICSS 语法HTML 游戏HTML5 支持CSS 谷歌字体
当前位置：网站首页 > 技术文章 > 正文

HTML 元素与标签

myzbx 2024-12-02 22:35 34 浏览


HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。在HTML中，"元素"和"标签"是构建网页的基本组成部分，它们一起定义了网页的结构和内容。HTML标签是用来定义HTML元素的开始和结束的，而HTML元素是由标签及其包含的内容组成的。


参考文档：https://www.cjavapy.com/article/3303/


1、HTML 元素


HTML元素指的是从开始标签到结束标签的所有内容。它们是HTML文档的构建块，用于创建和组织网页内容。HTML元素可以包含文本、图片、链接、表格等多种类型的数据。元素可能包括一个开始标签和一个结束标签，也可能只有一个标签（在自闭合元素的情况下）。


1） <!DOCTYPE> 声明


用于定义文档类型，告诉浏览器此文档使用哪个HTML版本。


<!DOCTYPE html>


2） <html>


根元素，包含整个HTML文档。


<html lang="en">
</html>


3） <head>


包含文档的元数据，如标题、字符集声明和链接到样式表。


<head>
  <title>页面标题</title>
  <meta charset="UTF-8">
</head>


4）<title>


定义文档的标题，显示在浏览器的标题栏或页面的标签页上。


<title>这是文档的标题</title>


5）<body>


包含文档的所有可见内容，如文本、图片、链接和其他多媒体元素。


<body>
  <h1>这是一个主标题</h1>
  <p>这是一个段落。</p>
</body>


6） <header>


定义一个区域或页面的头部，通常包含标题和导航链接。


<header>
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于</a></li>
    </ul>
  </nav>
</header>


7） <footer>


定义页面或区域的页脚部分，通常包含版权信息、联系信息等。


<footer>
  <p>版权所有 ? 2024</p>
</footer>


8） <nav>


定义导航链接的部分，用于页面内或页面间的导航。


<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻</a></li>
  </ul>
</nav>


9）<section>


定义文档中的一个独立部分，通常与标题一起使用。


<section>
  <h2>章节标题</h2>
  <p>这是该章节的一些内容。</p>
</section>


10. <article>


定义可以独立于内容其余部分的完整自包含内容，例如博客帖子或新闻文章。


<article>
  <h2>文章标题</h2>
  <p>文章内容...</p>
</article>


11. <aside>


定义与周围内容稍微分离的内容，如侧边栏或广告栏。


<aside>
  <p>这是一些附加信息。</p>
</aside>


12. <figure> 和 <figcaption>


<figure> 定义独立的流内容（如图表、图像、代码示例等），<figcaption> 提供该内容的标题。


<figure>
  <img src="image.jpg" alt="描述性文本">
  <figcaption>图像标题</figcaption>
</figure>


2、HTML 标签


HTML标签是HTML元素的一部分，用于从逻辑上开始或结束一个元素。标签通常成对出现，包括一个开始标签和一个对应的结束标签，结束标签的名称前会有一个斜线（/）作为区分。有些HTML标签是自闭合的，意味着它们不需要结束标签，如图像标签（<img />）和换行标签（<br />）。


标签

说明

<!DOCTYPE>

声明文档类型和HTML版本。

<html>

标识一个HTML文档的根元素。

<head>

包含了文档的元数据。

<title>

指定文档的标题。

<body>

包含了可见的页面内容。

<h1> - <h6>

定义标题，从

<h1> 到 <h6> 重要性递减。

<p>

定义段落。

<br>

插入一个换行符。

<hr>

在页面上绘制一条水平线。

<b>

定义粗体文本。

<i>

定义斜体文本。

<u>

定义下划线文本。

<strong>

定义重要文本。

<em>

定义强调文本。

<mark>

定义被标记或高亮的文本。

<small>

定义小号文本。

<sub>

定义下标文本。

<sup>

定义上标文本。

<a>

定义超链接。

<img>

在页面中嵌入图像。

<ul>

定义无序列表。

<ol>

定义有序列表。

<li>

定义列表项。

<table>

定义表格。

<th>

定义表格的表头单元格。

<tr>

定义表格的行。

<td>

定义表格单元。

<form>

定义HTML表单。

<input>

定义输入控件。

<textarea>

定义多行文本输入控件。

<button>

定义按钮。

<select>

定义下拉列表。

<option>

定义下拉列表中的选项。

<article>

定义文章。

<section>

定义文档中的一个区域（或节）。

<header>

定义介绍性内容或导航链接的容器。

<footer>

定义注脚或文档的页脚。

<nav>

定义导航链接的部分。

<aside>

定义侧边栏内容。


使用示例：


<!DOCTYPE html>
使用示例：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML标签使用示例</title>
</head>
<body>
<header>
    <h1>欢迎来到我的网页</h1>
    <nav>
        <a href="#content">主要内容</a> |
        <a href="#contact-form">联系表单</a>
    </nav>
</header>
<section id="content">
    <article>
        <h2>HTML基础</h2>
        <p>HTML是构建网页的基石。<strong>标签</strong>是它的核心组成部分。<mark>本文</mark>介绍了一些最常用的HTML标签。</p>
    </article>
    <aside>
        <h3>注意</h3>
        <p>记得检查HTML5的新特性和标签。</p>
    </aside>
    <ul>
        <li>文本标签</li>
        <li>列表</li>
        <li>表格</li>
        <li>表单</li>
    </ul>
    <ol>
        <li>先介绍基础</li>
        <li>然后是进阶</li>
    </ol>
    <table>
        <tr>
            <th>标签</th>
            <th>描述</th>
        </tr>
        <tr>
            <td><p></td>
            <td>段落标签</td>
        </tr>
        <tr>
            <td><a></td>
            <td>链接标签</td>
        </tr>
    </table>
</section>
<section id="images">
    <h2>图片</h2>
    <img src="example.jpg" alt="示例图片">
</section>
<footer>
    <section id="contact-form">
        <h2>联系我们</h2>
        <form>
            <label for="name">姓名:</label>
            <input type="text" id="name" name="name"><br>
            <label for="email">电子邮件:</label>
            <input type="email" id="email" name="email"><br>
            <input type="submit" value="提交">
        </form>
    </section>
    <p>? 2024 HTML标签示例</p>
</footer>
</body>
</html>


参考文档：Hhttps://www.cjavapy.com/article/3303/

相关推荐

砌体植筋拉拔试验检验值到底是6.0KN，还是10.2KN，如何计算确定

砌体拉结筋植筋养护完成后，需对所植钢筋进行拉拔试验，以检验植筋的锚固强度是否满足设计要求。检测时，按照一定的抽样比例进行拉拔试验。根据《混凝土结构后锚固技术规程》JGJ145-2013，以同品种、同...

柴油机功率如何计算?计算柴油机功率需要哪些参数?

在汽车领域，对于柴油机功率的计算是一项重要的工作，它有助于我们更好地了解柴油机的性能和适用场景。下面我们就来详细探讨一下柴油机功率的计算方法以及所需的参数。首先，我们要了解计算柴油机功率常用的公式。在...

变压器短路阻抗的作用和计算方法（变压器短路阻抗的作用和计算方法是什么）

变压器短路阻抗的作用和计算方法短路阻抗是在负载试验中测量的一项数据，它是二次侧短接并流过额定电流时，一次侧施加的电压与额定电压的的百分数。那么测量变压器的短路阻抗有什么意义呢？其实变压器的阻抗电压乃是...

9.35m层高高支模支撑架计算书（支模架多高属于高支模）

某工厂新扩建的建筑面积为1989.2m^2，建筑物总体分为2层，但局部为4层。建筑物檐高19.4m，建筑物总高23m。建筑物呈长方形设置，长度为48.20m，宽度为23.88m，结构形式为框架结构...

吊篮(悬挂装置前梁加长)安全复核计算书

吊篮（悬挂装置前梁加长）安全复核计算书一种超常规搭设的高处作业吊篮，因使用要求将吊篮悬挂装置前梁加长设置，本计算书针对这种工况的校核，以作参考。计算依据：1、《高处作业吊篮》GB/T19155-...

电功率计算公式精编汇总（电功率计算视频讲解）

一、电功率计算公式：1在纯直流电路中：P=UIP=I2RP=U2/R式中：P---电功率（W），U---电压（V），I----电流（A），R---电阻（Ω)。2在单相交流电路中：P=UIcosφ...

灌注桩承载力检测方法及步骤（灌注桩承载力不够怎么办）

检测灌注桩的承载力是确保基础工程安全可靠的关键环节，检测结果的精细能准确为我们提供可靠的数据，让我们能准确判断桩基础的承载力，方便后续施工安排，同样也能让我们根据数据分辨出有问题桩基，采取可靠有效的措...

很哇塞的体积计算方法:向量叉乘 很哇塞的体积计算方法

高中数学必看：向量叉乘，体积的神。大家都知道a、b的向量是什么意思，但是a、b的向量又是什么？很多同学都不知道，向量的向量在高中阶段非常有用，虽然它是大学的知识，在高中阶段可以干两件事。·第一件事，表...

施工升降机基础(设置在地库顶板回顶)计算书

施工升降机基础（设置在地库顶板回顶）计算书计算依据：1、《施工现场设施安全设计计算手册》谢建民编著2、《建筑地基基础设计规范》GB50007-20113、《混凝土结构设计标准》GB/T50010-2...

剪力墙水平钢筋根数如何计算?（剪力墙水平钢筋绑扎搭接规范）

剪力墙水平钢筋根数的计算需综合考虑墙高、起步距离、间距及构造要求等因素，具体步骤如下及依据：1.基本计算公式水平钢筋根数计算公式为：根数=（墙高-起步距离）/间距（墙高-起步距离）/间距...

直流电路常用计算公式（直流电路常用计算公式有哪些）

1、电阻导体阻碍电流通过的能力叫做电阻，用字母R表示，单位欧(Ω)。R=ρl/s式中R-导体的电阻，欧(Ω)；ρ-导体的电阻率，欧·米(Ω·m)；l-导体的长度，米(m)；s-导体的截面积，平方米(m...

电气主电路图的绘制特点（电气原理图主电路）

1、电气主电路图中的电气设备、元件，如电源进线、变压器、隔离开关、断路器、熔断器、避雷器等都垂直绘制，而母线则水平绘制。电气主电路图除特殊情况外，几乎无一例外地画成单线图，并以母线为核心将各个项目(如...

中考总复习:物理专题 功和机械能 (功的计算、功率、动能、势能)

中考物理专题：功与机械能解析一、力学中的功——能量转化的桥梁功是力对物体能量变化的量度，需满足两要素：作用在物体上的力、物体沿力方向移动距离。例如推箱子时，若箱子未移动，推力不做功；若箱子滑动，推力做...

40亿QQ号，不超过1G内存，如何去重?

分享一道网上很火的面试题：40亿QQ号，不超过1G的内存，如何去重？这是一个非常经典的海量数据去重问题，并且做了内存限制，最多只能1GB，本文跟大家探讨一下~~一、常规思路我们日常开发中,如果谈到去重...

填充墙体拉结筋植筋深度、孔径、拉拔试验承载力计算!

今天分享下植筋间距及保护层要求：根据JGJ145-2013混凝土后锚固技术规程要求植筋与混凝土结构边缘不应小于5mm，植筋为两根及以上时水平间距为不应小于5d（d为钢筋直径）。根据混凝土结构后锚固技...

一周热门
最近发表
标签列表