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

一、本堂课重点内容

前端是什么
HTML基础知识和常用标签
HTML使用标签的原则

二、详细知识点介绍

什么是前端

解决 GUI人机交互问题
跨终端

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

Web 技术栈

前端工程师就是利用Web技术栈解决多段图形界面交互的工程师

前端技术栈

HTML：负责页面结构、内容
CSS：负责页面样式
JavaScript：负责网络行为

上面这三个构成了前端基础技术栈，与后端服务器通过协议进行交互

前端需要解决的问题

功能：有没有满足用户某些需求
美观：页面是否符合主流审美
无障碍：色盲、色弱、盲人等，或者正常人在非正常环境能否正常访问交互（比如说太阳光直射、晃动的车厢）
安全：数据泄露等
性能：动画是否流畅等
兼容性：电脑、手机是否都能正常显示页面
体验：因为用户的印象是前端给的

发展现状

现在前端不仅可以写传统的网络页面，还可以做服务器、客户端、P2P等等

开发环境的话最简单只需要一个记事本一个浏览器，使用IDE则能提高开发效率

HTML

全称HyperText Markup Language。HyperText意思是超文本，意味着html不仅可以展示文字，还可以展示图片、影音等等；Markup Language指的是HTML语言都是由类似<p></p>这种标签组成。

可以在标签上设置属性，比如下图中的src属性。如果标签内部不需要有其他内容，那么可以简写标签。

HTML语法

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

常用标签

标题

h1~h6，用来表示标题，浏览器默认会有大小粗细的样式变化

列表

有序列表
1. 包裹每一个单元
2. 无序列表
  - 包裹每一个单元
  - 自定义列表
    ，里面是类似键值对的关系，
    代表键，
    代表值
  链接
  
  标签为<a>，来源是anchor
  
  多媒体
  - 图像
  - 视频
  - 音频
  输入
  - 短文本输入<input>，可以添加placeholder属性来显示默认文本
  - 显示一个滑动区间的输入<input type="range">
  - 输入一个范围内的数值，<input type="number" min="1" max ="10">
  - 输入一个日期，<input type="date" min="2018-02-10">
  - 输入长文本<textarea>
  选择
  - 复选<input type="checkbox">
  - 单选<input type="radio" name="xxx">通过name属性来实现选项的互斥
  - 下拉框选择，<select>包着很多个<option>
  - 输入框，但是可以下拉给你快捷输入，<datalist>包着很多<option>
  文本引用
  - 长段引用<blockquote>
  - 短引用<cite>，一般包裹著作名称
  - 短引用<q>，一般包裹具体的引用内容
  - 代码引用<code>
  - 加粗引用<strong>，偏重文本的强调
  - 加粗引用<em>，偏重语气的强调
  功能区划分
  
  使用标签的原则
  
  语义化，语义化，还是语义化
  
  要表达内容，而不是表达样式
  
  什么是语义化
  - HTML中的元素、属性及属性值都拥有某些含义。
  - 开发者应该遵循语义来编写HTML
  - - 有序列表用 ol;
    - 无序列表用 ul
    - lang 属性表示内容所使用的语言
  为什么要语义化
  
  首先要明确谁在用HTML
  - 开发者 - 修改、维护页面
  - 浏览器- 展示页面
  - 搜索引擎 - 提取关键词、排序
  - 屏幕阅读器- 给盲人读页面内容
  语义化的好处
  - 代码可读性
  - 可维护性
  - 搜索引擎优化
  - 提升无障碍性
  如何做到语义化
  - 了解每个标签和属性的含义
  - 思考什么标签最适合描述这个内容
  - 不使用可视化工具生成代码
  三、实践练习例子
```
<!doctype html>
<htmI>
  <head>
    <meta charset="UTF-8“>
    <title>页面标题</title>
  </head>
  <body>
      <h1>一级标题</h1>
      <p>段落内容</p>
  </body>
</htmI>
```
  页面展示的效果如下
  
  四、课后个人总结：
  
  多用，用多了自然就熟了
  
  五、引用参考：
  
  无

前端与 HTML ｜ 青训营笔记

一、本堂课重点内容

二、详细知识点介绍

什么是前端

前端技术栈

前端需要解决的问题

发展现状

HTML

HTML语法

常用标签

标题

列表

链接

多媒体

输入

选择

文本引用

功能区划分

使用标签的原则

什么是语义化

为什么要语义化

如何做到语义化

三、实践练习例子

四、课后个人总结：

五、引用参考：

前端与 HTML ｜青训营笔记