HTML基础（三）

来源：互联网发布：iso9001 软件开发规范编辑：程序博客网时间：2024/06/07 23:17

HTML5新增标签

一、新增的主题结构元素

1. article 元素

1.1作用

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

1.2 实例

<h1>Internet Explorer 9</h1>

<p>Windows Internet Explorer 9（简称IE9）于2011 年3 月14 日发布.....</p>

</article>

1.3 应用场景

论坛帖子、报纸文章、博客条目、用户评论

2. section 元素

2.1作用

对于网站或应用程序中页面上的内容进行分块。<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

2.2 实例

<p>The People's Republic of China was born in 1949...</p>

</section>

2.3属性

属性

值

描述

cite

URL

section 的 URL，假如section 摘自web 的话。

3.nav元素

3.1 作用

可以作为页面导航连接组，其中的导航元素链接到其他页面或当前页面的其他部分。

3.2 实例

<nav>

<a href="html5_meter.asp">Previous</a>

</nav>

4.aside元素

4.1 作用

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

4.2 实例

<p>Me and my family visited The Epcot center this summer.</p>

<aside>

<h4>Epcot Center</h4>

The Epcot Center is a theme park in Disney World, Florida.

</aside>

5.time元素

5.1作用

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

5.2实例

<p>我们在每天早上 <time>9:00</time> 开始营业。</p>

5.3 属性

属性

值

描述

datetime

datetime

规定日期 / 时间。否则，由元素的内容给定日期/ 时间。

pubdate

pubdate

指示 <time> 元素中的日期/ 时间是文档（或<article> 元素）的发布日期。

二、非主题结构元素

1.header元素

1.1 作用

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

1.2 实例

<h1>Welcome to my homepage</h1>

<p>My name is Donald Duck</p>

</header>

2.footer元素

2.1 作用

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

2.2实例

<p>Posted by: W3School</p>

<p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>

</footer>

3.address元素

1.作用

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

2. 定义和用法

<address> 标签定义文档或文章的作者/拥有者的联系信息。

如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息。

如果 <address> 元素位于 <article> 元素内，则它表示文章的联系信息。

<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address元素前后添加折行。

3.实例

Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>

Visit us at:<br>

Example.com<br>

Box 564, Disneyland<br>

USA

</address>

三、HTML5 表单新增元素与属性

1. form 属性和 formaction属性

Ø form 属性

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

<formid="testForm"action="正六面体联系.html">
<inputtype="text">
</form>
<textarerform="textForm"></textarer>

说明：这样写虽然<textarer>标签不在form表单内，但是还是从属于该表单。这样方便设置CSS样式。关键是表单元素的form属性指向了该表单的ID

Ø formaction 属性

在 HTML4 中，一个表单内的所有元素只能通过表单的action属性统一提交到另一个页面，而在HTML5 中，可以为所有的提交按钮增加不同的formaction属性，使单击不同的按钮时将表单提交到不同的页面。

<formid="testForm"action="正六面体联系.html">
   <inputtype="submit"value="提交到1">
   <inputtype="submit"value="提交到2"formaction="正方体练习.html">
   <inputtype="submit"value="提交到3"formaction="date.html">
</form>

这样就可以把一个表单提交到不同地方。

2. formmethod 和 formenctype属性

Ø formmethod属性

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

<formid="testForm"action="正六面体联系.html">
<inputtype="text"formmethod="get">
<inputtype="password"formmethod="post">
</form>

Ø formenctype 属性

在HTML4中，表单元素具有一个enctype属性，该属性用于指定在表单发送到服务器之前应该如何对表单内的数据进行编码。在HTML5中，可以使用formenctype属性对表单元素分别制定不同的编码方式。

作用：formenctype 属性覆盖 form 元素的enctype 属性。

该属性与 type="submit"和 type="image"配合使用。

Ø 取值

值

描述

application/x-www-form-urlencoded

在发送前对所有字符进行编码（默认）。

multipart/form-data

不对字符编码。当使用有文件上传控件的表单时，该值是必需的。

text/plain

将空格转换为 "+" 符号，但不编码特殊字符。

3. formtarget 属性和 autofocus属性

Ø formtarget 属性

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

<formid="testForm"action="正六面体联系.html">
<inputtype="text"formmethod="get"> <inputtype="submit"formtarget="_blank"><br>
<inputtype="password"formmethod="post"> <inputtype="submit"formtarget="_self">
</form>

Ø autofocus 属性

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

<formaction="">
<inputtype="text">
<inputtype="text"autofocus>
</form>

页面打开时会自动为第二个输入框聚焦。

4. required 属性和 labels属性

Ø required 属性

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

<formaction="">
<inputtype="text"required="required">
<inputtype="submit">
</form>

Ø labels 属性

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

5. control属性与placeholder属性

Ø control属性

在HTML5中，可以在标签内部放置一个表单元素，并且通过该标签的control属性来访问该表单元素。配合JavaScript使用

Ø placeholder属性

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

<formaction="">
<inputtype="text"placeholder="请输入用户名">
<inputtype="submit">
</form>

6. list属性和AutoComplete属性

Ø list属性

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

<formaction="">
   <inputtype="text"list="adr">
   <datalistid="adr">
      <optionvalue="北京"></option>
      <optionvalue="上海"></option>
      <optionvalue="苏州"></option>
   </datalist>
</form>

Ø AutoComplete属性

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

Ø 自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

Ø 注释：autocomplete 属性适用于 <form>，以及下面的<input> 类型：text, search, url, telephone, email, password, datepickers, range以及 color。

Ø 实例

First name:<input type="text" name="fname" /><br />

Last name: <input type="text" name="lname" /><br />

E-mail: <input type="email" name="email" autocomplete="off" /><br />

</form>

7. pattern属性和SelectionDirection属性

Ø pattern属性

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

Ø 实例--只能包含三个字母的文本字段（数字或特殊字符）：

Country code: <input type="text" name="country_code"pattern="[A-z]{3}"

title="Three letter country code" />

Ø 注意点：pattern 属性适用于以下 <input>类型：text, search, url, telephone, email以及 password。

Ø SelectionDirection属性

对input元素与textarer元素，HTML5增加了selectionDirection属性。当用户在这两个元素中用鼠标选取部分文字是，可以使用该属性来获取选取方向。当用户正向选取文字时，该属性值为“forward”，当用户反向选取文字时，该属性值为backward。当用户没有选取任何文字时，该属性值为forward。

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

Ø indeterminate属性

对于复选框checkbox元素来说，过去只是选取与非选取这两种状态。在HTML5中，可以在JavaScript脚本代码中对该元素使用indeterminate属性，以说明复选框处于“尚未明确是否选取”状态。

Ø image提交按钮的height属性与width属性

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

9.output元素

Ø <output> 标签定义不同类型的输出，比如脚本的输出。

属性

值

描述

for

element_id

定义输出域相关的一个或多个元素。

form

form_id

定义输入字段所属的一个或多个表单。

name

name

定义对象的唯一名称。（表单提交时使用）

Ø 实例执行计算然后在 <output>元素中显示结果：

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

<input type="range" id="a" value="50">100

+<input type="number" id="b" value="50">

=<output name="x" for="a b"></output>

</form>

Ø 应用

四、HTML5改良的input元素

1、url类型

2、email类型

3.date类型

4.time类型

5.datetime类型

6. datetime-local类型

7.month类型

8.number类型

Ø Number类型的input标签可以提交非number类型数据，只不过提交的为空白

9.range类型

Ø 代码示例

<inputtype="range"value="50">

Ø 效果展示

10.search类型

Ø search 输入类型用于搜索字段，比如站内搜索或谷歌搜索等。

搜索字段的外观与常规的文本字段无异。

<inputtype="search">

11.总览

值

描述

button

定义可点击的按钮（大多与 JavaScript 使用来启动脚本）

checkbox

定义复选框。

color

定义拾色器。

date

定义日期字段（带有 calendar 控件）

datetime

定义日期字段（带有 calendar 和time 控件）

datetime-local

定义日期字段（带有 calendar 和time 控件）

month

定义日期字段的月（带有 calendar 控件）

week

定义日期字段的周（带有 calendar 控件）

time

定义日期字段的时、分、秒（带有 time 控件）

定义用于 e-mail 地址的文本字段

file

定义输入字段和 "浏览..."按钮，供文件上传

hidden

定义隐藏输入字段

image

定义图像作为提交按钮

number

定义带有 spinner 控件的数字字段

password

定义密码字段。字段中的字符会被遮蔽。

radio

定义单选按钮。

range

定义带有 slider 控件的数字字段。

reset

定义重置按钮。重置按钮会将所有表单字段重置为初始值。

定义用于搜索的文本字段。

submit

定义提交按钮。提交按钮向服务器发送数据。

tel

定义用于电话号码的文本字段。

text

默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。

url

定义用于 URL 的文本字段。

五、canvas标签（画布）

1. 定义和用法

<canvas> 标签定义图形，比如图表和其他图像。

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

2.属性

属性

值

描述

height

pixels

设置 canvas 的高度。

width

pixels

设置 canvas 的宽度。

3.实例--如何通过canvas 元素来显示一个红色的矩形：

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='#FF0000';

ctx.fillRect(0,0,80,100);

</script>

六、响应式布局：

1.响应式布局介绍

响应式布局是2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端—而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览二诞生的。其目的是为用户提供更加舒适的界面和更好的用户体验。

2.优缺点

优点：1）：面对不同分辨率设备灵活性强

2）：能够快捷解决多设备显示适应问题

缺点：1）兼容各种设备工作量大，效率低下

2）代码累赘，会出现隐藏无用的元素，加载时间加长

3.响应式布局基本实现

4.响应式布局示例

七、新增属性

1.data属性

1.1 定义和用法

data-* 属性用于存储页面或应用程序的私有自定义数据。

data-* 属性赋予我们在所有 HTML元素上嵌入自定义 data属性的能力。

1.2 介绍

HTML 5之前，我们必须依赖于class和rel属性来存储需要在网站中使用的数据片段，这种做法有时会在网站的外观和实用性之间产生冲突。而HTML 5 Data属性的存在就能很好满足需要。

有时我们需要保存时长、速度和作者等更多关于音频本身的信息，而不是音频来源。这就需要用到Data属性了，示例如下：

</audio>

通过这些自定义的Data属性，就能够对audio执行搜寻、过滤以及分组等动作。

1.3怎么使用Data属性

自定义的Data属性的名字必须以data-开头，并且连字号后面至少要有一个符合HTML规范的字符。我们只能在应用程序内部使用data数据，而不应该将它呈现给用户。更重要的是你可以给元素自定义任何数量的Data属性，并赋予任何有意义的值。

1.4什么时候不需要使用Data属性？

当元素已经建立或者更适当的属性时，就不应该用Data属性了。

详情请见https://segmentfault.com/a/1190000002445964。

2.aria属性和role属性

aria的意思是Accessible Rich Internet Application。Accessible一般是为不方便的人士提供的功能，比如windows的放大镜，语音朗读，高对比度主题等。

role的作用是描述一个非标准的tag的实际作用。比如用div做button，那么设置div的 role=“button”，辅助工具就可以认出这实际上是个button。

而aria-*的作用就是描述这个tag在可视化的情境中的具体信息。比如，

辅助工具就会知道，这个div实际上是个checkbox的角色，为选中状态。

这里的 role = “form” 强调这个元素是表单让其更容易匹配读屏软件

这里的class = "form-group"相当于段落标签让段落之间距离增大15px 更好看

<label for= "value">zhanghao<label>

这里的for指向input的id使其点击文字和点击输入框一样的功能

form-control 类的 <input>、<textarea>和 <select>元素都将被默认设置宽度属性为 width: 100%;

阅读全文

0 0