《HTML5与CSS3基础教程》学习笔记 —

第十六章

1、输入和元素

电子邮件框 <input type="email">

搜索框 <input type="search">
电话框 <input
type="tel">
URL 框 <input
type="url">
以下元素得到了部分浏览器的支持
日期 <input type="date">

数字 <input type="number">
范围 <input type="range">
数据列表

<input type="text" name=" "  list="fruit" />

<datalist>

<option> </option>

<option> </option>

<option> </option>

</datalist>

下面的输入或者元素得到的支持很少， W3C 指出它们在 2014 年定案之时很可能不会列入 HTML5
颜色 <input type="color" />

全局日期和时间<input
type="datetime" />
局
部
日
期
和时间<input type="datetime-local" />
月 <input type="month" />
时间 <input type="time" />
周 <input type="week" />
输出 <output></output>

2、属性：

1)
accept
限制用户可上传文件的类型

2)
autocomplete
如果对 form 元素或特定的字段添加

3)
autocomplete="off"，就会关闭浏览器的对该表单或该字段的自动填写功能。默认值为 on

4)
autofocus
页面加载后将焦点放到该字段

5)
multiple
允许输入多个电子邮件地址，或者上传多个文件

6)
list
将 datalist 与 input 联系起来

7)
maxlength
指定 textarea 的最大字符数（在 HTML5 之前的文本框就支持该特性）

8)
pattern
定义一个用户所输入的文本在提交之前必须遵循的模式placeholder 指定一个出现在文本框中的提示文本，用户开始输入后该文本消失

9)
required
需要访问者在提交表单之前必须完成该字段

10) formnovalidate 关闭 HTML5 的自动验证功能。应用于提交按钮 novalidate
关闭 HTML5 的自动验证功能。应用于表单元素

3、 <fildset>可以增加<legend>来添加标题

4、 <label>特殊的属性：的值与一个表单字段的 id 的值相同

eg:

 <p class="row">

<label for="first-name"> First Name:</label>

<input type="text" id="first-name"  name="first_name"  class="field-large" />

</p>

5、命名习惯：for、id、name

1)
单个单词：三个一致

2)
多个单词：for、id用-隔开，name用_隔开

6、文本框

eg：

<textarea id="bio" name="bio" cols="40"

 rows="5" class="field-large"></textarea>

7、对选择框选项进行分组：<optgroup>

eg:

<select id="referral" name="referral">

<optgroup label=" ">

<option value=" "> </option>

<option value=" "> </option>

</optgroup>

<optgroup label=" ">

<option value=" "> </option>

<option value=" "> </option>

</optgroup>

</select>

8、让访问者上传文件：enctype="multipart/form-data"

<form method="post"

action="show-data.php"  enctype="multipart/form-data">

9、创建隐藏字段：type=”hidden”

1)
name=”提交给服务器的信息”

2)
value=”要提交的信息本身”

10、
根据状态为表单设置样式

第十七章

1、
视频文件格式：.ogg、.mp4、.webm

2、
video属性

1)
src（源）指定视频文件的
URL

2)
autoplay（自动播放）当视频可以播放时立即开始播放

3)
controls（控件）添加浏览器为视频设置的默认控件

4)
muted（静音）让视频静音

5)
loop（循环）让视频循环播放

6)
poster（海报）指定视频加载时要显示的图像（而不显示视频的第一帧）。接受所需图像文件的 URL

7)
width（宽度）视频的宽度（以像素为单位），通常默认为 300

8)
height（高度）视频的高度（以像素为单位），通常默认为 150

9)
preload（预加载）告诉浏览器要加载的视频内容的多少。可以是以下三个值：

none
表示不加载任何视频

metadata 表示仅加载视频的元数据（如长度、尺寸等）
auto

3、
添加控件和自动播放：controls、autopaly

4、
循环播放：loop

5、
海报图像：poster=”xx.jpg”

6、
防止预先加载视频：preload=”none/auto/metadata(最好)”

7、
使用多种来源的视频和备用文本（音频还没有加载出来显示文本）

eg:

<video width="369" height="208" controls>

<source src="paddle-steamer.mp4"  type="video/mp4">

<source src="paddle-steamer.webm" type="video/webm">

<p><a href="paddle-steamer.mp4">Download the video</a></p>

</video>

8、音频格式：.ogg/.mp3/.wav/.aac/.mp4/opus

9、添加音频：<audio src=”” controls></audio>

10、
音频属性

11、
提供带备用内容的多个视频源

1)        <script src="build/jquery.js"> </script>

<script src="build/mediaelement-and- player.min.js"></script>

<link rel="stylesheet" href="build/ mediaelementplayer.min.css" />

2)        <!-- 下面的代码放在所有内容之后 -->

<script>

$('audio/video').mediaelementplayer();

</script>

第十八章

1、 scope=”col/row” 列/行的标题单元格

2、跨越多行和多列rowspan/colspan=”n”