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. VUE 一些环境配置

    1. 安装  nrm 一键切换npm源 npm i nrm -g       [安装命令工具] nrm ls                 [罗列出所有的源] nrm use taobao  [使用 ...

  2. php面向对象三大特征

    封装:对外只告诉你如何操作,内部结构不需要你知道. 对外只提供可操作的接口(方法),对内的数据操作不可见 继承:子类可以继承父类的属性和方法,但是有限继承,public  protected  pri ...

  3. 上传插件webupload之调用拍照兼容问题

    在项目中,移动端用到了webupload插件来实现上传功能(我觉得这个插件挺好用的,所以无论pc还是移动端我都使用了这个插件来做上传功能) 在移动端要调起拍照功能,实现上传,须得在webuploade ...

  4. SpringMVC+Mybatis+MySQL8遇到的问题

    搭建SpringMVC+Mybatis+MySQL8过程中遇到的坑. 1.数据库驱动要使用新版本,我的和mysql保持一致. 查看mysql版本:MySQL\bin>mysql -V 配置对应版 ...

  5. vue图片上传到七牛云

    代码: <template> <div class="upload-info"> <div> <el-upload class=" ...

  6. [LeetCode] New 21 Game 新二十一点游戏

    Alice plays the following game, loosely based on the card game "21". Alice starts with 0 p ...

  7. [LeetCode] Positions of Large Groups 大群组的位置

    In a string S of lowercase letters, these letters form consecutive groups of the same character. For ...

  8. Three.js学习笔记01

    1.四大组件: 场景:场景是所有物体的容器 var scene = new THREE.Scene(); 相机: 正投影相机:远处的和近处的是一样大 THREE.OrthographicCamera ...

  9. 如何在Linux下查看版本信息

    Linux下如何查看版本信息, 包括位数.版本信息以及CPU内核信息.CPU具体型号等等,整个CPU信息一目了然.   1.# uname -a   (Linux查看版本当前操作系统内核信息)   L ...

  10. Trie 简介

    一.Trie简介 在计算机科学中,Trie,又称字典树.前缀树.单词查找树或键树,是一种树形结构,是一种哈希树的变种.典型应用是用于统计,排序和保存大量的字符串(但不仅限于字符串),所以经常被搜索引擎 ...