网络编辑必读手册4：HTML语言大全

来源：互联网发布：高三复读知乎编辑：程序博客网时间：2024/05/22 14:06

HTML字体(Fonts)

在HTML里，可以用font这个元素及其属性来设定字体的大小，颜色和字体风格。

字体风格

用face属性来设定字体风格。示例代码如下：

<p><font fac="arial">这一段的字体风格是arial。</font></p>

演示示例

字体颜色

用颜色属性(color)来设定字体颜色。

字体颜色代码请参见HTML颜色参考(HTML Color Reference)。

<p><font color="#FF0000">这一段的字体颜色是红色</font></p>

演示示例

注意

HTML4的标准中，已经不建议使用font及其属性来设定字体，而是建议用CSS来设定字体的大小，颜色，字体风格等。有关CSS中和文字的相关属性，请参见我们教程中的：

CSS常用文本属性

CSS常用字体属性

HTML背景颜色和背景图片

HTML的 <body> 有两个关于背景的属性，一个是 bgcolor，是设置背景颜色的；另一个是 background，是设置背景图片的。

bgcolor属性

bgcolor属性用来设置HTML网页的背景颜色。

示例

background属性

background属性用来设置HTML网页的背景图片。background属性值就是背景图片的路径和文件名，如：

<body background="../images/html_tutorials/blabla_logo.gif">

<body background="http://www.admin5.com/html/gifs/blabla_logo01.gif">

如果背景图片小于网页显示窗口，那么这个背景图片会自动重复。

示例

建议

bgcolor和background这两个<body>的属性，在新的HTML标准(HTML 4 and XHTML)里已不建议使用，而建议用CSS设置背景颜色和图片。

为保证浏览器载入网页的速度，建议尽量不要使用字节过大的图片作为背景图片。

HTML头部信息(Head)

HTML头部信息(head)里包含关于所在网页的信息。头部信息(head)里的内容，主要是被浏览器所用，不会显示在网页的正文内容里。

另外，搜索引擎如google,yahoo,baidu等也会查找你网页中的head信息。为了让搜索引擎能够收录你的网页，你也要填写适当的head信息。(网站被搜索引擎收录，还有其它的方法，比如被其它网站链接，这里不赘述，请浏览搜索引擎网站。)

下面说几个常用的head信息里的html元素，如标题(title)，链接(link)，样式(style)以及关于信息(meta)。

标题(title)

标题(title)是最常用的head信息。它不显示在HTML网页正文里，显示在浏览器窗口的标题栏里。见图：

头部信息(head)中的标题(title)

示例代码如下：

<head><title>HTML中文教程头部信息(head)之标题(title)说明</title></head>

链接(link)

用链接(link)可以建立和外部文件的链接。常用的是对CSS外部样式表(external style sheet)的链接。示例代码如下：

<link rel="stylesheet" href="mainstyles.css" type="text/css">

有关CSS外部样式表和示例，详见CSS简介。

样式(style)

用样式(style)可以设值网页的内部样式表(internal style sheet)。示例代码如下：

<head>

<style>

   body {background-color:white; color:black;}

   h1 {font: 18pt arial bold;}

</style>

</head>

有关CSS内部样式表和示例，详见CSS简介。

关于网页信息(meta)

在计算机语言里，你经常可以看到一个前缀 -- meta，meta就是“关于”(about)的意思。

这meta解释起来比较拗口，比如metadata，意为描述data的data，英文即data about data。还有一个词叫metalanguage，表示一种描述其它语言的语言。再举一个例子，metafile，表示描述其它文件的文件。

在HTML里，meta标记(meta tags)表示用来描述网页的有关信息。示例代码如下：

<meta name="description" content="HTML中文教程之头部信息">

<meta name="keywords" content="HTML,tutorials,source codes">

<meta name="author" content="站长网 站长学院">

利用meta中的Refresh你还可以实现自动跳转页面的功能。示例代码：

<meta http-equiv="Refresh" content="5;url=http://www.admin5.com/html/html_tutorials/index.html">

演示示例

HTML头部信息(Head)

HTML头部信息(head)里包含关于所在网页的信息。头部信息(head)里的内容，主要是被浏览器所用，不会显示在网页的正文内容里。

下面说几个常用的head信息里的html元素，如标题(title)，链接(link)，样式(style)以及关于信息(meta)。

标题(title)

标题(title)是最常用的head信息。它不显示在HTML网页正文里，显示在浏览器窗口的标题栏里。见图：

头部信息(head)中的标题(title)

示例代码如下：

<head><title>HTML中文教程头部信息(head)之标题(title)说明</title></head>

链接(link)

用链接(link)可以建立和外部文件的链接。常用的是对CSS外部样式表(external style sheet)的链接。示例代码如下：

<link rel="stylesheet" href="mainstyles.css" type="text/css">

有关CSS外部样式表和示例，详见CSS简介。

样式(style)

用样式(style)可以设值网页的内部样式表(internal style sheet)。示例代码如下：

<head>

<style>

   body {background-color:white; color:black;}

   h1 {font: 18pt arial bold;}

</style>

</head>

有关CSS内部样式表和示例，详见CSS简介。

关于网页信息(meta)

在计算机语言里，你经常可以看到一个前缀 -- meta，meta就是“关于”(about)的意思。

在HTML里，meta标记(meta tags)表示用来描述网页的有关信息。示例代码如下：

<meta name="description" content="HTML中文教程之头部信息">

<meta name="keywords" content="HTML,tutorials,source codes">

<meta name="author" content="站长网 站长学院">

利用meta中的Refresh你还可以实现自动跳转页面的功能。示例代码：

<meta http-equiv="Refresh" content="5;url=http://www.admin5.com/html/html_tutorials/index.html">

演示示例

HTML代码示例

HTML文本格式示例

一个非常简单的HTML文件
HTML简单段落
在HTML写多个段落
在HTML里如何换行
HTML正文标题
HTML居中显示的标题
在HTML文件里加一条横线(horizontal rule)
HTML文件的代码注释
HTML常用格式Tag
HTML预格式文本(preformatted text)
HTML不同计算机输出的Tag
HTML里加入地址
HTML里表示删除插入的Tag

HTML超链接示例

如何创建HTML超链接(hyperlinks)
将图片作为一个超链接
在HTML文件里跳转
在新窗口打开一个链接
链接到一个邮箱地址

HTML表格(Table)示例

HTML简单表格
没有边界的表格
有边界的表格
HTML表格的表头
表格空单元格
带标题的表格
包含多行或多列的表格单元格
一个表格单元格里的内容
表格的单元格内容和单元格边界之间的距离(CellPadding)
表格中单元格之间的距离(Cellspacing)
给表格加背景颜色或者背景图片
表格单元格对齐方式(align)
表格的单元格背景颜色和背景图片

HTML框架(Frame)示例

列分的框架(Frame, cols)
行分的框架(Frame, rows)
既有行分又有列分的框架(Frame, rows, cols)
用框架(Frame)导航
使用内嵌框架(IFrame)
如何固定框架(Frame)大小

HTML列表(List)示例

不排序列表(Unordered List)
排序列表(ordered list)
不排序列表的类型(Type)设置
嵌套的列表(nested list)
定义列表(definition list)
HTML不同类型(Type)的排序列表

HTML表单(Form)示例

HTML表单控件-单行文本输入框
HTML表单控件-密码输入框
HTML表单控件-复选框(checkbox)
HTML表单控件-复选框(checkbox)缺省已选(checked)
HTML表单控件-单选框(radio)
HTML表单控件-单选框(radio)缺省已选(checked)
HTML表单控件(Form Control)-下拉框(select)单选
HTML表单控件-下拉框(select)多选(multiple)
HTML表单控件-下拉框多选-下拉框设置(size)
HTML表单控件-多行输入框(textarea)
HTML表单控件-图片提交(input type=image)

HTML图片(Image)示例

在HTML里插入图片
HTML里图片的对齐方式(Align)
HTML的图片大小(Height,Width)
HTML图片的说明(Alt属性)

HTML字体(font)示例

HTML字体大小(font size)
HTML字体颜色(font color)
HTML字体风格(font face)

HTML网页背景颜色和背景图片示例

HTML背景颜色
HTML里加背景图片

HTML头部信息(Head)示例

利用Meta的Refresh自动跳转到指定页面