前端与 HTML

—韩广军

什么是前端？

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

前端技术栈

JavaScript (行为)

CSS (样式)

HTML (内容)

服务器端

网络协议

前端

前端应该关注哪些方面？

功能

安全

美观

兼容

性能

体验

无障碍

前端的边界？

WebASSEMBLY

开发环境

浏览器

编辑器

IE/Edge

Chrome

Firefox

Safari

VSCode

Vim

WebStorm

HTML

HTML 是什么？

HyperText    Markup  Language

图片

标题

链接

表格

<h1>文章标题</h1>
<img src="photo.jpg" />

属性名

属性值

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    <h1>一级标题</h1>
    <p>段落内容</p>
  </body>
</html>

DOM 树

HTML 语法

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

标题 h1 ~ h6

链接

输入

内容划分

语义化是什么？

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

谁在使用我们写的 HTML

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

语义化的好处

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

传达内容，而不是样式

<p style="font-size:32px">前端工程师的自我修养</p>
<h1>前端工程师的自我修养</h1>

如何做到语义化?

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

前端与HTML

By 前端小仙女 🧚‍♀️

Made with Slides.com

前端与HTML

前端与HTML

  • 1,581

More from 前端小仙女 🧚‍♀️