开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第1天,点击查看活动详情
一:HTML文件内标签解析
<!DOCTYPE html>
声明为 HTML5 文档
<html>
元素是 HTML 页面的根元素
<head>
元素包含了文档的元(meta)数据,如 定义网页编码格式为 utf-8
<title>
元素描述了文档的标题
<body>
元素包含了可见的页面内容
看不懂?上代码
<!DOCTYPE html> <!--HTML5的专门的声明-->
<html lang="en"> <!--根元素头-->
<head> //页面头部头 (放置link外部引入文件和meta设置)
<meta charset="UTF-8">
<!-- 1.定义字符编码
2.定义搜索关键字
3.定义页面整体内容的描述
-->
<title>HTML基础</title> //页面标题
</head> //页面头部尾
<body> //页面身体(内容)头
</body> //页面身体(内容)尾
</html> <!--根元素尾-->
二:常用标签
1. HTML 标题
HTML 标题(Heading)是通过<h1> - <h6>
标签来定义的。
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
....
<h6>这是一个标题</h6>
2. HTML 段落
HTML 段落是通过标签 <p>
来定义的。
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
3. HTML 链接
HTML 链接是通过标签 <a>
来定义的。
<a href="https://https://juejin.cn/user/726106186459070">这是一个链接</a>
4.HTML 图像
HTML 图像是通过标签 <img>
来定义的.
<img decoding="async" src="/images/logo.png" width="258" height="39" />
** 元素举个栗子🌰
<!DOCTYPE html> <!--HTML5的专门的声明-->
<html lang="en"><!--根元素-->
<head>
<meta charset="UTF-8">
<!-- 1.定义字符编码
2.定义搜索关键字
3.定义页面整体内容的描述-->
<title>HTML基础</title>
</head>
<body>
<h1>大家好</h1>
<h2>大家好</h2>
<h3>大家好</h3>
大家好
大家好
<h4>大家好</h4>
<h5>大家好</h5>
<h6>大家好</h6>
<h1>咏鹅</h1>
<p>鹅鹅鹅</p>
<p>曲项向天歌</p>
<p>白毛浮绿水</p>
<p>红掌拨清波</p>
<a name="imgprint"></a>
<img src="img/img01.jpg" alt="加载失败图片" title="运动品牌" width="600" height="500">
</body>
</html>
5. HTML 水平线
<hr>
标签在 HTML 页面中创建水平线。
hr元素可用于分隔内容。
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
6.HTML 注释
可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。
注释写法如下:
<!-- 这是一个注释 -->
7.HTML 折行
如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br>
标签:
<p>
这个
<br>
段落
<br>
演示了分行的效果
</p>
8.HTML 文本格式化标签
标签 | 描述 |
---|---|
<b> | 定义粗体文本 |
<em> | 定义着重文字 |
<i> | 定义斜体字 |
<small> | 定义小号字 |
<strong> | 定义加重语气 |
<sub> | 定义下标 字 |
<sup> | 定义上标字 |
<ins> | 定义插入字 |
<del> | 定义 |
** 元素举个栗子🌰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>em和i是斜体标签,strong和b是加粗标签</title>
</head>
<body>
<b>从军行</b>
<hr/>
<em>青海长云</em>暗<i>雪山</i> <br>
<strong>孤城遥望</strong>玉<small>门关</small> <br>
黄沙百<sub>100</sub>战穿金<sup>99</sup>甲 <br>
不破<ins>楼兰</ins>终<del>不</del>还 <br>
</body>
</html>