【x手】零基础轻松入门html

最新推荐文章于 2024-10-10 22:49:27 发布

Felece

最新推荐文章于 2024-10-10 22:49:27 发布

阅读量60

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/m0_51651340/article/details/124130092

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基础知识，包括HTML的定义、文件后缀、标签关系，以及常用标签如标题、段落、文本格式化、div和span。此外，还讲解了图像标签的使用及路径设定，超链接的语法格式和不同类型，如外部链接、内部链接、空链接、下载链接和锚点链接。这些内容构成了HTML页面的基本结构和交互功能。

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

网页是因特网上根据一定的规则，使用HTML等制作的用于展示特定的内容相关的网页集合。

HTML是指超文本标记语言，用来描述网页的一种语言。

<! DOCTYPE html>当前文档使用html5的标准进行解析。

HTML的后缀名必须是.html或者.htm

一：标签关系

标签分为双标签和单标签。

其中双标签关系可以分为并列关系和包含关系。

包含关系
    <head>
       <title></title>
    </head>

/*并列关系*/
<head></head>
<body></body>

二：HTML常用标签

1.<h1>-<h6>标题标签逐一递减，文字加粗一行显。

2.段落标签< p> < /p>

3.强行换行标签< br />

4.body内容标签，head头部，title页面标题内容。

2.2文本格式化标签

语义	标签	说明
加粗	<strong></strong>或<b></b>	更推荐前者，语义更强烈（新手）
倾斜	<em></em> 或<i></i>
删除线	<del></del>或<s></s>
下划线	<ins></ins>

<!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>文本格式化标签</title>
</head>
<body>
    我是<strong>加粗</strong>的文字
    我是<b>加粗</b>的文字
    我是<em>倾斜</em>的文字
    我是<i>倾斜</i>的文字
    我是<del>删除线</del>
    我是<s>删除线</s>
    我是<ins>下划线</ins>
    我是<u>下划线</u>
</body>
</html>

2.3< div>和< span>标签

div和span是没有语义的，它们是一个盒子，用来装内容的。

特点：<div>标签是一个大盒子，用来布局，一行只能放一个<div>.

<span>标签是一个小盒子，也是用来布局，一行上可以多个<span>。

<!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>div和span标签</title>
</head>
<body>
    <div>我是一个div标签我一个人单独占一行</div>
    <span>百度</span>
    <span>QQ</span>
</body>
</html>

2.4图像标签和路径

< img>标签用于定义HTML页面中的图像

语法：
    <img src="图像url" />

src是< img>标签的必须属性，它用于指定图像文件的路径和文件名。

图像标签还有其他属性，比如alt、title、width、height、border。

路径

1.相对路径：以引用文件所在位置为参考基础，建立的目录路径（图片相对于HTML页面的位置）

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级 <img src="img.jpg"/>
上一级路径	…/	图像文件位于HTML文件上一级<img src="../img.jpg">
下一级路径	/	图像文件位于HTML文件下一级 <img src="images/img.jpg">

2.绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

例：D：\web\img\logo.gif. 或http://www.itcost.cn/images/logo.gif".

三：超链接标签

3.1链接的语法格式

语法：
 <a href="跳转目标"  target="目标窗口的弹出方式"> 文本或图像 </a>

链接里有两个属性，一个是href用来指定地址。

一个是target，用来指定页面的打开方式（默认的值是_self 当前窗口打开页面 _blank 新窗口打开页面）

链接分类

1.外部连接：例如<a href="http://www.baidu.com">百度</a>

2.内部链接：网站内部页面之间的相互链接例如：<a href="img.html">页面首页</a>
3.空链接：当时没有确定链接目标时 <a href="#">页面首页</a>
4.下载链接：href里面地址是一个文件或者压缩包,会下载这个文件<a href="img.zip">下载文件</a>

5.网页元素链接：网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接

<a href="http://www.baidu.com"> <img src="img.jpg"/> </a>

6.锚点链接：点我们点击链接，可以快速定位页面中的某个位置。

在链接文本的href属性中，设置属性值为#名字的形式。例如：<a href="#two">第二季</a>
找到目标标签位置，里面添加一个id属性值=刚才的名字。例如：<h3 id="two">第二季简介</a>

<!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>超链接标签</title>
</head>
<body>
    <h4>1.外部链接</h4>
    <a href="http://www.qq.com" target="_blank"> 腾讯</a>
    target 打开窗口的方式  默认的值是 _self 当前窗口打开页面  _blank 新窗口打开页面
    <a href="http://www.itcast.cn" target="_blank">传智播客</a>
    <h4>2.内部链接: 网站内部页面之间的相互链接</h4>
    <a href="gongsijianjie.html" target="_blank">公司简介</a>
    <h4>3.空链接:#</h4>
    <a href="#">公司地址</a>
    <h4>4.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
    <a href="img.zip">下载文件</a>
    <h4>5.网页元素的链接</h4>
    <a href="http://www.baidu.com"><img src="img.jpg"/></a>
</body>
</html>

总结

以上就是常用的html标签。除此之外，还有比较常见的表格标签、列表标签和表单标签等等。