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

本节课程会介绍下前端是什么、要解决的问题和技术栈等。本节也会介绍 HTML 的概念、语义化和常用的 HTML 标签。

课堂笔记

视频地址前端与 HTML - 掘金 (juejin.cn)
ppt地址前端与 HTML.pdf - 飞书云文档 (feishu.cn)

课前准备

安装浏览器

请下载安装一个「现代」浏览器，比如 Chrome、Firefox、Edge 等。推荐使用最新版的 Chrome 浏览器。

安装编辑器

要进行前端开发，一个趁手的编辑器必不可少。强烈推荐使用 Visual Studio Code，如果你习惯使用其它编辑器也是可以的。

提前阅读

课前可以先了解下一些 HTML 基础知识，比如 MDN 上的这遍「 HTML 介绍」。

一、本堂课重点内容：

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

二、详细知识点介绍：

什么是前端?

使用web技术栈，解决多端（PC/移动浏览器、客户端/小程序、VR/AR）GUI（图形界面）下的人机交互问题

前端技术栈

HTML（内容）、CSS（样式）、JavaScript（行为）与网络协议构成前端技术栈

前端应该关注哪些方面？

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

前端的边界？

nodejs、electron、react、webRTC、webGL、webASSEMBLY

开发环境

HTML是什么？

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

html结构

<!doctype html><!-- 标记当前使用的html文件是什么版本,决定浏览器的渲染模式 -->
<html><!--文档的根标签 -->
<head><!-- 页面的元数据 -->
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body><!-- 呈现给用户的内容 -->
    <h1>一级标题</h1>
    <p>段落内容</p>
</body>
</html>

html语法

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

html标签

标题

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

有序列表

<ol>
    <li>1</li>
    <li>2</li>
</ol>

无序列表

<ul>
    <li>1</li>
    <li>2</li>
</ul>

自定义列表

多对多的关系

<dl>
    <dt>导演</dt>
    <dd>导演1</dd>
    <dt>主演</dt>
    <dd>主演1</dd>
    <dd>主演2</dd>
</dl>

链接

<a href="https://www.baidu.com/">
  百度
</a>
<a href="https://www.baidu.com/" target="_blank">
  新窗口打开百度
</a>

多媒体（图片、视频、音频）

alt属性用来为图像定义一串预备的可替换的文本，在浏览器无法载入图像时，显示alt的属性值
controls属性规定浏览器应该为视频或音频提供播放控件。

<img 
  src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
  alt="替换文字"
  width="400"
/>

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

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

输入

placeholder占位符，用户没有输入的时候显示

<input placeholder="请输入用户名">
<input type="range">
<input type="number" min="1" max="10"
<input type="date" min="2018-02-10">
<textarea>Hey</textarea>

多选

<p>
  <label><input type="checkbox" />1</label>
  <label><input type="checkbox" checked />2</label>
</p>

单选

相同的name实现互斥

<p>
  <label><input type="radio" name="sport" />篮球</label>
  <label><input type="radio" name="sport" />足球</label>
</p>

下拉列表

<p>
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
</p>

提示选择

<input list="countries" />
<datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
  <option>United States</option>
</datalist>

长引用

<blockquote cite="这里放文章链接">
  <p>引用内容</p>
</blockquote>

短引用

<cite>引用内容</cite>

代码引用（单行和多行）

<code>const</code>

<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>

强调

<strong>强调重要</strong>
<em>语气上重音</em>

内容划分

html的语义化

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

html的使用

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

语义化的好处

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

如何做到语义化

如何做到语义化？

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

三、课后个人总结：

本节课程主要了解了html的相关知识，对已掌握的html标签进行了复习，同时学习到了一些以前没有见过的标签，如blockquote、cite、code等，html标签种类繁多，各种属性都有不同的效果，在实际的开发过程中，需要选择合适的来使用。

四、引用参考：

青训营课程——前端与 HTML

五、课后阅读材料

MDN 上的 HTML 参考，包含每个标签和属性的详细说明
- developer.mozilla.org/en-US/docs/…
最新版的 W3C HTML5 规范
- html.spec.whatwg.org/multipage/

前端与HTML | 青训营笔记