认识前端与HTML|青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的的第一天，今天学习前端与HTML。
本堂课重点内容
- 前端技术栈
- 前端的边界
- HTML浅要介绍
- 语义化
详细知识点介绍
什么是前端？
- 解决GUI人机交互问题
- 跨终端（pc/移动浏览器，客户端/小程序，VR/AR等）
- web技术栈
前端技术栈
前端应该关注哪些方面？
- 美观
- 安全
- 功能
- 体验
- 兼容
- 性能
- 无障碍
前端的边界
开发环境
HTML
HTML是超文本+标签语言
标签内含属性名和属性值
标准的HTML代码的例子
<!DOCTYPE html>声明必须是 HTML 文档的第一行。它不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
HTML <html> 元素 表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。所有其他元素必须是此元素的后代。
HTMLhead 元素 规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。
HTML body 元素表示文档的内容。
HTML <title> 元素 定义文档的标题，显示在Browser的标题栏或标签页上。
HTML <h1>–<h6> 标题 (Heading) 元素呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。
总结：
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如 input，meta
- 属性值推荐双引号包裹
- 某些属性值可以省略，比如 required，readonly
语义化是什么？
HTML的元素、属性及属性值都有某种含义，开发者应遵循语义编写HTML。
如何做到语义化：
- 了解每个标签和属性含义（参考MDN文档、W3C）
- 思考哪个标签最合适描述这个内容
- 不使用可视化工具生成代码 语义化的好处：
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
实践练习例子
标题h1-h6
<h1>字体排印学</h1>
<h2>历史</h2>
<p>活字的雏形或可追溯至公元前两千年前后美
索不达米亚文明的乌鲁克和拉尔萨，砖块上面不
均匀的印花被视作有可能是活字思想雏形。</p>
<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术，公元868
年的《金刚经》是现存最古老的印刷品之一，使用
的技术即是木雕版印刷。</p>
<h2>应用</h2>
<p>...</p>
运行
列表
<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>
运行
输入
<input placeholder="请输入用户名">
<input type="range">
<input type="number" min="1" max="10">
<input type="date" min="2018-02-10">
<textarea>Hey</textarea>
运行
课后个人总结
本节课了解了前端与HTML，让我认识到语义化的重要性。要做好HTML搭建，必须熟悉每个标签和属性的含义。
