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>

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

关于HTML相关知识随记的更多相关文章

  1. HTML入门基础教程相关知识

    HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...

  2. X86 寻址方式、AT&T 汇编语言相关知识、AT&T 与 Intel 汇编语言的比较、gcc 嵌入式汇编

    注:本分类下文章大多整理自<深入分析linux内核源代码>一书,另有参考其他一些资料如<linux内核完全剖析>.<linux c 编程一站式学习>等,只是为了更好 ...

  3. 04StringBuffer相关知识、Arrays类、类型互换、正则、Date相关

    04StringBuffer相关知识.Arrays类.类型互换.正则.Date相关-2018.7.12 1.StringBuffer A:StringBuffer的构造方法: public Strin ...

  4. Vim编译器的相关知识

    Vim编译器相关知识 1.关于Vim编译器 在热门Linux操作系统中都会默认安装一款超好用的文本编辑器——名字叫“vim”,vim是vi编辑器的升级版. vim 具有程序编辑的能力,可以主动的以字体 ...

  5. 【Python五篇慢慢弹(5)】类的继承案例解析,python相关知识延伸

    类的继承案例解析,python相关知识延伸 作者:白宁超 2016年10月10日22:36:57 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给 ...

  6. 移动WEB像素相关知识

    了解移动web像素的知识,主要是为了切图时心中有数.本文主要围绕一个问题:怎样根据设备厂商提供的屏幕尺寸和物理像素得到我们切图需要的逻辑像素?围绕这个问题以iphone5为例讲解涉及到的web像素相关 ...

  7. listener监听器的相关知识

    从别人的博客上我学习了listener的相关知识现在分享给大家 1.概念: 监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上 ...

  8. UIViewController相关知识

    title: UIViewController 相关知识date: 2015-12-13 11:50categories: IOS tags: UIViewController 小小程序猿我的博客:h ...

  9. 【转】java NIO 相关知识

    原文地址:http://www.iteye.com/magazines/132-Java-NIO Java NIO(New IO)是从Java 1.4版本开始引入的一个新的IO API,可以替代标准的 ...

随机推荐

  1. Tips_信息列表(手风琴)效果的多种实现方法

    效果图: 一.纯CSS实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  2. Docker-Compose入门

    转:https://blog.csdn.net/chinrui/article/details/79155688

  3. HTML入门11

    在网页中添加矢量图形, 使用矢量图形在很多情况下,效果较好,拥有较小的文件尺寸,高度缩放,下面具体讲解如何在网页中添加矢量图形 位图和矢量图 位图文件包含了每个像素的位置和色彩信息,流行的位图格式包括 ...

  4. Android手机ROM刷机简介

    这一段时间刷了一堆ROM,安卓系列.CM.Hero.OldMos.隔壁新出的Android2.0,反正都尝了一下鲜,手机的照相机也刷得再也启不来了(不知道什么原因,杯具).有话说:"久病成良 ...

  5. c#使用 Newtonsoft.Json 将entity转json时,忽略为null的属性

    c#使用 Newtonsoft.Json 将entity转json时,忽略为null的属性,直接在属性上加下面的特性 [JsonProperty(NullValueHandling=NullValue ...

  6. H5混合开发问题总结

    1.This application is modifying the autolayout engine from a background thread, which can lead to en ...

  7. 串口RS232和485通信的波形分析

    一.串行数据的格式 异步串行数据的一般格式是:起始位+数据位+停止位,其中起始位1 位,数据位可以是5.6.7.8位,停止位可以是1.1.5.2位. 起始位是一个值为0的位,所以对于正逻辑的TTL电平 ...

  8. MySQL 5.7 安装指南

    1.下载1)进⼊入官⽹网下载5.7.23压缩包 下载地址:https://dev.mysql.com/downloads/mysql /5.7.html#downloads 2.安装与配置 1)将下载 ...

  9. mysql5.7忽略大小写问题

    mysql5.7忽略大小写问题 1.1 前言 新安装mysql5.7版本后,linux环境下默认是大小写敏感的. 1.2 忽略大小写敏感步骤 进入mysql配置文件:         vi   /et ...

  10. Data Center手册(3): Load Balancer

    Load Balancer的类型 DNS Round-Robin 这是一种很常见的分流的方式,具体配置如下: name server有一个zone文件,对于同一个domain,有多个IP www.ex ...