Web——HTML基本标签（一）

甘棠鱼

已于 2022-05-07 12:26:09 修改

阅读量582

点赞数

文章标签： html5

于 2022-05-07 12:24:33 首次发布

本文链接：https://blog.csdn.net/weixin_64428129/article/details/124624968

版权

文章目录

前言

一、标签及其作用是什么

二、常见的标签

前言

首次学习web，其主要包括结构（HTML）、表现（CSS）和行为（JAVASCRIPT），HTML是web的结构，用于网页元素进行整理和分类。

标签对HTML是十分重要的，接下来将对标签及其作用进行简单概括。

一、标签及其作用是什么？

HTML标签的作用就是构建页面的结构，通过读取html标签，浏览器可以大概了解代码的每一部分具体代表了什么，以及这部分应该发挥怎样的作用。

二、常见的标签

1.基本结构标签

下面代码块为html的基本结构块：

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio">
<TITLE></TITLE>
</HEAD>
<BODY>



</BODY>
</HTML>

<html></html>是网页中最大的标签，称为根标签；

<head></head>是文档的头部，里面必须设置title标签；

<title></title>是文档的标题，让页面有一个自己的标题；

<body></body>是文档的主体，包含了所有内容，页面内容基本都是放到body里的；

2.常用标签

1) 标题标签： <h1>~<h6>；

2) 段落标签：<p></p>;

3)换行标签：<br/>;

下面为代码块和在浏览器中打开的效果图：

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio">
<TITLE>HTML标签的应用</TITLE>
</HEAD>
<BODY>
    <h1>我是一级标题 </h1>
    <p>我是段落标签1</p>

    <h2>我是二级标题</h2>
    <p>我是段落<br>标签2</p>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>
</BODY>
</HTML>

3.文本格式化标签

1）加粗：<strong></strong> | <b></b>;

2）倾斜：<em></em> | <i></i>;

3）删除线：<del></del> | <s></s>;

4）下划线：<ins></ins> | <u></u>;

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio">
<TITLE>HTML标签的应用</TITLE>
</HEAD>
<BODY>
    <h1>我是一级标题 </h1>
    <p><strong>我是</strong>段落<del>标签1</del></p>
    <h2>我是二级标题</h2>
    <p><em>我是</em>段落<br><ins>标签2</ins></p>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>
</BODY>
</HTML>

4.盒子标签

1）<div>是division的缩写，表示分割、分区，用来布局，但一行只能放一个。

2）<span>是跨度，跨距，用来布局，一行上可以有多个；

5.图像标签

图像的其他标签：

1）src：图片路径，必须属性；

2）alt：文本，替换文本，图片不能正常显示时显示的文本；

3）title：文本，提示文本，鼠标放在图片上时显示的文本；

4）width：像素，设置图片的宽度；

5）width：像素，设置图片的高度；

6）border：像素，设置图片的边框粗细；

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio">
<TITLE>HTML标签的应用</TITLE>
</HEAD>
<BODY>

    <h1>我是一级标题 </h1>
    <p><strong>我是</strong>段落<del>标签1</del></p>
    <img src="C:\Users\moyan\Pictures\Saved Pictures\780.jfif" alt="图片" title="加油" width="20" border="0"/>
    <h2>我是二级标题</h2>
    <p><em>我是</em>段落<br><ins>标签2</ins></p>

</BODY>
</HTML>

6.超链接标签

href：用于指定目标的url地址，必需属性；

target：用于指定链接网页的打开方式，其中_self为默认值，_blank为在新窗口中打开；

链接应用分类：

1）外部链接：<a href="网页地址" >淘宝</a>;

2）内部链接：网页内部之间互相链接，直接链接内部页面名称即可，<a href="1.html"> 内部</a>;

3）空链接：当没有确定跳转目标时可设置，<a href="#">空链接</a>;

4）下载链接：但跳转的地址是文件或者压缩包时，会下载这个文件；

5）网页元素链接：网页中各种元素，如图片、视频等；

6）锚点链接：点击链接可跳转至文章指定内容处；

a.链接文本：<a href="#2">文本</a>;

b.链接目标位置标签：<p id="1">标签</p>;

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio">
<TITLE>HTML标签的应用</TITLE>
</HEAD>
<BODY>
    <a href="www.qq.com" target="_blank">外部链接</a><br />
    <a href="HTMLPage.html">内部链接</a><br />
    <a href="#"></a>空链接<br />
    <a href="1.zip">下载链接</a>
    <a href="1.jpg">元素链接</a>
</BODY>
</HTML>