H5+CSS3+JS逆向前置——HTML1、H5文本元素
【摘要】 H5+CSS3+JS逆向前置——HTML1、H5基础HTML概述HTML，全称超文本标记语言（Hypertext Markup Language），是一种用于创建网页的标准标记语言。HTML为网页提供了一种结构性的标记方式，使得浏览器可以正确地解析和显示网页内容。HTML的主要元素包括：元素：包括段落、标题、链接、图像、列表等等。HTML为这些元素提供了特定的标签，如<p>、<a>、<...
H5+CSS3+JS逆向前置——HTML1、H5基础
HTML概述
HTML，全称超文本标记语言（Hypertext Markup Language），是一种用于创建网页的标准标记语言。HTML为网页提供了一种结构性的标记方式，使得浏览器可以正确地解析和显示网页内容。
HTML的主要元素包括：
元素：包括段落、标题、链接、图像、列表等等。HTML为这些元素提供了特定的标签，如<p>、<a>、<img>、<ul>、<li>等。
属性：这些是HTML元素中可以包含的额外信息，如链接的href属性，图像的src和alt属性等。
样式CSS：HTML5引入了内联样式（通过HTML元素直接包含的样式）和外部样式表（通过CSS文件定义的样式）两种方式来控制网页的外观和格式。
脚本JavaScript：HTML5支持通过JavaScript嵌入到网页中，使得网页可以具有交互性。
HTML文档的基本结构通常包括一个<!DOCTYPE html>声明，一个<html>元素，以及若干个<head>和<body>元素。其中，<body>元素包含了网页的所有内容，如文本、图片、视频、音频、链接等等。
HTML是一种基础且重要的技术，它为创建网页提供了基础结构和框架，使得我们可以添加样式、脚本和内容。然而，仅仅使用HTML可能无法创建出具有复杂交互性和动态内容的网站，因此通常还需要配合CSS（用于样式设计）和JavaScript（用于添加交互性）的使用。
开发工具：Visual Studio Code
运行插件：Preview on Web Server
正文——文本元素
HTML的文本元素主要可以分为以下几类：
段落元素：使用 <p> 标签表示段落。一个 <p> 标签通常会包含一些文本内容。
标题元素：使用 <h1> 到 <h6> 标签表示标题。这些标签通常用于页面上最重要的标题，从 <h1> 到 <h6> 分别表示从大到小的标题。
换行元素：使用 <br> 标签表示换行。这个标签通常用于在文本中插入一个换行符。
链接元素：使用 <a> 标签表示链接。这个标签通常用于创建超链接，使得用户可以点击并跳转到其他页面或同一页面的其他部分。
列表元素：使用 <ul>（无序列表）或 <ol>（有序列表）标签创建列表，然后在列表项中使用 <li> 标签。
引用元素：使用 <blockquote> 标签表示引用，可以包含引用的文本和引用的作者信息。
强调元素：使用 <em> 或 <i> 标签表示强调文本。这两个标签通常用于强调文本内容，但它们的效果在大多数现代浏览器中已经不再明显。
文本块元素：使用 <div> 或 <section> 标签表示文本块，这些标签通常用于组织页面上的内容。
表格元素：使用 <table>、<tr>（表格行）、<td>（表格数据）等标签来创建表格。
接下来展开一下：
段落元素 <p> 标签——强调元素
基础示例，可以在示例中看到p标签就是段落，每个p标签都是一段。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo示例</title>
</head>
<body>
<p>这是一个段落示例，用于展示 <strong>段落元素</strong> 的用法。</p>
<p>在这个段落中，我们使用了一些常见的 HTML 标签，如 <em>强调</em> 和 <a>链接</a>。同时，我们还可以使用样式来增强段落的可读性和视觉效果。</p>
<p>你可以将这个示例复制到你的网页中，并根据需要调整段落内容。记住，好的内容加上合适的 HTML 标签，将有助于创建引人入胜的网页。</p>
</body>
</html>
P标签的属性包括：
class：用于为元素指定一个或多个可选的类名，类名之间用空格分隔。
id：为元素指定一个全局唯一的ID，方便通过CSS或JavaScript进行定位。
style：用于直接指定元素的样式。
title：为元素提供额外的信息或提示，当鼠标悬停在元素上时显示。
content：用于定义段落文本内容。
此外，P标签还有一些其他常用的属性，如dir（用于设置文本的方向，可以是“ltr”即从左到右，也可以是“rtl”即从右到左）、lang（用于设置文本的语言）等。这些属性可以根据具体的使用场景进行选择和设置。
标题元素<h1>到<h6>标签
可以看到1~6是从大到小排列的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题元素示例</title>
</head>
<body>
<h1>这是最大的标题</h1>
<h2>这是次大的标题</h2>
<h3>这是第三大的标题</h3>
<h4>这是第四大的标题</h4>
<h5>这是第五大的标题</h5>
<h6>这是最小的标题</h6>
</body>
</html>
H5的标题标签通常是<h1>到<h6>，这些标签具有以下属性：
语义化内容：标题标签是语义化标签，它们为搜索引擎和辅助阅读工具提供了关于页面内容的重要信息。
权重：标题标签的权重会影响搜索引擎的排名。一般来说，<h1>标签的权重最高，<h6>最低。
字体大小：标题标签通常用于定义文本的大小。例如，<h1>标签通常用于定义最大的文本大小，而<h6>则用于最小的文本大小。
文本颜色：标题标签通常用于定义文本的颜色。一般来说，<h1>标签的颜色是最亮的，而<h6>标签的颜色可能比其他文本颜色稍暗一些。
可读性：标题标签可以提高页面的可读性，特别是对于辅助阅读工具和那些阅读有困难的人来说。
请注意，尽管<h1>通常被认为是最重要的标题，但实际上使用哪个标题取决于你的内容和你希望传达的信息。在一个页面上使用多个<h1>可能会分散读者的注意力，所以请谨慎使用。另外，一些现代的HTML5版本中，还引入了新的标题标签如<header>、<footer>、<article>等，这些标签通常用于定义页面的不同部分，如页眉、页脚、文章等，它们在语义化和可访问性方面提供了更多的灵活性。
换行元素<br/>标签
这里混合使用以下以上的p标签以及段落标签，并加上一些属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>标题-段落-换行</title>
</head>
<body>
<h1 align="center">清平调·其一</h1>
<h4 align="center">作者：李白</h4>
<hr />
<p align="center">云想衣裳花想容，</p>
<p align="center">春风拂槛露华浓。</p>
<p align="center">若非群玉山头见，</p>
<p align="center">会向瑶台月下逢。</p>
<p>
这是李白《清平调·其一》的首句。意思是：见到云就联想到她华艳的衣裳，见到花就联想到她花容月貌。该句艺术地再现了杨贵妃与盛开的牡丹和云彩一样美丽。<br />
这首诗，首先是咏牡丹。内容是写杨贵妃自比牡丹，倾诉自己的美貌和才华，以及对荣华富贵的喜爱之情。首句以“云想”为喻，直接赞美了杨贵妃容颜的美丽和服饰的华贵；第二句写花似贵妃，倾诉了杨贵妃的“天生丽质”和“六宫粉黛”之无色；三、四两句则是以设问方式，进一步赞美杨贵妃的丰满仪容与牡丹争艳。<br />
总的来说，这首诗将杨贵妃的美貌和牡丹的娇艳融为一体，通过比喻、设问等修辞手法，生动地描绘了杨贵妃的美丽形象，同时也表达了作者对美的追求和向往。<br />
</p>
</body>
</html>
链接元素<a>标签
链接元素 <a> 标签是 HTML 中的一种元素，用于创建超链接，使网页上的内容可以通过点击鼠标跳转到其他页面或网页部分。
以下是 <a> 标签的基本代码示例：
<a href="https://www.example.com">点击这里访问 Example.com</a>上述代码中，<a> 标签包裹了一个文本内容 “点击这里访问 Example.com”，当用户点击这段文本时，浏览器会跳转到 https://www.example.com 这个网址。
除了基本的文本链接外，<a> 标签还可以用于创建图像链接、下载链接、电子邮件链接等。以下是一些示例：
图像链接：
<a href="https://www.example.com"> <img src="example.jpg" alt="Example Image"> </a>列表元素：<ul><li>标签
HTML列表元素主要包含以下几种类型：
<ul>（无序列表）：使用此标签创建的项目是无序的，项目使用 <li> 标签标记。例如：
<ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul><ol>（有序列表）：使用此标签创建的项目是有序的，项目使用 <li> 标签标记，并且每个项目前面都有一个数字。例如：
<ol> <li>1号物品</li> <li>2号物品</li> <li>3号物品</li> </ol><dl>（描述列表）：这个标签常用于包含描述列表中的 <dt>（定义项目）和 <dd>（描述项目）元素。例如：
<dl> <dt>HTML</dt> <dd>超文本标记语言</dd> <dt>CSS</dt> <dd>级联样式表</dd> </dl><menu>（菜单列表）：这个标签常用于创建菜单。它包含 <li> 元素，这些元素表示菜单项。例如：
<menu> <li><a href="#">链接一</a></li> <li><a href="#">链接二</a></li> <li><a href="#">链接三</a></li> </menu>
以上就是一些基本的HTML列表元素示例。在实际使用中，可以根据具体需求选择合适的列表类型。同时，还可以通过CSS对列表进行样式化，使其更加美观。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>列表元素</title>
</head>
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
<ol>
<li>1号物品</li>
<li>2号物品</li>
<li>3号物品</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>级联样式表</dd>
</dl>
<menu>
<li><a href="#">链接一</a></li>
<li><a href="#">链接二</a></li>
<li><a href="#">链接三</a></li>
</menu>
</body>
</html>
引用元素<blockquote>标签
<blockquote>标签在HTML中用于引用或概述其他来源的内容。它通常与<cite>标签一起使用，以提供引用来源的标识。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>引用元素</title>
</head>
<body>
<blockquote>
<p>这段话是从某篇文章中引用的。</p>
<footer>来源：某文章</footer>
</blockquote>
</body>
</html>
table标签我们在下篇文章来讲解，div会单独的通过布局来讲解。
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）