这是我参与「第四届青训营 」笔记创作活动的的第1天
本堂课重点内容
-
前端工程师即使用Web技术栈，解决多端图形用户交互界面问题的工程师
-
HTML、CSS、JavaScript都是运行在浏览器中的，它们通过网络协议（如HTTP）与服务器端通信
-
HTML、CSS、JavaScript与网络协议构成前端最基础的技术栈
-
文档类型声明(doctype)，声明了当前HTML文件使用的HTML版本，告诉了浏览器该如何选择渲染模式
-
DOM 树
浏览器拿到HTML文档之后，会根据HTML代码解析出一个DOM 树，即把HTML代码转化为对应的树形结构，其中每一个节点称之为DOM 节点
-
认识HTML语法与标签
-
了解HTML页面经典布局
详细知识点介绍
什么是前端？
-
解决GUI人机交互问题
-
跨终端
- 如PC/移动浏览器
- 客户端/小程序
- VR/AR等
-
Web技术栈
前端主要技术
-
HTML
- 负责页面结构和内容
-
CSS
- 负责页面的样式（例如位置、颜色、大小）
-
JavaScript
- 定义网页的行为（例如用户点击按钮后页面如何响应）
前端应该关注哪些方面
功能、美观、无障碍、安全、性能、兼容性、体验
前端的边界
随着新的技术的不断发展，前端能做的东西已经远远超出了“页面”这样的简单范畴，例如
- node.js：开发服务器端的一些应用
- Electron、React Native：开发客户端的一些应用
- Web RTC：P2P在线传输
- WebGL：开发3D游戏
- WebAssembly：将C++、Rust等其他语言编写的代码编译成可以直接在浏览器运行的代码
开发环境
前端入门门槛其实非常低，只需要有一个浏览器、一个编辑器即可上手
编辑器
- VSCode
- Vim
- WebStorm
浏览器
- IE/Edge
- Chrome
- Firefox
- Safari
HTML 是什么？
HyperText Markup Language 超文本标记语言
超文本：非简单纯文字，包含图片、标题、链接、表格
标记语言：用开始标签与结束标签来表示一段内容或格式
HTML 语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，例如 input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，例如 required、readonly
HTML 标签
如
-
<a>标签：表示链接
-
<img>标签：表示图片
-
<audio>标签：表示音频
-
<video>标签：表示视频
-
<blockquote>标签：块级引用
-
<cite>标签：短引用
-
<q>标签：短引用
- 与标签的区别：标签多用于引用作品的名字或章节标题，
标签多用于具体的引用内容
- 与标签的区别：标签多用于引用作品的名字或章节标题，
-
<code>、<pre>标签：表示代码
-
<strong>、<em>标签：表示强调
- 区别：<strong>标签表示重要、严重、紧急，<em>更多表示语气上的强调
HTML 页面布局、内容划分
解析
- header元素：页头
- nav元素：导航
- main元素：页面主体
- article元素（可无、可有多个）：正文
- aside元素：与内容相关的信息
- footer元素：页尾
语义化是什么？
HTML所有的元素、属性及属性值的含义即为语义
-
HTML中的元素、属性及属性值都拥有某些含义
-
开发者应该遵循语义来编写HTML，如
- 有序列表用ol；无需列表用ul
- lang 属性表示内容所使用的的语言
我们为什么要语义化，谁在使用我们写的HTML？
- 开发者方面：有利于修改、维护页面
- 浏览器方面：有利于展示页面
- 搜索引擎方面：有利于提取关键词、排序
- 无障碍方面：有利于无障碍性，如屏幕阅读器为盲人读取页面内容
语义化的好处
我们应该更注重传达内容，而不是样式
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
如何做到语义化？
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
实践练习例子
例一：初识HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>一级标题</h1>
<p>段落内容</p>
</body>
</html>
解析
<!DOCTYPE html>：声明了当前HTML文件使用的HTML版本，告诉了浏览器该如何选择渲染模式
</html>标签：HTML文档的根标签，其他标签一律写在其中
<head>标签：存放页面的元数据，例如页面的标题、编码
<body>标签：存放需要呈现给用户的真正内容，例如标题<h1></h1>、一段文字<p></p>等
运行效果
例二：认识标题
<h1>字体排印学</h1>
<h2>历史</h2>
<p>
活字的雏形或可追溯至公元前两千年前后美索不达米亚文明的乌鲁克和拉尔萨，砖块上面不均匀的印花被视作有可能是活字思想雏形。
</p>
<h3>印刷体源流</h3>
<p>
中国在唐代就已经出现雕版印刷术,公元868年的《金刚经》是现存最古老的印刷品之一，使用的技术即是木雕版印刷。
</p>
<h2>应用</h2>
<p>···</p>
解析
HTML中有6种，从<h1>至<h6>分别表示一级至六级标题
运行效果
例三：认识列表
<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>
解析
有序列表：<ol>标签
无序列表：<ul>标签
定义列表：<dl>标签
<dt>标签表示描述列表里面的标题
<dd>标签表示具体值（描述）
运行结果
例四：认识输入
<input placeholder="请输入用户名">
<input type=" range">
<input type="number" min="1" max="10">
<input type="date" min="2018-02-10">
<textarea>Hey</textarea>
解析
<input>标签：输入标签，如文本、范围（type="range"时）、数字（type="number"时）、日期（type="date"时）
<textarea>标签：多行的文本输入标签
运行结果
例五：认识输入2
<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>
解析
如何让用户在已有选项中选择输入值
-
多选：将<input>标签中的type属性设置为"checkbox"
-
单选：将<input>标签中的type属性设置为"radio"
- 互斥关系通过name属性达到，多个radio之间如果name相同，用户只能从name相同的radio中选择其一
-
下拉选择：<select>标签，下拉选择中有哪些选项可以写在 <option> 标签中
-
<datalist> 标签： 用来在为 <input> 元素提供，用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。
运行结果
课后个人总结
- 前端在互联网行业中发展飞快，技术在不断更新，我们必须不断学习才能跟上技术的发展。
- 学习前端是需要耐心的，没有足够的耐心是很难学会的，因为一旦遇到问题，你可能无法马上得到解答，要花上很长一段时间去研究。
- 以实用为主，前端的设计要以实用为主，让使用者可以随意的触摸、评论和互动。
其中我个人觉得HTML标签部分知识点较为不容易掌握，例如<input>标签，因此，我也特意练习了两个实例，希望能巩固相关知识点。
