前端入门：快速了解HTML|青训营笔记

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

一、什么是前端

在了解HTML之前，让我们浅浅聊一下什么是前端。

简单地来说，前端是一项web技术，用于解决界面人机交互问题。前端工程一般的关注点在于界面的功能、美观、性能等方面。其中，HTML就是前端技术的其中一项。

二、HTML是什么

HTML的全称：HyperText Markup Language

其中HyperText是指图片、链接、表格等超文本，Markup Language是指标记语言（将文本内容使用标记进行标识，例如

<p>hello,world!</p>

标签里还可以添加属性，用于修饰文本内容。如：<p style="font-size:32px">前端工程师</p>;其中font-size是属性名，32px是属性值。

1. HTML语法小tips：

• 标签和属性不区分大小写，推荐小写
• 空标签可以不闭合，例如，input、meta
• 属性值推荐用双引号包裹
• 属性可以省略，则表示使用默认值

2. HTML的基本标签

• 标题 h1~h6

示例：

<h1>hello, world</h1>
<h2>hello, world</h2>
<h3>hello, world</h3>
<h4>hello, world</h4>
<h5>hello, world</h5>
<h6>hello, world</h6>

结果：

• 列表

  • 有序列表

    示例：

    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    

    结果：

• 无序列表

  示例：

  <ul>
      <li>张三</li>
      <li>李四</li>
      <li>王五</li>
  </ul>
  

  结果：

• 定义列表

  示例：

  <dl>
      <dt>清单：</dt>
      <dd>西瓜</dd>
      <dd>哈密瓜</dd>
      <dd>香蕉</dd>
  </dl>
  

  结果：

网页其实就是由一个个的标签构成展示出来的，由于本篇主要是入门介绍，还有很多的标签没有讲到。

3. HTML语义化

HTML中的标签，以及标签里的属性和属性值都拥有各自的含义，开发者应该遵循语义来编写。

那么语义化有什么好处呢？

• 代码可读性
• 可维护性
• 提升无障碍性

当开发者都遵循这一套语义进行开发编写代码时，就有规范可循，知道这个是干嘛的。

HTML的最大作用还是在于传递内容，至此你已经了解了最基本的HTML知识了！