前端 & html

什么是前端

使用前端技术栈，实现人机界面交互和设计界面的工程师；

前端技术栈

HTML

HTML是什么

基本语法

标签

head标签

• title

  • 标题，全局唯一，显示在最上方标签页处

• base

  • 向页面所以相对URL提供前缀
  • 全局唯一，不建议使用

• meta

  • 通常是约定好的键值对
  • 例如charset、http-equiv

• link

  • rel决定类型，href决定引入地址

• script

  • type指定MIME类型
  • 可内嵌代码，可外链文件

body标签

这边以一个类似元素周期表的样式来体现各种不同的body标签，其中包含了大量html5中所推出的语义性标签，具体作用就先不作赘述了。

ARIA属性

aria 英文全称：Accessible Rich Internet Application，翻译成中文就是：可访问的富互联网应用程序。其实它是一组属性，定义了使残疾人更容易访问 web 内容和 web 应用程序（尤其是使用JavaScript开发的应用程序）的方法。

这类属性的作用是为了增强网页在残障辅助阅读设备上的识别读取。aria 是一种比较新的辅助访问技术，用来弥补 HTML 和 JS 本身对可访问性方面的不足。支持 aria 并不是必须或者强制的，但是支持 aria 会让你的应用变得更友好，更健壮。

了解ARIA并非只是为了供盲人阅读，它可以为我们设计UI系统提供指导意义。

但是这里要注意，用对比不用好，不用比用错好！

下面是一些有关aria的属性：

h5语义化标签

• HTML5新增的部分标签中的元素、属性及属性值都拥有某种含义

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

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

以WikiPedia网站为例

h5表单增强

html5对表单功能作了很大加强，可以对表单填写内容进行限制等等。

比如限制大小，可拖动的条，下拉框，选择器，格式限制等等等等功能。

存储

下面列出了cookies、local storage和Session storage的区别

还有一个IndexedDB可以用于复杂场景的使用。

IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage (包括Local Storage和Session Storage) 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。

具体内容可以查看这个文档

这里也对Cookies、Web Storage(Local Storage和Session Storage)及IndexedDB作一个简单的比较