HTML（1）

最新推荐文章于 2024-06-19 12:50:25 发布

九日王奇

最新推荐文章于 2024-06-19 12:50:25 发布

阅读量68

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/jiuriwangqi/article/details/115450033

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基本结构标签，包括头部元素、body内容区，以及常用的标题、段落、换行、文本格式化、图像、链接标签的使用。特别关注了相对和绝对路径的区别，以及不同类型的超链接，如外部、内部、空链接和锚点链接。

摘要由CSDN通过智能技术生成

HTML常用标签

1.1 基本结构标签（骨架标签）

<!DOCTYPE html>
<html lang="en" > <!--语言为英文-->
<head><!--头部-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body> <!--主体内容-->
   
</body>
</html>`

语法规范：
1.必须要用尖括号包围
2.大部分成对出现
3.极少数单标签如（图片标签）,
(换行）

1.2 HTML基本标签

常用标签

标题标签：<h1>..</ h1>
段落标签：<p>..</p>
换行标签：<br />
在这里插入图片描述

文本格式化标签

加粗：<strong>或者<b>
倾斜：<em>或者<i>
删除线：<del>或者.<s>
下划线：<ins>或者<u>
<div>与<span>
在这里插入图片描述

<div>  单独占一行  似大盒子
<span> 跨行显示  似小盒子

在这里插入图片描述

图像标签

<img src="图像URL(路径，文件名" width="高度" height="宽度" border="边框">
<img src="图像URL(路径，文件名" alt="图像找不到，替换文本">
<img src="图像URL(路径，文件名" title="鼠标放在图片上显示的文字">

在这里插入图片描述
*

相对与绝对路径

相对路径：

同一级：<img src="图片文件名">
上一级：<img src="目录文件夹/图片文件名">
下一级：<img src="../图片文件名">

绝对路径：

<img src="D\目录文件\图片文件名">
<img src="http://....">

我们可以看到相对路径与绝对路径的斜杠方向不一样，所以要注意

超链接标签

<a href="跳转目标" target="弹出方式（_self系统默认替换本页面不打开新窗口、_blank新窗口打开到另一个页面）>文本或图像</a>

1.外部链接

<a href="http://qq.com" alt=""></a>

2.内部链接
网站内页面间的相互链接

<a href="index.html" alt=""></a>

3.空链接

<a href="#" alt=""></a>

4.下载链接

<a href="xg.zip" alt=""></a>

5.锚点链接(网页内快速定位某一位置，比如：返回顶部这个操作)

<a href="#返回" alt="">返回顶部</a>
<a id="#返回" alt="">目录</a>

注释标签

<！--注释-->

特殊字符

&nbsp(空格）
&lt (小于）
&gt(大于）

base标签

<head>
<base target="_blank">
</head>

一个页面最多一次

pre标签

预格式化文本（预先写好的文本格式显示页面）

九日王奇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML（1）

HTML常用标签1.1 基本结构标签（骨架标签）<!DOCTYPE html><html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
复制链接

扫一扫