HTML 5_CSS 3_JavaScript讲义_13014579.pdf
Html5语法的改变:
1、标签不区分大小写;
2、元素可以省略结束标签;
3、元素的属性可以省略属性值;
4、属性的属性值可以不只用引号。
Html5保留的常用元素
1)基本元素:
1、<!--...-->:定义HTML注释。位于<!--与-->之间的内容会被当成注释处理。
2、<html>:它是HTML5文档的根元素。但HTML5允许完全省略这个元素。
3、<head>:它是HTML5文档的页面头部分。但HTML5允许完全省略这个元素。
4、<title>:它是用于定义HTML5文档的页面标题。
5、<body>:它用于定义HTML5文档的页面主体部分,该标签可以指定id、class、style等核心属性,还可以指定onload、onunload、onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup等事件属性,这些属性用于指定JavaScript脚本。
6、<style>:该元素用于引入样式定义。
7、<h1>到<h6>:定义标题一到标题六。
8、<p>:定义段落,该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。
9、<br>:插入一个换行,该标签可以指定id、class、style等核心属性。
10、<hr>:定义水平线,该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。HTML5中<hr .../>还代表了主题结束的语义。
11、<div>:定义文档中的节。该标签可以id、class、style等核心属性,还可以指定onclick等各种事件属性。
12、<span>:与<div>基本相似,区别是该定义的节默认不会换行。该标签可以指定和<div>相同的属性。
提示:几乎所有的HTML元素都可以指定id、class和sytle属性。其中id属性用于为HTML元素指定一个唯一标识,该标识是通过DOM访问HTML元素的重要途径。class和style属性是CSS样式相关属性,可参考关于CSS章节介绍。
eg:
从图2.1中可以看出,<span.../>、<div.../>和<p.../>三个元素的效果有点类似,它们都可以作为其他内容的“容器”---容纳文本和其它内容。在默认情况下,<span.../>元素不会导致换行,而<div.../>元素会导致换行,而<p.../>元素会产生一个段落,所以段落和段落直接有更大的距离。
除此之外,还有一点:<span.../>和<p.../>只能包含文本、图像、超链接、文本格式化元素和表单控件元素等内容,<p.../>可以包含<span.../>元素,但<span.../>元素不能包含<p.../>;<div.../>元素除了可以包含上面这些内容之外(包括<p.../>和<span.../>),还可以包含<h1.../>到<h6.../>、<form.../>、<table.../>、列表项元素和<div.../>元素---由此可见,<div.../>元素可以包含更多内容。
正因为<div.../>元素可以包含各种各样的内容,在HTML5之前,才会被用来完成页面布局。
2)文本格式化元素
1、<br>:定义粗体文本。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。
2、<i>:定义斜体文本。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。
3、<strong>.:定义粗体文本。与<b>标签的左右和用法基本相同。HTML5为<strong.../>元素增加了语义,使用<strong.../>包起来的文本代表重要的文本。
4、<small>:定义小号字体文本。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。
HTML5删除了原有的<big.../>元素,<big.../>用于定义大字号字体文本。但HTML5保留了<small.../>元素,且对其重新定义为专门用于标识所谓的”小字印刷体“,通常用来标注诸如免责声明、注意事项、法律规定和版权相关的声明性文字。
5、<sup>:定义上标文本。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。
6、<sub>:定义下标文本。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。
7、<bdo>:定义文本显示的方向。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。还可以指定dir属性,该属性值只能是ltr或者rtl。
上面这些文本格式化元素能包含文本、图像、超链接、文本格式化元素和表单控件元素等等,除此之外,这些元素还可以和<span...>元素相互包含。如下HTML页面师范了这些文本格式化相关标签的用法。
eg:
3)语义相关元素
1、<abbr>:用于表示一个缩写。使用该元素时可指定属性:title,该属性用于指定该缩写所代表的全称。
2、<address>:用于表示一个地址。浏览器通常会用斜体字显示这个元素包含的文本。
3、<blockquote>:用于定义一段长的引用文本。浏览器会使用缩进的方式显示这段被引用文本。使用<blockquote.../>元素时可指定属性:cite,该属性指定该引用文本所引用的网址URL。
4、<q>:用于定义一段短的引用文本。浏览器会为这段被引用文本添加引号。
<blockquote.../>与<q.../>元素的作用基本相似,区别只是<blockquote.../>用于引用一段带换行的、大段文本;而<q.../>元素则用于引用一段不带换行的、较短的文本。
5、<cite>:用于表示作品(一本书、一部电影、一首歌曲)的标题。浏览器常会用斜体字显示它所包含的文本。
6、<code>:用于表示一段计算机代码。
7、<dfn>:用于定义一个专业术语。浏览器通常会用粗体或斜体字显示它所包含的文本。
8、<del>:定义文档中被删除的文本。浏览器常以中画线形式显示它所包含的文本。
9、<ins>:定义文档中插入的文本。浏览器常以下画线形式显示它所包含的文本。
<del.../>和<ins.../>元素通常结合使用,用于表示文档被”修订“的效果。其中<del.../>元素表示被删除,而<ins.../>表示更新的文本。而且使用这两个元素时都可以指定如下两个属性:cite(该属性值为一个URL,该URL对应的文本解释了文本被删除或插入的原因)、datetime(定义文本被删除或插入的日子、时间)。
10、<pre>:用于表示该元素所包含的文本已经进行了”预格式化“。即该元素所包含文本中的空格、回车Tab键和其它格式字符都会被保留下来,但浏览器会处理该元素内大部分HTML元素。
11、<samp>:用于定义师范文本内容。
12、<kbd>:用于定义键盘文本。该元素用于表示文本是通过键盘输入的。通常在计算机使用文档、使用说明中会经常用到。
13、<var>:用于表示一个变量。浏览器通常会以斜体字表示它所包含的文本。