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

2023.1.15

一、本堂课重点内容：

了解前端工程师的职责和前端技术栈
深刻理解html的语义化
梳理html语法的常见标签

二、详细知识点介绍：

前端概览

什么是前端？

前端工程师是使用Web技术栈解决多端（PC/移动端、客户端小程序、VR/AR等）人机交互问题的工程师。

前端技术栈

JavaSp（定义网页行为行为）+ CSS（样式）+ HTML(页面内容) + 浏览器网络协议
网络协议：浏览器通过网络协议和服务器通信，获取代码渲染网页，同时也可以获取用户填写的信息通过网络协议提交到服务器端。

前端应该关注哪些方面？

功能、性能、兼容性、美观、无障碍、安全、用户体验

HTML

HyperText（超文本） Markup Language（标记语言）

浏览器拿到html代码后，会解析得到一个DOM树

HTML语法要点

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

HTML语法总结

标题h1~h6

列表标签

<ol>   <!--有序列表-->
    <li></li>
</ol>
<ul>   <!--无序列表-->
    <li></li>
</ul>
<dl>   <!--属性列表-->
    <dt>导演</dt>  <!--列表标题-->
    <dd></dd>   <!--列表内容-->
</dl>

链接

<a href=""
target="_blank">  <!--这里是新标签页打开的设置-->
    链接文字
</a>

多媒体元素

<img
    src=""  <!--图片地址-->
    alt="Metal movable type"  <!--当图片加载失败，显示的文字-->
    width="400"
/>
<audio
    src=""  <!--音频的url-->
    control
></audio>

供用户输入的控件

<input placeholder="请输入">  <!--输入空白显示-->
<input type="date" min="">
<textarea>Hey</textarea>

文本标签

blockquote标签快捷引用

code标签引用代码(课多行)

strong标签强调文本（含义重要紧急）

em标签强调文本（重读的词）

内容整体划分

HTML的语义化

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

谁在用我们写的HTML

开发者–修改、维护页面
浏览器-展示页面
搜索引擎–提取关键词、排序
屏幕阅读器-给盲人读页面内容

如何做到语义化？

原则：传递内容，而不是样式

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

三、课后个人总结：

通过本节课的学习，我基本梳理了html常见标签。并且了解了整个前端的技术栈和作用。但是，本人对于html语言的标签仍然不太熟悉，同时对于html语义化理解不够深入

前端与 HTML | 青训营笔记