HTML5基础学习

末蓝、 2022-01-07 22:55 348阅读 0赞

967490-20190413080231952-1768323873.png

HTML5 TYPE新增的属性有：color、date、datetime、datetime-local 、month、week、time 、email、number、range、search、tel、url，

967490-20190413083326787-1872100478.png

=======

967490-20190413090541853-490054874.png

  1. <input type="date" name="date">  
  2. <input type="month" name="month">  
  3. <input type="week" name="week">  
  4. <input type="datetime" name="datetime">  
  5. <input type="datetime-local" name="datetime-local">

A：time用来设置时间（小时和分钟）；

B：date用来设置年月日；

C：month用来设置年和月；

D：week用来设置年和周；

D：datetime用来设置年月日和时间；(utc时间) 不常用，以后可能会被清除，苹果中已经删除，所以兼容性不好。

Google chrome谷歌浏览器中显示：

967490-20190413085229973-262431207.png

在Firefox火狐浏览器中显示：

967490-20190413085309771-1909351998.png

=================================

967490-20190413090821991-610866282.png

A：type=”number”number 类型用于应该包含数值的输入域；

B：type=”range”类型用于应该包含一定范围内数字值的输入域；

C：type=”color”定义拾色器；

D：search类型用于搜索域，可以在输入框中输入内容，当输入内容后，输入框的最后面会有一个“×”号，当点击“×”号时，输入框的搜索内容会被清除；只有goole chrome才会有×符号。

-—————————

967490-20190413091837630-1075621028.png

autocomplete=”on” 如果不填写该属性则默认是自动完成的，双击会有之前填写的记录。

autocomplete=”off” 双击文本框不会出现之前填写的记录。

autocomplete属性规定form或input域拥有自动完成功能，该属性适用于

标签和标签，

A：规定启用自动完成功能；

B：定义禁用全部自动完成功能

autocomplete属性规定form或input域拥有自动完成功能，属性默认值是on，规定启用自动完成功能，属性还有一个值是off，规定禁用自动完成功能；

-—————————

967490-20190413093318439-1927973460.png

967490-20190413093755829-837611878.png

967490-20190413094221137-931583626.png

  1. <form>  
  2.     上传文件<input type="**file**" name="file" multiple="multiple"/><br/>  
  3.     邮件地址：<input type="**email**" name="mail" **multiple="multiple"**/>  
  4.     <br/>  
  5.     <input type="submit" name="submit"/>  
  6. </form>

967490-20190413094337272-756943107.png

multiple属性规定输入域中可选择多个值，该属性适用于标签的email和file

multiple=”multiple” 属性可以用于文件上传，和多个邮件地址。这样对后端提取数据很麻烦。

-—————————————————-

PHP的时间函数date()
//使用date()函数时，必须先设定时区：
date_default_timezone_set(“Asia/Shanghai”);
echo “today is “.date(“y/m/d/h/i/s/sa”).”
“;
date() 函数的格式参数是必需的，它们规定如何格式化日期或时间。
下面列出了一些常用于日期的字符：
d - 表示月里的某天（01-31）
m - 表示月（01-12）
Y - 表示年（四位数）
1 - 表示周里的某天（这个英文L的小写l，不是数字1）
其他字符，比如 “/“, “.” 或 “-“ 也可被插入字符中，以增加其他格式。
下面是常用于时间的字符：
h - 带有首位零的 12 小时小时格式
i - 带有首位零的分钟
s - 带有首位零的秒（00 -59）
a - 小写的午前和午后（am 或 pm）
如果从代码返回的不是正确的时间，有可能是因为您的服务器位于其他国家或者被设置为不同时区。
因此，如果您需要基于具体位置的准确时间，您可以设置要用的时区。
下面的例子把时区设置为 “Asia/Shanghai”，然后以指定格式输出当前时间：
date_default_timezone_set(“Asia/Shanghai”);
echo “today is “.date(“y/m/d/h/i/s/a”).”
“

//sa可以连写，表示:秒和pm/am

通过 PHP mktime() 创建日期——make time
语法：mktime(hour,minute,second,month,day,year);
如下：
$d=mktime(9, 12, 31, 6, 10, 2015);
echo “创建日期是 “ . date(“Y-m-d h:i:sa”, $d);
//谨记$d不能使用引号。
-———-
通过 PHP strtotime() 用字符串来创建日期
PHP strtotime() 函数用于把人类可读的字符串转换为 Unix 时间。
语法： strtotime(time,now) 如下：
date_default_timezone_set(“Asia/Shanghai”);//创建时间一定要先设定时区
$c=strtotime(“10:30am October 14 2018”);
echo “今天是：”.date(“y-m-d-h-i-sa”,$c).”
“;
-—
//设定为上海时区
date_default_timezone_set(“Asia/Shanghai”);
//可以用next days,+/-n days/months/years/seconds/hours/minutes…
$d=strtotime(“yesterday”);
echo “明天的时间为：”.date(“y-m-d-h-i-l-sa”,$d).”
“;
$a=strtotime(“-6 days”);
echo “三个月后的时间为：”.date(“y-m-d-h-i-sa”,$a).”
“;

967490-20190414145114949-1273149988.png

placeholder 属性提供可描述输入字段预期值的提示信息，该提示会在输入字段为空时显示，并会在字段获得焦点时消失

表单是前端的噩梦，使用Bootstrap前端框架！！！

967490-20190414150146389-922165658.png

A：src是html4中已有属性，规定引入资源；

B：autocomplete是html5新增的属性，规定输入字段是否应该启用自动完成功能；

C：required是html5新增的属性，规定必需在提交之前填写输入字段；

D：type是html4中已有属性，定义类型；

E：checked是html4中已有属性，规定在页面加载时应该被预先选定的 input 元素；

A：placeholder属性规定可描述输入字段预期值的简短的提示信息；

B：required该属性规定必须在提交表单之前输入域不能为空；

C：autofocus属性规定当页面加载时 input 元素应该自动获得焦点；

D：autocomplete属性规定输入字段是否应该启用自动完成功能；

autocomplete属性规定form或input域拥有自动完成功能，该属性适用于标签和标签

967490-20190414151223890-1894936690.png

rel 引用 规定当前文档与被链接文档之间的关系

icon 小图标

href 超文本引用（hypertext reference） 规定被链接文档的位置

type 对象的类型

image/gif,jpeg,png 图片类型 / 具体图片格式

sizes 根据使用者不同分辨率而选择合适图片的大小。

16*16 宽高为16*16的图片

链接：

rel 引入什么

type 引入对象是什么类型

href 引入对象的具体地址

解释：引入层叠样式表 使用的是text/css类型 再指明文件地址。

-—————————

967490-20190414152534600-517298911.png

一个网页会使用很多的链接跳转

base 控制整个页面的基础

href 超文本引用（hypeertext reference）href规定页面中所有相对链接的基准 URL

target 链接跳转 控制整个页面所有超链接的跳转方式

_blank 跳转时，创建新页面进行跳转

_self 在本身页面进行跳转

-—————

967490-20190414152820568-1453866707.png

media 规定被链接文档将被显示在什么设备上

hreflang 超文本引用语言（hypertext reference）language ，指定页面跳转时使用的语言。

zh 中文

zh-cn 简体中文

zh-uk 繁体中文（香港）

zh-tw 台湾语言

en 英文

rel 引用 规定当前文档与被链接文档之间的关系 （从其他服务器引入的链接，）

external 外部的

-—————————————

A：rel规定当前文档与被链接文档之间的关系；

B：sizes属性规定被链接资源的尺寸；

C：href规定被链接文档的位置；

D：media规定被链接文档将被显示在什么设备上；

==========================

967490-20190414153936892-482168184.png

-—————————

  1. <script type="text/javascript">  
  2.     document.write("我爱你"+"<br/>");  
  3. </script>  
  4. <script type="text/javascript" src="text.js"></script>

-—————-

text.js的内容

document.write(“这是引入外部的js文件”);

-—————-

显示：

967490-20190414155541499-130135561.png

============

defer 延迟，推迟 目前只支持ie浏览器，google chrome 不支持。

async 异步 非同步，即是多线程。加载页面的同时也加载外部引入的文件。如：js css 等文件。

  1. <script **defer="defer"** type="text/javascript" src="text1.js"></script>

defer=”defer” 加载完所有文档后，再加载该引入的文件。目前只支持IE浏览器，兼容性不好。

所以想要后面加载，那么就把该句代码放在之前。

  1. <script **async="async"**type="text/javascript" src="text2.js"></script>

async=”async” 加载网页文档时，加载到该句代码时，和网页结构同时开始一起加载外部引入文件。

该属性支持所有主流浏览器。

-————————————————

A：

发表评论

表情：
评论列表 （有 0 条评论，348人围观）

还没有评论，来说两句吧...

相关阅读

    相关 HTML5基础

    HTML5基础   HTML指的是超文本标记语言(Hyper Text Markup Language)，是用来描述网页的一种语言，由HTML标记和纯文本构成文本文件。

    缺乏、安全感缺乏、安全感/ 0 赞/ 322 阅读

    相关 HTML5基础

    HTML5想必大家都很熟悉了，因为太多的媒体在讨论这一技术。然而，你能准确地说出HTML5带来了哪些新特性吗？本文总结了HTML5带来的15项你必须知道的新特性。 自己在登

    向右看齐向右看齐/ 0 赞/ 257 阅读

    相关 HTML5基础

    [HTML5基础][HTML5] 　　首先学习HTML我认为需要搞懂块级元素与行内元素这两个概念 块级元素与行内元素 块元素一般都从新行开始，它可以容纳内联元素和

    曾经终败给现在曾经终败给现在/ 0 赞/ 272 阅读

    相关 HTML5基础

    HyperText Markup Language：超文本标记语言，是一种用于创建网页的标准标记语言。HTML 运行在浏览器上，由浏览器来解析。 > HTML 不是一种编程语

    电玩女神电玩女神/ 0 赞/ 338 阅读