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

这节课主要分为两部分，一部分讲前端的一些基础知识，另一部分讲什么是HTML

一、前端的基础知识

1、什么是前端

前端就是一个网页的前台部分，直接展现在用户面前的可视化部分。

• 解决GUI人机交互问题
• 跨终端
• Web技术栈

2、前端技术栈

• JavaScript（行为）
• CCS（样式）
• HTML（内容）

3、前端关注的重点

• 功能（重中之重）
• 美观
• 安全
• 兼容
• 体验
• 性能
• 无障碍

二、什么是HTML

1、概念

• HTML 指的是超文本标记语言: Hyper Text Markup Language
• 它是用来描述网页的语言

2、第一个HTML范例

3、HTML标签

• 标题：通过 h1-h6标签进行定义的。h1 定义最大的标题，h6定义最小的标题。

<h1>这是一个标题。</h1>

• 段落：通过p标签定义。

<p>这是一个段落 </p>

• 链接

<a href="https://www.bytedance.com/"> 字节跳动官网 </a>

• 图片：可为图片定义一串预备的可替换的文本，并设置图像的长宽

<img border="0" src="family.jpg" alt="family type" width="200" height="200">

• 表格

<table border="1"> 
    <tr> 
       <td>Row 1, cell 1</td> 
       <td>Row 1, cell 2</td> 
    </tr>
 </table>

4、内容划分

5、语义化

什么是语义化

• HTML中的元素、属性及属性值都拥有某些含义
• 开发者应该遵循语义来编写HTML
• • 有序列表用ol；无序列表用ul
• • lang属性表示内容所使用的语言

语义化的好处

• 代码可读性
• 可维护性
• 搜索引擎优化
• 提升无障碍性

如何做到语义化

• 了解每个标签和属性的含义
• 思考什么标签最适合描述这个内容
• 不使用可视化工具生成代码