HTML基础

2023-10-27 72

一、HTML标题

HTML标题(Heading)是通过 <h1> – <h6> 标签来定义的。

h是英文header标题的缩写,标题无处不在,它的应用范围十分广泛:网站结构、写作文、PPT 等。

这里有六个标题元素标签 —— <h1>、<h2> 、<h3>、<h4>、<h5>、<h6>,每个元素代表文档中不同级别的内容:

  • <h1>表示主标题( the main heading ),</h1>
  • <h2>表示二级子标题( subheadings ),</h2>
  • <h3>表示三级子标题( sub-subheadings ),</h3>
  • <h4>、<h5>、<h6>字体的大小依次递减。

代码示例如下:

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<h4>这是一个标题</h4>
<h5>这是一个标题</h5>
<h6>这是一个标题</h6>

二、HTML段落

使用带有标签 <p> 的 HTML 元素可以轻松地将文本添加到页面中,并创建一个新的段落。所有常规文本都应放在 <p> 标签之间。

代码示例如下:

<p>这是一个段落。</p>
<p>这是一个段落。</p>

下面这个实例讲述了标题和段落的结构层次:

<h1>主标题</h1>
<p>这是一个段落</p>
<h2>二级子标题</h2>
<p>这是一个段落</p>
<h2>二级子标题</h2>
<p>这是一个段落</p>
<h3>三级子标题</h3>
<p>这是一个段落</p>

上述实例所涉及的元素具体代表什么,完全取决于作者编辑的内容,只要确保层次结构是合理的就可以。在创建此类结构时,只需要记住以下几点:

  • 应该只对每个页面使用一次<h1>,这是主标题,所有其他标题位于层次结构中的下方;
  • 请确保在层次结构中以正确的顺序使用标题。不要使用<h3>来表示副标题,后面跟<h2>来表示副副标题,这是没有意义的;
  • 在可用的六个标题级别中,应该保证每个页面中标题级别的使用不超过三个,具有许多标题级别的文档会变得杂乱无章;
  • 建议将内容分散在多个页面上。

三、HTML链接

HTML中的链接是通过<a>标签来定义的。这个标签也被称为锚点元素,它可以用于实现页面跳转功能,也可以用于内部导航。通过使用<a>标签,我们可以创建一个指向其他网页或当前页面特定部分的链接。

以下是一个简单的示例,展示了如何使用<a>标签创建链接:

<a href="https://www.example.com" rel="external nofollow" >点击访问网站</a>

在上面的代码中,href属性指定了链接的目标地址,即要跳转到的网页的URL。链接文本是”访问示例网站”,它将在用户点击时显示给用户。

如果我们想要链接到当前页面的某个部分,可以使用相对路径或绝对路径来实现。例如,假设我们有一个名为”section1″的锚点,我们可以这样创建链接:

<a href="#section1" rel="external nofollow" >跳转到section1</a>

在上面的代码中,#符号表示锚点,它告诉浏览器我们要链接到当前页面的”section1″部分。

四、HTML图像

HTML图像是通过<img>标签来定义的。<img>标签用于在网页中插入图像,可以是静态图片、动态图片等。

基本语法如下:

<img src="图像地址" alt="替代文本">

其中,src属性指定了图像的地址,可以是相对地址或绝对地址;alt属性指定了替代文本,当图像无法加载时显示给用户。

例如,插入一张名为”example.jpg”的示例图片:

<img src="example.jpg" alt="示例图片">

在上面的例子中,src属性的值是”example.jpg”,表示要插入的图片文件名;alt属性的值是”示例图片”,当图片无法加载时会显示这个文本。

五、HTML强调

在HTML中,我们可以使用<em>标签来表示斜体文本。例如:

<p>这是一个<em>强调</em>的文本。</p>

在这个例子中,浏览器会将“强调”这个词显示为斜体。

  • 广告合作

  • QQ群号:707632017

温馨提示:
1、本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。邮箱:2942802716#qq.com(#改为@)。 2、本站原创内容未经允许不得转裁,转载请注明出处“站长百科”和原文地址。
HTML基础
上一篇: HTML网页编辑器
HTML基础
下一篇: HTML属性