前端与 HTML ｜ 青训营笔记

努力就是为了拽
143 阅读6分钟

1 前端与 HTML

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

简介

本节课围绕以下两个基本问题展开：
（一）前端要解决的基本问题
简要介绍前端是什么、要解决的基本问题和技术栈等，层层解析前端技术栈的构成。
（二）什么是 HTML
HTML 的概念（什么是HTML）、语义化和常用的 HTML 标签。
作为前端最为基础的技术 - HTML 基础语法和基本功能，在实际研发过程中如何做到 HTML 语义化？
▲ 了解HTML高效的编写规则

课程重点

1.1 前端工作的定义
1.2 前端技术栈拆解与分析
1.3 HTML 作用解析
1.4 HTML 语义化

课前阅读预习

初步了解 HTML 基础知识：
MDN文档 「 HTML 介绍 」 HTML 简介 - 学习 Web 开发 | MDN (mozilla.org)

课后阅读材料

MDN 上的 HTML 参考，包含每个标签和属性的详细说明：
HTML elements reference - HTML: HyperText Markup Language | MDN (mozilla.org)

最新版的 W3C HTML5 规范：
HTML Standard (whatwg.org)

一、前端

（一）什么是前端

三个要点：

什么是前端

总结：前端工程师使用Web技术栈（HTML+CSS+JavaScript+HTTPS协议）解决多端人机交互问题

（二）前端技术栈

前端技术栈

  1. HTML：页面\结构\内容
  2. CSS：样式设置（位置\颜色\大小）
  3. JavaScript：定义网页行为 响应点击等用户操作输入
    【以上均于浏览器中运行】
  4. 网络协议（HTTP\WebSocket）：浏览器通过HTTP协议与服务器端进行通信

（三）关注方面

关注方面

  • 无障碍性（Accessibility）：不仅限于残疾人用户群体，考虑多种访问情况
    对所有人均可用（例如色盲症用户）
    考虑多种场景下由于各种原因限制，访问条件不佳（网络/设备）

e.g. 图片信息加载失败，需要具备替代性文本传达图片含义
e.g. 访问页面时按钮/字体极小，于户外运动状态下点击准确性
e.g. 页面颜色对比度于室内可见度高，而于太阳光极强的情况可否正常阅读

  • 性能：开发网站运行速度快、动画流畅、用户体验良好
  • 兼容性：网页可于各种设备上使用

【前端决定绝大程度的用户体验】

（四）边界

边界

  • Node.js 开发服务器端应用
  • ELECTRON \ RN(React Native) 开发客户端应用
  • Web RTC 进行P2P在线传输 实现多人会议
  • WebGL 开发流畅3D游戏
  • WebASSEMBLY 将C++ \ Rust等其他语言编写的代码编译为直接于浏览器运行的代码

【前端领域于互联网行业发展迅速-技术更迭 需要持续学习 入门门槛低 易上手】

（五）开发环境

开发环境

二、HTML

（一）HTML是什么？

超文本标记语言 ( HyperText Markup Language )

HTML是什么？ <...>...</...>为一个标签

（二）代码结构

代码结构 可省略</img>结束标签 于开始标签后直接写/ 即<.../>

<!doctype html>
<!-- 标记当前使用HTML文件对应HTML版本 决定浏览器的页面渲染方式 -->
<!-- 若不写则可能导致页面展示效果不理想 -->
<html>
    <head>
        <meta charset="UTF-8">
        <!-- 页面使用编码类型 -->
        <title>页面标题</title>
    </head>
    <body>
    <h1>一级标题</h1>
    <p>段落内容</p>
    </body>
</html>

代码运行

（三）DOM树

浏览器将HTML代码解析为DOM树（树形结构）
其中每个结点则称为DOM结点 DOM树

（四）HTML语法

React\Vue实际应用中 大写表示自定义组件 小写表示原生组件
若某些属性值为true 则通常情况下可省略（required = true → required） HTML语法

标题 h1-h6

head

列表

列表项使用 list item 表示

  1. 有序列表 ordered list
  2. 无序列表 unordered list
  3. 定义列表 definition list（Key-Value形式：属性名-属性值）
    dt为列表标题 definition title
    dd为具体描述 definition description
    dt与dd为多对多的关系（多个dt同可对应一个dd）

list

链接

链接由<a>标签表示 起源于anchor锚 因常用仅保留1个字母
其最重要的属性即超链接引用地址href(Hyper Reference)

<a href="https://www.bytedance.com/">
  字节跳动官网
</a>

<a href="https://www.bytedance.com/" target="_blank">
<!-- _blank表示以新标签窗口打开的样式，而不为替换原有页面 -->
  字节跳动官网
</a>

除上方链接，可插入多媒体（图片、音频、视频） 链接link <img>的alt属性(alternative text替代性文本)：避免用户浏览器省流量模式-不加载图片
无法展示图片内容 以降级方式传达图片表达信息
controls表示音频需要显示浏览器默认的播放控件

输入
1.提供交互控件（输入-例如表单类）

输入input-1 placeholder表示占位符：用户未输入时显示
textarea：输入多行文字 且默认可调整大小
（用户输入后如何处理提交数据——JS相关课程）

2.提供交互控件（选择）

输入input-2 name属性实现互斥关系（相同type的多个选项若name相同则仅选择其中一个）
<select> 表示多选项的下拉选择栏
<input list=''>在用户输入时提供提示选项 辅助其进行快捷输入 BUT本质同为input 不限制自由输入

3.文本类标签

输入input-3 <blockquote> 块级/长引用（cite属性表示引用内容来源）
<cite> 短引用 [常表示引用书\作品名OR章节标题]
<q>：表示已提及内容
<code>或<pre><code>：使用等宽字体（特殊编程字体）
<strong>：强调-突出内容重要\含义紧急性
<em>：强调-更倾向于语气强调\重读重音词（针对问题对应的重点 例如-“猫是否为可爱的动物？”）

（五）内容划分

经典的页面布局结构：
header标签 —— 页头（头部信息-LOGO） 【不同于head标签 head仅为页面源数据】
nav标签 —— 导航信息

main标签 —— 页面主体内容
article标签（可无/可多个） —— 文章正文

aside标签 —— 不直接属于页面的相关内容（新闻的广告\热点文章推荐）

footer标签 —— 页尾（参考链接\版权\备案信息）

页面内容的整体划分.png

【总结】其余HTML5标签于其规范文档自行查阅

（六）语义化——遵循原则

（1）语义化是什么？

语义化1.png Chrome浏览器自动翻译功能识别HTML语言 —— 可能不准确
可定义HTML语言中的lang属性表示页面内容语言

（2）谁在使用我们写的HTML（为什么使用语义化？）

不规范：使用<div>或<span>代替<h3> 不利于团队/协作工作者维护
众多搜索引擎将抓取HTML页面，对HTML进行关键词提取、建立索引与排序（考虑出现次数，不同标签具备不同权重/优先级的相关性）
语义化2.png

（3）语义化的好处

规范编写HTML意义：保证易读性、无障碍性等，考虑服务于多种用户与场景
语义化3.png

（4）HTML总体原则：清晰表达内容与结构

使用标签传达其信息，而非仅调整样式（字体大小） 语义化4.png

（5）如何做到语义化？

推荐阅读：

  • MDN文档
  • W3C的HTML5规范（不为W3C School）[相对冗长]
    可视化工具生成代码不可控制其生成HTML标签 BUT可使用编译器插件进行辅助
    语义化5.png
avatar
文章
阅读
粉丝