HTML学习笔记1-CSDN博客

本文链接：https://blog.csdn.net/m0_69916432/article/details/131712228

本文介绍了HTML的基础知识，包括标签的语法、HTML的基本骨架结构，以及常见的元素如标题标签(h1-h6)、段落标签(p)、换行与水平线标签(br,hr)、文本格式标签(strong,em,ins,del)、图像标签(img)、超链接(a)、音频和视频标签(audio,video)及其相关属性。这些内容构成了网页制作的基础。

摘要由CSDN通过智能技术生成

参考视频：https://www.bilibili.com/video/BV1kM4y127Li/

HTML是一种超文本(链接)标记(标签)语言。

一、标签语法：

1.双标签(成对出现)如：<strong>...</strong>。

2.单标签(只有开始，没有结束)ru：<br>：换行，<hr>：水平线。

二、HTML基本骨架：

<!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>
    
</body>
</html>

head：网页头部，用来存放给浏览器看的信息。

body：网页主题，用来存放给用户看到信息。

三、标签的关系：

1.父子关系(嵌套)

2.兄弟关系(并列)

四、标题标签：

一般用在新闻标题、文章标题等。

标签名：h1~h6(双标签)

显示特点：

1.文字加粗.

2.字号逐渐减小.

3.独占一行.

如：

<!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>
</body>
</html>

五、段落标签：

标签名：p(双标签)

显示特点：

1.独占一行.

2.段落之间存在间隙.

如：

<!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>
</body>
</html>

六、换行与水平线标签：

1.换行：<br>(单标签)

1.水平线：<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>

七、文本格式标签：

作用：为文本添加特殊格式，以突出重点。

标签名：

1.strong/b：加粗

2.em/i：倾斜

3.ins/u：下划线

4.del/s：删除线

如：

<!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/b加粗 -->
    <strong>strong加粗</strong>
    <!-- 2.em/i倾斜 -->
    <em>em倾斜</em>
    <!-- 3.ins/u下划线 -->
    <ins>ins下划线</ins>
    <!-- 4.del/s删除线 -->
    <del>del删除线</del>
   <hr>
</body>
</html>