<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--<meta http-equiv="refresh" content="2" />-->
<base href="img/"/>
<title>HTML基本标签</title>
</head>
<body text="red" bgcolor="aqua" background="桌面.PNG" bgproperties="fixed" link="blue">
<font face="华文彩云,微软雅黑" size="+2" color="blue">我采用了华为彩云字体，字体大小为5,颜色为蓝色</font><br />
<font size="3" color="rgb(0,255,0)">我采用默认字体，字体大小为3，颜色为绿色</font><br />
<font face="隶书">我采用了隶书字体，字体大小和颜色均默认！</font><br />
<font>什么也不设置</font><br />
<font face="华文彩云" size="5" color="red">测试默认字体大小，这里应该和第一行字体大小一致</font><br />
<h1 align="center"><font face="隶书" size="5" color="red">测试默认字体大小，size="5" color="red"，这里应该和第一行字体大小一致</font></h1><br />
<h6 align="center"><font face="隶书" size="5" color="blue">测试默认字体大小，size="5" color="blue"，这里应该和第一行字体大小一致</font></h6><br />
<font face="隶书" size="5" color="black"><h6 align="center">测试默认字体大小，size="5" color="black"，这里应该和第一行字体大小一致</h6></font>
<h5>测试h5标签与font标签的size=“5”时的情况</h5>
<!--
作者：方熙林
时间：2018-05-30
描述：<h1>---<h6>标签是按照字体由大到小的顺序进行的进行排序的，超过<h6>之后的<h7>---<h?>大小都是一样的
<font>标签中有三个属性
face="value" 其中value中填写字体，可选字体种类很多
size="value" value中填写字体大小，可选大小在1-7之间，大于7或小于1当作7和1算。其中默认大小为3
设置方式有两种，一种是直接设置，另一种是通过在默认的基础上加上相应的数字将最终结果当作最终显示的字体（size="+2"等价与size="5"）
color="value" value中填写字体颜色，可选的方式有1、直接输入颜色的英文名，这种情况颜色种类很有限。2、通过rgb（）三基色之间的
数据进行颜色设置。
拓展：关于<h1>标签与<font>标签混用的问题，<h1>标签可设置字体大小、字体显示位置。<font>标签可设置字体大小、字体颜色、字体类型。
由于<h1>标签与<font>标签都可以设置字体大小，所以在使用过程中字体大小的最终决定权在于与显示内容最接近的标签。
-->
<font face="微软雅黑" size="6" color="red">文字格式</font><br /><br /><br /><br />
<b>测试文件 "粗体"</b><br />
<i>测试文件 "斜体"</i><br />
<big>测试文件 "大号字体"</big><br />
<small>测试文件 "小号字体"</small><br />
<tt>测试文件 "打印机字体"</tt><br />
<em>测试文件 "定义为强调的内容"</em><br />
<strong>测试文件 "定义为语气更强的强调的内容"</strong><br />
<dfn>测试文件 "定义一个定义项目"</dfn><br />
<code>测试文件 "定义计算机代码文本"</code><br />
<samp>测试文件 "定义样本文本"</samp><br />
<kbd>测试文件 "定义键盘文本"</kbd><br />
<var>测试文件 "定义变量"</var><br />
<cite>测试文件 "定义引用"</cite><br />
<s>测试文件 "删除线1"</s><br />
<strike>测试文件 "删除线2"</strike><br />
<u >测试文件 "下滑线"</u><br />
<sup>测试文件 "上标"</sup><br />
<sub>测试文件 "下标"</sub><br />
<address>测试文件 "地址"</address><br />
<!--
作者：方熙林
时间：2018-05-30
描述：由于这些标签的功能互相不重叠，所以可以将这些标签组合对一个文本使用
-->
<p align="right"><font face="隶书" color="red" size="4">段落标签测试，标签的align="right"(右对齐) ，face="隶书" color="red" size="4"<font></p><br />
<h1 align="right"><font face="隶书" color="blue" size="4">段落标签测试，标签的align="right"(右对齐) ，face="隶书" color="red" size="4"</font></h1>
<p align="left">align = "left"(左对齐)标签定义标题，定义最大的标题，定义最小的标题。标签是段落标签，浏览器会自动在其前后添加一些空白空间。根据语义选择合适的标签，这样有利于代码的优化和搜索引擎蜘蛛爬行</p>
<p align="center"><font face="微软雅黑" size="5">align="center"电子工业出版社</font></p>
<p align="justify"><font face="微软雅黑" size="5">align="justify"电子工业出版社<br />align = "left"(左对齐)标签定义标题，定义最大的标题，定义最小的标题</font></p>
<!--
作者：方熙林
时间：2018-05-30
描述：<p>段落标签，其中有属性align，align中的值有四种情况
1.left段落左对齐
2.right段落右对齐
3.center段落居中
4.justify实现两端对齐文本效果
<h?>与<p>都可以设置文本的位置，两者之间的区别有
1.<hX>标签定义标题，<h1> 定义最大的标题，<h6> 定义最小的标题。
2.<p>标签是段落标签，浏览器会自动在其前后添加一些空白空间。
根据语义选择合适的标签，这样有利于代码的优化和搜索引擎蜘蛛爬行
-->
<p><font face="宋体" size="5" color="crimson">采用段落标签p 与字体设置符号font face="宋体" size="5" color="crimson"你究竟是怎么思考的呢？</font></p>
<hr/ size="50" color="blue" align="left" width="400">
<p><font face="华文彩云" size="5" color="black"> 采用段落标签p 与字体设置符号font face="华文彩云" size="5" color="black"我怎么思考管你什么事呢？</font></p>
<hr size="2"/ color="blue" face="华文彩云" width="500" align="right">
<p><font face="华文彩云" size="5" color="black"> 采用段落标签p 与字体设置符号font face="华文彩云" size="5" color="black"我怎么思考管你什么事呢？</font></p>
<!--
作者：方熙林
时间：2018-05-30
描述：<hr>中有5个属性 size、coler、weight、align、noshade
size可取值为大小不限制>0就行
color可设置的值有两种方式
1.颜色的英文名称
2.rgb()组成的三原色比例，从而设置颜色。
wight默认是覆盖界面长度的一个长度。
size决定水平线的宽度，width觉得水平线的长度，在不设置(默认)的情况下width为铺满界面的一个长度数值 size值默认情况下大小接近2
当width的长度为默认长度或着长度大小超过用户界面的最大的值时，设置的align的属性值不管用(align属性默认值为"center")
noshade 水平线不出现阴影其中 可以设置的值为"noshade"
-->
<ol type="A" start="1">
<li><a href="#d6">游戏</a></li>
<li>比赛</li>
<li>程序设计</li>
<li>算法设计</li>
<li>LOL</li>
</ol>
<ol type="a" start="2">
<li><a name="d6">我</a></li>
<li>寒冰</li>
<li>易大师</li>
<li>劫</li>
<li>赵信</li>
</ol>
<ol type="I" start="3">
<li>最终审判</li>
<li>彦</li>
<li>炙心</li>
<li>凯莎</li>
</ol>
<ol type="i" start="4">
<li>蓝桥</li>
<li>刘东升</li>
<li>王树生</li>
<li>小明</li>
</ol>
<ol type="1" start="5">
<li>最</li>
<li>后</li>
<li>一</li>
<li>个</li>
</ol>
<ol type="1" start="6">
<li>第一个
<ol type="i" start="7">
<li>这</li>
<li>里</li>
<li>可</li>
<li>以</li>
<li>写</li>
</ol>
</li>
<li>第二个
<ol type="a" start="8">
<li>我</li>
<li>想</li>
<li>干</li>
<li>吗</li>
<li>？</li>
</ol>
</li>
</ol>
<!--
作者：方熙林
时间：2018-05-30
描述：有序列表通过<ol>进行实现，相对符合我们日常思维逻辑，这里就不多加赘述
-->
<ul>
<li>项目一
<ol type="1" start="9">
<li>有</li>
<li>序</li>
<li>列</li>
<li>表</li>
<li>与</li>
<li>无</li>
<li>序</li>
<li>表</li>
<li>的</li>
<li>拓展1
<ul>
<li>混</li>
<li>合</li>
<li>拓展2
<ul>
<li>使</li>
<li>用</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
<li>项目二</li>
<li>项目三</li>
<li>项目四</li>
</ul>
<!--
作者：方熙林
时间：2018-05-30
描述：无序列表通过<ul>进行实现
-->
<hr size="20" color="red" />
<p align="center"><font size="7" color="blueviolet" face="华文行楷">超链接</font></p><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href="http://www.baidu.com" target="_blank">
<p align="center"><font size="7" color="azure" face="微软雅黑">百度主页</font></p>
</a>
<!--
作者：方熙林
时间：2018-05-30
描述：网址与文字链接
-->
<a href="http://www.baidu.com">
<img src="猫.jpg" alt="猫" width="50%" height="50%" border="5" hspace="20" vspace="20"/><br /><br /><br />
</a>
<!--
作者：方熙林
时间：2018-05-30
描述：网址与图片链接
-->
<img src="猫.jpg" alt="猫" width="50%" height="50%" border="5" hspace="20" vspace="20"/><br /><br /><br />
<img src="猫.jpg" alt="猫" width="50%" height="50%" hspace="50" vspace="50"/><br /><br /><br />
<img src="猫2.jpg" alt="大橘为重"/><br /><br /><br />
<p>图像<img src="猫.jpg" width="50%" height="50%" align="bottom" border="1">bottom 对齐居中</p>
<p>图像<img src="猫.jpg" width="50%" height="50%" align="middle" border="1">middle 对齐居中</p>
<p>图像<img src="猫.jpg" width="50%" height="50%" align="top" border="1">top 对齐居中</p>
<p>图像<img src="猫.jpg" width="50%" height="50%" align="left" border="1">left 对齐居中</p>
<p>图像<img src="猫.jpg" width="50%" height="50%" align="right" border="1">right 对齐居中</p>
<!--
作者：方熙林
时间：2018-05-30
描述：align 根据周围的文本来排列图像，bottom是默认的对齐方式可选属性值为top、bottom（底部）、middle（中间）、left（左边）、right（右边）
width 定义图像的宽度，可用百分比（百分比指的是原有图片的大小），用数字是直接设置图像的宽度
height 定义图像的高度，可用百分比（百分比指的是原有图片的大小），用数字是直接设置图像的高度
boder 定义图像周围的边框，默认情况下，boder值为0。
(<img> 标签的 border 属性规定图像周围的边框的宽度，就是说可以增加或去掉图像的边框。默认地，图像是没有边框的（除非图像在 a 元素内部）。
浏览器通常会把代表超链接的图像（例如包含在 <a> 标签中的图像）显示在两个像素宽的边框里面，以表示读者可以通过选择这个图像来访问相关联的文档。
使用 border 属性和一个用像素表示的宽度值就可以去掉 (border="0") 或加宽图像的边框。
该属性在 HTML 4 和 XHTML 中也不再被推荐使用了，同样是应该被样式所代替，但却依然被流行浏览器很好地支持着。
)
hspace 定义图像的左侧和右侧的空白
vspace 定义图像顶部和底部的空白
(可通hspace与vspace调整图片的位置)
ismap 将图像定义为服务器端图像映射
usemap 将图像定义为客户端图像映射
longdesc指向包含昌的图像描述文档的URL
-->
<!--<hr size="20" color="red" />
<font size="7" color="black" face="华文行楷">超链接</font>-->
</body>
</html>由于编辑器是Hbuilder的缘故后面用base标签href设置起始位置的事可能会变少，不推荐这样使用，前期写这些主要是为了记住base标签的属性。
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
