前言

最近面试了很多前端,从应届生小白到三年经验的老炮,大家好像都很“看不起”面试被问 HTML 问题这回事。前端虽然真的很基础,但是它真的也需要被重视。

所以我打算系统的整理一下前端所需要的知识,本文为 HTML 相关内容,后续还会有 JavaScript、CSS、框架、工程化、Node等。

正文

什么是 HTML

HTML 指的是超文本标记语言,不是编程语言,是标记语言。使用标签来描述网页内容。

什么是语义化

通过 HTML 语义化标签来表明其内部内容的意义。

好处有:

  • 有利于 SEO、爬虫
  • 代码可读性更高
  • 访问性更好

语义标签(元素):

标签 描述
<article> 定义文章
<aside> 定义页面内容以外的内容
<details> 定义用户能够查看或隐藏的额外细节
<figure> 规定自包含内容,比如图示、图表、照片、代码清单等
<figcaption> 定义 <figure> 元素的标题
<footer> 定义文档或节的页脚
<header> 规定文档或节的页眉
<main> 规定文档的主内容
<mark> 定义重要的或强调的文本
<nav> 定义导航链接
<section> 定义文档中的节
<summary> 定义 <details> 元素的可见标题
<time> 定义日期/时间

HTML 元素

HTML 属性

HTML 元素一般被分为块级元素和内联元素。块级元素显示的时候会换行,内联元素不换行。

类 (class) 与 id

class

对 HTML 元素进行分类,可以为相同的类设置同样的样式。

id

id 指定 HTML 元素的唯一 id,在 HTML 文档中必须唯一。

<head>: 所有头部元素的容器。

头部元素有:

标签 描述
<title> 定义文档标题
<base> 定义页面上所有链接的默认地址或默认目标
<link> 引用外部资源
<meta> 定义关于 HTML 文档的元数据
<script> 引用或者定义 js
<style> 定义文档的样式信息

Canvas

HTML5 的 canvas 元素使用 js 在网页上绘制图像。canvas 元素本身是没有绘图能力的,所有的绘制工作必须在 js 内部完成。

HTML 媒体(视频、音频)

HTML5

HTML5 是最新的 HTML 标准。

本地存储

web 应用程序能够在用户浏览器中对数据进行本地的存储(localStorage & sessionStorage)。

必须在 同源(同域名、同端口、同协议)下才能读取修改,sessionStorage 还需要在同窗口。

localStorage 永久有效,不清空的话一直存在;sessionStorage 关闭窗口会被清空。

都采用标准的键值对存储,键必须唯一。

大小都是 5M.