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

一、本堂课重点内容：

前端工作的定义
前端技术栈拆解与分析
HTML 作用解析
HTML 语义化

二、详细知识点介绍：

什么是前端呢

一句话总结是：使用web技术解决跨终端（PC/浏览器，客户端/小程序等等）GUI人机交互问题的工程师

前端技术栈

HTML（内容设定）
CSS（设定样式）
JavaScript(设定行为)
上面都是运行在浏览器里面的，浏览器通过HTTP协议与服务器进行双向传输。（本地浏览器从服务器端下载三件套代码渲染网页，同时浏览器的本地数据又可以传输到服务器端）

前端应该关注哪些问题？

功能
美观
安全
性能
无障碍
兼容性等等

总结:就是关注用户体验的问题

HTML是什么？

HyperText Markup Language(超文本标记语言)

超文本(HyperText):体现在“超”，包括图片，标题，链接，表格标记语言（Mark up）：<h1>文章标题</h1>，<>就是标签

标签里面也可以有属性,<img src="photo.jpg"/>,src代表属性名，photo.jpg就是属性值

写文章 - 前端与 HTML _ 青训营笔记 - 掘金和另外 6 个页面 - 个人 - Microsoft Edge 2023_1_15 23_52_31.png

HTML是结构是什么样子的呢？

<!doctype html>代表HTML的标准HTML5，第一行必须要写

<html></html>就是第二层嵌套，包括所有HTML标签

<head></head>就是第三层嵌套，放页面的元数据，页面需要这些数据来设定，但是又不会呈现给用户的部分

<body></body>就是第四层嵌套，一般是呈现给用户的内容

所有标签放在浏览器去解析，会解析出DOM树（把HTML代码解析成一个树形的结构，里面的每个结点都是DOM结点，F12展开就可以看到那个树形的展开与关闭）,见下图

前端与 HTML.pdf - 飞书云文档和另外 1 个页面 - 个人 - Microsoft Edge 2023_1_15 21_09_50.png

HTML语法的要求

推荐小写
属性值推荐用""包裹，
布尔属性的属性值可以省略，加了即有效

HTML常用的标签

标题<hx></hx>代表标题，x代表数字，1-6都有效
列表<ol></or>代表有序列表,<li></li>(li是list item的缩写)

<ul></ul>代表无序列表

<dl></dl>代表自定义列表，<dt></dt>代表列表标题<dd></dd>代表具体的值

多媒体<a href="www.bilibili.com" target="_blank">B站</a>代表插入链接

<audio src="/assets/music.mp3" controls></audio>代表插入音频

<video ssrc="/assets/video.mp4" contronls></video>代表插入视频。。。。contronls代表使用浏览器默认播放控制台（可以控制暂停，进度条）

输入<input placeholder=“请输入用户名”>, placeholder表示没有输入时会显示什么字符

<input type=“rage”></input>让用户输入一个范围

<textarea>Hey</textarea>表示一个可输入的文本框

<input type="checkbox">表示多选

<input type="checkbox" checked />checked表示默认选择

<input type="radio" name="sport" />radio表示当选，name一定要一样才能触发单选

<select> <option></option> </select>表示下拉清单

<option>Greece</option>

<option>United Kingdom</option>

<option>United States</option>

</datalist>用户可以有快捷的输入，但是不限制输入

文本：<blockquote cite="https:......">表示长引用，cite表示来源

<cite>表示短引用

<q>表示讲过了，再次引用强调

<code>输入代码

<pre>引用多行代码(中间夹<code>)

<strong>粗写强调

</em>表示重读的词（斜体）

HTML内容划分

如下图所示

写文章 - 前端与 HTML _ 青训营笔记 - 掘金和另外 6 个页面 - 个人 - Microsoft Edge 2023_1_15 23_53_17.png

header标题，nav导航,

main页面主体,

articlle页面内容正文等等,

aside跟标题相关，但是与内容无关的，推荐文章

footer版权，放页面信息，备案啥的

语义化的原则

HTML的元素，属性。属性值都拥有含义
我们应该遵循语义来写HTML，
有序列表用ol，无序用ul，lang表示内容所使用的语言，不能仅仅因为功能相同，采取语义不同的标签

谁在用我们的HTML

开发者（修改、维护）
浏览器（展示）
搜索引擎（关键字，排序）
屏幕阅读器（给盲人读页面内容）

语义化的好处

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

写HTML的原则：传达内容，而不是样式

怎么做到语义化？

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

三、实践练习例子

四、课后个人总结：

我认为这节课讲的东西还是十分基础并且好理解的，老师讲的也十分明白，举例子举的也很好，就是HTML的很多标签的属性由于课程时间的安排没有讲的太细，需要我们自己去看文档来进一步学习。

前端与 HTML | 青训营笔记