第一节前端基础HTML | 青训营笔记这是我参与「第四届青训营」笔记创作活动的第1天。前端概述什么是前端概述

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

本次字节前端青训营的第一节课，介绍了什么是前端和html。青训营老师的对课程内容的讲解生动有趣，在初步的学习之后，我对前端有了初步的认识。

前端概述

什么是前端

概述

解决GUI人机交互问题
跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
Web技术栈

前端开发者的关注点

功能
性能
兼容
安全
体验
美观
无障碍
...

开发环境

入门HTML

什么是HTML

超文本标记语言 -- Hypertext Markup Language
HTML是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。HTML 由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。

HTML的结构

页面结构
网页的布局通常具有一定的结构，html语义化的标签很好的支持了开发者进行页面编写定义的布局框架。

HTML语法

标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如input、meta
属性值推荐用双引号包裹
某些属性值可以省略，比如required、readonly

常用的html标签

1. 标题标签
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
2. 有序列表与无序列表
    <ol>
      <li>阿凡达</li>
      <li>泰坦尼克号</li>
      <li>复仇者联盟</li>
    </ol>
    
    <h2>购物清单</h2>
    <ul>
      <li>🍇</li>
      <li>🍉</li>
      <li>🍎</li>
    </ul>
3. 链接
    <a href="https://www.bytedance.com/">
      字节跳动官网
    </a>
    
    <a href="https://www.bytedance.com/" target="_blank">
      字节跳动官网
    </a>
4. 图片
    <img
      src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg"
      alt="Metal movable type"
      width="400"
    />
    <!-- src 为路径 -->
5. 音频标签
    <audio 
      src="/assets/music.ogg"
      controls
    ></audio>
6. 视频标签    
    <video
      src="/assets/video.mp4"
      controls
    ></video>
7 ...

更多html标签及其详细用法请参考MDN文档 HTML elements reference - HTML: HyperText Markup Language | MDN (mozilla.org)

前端语义化

什么是前端语义化

前端开发者在编写html页面时，应该根据内容的结构，选择合适的标签。

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

语义化的好处

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

如何做到语义化

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

总结

本次课程仅仅是对前端和html的初步介绍，对于新手入门前端有很大的帮助。我们首先讨论了何为前端，并且从三个方面介绍了前端的大致方向。接着对HTML的入门，从HTML的语法和常用标签起步，通过简单的实践尝试了页面的编写，初步了解浏览器的html的解析工作流程。最后是对前端语义化的介绍，作为一名合格的前端工程师，必须了解并掌握前端语义化，才能形成良好的编码习惯，编写出可读性好、维护性高的优美代码，这对于一位前端学习者来说，是容易被忽视但却及其重要的方面。

第一节 前端基础HTML | 青训营笔记