DAY1 前端与HTML | 青训营笔记

猴子超多肉
82 阅读1分钟

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

1.概述

什么是前端？

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

前端技术栈

  • HTML（内容）、CSS（样式）
颜色、大小、位置
  • JavaScript（行为）

1.png

前端关注的哪些方面？

美观、安全、兼容、功能、体验、性能、无障碍。

2.HTML

HTML是什么？

HyperText Markup Language：即超文本标记语言

 超文本可以包括图片、标题、链接、表格等内容
 使用的是标记语言

5.png 例子：

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

DOM树

浏览器根据代码会解析出一个DOM树

7.png

HTML语法

  • 标签和属性不区分大小写，推荐小写，自定义的标签用大写
  • HTML 标签通常是成对出现的，比如 <b></b>
  • 空标签可以不闭合，比如input、meta
  • 属性值推荐用双引号包裹
  • 有些属性有默认属性值像是input标签的required属性是一个Boolean值
  • 某些属性值可以省略，比如required、readonly

内容划分

如图所示

3501.png

语义化

什么是语义化？

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

语义化的好处

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

如何做到语义化？

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