H5+CSS3+JS逆向前置——HTML1、H5文本元素

简介: H5+CSS3+JS逆向前置——HTML1、H5文本元素

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会单独的通过布局来讲解。

相关文章
|
3天前
|
数据采集 前端开发 网络协议
如何使用代理IP通过HTML和CSS采集数据
如何使用代理IP通过HTML和CSS采集数据
|
5天前
|
JavaScript 前端开发
js怎么删除html元素
js怎么删除html元素
19 10
|
5天前
|
JavaScript 前端开发
js添加、删除、替换或插入元素。
js添加、删除、替换或插入元素。
8 0
|
7天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
15 1
|
7天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
12天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
21 0
|
13天前
|
JavaScript 前端开发 算法
JavaScript 中前置自增与后置自增:区别、应用场景
【4月更文挑战第6天】JavaScript中的前置自增`++a`先增后用,返回新值,适合复合赋值和循环计数;后置自增`a++`先用后增,返回原值,适用于保留变量原值的操作。二者差异在于运算时机和返回值,选择时要考虑递增时机和表达式中使用的值。在复杂表达式中应避免混用,注重代码清晰度和一致性。理解这些差异能提高代码效率,避免逻辑错误。
17 1
|
14天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
|
15天前
|
XML 前端开发 JavaScript
css和html
【4月更文挑战第7天】css和html
12 0
|
1月前
|
前端开发 容器 内存技术
使用CSS3画出一个叮当猫HTML源码
本文教程介绍了如何使用CSS3绘制叮当猫,通过HTML结构和CSS样式逐步构建叮当猫的各个部位,如头部、脸部、脖子、身体、手脚等。代码示例展示了如何利用渐变、边框、阴影和定位技巧实现三维效果和细节特征。此外,还添加了眼珠的动画效果,让叮当猫的眼睛能够转动。整个过程适合对CSS3感兴趣的读者参考学习,以提升动态图形创作技能。
16 0
使用CSS3画出一个叮当猫HTML源码