元素
一个超链接,后面会详细探讨。
三.元素标签探讨
HTML是一种标记语言,刚才的结构我们已经详细探讨过。
这里,我们再剖析一下这些
“标记”或者叫“标签”,书面上经常称作为“元素”的东西是怎么构成的。
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
解释:
表示计算机代码片段;表示编程语言中的变量;表示程序
或计算机的输出;
由于这属于英文范畴的,必须将lang="en"英语
才能体现效果。
13.表示缩写
HTML5
解释:
元素没有实际作用;从语义上看,是一段文本的缩写。
14.表示定义术语
HTML5
解释:
元素就是一般性的倾斜;从语义上看,表示解释一个词或短语的一段文本。
15.引用来自他处的内容
HTML5
解释:
元素实际作用就是加了一对双引号。
从语义上来看,表示引用来自其他地方
的内容。
16.引用其他作品的标题
HTML5
解释:
元素实际作用就是加粗。
从语义上来看,表示引用其他作品的标题。
17.语言元素
饕
餮
解释:
用来为非西方语言提供支持。
正确发音。
比如:
汉语拼音在文字的上方。
但目前Firefox还不支持此特性。
18.设置文字方向
解释:
必须使用属性dir才可以设置,一共两个值:
rtl(从右到左)和ltr(从
左到右)。
一般默认是ltr。
还有一个元素也是处理方向的,由于是特殊语言的特殊
效果,且主流浏览器大半不支持,忽略。
19.突出显示文本
HTML5
解释:
实际作用就是加上一个黄色的背景,黑色的字;从语义上来看,与上下
文相关而突出的文本,用于记号。
20.
解释:
21.表示一般性文本
HTML5
解释:
元素没有实际作用;语义上就是表示一段文本,我们经常用它来设置CSS
等操作。
四、HTML5超链接和路径
一.超链接的属性
那么,相对应的还有通用属
性或叫做全局属性。
这方面的知识,后面会详细探讨。
属性名称说明
href指定元素所指资源的URL
hreflang指向的链接资源所使用的语言
media说明所链接资源用于哪种设备
rel说明文档与所链接资源的关系类型
target指定用以打开所链接资源的浏览环境
type说明所链接资源的MIME类型(比如text/html)
在这几个属性当中,只有href和target一般比较常用,而href是必须要用的。
其
他几个属性,在元素使用较少,将在CSS章节再探讨。
属性
解释:
href是必须属性,否则元素就变成空元素了。
如果属性值是,意味着点击跳转到指定的外部网站。
属性
解释:
target属性告诉浏览器希望将所链接的资源显示在哪里。
属性名称说明
_blank在新窗口或标签页中打开文档
_parent在父窗框组(frameset)中打开文档
_self在当前窗口打开文档(默认)
_top在顶层窗口打开文档
这四种最常用的是_blank,新建一个窗口。
而_self是默认,当前窗口打开。
_parent
和_top是基于框架页面的,分别表示在父窗口打开和在整个窗口打开。
而HTML5中,框架
基本被废弃,只能使用
框架用的就很少了。
二.相对与绝对路径
所谓相对路径,就是相对于链接页面而言的另一个页面的路径。
而绝对路径,就是直接
从,其中一个页面链
接到另一个页面。
1.绝对路径
解释:
首先是,然后是磁盘符,然后是一个个的目录层次,找到相应文
件。
这种方式最致命的问题是,当整个目录转移到另外的盘符或其他电脑时,目录结构一旦
出现任何变化,链接当即失效。
2.相对路径
解释:
相对路径的条件是必须文件都在一个磁盘或目录下,如果是在同一个目录下,直
接属性值就是被链接的文件名.后缀名。
如果在同一个主目录下,有多个子目录层次,那就
需要使用目录结构语法。
3.目录语法
同一个目录:
或./;
在子目录:
xxx/;
在孙子目录:
xxx/xxx/;
在父目录:
../;
在爷爷目录:
../../;
三.锚点设置
超链接也可用来将同一个文档中的另一个元素移入视野。
通过属性id或name实现锚
点定位。
p>建立段落
这是一个段落
这也是一个段落
解释:
元素实际作用就是将内部包含的文本形成一个段落;而段落和段落之间保持
一定量的空隙。
2.
解释:
而在HTML5中,由于语义的缘故,被其他各种文档元素所代替。
和
段落的区别就是,两
段文本的上下空隙是没有的,空隙间隔和
换行一样。
3.
引用大段他出内容这是一个大段引自他出内容这是另一个大段引自他出内容解释:
元素实际作用除了和元素一样,有段落空隙的功能,还包含
了首尾缩进的功能。
语义上表示,大段的引用他出的内容。
4.
展现格式化内容#####
#####
#####
#####
#####
解释:
元素实际作用就是编辑器怎么排版的,原封不动的展现出来。当然,这种
只适合简单的排版,复杂的排版就无法满足要求了。
5.
添加分隔解释:
元素实际作用就是添加一条分割线,意图呈现上下文主题的分割。6.
- 添加无序列表
- 张三
- 李四
- 王五
- 马六
解释:
元素表示无序列表,而
- 元素则是内部的列表项。
7.
- 添加有序列表
- 张三
- 李四
- 王五
- 马六
解释:
元素表示有序列表,而
- 元素则是内部的列表项。
元素目前支持三
种属性。
ol元素属性
属性名称说明
start从第几个序列开始统计:
reversed是否倒序排列:
,一半主流浏览器不支持 type表示列表的编号类型,值分别为:
1、a、A、i、I
li元素属性
属性名称说明
value强行设置某个项目的编号。
王五 8.
- 生成说明列表
- 这是一份文件
- 这里是这份文件的详细内容1
- 这里是这份文件的详细内容2
解释:
这三个元素是一个整体,但
- 或
- 并非都必须出现。
9.
这是一张图
解释:
这两个元素一般用于图片的布局。
五、HTML5表格元素
一.表格元素总汇
表格的基本构成最少需要三个元素:
、
、 ,其他的一些作为可选辅 助存在。
元素名称说明
table表示表格
thead表示标题行
tbody表示表格主体
tfoot表示表脚
tr表示一行单元格
th表示标题行单元格
td表示单元格
col表示一列
colgroup表示一组列
caption表示表格标题
二.构建表格解析
1.
构建基础表格
张三 男 未婚 李四 女 已婚 解释:
元素表示一个表格的声明,
元素表示表格的一行, 添加表脚元素表示 一个单元格。
默认情况下表格是没有边框的,所以,在
元素增加一个border属性,
设置为1即可显示边框。
2.
为表格添加标题单元格
300px;">
姓名 性别 婚姻 张三 男 未婚 李四 女 已婚 解释:
元素主要是添加标题行的单元格,实际作用就是将内部文字居中且加粗。 这里使用了一个通用属性style,主要用于CSS样式设置,以后会涉及到。
均属 于单元格,包含两个合并属性:
colspan、rowspan等。
3.添加表头
姓名 性别 婚姻 解释:
元素就是限制和规范了表格的表头部分。
尤其是以后动态生成表头,它
的位置是不固定的,使用此元素可以限定在开头位置。
4.
统计: 共两名
解释:
元素为表格生成表脚,限制在表格的底部。5.
添加表主体张三 男 未婚 李四 女 已婚 解释:
元素主要是包含住非表头表脚的主体部分,有助于表格格式的清晰,更加有助于后续CSS和JavaScript的控制。
6.
添加表格标题 这是一个人物表 解释:
元素给表格添加一个标题。 7.
设置列
red;">
解释:
元素是为了处理某个列,span属性定义处理哪些列。 1表示第一列,
2表示前两列。
如果要单独设置第二列,那么需要声明两个,先处理第一个,将列点移入第
二位,再处理第二个即可。
8.
更灵活的设置列
red;"span="1">
解释:
元素表示单独一列,一个表示一列,控制更加灵活。 如果设置了span则,
控制多列。
六、HTML5文档元素
一.文档元素总汇
文档元素基本没有什么实际作用效果,主要目的是在页面布局时区分各个主题和概念。
元素名称说明
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.
元素生成详情区域、元素在其内部生成说明标签
解释:
由于大多数主流浏览器尚未支持,暂略。
七、HTML5嵌入元素
一.嵌入元素总汇
这里所列出的元素,并非本节课全部涉及到,比如音频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.
href=""target="_blank"alt="方形">
href=""target="_blank"alt="圆形">
href=""target="_blank"alt="多边形">
解释:
通过
展开阅读全文相关资源猜你喜欢相关搜索
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1