HTML5 연구 노트의 간결한 버전(6): 새로운 속성(1)
- 黄舟원래의
- 2017-01-21 16:46:291925검색
a 및 영역 아래의 미디어 속성
링크 요소와의 일관성을 유지하기 위해 a 요소 및 영역 요소에도 미디어 속성이 추가되며 이는 href가 존재할 때만 유효합니다. 미디어 속성은 대상 URL이 최적화된 미디어/장치를 의미합니다. 기본값은 all입니다. 자세한 구문 사양은 http://dev.w3.org/csswg/css3-mediaqueries/#media0
을 참조하세요.
코드 예:
<a href="att_a_media.asp?output=print" media="print and (resolution:300dpi)"> HTML5 a media attribute. </a>
area 아래의hreflang, type, rel 속성
a 요소 및 link 요소와의 일관성을 유지하기 위해area 요소는 hreflang, type, rel 및 다른 속성.
속성
값
설명
hreflang
언어_코드
대상 URL의 언어를 지정합니다
미디어
미디어 쿼리
대상 URL이 어떤 미디어/장치에 최적화되어 있는지 지정
rel
대체, 작성자, 북마크, 외부 , help , License, next, nofollow, noreferrer, prefetch, prev, search, sidebar, tag
현재 문서와 대상 URL 간의 관계를 지정합니다
type
mime_type
대상 URL의 MIME 유형을 지정합니다
base 아래의 대상 속성
base 아래의 대상 속성은 a의 대상 속성과 동일하며 이전의 많은 항목이 있습니다. 브라우저 버전은 오래 전에 지원되었습니다.
참고 1: 모든 연결 요소 앞에 대상을 선언해야 합니다.
참고 2: 선언이 여러 개인 경우 첫 번째 선언이 우선합니다.
<!DOCTYPE html>
<html>
<head>
<title>This is an example for the <base> element</title>
<base href="http://www.example.com/news/index.html">
</head>
<body>
<p>Visit the <a href="archives.html">archives</a>.</p>
</body>
</html>위 링크를 클릭하면 http://www.example.com/news/archives.html로 이동합니다.
meta
charset 아래의 charset 속성은 문서의 인코딩 방법을 정의하는 데 사용됩니다. 이 속성이 XML로 정의된 경우 charset 값은 대소문자를 구분하지 않는 ASCII여야 합니다. UTF-8 - XML 문서는 인코딩 방법으로 UTF-8을 사용해야 하기 때문입니다.
참고: 메타 속성의 charset 속성은 XML 문서에 영향을 주지 않습니다. 이는 XHTML을 사용한 직접 마이그레이션의 편의를 위한 것입니다.
charset 속성을 사용하여 여러 메타 요소를 선언할 수 없습니다.
HTML4에서는 다음과 같이 정의해야 합니다.
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
HTML5에서는 다음과 같이 정의합니다.
<meta charset="ISO-8859-1">
autofocus 속성
HTML5는 입력, 선택, 텍스트 영역 및 버튼 요소에 자동 초점 속성을 추가합니다(숨겨진 입력은 사용할 수 없음). 이제부터 페이지 로드 시기를 정의하는 선언적 방법을 제공합니다. , 포커스는 현재 요소에 자동으로 적용됩니다. 자동 초점을 사용하면 사용자 경험이 향상될 수 있습니다. 예를 들어 로그인 페이지에서 설정하면 페이지가 로드된 후 자동으로 사용자 이름의 텍스트 상자에 초점이 설정됩니다.
<input maxlength="256" name="loginName" value="" autofocus> <input type="submit" value="Login">
참고 1: autofocus 속성은 페이지당 한 번 선언됩니다.
참고 2: 페이지에 자동 초점을 설정할 필요는 없습니다.
placeholder属性
input和textarea元素新增加了placeholder属性，该属性是提升用户输入内容。当用户点击的时候，该内容文本自动消失，离开焦点并且值为空的话，再次显示。以前我们都是使用JavaScript代码来实现，其实蛮复杂的，有了placeholder属性就爽了，直接写成下面下这样的代码：
<input type="username" placeholder="请输入你的用户名">
form属性
form属性（不是ff9c23ada1bcecdd1a0fb5d5a0f18437元素），是一个划时代的属性，它允许你将ff9c23ada1bcecdd1a0fb5d5a0f18437表单里的表单控件声明在表单外门，只需要在相应的控件上设置form属性为指定的ff9c23ada1bcecdd1a0fb5d5a0f18437表单的id就行了，不需要非得把元素声明在ff9c23ada1bcecdd1a0fb5d5a0f18437元素里了，解放啦。
代码如下：
<label>Email: <input type="email" form="foo" name="email"> </label> <form id="foo"></form>支持该属性的元素有：input, output, select, textarea, button, label, object和fieldset。
required属性
required属性是一个验证属性，表明该控件是必填项，在submit表单之前必须填写。可用的元素是：input, select和textarea（例外： type类型为hidden, image或类似submit的input元素）。
如果在select上使用required属性，那就得设置一个带有空值的占位符option。代码如下：
<label>Color: <select name=color required> <option value="">Choose one <option>Red <option>Green <option>Blue </select></label>
fieldset下的disabled属性
当fieldset的设置disabled属性时，其所有的子控件都被禁用掉了，但不包括legend里的元素。name属性是用来脚本访问的。
代码1：
<form> <fieldset name="clubfields" disabled> <legend> <label> <input type=checkbox name=club onchange="form.clubfields.disabled = !checked"> Use Club Card </label> </legend> <p><label>Name on card: <input name=clubname required></label></p> <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p> <p><label>Expiry date: <input name=clubexp type=month></label></p> </fieldset> </form>
当点击legend里的checkbox的时候，会自动切换fieldset子元素的disabled状态。
代码2：
<form>
<fieldset name="clubfields">
<legend>
<label>
<input type="checkbox" name="club" onchange="form.clubfields.disabled = !checked">
Use Club Card
</label>
</legend>
<p>
<label>
Name on card:
<input name="clubname" required></label></p>
<fieldset name="numfields">
<legend>
<label>
<input type="radio" checked name="clubtype" onchange="form.numfields.disabled = !checked">
My card has numbers on it
</label>
</legend>
<p>
<label>
Card number:
<input name="clubnum" required pattern="[-0-9]+"></label></p>
</fieldset>
<fieldset name="letfields" disabled>
<legend>
<label>
<input type="radio" name="clubtype" onchange="form.letfields.disabled = !checked">
My card has letters on it
</label>
</legend>
<p>
<label>
Card code:
<input name="clublet" required pattern="[A-Za-z]+"></label></p>
</fieldset>
</fieldset>
</form>在这个例子，当你外面的 "Use Club Card" checkbox没有选中的时候，里面的子控件都是被禁用的，如果选中了，两个radiobutton都可用了，然后可以选择哪一个子fieldset你想让它可用。
input下的新属性(autocomplete, min, max, multiple, pattern, step)
input下增加了几个用于约束输入内容的属性（autocomplete, min, max, multiple, pattern和step），目前只有部分浏览器支持required和autocomplete属性，其它属性尚未支持。
autocomplete 属性规定输入字段是否应该启用自动完成功能, 自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
<form action="demo_form.asp" method="get" autocomplete="on"> 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 /> <input type="submit" /> </form>
注释：autocomplete 属性适用于 ff9c23ada1bcecdd1a0fb5d5a0f18437，以及下面的 d5fd7aea971a85678ba271703566ebfd 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。
另外也可以声明一个list属性，用来和存放数据的datalist元素关联：
<form> <label>Homepage: <input name=hp type=url list=hpurls></label> <datalist id=hpurls> <option value="http://www.google.com/" label="Google"> <option value="http://www.reddit.com/" label="Reddit"> </datalist> </form>
当input为空的时候，双击它，就会弹出提示选项（选项内容就是定义的label（Google/Reddit））。选择一个label就会将对应的value地址更新到input里（目前FF支持）。
datalist的声明形式可以有多种：
<datalist id="breeds">
<option value="Abyssinian">
<option value="Alpaca">
<!-- ... -->
</datalist>
或者
<datalist id="breeds">
<label>
or select one from the list:
<select name="breed">
<option value=""> (none selected)
<option>Abyssinian
<option>Alpaca
<!-- ... -->
</select>
</label>
</datalist>另外，当input的type为image的时候，input还支持width和height属性用来指定图片的大小。
위 내용은 HTML5 학습노트(6)의 간략한 내용입니다. 새로운 속성의 내용(1)에 대한 자세한 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!