- HTML(Hyper Text Markup Language),超文本标记语言
- XHTML(extensible Hyper Text Markup Language),扩展的超文本标记语言
HTML 5 的语法变化
- 标签不再区分大小写
- 元素可以省略结束标签
- 允许省略属性值的属性HTML 5 中允许省略属性值的属性:checked、readonly、disabled、selected、multiple、required 等
- 允许属性值不使用引号
HTML 元素
HTML 文档声明:
根标签
开始标签、属性、元素内容、结束标签
空标签(没有内容的元素),没有闭合标签
- 在 HTML 中,空标签没有结束标签
- 在 XHTML 中,空标签必须在开始标签中被关闭(在右尖括号前加上反斜杠)
- 如:、、、、
、 、 、、、、 、、、 、、 、 、 、<!DOCTYPE html>、
HTML 属性
属性值应该始终被包括在引号内
核心属性
- id:定义元素的唯一id
- class:定义元素的类名(classname)
- style:规定元素的行内样式(inline style)
- title:规定元素的额外信息,可在工具提示中显示(在鼠标移到元素上时显示一段工具提示文本)
- hidden:为 true 时,通知浏览器不显示该组件
文档头部 <head>
- 在 元素中可以插入脚本(scripts)、样式文件(CSS)、及各种 meta 信息
- ,定义头部标签
,定义文档标题 - <meta>,基本的元数据,通常以 名称/值 对出现,属性:name(把 content 属性关联到一个名称)、http-equiv(把 content 属性关联到 HTTP 头部)、content(必需属性,与 http-equiv 或 name 属性相关的元信息)、charset(文档的字符编码)
- <link>:定义文档与外部资源之间的关系,属性:rel(必需属性,当前文档与被链接文档之间的关系,如 stylesheet、icon)、type(被链接文档的 MIME 类型)、href(被链接文档的位置)
- <style>,用于引入样式定义,必需属性:type
- <script>,用于加载脚本文件,属性 type:指示脚本的 MIME 类型,默认值是 "text/javascript";async 属性:仅适用于外部脚本,规定脚本将被异步执行,属性值 "async";defer 属性:规定是否对脚本执行进行延迟,直到页面加载为止,属性值 "defer"
<script type="text/javascript">
function goPage(num) {
// 找到表单,给 currentPage 设值,然后提交
var form1= document.getElementById("form1");
form1.currentPage.value=num;
form1.submit();
}
</script>
块
块级元素(block element)
- 总是在新行上开始
- 高度,行高以及外边距和内边距都可控制
- 宽度缺省是它的容器的 100%,除非设定一个宽度
- 可以容纳内联元素和其它块级元素
- 常见块级元素:
、
、、
- 、、、
内联元素(inline element)
- 和其它元素都在一行上
- 高、行高及外边距和内边距不可改变
- 宽度就是它的文字或图片的宽度,不可改变
- 内联元素只能容纳文本或者其它内联元素
- 常见内联元素:、、、、、、、
布局
- ,块级元素,用于组合其他 HTML 元素的容器
- ,内联元素,用于组合文档中的内联元素(默认不会换行)
- ,内联元素,用于组合文档中的内联元素(默认不会换行)
文档章节
基本标签
至
,标题
,段落,会自动在其前后创建一些空白
,换行,空标签
,水平线,空标签- ,注释
文本格式化
- ,定义字体颜色、大小、字体,属性:color、size、face
- ,定义粗体文本
- ,定义粗体文本
- ,定义斜体字
- ,定义强调文本,实际效果与斜体文本差不多
- ,定义小号字体文本
- ,定义下标文本
- ,定义上标文本
- ,定义等宽文本
- ,定义插入字
,定义删除字- ,定义带有记号(高亮)的文本
- ,定义作品的标题
,定义一个短的引用,在引用的周围插入引号
- ,定义文本显示方向,属性 dir 的值:ltr(左到右)、rtl(右到左)
,预格式文本,会保留空格、回车、Tab 键和其它格式字符
- ,地址
- 注意:HTML 代码中的所有连续的空行和换行被显示为一个空格
超链接 <a>
作用
- 创建指向另一个文档的链接
- 创建一个文档内部的锚点
- 链接到 Email 地址
属性
- href,其属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段
- target,被链接的文档在何处显示,值: self(自身框架)、 _blank(新窗口)、_parent(父框架)、_top(整个窗口)、_framename (在指定的框架中打开被链接文档)
图片 <img />
- 空标签
- 属性
- alt,必需属性,定义有关图形的短的描述
- src,必需属性,指定图片文件所在的位置
- height,定义图像的高度
- width,定义图像的宽度
- usemap,将图像定义为图像映射(当用户单击其中某一个区域时,将被链接到不同的文档中)
列表
- ,定义无序列表
- ,定义列表项目
,定义有序列表,属性 type、start
- ,定义列表项目
,自定义列表
- ,定义标题列表项
- ,定义普通列表项
表格 <table>
属性:border="1"(边框宽度)、cellpadding="0"、cellspacing="0"、width(表格宽度)
,表格标题
,表头
- ,表格页脚
- ,表格主体
- ,表格行,属性:align(值:left、center、right)、bgcolor
- ,表头单元格,文本显示为粗体且居中
- ,标准单元格,默认显示为正常字体且左对齐,属性包括:colspan(规定单元格可横跨的列数)、rowspan(规定单元格可横跨的行数)、height、width
- ,表格行,属性:align(值:left、center、right)、bgcolor
表单和输入 <form>
- 属性:action(必需属性,指定表单被提交的地址)、method、enctype(定义对表单数据进行编码的方式,值:application/x-www-form-urlencoded、multipart/form-data、text/plain)、name、target(规定在何处打开 action 属性的 URL)、autocomplete(表单是否启用自动完成功能)、novalidate(当提交表单时不对其进行验证)
- 表单控件的 name 属性指定请求参数名,value 属性指定请求参数值
- 没有 name 属性的表单控件不会生成请求参数
- 如果多个表单控件有相同的 name 属性,则多个表单控件只生成一个请求参数,只是该参数有多个值
- 表单控件可以使用 form 属性指定所属的一个或多个表单
- ,输入域,空标签,属性包括:
- type,定义输入类型,其属性值:text、password、radio(单选框)、checkbox(复选框)、file(文件上传域)、hidden(隐藏域)、image、submit(提交按钮)、reset、button、search、email、number、url、date、time、datetime、datetime-local
- name,input 元素的名称
- value,input 元素的值
- checked,预先选定复选框或单选按钮
- disabled,禁用此 input 元素
- required,在提交表单之前必须输入(不能为空)
- accept,规定通过文件上传进行提交的文件类型,可用值:image/,audio/、vidio/*,不带“;”的 MIME type,以“.”开始的文件后缀名(有多种类型时用","分隔)
- multiple,允许一个以上的值
- placeholder,提供一种提示,描述输入域所期待的值
- maxlength,指定文本框中所允许输入的最大字符数
- readonly,指定该文本框内的值不允许用户修改
- min、max、step:这 3 个属性只对数值类型(type="number")、日期类型的 元素有效,这 3 个属性控制该表单控件的值必须在 min~max 之间,并符合 step 步长
- pattern,规定输入字段的值的模式或格式,可用 title 属性来描述模式
- autocomplete:规定输入字段是否应该启用自动完成功能,属性值:on、off
- 标签就会自动生成列表框)
- <button>,按钮,属性:name、value、type(属性值:submit、button、reset)、disabled
- 注意:如果在 <form> 中使用了 <button>,其 type 属性的默认值:IE 浏览器中是 "button",而 W3C 浏览器中是 "submit"
- <label>,为 input 元素定义标注(当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上),for 属性规定 label 与哪个表单元素(hidden 除外)绑定(其属性值应设置为相关元素的 id 属性的值),如果没有指定 for 属性,则为第一个子孙可关联元素
框架
- ,定义框架集,属性:rows、clos
- ,定义框架集的窗口或框架,scrolling、noresize
,定义针对不支持框架的用户的替代内容,子标签
音频与视频
HTML 标签
属性:
- src:必须属性,音视频文件的 URL
- controls:是否向用户显示控件。
- autoplay:音视频在就绪后是否马上播放
- preload:可取值为“none”(默认值)、“metadata”、“auto”,音频在页面加载时进行加载,并预备播放(如果使用“autoplay”,则忽略该属性)
- loop:当音视频结束时是否重新开始播放
Audio/Video DOM 对象
控制多媒体播放
load()
:加载媒体内容play()
:开始播放pause()
:暂停播放playbackRate:播放速度currentTime:播放进度volume:音量muted:静音查询多媒体状态paused:是否暂停seeking:是否正在跳转ended:是否播放完成duration:媒体时长initialTime:媒体开始时间
多媒体相关事件loadstart:开始请求媒内容loadmetadata:媒体元数据已经加载完成canplay:加载了一些内容,可以开始播放play:调用 play(),或设置了 autoplaywaiting:缓冲数据不够,播放暂停playing:正在播放