HTML 基础标签实例

最新推荐文章于 2023-09-13 08:58:26 发布
最新推荐文章于 2023-09-13 08:58:26 发布
阅读量95 收藏
点赞数
原文链接：http://www.cnblogs.com/hahacjh/archive/2010/05/16/1736567.html
版权

 

一个简单的 HTML 文件
这个例子是一个很简单的 HTML 文件，使用了尽可能少的 HTML 标签。它向您演示了 body 元素中的内容是如何被浏览器显示的。
简单的段落
此例演示：段落元素中的文字如何被浏览器显示。
更多的段落
本例演示段落元素的某些缺省的行为。
“诗歌”问题
本例演示 HTML 格式化的某些问题。
折行
本例演示在 HTML 文档中折行的使用。
标题
本例演示在 HTML 文档中显示标题的标签。
居中排列的标题
本例演示一个居中排列的标题。
水平线
本例演示如何插入水平线。
隐藏的注释
本例演示如何在 HTML 源代码中插入隐藏的注释。
背景颜色
本例演示如何为 HTML 页面添加背景颜色。

例子解释

HTML 文本格式化实例

文本格式化
此例演示如何在一个 HTML 文件中对文本进行格式化
预格式文本
此例演示如何使用 pre 标签对空行和空格进行控制。
“计算机输出”标签
此例演示不同的“计算机输出”标签的显示效果。
地址
此例演示如何在 HTML 文件中写地址。
缩写和首字母缩写
此例演示如何实现缩写或首字母缩写。
文字方向
此例演示如何改变文字的方向。
块引用
此例演示如何实现长短不一的引用语。
删除字效果和插入字效果
此例演示如何标记删除文本和插入文本。

例子解释

HTML 链接实例

创建超级链接
本例演示如何在 HTML 文档中创建链接。
将图像作为链接
本例演示如何使用图像作为链接。
在新的浏览器窗口打开链接
本例演示如何在新窗口打开一个页面，这样的话访问者就无需离开你的站点了。
链接到同一个页面的不同位置
本例演示如何使用链接跳转至文档的另一个部分
跳出框架
本例演示如何跳出框架，假如你的页面被固定在框架之内。
创建电子邮件链接
本例演示如何如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）
创建电子邮件链接 2
本例演示更加复杂的邮件链接。

例子解释

HTML 框架实例

垂直框架
本例演示：如何使用三份不同的文档制作一个垂直框架。
水平框架
本例演示：如何使用三份不同的文档制作一个水平框架。
如何使用 <noframes> 标签
本例演示：如何使用 <noframes> 标签。
混合框架结构
本例演示如何制作含有三份文档的框架结构，同时将他们混合置于行和列之中。
含有 noresize="noresize" 属性的框架结构
本例演示 noresize 属性。在本例中，框架是不可调整尺寸的。在框架间的边框上拖动鼠标，你会发现边框是无法移动的。
导航框架
本例演示如何制作导航框架。导航框架包含一个将第二个框架作为目标的链接列表。名为 "contents.htm" 的文件包含三个链接。
内联框架
本例演示如何创建内联框架（HTML 页中的框架）。
跳转至框架内的一个指定的节
本例演示两个框架。其中的一个框架设置了指向另一个文件内指定的节的链接。这个"link.htm"文件内指定的节使用 <a name="C10"> 进行标识。
使用框架导航跳转至指定的节
本例演示两个框架。左侧的导航框架包含了一个链接列表，这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。

例子解释

HTML 表格实例

表格
这个例子演示如何在 HTML 文档中创建表格。
表格边框
本例演示各种类型的表格边框。
没有边框的表格
本例演示一个没有边框的表格。
表格中的表头(Heading)
本例演示如何显示表格表头。
空单元格
本例展示如何使用 "&nbsp;" 处理没有内容的单元格。
带有标题的表格
本例演示一个带标题 (caption) 的表格
跨行或跨列的表格单元格
本例演示如何定义跨行或跨列的表格单元格。
表格内的标签
本例演示如何显示在不同的元素内显示元素。
单元格边距(Cell padding)
本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。
单元格间距(Cell spacing)
本例演示如何使用 Cell spacing 增加单元格之间的距离。
向表格添加背景颜色或背景图像
本例演示如何向表格添加背景。
向表格单元添加背景颜色或者背景图像
本例演示如何向一个或者更多表格单元添加背景。
在表格单元中排列内容
本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。
框架(frame)属性
本例演示如何使用 "frame" 属性来控制围绕表格的边框。

例子解释

HTML 列表实例

无序列表
本例演示无序列表。
有序列表
本例演示有序列表。
不同类型的无序列表
本例演示一个无序列表。
不同类型的有序列表
本例演示不同类型的有序列表。
嵌套列表
本例演示如何嵌套列表。
嵌套列表 2
本例演示更复杂的嵌套列表。
定义列表
本例演示一个定义列表。

例子解释

HTML 表单与输入实例

文本域(Text fields)
本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。
密码域
本例演示如何创建 HTML 的密码域。
复选框
本例演示如何在 HTML 页中创建复选框。用户可以选中或取消选取复选框。
单选按钮
本例演示如何在 HTML 中创建单选按钮。
简单的下拉列表
本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。
另一个下拉列表
本例演示如何创建一个简单的带有预选值的下拉列表。（译者注：预选值指预先指定的首选项。）
文本域(Textarea)
本例演示如何创建一个文本域（多行文本输入控件）。用户可以在文本域中写入文本。在文本域中，可写入的字符字数不受限制。
创建按钮
本例演示如何创建按钮。你可以对按钮上的文字进行自定义。
Fieldset around data
本例演示如何在数据周围绘制一个带标题的框。

表单实例

带有输入框和确认按钮的表单
本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。
带有复选框的表单
此表单包含两个复选框和一个确认按钮。
带有单选按钮的表单
此表单包含两个单选框和一个确认按钮。
从表单发送电子邮件
此例演示如何从表单发送电子邮件。

例子解释

HTML 图像实例

插入图像
本例演示如何在网页中显示图像。
从不同的位置插入图片
本例演示如何将其他文件夹或服务器的图片显示到网页中。
背景图片
本例演示如何向 HTML 页面添加背景图片。
排列图片
本例演示如何在文字中排列图像。
浮动图像
本例演示如何使图片浮动至段落的左边或右边。
调整图像尺寸
本例演示如何将图片调整到不同的尺寸。
为图片显示替换文本
本例演示如何为图片显示替换文本。在浏览器无法载入图像时，替换文本属性告诉读者们失去的信息。为页面上的图像都加上替换文本属性是个好习惯。
制作图像链接
本例演示如何将图像作为一个链接使用。
创建图像映射
本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。
把图像转换为图像映射
本例显示如何把一幅普通的图像设置为图像映射。

例子解释

HTML 背景实例

搭配良好的背景和颜色
一个背景颜色和文字颜色搭配良好的例子，使页面中的文字易于阅读。
搭配得不好的背景和颜色
一个背景颜色和文字颜色搭配得不好的例子，使页面中的文字难于阅读。
可用性强的背景图像
背景图像和文字颜色使页面文本易于阅读的例子。
可用性强的背景图像 2
另一个背景图像和文字颜色使页面文本易于阅读的例子。
可用性差的背景图像
背景图像和文字颜色使页面文本不易阅读的例子。

例子解释

HTML 样式 (style) 实例

HTML中的样式
本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。
没有下划线的链接
本例演示如何使用样式属性做一个没有下划线的链接。
链接到一个外部样式表
本例演示如何 <link> 标签链接到一个外部样式表。

例子解释

HTML 头部 (head) 实例

文档的标题
头元素内部的标题信息不会显示在浏览器窗口中。
一个 target，所有的链接
本例显示如何使用 base 标签使页面中的所有标签在新窗口中打开。

例子解释

HTML 元信息 (meta) 实例

文档描述
Meta 元素中的信息可以描述 HTML 文档。
文档关键字
Meta 元素中的信息可以描述文档的关键词。
重定向
这个例子演示：在网址已经变更的情况下，将用户重定向到另外一个地址。

例子解释

HTML 脚本 (Script) 实例

插入一段脚本
本例演示如何将脚本插入 HTML 文档。
运行于不支持脚本的浏览器
本例演示如何对付不支持脚本的浏览器。

例子解释

转载于:https://www.cnblogs.com/hahacjh/archive/2010/05/16/1736567.html

HTML简介及常用标签实例 初学前端适用
weixin_44437620的博客
08-02 350
什么是HTML？ HTML使用来描述网页的一种语言 1.是一种超文本标记语言 2.HTML用来描述网页 基本格式： <!DOCTYPE html> // 声明引用DTD <html> //html标签，根标签，定义了整个HTML文档 <head> //文档的头部，head标签 <meta charset="utf-8"> <title></title> //文档的标题 </head> <body>
HTML 基础教程：基本的 HTML 标签 - 四个实例
王建的博客
07-04 2263
基本的 HTML 标签 - 四个实例 本章通过实例向您演示最常用的 HTML 标签。 提示：不要担心本章中您还没有学过的例子，您将在下面的章节中学到它们。 提示：学习 HTML 最好的方式就是边学边做实验。我们为您准备了很好的 HTML 编辑器。使用这个编辑器，您可以任意编辑一段 HTML 源码，然后单击 TIY 按钮来查看结果。 HTML 标题 HTML 标题（Heading）是通过 < h1> - < h6> 等标签进行定义的。 实例 <h1>This is
HTML5语法中需要掌握的3个要点
weixin_34355881的博客
08-04 105
HTML5 中规定的语法，在设计上兼顾了与现有HTML之间最大程度的兼容性。例如，在Web上充斥着“<p>没有结束标签”等HTML现象。HTML5不将这些视为错误，反而采取了“允许这些现象存在，并明确记录在规范中”的方法。因此，尽管与XHTML相比标记比较简洁， 而在遵循HTML5的Web浏览器中也能保证生成相同的DOM。那么下面就来看看具体的HTML5语法。可以...
HTML基础知识要点锦集
柱哥的博客
03-23 338
HTML基础知识要点锦集 本文通过对w3schoolHTML基础教程，整理出比较常见的却又容易遗忘或者忽略的HTML相关知识点。本文的标题顺序与w3school中的HTML基础教程标题顺序保持一致。适合翻阅和复习。 1.HTML 基础 (1) 图像的名称和尺寸是以属性的形式提供的 一般我们以为要用样式去操作宽高，但是图片是有直接可用的属性去指定的。 &lt;img src="...
HTML基础标签与相关案例
jakelihua
10-04 1900
速通过HTML。
java过滤html标签获取纯文本信息的实例
08-27
本实例的代码封装在FilterHtmlUtil类中，提供了一个静态方法Html2Text用于将传入的包含HTML标签的字符串，过滤标签后返回纯文本内容。这个工具类可以在需要从HTML内容中提取文本的任何Java程序中使用。 总结来说，...
html基础实例
05-14
"html基础实例"这个主题涵盖了HTML的基本概念、语法以及常见的元素使用方法，旨在帮助初学者理解和掌握HTML的编写技巧。这些实例可能是多年经验的结晶，能够帮助你快速上手并提升代码编写能力。 在HTML中，我们首先...
HTML 使用表单标签实现注册页面的实例代码
12-14
在`<body>`标签内，我们使用`<form>`标签创建了一个表单，它是处理用户输入数据的基础。表单的`action`属性指定提交表单后要访问的URL，`method`属性则指定了数据传输的方式，这里使用的是`POST`方法，意味着数据会...
网页基础（三）HTML基本标签
01-07
标题 1. 一级标题  一个页面只有一次 2. 二级标题 ...在html标准中 请使用小写标签 HTML对大小写不敏感...常用标签有换行水平线预定义文本在下列代码中给出实例 马上十点了 我 是 一 个
入门HTML(含常见标签)—附实现案例
qq_63218110的博客
11-27 5105
HTML不同于我们所熟知的C，Java等编程语言，它是一种标签化语言，其形式类似于XML。本篇文章主要常见文本标签和文档结构标签。
web前端入门到实战：HTML5基础-新增标签+新增属性+布局案例
最新发布
delishcomcn的博客
09-13 634
autocomplete属性规定form或input域拥有自动完成功能，该属性适用于标签和标签。multiple多选，适用于email和file，email中不同邮箱用,隔开。embed可插入flash文件，但flash已经逐渐被淘汰，不建议使用。details定义元素的详细内容，配合summary。标签中，sizes属性可以规定被链接资源的尺寸的大小。figcaption 定义figure元素的标题。date pickers在移动端效果比较好。meter状态标签，可以定义电压。
HTML基础标签及案例
Willing卡卡的博客
04-06 689
HTML HTML概述 HTML：Hyper Text Markup Language（超文本标记语言）；是一门用户创建网页文档的标记语言，网页本身是一种文本文件，在文本文件中添加标记符。HTML是用来创建网页的标记语言，HTML标记的内容是用浏览器来解析的；所见即所得！ HTML特点 1、简易性：超文本标记语言的版本升级采用的超集方式，更加方便灵活； 2、可扩展性：超文本标记语言采取的子类元素的...
HTML基础知识总结
ss810540895的博客
05-05 9184
是告诉浏览器这是html文档的开始。Html文档的最后一个标签是之间的文本是头部信息，在之间的文本是文档标题，会显示在浏览器的窗口的标题栏。设置网页编码的语句为，是在
HTML基础知识点
qq_40046544的博客
07-27 9161
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。HTML指的是超文本标记语言（HyperTextMarkupLanguage），它是用来描述网页的一种语言。web标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。绝对路径指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如D从。...
学习HTML5大前端应该重点掌握哪些内容？
qf2019的博客
01-09 426
随着互联网技术更新迭代速度的加快，很多人都想加入Java大军中来。但是对于零基础的小白来说，学习HTML5大前端不仅需要掌握一定的学习方法，还要清楚的知道学习HTML5大前端应该重点掌握哪些内容，这就比较困难了。当然了，有困难就有相应的解决办法，小编为大家整理了以下几个需要学习的部分，供给大家参考。 一、基础知识的学习 对于零基础的学员而言，学好基础很重要。学习HTML5大前端的过程就像是盖楼房的...
HTML基础 HTML重点知识总结
豆豆庄园
03-13 3535
HTML 1、HTML概念 HTML：Hyper Text Mark-up Language超文本标记语言，是一种用于创建网页的标准标记语言。通过元素标签的形式建立Web站点，通过浏览器进行解析。 2、HTML基本语法结构 开始标签 属性  属性值 内容 结束标签； hello world 1 3、HTML文档结构 所用的HTML网页文件都是由、、、四对元素标签构成的；
HTML概述+HTML核心（HTML知识点总结）
发光吖的博客
01-11 9190
HTML概述+HTML核心HTML概述HTML & CSS概述术语什么是HTML?MDN:什么是CSS?执行HTML&CSS版本和兼容性开发环境的准备插件安装HTML核心第一个网页元素（Element）属性的分类元素的嵌套标椎的文档结构语义化什么是语义化？为什么需要语义化？文本元素hpspan 【无语义】preHTML实体a元素href属性target属性路径的写法站内资源和站外资...
HTML <frameset> 标签
weixin_30711917的博客
11-28 86
定义和用法 frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。 实例 简单的三框架页面： <html> <frameset cols="25%,50%,25%"> <fr...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值