HTML 元素与标签

TML（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/

TML常用元素使用练习2

NO.3:

注释标签是为代码添加注释使用的，它的内容不会显示在页面中。几乎每种编程语言都有自己注释的写法。对于一些复杂代码标注注释对团队合作非常重要，即使自己若干年后打开以前写的代码，也能通过注释快速回忆起曾经的思路。当然，HTML很少用到注释，因为它太简单了。

代码示例：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
</head> 
<body>
  <h1>第一个网页</h1><hr>
<p>千里之行始于足下<br>值得注意的是我们没有必要一一讲解HTML中的所有元素以及每个元素的各个属性，<br>
  因为每个元素的使用都是大同小异，我们完全可以通过几个常用案例对HTML全部元<br>
  素及属性的指定形成一个整体认识，以后可以根据需求通过查询手册来自己学习其他<br>
  元素及其属性的用法。</p><hr><!--这里是注释-->
</body> 
</html>

因为页面中没有显示，就不给大家截图了。

NO.4:<img>

<img>可以用来显示图片元素，但是写法和之前的元素不太一样，这个元素没有结尾标签。它是通过改变标签的src属性向页面导入图片。

在做这个练习之前我们需要做一个准备工作，

step1：找一张图片，例如：下面这张美女

step2：右键-另存为

step3：选择路径，我们在之前的篇章中已经带领大家在自己的某个盘上建立了一个叫做"零基础自学网页制作"的文件夹，图片保存到这个文件夹中！

step4：图片命名为 image1.jpg

step5：确定你的"第一个页面.html"文件和"image1.jpg"在一个文件夹中。

<img src="image1.jpg"/> 示例代码如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
</head> 
<body><h1>第一个网页</h1><hr>
<img src="image1.jpg"/>
  </body> 
</html>

页面效果如图所示：

HTML元素中除了有向首尾标签中间添加文字来显示内容的元素，也有通过src属性导入信息的元素。

NO.5:<a></a>

<a></a>标签是用来添加超链接的元素，这个元素的写法比较有趣。

<a href="https://www.toutiao.com/i6785149184245760516/?group_id=6785149184245760516?group_id=6785149184245760516?group_id=6785149184245760516">零基础自学网页制作——序章（学习目的、对象、基本概念）</a>代码示例：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
</head> 
<body>
  <h1>第一个网页</h1>
<hr><a href="https://www.toutiao.com/i6785149184245760516/?group_id=6785149184245760516?group_id=6785149184245760516?group_id=6785149184245760516"> 零基础自学网页制作——序章（学习目的、对象、基本概念）</a></body> </html>

页面效果如图：

通过点击"零基础自学网页制作——序章（学习目的、对象、基本概念）"可以跳转到相应页面。

通过观察发现，a标签是在首尾标签之间添加要显示的文字内容，通过为href属性添加网址完成超链接设置。

大家思考一下，如果把文字换成图片，超链接还会起作用吗？

示例代码如下：

<a href="https://www.toutiao.com/i6785149184245760516/?group_id=6785149184245760516?group_
id=6785149184245760516?group_id=6785149184245760516"><img src="image1.jpg"/></a>

使用"<img src="image1.jpg"/>"代替"零基础自学网页制作——序章（学习目的、对象、基本概念）"。

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
</head> 
<body>
  <h1>第一个网页</h1><hr>
<a href="https://www.toutiao.com/i6785149184245760516/?group_id=6785149184245760516?group
_id=6785149184245760516?group_id=6785149184245760516"> <img src="image1.jpg"/></a>
  </body> 
  </html>

效果如下：

看起来似乎没有变化，但是鼠标移动到图片上时，箭头变成了小手的图标。

点击后打开目标链接。

今天的内容到这里就结束了，通过这几个元素的学习，大家对html元素的使用建立了基本概念。

下一期我们将详细讲解html元素中的属性，在练习中再次介绍几个常用元素，并为大家讲解"绝对路径"与"相对路径"的区别。

喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

起之前工作面试时，面试官问的一个问题：行内元素有哪些，和块级元素有什么区别？这是一道蛮基础的面试题，但是很多初学者平时只注重标签语义，忽视了标签行内和块级的特性，因此对于上述问题很有可能答不上来或者答不全。

HTML常见的行内元素有：

还有包括一些文本元素如：<br> 、<b>、 <strong>、<sup> 、<sub>、 <i> 、<em> 、<del> 、 <u>等。

要是只回答<span>和<img>那就说不过去了吧。

HTML常见的块级元素有：

<div>、<table>、<form>、<p>、<ul>、

<h1>......<h6>、<hr> 、<pre>、<address>、<center>、<marquee> 、<blockquote> 等。

要是只回答<div>那就说不过去了吧。

那它们之间的区别是什么呢？

·块级元素

1.总是从新的一行开始，即各个块级元素独占一行，默认垂直向下排列；

2.高度、宽度、margin及padding都是可控的，设置有效，有边距效果；

3.宽度没有设置时，默认为100%；

4.块级元素中可以包含块级元素和行内元素。

·行内元素

1.和其他元素都在一行，即行内元素和其他行内元素都会在一条水平线上排列；

2.高度、宽度是不可控的，设置无效，由内容决定。

设置margin左右有效，有边距效果；

设置margin上下会撑大空间但是不会产生边距效果（即盒模型margin-top/bottom有值，但页面上没有边距效果）。

设置padding左右有效，设置padding上下会撑大空间但是不会产生边距效果（同上）。

padding效果如下展示：


<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
   </head>
	<style>
		span{
			border:1px solid red;
			padding:10px;
		}
		div{
			border:1px solid blue;
		}
	</style>
   <body>
	   <div>块级元素</div>
	   <span> 行内元素</span>
	   <span> 行内元素</span>
	   <div>块级元素</div>
   </body>
</html>

3.根据标签语义化的理念，行内元素最好只包含行内元素，不包含块级元素。

转换

当然块级元素与行内元素之间的特性是可以相互转换的。HTML可以将元素分为行内元素、块状元素和行内块状元素三种。

使用display属性能够将三者任意转换：

(1)display:inline;转换为行内元素；

　　(2)display:block;转换为块状元素；

　　(3)display:inline-block;转换为行内块状元素。

行内块状元素综合了行内元素和块状元素的特性：

(1)不自动换行，与其他行内元素都会在一条水平线上排列；

(2)高度、宽度、margin及padding都是可控的，设置有效，有边距效果；

(3)默认排列方式为从左到右。

在线咨询

上一篇：用HTML5构建一个流程图绘制工具
下一篇：HTML 页面显示 XML 数据

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。