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

1.前端与HTML

1.1什么是前端？

• 解决GUI人机交互问题

• 跨越端

  • PC/移动浏览器
  • 客户端/小程序
  • VR/AR等

• WEB技术栈

1.2 前端应该关注哪些方面？

1. 美观
2. 功能
3. 无障碍
4. 安全
5. 性能
6. 兼容
7. 体验

1.3 前端的边界

1.4 开发环境

1.5 HTML 是什么？

1.5.1 HyperText Markup Language

1.5.2 Dom树

1.5.3 HTML语法

• 标签和属性不区分大小写，推荐小写
• 空标签可以不闭合，比如input 、meta
• 属性值推荐用双引号包裹
• 某些属性值可以省略，比如required、readonly（其属性的结果为boolean 默认为true 可以省略）

1.5.4 标题h1-h6

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

1.5.5 列表

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

世界电影票房排行榜

1. 阿凡达
2. 泰坦尼克号
3. 复仇者联盟

购物清单

• 🍇
• 🍉
• 🍎

霸王别姬

导演：

陈凯歌

主演：

张国荣

张丰毅

巩俐

上映日期：

1993-01-01

1.5.6 链接

• 图片链接

<img
  src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc5a2e7eef0f46c6b57ccc83b9714797~tplv-k3u1fbpfcp-zoom-1.image"
  alt="Metal movable type"
  width="400"
/>

• 音频链接

<audio 
src="https://music.163.com/song/media/outer/url?id=29023577.mp3"
  controls></audio>

• 视频链接

<video
  src="https://prod-streaming-video-msn-com.akamaized.net/3f6ca508-598d-4cbd-a3e2-43deea7bc377/b60c553e-9f3f-4164-8850-700a9a73a899.mp4"
  controls
></video>

• 输入框

<input placeholder="请输入用户名">
<input type="range">
<input type="number" min="1" max="10">
<input type="date" min="2020-02-10">
<textarea>Hey</textarea>

1.6 语义化

1.6.1 什么是语义化

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

1.6.2 谁在使用我们的HTML语言

1. 开发者修改、维护页面。
2. 浏览器展示页面。
3. 搜索引擎提取关键字、排序。
4. 屏幕阅读器给盲人阅读内容。

1.6.3 语义化的好处

1. 代码可读性
2. 可维护性
3. 搜索引擎优化
4. 提供无障碍性

1.6.4 如何实现语义化

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