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

1.知识点要点

什么是前端
HTML

2.详细知识点

2.1 关于前端

[什么是前端]

解决GUI人机交互问题
跨终端
- PC/移动浏览器
- 客户端小程序
- VR/AR等
Web技术栈

[前端技术栈]

[关注方面]

[前端边界]

[开发环境]

2.2 HTML（HyperText Markup Language）

[Dom树]

[语法]

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

{标题h1-h6}

 <h1>Heading level 1</h1>                     
 <h2>Heading level 2</h2>
 <h3>Heading level 3</h3>
 <h4>Heading level 4</h4>
 <h5>Heading level 5</h5>
 <h6>Heading level 6</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>

效果：

{链接}

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

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

效果：

注意：target="_blank" 是将当前页面以新窗口打开

{图片、音频、视频}

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

效果：

注意： img 标签里面 alt属性是当鼠标指上去时，显示该图片的信息

{输入}

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

效果：

注意： datalist 标签当用户输入时，会给下拉选框中的提示。

{引用标签}

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

效果：

[内容划分]

语义化是什么

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

语义化的好处

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

【HTML传达的是内容，而不是样式】

如何做到语义化

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

3.个人总结

HTMl是前端入门最基本的，容易入门，也较为简单，但是要做到正确传达信息，就要朝着语义化的方向来编写代码，多看文档，多查，多实践。

4. 引用参考

引用青训营内部课程资料

5. 资源推荐

MDN 上的 HTML 参考，包含每个标签和属性的详细说明
- developer.mozilla.org/zh-CN/docs/…
最新版的 W3C HTML5 规范
- html.spec.whatwg.org/multipage/

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