第十六章

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”

《HTML5与CSS3基础教程》学习笔记 ——Four Day的更多相关文章

  1. 《HTML5与CSS3基础教程》笔记

    以下笔记摘要页码基于 人民邮电出版社 2013年1月第1版 英文书名:HMTL5 and CSS3 Visual Quickstart Guide (Seven Edition) 前言 P2: 渐进增 ...

  2. 《HTML5与CSS3基础教程(第8版)》

    <HTML5与CSS3基础教程(第8版)> 基本信息 原书名:HTML and CSS:visual quickstart guide 作者: (美)Elizabeth Castro    ...

  3. HTML5与CSS3基础教程(第7版) 高清PDF扫描版​

    HTML5与CSS3基础教程(第7版)试读不仅介绍了文本.图像.链接.列表.表格.表单.多媒体等网页元素,也介绍了如何为网页设计结构.布局,添加动态效果.格式化等形式,此外还涉及调试和发布.聚合和吸引 ...

  4. HTML5与CSS3基础教程(第8版) PDF扫描版​

    <HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分 ...

  5. 【02】HTML5与CSS3基础教程(第8版)(全)

    [02]HTML5与CSS3基础教程(第8版)(全)   共392页.   (魔芋:大体上扫了一遍.没有什么新东西,都是入门的一些基础知识.) 已看完.       [美]elizabeth cast ...

  6. HTML5与CSS3基础教程第八版学习笔记11~15章

    第十一章,用CSS进行布局 开始布局注意事项 1.内容与显示分离 2.布局方法:固定宽度和响应式布局 固定宽度,整个页面和每一栏都有基于像素的宽度 响应式布局也称为流式页面,使用百分数定义宽度 3.浏 ...

  7. 读书笔记之《HTML5 与 CSS3 基础教程》

    1· 读前预期 考虑到对于 Web 开发零基础,凡涉足一件未知的任务,最好先理清任务的逻辑结构,然后有目的地逐步学习.为实现我们的需求和设计,必须要学习前端.后端.服务器等一系列暂时陌生的知识,在此, ...

  8. Python基础教程学习笔记:第一章 基础知识

    Python基础教程 第二版 学习笔记 1.python的每一个语句的后面可以添加分号也可以不添加分号:在一行有多条语句的时候,必须使用分号加以区分 2.查看Python版本号,在Dos窗口中输入“p ...

  9. HTML5与CSS3基础教程第八版学习笔记16-21章

    第十六章,表单 HTML5引入了新的表单元素.输入类型和属性,以及内置的对必填字段.电子邮件地址.URL以及定制模式验证. 元素: <input type="email"&g ...

  10. HTML5与CSS3基础教程第八版学习笔记7~10章

    第七章,CSS构造块 CSS里有控制基本格式的属性(font-size,color),有控制布局的属性(position,float),还有决定访问者打印时在哪里换页的打印控制元素.CSS还有很多控制 ...

随机推荐

  1. onConfigurationChanged is not called&& 翻转屏幕不执行onConfigurationChanged方法&&onConfigurationChanged不执行

    我总结出一句话: 如果target sdk>=13,必须使用如下方式声明activity:android:configChanges="orientation|screenSize&q ...

  2. Effective_java之二:慎用重载函数

    每周写一篇技术博客的愿望一直没实现, 从这周開始每周五晚10点是写博客的时间 OOP的一个重要特性就是多态,实现多态的目的有多种途径.比方:重载overload.重写overwite.面向接口编程等等 ...

  3. Linux下判断cpu物理个数、几核

    自己服务器的输出 1. 查看物理CPU的个数   #cat /proc/cpuinfo |grep "physical id"|sort |uniq|wc -l    1 2. 查 ...

  4. UNIX/Linux网络编程基础:图解TCP/IP协议栈

    目录 1.主机到网络层协议:以太网协议 2.IP协议 3.网际控制报文协议(ICMP) 4.传输控制协议(TCP) 5.用户数据报文协议(UDP) 6.流控制传输协议(SCTP) 7.地址解析协议(A ...

  5. c#给用户控件添加事件处理程序

    1.首先在usercontrol后台添加如下代码: public partial class MyControl: UserControl { //添加事件代理       public event ...

  6. 关于调试程序接收通过adb发送带有参数的广播问题

    一句话,如果你检查完格式没有错:关于通过adb启动Activity.activity.service以及发送broadcast的命令 am broadcast -a myAction --es cit ...

  7. 日本电商Rakuten:最凶猛的国际扩张者

    这是普及社(puji-she)第五篇关于电商开放平台的文章,今天关注日本的Rakuten,它是一家综合性的企业,核心业务包括电子商务.旅游.信用 及支付.金融证券.新闻门户等.本文关注Rakuten的 ...

  8. 9. Android框架和工具之 SlidingMenu(抽屉菜单)

    详见为知笔记:Android / Android用户界面优化 / Android SlidingMenu菜单栏程序设计

  9. [翻译] CBStoreHouseTransition

    CBStoreHouseTransition What is it? A custom transition inspired by Storehouse iOS app, also support ...

  10. asp.net mvc 从数据库中读取图片的实现代码

    首先是创建一个类,继承于ActionResult,记住要引用System.Web.Mvc命名空间,如下: public class ImageResult : ActionResult { publi ...