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

前端与HTML | 青训营笔记

课堂笔记

前端基础篇由 “前端要解决的基本问题” 及 “什么是HTML” 两个基本问题展开，层层解析前端技术栈的构成。

前端要解决的基本问题

图形界面下的人机交互问题

前端需要关注方面

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

前端的边界

随着技术发展，前端的边界越来越广泛。例如，使用node.js运行在服务端，使用Electron和React Native开发客户端应用，使用WebRTC实现多人实时会议通信，使用WebGL开发流畅的3D游戏，使用WebASSEMBLY可以使C++、Rust等其他语言在浏览器快速运行。

HTML是什么

HTML 即 HyperText Markup Language

HyperText超文本，包括图片、标题、链接、表格等，不只局限于文本
那么这些超文本又如何描述呢？
Markup Language标签语言，形如 <h1>文章标题</h1>, 以标签来表示内容

基本形式

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

DOCTYPE标签
标记了html使用的版本，浏览器据此来渲染，否则浏览器会以老旧的，所谓“怪异模式”来排版渲染界面
html标签
文档的根标签
head标签
放置页面的元数据，就是指那些被页面所需要，但是又不需要直接呈现给用户的，例如，标签页的标题，页面的编码
body标签
真正展示给用户的内容

HTML语法

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

易忽略标签

<dl>标签

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

dl：Definition lists，自定义列表，定义项目的描述，具有对应关系

dt：Definition title, 自定义标题
dd：Definition description，自定义描述，对应标题的描述

<dl>例子

<input list="datalist_id">input的list属性
配合<datalist id="datalist_id">标签使用，包含输入字段的预定义选项，注意： 预定义选项出现用户提示，但不会限制用户的输入，其帮助提示用户或快速输入。

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

语义化

h5标准新增了许多语义标签诸如 <header>、<nav>、<main>、<aside>、<footer>
语义化的好处：

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

开发者应遵循语义化标准，我为人人，人人为我。