第六届360前端星计划_HTML与前端

主讲人

1. 赵文博
2. 360前端技术专家
3. 奇舞团

一、什么是前端

1. 解决GUI人机交互问题

• 跨终端
• PC/移动浏览器
• 客户端

2. VR/AR等
3. Web技术栈

二、前端技术栈

• JavaScript（行为）
• CSS（样式）
• HTML（内容）
  JavaScript、CSS、HTML运行在浏览器中，通过http协议与服务器端通信，获取前端代码渲染页面，浏览器也可以把用户填写的内容通过HTTP协议，提交到服务器。

三、前端应该关注哪些方面？

• 功能（核心）：是否满足用户需求。
• 美观
• 无障碍性
• 安全（重要）
• 性能：加载速度是否快，动画是否流畅
• 兼容性：不同浏览器、平台
• 体验（重要）
  前端掌握技能列表
  

四、前端的边界

• node.js：开发服务器端应用
• ELECTRON、React Native ：开发客户端应用
• WebRTC：P2P数据传输，开发多人视频会议
• WebGL：大型3D游戏
• WEBASSEMBLY：把C++或其他语言编译成浏览器可以运行的程序。

五、开发环境

1. 浏览器：IE / Edge、Chrome、Firefox、Safari
2. 编辑器：VS Code（推荐）、Atom、Vim、WebStorm

六、HTML是什么

HyperText（超文本） Markup Language（标记语言）
超文本：可包括图片、标题、链接、表格等。
标记：

Hello World
：开始标签
Hello World：标签内容
：结束标签

"photo.jpg" />
src：属性名
"photo.jpg"：属性值

完整的HTML代码解析：

      		   /*指明HTML版本和渲染模式 */
               		   /* 根(Root)标签*/
               		   /* 包含元数据 */
    "UTF-8">     /*页面编码 */
         /*页面标题 */
  
                  	  /*包含页面内容 */
    
一级标题
    
段落内容
  

运行效果：

HTML解析：
DOM树

七、HTML 语法

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

1. 标题标签：h1~ h6
2. 列表
   1）有序列表：ol，列表项：li
   2）无序列表：ul，列表项：li
   3）定义列表：dl，列表项：dt：描述标题 ，dd：描述文本（dt和dd并不是一一对应的）
3. 链接（a标签）
   href：链接点击之后跳转的url。
   target：链接的打开方式。默认：当前页面打开，target="_blank"：新窗口打开。
4. 图片：img标签。
5. 音频：audio标签，添加属性controls，浏览器会渲染一个默认UI。
6. 视频：video标签，添加属性controls，浏览器会渲染一个默认UI。
7. 输入：input标签，type属性设置输入类型，默认为text（文本），其中range：从范围中选择一个数值，number：输入数字，data：日期输入框，checkbox：多选框，radio：单选框。
8. 多行文本：textarea标签。
9. 下拉选择框：select标签。
10. 可输入的下拉选择框：

"countries">

11. 文本标签

1）blockquote标签：长引用，一般用来引用一段话。

"http://t.cn/RfjKO0F">
  
天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长
    的民众产生、长育出来的，所以没有 这种民众，就没有天才。

2）cite标签：短引用，一般用来引用作品名字或者章节。

我最喜欢的一本书是小王子。

3）q标签：前文提到过的内容再次描述时使用。

在第一章，我们讲过字符串是不可变量。

4）code标签：代码。

const声明创建一个只读的常量。

5）pre标签：多行代码。

const add = (a, b) => a + b;
const multiply = (a, b) => a * b;

6）strong标签：强调作用，表示重要紧急。

在投资之前，一定要做风险评估。

7）em标签：强调作用。

Cats are cute animals.

12. 内容划分
    1）header：页面头部，logo、nav。
    2）main：页面主体，文章。
    3）aside：侧边栏，不属于页面正文，广告。
    4）footer：底部，参考链接、版权信息。

八、语义化

1. 语义化是什么？

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

2. 谁在使用我们写的 HTML

• 开发者 - 修改、维护页面
• 浏览器 - 展示页面
• 搜索引擎 - ​​​​​提取关键词、排序
• 屏幕阅读器 - 给盲人读页面内容

3. 语义化的好处

• 代码可读性 - 开发者
• 可维护性 - 开发者
• 搜索引擎优化 - 搜索引擎
• 提升无障碍性 - 盲人

传达内容，而不是样式
例：标题不应该使用p标签

前端工程师的自我修养

应该使用h1标签

前端工程师的自我修养

4. 如何做到语义化

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