您的位置: 首页  >  文章  >  HTML学习

HTML学习

分类: 文章 • 2024-10-07 20:53:40

一、HTML语言简介

  • 中文译为“超文本标记语言”，主要是通过HTML标记对网页的文本、图片、声音等内容进行描述。
  • HTML提供了许多标记，如段落标记、标题标记、超链接标记、图片标记等，网页中需要定义什么内容，就用相应的HTML标记描述即可。
  • HTML之所以称为超文本标记语言，不仅是因为它通过标记描述网页内容，同时也由于文本中包含了所谓的“超级链接”点。通过超连接将网站与网页以及各种网页元素连接起来，构成了丰富多彩的Web页面。
  • HTML的发展方向是向XML发展。XML是一种可扩展标记语言。但在过渡过程中出现了XHTML：XHTML是可扩展超文本标记语言。HTML是一种基本的WEB网页设计语言，XHTML是一个基于可扩展标记语言的标记语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的可扩展标记语言（XML），所以，本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。
  • 目前国际上，网站设计推崇的Web标准是基于XHTML（是我们通常所说的DIV+CSS）。

二、HTML、HTM、SHTML、SHTM、XHTML介绍与区别

引言：每一个网页或者说是web页都有其固定的后缀名，不同的后缀名对应着不同的文件格式和不同的规则、协议、用法，最常见的web页的后缀名是.html和.htm，但这只是web页最基本的两种文件格式。以下对文件格式进行更多的介绍。

1、简介

  1. HTML
  • 关于HTML，HTML(HyperTextMark-upLanguage)即超文本标记语言，是WWW的描述语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。
  • HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
  1. HTM
  • 实际上HTM与HTML没有本质意义的区别，只是为了满足DOS仅能识别8+3的文件名而已，因为一些老的系统(win32)不能识别四位文件名，所以某些网页服务器要求index.html最后一个l不能省略。MSIE能自动识别和打开这些文件，但编写网页地址的时候必须是完全对应的，也就是说index.htm和index.html是两个不同的文件，对应着不同的地址。值得一提的是UNIX系统中对大小写敏感，不吻合的话就可能报没有文件或者找不到文件。
  1. SHTML
  • shtml是一种基于SSI技术的文件，也就是Server Side Include–SSI 服务器端包含指令，一些Web Server如果有SSI功能的话就会对shtml文件特殊招待，服务器会先扫一次shtml文件看没有特殊的SSI指令存在，如果有的话就按Web Server设定规则解释SSI指令，解释完后跟一般html一起调去客户端。
  1. SHTM
  • shtm与shtml的关系和htm与html的关系大致相似，这里就不多说了。

2、区别/联系

  1. HTML或HTM与SHTML或SHTM的关系是什么？
  • html或者htm是一种静态的页面格式，也就是说不需要服务器解析其中的脚本，或者说里面没有服务器端执行的脚本，而shtml或者shtm由于它基于SSI技术，当有服务器端可执行脚本时被当作一种动态编程语言来看待，就如asp、jsp或者php一样。当shtml或者shtm中不包含服务器端可执行脚本时其作用和html或者htm是一样的。
  1. HTML 和 XHTML 的区别
  • 简单来说，XHTML 可以认为是 XML 版本的 HTML，为符合 XML 要求，XHTML 语法上要求更严谨些。XHTML 1就是HTML 4.01的XML化，是一种不向前兼容的格式。两者的区别，粗略可以分为两大类比较：
    功能上的差别（主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页）与书写习惯上的差别。

三、HTML的组成结构

1、< doctype > 标签

  1. 说明：用来指明具体文件类型 （dtd）。
  2. 类型：

2、< html >标签

说明：根标签——页面最大的标签，表示文档的开始部分和结束部分。

3、< head >标签

说明：头部标签——定义文档的头部分。其中包括标签（标题标签），对网站名称/标题进行说明。

4、< body >标签

说明：主体标签——定义文档的主体部分，以后要写的内容基本都在这里写。

四、HTML文字标记

1、分类

  • 双标记：为了选取某部分内容来进行更改等操作。
    书写：<标记名> 内容 </标记名> （注意：/ 称之为关闭符号。）
  • 单标记：不需要选特定的取某部分时。
    书写：<标记名/>
  • 注释标记：注释语句用来给程序员看，电脑将不会执行相关语句。
    书写：
    HTML学习

2、具体标记讲解

  1. 标题标记< h >
  • HTML提供了6个等级的标题。按重要性递减排列为< h1>、< h2>、< h3>、< h4>、< h5>、< h6>。分别对应快捷键Ctrl+1、Ctrl+2、Ctrl+3、Ctrl+4、Ctrl+5、Ctrl+6。
    HTML学习
  1. 段落标记< p >
  • 说明：用来分段。
    HTML学习
  • 使用段落标记的几种方法：
    1）在代码中手动敲出。
    2）选中指定部分后，Ctrl+t键将出现环绕标签，输入p，回车即可。
    3）进入Dreamweaver设计视图中，直接进行回车分段，再重新进入代码，将自动添加好段落标记。
  1. 水平线标记< hr/ >
  • 具有的属性：
    HTML学习
  • 实例：
    HTML学习
  1. 换行标记< br/ >
  • 使用< br/ >换出的行可以使其与上一行之间的行间距比使用< p >< /p >表现的行间距小。
    HTML学习
  • 使用此换行标记的几种方法：
    1）在代码中手动敲出。
    2）不需选中，直接在想使其换行的地方，Shift+回车键，将自动添加。

3、标记属性讲解

  • 使用HTML制作网页时，如果想让HTML标记提供更多的信息，可以使用HTML标记的属性加以设置。
  • 书写：<标记名 属性1=“属性值1” 属性2=“属性值2” …> 内容 </标记名>
  • 注意：标记名与属性、属性与属性之间均以空格分开。任何标记的属性都有默认值，省略该属性则取默认值进行显示。
    HTML学习
  • 因为属性属于标记，因此，属性都是写到标记内部的。
  • 可以称之为标记，也可以称之为标签。
  • 标记之间可以存在的几种关系：并列关系、嵌套关系。

4、文档头部相关标记讲解

  1. < tittle>< /tittle>标签
  • 作用：给网页取名。
  • 格式：网页标题
  1. < meta/>标签
  • 作用：定义页面的元信息；可重复出现在头部标记中。它是一个单标记。标记本身不包含任何东西，通过“名称/值”的形式成对的使用其属性方可定义页面的相关参数。例如为搜索引擎提供网页的关键字、作者姓名、内容描述、以及定义网页的刷新时间等。
  • 格式：< meta name=“名称” content=“值”/>
  • 实例①： <meta name="keywords" content="Java培训，PHP培训"/>
    解释：其中name属性的值为keywords，用于定义网页关键字；content属性的值用于定义关键字的具体内容；
    设置方法：
    1）直接代码输入。
    2）插入——HTML——Keywords——进行输入即可。确认后将自动输入上此行代码。
  • 实例②：<meta name="description" content="Java培训，PHP培训"/>
    解释：其中name属性的值为description，用于定义网页描述；content属性的值用于定义描述的具体内容。需要注意的是网页描述的文字不必过多。
    设置方法：
    1）直接代码输入。
    2）插入——HTML——说明——进行输入即可。确认后将自动输入上此行代码。
  • 实例③：<meta name="author" content="咸鱼"/>
    解释：其中name属性的值为author，用于定义网页作者；content属性的值用于定义具体的作者信息。
  • 实例④：<meta http-equiv="名称" content="值"/>
    说明：在标记中使用http-equiv/content属性可以设置服务器发送给浏览器的HTTP头部信息，为浏览器显示该页面提供相关的参数。其中，http-equiv属性提供参数类型，content属性提供对应的参数值。默认会发送，通知浏览器发送的文件类型是HTML。
    种类：
    HTML学习HTML学习
  1. < link/>标签
  • 作用：一个页面往往需要多个外部文件的配合，在中使用标记可引用外部文件，一个页面允许使用多个标记。
  • 格式：<link rel="stylesheet" type="text/css" href="style.css" />
  • 这是css引用方法之一。
  1. < font>< /font>标签
  • 介绍控制网页中文本的字体(face)、字号(size)和颜色(color)。
  • <font 属性=“属性值”>文本内容
    HTML学习

5、文本格式化标记讲解

  • 为网页中的文本设置加粗、倾斜、删除线、下划线效果。
  • 加粗 推荐<strong></strong> 其次<b></b>
    倾斜 推荐<em></em> 其次<i></i>
    删除线 推荐<del></del> 其次<s></s>
    下划线 推荐<ins></ins> 其次<u></u>（不赞成使用）

五、HTML图像标记

HTML学习

  • HTML网页中任何元素的实现都要依靠HTML标记，要想在网页中显示图像就需要使用图像标记。接下来将详细介绍图像标记< img/>以及和他相关的属性。其基本语法格式：< img src=”图像URL”/ >。该语法中src属性用于指定图像文件的路径和文件名，它是img标记的必须属性。

  1. HTML学习具体相关属性：
    HTML学习

  2. 相对路径与绝对路径：

  • 绝对路径（不推荐使用。因为当存储路径或网上图片被更改时，所选图片将不能展示出来。）

代码：
HTML学习
效果：
HTML学习

  • 相对路径：以文件本身出发，去寻找目标文件。

1）图片与文件同级时，直接写文件名进行调用即可。

2）图片在文件的下一级情况：
HTML学习
3）图片在文件的上一级情况：使用“…/”即可。
HTML学习

相关推荐