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_发送请求时添加一个随机数参数,让浏览器每次都重新发请求到服务器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. SpringBoot报错:The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one time zone

    解决方法: 在数据库连接url配置后边加&serverTimezone=GMT%2B8 例: jdbc:mysql://127.0.0.1:3306/test改为jdbc:mysql://12 ...

  3. Spring源码学习-容器BeanFactory(一) BeanDefinition的创建-解析资源文件

    写在前面 从大四实习至今已一年有余,作为一个程序员,一直没有用心去记录自己工作中遇到的问题,甚是惭愧,打算从今日起开始养成写博客的习惯.作为一名java开发人员,Spring是永远绕不过的话题,它的设 ...

  4. Winsock编程基础2(UDP流程)

    UDP用户数据报协议 服务器端 <1 创建套接字(socket) <2 绑定IP地址和端口(bind) <3 收发数据(sendto, recvfrom) <4 关闭连接(cl ...

  5. 3-2 Hadoop集群伪分布模式配置部署

    Hadoop伪分布模式配置部署 一.实验介绍 1.1 实验内容 hadoop配置文件介绍及修改 hdfs格式化 启动hadoop进程,验证安装 1.2 实验知识点 hadoop核心配置文件 文件系统的 ...

  6. Kotlin基础

    1.函数也是对象,可以作为参数和返回值 2.使用驼峰命名,尽量避免下划线 3.public函数应当有说明文档 4.lambda中花括号内前后都应该有空格 5.空值安全检查  var s: String ...

  7. 在vue中使用setter改写父子组件传的值

    概述 最近在用muse ui的时候碰到一个问题,简单来说是这样的,父子之间传值,父组件和子组件使用相同的props命名,并且子组件不用emit,而用等号赋值. 最后使用计算属性的setter函数解决了 ...

  8. [Swift]LeetCode55. 跳跃游戏 | Jump Game

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  9. [Swift]LeetCode306. 累加数 | Additive Number

    Additive number is a string whose digits can form additive sequence. A valid additive sequence shoul ...

  10. php中mysqli_fetch_assoc()和mysqli_fetch_row()的区别

    mysqli_fetch_assoc() 函数 从结果集中取得一行作为关联数组: <?php // 假定数据库用户名:root,密码:123456,数据库:RUNOOB $con=mysqli_ ...