【JavaWeb学习】HTML的基础标签

耶喽77

已于 2022-05-14 22:51:16 修改

阅读量67

点赞数

分类专栏： JavaWeb 文章标签： html 学习 css

于 2022-05-14 22:47:57 首次发布

本文链接：https://blog.csdn.net/weixin_52614715/article/details/124774192

版权

JavaWeb 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

（1）html语言是解释型语言，不是编译型，浏览器是容错的

（2）html页面中由一对标签组成：

<html></html>
<html> 称之为 开始标签
	<head>
	
	</head>
	<body>
		网页上的主体内容都写在这
	</body>
</html>称之为 结束标签

（3）title 表示网页的标题，meta标签中可以设置编码方式

<html>
	<head>
		<meta charset="utf-8">
		<title>这是我的第一个网页</title>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

（4） 表示换行，p 表示段落标签。br标签是一个单标签。

<html>
	<head>
		<meta charset="utf-8">
		<title>这是我的第一个网页</title>
	</head>
	<body>
		hello world! <br/> 你好
	</body>
</html>

在这里插入图片描述

（6）img 标签图片标签
src属性表示图片文件的路径
width和height表示图片的大小
alt表示图片的提示

<html>
	<head>
		<meta charset="utf-8">
		<title>这是我的第一个网页</title>
	</head>
	<body>
		<img src="imgs\girl.jpg" width="57" height="73" alt="这里是一张图片"/>
	</body>
</html>

在这里插入图片描述

（7）h1~h6 : 标题标签

<html>
	<head>
		<meta charset="utf-8">
		<title>这是我的第一个网页</title>
	</head>
	<body>
		<h1>标题一</h1>
		<h2>标题二</h2>
		<h3>标题三</h3>
		<h4>标题四</h4>
		<h5>标题五</h5>
		<h6>标题六</h6>
	</body>
</html>

在这里插入图片描述

（8）列表标签:

ol 有序列表
type 显示的类型：A a I i 1(deafult)，start 表示从*开始
ul 无序列表
type disc(default) , circle , square

<html>
	<head>
		<meta charset="utf-8">
		<title>这是我的第一个网页</title>
	</head>
	<body>
		武林高手排行榜:
		<ol type="a" start="3">
			<li>扫地僧</li>
			<li>萧远山</li>
			<li>慕容博</li>
			<li>虚竹</li>
			<li>阿紫</li>
		</ol>
		武林大会人员名单：
		<ul type="circle">
			<li>乔峰</li>
			<li>阿朱</li>
			<li>马夫人</li>
			<li>白世镜</li>
		</ul>
	</body>
</html>

在这里插入图片描述

（9） 下划线 ； 粗体 ； 斜体 
 上标 ； 下标

<html>
	<head>
		<meta charset="utf-8">
		<title>这是我的第一个网页</title>
	</head>
	<body>
		你是<b><i><u>喜欢</u></i></b>是<b>甜</b>月饼还是<i>咸</i><u>月饼</u>？
		<br/>
		水分子的化学式： H<sub>2</sub>O <br/>
		氧气的化学式： O<sup>2</sup><br/>
	</body>
</html>

在这里插入图片描述

（10）HTML中的实体：小于号 < 大于等于号 ≥ 版权 ©

<!-- 小于号 &lt; 大于等于号 &ge; 版权 &copy; -->
<html>
	<head>
		<meta charset="utf-8">
		<title>这是我的第一个网页</title>
	</head>
	<body>
		5&lt;10
		10&gt;5
		5&le;10
		10&ge;5
		注册商标 &reg;
		版权符号 &copy;
	</body>
</html>

在这里插入图片描述

（11）span 不换行的块标记

<html>
	<head>
		<meta charset="utf-8">
		<title>这是我的第一个网页</title>
	</head>
	<body>
	<span>西瓜，芒果</span>，苹果，香蕉，火龙果。
	</body>
</html>

在这里插入图片描述

（12）a 表示超链接，href 链接的地址
target:
_self 在本窗口打开
_blank 在一个新窗口打开
_parent 在父窗口打开
_top 在顶层窗口打开

<html>
	<head>
		<meta charset="utf-8">
		<title>这是我的第一个网页</title>
	</head>
	<body>
	<a href="http://www.baidu.com" target="_blank">百度一下</a>
	</body>
</html>

在这里插入图片描述

（13）div 层

<html>
	<head>
		<meta charset="utf-8">
		<title>这是我的第一个网页</title>
		<style>
			div{
				width:100px;
				height:100px;
			}
			#div1{
				background-color:#ABC;
			}
			#div2{
				background-color:#BCA;
			}
			#div3{
				background-color:#CBA;
			}
		</style>
	</head>
	<body>
		<div id="div1">div1</div>
		<div id="div2">div1</div>
		<div id="div3">div1</div>
	</body>
</html>