阅读 46

还是要了解一下的HTML

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

若理解有误,感谢指导。

首先第一个问题

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

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

由此可见HTML相当于骨架,于是引出语义化的概念。

html语义化是什么?

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

再则,当新建一个html的项目时,可以看到是类似于这样的一个解构

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

从meta标签说起

meta标签有什么用?

meta可提供有关页面的元信息(meta-information),比如针对搜索引擎、更新频度、cookie的描述和关键词。元数据总是以名称/值对的形式表示,名称有两种类型:namehttp-equiv。其中当名称为http-equiv,会将值关联到HTTP头部。

例子如下所示:

<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…

  1. 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。

  2. 存在有async,加载和渲染后续文档元素的过程将和script.js的加载与执行并行进行(异步)。

  3. 有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相关,整理总结中.......


关注下面的标签,发现更多相似文章
评论