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

Day1 前端与HTML

本堂课重点内容：

• 前端发展的趋势，以及其生态和发展方向
• html的一些基本常用标签以及一些语义化标签的使用和作用等。
• 前端人员所面临的一些工作要素以及在开发时所运用到的工具。

前端解决的问题以及技术

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

前端追求方向

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

主流前端技术用途

• Node.js：服务器后端编程
• WebGL：3D游戏开发
• ReactNative：以js为主原生框架

HTML常用标签

• !DOCTYPE 文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面.
• 标题标签 <h1> - <h6>
• <p>标签用于定义段落，它可以将整个网页分为若干个段落。
• 某段文本强制换行显示，就需要使用换行标签 <br/>
• 文本格式化标签 - <strong>加粗</strong>、<em>倾斜</em>、<u>下划线</u>
• 图片标签 <img> 标签用于定义 HTML 页面中的图像。
• 链接标签 <a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
• <ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。
• <ol>标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项。
• <dl> 标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用。
• 表单控件 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。
• 语义化标签：
  • <header> 头部标签
  • <nav> 导航标签
  • <article> 内容标签
  • <section> 定义文档某个区域
  • <aside> 侧边栏标签
  • <footer> 尾部标签
• 多媒体标签分：音频 audio 和视频 video 两个标签

实现语义化

1. 了解每个标签和属性的含义
2. 思考什么标签最适合什么内容
3. 不适用低代码工具，是前端人员的准则

查阅文档

经常查阅文档是一个非常好的学习习惯。 推荐的网址：

• W3C : www.w3school.com.cn/
• MDN: developer.mozilla.org/zh-CN/