HTML

最新推荐文章于 2025-12-04 17:59:42 发布
原创 最新推荐文章于 2025-12-04 17:59:42 发布 · 728 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html


HTML（HyperText Mark-up Language ）超文件注标式语言，一种为普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件达到预期的显示效果。 HTML中不区分大小写。

1.文件标记

<body text="#000000" link="#0000FF" alink="#FF0000" vlink="#0000FF" background="bg1.gif" bgcolor="#FFFFFF" leftmargin=2 topmargin=2 bgproperties="fixed">

  • text="#000000"
    用以设定文字颜色。 #000000 代表黑色，亦可以采用颜色的名称，即 text="black" 。

  • link="#0000FF"
    设定超链接文字的颜色

  • alink="#FF0000"
    设定刚按下时文字连结颜色（点击超链接时显示的颜色）

  • vlink="#0000FF"
    设定连结后的颜色。（超链接被点击过之后的颜色）。

  • background="bg1.gif"
    设定背景墙纸。GIF 或 JPEG 皆可，可以是绝对途径或相对途径。

  • bgcolor="#FFFFFF"
    设定背景颜色。当己设定背景墙纸时会失去作用，除非墙纸有透明部分。

  • leftmargin=2
    设定整份文件显示画面的左方边沿空间，单位为像素。 『只适用于IE』

  • topmargin=2
    设定整份文件显示画面的上方边沿空间。 『只适用于IE』

  • bgproperties="fixed"
    固定背景墙纸，当卷动文字时墙纸不会跟著卷动。 『只适用于IE』
2.排版标记

段落标记<p>作用：为字、画、表格等之间留一空白行。<p align="center"> align可选值：right, left, center（默认）。

水平线： <hr align="LEFT"size="2"width="70%"color="#0000FF"noshade> 为例。

  • align="LEFT"
    设定线条置放位置，可选择：left；right；center 三种设定值。

  • size="2"
    设定线条厚度，以像素作单位，默认为 2。

  • width="70%"
    设定线条长度，可以是绝对值（以像素作单位）或相对值，默认为 100%。

  • color="#0000FF" 『只适用于IE』
    设定线条颜色，默认为黑色。 亦可以采用颜色的名称 。

  • noshade
    设定线条为平面显示，若删去则具阴影或立体，这是内定值。

文字标签：<font face="Arial" size="+2" color="#008000">Creation of Webpage</font>

  • face="Arial" (忽略)
    设定文字的字形。Arial 是常用的一种，请不要使用 Window 内建字形以外的字形。于没有设定为 Gb2312 Encoding 的中文网页，Netscape Netvigator 不会显示此标记 所指明的任何中文字形。
  • size="+2" 
    设定文字的大小。其值可以是绝对或相对， 
    绝对的意思便是标记自己决定文字的大小，size="5" 表示其大小便是 5
    相对的意思便是在内定值 3 的基础上增加或减少大小级数，如 size="+2" 便等同绝 对表示法的 size="5"
  • color="#008000" 
    设定文字的颜色。

3.清单标记

<ol>称为顺序清单标记。<li>则用以标示清单项目。type="i" 设定数目款式，其值有五种，内定为 type="1";start="4" 设定开始数目，默认为1。

<ol type="a" start="4">

<li>财务部</li>

<li>学工部</li>

<li>人事部</li>

</ol>


<ul>又叫符号清单。type值有disc、circle、square
<ul type="circle">
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ul>

<dl>称为定义清单标记。 <dt> 用以标示定义条目，<dd> 则用以标示定义内容。 所谓定义清单就是一种分二层的项目清单，其不故符号及数目。 

<dl>

<dt>廊坊师范学院</dt>

<dd>社会发展学院</dd>

<dd>数信学院</dd>

</dl>

4.表单标记

<table>是一个容器标记，意思是说它用以声明这是表格而且其他表格标记只能在他的 范围内才适用，<TR>用以标示表格列，<TD>用以标示储存格（cell）

<table>的参数设定：

例如： <table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#FF00FF" cols="2">

  • border="1" 表格边框厚度。

  • cellspacing="2" 表格格线厚度

  • cellpadding="2" 文字与格线的距离

  • align="CENTER" 表格的摆放位置（水平），可选值为： left, right, center

  • valign="TOP". 表格内字画等的摆放贴位置（垂直），可选值为： top, middle, bottom。

  • background="myweb.gif" 表格底图

  • bgcolor="#0000FF" 表格底色，与 background 不要同用
  • bordercolor="#FF00FF" 表格边框颜色

  • cols="2" 表格栏位数目

<tr> 的参数设定：

例如：<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" >

  • align="RIGHT" 该一列内字画等的摆放贴位置（水平），可选值为： left, center, right。

  • valign="MIDDLE" 该一列内字画等的摆放贴位置（垂直），可选值为： top, middle, bottom。

<td> 的参数设定： 用rowspan和colspan来合并单元格

例如：<td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" background="myweb.gif">

  • colspan="5" 该一储存格向右打通的栏数。

  • rowspan="4" 该一储存格向下打通的列数。


<form>称为表单标记，用以宣告此为表单模式，属于一个容器标记，表示其它表单标记需要在它的包围中才有效，<INPUT>便是其中的一个，用以设定各种输入资料的方法。

<form> 的参数设定（常用）：

例如： <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">

  • action="http://your.isp.com/cgi-local/example.cgi" 将表单中的信息提交到特定地址下处理
  • method="post"
    传送资料给 CGI 的的方式，可选值为 post, get。你只需记住POST容许传送大量资料，但 get则只接受低于 1K 的资 料，所以你若看过别人的表单原始码的话，你会发现申请表单用的是post而搜 找器用的是 get。get请求地址栏会携带提交的数据，post不会携带。

<input> 的参数设定（常用）：
通过设置type的类型，表示不同的功能。<input type="Text" >可选值为 text普通输入框，password密码隐藏输入框，checkbox多选，radio 单选, submit提交按钮，reset重置按钮,image图片按钮，file文件上传, hidden隐藏按钮，button普通按钮 ，select选择下拉框，textarea不可更改文字描述框。


5.图影标记

<IMG> 的一般参数设定：

例如 <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">

  • src="logo.gif" 图片来源，接受 .gif, .jpg 及 .png 格式，相对及绝对皆可。
  • width=100 height=100 设定图片大小，此宽度、及高度一般采用 pixels 作单位。
  • hspace=5 vspace=5 设定图片边沿空白，以免文字或其它图片过于贴近。hspace 是设定图片左右的空 间，vspace 则是设定图片上下的空间，高度采用 pixels 作单位。
  • border=2 图片边框厚度。
  • align="top"
    调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底端、 左右等，可选值：top, middle, bottom, left, right，内定为 bottom。
  • alt="Logo of PenPal Garden"
    这是用以描述该图形的文字，若用者使用文字浏览器，由于不支持图片，这些文字更会代替图片而被显示。若于支持图片显示的浏览器，
  • 当鼠标移至图片上该些 文字亦会显示。
  • lowsrc="pre_logo.gif"
    设定先显示低解像图片，若所加入的是一张很大的图片，下载时很长，这张低 解像图片会先被显示以免浏览失却兴趣，通当是原图片灰阶版本。  

<embed> 是用以插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU 等等，Netscape 及 新版的 IE 都支援。

例如：<embed src="your.mid" autostart="true" loop="true" hidden="true">

  • autostart=true 是否在音乐上传完之后，就自动播放音乐。true 是，false 否 (内定值)。
  • loop="true" 是否自动反覆播放。LOOP=2 表示重复两次，true 是， false 否。
  • HIDDEN="true" 是否完全隐藏控制画面，true 为是，no 为否 (内定)。
  • STARTTIME="分:秒" 设定歌曲开始播放的时间。如 STARTTIME="00:30" 表示从第30秒处开始播放。
  • VOLUME="0-100" 设定音量的大小，数值是0到100之间。内定则为使用者系统本身之设定。
  • WIDTH="整数" 和 HIGH="整数" 设定控制画面的宽度和高度。
  • ALIGN="center"
    设定控制画面和旁边文字的对齐方式，其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom。
  • CONTROLS="smallconsole"
    设定控制画面的外貌。预设值是 console。
    console 一般正常的面板 　　
    smallconsole 较小的面板 　　
    playbutton 只显示播放按钮 　　
    pausecutton 只显示暂停按钮 　　
    stopbutton 只显示停止按钮 　　
    volumelever 只显示音量调整钮  

6.链接标记

<a href="index.html"target="_top">

  • href="index.html" 链接文件
  • target="_top"
    设定链接被按下后要显示的视窗。可选值为： _blank, _parent, _self, _top
    • target="_blank" 或 target="new" 将连结的画面内容，开在新的浏览视窗中。
    • target="_parent" 将连结的画面内容，当成文件的上一个画面。
    • target="_self" 将连结的画面内容，显示在目前的视窗中。(内定值)
    • target="_top" 将框架中连结的画面内容，显示在没有框架的视窗中。（即除去了框架)

<BASE> 是一个链接基准标记，用以改变文件中所有链接标记的参数内定值。它只能应用于文件的开头部分，即标记 <HEAD> 与 </HEAD> 之间。 

指示所有链接按照base中的设定显示。

7.框架标记

<frameset> 称框架标记，用以宣告HTML文件为框架模式，并设定视窗如何分割。 <frame> 则只是设定某一个框窗内的参数属性。

注意：使用框架标签就不能有body

< frameset > 参数设定：

例子：<frameset rows="90,*" frameborder="0" border=0 framespacing="2" bordercolor="#008000">

  • COLS="90,*"
    垂直切割画面(如分左右两个画面)，接受整数值、百分数， * 则代表占用余下空 间。数值的个数代表分成的视窗数目且以逗号分隔。
例如：COLS="30,*,50%" 可以 切成三个视窗，第一个视窗是 30 pixels 的宽度，第二个视窗是当分配完第一及第三个视窗后剩下的空间，
第三个视窗则占整个画面的 50% 宽度 。
  • frameborder="0"
    设定框架的边框，其值只有 0 和 1 ， 0 表示不要边框， 1 表示要显示边框。
  • border="0"
    设定框架的边框厚度，以 pixels 为单位。
  • bordercolor="#008000"
    设定框架的边框颜色。
  • framespacing="5"
    表示框架与框架间的保留空白的距离。

<frame> 参数设定：
例子：<frame name="top" src="a.html" marginwidth="5" marginheight="5" scrolling="Auto" frameborder="0" noresize framespacing="6" bordercolor="#0000FF">

  • src="a.html"
    设定此框窗中要显示的网页档案名称，每个框窗一定要对应著一个网页档案。你可使用绝对路径或相对路径
  • name="top"
    设定这个框窗的名称，这样才能指定框架来作连结，必须存在可以任意命名。
  • scrolling="Auto"
    设定是否要显示卷轴，YES 表示要显示卷轴，NO 表示无论如何都不要显示， AUTO是视情况显示。
  • noresize
    设定不让使用者可以改变这个框框的大小，亦没有设定此参数，使用者可以很随 意地拉动框架，改变其大小。
  • marginhight=5
    表示框架高度部份边缘所保留的空间。
  • marginwidth=5
    表示框架宽度部份边缘所保留的空间。 
实现点击左边链接，在右边显示的内容。

<html>
	<head>
		<title>HTML实例</title>
	</head>
	
	<frameset rows="80,*"> 表示划分上下两部分，上面视窗有80像素的宽度
		<frame name="top" src="a.html"/>  超链接a.html中的target要和name中的名称一样
		<frameset cols="80,*">
			<frame name="left" src="b.html"/>
			<frame name="right" src="b.html"/>
		</frameset>
	</frameset>
</html>
<!--b.html中的代码内容-->
<html>
	<head>
		<title>b的网页</title>
	</head>
	
	<body>
		<a href="test.html" target="right">超链接1</a>
		<a href="百度.html" target="right">超链接2</a>
		<a href="2.html"target="right">超链接3</a>
	</body>
</html>

8.其他标记

<meta> 是放于<head> 与 </head>之间的标记，有以下功能。

  • <meta name="Description"  content="This is Chris's Home Page">
    该网页的描述，作用於寻找引擎的登录

  • <meta name="Keywords" content="Chris, Web, Music, photo">
    该网页的关键字，作用于寻找引擎的登录

  • <meta http-equiv="refresh" content="10; url=http://www.hkiwc.com">

    在指定时间后跳转到其他页面
HTML5调整图像垂直边距,77．通过vspace和hspace属性可以分别调整图像的垂直边距和水平边距。（）()...
weixin_28807463的博客
06-18 1975
具有东方建筑特色、．通图像规模宏大、气势雄伟的古代建筑群是( )属性水平完成规定的大作业分别Which of the following parks are the urban parks of New York?调整的垂Which of the following countries have once occupied New York city in the 17th century?直边5...
java语言基础教程_清华大学出版社-图书详情-《Java语言基础教程》
weixin_39610229的博客
02-26 346
前言ForewordJava语言是一种面向对象、分布式的、解释型的程序设计语言，是目前被广泛使用的编程语言之一，在IT业的应用一直保持强劲的增长势头。很多新的计算机技术领域都涉及Java语言。本书完全按照Java SE 6进行编写，反映Java语言的新特性。本书从Java语言的基础内容开始，注重Java语言的面向对象特性，强调面向对象的程序设计思想，在实例上注重实用性和启发性。全书根据“Java语...
equals和==的区别
人生苦短，我用Python
04-18 1万+
String类： String 类代表字符串。Java 程序中的所有字符串字面值（如 "abc" ）都作为此类的实例实现。字符串是常量；它们的值在创建之后不能更改。字符串缓冲区支持可变的字符串。因为 String 对象是不可变的，所以可以共享。String类是Object类的子类， 构造方法：               A:public String()空构造
软件工程——软件的系统设计
人生苦短，我用Python
09-04 1万+
概要设计 软件设计的基本原理 1.模块化 模块在程序中是数据说明可执行语句等程序对象的集合，或者是单独命名和编址的元素，如高级语言中的过程、函数、子程序等。 模块具有以下基本属性： 接口：指模块的输入与输出 功能：指模块要实现的功能 逻辑：描述内部如何实现要求的功能及所需数据 状态：该模块的运行环境，即模块的调用与被调用关系 模块化是解决一个复杂问题时自顶向下逐层把软件系统划分成
HTML基础语法
cc
01-27 7249
HTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言。HTML不是一种编程语言，而是一种标记语言(markup language)。标记语言是一套标记标签(markup tag)。所谓超文本，有2层含义∶它可以加入图片、声音、动画、多媒体等内容（超越了文本限制)。它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本)。
html 玫瑰花
李勇的博客
05-03 8528
简易html 代码玫瑰花 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>玫瑰</title> <style type="text/css"> #shusheng { position: absolute; width: 100%...
炫酷樱花花瓣飘落 HTML（附源码）
热门推荐
Xiadehang200510的博客
01-20 3万+
由于本人比较懒就不录视频了 话不多咱们直接上代码 下面展示一些 内联代码片。 // A code block var foo = 'bar'; // An highlighted block var foo = 'bar'; <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> .
【前端】【HTML】基础知识
我的的博客哦
03-06 8312
🔰HTML指的是超文本语言，它是用来描述网页的的一种语言。🔰HTML不是编程语言，而是一种标记语言。🔰标记语言是一套标记标签。
html修改文字颜色代码
瑜众不同
11-23 4111
注意，在 HTML 中使用 style 属性通常被视为不好的编码实践，因为它把样式与内容混在一起，这会使代码难以维护和扩展。最好的做法是使用外部 CSS 样式表来统一定义样式。你也可以在外部 CSS 样式表中定义文字颜色，然后使用 class 或 id 属性在 HTML 中应用。要在 HTML 中修改文字的颜色，你可以使用 style 属性并设置 color 属性。你还可以使用 16 进制颜色值或者颜色名称来指定颜色。
HTML基础之form表单
沃和莱特的博客
04-28 1万+
HTML基础之form表单
HTML5+CSS3 精美登陆界面源码
01-19
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富且视觉吸引人的网页提供了强大的工具。在这个“HTML5+CSS3 精美登陆界面源码”压缩包中，包含了三个精心设计的登录界面，每一个都充分利用了HTML5的新...
50余款手机页面模版源码html5
11-16
50余款手机页面模版源码html5 1.1【32赞HTM5响应式系列之右侧多级滑动式】仿Slideby触屏版html5响应式手机wap网站模板 2【32赞HTML5响应式系列之订餐模板】微官网美食订餐html5触屏响应式手机wap网站订餐模板 5【32...
HTML动态爱心代码爱心满屏
11-07
HTML动态爱心代码满屏爱心免费下载
html网页设计大作业
01-04
HTML网页设计是构建互联网内容的基础，它是一种标记语言，用于定义网页的结构和内容。在这个“html网页设计大作业”中，我们关注的重点是植物相关的主题，这表明学习者可能在创建一个关于植物的网站，旨在展示信息或...
HTML5实现下雨 水波特效
03-26
在本文中，我们将深入探讨如何使用HTML5的Canvas API来实现一种令人印象深刻的视觉效果——下雨与水波特效。HTML5 Canvas是一个强大的图形绘制工具，它允许开发者通过JavaScript动态地在网页上绘制2D图像。结合CSS3...
html css js网页制作成品——娃娃html+css+js 4页附源码
卡拉米
12-01 84
本文介绍了一个关于中国篆刻艺术的静态网站设计与实现方案。网站采用HTML5+CSS3技术构建，包含首页、关于篆刻、作品展示、历史渊源和联系我们等页面模块。文章详细说明了网站布局结构、程序语言选择、素材处理方法以及文件组织方式，并提供了核心HTML代码示例。网站设计兼容主流浏览器，适合修改为各类主题展示网站。作者还分享了编程学习建议，推荐初学者通过刷题巩固基础，并提供了获取更多前端开发资源的渠道。该网站可作为大学生毕业设计或期末作业的参考模板。
使用 HTML + JavaScript 实现手写签名功能
最新发布
QQ26843500的博客
12-04 563
本文介绍了一个基于HTML5 Canvas实现的手写签名网页应用。该应用主要功能包括： 提供米字格背景和范字（"海纳百川"）作为书写参考 支持鼠标和触摸屏两种书写方式 包含清空画布和下载签名图片两个功能按钮 技术实现上使用双Canvas叠加方案，底层Canvas绘制米字格和范字作为引导层，上层Canvas实现手写功能。通过JavaScript事件监听实现笔迹追踪，采用贝塞尔曲线平滑处理书写轨迹。响应式设计适配不同设备，并提供PNG格式的签名下载功能。整体界面简洁，采用蓝色标题栏和白色书写
【HTML Living Standard 01】HTML基础概述
风高秋月白，雨霁晚霞红
12-01 945
HTML-01 基础概念相关。
HTML DOM 对象
wjs2024的博客
12-02 461
DOM（Document Object Model）是一种抽象的模型，用于表示 HTML 和 XML 文档。通过 DOM，开发者可以访问和操作文档中的任何元素，如文本、图像、链接等。DOM 对象化地表示了网页的结构，使得开发者可以像操作对象一样操作网页内容。HTML DOM 对象是网页设计和开发的基础，掌握 DOM 对象的基本概念、常用方法和实际应用，将有助于提高开发效率和代码质量。本文对 HTML DOM 对象进行了简要介绍，希望对您有所帮助。
解析SUCSet：HTML压缩技术新篇章
3. HTML5的新特性：掌握HTML5相对于HTML4在结构、内容和功能上的改进，例如新的标签、API和Web存储技术。 4. 移动端浏览器优化：了解UC浏览器作为移动端浏览器的特点，以及如何针对移动设备进行网站优化，包括响应式...
评论 13
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值