这是我参与「第四届青训营」笔记创作活动的的第1天

一、本堂课重点内容

了解什么是前端
学习HTML以及一些常见的标签

二、详细知识点介绍

常用开发工具:Hbuilder\vscode
下载地址1:www.dcloud.io/
下载地址2:vscode.bianjiqi.net

HTML概念

HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。

HTML网页结构

<!DOCTYPE html>
    <html lang="en">
        <head>
           <meta charset="UTF-8"> <title>Document</title>
        </head>
<body>
</body>
</html>

常用标签:

hn标题标签，其中n为1–6的值，大小依次递减，文字加粗，块级元素
i斜体标签，将需要变为斜体的文字放在标签内
em强调斜体，将需要变成斜体的文字放在标签内
b加粗标签，将需要加粗的文字放在标签内
strong强调加粗，用法同b标签
cite作品的标题（引⽤用）
p标签，用于文章分段，块级元素
div标签，块级元素
input标签，表单元素
img标签，图片元素标签
ul>li 无序列元素
ol>li 有序列表元素

实践练习例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>⽂文本标题示例例</title>
</head>
<body>
    <h3>HTML标签实例例--⽂文本标签</h3>
    
    <h1>h1标题</h1>
    <h2>h2标题</h2>
    <h3>h3标题</h3>
    <h4>h4标题</h4>
    <h5>h5标题</h5>
    <h6>h6标题</h6>
    
    <i>i: 斜体标签</i> <br/>
    <em>em: 强调斜体标签</em> <br/>
    <b>b: 加粗标签</b><br/><br/>
    
    <strong>strong: 强调加粗标签</strong><br/>
    <del>del: 删除线</del><br/>
    <u>u: 下划线</u> <br/><br/>
    
    水分子：H<sub>2</sub>O <br/>
    4<sup>2</sup>=16
</body>
</html>

课后个人总结

作为一个刚上手学做网页的萌新，对html5最大的印象就是要运用好那些常用的标签。用好了标签意味着盖好了“房子”，在以后学习了css之后，能更好地对这些“房子”进行“装修”，也就是让网页更加好看，更加具有个性化设计，能让浏览者更好地应用当前的网站。前端设计个人认为需要勤奋的记忆标签以及标签的用法，才能在写的时候更加信手拈来，更加轻松地完成前端任务。

HTML虽然不是一门编程语言但是它却十分强大，它里面包含了很多标签，通过这些标签我们使用者就可以根据自己的需要来设计一个网页，把我们想要表达的内容放进这个网页当中，它定义了网页内容的含义和结构。

HTML基础 | 青训营笔记