web前端学习（二）html学习笔记部分（1） -- html5新增的元素及特性等等

2022-12-05 12:51:13

检查，在浏览器中可以调整设备类型

html5实现水池效果。

lang：en为英文语言，中文语言zh

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

基本结构：

<!doctype>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>
</body>

</html>

html5出现的理由

1.web浏览器之间的兼容性低

2.文档结构不够明确

3.web应用程序功能受到限制

html5语法的改变

1.内容类型

2.指定字符编码

3.可以省略标记的元素（很多）

4.具有boolean值的属性

5.省略引号

html5中新增的属性和废除的属性

很多，不做笔记了。

1.2.1

全局属性：

1.2.1.1 contenteditable

<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>

1.2.1.2 designmode

开启设计模式，全部contenteditable属性都会开启

1.2.1.3 hidden

<h2>可编辑列表</h2>

<ul hidden>

    <li>列表1</li>

    <li>列表2</li>

    <li>列表3</li>

</ul>

<div hidden = "false">测试行</div>

默认为true，且hidden属性只能在js中修改，所以最后一句无效

1.2.1.4 spellcheck属性

　　检查拼写错误

1.2.1.5 tableindex属性

　　按tab键的切换顺序

<input type="text" spellcheck="true" tabindex="1">

<input type="text" spellcheck="true" tabindex="3">

<input type="text" spellcheck="true" tabindex="2">

<p tabindex="4">aaa</p>

值为-1时不会获得焦点

1.2.2

1.2.2.1 article元素

　　文章

　　HTML5 新增的主体结构元素 article 元素代表文档，页面或应用程序中独立的、完整的、可以独自被外部引用的内容。

1.2.2.2 aside元素

　　边

　　HTML5 新增的主体结构元素aside，表示当前或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条。

1.2.2.3 nav元素

　　导航

　　HTML5 新增的主体结构元素 nav，可以作为页面导航连接组，其中的导航元素链接到其他页面或当前页面的其他部分。

1.2.2.4 section元素

　　分块（独立的模块）

　　HMTL5 新增的主体结构元素 section，对于网站或应用程序中页面上的内容进行分块。

1.2.2.5 time元素和pubdate属性

　　HTML5 新增的主体结构元素 time、pubdate 属性，用来无歧义、明确地对机器的日期和时间进行编码，并且以让人易读的方式来展现它，这个元素就是 time 元素。

<time datetime="2018-11-8" pubdate="true">2018-11-8</time>

<time datetime="2018-11-8T20:00"pubdate="false">2018-11-8</time>

<time datetime="2018-11-8T20:00Z">2018-11-8</time>

<time datetime="2018-11-8T20:00+9:00">2018-11-8</time>

time元素代表24小时中的某个时刻和某个日期，表示时刻时允许带时差，它可以定义很多格式的时间

datetime属性中日期与时间之间需要用T文字分隔，T表示时间；

<time datetime="2010-11-13T20:00">我生日是晚上八点</time>

时间加上Z文字表示给机器编码时使用UTC时间标准；

<time datetime="2010-11-13T20:00Z">我生日是晚上八点</time>

加上时差，表示向机器编码另一地区时间，如果是编码本地时间，则不需要添加时差

<time datetime="2010-11-13T20:00+09：00">我生日是晚上八点</time>

pubdate属性：
这是一个可选的,boolean值属性，它可以用到article元素中的time元素上，意思是time元素代表了文章（article元素的内容）或者整个网页的发布日期

<!DOCTYPE html>

<meta charset="utf-8">

<article>

    <header>

        <h1>关于<time datetime="2010-10-29">10月29日</time>的舞会的通知</h1>

        <p>发布日期

            <time datetime="2010-10-11" pubdate>2010年10月11日</time>

        </p>

    </header>

    <p>大家好，我是法律系三年级的代表......</p>

</article>

1.2.3.1 header

　　header 元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但是也可以包含其他内容，例如数据表格、搜索表单或相关的 logo 图片

1.2.3.2 footer和hgroup

　　footer 元素可以作为其上层父级内容区块或是一个根区块的脚注。footer 通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。

　　标题过多，有主标题和子标题等等，需要使用hgroup进行编组。　　

1.2.3.3 address元素和网页编排规则

　　address 元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等。address 应该不只用来呈现电子邮箱或真实地址，还用来展示跟文档相关的联系人的所有联系信息。

　　网页编排规则
　　　　1.显式编排内容区域块

　　　　2.隐式编排内容区域块

　　　　3.标题分级

　　　　4.不同区域块使用相同标题

1.2.4 html5表单新增元素和属性

1.2.4.1 form属性和formaction属性

　　在 HTML4 中，表单内的从属元素必须书写在表单内部，而在 HTML5 中，可以把他们书写在页面上任何地方，然后为该元素指定一个 form 属性，属性值为该表单的 id，这样就可以声明该元素从属于指定表单了

<form id="form1">

    <input type="text">

</form>

<textarea form="form1"></textarea>

　　html5中可以为所有的提交按钮增加不同的formaction属性，使单机不同的按钮时可以将表单提交到不同的页面。

<form id="form1">

    <input type="submit" formaction="http://x1.jsp">提交到x1页面

    <input type="submit" formaction="http://x2.jsp">提交到x2页面

    <input type="submit" formaction="http://x3.jsp">提交到x3页面

</form>

1.2.4.2 formmethod 和 formenctype 属性

　　在 HTML4 中，一个表单内只能有一个 action 属性用来对表单内所有元素统一指定提交页面，所以每个表单内页只有一个 method 属性来统一指定提交方法。在 HTML5 中，可以使用 formmethod 属性来对每一个表单元素分别指定不同的提交方法。

<form>

    <input type="submit" value="提交post" formaction="http://localhost:8080/servertest/first1.jsp" formmethod="post">

    <input type="submit" value="提交get" formaction="http://localhost:8080/servertest/first2.jsp" formmethod="get">

</form>

post提交

get提交

　　html5中，可以使用formenctype属性在将表单元素发送到服务器之前分别为表单元素分别指定不同的编码方式

　　formenctype属性

application/x-www-form-urlencoded	发送前编码所有字符（默认）
multipart/form-data	不对字符编码，在使用包含文件上传控件的表单时必须使用该值
text/plain	空格转换为+号，但不编码特殊字符

1.2.4.3 formtarget 属性和 autofocus 属性

　　在 HTML4 中，表单元素具有一个 target 属性，该属性用于指定在何处打开表单提交后所需要加载的页面。在 HTML5 中，可以对多个提交按钮分别使用 formtarget 属性来指定提交后在何处打开所需加载的页面。

html和xhtml的区别：xhtml相比html他有更加严格的书写规范。

xmlns是XML Namespaces的缩写，中文名称是XML（标准通用标记语言的子集）命名空间。为了解决上述问题，xmlns就产生了。当命名空间被定义在元素的开始标签中时，所有带有相同前缀的子元素都会与同一个命名空间相关联。注释：用于标示命名空间的地址不会被解析器用于查找信息。其惟一的作用是赋予命名空间一个惟一的名称。

xmlns 属性规定文档的 xml 命名空间。

然而，如果在 XHTML 文档中未使用 xmlns，http://w3.org 的 HTML 验证器也能正确识别文档。这是因为命名空间 "xmlns=http://www.w3.org/1999/xhtml" 是默认的，会自动添加到 <html> 标签。

xmlns 属性规定文档的 xml 命名空间。

<html xmlns="http://www.w3.org/1999/xhtml">

http://www.w3.org/1999/xhtml

要使用的命名空间（XHTML 文档）。

uri：统一资源标识符

url：统一资源定位符

框架中<frameset>不能写到<body>中，且在HTML5中已不再使用。

formtarget属性

<form>

    <div><input type="submit" value="提交post" formaction="http://localhost:8080/servertest/first1.jsp" formtarget="_blank"></div>

    <div><input type="submit" value="提交get" formaction="http://localhost:8080/servertest/first2.jsp" formtarget="_self"></div>

    <div><input type="submit" value="提交get" formaction="http://localhost:8080/servertest/first2.jsp" formtarget="_parent"></div>

    <div><input type="submit" value="提交get" formaction="http://localhost:8080/servertest/first2.jsp" formtarget="_top"></div>

    <div><input type="submit" value="提交get" formaction="http://localhost:8080/servertest/first2.jsp" formtarget="framname"></div>

</form>

值	描述
_blank	在新窗口中打开。
_self	默认。在相同的框架中打开。
_parent	在父框架集中打开。
_top	在整个窗口中打开。
framename	在指定的框架中打开。

_blank 是指超链接连接的网页 是通过一个新的网页窗口打开

_self的话 是指在本身这个网页窗口来打开新的网页链接

_top与_self差不很大 但是如果你用了<!--#include file="..."-->时 就会知道两者的差别了

因为如果你的超链接是 做在 <!--#include file="..."-->上时

如果用_self 点击后的超链接就会在<!--#include file="..."--> 这个页面上打开

而页面其它部分不会改变 如果用_top 则会整个窗口一起跳转到新的链接网页

_parent主要是针对于框架网页中的跳转 如果你一个页面由两三个框架组成

你要想整个页面跳转到其它网页链接 目标就需要用_parent了 如果不用这个 就只会使得那一小块

框架区域里的网页跳转 而其它的地方则不变

在手动改HTML代码时经常会用到target参数，常用的有两个target=_blank 和target=_self意思为：
1. target=_blank表示在新窗口中打开该链接；
2. target=_self表示相同框架，即在当前窗口（或当前选项卡）中打开该链接。
还有两个不常用的：
3. target=_parent，将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象_self参数一样。
4. target=_top，在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架不写的话就是表示默认值，默认值一般跟浏览器有关。

比如：

网A中镶嵌iframe了网页B，网页B又镶嵌iframe了网页C：
1. 如果网页C中连接设置target=_parent，则跳将网页B去掉直接A中嵌入网页C中链接页面;
2. 而如果网页C中target=_top ，则直接跳出所有iframe框架，直接转向C中链接页面。

autofocus属性

　　为文本框、选择框或按钮控件加上autofocus属性，当画面打开时，该控件自动获得光标焦点。

<form>

    <input type="submit">

    <input type="submit" autofocus>

</form>

1.2.4.4 required 属性和 labels 属性

　　HTML5 中新增的 required 属性可以应用在大多数输入元素上，在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。

<form>

    <input type="text" required="required">

    <button type="submit">

</form>

labels属性

　　在html5中，为所有可使用标签的表单元素、button、select元素等，定义一个labels属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素为所构成的集合。

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

<script>

    function Validate(){

        var txtName = document.getElementById("txt_name");

        var button = document.getElementById("btnValidate");

        var form = document.getElementById("testform");

        if(txtName.value.trim() == ""){

            var label = document.createElement("label");

            label.setAttribute("for","txt_name");

            form.insertBefore(label,button);

            txtName.labels[1].innerHTML = "请输入姓名";

            txtName.labels[1].setAttribute("style","font-size:9px;color:red");

        }

    }

</script>

<form id="testform">

    <label id="label" for="txt_name">姓名：</label>

    <input id="txt_name">

    <input type="button" id="btnValidate" value="验证" onclick="Validate()">

</form>

</body>

</html>

trim()函数：

参数string：string类型，指定要删除首部和尾部空格的字符串返回值String。函数执行成功时返回删除了string字符串首部和尾部空格的字符串，发生错误时返回空字符串（""）。如果参数值为null时，会抛出空指针异常。

1.2.5 表单新增元素和属性（续）

1.2.5.1 control属性与placeholder属性

　　在HTML5中，可以再标签内部放置一个表单元素，并且通过该标签的control属性来访问该表单元素。placeholder是指当文本框处于未输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点时，模糊显示输入提示文字。

<script>

        function setValue(){

            var label = document.getElementById("label");

            var textbox = label.control;

            textbox.value = "010101";

    }

    </script>

    <form>

        <!--<label id="label">这两种写法区别在于for的谁,label只能为一个标签服务-->

        <label id="label" for="txt_zip2">

            邮编：

            <input id="txt_zip" type="text" maxlength="6">

            <input id="txt_zip2" type="text" maxlength="6">

            <small>请输入六位数字</small>

        </label>

        <input type="button" value="设置默认值" onclick="setValue()">

    </form>

placeholder是指当文本框处于未输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点时，模糊显示输入提示文字。

<input type="text" placeholder="请输入内容">

1.2.5.2 list属性和AutoComplete属性

　　在HTML5中，为单行文本框增加了一个list属性，该属性的值为某个datalist元素的id。datalist元素也是HTML5中新增的元素，该元素类似于选择框，但是当用户想要设定的值不在选择列表之内时，允许自行输入。datalist元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。

<form>

    <input type="text" id="testlist1" name="testlist" list="testlist2" >

    <datalist id="testlist2" style="display:none;">

        <option value="html5学习">html5学习</option>

        <option value="Android学习">Android学习</option>

        <option value="java学习">java学习</option>

    </datalist>

</form>

<!--form表单中的datalist中的option无法使用selected属性-->

<select>

    <option value ="volvo"  selected>Volvo</option>

    <option value ="saab">Saab</option>

    <option value="opel">Opel</option>

    <option value="audi">Audi</option>

</select>

autocomplete属性

　　帮助输入所用的自动完成功能，是一个既节省输入时间又十分方便的功能。在html5之前，因为谁都可以看见输入的值，所以在安全方面存在缺陷，所以使用AutoComplete属性，安全性方面也可以得到很好的控制。

<form>

    <input type="text" id="testlist1" name="testlist" list="testlist2" autocomplete="on">

    <datalist id="testlist2" style="display:none;">

        <option value="html5学习">html5学习</option>

        <option value="Android学习">Android学习</option>

        <option value="java学习">java学习</option>

    </datalist>

    <input type="submit" value="提交测试">

</form>

注意：是自动完成提交过的内容。on off

1.2.5.3 pattern属性和SelectionDirection属性

　　在HTML5中，对input元素使用pattern属性，并且将属性值设为某个格式的正则表达式，在提交时会针对这些进行检查，检查其内容是否符合给定格式。当输入的内容不符合给定格式时，则不允许提交，同时在浏览器中显示信息提示文字，提示输入的内容必须符合给定格式。

<form action="http://localhost:8080/servertest/first1.jsp">

    <input pattern="[A-Z]{3}" name="part">

    <input type="submit">

</form>

pattern属性只能检测数据输入的合法性，并不能检查是否为空。

文本框的selectiondirection属性，这对元素与textarea元素，html5增加了selectiondirection属性，当用户在这两个元素中用鼠标选取部分文字时，可以使用该属性来获取选取方向，当用户正向选取文字时，该属性值为"forward"，当用户反向选取文字时，该属性追为“backward”。当用户没有选取任何文字时，该属性值为“forward”

chrome不支持，需要使用firefox浏览器查看效果。

form>

    <script>

        function AD(){

            var control = document.forms[0]['text'];

            var Direction = control.selectionDirection;

            alert(Direction);

        }

    </script>

    <input type="text" name="text">

    <input type="button" value="提交测试" onclick="AD()">

</form>

1.2.5.4 indeterminate属性和image提交按钮的height属性与width属性

　　对于复选框checkbox元素来说，过去只是选取与非选取这两种状态。在HTML5中，可以在JavaScript脚本代码中对该元素使用indeterminate属性，以说明复选框处于“尚未明确是否选取”状态。(必须在javaScript脚本中对其进行操作，否则不起作用)

<form>

    <input type="checkbox" indeterminated id="ab">测试

    <script>

        var ab = document.getElementById("ab");

        ab.indeterminate = true;

    </script>

</form>

image提交按钮的height属性和width属性

针对类型为image的input元素，html5新增了两个属性，height，width分别用来指定图片按钮的高度和宽度。

<form>

    <input type="name" name="input1">测试

    <input type="image" src="test.gif" alt="编辑"height="50px" width="20px">

</form>

码农公寓

相关文章