html

7 篇文章 0 订阅
1 篇文章 0 订阅

“内容不完善,后期还会添加。有不正确的地方,还望指出。”🤭
标准结构

<!DOCTYPE html>        <!--文档类型的声明标签,不是html的一部分。主要用于声明所用html的版本。-->
<html lang="en">        <!--用于翻译,当用"en"时文档里的文字可以翻译为英文,当用zh-CN时文档里的文字可以被翻译为中文 -->
	<head>      <!--头部-->
		<meta charset="UTF-8">      <!--所用字符-->
		<title>标题</title>      <!--标题-->
	</head>
	<body>      <!--身体-->
		能遇见你真好,你就像天使一样出现在我身边。拯救了一个黑暗的世界。
	</body>
</html>

效果图:在这里插入图片描述没有用charset = "UTF-8"的效果图:
在这里插入图片描述
标签

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>标签</title>
</head>
<body>
<!--从<h1>~<h6>标签-->
<h1>能遇见你真好,你就像天使一样出现在我身边。拯救了一个黑暗的世界。</h1>
<h2>能遇见你真好,你就像天使一样出现在我身边。拯救了一个黑暗的世界。</h2>
<h3>能遇见你真好,你就像天使一样出现在我身边。拯救了一个黑暗的世界。</h3>
<h4>能遇见你真好,你就像天使一样出现在我身边。拯救了一个黑暗的世界。</h4>
<h5>能遇见你真好,你就像天使一样出现在我身边。拯救了一个黑暗的世界。</h5>
<h6>能遇见你真好,你就像天使一样出现在我身边。拯救了一个黑暗的世界。</h6>
</body>
</html>

效果图:
在这里插入图片描述
文本格式化标签:还有

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文本格式化标签</title>
</head>
<body>      <!--<br />换行处理-->
<strong>我是强壮的</strong><br />      <!--<b></b>-->
<em>我是倾斜的</em><br />      <!--<i></i>-->
<del>我是被删除了</del><br />      <!--<s></s>-->
<ins>哈哈,我自带滑板</ins><br />      <!--<u></u>-->
</body>
</html>

效果图:在这里插入图片描述
盒子

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>盒子</title>
</head>
<body>
<div>
    哼,我就是霸道。我就想占整个盒子,咋滴。
</div>
<div>
    哈哈哈哈......。
</div>
<span>
    我比较喜欢与人分享,来咱们一起在一个盒子里。
</span>
<span>
    分享让我更加快乐。我喜欢分享。
</span>
</body>
</html>

在这里插入图片描述

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>盒子</title>
</head>
<body>
<img src="lizhi.jpeg" alt="坚持(此时我就不显示真容了嘻嘻)" title="你放在上面别动,我就告诉你答案。" width="300" height="400" border="20px" />
<!--src: 加载图片的地址,有相对路径和绝对路径 alt图片不能正常显示时,所显示的信息。 --->
<!--title鼠标放在上面不动时,所显示的信息。 width图片的宽度 height图片的长度 border图片的边框宽度-->
</body>
</html>

效果图:
在这里插入图片描述在这里插入图片描述
主:目录文件夹和根目录。目录文件夹就是我们平时存放东西的文件夹。根目录是我们打开目录文件夹所显示的东西。

外部链接:

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>链接</title>
</head>
<body>
<a href="https://www.baidu.com/" target="_blank">外部链接</a><br />
<a href="#" target="_blank">空链接</a><br />
<a href="zuolianjieyuansu.html" target="_blank">内部链接</a><br />
<a href="http://5b0988e595225.cdn.sohucs.com/images/20170917/0ba41914a5ee47abab52f531d76a68a3.jpeg" target="_blank">网页元素链接</a><br />
<!--还有一个下载链接形式和这些都差不多-->
</body>
</html>

在这里插入图片描述
锚点链接:

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

<!--相当于跳到某个id值所对应的内容的位置,由于篇幅过长就不截图了。-->

<h3 id="one"></h3>
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>链接</title>
</head>
<body>
看看大&gt,,小&lt,空格&nbsp号。
</body>
</html>

在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值