背景

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

什么是前端?

解决什么问题？

前端工程师解决web 技术栈多端图形界面的交互问题的工程师

前端是用什么技术进行开发？

1. HTML (内容) 如：页面的结构，你看到的布局
1. CSS (样式) 如：页面盒子的颜色，高度，宽度等
1. JavaScript (行为) 如：用户点击按钮，出现提交画面等

扩展：HTML,CSS,javaScript,通过与服务端进行网络协议的请求和响应构成了基础的前端技术服务栈

前端应该着手哪些方面？

1. 功能
1. 性能
1. 美观
1. 安全
1. 无障碍

思考：
你现实生活去做一道菜，你也需要从饱腹度，口味，色相，食品安全，工序不复杂去考虑，你可以一一对应，还是蛮相通的，都是有其抽象的框架存在

前端的边界？

1. Node.js 能够在服务器端运行 JavaScript 的开放源代码、跨平台执行环境。
1. Electron GitHub开发的一个开源框架，用于开发页面端应用桌面跨端技术
1. React Native 一个脸书研发的开放源码的应用程序架构，跨平台移动应用开发框架
1. WebRTC 一个支持网页浏览器进行实时语音对话或视频对话的API，实时通信技术
1. WebGL 不使用插件的情况下在任何兼容的网页浏览器中呈现交互式2D和3D图形[3]，游戏开发,通过canvans等进行图形渲染
1. WebASSEMBLY WebAssembly是便携式的抽象语法树 [2]，被设计来提供比JavaScript更快速的编译及执行[3]，可以通过rust 和C语言去运行跨端，高效，快速，可移植的技术

思考：
实际上就是各个领域你可以去挖掘的技术，成为其中一门技术领域的专家，将具有不会有35岁被裁员的危机

开发环境

浏览器

1. Chrome Blink内核
1. Firefox Gecko内核
1. Safari Webkit内核
1. IE/Edge Trident内核

编辑器

1. VSCode 一款由微软开发且跨平台的免费源代码编辑器
1. Vim 从vi发展出来的一个文本编辑器
1. WebStorm JetBrains公司旗下一款JavaScript 开发工具

什么是HTML?

全称是超文本标记语言：(HyperText Markup Language)

HTML是怎么样的？

下面就是 HTML 常见的代码

<!doctype htm1>  /* 表示浏览器的版本，不写!doctype 就是怪异模式进行渲染 */
<html> /* 根标签 */
    <head> /* 头部标签 */
        <meta charset="UTF-8"> /* meta元信息标签 charset表示选择字符集 */
        <title>页面标题</title>
    </head>
    <body> /* 主要内容书写的躯干标签 */
        <h1>一级标题</h1> /* 标题标签 */
        <p>段落内容</p> /* 段落标签 */
    </body>
</htmI>

HTML 常见语法

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

标题 h1 ~ h6

下面就是h1 ~ h6 的展示

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

微信截图_20230115113400.png

小总结：
通过上面的观察发现，h1 ~ h6 的字体大小和字体粗细逐渐减小，这就是 h1 ~ h6 最直观的表现;

ul、ol、li

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

微信截图_20230115114656.png

小总结：
通过上面发现呢，ul有序列表和ol和dl描述列表就是分为两个结构列表前缀和列表展示内容，三个各个展示自己的特点。

a、img、audio、video

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

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

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

微信截图_20230115115158.png

小总结：
通过以上观察发现，
点击a标签是进行链接跳转、
点击audio标签是播放音频、
点击video标签是播放视频

input 和 from 表单

/* input 的各种类型 */
<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>

微信截图_20230115115512.png

小总结：
通过以上观察发现；

input标签通过改变type的类型展示不同的输入形式，还有textarea文本域；

from表单也是通过包裹input标签去改变type去实现单选框，多选框,通过select标签的option标签去添加下拉框选项

datalist标签规定了 input 元素可能的选项列表。

blockquote(长引用)、cite(短引用)、pre(代码块)、em、strong

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

微信截图_20230115122136.png

小总结：
通过以上观察发现：

如果我们去去引用其他的文章可以使用blockquote长引用和cite短引用去包裹你想表达的文字，使用q让你的文字实现双引号包裹

如果你想去展示代码块可以使用pre标签code标签去结合展示

strong标签让包裹的字体加粗，em标签让字体倾斜

内容划分

微信截图_20230115123300.png

小总结：
通过以上观察发现：
文章就是对应的artcle,它翻译成中文就是文章，是不是感觉很违和，再看看其他的header头部，nav导航，aside侧边栏等等，这一现象，我们赋予它名称: 语义化

语义化是什么？

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

谁使用HTML

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

语义化的好处

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

看一下常见错误

Error demonstration：

<p style="font-size:32px">标题</p>

Correct presentation

<h1>标题</h1>

如何做到语义化?

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

总结：

本文章阐述了前端的历史、概念、依赖环境、依赖工具，HTML是概念，HTML常见语法，语义化的概念。
这些都是前端工程师需要去了解和掌握的，一方面是在工作熟练使用，另一方面是在面试中，对答如流；
如果你把这些代码的知识结合生活的小常识去抽象出来，你会发现这一切都很相似
最后感谢您能看到这里，你点赞收藏是我更新最大的动力！！！！

[前端与 HTML | 青训营笔记01]

背景