前端与HTML ｜ 青训营笔记

用户8554144141688
85 阅读3分钟

前端与HTML ｜ 青训营笔记

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

1. 什么是HTML？

  • 解决 GUI（图形用户界面）人机交互问题。 无论是PC端浏览器、移动浏览器、APP、小程序、VR设备等等，使用的技术栈都是HTML、CSS、JavaScript、HTTP网络协议来解决人机交互的问题。

  • 跨终端

    • PC / 移动浏览器
    • 客户端 / 小程序
    • VR / AR 等

  • Web技术栈

总结：前端工程师使用Web技术栈来解决多种终端图形用户界面下的人机交互问题。

2. 前端技术栈

HTML负责页面结构内容，页面中可以使用CSS来设计样式（位置、大小、颜色等），JavaScript定义网页的行为（点了按钮后，页面有什么样的响应），都运行在浏览器中，浏览器通过HTTP协议和服务器通信，把前端的代码渲染成我们看到的页面，浏览器也可以把用户的行为通过通过HTTP协议提交到服务器端。

  • HTML（内容）
  • CSS（样式）
  • JavaScript（行为）
  • 网络协议（如：HTTP协议） image.png

3. 前端应该关注的方面

  • 功能 <核心要关注的>
  • 美观
  • 无障碍
  • 安全
  • 性能
  • 兼容性
  • 体验 image.png

4. 前端的边界

技术不断迭代发展更新，持续学习……

  • Node.js：服务器端应用
  • ELECTRON、React Native：客户端应用
  • WebRTC：在线传输（多人会议）
  • WebGL：3D游戏
  • WebASSEMBLY：使C++/Rust等语言成为可以直接在浏览器运行的代码

5、前端的开发环境

image.png

6、什么是 HTML

HyperText（超文本）：不仅是纯文字，还包含图片、标题、链接、表格丰富的格式

Markup Language（标记语言）：用成对儿出现的开始标签和结束标签来表示，如：<h1>文章标题</h1>

HTML页面基本结构：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  <head>
  <body></body>
</html>
  • <!doctype html>：文档声明，位于页面的首行，告知浏览器使用哪种HTML版本规范方式解析网页，使网页能正常显示。
  • <html>：HTML 页面的根元素。<html>中又分为两小部分，第一部分为head模块，第二部分为body模块。
  • <head>：包含了meta标签，提供了有关页面的元信息，比如针对搜索引擎的关键字、缓存时间、启用浏览器内核等等。
  • <title>：网页的标题。
  • <body>：可见的页面内容，HTML的主体，网页的文本、超链接、图像、表格、视频等所有在网页上显示的内容都在这里。
  • <h1>：一级标题
  • <p>：段落内容

DOM树

  • 浏览器将HTML解析成树形的数据结构，简称DOM。树的每个节点表示一个HTML标签。浏览器通过解析HTML结构就会得到如下图所示的一个DOM树，然后再将其渲染。

image.png

7、HTML 语法

  • 标签和属性不区分大小写，推荐使用小写

  • 空标签可以不闭合，如 input、meta

  • 属性值推荐用双引号包裹

  • 某些属性值可以省略，比如 required、readonly 所以感觉HTML的元素就像在层层嵌套包含，就像一个容器一样，

  • 标题 h1-h6

h1表示一级标题（字体最大的），h6是字体最小的标题，1-6依次减小的。

  • 列表

有序列表：<ol> 无序列表：<ul> 定义列表：<dl>

8、语义化是什么

  • HTML 中的元素、属性及属性值都拥有某些含义

  • 开发者应该遵循语义来编写HTML

    • 有序列表用ol；无序列表用ul
    • lang属性表示内容所使用的语言

9、谁在使用我们写的 HTML

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

10、语义化的好处

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

11、如何做到语义化？

传达内容，而不是样式

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