回头看看HTML5，走走原生的前端路。

Posted 2022-11-24 zlforever-young

前言：自从学习各种框架各种成熟的控件库，越来越觉得疲惫。而自己本身前端三剑客（html,CSS,javascript）掌握得不是太熟练。我认为是时候回过头来看看最初的，写一写最原始的web代码了。

一、用语义元素构造网页

在html5中最常用到的页面结构相关的语义元素如下：

页面结构想相关的语义元素

元素	说明
<article>	表示一篇任何形式的文章，即类似新闻报道，论坛帖子或博客文章（不包括评论或作者简介）等能够独立的内容区块
<aside>	表示独立于页面主内容的一个完整的内容块。例如，可以用<aside>
<figure>和<figcaption>	表示一副插图。其中<figcaption>元素标注图题（插图的标题），而<figure>元素标注<figcaption>和插入图片的<img>元素。目标是反映图片与图题之间的关联的
<footer>	表示页面底部的页脚。通常是很小的一块内容，包括小字号的版权声明，简单的链接
<header>	表示增强型的标题，可以包含HTML标题和其他内容。其他内容可以是标志，作者署名或一组指向后面内容的导航链接
<nav>	表示页面中重要的一组链接。其中的链接可以指向当前页面的主题，也可以指向网站的其他页面。实际上，一个页面包含多个<nav>也很正常
<section>	表示文档中的一个区块，或者表示一组文档。
<main>	表示页面的主内容。比如，可以使用<main>包含<article>元素，隔离网站的页眉、页脚和侧边栏。该元素是HTML5新增的

 

二、编写更有意义的标记

认识三个新的文本级的语义元素：

1.使用<time>标注日期和时间

//示例
The party starts <time>2014-03-21</time>

2.使用<output>标注JavaScript返回值

//示例
<p>Your BMI:<output id="result"></output></p>

3.使用<mark>标注突显文本

<mark>元素用于标注一段文本，这段文本会突出显示。在需要引用其他人的内容，而你想引起别人注意时，就可以使用<mark>元素。

三、构建更好的表单

1.理解表单

　　通常所说的表单，就是一组文本框、列表、按钮及其他可以点击的小控件，通过这些小控件可以收集网站所有访客的某些信息。

　　所有的基本表单的工作方式都类似，即用户填写信息然后单击按钮。此时，浏览器会收集用户输入的信息并将其发送给服务器。在服务器上，有软件程序负责处理信息，并决定下一步的操作。服务端的这个程序可能要联系数据库，可能是读取数据也可能是写入数据，之后再把新的页面发送给浏览器。

　　注意：无论采用什么方式，过程都差不多的，即 检查表单数据；对数据进行某种处理；然后再发回一个新网页。

2.HTML5验证的原理

基本原理：HTML5表单验证的基本原理就是你来告诉浏览器要验证那个字段。

在两个地方验证（二者缺一不可）：

　　1.客户端验证：主要为访客方便。

　　2.服务器端验证：确保数据正确性。

使用正则表达式：所谓正则表达式，就是一种用正则表达式语言编写的文本模式。常用于搜索和验证。

新的输入控件：

HTML表单有一个奇怪的做法，即用一个元素（含含糊糊的叫<input>）创建多个控件：复选框、文本框、以及按钮。此时，type属性就成了地地道道的总开关。

电子邮件地址：

<input type="email"></input>

网址：

<input type="url"></input>

搜索框：

<input type="serach"></input>

电话号码：

<input type="tel"></input>

数值：

<input type="number"></input>

滑动条：

<input type="range"></input>

日期和时间：

<input type="date"></input>