HTML编辑网页元素（上）

@动感超人

于 2024-09-28 22:04:50 发布

阅读量746

点赞数 9

文章标签： html 前端 css

本文链接：https://blog.csdn.net/2301_82005922/article/details/142616545

版权

如何通过网页基本元素来制作一个简单的网页呢？

首先，我们先来学习网页的一些基本元素。

1.1标题文字标签：<h# align="left/center/right">标题文字</h#>

"#"用来指定文字的大小，取1-6之间的整数值。#取1时文字最大，#取值越大文字逐渐变小。

属性align用来设置标题在页面的水平对齐方式，left(左对齐）center(居中）right（右对齐），如不填写align属性则默认为left。

此标签默认字体为宋体。

代码演示如下：

<!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 align="center">五级标签</h5>

    <h6 align="right">六级标签</h6>

</body>

</html>

效果显示：

1.2文本格式标签

在网页中有时字体需要一些特殊的效果，例如：设置粗体，斜体，下划线等效果时，就需要用到文本格式标签。

标签	显示效果
<b></b>和<strong></strong>	文字以粗体方式显示（b定义文本粗体，strong强调文本）
<i></i>和<em></em>	文字以斜体方式显示（i定义斜体字，em强调文本）
<s></s>和<del></del>	文字以加删除线方式显示（HTML5不赞成使用s)
<u></u>和<ins></ins>	文字以加下划线方式显示（HTML5不赞成使用)

使用文本格式标签设置文字样式，代码如下：

<!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><p align="center" ><b>HTML中编排文本的常用标签</b></p></h1><br>
    <p align="center">我是默认文本</p><br>
    <p align="center"><b>我是b标签加粗文本</b></p><br>
    <p align="center"><strong>我是strong标签强调文本</strong></p><br>
    <p align="center"><i>我是i标签的倾斜文本</i></p><br>
    <p align="center"><em>我是em标签强调文本</em></p><br>
    <p align="center"><del>我是del标签的带删除线文本</del></p><br>
    <p align="center"><ins>我是ins标签的带下划线文本</ins></p><br>
</body>
</html>

效果显示：

注：以上文本格式可用<span>标签配合CSS样式替代。

1.3水平线标签<hr/>

<hr/>为单标签，水平线标签格式为：

<hr/>标签的常用属性
属性	描述
align	设置水平线的对齐方式，默认为居中
size	设置水平线的粗细，以像素为单位，默认2像素
color	设置水平线颜色，默认为100%
width	设置水平线宽度
noshade	设置线段是否显示阴影

1.4图像标签

图像标签格式为：

1.5超链接标签

超链接是指从一个网页（或其他文件）指向一个目标的连接关系，这个目标可以是另一个网页也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件，一个文件，甚至是一个应用程序。

（1）创建超链接

<a>标签的使用有以下两种方式：

通过href属性创建指向另一个文档的超链接。
通过name属性创建文档内的书签。

超链接标签格式·：<a href="URL" title="指向链接时显示的文字">超链接文本</a>。（herf属性定义了链接所指的目标地址，即路径。如果要创建一个不链接到其他位置的空链接则可用"#"代替URL）

<a href="uland.taobao.com">点开跳转淘宝</a>

（2）在同一个网站的不同页面中使用超链接

“../”表示退回到上一级目录中。

表示先退回到上一级目录，然后再进入目标文件所在的目录

（3）书签链接

书签链接也就是锚点链接。

我们首先创建锚点，格式为：

其次指向链接锚点

<a herf="锚点名称">文本</a> 即点击文本，就可跳转到锚点连接的网页元素

注：同一个页面可以有多个锚点，但名称不能相同

以下是锚点链接的代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=align, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 指向链接锚点 -->
     <a href="#我是小王子">点击我可以看小王子哦！！</a><br>
     <a href="#我是小猫咪">点击我可以看小猫咪哦！！</a><br>
     <a href="#我是小花花">点击我可以看小花花哦！！</a><br>
    
    
     <!-- 建立锚点 -->
    <p><a name="我是小王子">我是小王子</a></p><br>
    <img src="../CSS/小王子1.jpg" width="100" height="100">
    <!-- 链接到上一级目录中的网页文件 -->
    

    <p><a name="我是小猫咪">我是小猫咪</a></p><br>
    <img src="../HTML-5/R-C (1).jpg" width="100" height="100">
    <!-- 链接到同级目录中的网页文件 -->
    

    <p><a name="我是小花花">我是小花花</a></p><br>
    <img src="web/玫瑰花.jpg" width="100" height="100">
    <!-- 链接到下一级目录中的网页文件 -->
</body>
</html>

效果显示：