仍是要了解一下的HTML

时间 2020-01-11

标签仍是了解一下 html 栏目 HTML 繁體版

原文原文链接

最近，从新去学习了一下HTML。记得第一次接触HTML，是在大一的时候，参加学校的网页设计大赛。直到今年秋招的时候都以为HTML很简单，仔细去阅读后，发现本身是坐井观天了，遂整理一部分资料后写了这篇笔记。html

若理解有误，感谢指导。前端

首先第一个问题正则表达式

前端页面有哪三层构成？分别是什么?

1.结构层 HTML 2.表示层 CSS 3.行为层 JScanvas

因而可知HTML至关于骨架，因而引出语义化的概念。segmentfault

html语义化是什么？

例如标题（H1~H6）、列表（li）等根据内容的结构化（内容语义化），选择合适的标签（代码语义化，有利于seo优化，便于项目的开发及维护，使html代码更具备可读性，便于其余设备解析。浏览器

再则，当新建一个html的项目时，能够看到是相似于这样的一个解构ruby

<!DOCTYPE html>
<html>
   <head>       
   <meta charset="utf-8" />       
   <title></title>   
</head>
   <body>	
   </body>
</html>复制代码

从meta标签提及bash

meta标签有什么用？

meta可提供有关页面的元信息（meta-information），好比针对搜索引擎、更新频度、cookie的描述和关键词。元数据老是以名称/值对的形式表示，名称有两种类型：name和http-equiv。其中当名称为http-equiv，会将值关联到HTTP头部。
服务器

例子以下所示：cookie

<meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />  5秒跳转
<meta name="viewport" content="width=device-width, initial-scale=1.0">  页面适配
<meta http-equiv="charset" content="iso-8859-1">   声明字符集
<meta http-equiv="expires" content="31 Dec 2008">   声明过时时间复制代码

再则会遇到script

当浏览器碰到script脚本的时候：

参考：segmentfault.com/q/101000000…

没有 defer 或 async，浏览器会当即加载并执行指定的脚本，“当即”指的是在渲染该标签之下的文档元素以前，也就是说不等待后续载入的文档元素，读到就加载并执行。
存在有async，加载和渲染后续文档元素的过程将和script.js的加载与执行并行进行（异步）。
有defer，加载后续文档元素的过程将和script.js的加载并行进行（异步），可是

script.js
的执行要在全部元素解析完成以后，DOMContentLoaded 事件触发以前完成。

接下去本文将会多方面阐述HTML5相关。

H5中的新特性

1.新的语义元素，例如<header>,<footer>,<article>,<section>

2.新的表单控件，好比数字、日期、时间、日历和滑块

3.强大的图像支持（借由<canvas>和<svg>）

4.强大的多媒体支持（借由<video>和<audio>）

5.强大的API，好比用本地存储取代cookie

6.data---自定义属性

7.hidden属性

8.spellcheck语法检查

9.translate可翻译

H5中新的语义/结构元素

<article> 定义文档内的文章

<aside> 定义页面内容以外的内容

<bdi> 定义与其余文本不一样的文本方向

<details> 定义用户可查看或隐藏的额外细节

<dialog> 定义对话框或窗口

<figcaption> 定义<figure>元素的标题

<figure> 定义自包含内容，好比图示、图表、照片、代码清单等等。

<footer> 定义文档或节的页脚

<header> 定义文档或节的页眉

<main> 定义文档的主内容

<mark> 定义重要或强调的内容

<menuitem> 定义用户可以从弹出菜单调用的命令/菜单栏项目

<meter> 定义已知范围内的标量测量

<nav> 定义文档内的导航连接

<progress> 定义任务进度

<rp> 定义在不支持ruby注释的浏览器中显示什么

<rt> 定义关于字符的解释/发音

<ruby> 定义ruby注释

<section> 定义文档中的节

<summary> 定义

<details>元素的可见标题

<time> 定义日期/时间

<wbr> 定义可能的折行（line-break）

新的表单元素

<datalist> 定义输入控件的预约义选项

<keygen> 定义键对生成器字段（用于表单）

<output> 定义计算结果

HTML5中新增的输入类型

1.color

2.date

3.datetime

4.datetime-local

5.email

6.month

7.number

8.range

9.search

10.tel

11.time

12.url

13.week

输入限制

disabled ：规定输入字段应该被禁用

max ：规定输入字段的最大值

maxlength ：规定输入字段的最大字符数

min ：规定输入字段的最小值

pattern ：规定经过检查输入值的正则表达式

readonly ：规定输入字段为只读（没法修改）

required ：规定输入字段是必需的（必需填写）

size ：规定输入字段的宽度（以字符计）

step ：规定输入字段的合法数字间隔

value ：规定输入字段的默认值

HTML5中input新增属性

autocomplete ：规定表单或输入字段是否应该自动完成

autofocus ：当页面加载<input>元素时，应该自动获取元素

form : form属性规定<input>元素所属的一个或多个表单

formaction ：规定当提交表单时处理该输入控件的文件的URL，该属性覆盖<form>元素的action属性

formenctype ：规定当把表单数据(form-data)提交至服务器时如何对其进行编码(仅针对 method="post"的表单)，该属性覆盖<form>元素的enctype属性。

formmethod : 定义用以向action URL 发送表单数据（form-data）的HTTP方法。该属性覆盖<form>元素的method属性。

formnovalidate ：若是设置，则规定在提交表单时不对<input>元素进行验证。该属性覆盖<form>元素的novalidate属性。

formtarget：规定的名称或关键词指示提交表单后在何处显示接收到的响应。该属性覆盖<form>元素的target属性。

height 和 width

list ：该属性引用的<datalist>元素中包含了<input>元素的预约义选项。

min 和 max

multiple：若是设置，则规定容许用户在<input>中输入一个以上的值。（适用于email和file）

pattern(regexp)：正则表达式（适用于text、search、url、tel、email、password）

placeholder ：规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）

required

step：规定<input>元素的合法数字间隔。

form中增长的属性

autocomplete ：规定表单或输入字段是否应该自动完成

novlidate ：规定在提交表单时不对表单数据进行验证

剩下还有Canvas以及Api相关，整理总结中.......