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

前端

1.前端是做什么的？

解决图形界面下人机交互的问题。

2.前端关注什么

功能（重点）、美观、无障碍（所有人可用）、性能（速度、动画流畅）、安全、兼容（多种设备）、用户体验等。

HTML

1.什么是HTML

HTML 是用来描述网页的一种语言。

 -   超文本**标记**语言: **H**yper**T**ext **M**arkup **L**anguage
 -   HTML 不是一种编程语言，而是一种**标记**语言
 -   HTML 文档包含了HTML **标签**及**文本**内容
 -   HTML文档也称 **web 页面**
 -   对大小写不敏感【标签、属性不区分大小写，推荐小写】

标记语言是一套标记标签(markup tag)，使用标记标签来描述网页。

2. HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

-   是由尖括号包围的关键词
-   通常成对出现
-   空标签可不闭合，如input,meta,image

3.HTML 元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签。

4.浏览器与HTML

Web浏览器用于读取HTML文件，并将其作为网页显示。

浏览器不直接展示标签，而是用标签来决定如何展现HTML页面的内容给用户。

5.HTML结构

<html>
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    <!-- 这是一个注释 -->
    <h1>标题</h1>
    <p>段落</p>
  </body>
</html>

注：目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

6.HTML空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

<hr/>用于在页面中创建水平线分隔内容

7.HTML 格式化标签

HTML 使用标签 <b>("bold") 与 <i>("italic")等对输出的文本进行格式化，此类HTML标签被称为格式化标签。

注：通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。但是，这些标签的含义是不同的： <b> 与<i> 定义粗体或斜体文本。 <strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。（更倾向于加重语气和重点段落）其中，<strong>突出重要、紧急，<em>是语义上强调（一句话中重读的语气）

8.HTML `<head>` 元素

元素包含了所有的头部标签元素。在元素中可以插入脚本（scripts）, 样式文件（CSS）及各种meta信息。

可以添加在头部区域的元素标签为:<title>, <style>, <meta>, <link>, <script>, <noscript>和 <base>。

<title>定义文档标题；网页添加至收藏夹的标题；显示在搜索引擎结果页面的标题。
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接。
<link>标签定义了文档与外部资源之间的关系，通常用于链接到样式表。
<style> 标签定义了HTML文档的样式文件引用地址。在元素中也可以直接添加样式来渲染 HTML 文档。 <meta> 标签提供了元数据，用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
<script>标签用于加载脚本文件，如： JavaScript。

9.区块元素和内联元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。
如: <h1>, <p>, <ul>, <table>
内联元素在显示时通常不会以新行开始。
如: <b>, <td>, <a>, <img>

10.语义化是什么？

HTML中元素、属性、属性值都拥有某些含义
开发者遵循语义来编写HTML

原则：传达内容，而不是样式

（笔记内容为我学习HTML期间感觉易混淆的点，具体表述结合了课上老师讲述内容和菜鸟教程的文档进行了整合）

前端与HTML | 青训营笔记

前端