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. vbs脚本实现自动打字祝福&搞笑

    脚本祝福礼物 概述 听说抖音上流行一种用代码做程序表白的东西,,,, 当然我也不是要表白,,,, 但是好像蛮有意思的,,,, 于是,又学了一下vbs脚本,做了几个很不错的祝福脚本,不懂代码的可以直接戳 ...

  2. dedecms 后台 菜单点击后打开的慢

    原因之一: 加载后台信息的时候  耗费的时间太长. 如果不关注这边的数据, 可以将他们删除掉. 删除  “信息统计”   : 找到   www.yoursite.com/dede/js/indexbo ...

  3. 详解封装微信小程序组件及小程序坑(附带解决方案)

    一.序 上一篇介绍了如何从零开发微信小程序,博客园审核变智障了,每次代码都不算篇幅,好好滴一篇原创,不到3分钟从首页移出来了.这篇介绍一下组件封装和我的踩坑历程. 二.封装微信小程序可复用组件 首先模 ...

  4. LoadRunner(四)——深度了解LR相关功能

    参考学习感谢:<精通软件性能测试与LoadRunner实战> 相关功能: 1 无工具情况下的性能测试 2性能测试工具LoadRunner的工作原理 3 VuGen应用介绍 4 协议的类型及 ...

  5. c++ 之bind使用

    网络编程中, 经常要使用到回调函数. 当底层的网络框架有数据过来时,往往通过回调函数来通知业务层. 这样可以使网络层只专注于 数据的收发, 而不必关心业务 在c语言中, 回调函数的实现往往通过函数指针 ...

  6. .NET Core多平台开发体验[3]: Linux (Windows Linux子系统)

    如果想体验Linux环境下开发和运行.NET Core应用,我们有多种选择.一种就是在一台物理机上安装原生的Linux,我们可以根据自身的喜好选择某种Linux Distribution,目前来说像R ...

  7. [Swift]LeetCode82. 删除排序链表中的重复元素 II | Remove Duplicates from Sorted List II

    Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct numb ...

  8. [Java]LeetCode297. 二叉树的序列化与反序列化 | Serialize and Deserialize Binary Tree

    Serialization is the process of converting a data structure or object into a sequence of bits so tha ...

  9. [Swift]LeetCode453. 最小移动次数使数组元素相等 | Minimum Moves to Equal Array Elements

    Given a non-empty integer array of size n, find the minimum number of moves required to make all arr ...

  10. 有点深度的聊聊JDK动态代理

    在接触SpringAOP的时候,大家一定会被这神奇的功能所折服,想知道其中的奥秘,底层到底是如何实现的.于是,大家会通过搜索引擎,知道了一个陌生的名词:动态代理,慢慢的又知道了动态代理有多种实现方式, ...