表单和输入
1、文本域、密码域、单选按钮、复选框、提交按钮、下拉列表、预选下拉列表。
<form>
文本域：<input type="text" name="">
密码域：<input type="password" name="">
单选：a<input type="radio" name="">
复选：a<input type="checkbox" name="">b<input type="checkbox" name="">
<input type="submit" name="">
<select>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
<select>
<option value="">1</option>
<option value="">2</option>
<option value="" selected>3</option>
</select>
</form>
2、点击其中一个文本标签选中选项
<form action="#">
<label for="a">a</label>
<input type="radio" name="letter" id="a" value="a">
<label for="b">b</label>
<input type="radio" name="letter" id="b" value="b">
<input type="submit" name="">
</form>
3、对表单中的相关元素进行分组
<form action="#" method="get">
<fieldset>
<legend>this is a demo</legend>
A:<input type="text" name="">
B:<input type="text" name="">
</fieldset>
</form>
4、select属性
disabled：禁用下拉列表
multiple：可选择多个选项
（multiple 属性是一个布尔属性。在不同操作系统和浏览器中，选择多个选项的差异。对于 windows：按住 Ctrl 按钮来选择多个选项；对于 Mac：按住 command 按钮来选择多个选项）
required：必须选择一项
size：下拉列表中可见的项目
<select disabled="true">
<option>111</option>
<option>222</option>
<option>333</option>
<option>444</option>
</select>
<select multiple="true">
<option>111</option>
<option>222</option>
<option>333</option>
<option>444</option>
</select>
<select required>
<option>111</option>
<option>222</option>
<option>333</option>
</select>
<select size="2">
<option>111</option>
<option>222</option>
<option>333</option>
</select>
5、<optgroup>标签:把相关的选项组合在一起 。
<select>
<optgroup label="ABC">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</optgroup>
<optgroup label="123" disabled>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</optgroup>
</select>
6、<datalist> 为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。使用 <input> 元素的 list 属性来绑定 <datalist> 元素。
<form action="#" method="get">
<input list="abc">
<datalist id="abc" name="A">
<option value="Aaaa">
<option value="Bbbb">
<option value="Cccc">
<option value="Dddd">
</datalist>
<input type="submit">
</form>
7、<keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。
<form action="#" method="get">
用户名：<input type="text" name="">
加密： <keygen name="security"></keygen>
<input type="submit">
</form>
8、<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>
9、HTML音频/视频/多媒体
<audio controls>
<source src="a.ogg" type="audio/ogg">
<source src="a.mp3" type="audio/mpeg">
</audio>
<!-- 音频 -->
<video width="320" height="240" controls>
<source src="a.mp4" type="video/mp4">
<source src="a.ogg" type="video/ogg">
</video>
<!-- 视频 -->
<embed src="helloworld.swf">
<!-- 定义嵌入的内容 -->
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en"
label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no"
label="Norwegian">
</video>
<!-- 用于规定字幕文件或其他包含文本的文件，当媒体播放时，这些文件是可见的。 -->
10、 contenteditable 属性指定元素内容是否可编辑。当元素中没有设置 contenteditable 属性时，元素将从父元素继承。
<p contenteditable="true">这是一个段落。是可编辑的。尝试修改文本。</p>
11、data-* 属性：用于存储私有页面后应用的自定义数据： 1、属性名不要包含大写字母，在 data- 后必须至少有一个字符。 2、该属性可以是任何字符串。
<h1>物种</h1>
<p>点击一个物种，看看它是什么类型：</p>
<ul>
<li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
<li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>
<li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>
</ul>
<script>
function showDetails(animal)
{
var animalType = animal.getAttribute("data-animal-type");
alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
12、hidden 属性规定对元素进行隐藏。隐藏的元素不会被显示。如果使用该属性，则会隐藏元素。可以对 hidden 属性进行设置，使用户在满足某些条件时才能看到某个元素（比如选中复选框，等等）。然后，可使用 JavaScript 来删除 hidden 属性，使该元素变得可见。
<p>这是可见的段落</p>
<p hidden>这是隐藏的段落</p>
网友评论