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

课堂笔记

前端工程师是通过web技术栈解决多端图形用户交互界面问题的工程师。 HTML作为前端技术栈中最基础的技术，负责页面的结构和内容。CSS负责页面的样式，JS负责控制页面的行为。 前端应该关注产品的功能是否符合要求，页面是否美观，无障碍阅读，网站安全性的强弱，性能如何以及兼容性问题。

HTML(HyperText Markup Language)

代码示例

`

页面标题

一级标题

段落内容

`

DOM树

HTML语法

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

重要标签

标题

示例： `

字体排印学

历史

活字的雏形或可追溯至公元前两千年前后美 索不达米亚文明的乌鲁克和拉尔萨，砖块上面不 均匀的印花被视作有可能是活字思想雏形。

印刷体源流

中国在唐代就已经出现雕版印刷术，公元868 年的《金刚经》是现存最古老的印刷品之一，使用 的技术即是木雕版印刷。

应用

...

`

列表

示例：

//有序列表

世界电影票房排行榜

1. 阿凡达
2. 泰坦尼克号
3. 复仇者联盟

//无序列表

购物清单

• 🍇
• 🍉
• 🍎

//自定义列表

霸王别姬

导演：

陈凯歌

主演：

张国荣

张丰毅

巩俐

上映日期：

1993-01-01

链接

示例： 字节跳动官网

字节跳动官网

图片，音频

示例：

<audio src="/assets/music.ogg" controls

<video src="/assets/video.mp4" controls

表单

示例：

Hey

选项

示例：

🍎 🍏

⚽ 🏀

🥑 🥩 🥓

Greece United Kingdom United States #### 引用 示例:

天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长的民众产生、长育出来的，所以没有 这种民众，就没有天才。

我最喜欢的一本书是小王子。

在第一章，我们讲过字符串是不可变量。

const声明创建一个只读的常量。

const add = (a, b) => a + b;
const multiply = (a, b) => a * b;

强调

示例:

在投资之前，一定要做风险评估。

Cats are cute animals.

内容划分

语义化

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