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

前端是什么？

作为一个非计算机专业的小朋友，这个问题是学习首先要了解清楚的。

前端即网站的前台部分，用户可以在PC端，移动端等浏览器上浏览相应的网页，体验相应的功能。随着互联网技术的发展，HTML5，CSS3，以及各种前端框架的应用，使得网页的设计变得更加灵活，可以更好匹配各种屏幕，给用户们带来更好的体验。

作为前端开发的核心技术：HTML、CSS、JavaScript（俗称“前端三大件”），核心技术是前端开发中最基本也是最必须的三个技能。

1、HTML

HTML用来构成网页的内容，是网页的骨架。网页的内容是指开发者放在页面上想让用户浏览的信息，例如文字、图片、视频等等，简单来说就是用来定义网页的内容。

2、CSS

CSS决定了网页是否美观，字体大小是否合适，颜色是否搭配得当，用户的体验感是否良好。

3、JavaScript

JavaScript是用来定义网页上的交互，控制网页的交互行为，实现网页的逻辑功能。例如点击按钮弹出/关闭弹窗、输入一些评论信息等等。

下面用一幅图更加直观的展示一下吧！！

VNIO(({$L@`IEUDZXC)YHUY.png

HTML详解

超文本标记语言（HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML 很容易学习！相信大家能很快学会它！

！！！！HTML文件的后缀为.html或.htm，通过后缀可以快速查看文件！！！！

1、HTML构成解析

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的页面标题</title>
    </head>
    
    <body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
    </body>
</html>

《!DOCTYPE html》声明HTML5 文档

《html》是HTML页面的根元素

《title》描述了页面的标题

《body》包含了可见的页面内容

《h1》定义一个大标题

《p》定义一个段落

2、HTML 元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
其中br标签定义换行
HTML 标签对大小写不敏感：P等同 p。

3、 HTML 标题

标题（Heading）是通过h1 - h6标签进行定义的。h1是最大的标题，h6为最小的标题。应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

hr 标签在 HTML 页面中创建水平线，hr 元素可用于分隔内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>

<h1>这是标题 1</h1>
<hr>
<h2>这是标题 2</h2>
<hr>
<h3>这是标题 3</h3>
<hr>
<h4>这是标题 4</h4>
<hr>
<h5>这是标题 5</h5>
<hr>
<h6>这是标题 6</h6>
<hr>

</body>
</html>

结果如下：

4、HTML常用标签

标签	描述
article	定义一个文章区域
button	定义一个按钮
div	定义文档中的节
form	定义HTML文档的表单
head	定义关于文档的信息
hr	定义水平线
img	定义图像
input	定义输入控件
label	定义input元素的标注
nav	定义导航链接的部分
p	定义段落
select	定义选择列表
sub	定义下标文本
sup	定义上标文本
textarea	定义多行的文本输入控件
time	定义时间或日期
title	定义文档的标题

总结

1、HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

2、HTML 的关键是标签，其作用是指示将出现的内容。

3、HTML的语法简单，可以边做边查找

说的多不如做的多，HTML可以通过一些在线运行的网址进行测试，无需下载专门的软件，接下来我们将学习CSS，一起加油吧！！！

前端小结之html的看过来| 青训营笔记