【前端与HTML | 青训营笔记】

hgf
38 阅读1分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第1天
本节课讲的是前端与HTML，以下是我的心得体会：

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

  1. 前端技术栈拆解与分析 image.png

  2. HTML 作用解析
    (1)html是什么： HyperText Markup Language
    HyperText超文本：图片、标题、链接、表格
    Markup Language标记语言

(2)基础网页结构

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

(3)DOM树 image.png

(4)HTML语法

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

(5)在给予用户进行选择时，多选可以用input type="checkbox"(多选时用name来划分类型，即同一类型可以选择多个)，单选可以用input type="radio"

(6)在一段话中如果需要引用某个名词，可以使用cite标签。如：引用的名词

  1. HTML 语义化
    (1)语义化是什么？
  • HTML中的元素、属性及属性值都拥有某些含义
  • 开发者应该遵循语义来编写HTML
    • 有序列表用 ol;无序列表用 ul
    • lang 属性表示内容所使用的语言

(2)为什么要语义化？

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

(3)如何做到语义化？

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