这是我参与「第五届青训营」伴学笔记创作活动的第 1 天
本堂课重点内容有：

前端的应用及技术介绍
HTML的主要构成和工作方式
HTML的语法及主要标签
HTML的语义化

前端

解决GUI人机交互问题
跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
Web技术栈

前端技术栈

stateDiagram-v2

服务器端 --> 前端：Javascript（行为）、CSS（样式）、HTML（内容）
前端：Javascript（行为）、CSS（样式）、HTML（内容）--> 服务器端 :网络协议

前端应关注哪些方面

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

前端的边界

开发环境

HTML

HyperText Markup Language

HyperText：图片、标题、链接、表格

Markup Language：eg.<h1/>文章标题</h1> <img src="photo.jpg" />(其中src 为属性，photo.jpg为属性值）

常见HTML格式：

<！doctype htm1>
<html>
    <head>
        <meta charset="UTF—8">
        <title>页面标题</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <p>段落内容</p>
    </body>
</html>

DOM树

HTML语法

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

标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

### 列表 - 有序列表（order list) ```HTML

阿凡达
泰坦尼克号
复仇者联盟

```

- 无序列表

<ul>
  <li>🍇</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>

- p-value列表

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

### 链接

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

<a href="https://www.bytedance.com/" target="_blank">
  字节跳动官网（新窗口打开）
</a>

字节跳动官网

字节跳动官网（新窗口打开）

href属性表示链接打开的地址。

多媒体

<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>

src属性表示多媒体地址
alt表示多媒体的替换文本（当多媒体内容加载失败时显示）
controls属性表示默认播放控件

输入

用户提供输入信息

<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>

datalist标签提供快速输入提示选项

文本类标签

<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>

blockquote标签，块级引用，又叫长引用
cite标签，短引用，标题
q标签，短引用，具体内容
code标签，代码，字体有别于其他内容
strong标签，表示强调，含义重要紧急
em标签，表示强调，重音

内容划分

语义化-传达内容，而不是样式

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

谁在使用我们写的HTML

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

语义化的好处

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

如何做到语义化？

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

前端与 HTML | 青训营笔记

前端