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

一、本堂课重点内容:

1. 前端工作的定义
2. 前端技术栈拆解与分析
3. HTML 作用解析
4. HTML 语义化

二、详细知识点介绍:

2.1 前端工作的定义

• 解决GUI人机交互问题

• 跨终端

  • PC/移动浏览器
  • 客户端/小程序
  • VR/AR等

• Web技术栈

2.2 前端技术栈拆解与解析

前端技术栈

前端应该关注那些方面

前端的边界

2.3 HTML 作用解析

2.3.1 HTML是什么？

HTML的全称为：HyperText Markup Language

2.3.2 HTML语法

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

2.3.3 标题h1~h6

大部分的文本结构由标题和段落组成。不管是小说、报刊、教科书还是杂志等。

内容结构化会使读者的阅读体验更轻松，更愉快。

在 HTML 中，每个段落是通过 <p> 元素标签进行定义的，比如下面这样：

<p>我是一个段落，千真万确。</p>

每个标题（Heading）是通过“标题标签”进行定义的：

<h1>我是文章的标题</h1>

这里有六个标题元素标签 —— <h1>、<h2>、<h3>、<h4>、<h5>、<h6>。每个元素代表文档中不同级别的内容; <h1> 表示主标题（the main heading），<h2> 表示二级子标题（subheadings），<h3> 表示三级子标题（sub-subheadings），等等。 标题例子：

<h1>字体排印学</h1>
<h2>历史</h2>
<p>活字的雏形或可追溯至公元前两千年前后美
索不达米亚文明的乌鲁克和拉尔萨，砖块上面不
均匀的印花被视作有可能是活字思想雏形。</p>
<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术，公元868
年的《金刚经》是现存最古老的印刷品之一，使用
的技术即是木雕版印刷。</p>
<h2>应用</h2>
<p>...</p>

2.3.4 列表

列表分为无序和有序列表,<ol>为有序列表 <ul>为无序列表 <dl>定义列表<dt>列表头<dd>列表值,dt中可有多个dd

列表例子：

<h2>世界电影票房排行榜</h2>
<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>

<h2>购物清单</h2>
<ul>
  <li>🍇</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>

<h2>霸王别姬</h2>
<dl>
  <dt>导演：</dt>
  <dd>陈凯歌</dd>
  <dt>主演：</dt>
  <dd>张国荣</dd>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>
  <dt>上映日期：</dt>
  <dd>1993-01-01</dd>
</dl>

2.3.5 超链接

代码：

<a href="https://www.bytedance.com/">
  字节跳动官网
</a>

<a href="https://www.bytedance.com/" target="_blank">
  字节跳动官网
</a>

其中target="_blank"属性表示的是在新窗口打开一个网页

2.3.6 媒体标签

代码：

<img
  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg"
  alt="Metal movable type"
  width="400"
/>

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

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

<img/>为图片标签，<audio><audio/>为音频标签，<video />为视频标签。

2.3.7 表单输入元素

代码：

• input为输入标签，placeholder为占位符，可以通过修改input标签的type属性来改变input的输入类型。
• textarea表示一个多行纯文本编辑控件。

<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" />🍎</label>
  <label><input type="checkbox" checked />🍏</label>
</p>

<p>
  <label><input type="radio" name="sport" />⚽</label>
  <label><input type="radio" name="sport" />🏀</label>
</p>

<p>
  <select>
    <option>🥑</option>
    <option>🥩</option>
    <option>🥓</option>
  </select>
</p>

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

2.3.8 引用

• blockquote代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进。若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 特性上，若要以文本的形式告知读者引文的出处时，可以通过 cite元素。
• <q>标签为真正的引用语句
• <code>标签为标注代码
• <strong>标签为加粗
• <em>标签为斜体

代码：

<blockquote cite="http://t.cn/RfjKO0F">
  <p>天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长的民众产生、长育出来的，所以没有 这种民众，就没有天才。</p>
</blockquote>

<p>我最喜欢的一本书是<cite>小王子</cite>。</p>

<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>

<p><code>const</code>声明创建一个只读的常量。</p>

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

<p>在投资之前，<strong>一定要做风险评估</strong>。</p>

<p>Cats <em>are</em> cute animals.</p>

2.3.9 内容划分

• <header>：页眉。
• <nav>：导航栏。
• <main>：主内容。主内容中还可以有各种子内容区段，可用<article>、<section> 和 <div> 等元素表示。
• <aside>：侧边栏，经常嵌套在 <main> 中。
• <footer>：页脚。

2.3.10 语义化

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

好处：

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

2.3.11 如何做到语义化

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

三、实践练习例子：

实现视频播放

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

四、课后个人总结：

在本节课程，了解到大多数html标签。只有少数的标签没有使用过，可以通过mdn文档查询。这堂课里主要讲解了语义化，注重语义化，做到只传达内容，而不是传达样式。

五、引用参考：

• developer.mozilla.org/zh-CN/docs/…