前端与 HTML | 青训营笔记

看着掘金找手机
336 阅读3分钟

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

前端概述

什么是前端?

使用 HTML CSS JS 解决多端人机交互的问题

  1. pc/移动浏览器
  2. 客户端/小程序
  3. vr/ar等

Web技术栈

  1. HTML(内容)
  2. CSS(样式)
  3. JavaScript(行为)
  4. 网络协议

所需要关注的问题

image.png

前端的边界

image.png

  1. node.js 服务器端
  2. electron RN 客户端
  3. WebRTC 数据分享/视频会议
  4. WebGl 游戏
  5. WebASSEMBLY 浏览器运行其他语言的代码

开发环境

image.png

HTML (HyperText Markup Language)

  • HyperText:
    1. 图片
    2. 标题
    3. 连接
    4. 表格
    5. 等更丰富的文字
  • Markup Language
    • 用一对开始和结束标签标记一段文本
    • 当然也存在 img 这种自闭合的标签(或者说不需要再嵌套内容)
    • 可以在标签上添加属性
    • 例子:image.png

.html 文件

1. <!doctype html>

浏览器本身分为两种模式:

  1. 是标准模式
  2. 是怪异模式

浏览器通过doctype来区分这两种模式, doctype在html中的作用就是触发浏览器的标准模式，如果html中省略了doctype，浏览器就会进入到Quirks模式的怪异状态，在这种模式下，有些样式会和标准模式存在差异，而html标准和dom标准值规定了标准模式下的行为，没有对怪异模式做出规定，因此不同浏览器在怪异模式下的处理也是不同的 所以一定要在html开头使用doctype。

2. 根元素

<html></html>

表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。所有其他元素必须是此元素的后代。

3. <head>标签

放置此页面的元数据

元数据: 此页面需要但是不需要被直接呈现给用户的数据

什么是 HTML <head> 标签

4. <body> 元素

包裹需要被呈现给用户的内容

html 语法

  1. 标签和属性不区分大小写, 但是推荐小写(vue,react的组件名一般大写第一个字母)
  2. 空标签可以不闭合(input, meta)<input type="checkbox">
  3. 属性值推荐用 双引号 包裹
  4. 某些属性值可以忽略(required, readonly)

页面内容划分

image.png

HTML 语义化

为什么要删除许多标签并添加许多标签?

  • 语义:
    • HTML中的元素, 属性, 属性值都拥有某些含义
    • 开发者应该去遵循语义去编写HTML

为什么要遵循语义?

谁在使用HTML

  1. 开发者 -修改, 维护代码
    • 方便开发者后续的阅读 / 维护
  2. 浏览器
    • 浏览器会根据你所写的标签去进行页面展示
  3. 搜索引擎
    • 搜索引擎会抓取HTML,提取关键字, 对其进行排序(对搜索引擎优化友好)
  4. 屏幕阅读器
    • 给盲人展示页面时更友好

如何做到语义化?

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

HTML传达内容而非样式

这里使用h1标签更好

image.png

avatar
文章
阅读
粉丝