整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

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/

个网页对应于一个html文件,HTML文件以.htm或.html为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑来产生HTML文件。标准的HTML文件都具有一个基本的整体结构,即HTML文件的开头与结尾标志和HTML的头部与实体2大部分。有3个双标记符用于页面整体结构的确认。

1、HTML元素
a、从开始标签到结束标签的所有代码
b、开始(开放)标签<p>、结束(闭合)标签</p>、标签内的东西:元素内容
c、<br/>空元素,换行的意思
d、用p标签行之间间隔较大,用br标签行之间间隔较小
e、HTML元素语法:
(1)元素内容是开始标签与结束标签之间的内容
(2)空元素在开始标签中进行关闭
(3)大多数HTML元素可拥有属性
f、嵌套的HTML元素:大多数的HTML元素都是可以嵌套使用的

2、HTML属性
a、标签可以拥有属性为元素提供更多信息
b、属性以键值对的形式出现:例如a标签里面 href="www.baidu.com"
c、常用标签类型:
(1)<h1 align = " ">对齐方式,例如center中间
(2)<body bgcolor=" ">背景颜色
(3)<a target = " ">规定在何处打开链接,_self本地默认打开
属性:
(1)默认,覆盖原标签页
(2)_blank,打开为新标签页
(4)<body backgroud=" ">设置背景图片
d、通用属性:
(1)class:规定元素的类名
(2)id:规定元素的唯一ID
(3)style:规定元素的样式,一般引用css
(4)title:规定元素的额外信息

3、HTML格式化
a、定义粗体文本
b、<big>定义大号字,HTML5会被css代替
c、<em>定义着重问题
d、定义斜体字
e、<small>定义小号字
f、<strong>定义加重语气
g、<sub>定义下标字
h、<sup>定义上标字
i、<ins>定义插入字,有下划线
j、<del>定义删除字,有删除线

每种HTML标记符在使用中可带有不同的属性项,用于描述该标记符说明的内容显示不同的效果。正文标记符中提供以下属性来改变文本的颜色及页面背景。

HTML(HyperText Markup Language,中文:超文本标记语言)是一种用于创建网页结构和内容的标记语言。它由一系列标签组成,这些标签描述了网页中的各个元素和其它相关信息。通过使用HTML标签和属性,开发人员可以定义文本、图像、链接、表格、表单等元素,并控制它们的外观和行为。本文主要介绍HTML的基本概念、历史背景和用途。


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


HTML实例:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CJAVAPY编程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>


HTML文档的后缀名可以是.html或.htm,都可以使用,没有区别。


注意:对于中文网页需要使用<meta charset="utf-8"> 声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为<meta charset="gbk"> 。


1、HTML的基本概念


1)标签(Tag)


HTML使用标签来定义网页中的各个元素。标签通常以尖括号< >的形式出现,如<p>表示段落,<img>表示图像等。标签可以包含属性,用于提供额外的信息或控制元素的行为。


2)元素(Element)


一个完整的HTML元素由开始标签、内容和结束标签组成。例如,<p>这是一个段落</p>就是一个完整的段落元素。


3)属性(Attribute)


HTML标签可以具有属性,用于提供元素的额外信息或控制元素的行为。属性以键值对的形式出现,例如<img src="image.jpg">中的src属性指定了图像的源文件。


4)文档结构


一个HTML文档由<html>、<head>和<body>等标签组成。其中,<html>标签用于定义整个HTML文档的根元素,<head>标签用于定义文档的头部信息,如标题和样式表链接,<body>标签用于定义文档的主体内容。


5)块级元素和内联元素


HTML元素可以被分类为块级元素和内联元素。块级元素以块的形式显示,独占一行或一块空间,如<p>、<div>等。内联元素以行内的方式显示,不会独占一行,如<span>、<a>等。


6)嵌套


HTML元素可以嵌套在其他元素内部,形成一个层次结构。例如,<div>元素可以包含<p>元素,<p>元素可以包含<span>元素。


7)<!DOCTYPE> 声明


HTML文档的开头通常会包含一个DOCTYPE声明,用于指定文档的HTML版本。


例如:


<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>


2、HTML与Web 浏览器


HTML(HyperText Markup Language)是一种用于创建网页结构和内容的标记语言,而Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)是用于显示和解释HTML文档的应用程序。Web浏览器通过解析HTML文档,将其转换为可视化的网页。浏览器会读取HTML文档中的标签和内容,并根据这些标签和内容的定义,渲染出网页的结构和样式。HTML提供了各种标签和属性,用于定义文本、图像、链接、表格、表单等在网页中的展示和交互方式。浏览器在解析HTML时,会根据标签和属性的定义,将文本显示为段落、标题或其他格式,显示图像、链接,并响应用户的交互操作。


通过HTML和Web浏览器的结合,用户可以在浏览器中访问和浏览各种网页内容,包括网页文本、图像、视频、音频等多媒体元素,并与网页进行交互,如点击链接、填写表单、提交数据等。


大部分浏览器中,直接输出中文会出现中文乱码的情况,需要在头部将字符声明为 UTF-8 或 GBK。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
页面标题</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>


3、HTML版本及历史背景


HTML有多个版本,每个版本都有不同的特性和改进。


版本

发布时间

HTML

1991

HTML+

1993

HTML 2.0

1995

HTML 3.2

1997

HTML 4.01

1999

XHTML 1.0

2000

HTML5

2014


1)HTML 1.0


HTML 1.0是最早的HTML版本,于1993年发布。它只包含一些基本的标签和属性,用于创建简单的文本和链接。HTML 1.0的目标是定义一种通用的超文本标记语言。


2)HTML 2.0


HTML 2.0于1995年发布,是对HTML 1.0的改进和扩展。它引入了一些新的标签和属性,如图像标签和表格标签,以支持更丰富的内容展示。


3)HTML 3.2


HTML 3.2于1997年发布,是对HTML 2.0的进一步改进。它引入了一些新的标签和属性,如表单标签和框架标签,以支持交互性和页面布局。


4)HTML 4.01


HTML 4.01于1999年发布,是对HTML 3.2的修订和扩展。它引入了更多的标签和属性,如层标签和样式表,以支持更灵活的页面设计和样式控制。


5)XHTML 1.0


XHTML(eXtensible HyperText Markup Language)是基于XML的HTML版本。XHTML 1.0于2000年发布,它严格遵循XML的语法规则,要求所有标签和属性都要正确嵌套和闭合。


6)HTML5


HTML5是HTML的最新版本,于2014年正式发布。HTML5引入了许多新的特性和API,如语义化标签、多媒体支持、Canvas绘图、本地存储等。HTML5还支持响应式设计,以适应不同设备和屏幕尺寸。


4、HTML用途


HTML是构建网页结构和内容的基础语言,它提供了丰富的标签和属性,使得开发者可以创建各种类型的网页,并实现不同的功能和效果。HTML用于定义网页的整体结构,包括标题、段落、列表、标题、导航菜单等元素。通过使用不同的HTML标签和属性,可以将文本、图像、音频、视频等内容组织起来,并构建页面的层次结构。HTML可以用于展示文本内容和多媒体元素,如图像、音频和视频。通过使用适当的HTML标签和属性,可以插入和显示各种类型的媒体内容,从而使网页更加丰富和吸引人。HTML提供了创建表单的标签和元素,可以用于收集用户的输入数据。通过使用表单元素如文本框、复选框、单选按钮和下拉列表等,用户可以输入数据并提交给服务器进行处理。


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