第 2 章 基本格式
学习要点:
1.HTML5 文档结构
2.文档结构解析
3.元素标签探讨
本章主要先从 HTML5 的文档结构谈起。这些基础元素确定了HTML 文档的轮廓以及浏览器的初始环境。几乎所有页面都必须首先键入这些元素。
一.HTML5 文档结构1.第一步:打开 Sublime Text 3,打开指定文件夹;
2.第二步:保存 index.html文件到磁盘中,.html是网页后缀;
3.第三步:开始编写 HTML5的基本格式。
//文档类型声明
//表示 HTML 文档开始
//包含文档元数据开始
//声明字符编码
//包含文档元数据结束
//表示 HTML文档内容
//表示 HTML
//表示 HTML文档结束
二.文档结构解析
1.Doctype
文档类型声明(Document Type Declaration,也称Doctype)。它主要告诉浏览器所查看的文件类型。在以往的HTML4.01 和 XHTML1.0 中,它表示具体的 HTML 版本和风格。而如今 HTML5 不需要表示版本和风格了。
//不分区大小写
2.html 元素
首先,元素就是标签的意思,html 元素即html 标签。html 元素是文档开始和结尾的元素。它是一个双标签,头尾呼应,包含内容。这个元素有一个属性和值:lang="zh-cn",表示文档采用语言为:简体中文。
//如果是英文则为 en
3.head 元素
用来包含元数据内容,元数据包括:、、、、、
... //这些信息在页面不可见
4.meta 元素
这个元素用来提供关于文档的信息,起始结构有一个属性为:charset="utf8"。表示告诉浏览器页面采用的什么编码,一般来说我们就用utf8。当然,文件保存的时候也是utf8,而浏览器也设置 utf8即可正确显示中文。
//除了设置编码,还有别的
5.title 元素
这个元素很简单,顾名思义:设置浏览器左上角的标题。
6.body 元素
用来包含文档内容的元素,也就是浏览器可见区域部分。所有的可见内容,都应该在这个元素内部进行添加。
...
7.a 元素
一个超链接,后面会详细探讨。
三.元素标签探讨
HTML 是一种标记语言,刚才的结构我们已经详细探讨过。这里,我们再剖析一下这些“标记”或者叫“标签”,书面上经常称作为“元素”的东西是怎么构成的。
1.元素
元素就是一组告诉浏览器如何处理一些内容的标签。每个元素都有一个关键字,比如、
元素一般分为两种:单标签(空元素)和双标签。单标签一般用于声明或者插入某个元素,比如声明字符编码就用,插入图片就用 ...;双标签一般用于设置一段区域的内容,将其包含起来,比如段落
2.属性和值
元素除了有单双之分,元素的内部还可以设置属性和值。这些属性值用来改变元素某些方面的行为。比如超链接:中的href 属性,里面替换网址即可链接到不同的网站。当然一个元素里面可以设置多个属性,甚至自定义属性。
第 3 章 文本元素
学习要点:1.文本元素总汇2.文本元素解析
本章主要探讨 HTML5 中的文本元素,所谓文本元素,就是将一段文本设置成相匹配的结构和含义。
一.文本元素总汇
HTML5 规范指出:使用元素应该完全从元素的语义出发。但是由于历史遗留及用户至上的原则,这种语义会宽松许多。
元素名称 |
说明 |
|
|
a |
生成超链接 |
|
|
br |
强制换行 |
|
|
wbr |
可安全换行 |
|
|
b |
标记一段文字但不强调 |
|
|
strong |
表示重要 |
|
|
i |
表示外文或科学术语 |
|
|
em |
表示强调 |
|
|
code |
表示计算机代码 |
|
|
var |
表示程序输出 |
|
|
samp |
表示变量 |
|
|
kdb |
表示用户输入 |
|
|
abbr |
表示缩写 |
|
|
cite |
表示其他作品的标题 |
|
|
del |
表示被删除的文字 |
|
|
s |
表示文字已不再确认 |
|
|
dfn |
表示术语定义 |
|
|
mark |
表示与另一段上下文有关的内容 |
|
|
q |
表示引自他处的内容 |
|
|
rp |
与 ruby 元素结合使用,标记括号 |
|
|
rt |
与 ruby 元素结合使用,标记括号 |
|
|
ruby |
表示位于表意文字上方或右方的注音符号 |
|
|
bdo |
控制文字的方向 |
|
|
small |
表示小号字体内容 |
|
|
sub |
表示下标字体 |
|
|
sup |
表示上标字体 |
|
|
time |
表示时间或日期 |
|
|
u |
标记一段文字但不强调 |
|
|
span |
通用元素,没有任何语义。一般配合 CSS 修饰。 |
|
|
从上面这张表格中,我们发现文本元素还是非常多的。但实际上,在现实应用中,真正常用的也就是那么几个,绝大部分是针对英文的。
二.文本元素解析1.表示关键字和产品名称
HTML5
解释:元素实际作用就是加粗。从语义上来看,就是标记一段文字,但并不是特别强调或重要性。比如:一段文本中的某些关键字或者产品的名称。
2.表示重要的文字
HTML5
解释:元素实际作用和一样,就是加粗。从语义上来看,就是强调一段重要的文本。
3.
强制换行、
Thisabc
解释:在任意文本位置键入
都会被换行,而在英文单词过长时使用
4.表示外文词汇或科技术语
HTML5
解释:元素实际作用就是倾斜。从语义上来看,表示区分周围内容,并不是特别强调或重要性。
5.加以强调
HTML5
解释:元素实际作用和一样,就是倾斜;从语义上来看,表示对一段文本的强
调。
6.表示不准确或校正
HTML5
解释:元素实际作用就是删除线;从语义上来看,表示不准确的删除。
7.表示删除文字
HTML5
解释:元素实际作用和一样,就是删除线;从语义上来看,表示删除相关文
字。
8.表示给文字加上下划线
HTML5
解释:元素实际作用就是加一条下划线;从语义上来看,并不强调此段文本。
9.添加一段文本
HTML5
解释:元素实际作用和一样,加一条下划线;从语义上来看,是添加一段文本,起到强调的作用。
10.添加小号字体
HTML5
解释:元素实际作用就是将文本放小一号。从语义上来看,用于免责声明和澄清声明。
11.添加上标和下标
5
5
解释:和元素实际作用就是数学的上标和下标。语义也是如此。
12.等表示输入和输出
HTML5
HTML5
HTML5
解释:表示计算机代码片段;表示编程语言中的变量;表示程序或计算机的输出;
13.表示缩写
HTML5
解释:元素没有实际作用;从语义上看,是一段文本的缩写。
14.表示定义术语
HTML5
解释:元素就是一般性的倾斜;从语义上看,表示解释一个词或短语的一段文本。
15.引用来自他处的内容
HTML5
解释:元素实际作用就是加了一对双引号。从语义上来看,表示引用来自其他地方的内容。
16.引用其他作品的标题
HTML5
解释:元素实际作用就是加粗。从语义上来看,表示引用其他作品的标题。
17.语言元素
饕āo
餮
解释:用来为非西方语言提供支持。用来帮助读者掌握表意语言文字正确发音。比如:汉语拼音在文字的上方。但目前Firefox 还不支持此特性。
18.设置文字方向 HTML5
解释:必须使用属性dir 才可以设置,一共两个值:rtl(从右到左)和ltr(从左到右)。一般默认是ltr。还有一个元素也是处理方向的,由于是特殊语言的特殊效果,且主流浏览器大半不支持,忽略。
19.突出显示文本 HTML5
解释:实际作用就是加上一个黄色的背景,黑色的字;从语义上来看,与上下文相关而突出的文本,用于记号。
20.表示日期和时间
解释:元素没有实际作用;从语义上来看,表示日期和时间。
21.表示一般性文本 HTML5
解释:元素没有实际作用;语义上就是表示一段文本,我们经常用它来设置CSS 等操作。
第 4 章 超链接和路径
学习要点:1.超链接的属性2.相对与绝对路径3.锚点设置
本章主要探讨 HTML5 中文本元素最重要的一个超链接,探讨它自身的属性以及路径问
题。
一.超链接的属性
元素属于文本元素,有一些私有属性或者叫局部属性。那么,相对应的还有通用属性或叫做全局属性。这方面的知识,后面会详细探讨。
属性名称 |
说明 |
|
|
href |
|
|
|
hreflang |
指向的链接资源所使用的语言 |
|
|
media |
说明所链接资源用于哪种设备 |
|
|
rel |
说明文档与所链接资源的关系类型 |
|
|
target |
指定用以打开所链接资源的浏览环境 |
|
|
type |
说明所链接资源的 MIME 类型(比如text/html) |
|
|
在这几个属性当中,只有 href 和target 一般比较常用,而href 是必须要用的。其他几个属性,在元素使用较少,将在CSS 章节再探讨。
1.href 属性
解释:href 是必须属性,否则元素就变成空元素了。如果属性值是http://开头的 URL,意味着点击跳转到指定的外部网站。
2.target 属性
解释:target 属性告诉浏览器希望将所链接的资源显示在哪里。
属性名称 |
说明 |
_blank 在新窗口或标签页中打开文档
_parent |
在父窗框组(frameset)中打开文档 |
|
|
_self |
在当前窗口打开文档(默认) |
|
|
_top |
在顶层窗口打开文档 |
|
|
这四种最常用的是_blank,新建一个窗口。而_self 是默认,当前窗口打开。_parent和_top 是基于框架页面的,分别表示在父窗口打开和在整个窗口打开。而HTML5 中,框架基本被废弃,只能使用元素,且以后大量结合JavaScript 和PHP 等语言配合,框架用的就很少了。
二.相对与绝对路径
所谓相对路径,就是相对于链接页面而言的另一个页面的路径。而绝对路径,就是直接从file:///磁盘符开始的完整路径。我们在同一个目录下做上两个页面,其中一个页面链接到另一个页面。
1.绝对路径
备课/HTML5第一季/code/index2.html">index2
解释:首先是 file:///开头,然后是磁盘符,然后是一个个的目录层次,找到相应文件。这种方式最致命的问题是,当整个目录转移到另外的盘符或其他电脑时,目录结构一旦出现任何变化,链接当即失效。
2.相对路径
解释:相对路径的条件是必须文件都在一个磁盘或目录下,如果是在同一个目录下,直接属性值就是被链接的文件名.后缀名。如果在同一个主目录下,有多个子目录层次,那就需要使用目录结构语法。
3.目录语法
同一个目录:index2.html 或./index2.html;
在子目录:xxx/index2.html;
在孙子目录:xxx/xxx/index2.html;在父目录:../index2.html;在爷爷目录:../../index2.html;
三.锚点设置
超链接也可用来将同一个文档中的另一个元素移入视野。通过属性 id 或name 实现锚点定位。
//链接
第 5 章 分组元素
学习要点:1.分组元素总汇2.分组元素解析
本章主要探讨 HTML5 中分组元素的用法。所谓分组,就是用来组织相关内容的HTML5 元素,清晰有效的进行归类。
一.分组元素总汇为了页面的排版需要,HTML5 提供了几种语义的分组元素。
元素名称 |
说明 |
|
|
p |
表示段落 |
|
|
div |
一个没有任何语义的通用元素,和 span 是对应元素 |
|
|
blockquote |
表示引自他出的大段内容 |
|
|
pre |
表示其格式应被保留的内容 |
|
|
hr |
表示段落级别的主题转换,即水平线 |
|
|
ul,ol |
表示无序列表,有序列表 |
|
|
li |
用于 ul,ol 元素中的列表项 |
|
|
dl,dt,dd |
表示包含一系列术语和定义说明的列表。dt 在dl 内部表示 |
术语,一般充当标题;dd 在dl 内部表示定义,一般是内容。 |
|
|
|
figure |
表示图片 |
|
|
figcaption |
表示 figure 元素的标题 |
|
|
二.分组元素解析
1.建立段落
这是一个段落
这也是一个段落
解释:元素实际作用就是将内部包含的文本形成一个段落;而段落和段落之间保持一定量的空隙。
2. 解释: 而在 HTML5 中,由于语义的缘故,被其他各种文档元素所代替。和段落的区别就是,两段文本的上下空隙是没有的,空隙间隔和 3.引用大段他出内容 这是一个大段引自他出内容 这是另一个大段引自他出内容 解释:元素实际作用除了和元素一样,有段落空隙的功能,还包含了首尾缩进的功能。语义上表示,大段的引用他出的内容。 4.展现格式化内容
##### ##### ##### ##### #####
解释:元素实际作用就是编辑器怎么排版的,原封不动的展现出来。当然,这种只适合简单的排版,复杂的排版就无法满足要求了。 5. 解释: 6.
解释: 7.
解释: ol 元素属性 属性名称 说明 start 从第几个序列开始统计: reversed 是否倒序排列: type 表示列表的编号类型,值分别为:1、a、A、i、I li 元素属性 属性名称 说明 value 强行设置某个项目的编号。 王五 8. 这里是这份文件的详细内容 1 这里是这份文件的详细内容 2
解释:这三个元素是一个整体,但或并非都必须出现。 9.
解释:这两个元素一般用于图片的布局。 第 6 章 表格元素 学习要点:1.表格元素总汇2.构建表格解析 本章主要探讨 HTML5 中表格元素的用法。表格的主要用途是以网格的形式显示二维数 据。 一.表格元素总汇 表格的基本构成最少需要三个元素: 元素名称 说明 table 表示表格 thead 表示标题行 tbody 表示表格主体 tfoot 表示表脚 tr 表示一行单元格 th 表示标题行单元格 td 表示单元格 col 表示一列 colgroup 表示一组列 caption 表示表格标题 二.构建表格解析 1. 解释: 2. 解释: 3.添加表头
解释:元素就是限制和规范了表格的表头部分。尤其是以后动态生成表头,它的位置是不固定的,使用此元素可以限定在开头位置。
4.添加表脚
解释:元素为表格生成表脚,限制在表格的底部。
5.添加表主体
解释:元素主要是包含住非表头表脚的主体部分,有助于表格格式的清晰,更加有助于后续CSS 和 JavaScript 的控制。
6. 解释: 7. 解释: 8.
解释: 第 7 章 文档元素 学习要点:1.文档元素总汇2.文档元素解析 本章主要探讨 HTML5 中文档元素,文档元素的主要作用是划分各个不同的内容,让整个布局清晰明快。让整个布局元素具有语义,进一步替代div。 一.文档元素总汇文档元素基本没有什么实际作用效果,主要目的是在页面布局时区分各个主题和概念。 元素名称 说明 h1~h6 表示标题 header 表示首部 footer 表示尾部 nav 表示有意集中在一起的导航元素 section 表示重要概念或主题 article 表示一段独立的内容 address 表示文档或 article 的联系信息 aside 表示与周边内容少有牵涉的内容 hgroup 将一组标题组织在一起 details 生成一个区域,用户将其展开可以获得更多细节 summary 用在 details 元素中,表示该元素内容的标题或说明 二.文档元素解析 文档元素的大部分标签,是没有任何效果的,完全是为了配合语义使用,以强调它的结构性。只有在后面的章节学习CSS,配合使用才能起到布局和样式的效果。 1. 这里部分一般是页面头部,包括:LOGO、标题、导航等内容
解释: 2.表示尾部
这里是页面的尾部,一般包括:版权声明、友情链接等内容
解释:元素主要设置页面的尾部。 3. 标题部分 小标题部分 解释: 4.组合标题 标题部分 小标题部分
解释:元素的作用就是当多个标题出现,干扰到一对或多个本身需要整合的标题,这是使用此元素包含群组。 5.文档主题
这里一般是存放文档主题内容。
解释:元素的作用是定义一个文档的主题内容。 6.添加导航 这里存放文档的导航 解释:元素给文档页面添加一个导航。 7.添加一个独立成篇的文档
解释:元素表示独立成篇的文档,里面可以包含头、尾、主题等一系列内容。在比较大的页面中会使用到,比如一片博文的列表,每篇博文,都有自己的头、尾、主题等内容。和此相似的还有论坛的帖子、用户的评论、新闻等。 8.生成注释栏 这是是一个注释 解释:元素专门为某一段内容进行注释使用。 9.表示文档或 article元素的联系信息。 联系信息 解释:如果是在元素下时,表示整个文档的联系信息。如果是在元素下时,表示其下的联系信息。 10. 解释:由于大多数主流浏览器尚未支持,暂略。 第 8 章 嵌入元素 学习要点:1.嵌入元素总汇2.嵌入元素解析 本章主要探讨 HTML5 中嵌入元素,嵌入元素主要功能是把外部的一些资源插入到 HTML 中。 一.嵌入元素总汇 这里所列出的元素,并非本节课全部涉及到,比如音频 audio、视频video、以及动态图像canvas 和媒体资源source、track 等会在后面章节或季度讲解。 元素名称 说明 img 嵌入图片 map 定义客户端分区响应图 area 表示一个用户客户端分区响应图的区域 audio 表示一个音频资源 video 表示一个视频资源 iframe 嵌入一个文档 embed 用插件在 HTML 中嵌入内容 canvas 生成一个动态的图形画布 meter 嵌入数值在许可值范围背景中的图形表示 object 在 HTML 文档中嵌入内容 param 表示将通过 object 元素传递给插件的参数 progress 嵌入目标进展或任务完成情况的图形表示 source 表示媒体资源 svg 表示结构化矢量内容 track 表示媒体的附加轨道(例如字幕) 二.嵌入元素解析 1. 解释: img 的私有属性 属性名称 说明 src 嵌入图像的 URL alt 当图片不加载时显示的备用内容 width 定义图片的长度(单位是像素) height 定义图片的高度(单位是像素) ismap 创建服务器端分区响应图 usemap 关联元素 2.创建分区响应图 方形"> 圆形"> 多边形">
解释:通过图片中的热点进行超链接,这里我们采用 Dreamweaver 进行操作生成的。 3.嵌入另一个文档 index | name="in"> 解释:表示内嵌一个HTML 文档。其下的src 属性表示初始化时显示的页面,width 和 height表示内嵌文档的长度和高度,name表示用于 target的名称。 4.嵌入插件内容
src="http://www.tudou.com/v/i4ZZvFwfluI/&bid=05&rpid=50797543&resourceI d=50797543_05_05_99/v.swf" type="application/x-shockwave-flash" width="480" height="400"> 解释:元素是扩展浏览器的功能,大部分用于添加对插件的支持。这里添加了一个土豆网的flash 视频。type 类型表示被插入内容的类型,这里不列出所有,后面如果遇到其他类型的文件,再继续探讨;width 和height 表示宽高;src 表示文件路径。 5.和元素 解释:元素和一样,只不过object 是 html4 的标准,而 embed 是 html5的标准。而 object不但可以嵌入 flash,还可以嵌入图片等其他内容。由于图片、音频、视频、插件都有相应标签元素代替,我们这里暂时不对其详细讲解。 6.显示进度
解释:元素可以显示一个进度条,一般通过JS 控制内部的值。IE9 以及更低版本不支持此元素。 7. optimum="60"> 解释: 第 9 章 音频和视频 学习要点:1.音频和视频概述 2.video 视频元素 3.audio音频元素 本章主要探讨 HTML5 中音频和视频元素,通过这两个原生的媒体元素向HTML 页面中嵌入音频和视频。 一.音频和视频概述 首先,我们要理解两个概念:容器(container)和编解码器(codec)。 1.视频容器 音频文件或视频文件,都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其他一些元数据。视频播放时,音频轨道和视频轨道是绑定在一起的。元数据包含了视频的封面、标题、子标题、字幕等相关信息。主流视频容器支持的格式为:.avi、.flv、.mp4、.mkv、 .ogg、.webm。 2.编解码器 音频和视频编码/解码是一组算法,用来对一段特定音频或视频进行解码和编码,以便音频和视频能够播放。原始的媒体文件体积非常巨大,如果不对其进行编码,那么数据量是非常惊人的,在互联网上传播则要耗费无法忍受的时间;如果不对其进行解码,就无法将编码后的数据重组为原始的媒体数据。主流的音频编解码器:AAC、MPEG-3、Ogg Voribs, 视频编解码器:H.264、VP8、Ogg Theora。 3.浏览器支持情况 起初,HTML5 规范本来打算指定编解码器,但实施起来极为困难。部分厂商已有自己的标准,不愿实现标准;而有一些编解码器受专利保护,需要支付昂贵费用。最终放弃了统一规范的要求,导致各个浏览器实现自己的标准。 容器格式 视频编解码 音频编解码 IE9+ Firefox5+ Chrome13+ WebM VP8 Vorbis × √ √ OGG Theora Vorbis × √ √ MPEG-4 H.264 AAC √ × 疑问? 除了上面三款浏览器,还有 Safari5+支持MPEG-4,Opera11 支持WebM 和 OGG,通过这组数据,只要备好 MP4 和 OGG 格式的即可,但对于新的高清标准WebM,当然是非常必要的。因为WebM 不但清晰度高,而且免费,不受限制许可的使用源码和专利权。 目前 Chrome 浏览器,为了推广WebM 格式的视频。声称未来将放弃H.264 编码的视频,所以有可能在以后的版本中无法播放MP4 的视频。当然,目前演示的版本还是支持的。 二.video 视频元素 以往的视频播放,需要借助 Flash 插件才可以实现。但Flash 插件的不稳定性经常让浏览器导致崩溃,因此很多浏览器或系统厂商开始抛弃它。而取代它的正是HTML5 的 video 元素。 元素的属性 属性名称 说明 src 视频资源的 URL width 视频宽度 height 视频高度 autoplay 设置后,表示立刻开始播放视频 preload 设置后,表示预先载入视频 controls 设置后,表示显示播放控件 loop 设置后,表示反复播放视频 muted 设置后,表示视频处于静音状态 poster 指定视频数据载入时显示的图片 1.嵌入一个 WebM视频
解释:插入一个视频,主流的视频为.webm,.mp4,.ogg 等。src 表示资源 URL;width表示宽度;height表示高度。 2.附加一些属性
解释:autoplay 表示自动开始播放;controls 表示显示播放控件;loop 表示循环播放;muted 表示静音。 3.预加载设置
preload="none"> 解释:preload 属性有三个值:none 表示播放器什么都不加载;metadata 表示播放之前只能加载元数据(宽高、第一帧画面等信息);auto 表示请求浏览器尽快下载整个视频。 4.使用预览图
poster="img.png"> 解释:poster 属性表示在视频的第一帧,做一张预览图。 5.兼容多个浏览器
这里引入 flash播放器实现 IE9 以下,但没必要了 解释:通过 二.audio 音频元素 和 video 元素一样,audio 元素用于嵌入音频内容,而音频元素的属性和视频元素类似。音频的支持度和视频类似,使用 属性名称 说明 src 视频资源的 URL autoplay 设置后,表示立刻开始播放视频 preload 设置后,表示预先载入视频 controls 设置后,表示显示播放控件 1.嵌入一个音频
解释:和嵌入视频一个道理。 2.兼容多个浏览器
解释:略。 PS:更多设计到 API的 JavaScript控制,将在以后的基于 JavaScript基础后讲解。 第 10 章 表单元素[上] 学习要点:1.表单元素总汇2.表单元素解析 本章主要探讨 HTML5 中表单元素,表单元素用于获取用户的输入数据。 一.表单元素总汇 在 HTML5 的表单中,提供了各种可供用户输入的表单控件。 元素名称 说明 form 表示 HTML 表单 input 表示用来收集用户输入数据的控件 textarea 表示可以输入多行文本的控件 select 表示用来提供一组固定的选项 option 表示提供提供一个选项 optgroup 表示一组相关的 option 元素 button 表示可用来提交或重置的表单按钮(或一般按钮) datalist 定义一组提供给用户的建议值 fieldset 表示一组表单元素 legend 表示 fieldset 元素的说明性标签 label 表示表单元素的说明标签 output 表示计算结果 二.表单元素解析 1.定义表单 提交
解释:元素主要是定义本身是一组表单。 元素名称 说明 action 表示表单提交的页面 method 表示表单的请求方式:有 POST 和GET 两种,默认 GET 表示浏览器对发送给服务器的数据所采用的编码格式。有三 种:application/x-www-form-urlencoded(默认编码, enctype 不能将文件上传到服务器)、multipart/form-data(用 于上传文件到服务器)、text/plain(未规范的编码,不 建议使用,不同浏览器理解不同) name 设置表单名称,以便程序调用 target 设置提交时的目标位置:_blank、_parent、_self、_top autocomplete 设置浏览器记住用户输入的数据,实现自动完成表单。默认 为 on 自动完成,如果不想自动完成则设置off。 novalidate 设置是否执行客户端数据有效性检查,后面课程讲解。 //使用 get提交数据 method="get" //丧失自动提示功能 autocomplete="off" //使用_blank新建目标 target="_blank" 2.表示用户输入数据
解释:元素默认情况会出现一个单行文本框,有五个属性。 属性名称 说明 autofocus 让光标聚焦在某个 input 元素上,让用户直接输入 disabled 禁用 input 元素 autocomplete 单独设置 input 元素的自动完成功能 form 让表单外的元素和指定的表单挂钩提交 type input 元素的类型,内容较多,将在下节课展开讲解 name 定义 input 元素的名称,以便接收到相应的值 //聚焦光标
//禁用 input
//禁止自动完成
//表单外的 input ...
3.添加说明标签 用户名: 解释:元素可以关联input,让用户体验更好。且更加容易设置CSS 样式。 4.对表单进行编组
解释:元素可以将一些表单元素组织在一起,形成一个整体。 属性名称 说明 name 给分组定义一个名称 form 让表单外的分组与表单挂钩 disabled 禁用分组内的表单 5.添加分组说明标签 注册表单
解释:元素给分组加上一个标题。 6.添加按钮
解释:元素添加一个按钮,type 属性有如下几个值: 值名称 说明 submit 表示按钮的作用是提交表单,默认 reset 表示按钮的作用是重置表单 button 表示按钮为一般性按钮,没有任何作用 //提交表单 提交 //重置表单 重置 //普通按钮 按钮 对于 type 属性为submit 时,按钮还会提供额外的属性。 属性名称 说明 form 指定按钮关联的表单 formaction 覆盖 form 元素的action 属性 formenctype 覆盖 form 元素的enctype 属性 formmethod 覆盖 form 元素的method 属性 formtarget 覆盖 form 元素的target 属性 formnovalidate 覆盖 form 元素的novalidate 属性 //表单外关联提交 提交
换行一样。
添加分隔
元素实际作用就是添加一条分割线,意图呈现上下文主题的分割。添加无序列表
张三 李四 王五 马六元素表示无序列表,而元素则是内部的列表项。
添加有序列表
张三 李四 王五 马六元素表示有序列表,而元素则是内部的列表项。
元素目前支持三种属性。
,一半主流浏览器不支持
生成说明列表
这是一份文件、
、 ,其他的一些作为可选辅助存在。
构建基础表格
张三 男 未婚
李四 女
已婚 元素表示一个表格的声明,
元素表示表格的一行, 元素表示一个单元格。默认情况下表格是没有边框的,所以,在 元素增加一个border 属性,设置为1 即可显示边框。
为表格添加标题单元格
姓名 性别 婚姻 张三 男 未婚
李四 女 已婚
元素主要是添加标题行的单元格,实际作用就是将内部文字居中且加粗。这里使用了一个通用属性style,主要用于 CSS 样式设置,以后会涉及到。 均属于单元格,包含两个合并属性:colspan、rowspan 等。
姓名 性别 婚姻
统计:共两名 张三 男 未婚
李四 女 已婚
~
添加标题~
实际作用就是加粗并改变字体大小。用于各种标题文档。
嵌入图像
元素主要是插入一张外部的图片,那么图片的路径问题和超链接一致。
风景图" ismap>
风景图" width="339" height="229" usemap="#Map">
你可能感兴趣的:(H5知识点大总结勾起你的欲望)