HTML5基础学习

末蓝、 2022-01-07 22:55 191阅读 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][]

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域拥有自动完成功能，该属性适用于<form>标签和<input>标签，

A：<input type="email" name="email" autocomplete="on">规定启用自动完成功能；

B：<form autocomplete="off">定义禁用全部自动完成功能

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

\-------------------

![967490-20190413093318439-1927973460.png][]

![967490-20190413093755829-837611878.png][]

![967490-20190413094221137-931583626.png][]

![967490-20190413094337272-756943107.png][]

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

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

\------------------------------------

PHP的时间函数date()  
//使用date()函数时，必须先设定时区：  
date\_default\_timezone\_set("Asia/Shanghai");  
echo "today is ".date("y/m/d/h/i/s/sa")."<br>";  
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")."<br>"  
//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)."<br>";  
\---  
//设定为上海时区  
 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)."<br>";  
 $a=strtotime("-6 days");  
 echo "三个月后的时间为：".date("y-m-d-h-i-sa",$a)."<br>";

![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域拥有自动完成功能，该属性适用于<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][]

\-------------------

\------------

text.js的内容

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

\------------

显示：

![967490-20190414155541499-130135561.png][]

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

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

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

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

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

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

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

\---------------------------------

A：<script> 标签用于定义客户端脚本；

B：<style> 标签用于为 HTML 文档定义样式信息；

**C：<meta> 标签的属性定义了与文档相关联的名称/值对**；

D：<title> 元素可定义文档的标题；

A：src规定外部脚本文件的 URL；

B：async属性规定对脚本进行异步加载，实现JavaScript双线程加载；

C：type指示脚本的 MIME 类型；

D：defer规定是否对脚本执行进行延迟，直到页面加载为止；

\-----------------------

**start设置第一个li的起始位置。**

<ol start=6>  
        <li>weoi</li>  
        <li>sldkfjw</li>  
        <li>wofij</li>  
        <li>wsifj</li>  
        <li>eprogjw</li>  
    </ol>

网页显示如：

![967490-20190414161844183-356480641.png][]

\-----------

reversed 倒序，降序   即倒过来 ，6,5,4,3,2,

<ol start=6 reversed>  
        <li>weoi</li>  
        <li>sldkfjw</li>  
        <li>wofij</li>  
        <li>wsifj</li>  
        <li>eprogjw</li>  
    </ol>

显示如下：

![967490-20190414161918260-192320760.png][]

\---------

![967490-20190414162616450-1694450416.png][]

cache.manifest 是用于离线后，依然可以正常显示页面。

![967490-20190414162722414-1750058514.png][]

倡导：结构与标签分离，所以不建议这么书写代码。

....CSS代码

</style>

转载于:https://www.cnblogs.com/Knowledge-is-infinite/p/10702075.html

[967490-20190413080231952-1768323873.png]: /images/20211220/9c5c2960cf074478965e1c7c4a30333f.png
[967490-20190413083326787-1872100478.png]: /images/20211220/fd4a30fb341042218acc14595e6ded04.png
[967490-20190413090541853-490054874.png]: /images/20211220/c646e2a54b7044b0a621d8f1cd632844.png
[967490-20190413085229973-262431207.png]: /images/20211220/9eb2c4ae5ee14082a47d908dd47423a4.png
[967490-20190413085309771-1909351998.png]: /images/20211220/cdc406c89b8543ec97c7407edde6ef28.png
[967490-20190413090821991-610866282.png]: /images/20211220/08a0bf0ecf4f45b68214ce38594bf939.png
[967490-20190413091837630-1075621028.png]: /images/20211220/1dce4849fe4540a8b205014a9729eea2.png
[967490-20190413093318439-1927973460.png]: /images/20211220/157f7d50e4fb407c9d081f7b5cae9f65.png
[967490-20190413093755829-837611878.png]: /images/20211220/2408d60c68f9453baa020851a5eef0e0.png
[967490-20190413094221137-931583626.png]: /images/20211220/f5180c1d4c0b41438df8df1cb5c3d822.png
[967490-20190413094337272-756943107.png]: /images/20211220/7343b4220125460384da5bbc4c49817f.png
[967490-20190414145114949-1273149988.png]: /images/20211220/037540f1fc504901bbcedfa41d7a4320.png
[967490-20190414150146389-922165658.png]: /images/20211220/47d4b68db8b947c38b12ccb6bac7fa99.png
[967490-20190414151223890-1894936690.png]: /images/20211220/f0d7f2f13a8945d6b4e3430c820893c8.png
[967490-20190414152534600-517298911.png]: /images/20211220/3217d4d403014276865f79906de04ec0.png
[967490-20190414152820568-1453866707.png]: /images/20211220/7386b003110444838b446dfabbff97a4.png
[967490-20190414153936892-482168184.png]: /images/20211220/2f9a02cd15a94ca981e32081d6c5a88c.png
[967490-20190414155541499-130135561.png]: /images/20211220/a643883f2a7244fb87dc0a9090cfc0cc.png
[967490-20190414161844183-356480641.png]: /images/20211220/5681988ccbcf4883893e8e9558821305.png
[967490-20190414161918260-192320760.png]: /images/20211220/9204999d8b2d4e9ca2e9f9e0ec05342c.png
[967490-20190414162616450-1694450416.png]: /images/20211220/b0595863272049268d3829086899f4e8.png
[967490-20190414162722414-1750058514.png]: /images/20211220/f1670a38436a41218e1e5b0d6f30feca.png