HTML (Hyper Text Mark-up Language),即超文本标记语言,是创建网页基础。本章将学习HTML文档的基本结构、组成HTML文档的各类常见标签。HTML 标签可以说明文字、图形、动画、声音、表格和链接等。本章重点是各种标签的基本语法和用法。
HTML称为超文本标签语言,它包括很多标签 (例如:<p>段落、<h1>~<h6>标题标签),这些标签用来告诉浏览器(例如微软公司的InternetExplorer,简称IE) 如何显示页面,它是网页制作的基础。
特点:简单性:各类HTML标签简单易学,方便开发者学习、使用。
平台无关性:这是HTML语言的最大优点,也是Internet网络盛行的原因之一。它包括“硬件”平台无关性和“软件”平台无关性,不管你的计算机是普通的个人电脑,还是服务器或其它计算机(比如:苹果机),也不管你的操作系统是常见的Windows,还是高端Unix或Linux,HTML都可以得到良好的支持
<html>标签
<html>标签是HTML文档的根标签,页面中的所有内容都必须包含在<html>与</html>之间。
<head>标签
一个网页文档从总体上可分为头和主体两部分。<head>和</head>定义了 HTML文档的头部分,它包含页面的标题、文件MIME类型、样式表、脚本等。就像平时写的书信,书信一般由称谓、问候语、正文、结尾、署名、日期所构成;
<title>标签
<title>标签用于设置HTML文档的标题。
<body>标签
<body>和</body>标签定义了 HTML文档的主体部分,用于设置页面实际需要呈现给用户的内容,如文字、图片、视频等。
<meta>标签
使用该标签描述网页的具体摘要信息,包括文档内容类型、字符编码信息、搜索关键字、网站提供的功能和服务的相信描述等。<meta>标签描述的内容并不显示在浏览器的窗口中,其目的是方便浏览器解析或利用搜索引擎搜索,它采用“名/值”对的方式进行设置。
1.name属性和 content属性
name属性用于描述设置内容的名称,其值所描述的内容通过content属性表示,便于搜索引擎查找、分类。其中最重要的属性值包括description、keywords和robots。
2.
http-equiv属性和 content属性
http-equiv属性用于提供 HTTP协议的响应头报文 (小文档头),它以名称/ 值形式进行设置。http-equiv属性的值所描述的内容通过content属性表示,通常是在网页加载前提供给浏览器等设备使用。其中最重要的属性值有content-type (提供编码信息)、refresh (刷新与跳转页面)、no-cache (页面缓存)以及 expires (网页缓存过期时间)。
HTML注释
在 HTML 网页文档中可以使用“<!--注释 -->”加入页面注释,注释内容将被浏览器忽略。HTML注释可以用于解释文档中某些内容的作用或功能。除此之外,还可以屏蔽部分暂不需要的HTML语句。
编辑HTML文档
记事本
记事本是Windows自带的文本编辑工具,使用简单方便,实际项目开发中常用来编辑代码较少的文档,使用记事本编辑HTML文档的步骤如下:
(1) 在Windows操作系统中打开记事本程序。
(2) 在记事本中输入HTML代码
(3) 点击菜单“文件”-->“保存”,弹出“另存为”对话框,
(4) 双击保存的HTML文档,系统将自动调用浏览器(如:IE)打开HTML文档。
最常用的几个标签
1. <h1>~<h6>标题标签
<hl>~<h6>标签用于设置网页中的标题文字,被设置的文字将以黑体或粗体的方式显示在网页中。标题标签是成对出现的,标题标签共分为 6级。在<hl>和</hl>之间的文字是一级标题,即最大最粗的标题。<h6>和</h6>之间的文字是最后一级标题,即最小最细的标题。
2. <p>段落标签
<p>标签是HTML的段落标签,表示以段落的形式组织内容。<p>与</p>之间可以加入文字表、表格等。一个段落可以包含多行文字,文字将随浏览器的大小自动换行。
3. <br/>换行标签
<br/>标签表示强制换行显示,这个标签没有结束标签。在HTML源码中的换行并不能让网页运行显示时换行,如果要想在制定的地方换行就要使用<br/>标签。
格式化标签
1. <center>居中标签
<center>标签用于将页面元素在所处的父标签中居中。可以使文字、图片等元素居中。
2. 有序列表标签<ol>
有序列表标签表示多个并列的列表项,它们之间有明显的先后顺序,<ol>表示有序列表,<li>表示列表项。
3. 无序列表标签<ul>
无序列表和有序列表类似,但多个列表项之间没有先后顺序。<ul>表示无序列表,也是使用<li>表示列表项。无序列表主要用来做页面导航菜单或新闻列表等等。
文本标签
1. 字体形状标签
字体形状包括字体加粗、倾斜、下划线、下标、上标等。<b>和</b>用于将文本加粗;<i>和</i>用于设置斜体;<u>和</u>用于为文本添加下划线;<sub>用于将文字作为下标显示,<sup>用于将文字作为上标显示。
2. 字体标签<font>
<font>和</font>用于设置文本的字体、字号、颜色等。
文件路径
(1) 绝对路径
绝对路径是指带域名或盘符的完整路径。如需要访问百度网站的logo,径为http://www.baidu.com/img/baidu_sylogo1.gif,http://www.baidu.com是Web应用程序的根目录,在根目录下拥有一个img目录,baidu_sylogo1.gif文件就存放在img目录下。
(2) 相对路径
相对路径就是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。使用相对路径可以为我们带来非常多的便利。
如果源文件和引用文件在同一个目录里,直接写引用文件名即可。例如:我们现在建一个源文件info.html,在info.html里要引用index.html文件作为超链接。