前端与 HTML | 青训营笔记

SunACong
503 阅读2分钟
  • 这是我参与「第五届青训营 」伴学笔记创作活动的第1天

前端是什么

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

    前端工程师利用Web技术栈，来解决多端的图形人机交互的问题

技术栈

  • HTML 内容
  • CSS 样式
  • JavaSCript 行为

image.png

前端边界

image.png

开发环境

image.png

HTML（HyperText Markup Language）

  • 标签
  • 属性——属性值

HTML语法

  • HTML语法
    • 标签属性不区分大小写，建议小写（现在Vue React自定义组件使用大写标签）
    • 空标签可以不闭合
    • 属性值推荐双引号包裹
    • 某些属性值可以省略比如required，readonly

Dom树

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>页面标题</title>
</head>
<body>
 <h1>一级标题</h1>
 <span>一级标题</span>
</body>
</html>

image.png

常用标签

  • 标题 h1~h6
  • 列表
    • ol-li 有序列表
    • ul-li无序列表
    • dl dt-dd 定义列表 key和value形式
  • 链接 a
    • 重要属性 href
    • target 链接打开的形式
  • 图片 img
    • src
    • alt 图片加载不出来显示
  • 视频 audio
    • src
    • controls 自动添加视频控件
  • 视频 video
    • src
    • controls
  • 输入
    • input
      • placeholder 占位提示符
      • type （range number（min max）radio checkbox）
      • date （min max）
      • list 可以提示用户部分信息
    • textarea
  • 下拉选择
    • select标签
      • option 选项
  • 引用
    • blockquote 长引用
      • cite 来源
    • cite 短引用
    • q 之前讲过的段引用
  • 代码
    • code
    • code pre 字体可能与其他文本不一样
  • 强调
    • strong 重要紧急
    • em 语气重要

页面内容划分

image.png

HTML语义化

  • HTML中的元素，属性以及属性值都拥有某些含义
  • 要遵循语义来编写HTML

哪些角色在使用我们的HTML

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

如何去做

  • 了解标签和语义含义
  • 思考适合的标签描述
  • 不使用可视化工具生成代码
avatar
文章
阅读
粉丝