这是我参与「第五届青训营」伴学笔记创作活动的第1天
1、什么是前端？
（1）解决GUI人机交互问题
（2）跨终端
-
PC/移动浏览器 -
客户端小程序 -
（3）Web技术栈VR/AR等 -
前端技术栈：HTML（内容） CSS（样式） JavaScript（行为）
2、前端应关注完善的问题：功能、美观、无障碍、兼容性等。
3、HTML语法：
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如requid、readonly
4、HTML标题：
HTML 标题（Heading）是通过
<h1> - <h6>等标签进行定义的。
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
5、HTML 列表：
（1）无序列表：
无序列表始于 <ul> 标签。每个列表项始于 <li>。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
（2）有序列表：
有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
（3）定义列表：
自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
6、HTML 链接：
HTML 链接是通过<a>标签进行定义的。
<a href="http://www.mumian.com.cn">This is a link</a>
7、HTML段落：
HTML 段落是通过<p>标签进行定义的。
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
8、HTML 图像、音视频：
HTML 图像是通过<img>标签进行定义的。
<img src="mumian.jpg" width="104" height="142" />
HTML 音频是通过<audio>标签进行定义的。
<audio
src="mumian.ogg"
controls
><audio/>
HTML 视频是通过<video>标签进行定义的。
<video
src="mumian.mp4"
controls
><video/>
9、输入：
HTML 输入是通过<input>标签进行定义的。
<input placeholder="请输入用户名">
<input type="range">
<input type="number" min="1" max="10">
<input type="date" min="2023-01-15">
10、引用：
（1）用于长引用的 HTML <blockquote>，HTML <blockquote> 元素定义被引用的节。浏览器通常会对 <blockquote> 元素进行缩进处理。
<p>以下内容引用自 WWF 的网站：</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来，WWF 一直致力于保护自然界的未来。
世界领先的环保组织，WWF 工作于 100 个国家，
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>
（2）HTML <cite> 元素定义著作的标题。浏览器通常会以斜体显示<cite>元素。
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
（3）HTML <q> 用于短的引用，HTML <q> 元素定义短的引用。浏览器通常会为 <q> 元素包围引号。
<p>WWF 的目标是：<q>构建人与自然和谐共存的世界。</q></p>
