这是我参与「第四届青训营 」笔记创作活动的的第1天
什么是前端？
前端工程师是使用web技术栈解决多端图形用户界面交互的功能的工程师
前端技术栈
分为三层
前端应该关注哪些方面？
功能、美观、无障碍、安全、性能、兼容、体验
前端的边界
开发环境
什么是HTML？
HyperText(超文本：图片、标题、链接、表格) Markup Language（标记语言）
使用一些标签和标签的属性表示内容
<!doctype html>（浏览器选择某种语言版本对页面进行渲染）
从html代码解析出dom树
HTML语法
HTML（超文本标记语言） | MDN (mozilla.org)
主要语法大纲演示
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>这是1号标题</h1>
<h1>这是文本</h1>
<font size="6">这是6号字体文本</font>
<font size="5">这是5号字体文本</font>
<font size="4">这是4号字体文本</font>
<font size="3">这是3号字体文本</font>
<font size="2">这是2号字体文本</font>
<font size="1">这是1号字体文本</font>
<h2>这是2号标题</h2>
<h2>这是列表</h2>
<p>世界电影票房排行榜（有序列表）</p>
<ol>
<li>阿凡达</li>
<li>泰坦尼克号</li>
<li>复仇者联盟</li>
</ol>
<p>购物清单（无序列表）</p>
<ul>
<li>🍇</li>
<li>🍉</li>
<li>🍎</li>
</ul>
<p>霸王别姬（清单列表）</p>
<dl>
<dt>导演：</dt>
<dd>陈凯歌</dd>
<dt>主演：</dt>
<dd>张国荣</dd>
<dd>张丰毅</dd>
<dd>巩俐</dd>
<dt>上映日期：</dt>
<dd>1993-01-01</dd>
</dl>
<h3>这是3号标题</h3>
<h3>这是链接</h3>
<P>标签页链接</P>
<a href="https://www.bytedance.com/">
字节跳动官网（替换当前标签页）
</a>
<br>
<a href="https://www.bytedance.com/" target="_blank">
字节跳动官网（新打开标签页）
</a>
<P>多媒体标签链接</P>
<p><img
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg"
-- 替代文本 --
alt="Metal movable type"
width="400"
></img></p>
<p><audio
src="/assets/music.ogg"
-- 默认显示播放控件进度条 --
controls
></audio></p>
<p><video
src="/assets/video.mp4"
-- 默认显示播放控件进度条 --
controls
></video></p>
<h4>这是4号标题</h4>
<h4>这是输入和选择</h4>
<p><input placeholder="请输入用户名"></p>
<p><input type="range"></p>
<p><input type="number" min="1" max="10"></p>
<p><input type="date" min="2018-02-10"></p>
<p><textarea>Hey</textarea></p>
<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>
<P>
<input list="countries" />
<datalist id="countries">
<option>Greece</option>
<option>United Kingdom</option>
<option>United States</option>
</datalist>
</p>
<h5>这是5号标题</h5>
<h5>这是引用</h5>
<!-- blockquote长引用 -->
<blockquote cite="http://t.cn/RfjKO0F">
<p>天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长的民众产生、长育出来的，所以没有 这种民众，就没有天才。</p>
</blockquote>
<!-- cite短引用（特殊名词） -->
<p>我最喜欢的一本书是<cite>小王子</cite>。</p>
<!-- q具体特定内容短引用 -->
<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>
<h6>这是6号标题</h6>
</body>
</html>
内容划分
HTML语义化
HTML中的元素、属性及属性值都拥有特定含义，开发者应该遵循语义来编写HTML
语义化的好处：代码可读性、可维护性、搜索引擎优化、提升无障碍性
HTML是传达内容而不是样式，所以做到语义化需做到
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
