“内容不完善,后期还会添加。有不正确的地方,还望指出。”🤭
标准结构
<!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>
看看大>,,小<,空格 号。
</body>
</html>