《HTML5与CSS3基础教程》学习笔记 ——Four Day
第十六章
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的更多相关文章
- 《HTML5与CSS3基础教程》笔记
以下笔记摘要页码基于 人民邮电出版社 2013年1月第1版 英文书名:HMTL5 and CSS3 Visual Quickstart Guide (Seven Edition) 前言 P2: 渐进增 ...
- 《HTML5与CSS3基础教程(第8版)》
<HTML5与CSS3基础教程(第8版)> 基本信息 原书名:HTML and CSS:visual quickstart guide 作者: (美)Elizabeth Castro ...
- HTML5与CSS3基础教程(第7版) 高清PDF扫描版
HTML5与CSS3基础教程(第7版)试读不仅介绍了文本.图像.链接.列表.表格.表单.多媒体等网页元素,也介绍了如何为网页设计结构.布局,添加动态效果.格式化等形式,此外还涉及调试和发布.聚合和吸引 ...
- HTML5与CSS3基础教程(第8版) PDF扫描版
<HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分 ...
- 【02】HTML5与CSS3基础教程(第8版)(全)
[02]HTML5与CSS3基础教程(第8版)(全) 共392页. (魔芋:大体上扫了一遍.没有什么新东西,都是入门的一些基础知识.) 已看完. [美]elizabeth cast ...
- HTML5与CSS3基础教程第八版学习笔记11~15章
第十一章,用CSS进行布局 开始布局注意事项 1.内容与显示分离 2.布局方法:固定宽度和响应式布局 固定宽度,整个页面和每一栏都有基于像素的宽度 响应式布局也称为流式页面,使用百分数定义宽度 3.浏 ...
- 读书笔记之《HTML5 与 CSS3 基础教程》
1· 读前预期 考虑到对于 Web 开发零基础,凡涉足一件未知的任务,最好先理清任务的逻辑结构,然后有目的地逐步学习.为实现我们的需求和设计,必须要学习前端.后端.服务器等一系列暂时陌生的知识,在此, ...
- Python基础教程学习笔记:第一章 基础知识
Python基础教程 第二版 学习笔记 1.python的每一个语句的后面可以添加分号也可以不添加分号:在一行有多条语句的时候,必须使用分号加以区分 2.查看Python版本号,在Dos窗口中输入“p ...
- HTML5与CSS3基础教程第八版学习笔记16-21章
第十六章,表单 HTML5引入了新的表单元素.输入类型和属性,以及内置的对必填字段.电子邮件地址.URL以及定制模式验证. 元素: <input type="email"&g ...
- HTML5与CSS3基础教程第八版学习笔记7~10章
第七章,CSS构造块 CSS里有控制基本格式的属性(font-size,color),有控制布局的属性(position,float),还有决定访问者打印时在哪里换页的打印控制元素.CSS还有很多控制 ...
随机推荐
- AutoCAD按坐标打印图纸
前几天公司要求按坐标打印DWG文件,中间走了不少弯路,好在已经搞定了,整理一下分享给大家,希望后来人少走弯路. 1. 设计需求: 公司的图纸用AutoCAD2010做成,通常一个项目的所有图纸都存放在 ...
- [Angular 2] ElementRef, @ViewChild & Renderer
ElementRef: In Angular2 Doc, it suggest to "avoid" using ElementRef. It access DOM directl ...
- Perl的DATA文件句柄
有太多次写完一个perl程序,需要另外新建一个文件来测试,每次觉得很繁琐,但又不得不这么做.没想到原来perl已经提供了解决方案,这就是DATA. 使用很简单,见下面这个例子: #!/usr/bin/ ...
- [android]fmodex在某些android设备上声音延迟Latency
// The default on windows in bufferlength = 1024 and numbuffers = 4 hr = g_pFmodSystem->setDSPBuf ...
- Java再学习——线程之创建
Java创建线程有两种方法,一种是继承Thread,另一种实现Runnable或Callable接口. 一,继承Thread public class APP { public static void ...
- Centos7升级gcc学习笔记
概述 最近在学习<深入应用C++11-代码与优化与工程级应用>,我的gcc版本是gcc-4.8.5是支持C++11的,但是我在作者的github上看了一些C++例子,其中有些是C++14的 ...
- uiscrollerview循环滚动(参考第三方库:HMBannerView)https://github.com/iunion/autoScrollBanner
#import <UIKit/UIKit.h> #import "HMBannerView.h" @interface ViewController : UIViewC ...
- SQL查询中的in与join效率比较
大多数情况下,程序员比较喜欢使用in来查询符合某些条件的数据,最近在查询某个角色有哪些用户的方法中,使用了in语句: ) FROM baseuser AND BaseUser.Id IN (SELEC ...
- UILabel的简单用法和实际操作
1.UILabel **//设置文字 label.text = @"欢迎收看灌篮高手,我是安溪教练";**//设置文字颜色label.textColor = [UIColor ...
- Oracle基础 数据泵导出/导入Expdp/impdp(转)
一.EXPDP和IMPDP使用说明 Oracle Database 10g引入了最新的数据泵(Data Dump)技术,数据泵导出导入(EXPDP和IMPDP)的作用 1)实现逻辑备份和逻辑恢复. 2 ...