HTML
HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
常见实体
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | | ||
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| “ | 引号 | " | “ |
| ‘ | 撇号 | ' (IE不支持) | ‘ |
| ¢ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 日元 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
整体结构
一个网页对应多个HTML文件,超文本标记语言文件以.htm(磁盘操作系统DOS限制的外语缩写)为扩展名或.html(外语缩写)为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件,只用修改文件后缀即可。标准的超文本标记语言文件都具有一个基本的整体结构,标记一般都是成对出现(部分标记除外例如:<br/>),即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。
标记符<html>,说明该文件是用超文本标记语言(本标签的中文全称)来描述的,它是文件的开头;而</html>,则表示该文件的结尾,它们是超文本标记语言文件的开始标记和结尾标记。
头部内容
标记符<html>:说明该文件是用超文本标记语言来描述的,它是文件的开头,而</html>则表示该文件的结尾,它们是超文本标记语言文件的开始标记和结尾标记。
<head></head>:这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果。头部中最常用的标记符是标题标记符和meta标记符,其中标题标记符用于定义网页的标题,它的内容显示在网页窗口的标题栏中,网页标题可被浏览器用做书签和收藏清单。
| 标签 | 描述 |
|---|---|
| <head> | 定义了文档的信息 |
| <title> | 定义了文档的标题 |
| <base> | 定义了页面链接标签的默认链接地址 |
| <link> | 定义了一个文档和外部资源之间的关系 |
| <meta> | 定义了HTML文档中的元数据 |
| <script> | 定义了客户端的脚本文件 |
| <style> | 定义了HTML文档的样式文件 |
主体内容
<body></body>;,网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。
1 | <html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> |
页面主体常用设置
| 定义网页背景颜色 | <body bgcolor=”背景颜色”> |
|---|---|
| 设置背景图片 | <body background=”图片地址”> |
| 设置文字颜色 | <body text=”文字颜色”> |
| 设置链接文字属性 | <body link=”颜色”> |
| 设置页面边距 | <body topmargin=”距离”> |
页面头部元素
| 页面标题元素 | <title>页面标题</title> |
|---|---|
| 设置页面关键词 | <meta name=”keywords” content=”关键词”> |
| 设置页面主要内容 | <meta name=”description content=”页面描述”> |
| 定义页面的搜索方式 | <meta name=”robots” content=”index”> |
| 定义页面作者信息 | <meta name=”author” content=”作者名”> |
| 定义网页文字及语言 | <meta http-equiv=”content-type” content=”text/html;charset=”utf-8”> |
| 定义页面的跳转 | <meta http-equiv=”refresh” content=”10:url=index.html”> |
文字字体设置
| 设置字号 | <font size=”文字字号”>……</font> |
|---|---|
| 设置字体 | <font face=”字体样式”>……</font> |
| 设置字体颜色 | <font color=”字体颜色”>……</font> |
| 设置粗体 | <b>加粗字体</b> <strong>加粗字体</strong> |
| 设置斜体 | <i>斜体</i> <em>斜体</em> <cite>斜体</cite> |
| 设置上标和小标 | <sup>上标内容</sup> <sub>下标内容</sub> |
| 标题样式 | <h1>~<h6> |
| 设置段落 | <p>段落</p> |
| 段落的对齐方式 | <p align=”center”>段落</p> |
| 换行标记 | <br /> |
| 水平线 | <hr /> <hr width=”宽度” size=”高度” color=”颜色” align=”center”> |
| 滚动文字标签 | <marquee>滚动文字</marquee> |
图像标记
| src | 图像源文件 |
|---|---|
| alt | 提示文字 |
| width、height | 宽度和高度 |
| border | 边框 |
| vspace | 垂直间距 |
| hspace | 水平间距 |
| align | 排列 |
添加影音娱乐
| 添加背景音乐: | <bgsound src=”音乐地址”> |
|---|---|
| 添加多媒体文件 | <embed src=”多媒体文件地址” width=”多媒体宽度” height=”多媒体高度” autostart=”是否自动运行” loop=”是否循环播放”></embed> |
超链接
<a href=”链接地址” name=”链接命名” title=”提示文字” target=”目标窗口”>……</a>
target有:-self:在当前页面打开 -blank:全新窗口打开 -top:在顶层框架中打开 -parent:在当前框架的上一层打开
表格
*表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义) *
| 表格的高度和宽度 | width、height |
|---|---|
| 表格的标题 | <caption>表格标题</caption> |
| 表格的表头 | <th>……<th> |
| 表格的对齐方式 | <table align=”center”> |
| 表格的边框宽度 | <table border=”宽度”> |
| 表格边框颜色 | <table border=”1” bordercolor=”颜色”> |
| 单元格间距 | <table cellspacing=”值”> |
| 单元格边距 | <table cellpadding=”值”> |
| 表格背景颜色 | <table bgcolor=”颜色”> |
| 表格的背景图像 | <table background=”图像地址”> |
框架
框架技术可以将浏览器分割成多个小窗口,并且每个小窗口中显示不同的网页。
<frame>标记用来定义框架
<frameset>用来定义框架集
表单
属性
| action | 提交的地址 |
|---|---|
| method | 提交的方法 |
| name | 表单命名 |
| enctype | 编码方式 application/x-www-form-urlencoded为默认 |
表单控件
| text | 文本字段 |
|---|---|
| password | 密码域 |
| radio | 单选按钮 |
| checkbox | 复选框 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| image | 图像域 |
| hidden | 隐藏域 |
| button | 普通按钮 |
| file | 文件域 |