1,标签的写法
<strong>加粗内容</strong>
<hr>
2,快速生成骨架
!加[Tab]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标题</title>
</head>
<body>
给用户看的
</body>
</html>
3,标签的关系
<html>
<head></head>
<body>
</body>
</html>
4,注释
Ctrl + Shift + P
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 这是文字,变成了注释,客户看不见 -->
<strong>这是加粗文字</strong>
</body>
</html>
5,标题标签
<h1>...</h1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
</body>
</html>
6,段落标签
<p>...</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>主要用于文章段落,自动换行,有默认行距。</p>
<p>主要用于文章段落,自动换行,有默认行距。</p>
<p>主要用于文章段落,自动换行,有默认行距。</p>
</body>
</html>
7,换行与水平线标签
...<br>换行
...<hr>水平线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
第一行内容<br>
第二行内容<hr>
</body>
</html>
8,文本格式化标签
<strong>...</strong>加粗内容
<em>...</em>斜线
<ins>...</ins>下划线
<del>...</del>删除线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<strong>加粗内容strong</strong><br>
<em>斜线em</em><br>
<ins>下划线ins</ins><br>
<del>删除线del</del>
</body>
</html>
9,图像标签
<img src="...">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./57daeeab9de42fc2a66369c000b42709.jpg">
<img src="./lofter_1658434302302.jpg" >
</body>
</html>
10,图像标签_属性
alt="..."
title="..."
width="..."宽
height="..."高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./forget me not.pdf" alt="哎呀图片找不到了"><br>
<img src="./57daeeab9de42fc2a66369c000b42709.jpg" title="这是图片"><br>
<!-- 宽度高度为等比例缩放 -->
<img src="./57daeeab9de42fc2a66369c000b42709.jpg" width="100"><br>
<img src="./lofter_1658434302302.jpg" height="100">
</body>
</html>