关于HTML相关知识随记

时间:2023-03-09 04:35:11
关于HTML相关知识随记

  HTML是构成网页文档的主要语言,它由HTML标签和字符信息组成。HTML标签可以标识文字、图形、动画、声音、表格、超链接等网页对象,字符信息用以传达网页内容,如标题、段落文本、图像等。

  HTML4文档基本结构

  HTML文档一般都应包含两部分:头部区域和主体区域。HTML文档基本结构由3个标签负责组织:<html>、<head>、<body>。其中,<html>标签标识HTML文档,<head>标签标识头部区域,而<body>标签标识主体区域。 

<html> <!--语法开始-->
<head>
<!--头部信息,如<titile>标签定义的网页标题-->
</head>
<body>
<!--主体信息,包含网页显示的内容-->
</body>
</html> <!--语法结束-->

  HTML4基本语法

  (1).所有标签都包含在"<"和">"起止标识符中,构成一个标签。如<style>、<head>、<div>等。

  (2).在HTML文档中,绝大多数元素都有起始标签和结束标签,在起始标签和结束标签之间包含的是元素主体。如<body>和</body>中间包含的就是网页内容主体。

  (3).起始标签包含元素的名称以及可选属性,也就是说,元素的名称和属性都必须包含在起始标签中,结束标签以反斜杠开始,然后附加上元素名称。例如:<tag>元素主体</tag>

  (4).元素的属性包含属性名称和属性值两部分。中间通过等号进行连接,多个属性之间通过空格进行分隔。属性与元素名称之间也是通过空格进行分隔。例如:<tag a1="v1" a2="v2" a3="v3"... an="vn">元素主体</tag>

  (5).少数元素的属性也可能不包含属性值,仅包含一个属性名称。例如:<tag a1 a2 a3...an>元素主体</tag>

  (6).属性是可选的,元素包含多少个属性,也是不确定的,这主要根据不同元素而定,不同的元素会包含不同的属性。HTML也为所有元素定义了公共属性,如title、id、class、style等。

  (7).HTML文档所有信息必须包含在<html>标签中,所有文档元信息应包含在<head>子标签中,而HTML传递信息和网页显示内容应包含在<body>子标签中。

  HTML4元素

  HTML4共包含91个元素,这些元素都是针对特定内容、结构或特性定义的。具体分为结构元素、内容元素和修饰元素3大类。

  1.结构元素

    结构元素用于构建网页文档的结构,多指块状元素。具体说明如下:

    div:在文档中定义一块区域,即包含框、容器。

    span:在文本行中定义一个区域,即行内包含框。

    ol:根据一定的排序进行列表。

    ul:没有顺序的列表。

    li:每条列表项。

    dl:以定义的方式进行列表。

    dt:定义列表中的词条

    dd:对定义的词条进行解释

    del:定义删除的文本

    ins:定义插入的文本

    h1~h6:标题1到标题6,定义不同级别的标题

    p:定义段落结构

    hr:定义水平线

  2.内容元素

    内容元素定义了元素在文档中表示内容的语义,一般指文本格式化元素,它们多是行内元素,具体说明如下:

    a:定义超链接

    abbr:定义缩写词

    acronym:定义取首字母的缩写词

    address:定义地址

    dfn:定义条目

    kbd:定义键盘键

    samp:定义样本

    var:定义变量

    tt:定义打印机字体

    code:定义计算机源码

    pre:定义预定义格式文本,保留源代码格式。

    blockquote:定义大块内容引用

    cite:定义引文

    q:定义引用短语

    strong:定义重要文本

    em:定义文本为重要

  3.修饰元素

    修饰元素定义了文本的显示效果,具体效果如下:

    b:定义粗体

    i:定义斜体

    big:定义文本增大

    small:定义文本缩小

    sup:定义文本上标

    sub:定义文本下标

    bdo:定义文本显示方向

    br:定义换行

    以下是已废除的修饰元素:

    center:定义文本居中

    font:定义文字的样式、大小和颜色

    u:定义文本下划线

    s:定义删除线。strike的缩写。

  HTML4属性

  HTML4元素包含的属性众多,可以分为核心属性、语言属性、内容属性和延伸属性等类型。

  1.核心属性

    核心属性主要包括以下3个,这3个基本属性为大部分元素所拥有:

    class:定义类型规则或样式规则

    id:定义元素的唯一标识

    style:定义元素的样式声明

    以下这些元素不拥有核心属性:html、head、title、base、meta、param、script、style,这些元素一般位于文档头部区域,用来定义网页元信息。

  2.语言属性

    语言属性主要用来定义元素的语言类型。

    lang:定义元素的语言代码或编码

    dir:定义文本方向,包括ltr和rtl取值,分别表示从左向右和从右向左。

    以下这些元素不拥有语言属性:frameset、frame、iframe、br、hr、base、param、script

  3.键盘属性

    键盘属性定义元素的键盘访问方法。

    accesskey:定义访问某元素的键盘快捷键

    tabindex:定义元素的Tab键索引编号

    使用accesskey属性可以使用快捷键(Alt+字母)访问指定URL,但是浏览器不能很好地支持,在IE中仅激活超链接,需要配合Enter键确定。

    示例1:一般会在导航菜单中设置快捷键

    <a href="http://www.baidu.com" accesskey="a">按住Alt键,单击A键可以链接到百度首页</a>

    tabIndex属性用来定义元素的Tab键访问顺序,可以使用Tab键遍历页面中的所有链接和表单元素。遍历时会按照tabIndex的大小决定顺序,当遍历到某个链接时,按Enter键即可打开链接页面。

    示例2:在文档中插入3个超链接,并分别定义tabIndex属性,这样可以通过Tab键快速切换超链接。

    <a href=“#“ tabindex="1">Tab 1</a>

     <a href=“#“ tabindex="1">Tab 1</a>

    <a href=“#“ tabindex="1">Tab 1</a>

  4.内容属性

    内容属性定义元素包含内容的附加信息,这些信息对于元素来说具有重要补充作用,避免元素本身包含信息不全而被误解,内容语义包括5个属性:

    alt:定义元素的替换文本

    title:定义元素的提示文本

    longdesc:定义元素包含内容的大段描述信息

    cite:定义元素包含内容的引用信息

    datetime:定义元素包含内容的日期和时间

  其中,alt和title是两个常用的属性,分别定义元素的替换文本和提示文本。替换文本(Alternate Text)并不是用来做提示的(Tool Tip),相反title属性才负责为元素提供额外说明信息。当图像无法显示时,必须准备替换文本来替换无法显示的图像,这对于图像和图像热点是必须的,因此alt属性只能用在img、area和input元素中(包括applet元素)。对于input元素,alt属性用来替换提交按钮的图片。  

  5.其他属性

    其他属性(定义元素的相关信息,当然这类属性也很多,这里仅列举两个比较实用的属性):

    rel:定义当前页面与其他页面的关系

    rev:定义其他页面与当前页面之间的链接关系

    rel和rev属性相对应,比较比如:

      rei:表示从源文档到目标文档的关系,而rev表示从目标文档到源文档的关系。

    示例:以下示例链接到同一个文件夹中前一个一个文档,这样当搜索引擎检索到rel="prev"信息之后,就知道当前文档与所链接的目标文档是平等关系,且处于相同的文件夹中。

    <a href="4.html" rel="prev"> 链接到集合中的前一个文档</a>

    其他关系与此类似,可以根据需要确定当前文档与目标文档之间的位置关系,并进行准确定义,以方便浏览器对信息的来源进行准确判断。