HTML——HTML标签解析和常用标签①

154 阅读2分钟
开启掘金成长之旅!这是我参与「掘金日新计划 · 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>

image.png

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>

image.png