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

一、本节课重点内容：

1.前端工作的定义

2.前端技术栈拆解与分析

3.HTML 作用解析

4.HTML 语义化

二、详细知识点介绍:

1.什么是前端?

前端工程师就是使用WEB技术栈解决多端网络图形交互的工程师

2.前端技术栈

前端最基础的技术栈：html、css、JavaScript、http

3.前端应该关注哪些方面?

4.前端的边界

5.HTML是什么?

6.HTML语法

(1)标题h1~h6标签 (2)列表标签

<ol>为有序列表order list
<ul>为无序列表
<dl>定义列表difinition list
<dt>列表头title
<dd>列表值,dt中可有多个dd

(3)链接

target属性中 _blank为新窗口打开一个网页

(4)媒体标签

<img/>标签
<audio></audio>标签
<video></video>标签

(5)输入

checkbox多选

radio单选

option标签中内容为输入提示

(6)引用

<cite>标签为引用标题
<q>标签为真正的引用语句
<code>标签为标注代码
<strong>标签为加粗
<em>标签为斜体

7.内容划分

注意：main标签只能有一个

8.语义化是什么?

9.谁在使用我们写的HTML

10.语义化的好处

11.传达内容而不是样式

12.如何做到语义化?

标签、属性推荐通过MDN等文档进行学习

三、实践练习例子:

1.img标签表示图片

2.HTML代码例子

doctype标记了当前html文本，表示html版本，选择使用哪一种渲染模式，html为根标签，所有标签写在html中

3.DOM树

浏览器将html代码转化为dom节点，F12打卡每一节都为一个dom节点。

四、课后个人总结:

本节课对html标签进行大致讲解，但许多还有很多标签、属性没有讲解需要课后阅读MDN文档等进行学习

本节课重点强调语义化，做到传达内容而不是样式。