16 HTML5 新增常用属性

5/28/2021 html

# HTML5 新增常用属性

  1. contentEditable

contentEditable:属性只能是true或false,几乎可以为任何元素指定。用于将元素设为可编辑模式。

<p contentEditable='true'> 可编辑内容 </p>
  1. hidden

hidden:属性规定对元素进行隐藏。

<p hidden="hidden">这是一段隐藏的段落。</p>
<p>这是一段可见的段落。</p>
  1. data-*

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

<p data-index=0> 文本内容 </p>
  1. multiple

multiple:属性规定输入域中可选择多个内容。

<input type='file' multiple='multiple' />
  1. required

required:属性约束表单元在提交前必须输入值。

<input type='text' required='required'/>
  1. pattern

pattern:属性规定用于验证输入字段的模式。(正则)

<input type="text" name="country_code" pattern="[A-z]{3}" />

# HTML5 新表单操作

# 新表单

  1. color

type="color" :颜色选择框。

<form>
    <input type='color' />
</form>
  1. email

type="email" :邮件输入框。

<form>
  <input type='email' />
</form>
  1. tel

type="tel" :电话号码输入框。

<form>
  <input type='tel' />
</form>
  1. url

type="url" :网址输入框。

<form>
  <input type='url' />
</form>
  1. number

type="number" :数字输入框。

属性:

  • value {string}:设置文本框默认的内容。
  • max {numebr}:设置最高的数字。
  • min {numebr}:设置最低的数字。
  • step {number}:设置数字间隔。
<form>
  <input type='number' min='1' max='100' step='2' />
</form>
  1. range

type="range" :拖动条,让用户输入数值。

属性:

  • value {string} :设置文本框默认的内容。
  • max {numebr}:设置最高的数字。
  • min {numebr}:设置最低的数字。
<form>
  <input type='range' />
</form>
  1. search

type="search" :搜索框。

<form>
  <input type='search' />
</form>
  1. date

type="date" :选取日、月、年。

<form>
  <input type='date' />
</form>
  1. time

type="time" :选取时间(小时和分钟)。

<form>
  <input type='time' />
</form>
  1. week

type="week" :选取周和年。

<form>
  <input type='week' />
</form>
  1. mouth

type="month" :选取月、年。

<form>
  <input type='month' />
</form>
  1. datetime

type="datetime" :选取时间、日、月、年(UTC 时间)。

<form>
  <input type='datetime' />
</form>
  1. datetime-local

type="datetime-local" :选取时间、日、月、年(本地时间)。

<form>
  <input type='datetime-local' />
</form>

# form 属性

  1. formaction

formaction:属性,表单请求地址,更改表单的action属性值。

<form action='http://www.baidu.com'>
  <!-- 请求到http://www.sohu.com -->
  <input type='sumbit' value='提交' formaction='http://www.sohu.com' />
</form>
  1. fromenctype

fromenctype:属性,表单请求类型,更改表单的 enctype 属性值。

<form enctype='application/x-www-form-urlencoded'>
  <!-- application/x-www-form-urlencoded普通表单类型 -->
  <!-- multipart/form-data文件上传表单类型 -->
  <input type='sumbit' value='提交' fromenctype='multipart/form-data' />
</form>
  1. formmethod

formmethod:属性,表单请求方式,更改表单的method属性值。

<form method='get'>
  <!-- 请求方式设置为post -->
  <input type='sumbit' value='提交' formmethod='post' />
</form>

常用的提交方式有:get和post两种。它们的区别:

  • get是以字节为单位提交,只接受ASCII,而post是以字符为单位提交
  • get是明文方式,提交的数据会显示在地址栏中,一般不用来传输一些敏感的数据,因为传输的数据暴露在外面了,而post是暗文方式提交
  • get在浏览器中回退是无害的,而post会再次提交请求
  • get会被浏览器主动缓存,而post不会,除非手动设置
  • get和post在传输字节数上一般没有限制,个别浏览器会有,可以理解为get一般不超过2K,而post一般不超过2M
  1. form

form:属性,用来指定该input元素属于哪个表单

<form id='myform'>
  <input type='submit' value='提交' />
</form>
<input type="text" name="lname" form="myform" />
  1. novalidate

novalidate 属性规定当提交表单时不对其进行验证。

如果使用该属性,则表单不会验证表单的输入。

注释:novalidate 属性适用于:<form>,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, range 以及 color。

<form action="demo_form.asp" novalidate="novalidate">
  E-mail: <input type="email" name="user_email" />
  <input type="submit" />
</form>

# input 属性

  1. autocomplete

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

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

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

提示:在某些浏览器中,您可能需要手动启用自动完成功能。

属性值:

  • on 默认。规定启用自动完成功能。
  • off 规定禁用自动完成功能。
<input autocomplete="on">
  1. autofocus

autofocus 属性规定当页面加载时 input 元素应该自动获得焦点。如果使用该属性,则 input 元素会获得焦点。

<input autofocus="autofocus">
  1. step

step属性规定输入字段的合法数字间隔(假如 step="3",则合法数字应该是 -3、0、3、6,以此类推)。

提示:step 属性可以与 max 以及 min 属性配合使用,以创建合法值的范围。

注释:step、max 以及 min 属性适用于以下 <input> 类型:number, range, date, datetime, datetimelocal, month, time 以及 week。

<form action="demo_form.asp" method="get">
  <input type="number" name="points" step="3" />
  <input type="submit" />
</form>
  1. multiple

multiple 属性规定输入字段可选择多个值。如果使用该属性,则字段可接受多个值。

注释:multiple 属性使用欧冠与以下 <input> 类型:email 和 file。

<form action="demo_form.asp" method="get">
  Select images: <input type="file" name="img" multiple="multiple" />
  <input type="submit" />
</form>
  1. pattern (regexp)

pattern 属性规定用于验证输入字段的模式。模式指的是正则表达式。

注释:pattern 属性适用于以下 <input> 类型:text, search, url, telephone, email 以及 password 。

提示:请使用标准的 "title" 属性来描述模式。regexp:规定用于验证输入字段的模式。

<input pattern="regexp">
  1. placeholder

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

注释:placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password。

<input placeholder="text">
  1. required

required 属性规定必需在提交之前填写输入字段。如果使用该属性,则字段是必填(或必选)的。

注释:required 属性适用于以下 <input> 类型:text, search, url, telephone, email, password, datepickers, number, checkbox, radio 以及 file。

<form action="demo_form.asp" method="get">
  Name: <input type="text" name="usr_name" required="required" />
  <input type="submit" />
</form>

# HTML5 代码规范

  1. 使用正确的文档类型

始终在文档的首行声明文档类型:<!DOCTYPE html> 如果一贯坚持小写标签,那么可以使用:<!doctype html>

  1. 使用小写元素名

HTML5 元素名可以使用大写和小写字母,推荐使用小写字母。

混合了大小写的风格是非常糟糕的。开发人员通常使用小写。小写风格看起来更加清爽。小写字母容易编写。

  1. 使用小写属性名

HTML5 属性名可以使用大写和小写字母,推荐使用小写字母。

  1. 关闭所有 HTML 元素

在 HTML5 中, 你不一定要关闭所有元素 (例如 <p> 元素),但我们建议每个元素都要添加关闭标签。

  1. 关闭空的 HTML 元素

在 HTML5 中, 空的 HTML 元素也一定要关闭 : <meta charset="utf-8" />

  1. 属性值引号

HTML5 属性值可以不用引号。属性值我们推荐使用引号。

如果属性值含有空格需要使用引号。混合风格不推荐的,建议统一风格。属性值使用引号易于阅读。

  1. 空格和等号

等号前后可以使用空格,但我们推荐少用空格: <link rel="stylesheet" href="styles.css">

  1. 图片属性

图片通常使用 alt 属性。 在图片不能显示时,它能替代图片显示 定义好图片的尺寸,在加载时可以预留指定空间,减少闪烁。

  1. 避免长代码行

当使用 HTML 编辑器时,通过左右滚动来阅读 HTML 代码很不方便。请尽量避免代码行超过 80 个字符。

  1. HTML 注释

短注释应该在单行中书写,并在 <!-- 之后增加一个空格,在 <!-- 之前增加一个空格。

长注释,跨越多行, 应该通过 在独立的行中书写。长注释更易观察,如果它们被缩进两个空格的话。

  1. 样式表

    • 开括号与选择器位于同一行。
    • 在开括号之前用一个空格。
    • 使用两个字符的缩进。
    • 在每个属性与其值之间使用冒号加一个空格。
    • 在每个逗号或分号之后使用空格。
    • 在每个属性值对(包括最后一个)之后使用分号。
    • 只在值包含空格时使用引号来包围值。
    • 把闭括号放在新的一行,之前不用空格。
    • 避免每行超过 80 个字符。
更新时间: Sunday, May 30, 2021 13:21