HTML：HTML中的基础标签

卓汶

已于 2022-03-30 09:26:11 修改

阅读量1.6k

点赞数 5

分类专栏： java 文章标签： html5 前端

于 2022-03-29 14:49:41 首次发布

本文链接：https://blog.csdn.net/weixin_45804632/article/details/123788492

版权

本文介绍了HTML的基础标签，包括html、head、title、meta、body等基本元素，以及图片(img)、标题、列表、文本修饰、超链接、div、表格、表单等常见标签的使用方法。还涉及到了frameset、iframe、媒体元素和页面结构分析等内容，是学习HTML的入门指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML：超文本标记语言
CSS：页面上的内容显示的风格（决定页面上内容的美观程度）
javaScript：页面特效

html基础标签

html、head、title、meta、body、p、br、hr标签

<!DOCTYPE html>	<!--告诉浏览器，我们使用的是什么规范，这里使用的是html5-->
<html>
<!--head标签代表网页的头部-->
    <head>
        <title>网页的标题</title><!-- title 表示网页的标题 -->
        <meta charset="UTF-8"><!---mate描述性标签，它用来描述网站上的一些信息-->
        <meta name="keywrds" content="百度">
        <meta name="description" content="百度">
    </head>
<!--body标签代表网页的主体-->
    <body>
        hello world<br/><br/><!--标签标识换行。br标签是单标签，单标签：开始标签和结束标签是同一个，因此/放在单词后面-->
        你好！
        <hr/><!--直线分隔符-->
        <p>这里是第一个段落</p><!--p标签表示段落标签，自动换行，且具有一定的段间距-->
        <p>这里是第二个段落</p>
        <p>这里是第三个段落</p>
    </body>
</html>

<!-- 
html页面中一对标签组成：<html></html>    
<html>:开始标签
<\html>:结束标签
<html>标签中有两个标签<head>和<body>,

其中<网页显示的内容需要写在<body>中，<head>内容在网页中不展示

直接在body标签写内容时，换行，空格等符号都有特殊的表示方式如<br/>，&nbsp等
 -->

图片标签img

<img src ="imgs/1.jpg" width="" height="" alt="这里是一张图片"/>
<!--
img是一个图片标签，是单标签

其中src、with、height、alt是img的属性，
src是指图片的路径，
with、height控制图片的大小，
alt是图片的提示，当图片丢失或其他原因显示不出来时，可以显示alt的内容

其中最主要的是src属性
src属性表示图片文件的路径，
相对路径：图片和当前网页文件的相对位置（如imgs/1.jpg，此时当前网页文件与imgs文件夹的在同一目录下，1.jpg在imgs内）
绝对路径：绝对路径是指从根目录到图片所在位置（即从盘符开始的，如：C:\Users\Administrator\Desktop\daima\imgs）
-->

在这里插入图片描述

标题标签

<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
<!-- 
html是解释性语言，不是编译性语言，所以不会报错，是容错的
h1~h6是标题标签，只有h1~h6，没有h7
 -->

在这里插入图片描述

列表ul和ol标签

<!-- ol有序列表 -->
成绩排行榜
<ol type="i" start="3">
	<li>张三</li><!-- 列表项listitem -->
	<li>李四</li>
	<li>王五</li>
	<li>赵六</li>
</ol>
<!-- 
ol的属性
	type:可以控制排序时显示的类型：A a I i(罗马数字) 1(默认)
	start:控制从多少开始排序
-->
		
<!-- ul无序列表 -->
公司人员名单
<ul type="circle">
	<li>小红</li>
	<li>小明</li>
	<li>小张</li>
	<li>小王</li>
</ul>
<!--
ul的属性
	type:可以控制排序显示类型：disc(默认) square	circle
-->

在这里插入图片描述

文本修饰标签和特殊符号

<!--文本修饰标签-->
<b>王侯</b><i>将相</i><u>宁有种乎？</u>
<!-- 
	b标签：加粗
	i标签：斜体
	u标签：下划线
标签可以嵌套,没有顺序
-->
<i><b>王侯</b>将相</i><u>宁有种乎？</u>

显示效果如下：

王侯将相宁有种乎？
王侯将相宁有种乎？

<!--上下标-->
水分子的化学式：H<sub>2</sub>O
X的平方：X<sup>2</sup>
<!--
sub:下标
sup:上标
-->

显示效果如下

水分子的化学式：H₂O
X的平方：X²

<!--html中的实体-->
5&lt;10<!-- 表示 5<10 lest than -->
5&gt;10<!-- 表示 5>10 great than-->
5&le;10<!-- 表示 5<=10 lest equal-->
5&ge;10<!-- 表示 5>=10 great equal-->

注册商标：&reg;
版权符号：&copy;

显示效果如下：

5<10
5>10
5≤10
5≥10
注册商标：®
版权符号：©

<span>
	span标签的作用：将文字围起来，将来对其进行特殊处理	 
</span>

超链接

<!--
a标签的作用是超链接
将需要转到的网址填写到a标签属性href中
-->
<a href="https:\www.baidu.com" target="_blank">百度一下</a>

<!-- 
href:必填，表示要跳转到的页面。
target有四个属性值
	_self:在本窗口打开
	_blank:在新窗口打开
	_parent:在父窗口打开
	_top:在顶层窗口打开 
-->
<!--可以嵌套一个图片标签-->
<a href="https:\www.baidu.com">
	<img src = "imgs/图片1.jpg" width="40">
</a>

<!--锚链接-->
<!--1、跳转到本网页的某个具体位置-->
<a name="top">顶部</a>
<!-- 使用name作为标记 -->
<a href="#top">回到顶部</a><!--使用#进行跳转-->
<!-- 
	1、需要一个锚标记
	2、跳转到标记
 -->
<!--2、也可以跳转到其他页面的具体位置-->
<a href="demo01.html#top">回到顶部</a>

<!--功能性连接
1、邮件链接：mailto
2、QQ链接（可以上QQ官网自行测试）
-->
<a href="mailto:123456@qq.com">点击联系我</a>

div表示层

<div style="color:#0000FF">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>
<!--
<div>

最低0.47元/天解锁文章