HTML5学习笔记
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
创建一个文件选择器 type="file"
创建一个提交按钮 type="submit" name value
创建带图片的提交按钮 type="image"
创建一个电子邮件输入框，自动检查是否符合格式 type="email"
创建一个 URL 输入框，自动检查是否为有效链接 type="url"
创建一个搜索框
<meta>
放在<head>中标记一些属性，也许你认为这些代码可有可无。其实如果你
description keywords robots author pragma expires
能够用好 meta 标签，会给你带来意想不到的效果，例如加入关键字会自 动被大型搜索网站自动搜集；可以设定页面格式及刷新等等。 对页面内容的描述 关键词 搜索引擎能否将本页作为搜索结果 作者 防止浏览器缓存 何时禁用（有效期）
单元格间距
border
边框宽度
bgcolor
background color 背景色
Forms
<form>
控件要包含在<form>中，必须带动作属性、method、id
action
该属性值是服务器上处理动作的 URL
method id
Forms can be sent using one of two methods: get or post. get相当于只读，post 相当于读写，当较短且不更改数据库是用get，当涉及密码等敏感信息或较长或更改 数据库时用post
创建一组 一个框，对组的说明
Extra Markup
<!-- --> <div> <span> <iframe> src height width scrolling frameborder seamless
评论 成组 内联元素，可以用 CSS 编辑样式 页面内的一个框，像谷歌地图 链接地址 高 宽 是否有 scrollbar 是否有边框（html5 不支持） html5 新增
type="search"
placeholder
占位符
创建一个时间选框 type="date"
创建一个不可见项，例如用来获取用户在哪一页 type="hidden"
<select> name
创建下拉选单
<textarea>
创建一个多行输入控件
<label>
标签
for
<fieldset> <legend>
<p>和<img>的顺序不同，显示的结果也不同
align 效果：
<figure> <figcaption>
Tables
<table> <tr>
将图片和说明联系在一起 html5 新加，为了使网页作者能为图片添加说明
用于创建一个网格 一行
<td> <th> colspan rowspan
一个单元格 和<td>类似，黑粗体较醒目 <td colspan="2">Geography</td>横向跨过几列 <td rowspan="2">Movie</td>纵向跨过几行
<thead>
表头
<tbody>
表体
<tfoot>
表尾
如果有个列表的长度大于屏幕，那么只有中间内容滚动，表头和表尾不动
width
表格宽度
cellpadding
cellpadding attribute to add space inside each cell of the table
cellspacing
<source> src type codecs
<audio> src controls autoplay preload loop <source> src type
在<video>标签内部用<source> 资源地址 资源的类型 The codec that was used to encode the video is supplied within the type attribute.
Text
<strong> <em> <blockquote> <q> <abbr> <cite> <dfn> <address> <ins> <del> <s>
强调重要影响（黑体） 强调语义发生了微妙的变化（斜体） 整段引用 较短的引用 缩略词，鼠标经过时有全文提示 例证 definition解释新术语Safari and Chrome do not change its appearance. 蓝体带下划线，提供一个地址链接 底下带下划线，说明该部分是后加上去的 在该部分中央划横，说明该部分被去掉了 在该部分中央划横，说明这部分不再准确了（无关了）
the definition 定义的内容
Links
<a> mailto: target:
链接标签 <a href="mailto:jon@example.org">Email Jon</a> 邮件链接 <a href="http://www.imdb.com" target="_blank"> 在新一页面打开
添加一个音频 参考Βιβλιοθήκη Baidu前的
参考书目：《HTML&CSS Design and Build Websites》
size
不怎么用了
maxlength
输入的最大长度
创建一个密码输入控件 type="password" name size maxlength
创建一个 ratio button 单选按钮
type="radio"
name
value
chacked
用的时候 checked="checked"
创建一个 chackbox 复选按钮 type="checkbox" name value chacked
The value is used to identify the form distinctly from other elements on the page
<input>
用来创建几种不同的控件，type 属性决定到底是什么类型的控件
创建一个单行的输入控件
type="text"
name
让服务器知道该怎样处理该数据
Lists
<ol> <ul> <li> <dl> <dt> <dd>
ordered list 创建一个有序列表（每项前边是 12345） unordered list 无序列表（每项前面是黑点，第二级是空心点） 列表中的内容（一行） definition list 定义列表 term being defined 说明这个词是被定义的
HTML5 标签含义
说明：
蓝色——html 标签 黑色——解释 橙色——特殊效果的实现 绿色——例子 粉色——属性
Structure
<html> <body> <h2> <h3> <h4> <p> <b> <i> <sup> <sub> <br /> <hr />
段 black 黑体 italics 斜体 上角标 下角标 换行 中间隔条横线
src alt title height 、width align
source,告诉浏览器到哪里找这张图片 如果你看不到这张图片，网页显示一 X 后跟文字说明 类似 abbr，鼠标悬停时有文字提示 图片的高和宽，以像素为单位
<p><img src="images/bird.gif" alt="Bird" width="100" height="100" align="left" />对齐方式，left 左 right 右 top 上 middle 中 button 下
Flash，Video&Audio
<video> src poster width、height controls autoplay loop preload none auto metadata
添加一个视频 视频的路径 在加载视频播放之前显示的图片 宽、高 启用浏览器自身的播放设置 自动播放 循环播放 预加载 在用户点击播放之前不下载视频 在页面载入过程中就开始加载视频 元数据（Metadata）是定义数据的数据，类似平常使用的度量单位 The browser should just collect information such as the size, first frame, track list, and duration.
同一页面内跳转：id 与#后面的对应
Images
<img>
<img src="images/quokka.jpg" alt="A family of quokka" title="The quokka is an Australian marsupial that is similar in size to the domestic cat." /> 这个标签不需要闭合