<html>
<head><!-- 设置网页头标题-->
<!-- 不需要在页面中显示的内容写在这个里面 -->
<base href="http://www.lampbrother.net">
<title>我的HTML</title>
<!--title标签 -- 代表HTML文档的标题
base标签 -- 将相对URL转换为完整的绝对URL
meta标签 -- 用于定义文件信息的名称、内容等信息,有两种类型的<meta>,name和http-equiv
name属性用于在网页中加入一些关于网页的描述信息，例如，网页的关键字（可供网页搜索引擎机器人查找、分类）、网页的描述信息等。
Keywords
例如，<meta name=“keywords” content=“php, java, 培训”>
Description
Robots
设置值：index、noindex、follow、nofollow、all、none.
Generator
Author
copyright
http-equiv属性用于在HTML文档中模拟HTTP协议的响应消息头，例如，告诉浏览器是否缓存该网页、使用什么样的字符集来显示网页内容、隔多长时间自动刷新网页等。
Content-Type
例如，<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312”>
Refresh
例如，<meta http-equiv=“Refresh” content=“1; url=http://yun.itxdl.cn”>
Expires
例如，<meta http-equiv=“Expires” content=“Mon, 12 may 2006 00:20:00 GMT”>,
将content设置为0,可以禁止浏览器使用缓存页面。
Windows-Target
例如，要防止自己的网页被别人当作一个fame页面调用，可以使用<meta http-equiv=“Windows-Target” content=“_top”>.
Pragma
例如，<meta http-equiv=“Pragma” content=“no-cache”>.
<meta http-equiv=“Cache-Control” content=“no-cache”>
Page-Enter和Page-Exit
例如，<meta http-equiv=“Page-Enter” content=“revealTrans(Transition=23, Duration=1.000)”>
link标签 -- 当在文档中声明使用外接资源(如CSS)时使用此标签
style标签 -- 在文档中声明样式时使用此标签
script标签 -- 在文档中使用JavaScript脚本
-->
<mata http-equuiv="Content-Type" content= "text/html; charset=gb2312" />
<meta name="keywords" content="PHP培训|LAMP培训|就业培训|">
<meta name="description" content="LAMP兄弟连--致力于PHP培训" />
<meta name="author" content="lampbrother,gaoluofeng">
<script type="text/javascript" src="js/pngforie6.js"></script>
<!--<link>标签几个主要的属性：HREF REL与REV TITLE TYPE MEDIA设置值：screen、print、projection、aural、braille、tty、tv、all-->
<link type="text/css" rel="stylesheet" href="./css/index.css"/>
<style>
body{
margin:0px;
padding:0px;
background:#ff9933;
color:#ffffff;
}
</style>
</head>
<body link="pink" alink="black" vlink="green"> <!-- 主体标记的开始-->
<!-- body标签的常用属性
text设定页面文字的颜色
bgcolor设定页面的背景颜色
background设定页面背景图片
bgroperties设定页面背景图像为固定，不随页面滚动而滚动
link设定页面默认的链接颜色
alink设定鼠标正在点击时的颜色
vlink设定访问后链接文字的颜色
topmargin设定页面的上边距
leftmargin设定页面的左边距
-->
<!-- html文本标签
<hn>标题字标签，n为1-6，定义六级标题，而且会自动换行插入一个空行
<b>粗体字标签
<i>斜体字标签
<u>下划线字体标签
<sub>文字下标字体标签
<sup>文字上标字体标签
<s>定义加删除线的文本
<font>字体标签，可以通过标签的属性指定文字的大小、颜色及字体等信息
<tt>打字机文字
<cite>用于引证、举例、通常为斜体字
<em>表示强调，通常为斜体字
<strong>表示强调，通常为粗体字
<code>定义计算机代码文本
<samp>定义计算机代码文本
<small>小型字体标签
<big>大型字体标签
-->
<a name="顶端" href="#底端">回到底端</a><br>
<h1>欢迎来到LAMP兄弟连！</h1>
<h1>使用<H1>输出一号标题字体</h1>
<h2>使用<H2>输出二号标题字体</h2>
<h3>使用<H3>输出三号标题字体</h3>
<h4>使用<H4>输出四号标题字体</h4>
<h5>使用<H5>输出五号标题字体</h5>
<h6>使用<H6>输出六号标题字体</h6>
<font face="楷体_GB2312" color="red" size="5">绝对字体大小为5的红色楷体字</font><br>
<font face="宋体" color="green" size="+3">相对字体大小为+3的绿色宋体字</font><br>
<font face="黑体" color="blue" size="-1">相对字体大小为-1的蓝色黑体字</font><br>
<b>使用<B>标记输出粗体字</b><br>
<u>使用<U>标记输出带有下划线的文字</u><br>
<i>使用<I>标记输出斜体字</i><br>
<b><u><i>粗体 斜体 下划线</i></u></b> <br>
<s>删除线</s><br/>
log10 <br>
log<sub>10</sub> <br>
2<sup>3</sup> <br>
<tt>使用<TT>标记输出打印机文字</tt><br>
<cite>使用<CITE>标记输出引证、举例的斜体字</cite><br>
<em>使用<EM>标记输出强调的斜体字</em><br>
<strong>使用<STRONG>标记输出强调的粗体字</strong><br>
<pre>
<code>
for(int i = 0; i< 100; i++)
{
Console.writeLine("Hello World");
}
</code>
</pre>
<small>使用<SMALL>标记输出小型的字体</small><br>
<big>使用<BIG>标记输出大型的字体</big><br>
<!-- 内容需要显示在显面上的都要写在这里面 -->
这是一个文本，在页中你可以看到！
妹子真漂亮
<hr width="80%" color="#00ffaa"></hr>
<!-- a标签 -- 代表HTML链接
a,是anchor(锚)的第一个字母，a标签是成对出现的,即<a>…</a>。
常用属性：
href -- 代表一个url链接源(就是链接到什么地方)
url除了是网页外,还可以是其它的文件(如文本文件,pdf文件等)。
url还可以是指向HTML文件中的一个位置。
url还可以是Email地址。
target -- 用来指出哪个窗口或框架应该被此链接打开
target=_blank： 将链接内容在新的浏览窗口中打开。
例：<base href=http://yun.itxdl.cncn/techworld target=“_blank”>
target=_parent：将链接的内容，当成文件的上一个画面。
target=_self： 将链接的内容，显示在目前的窗口中。
target=_top：这个参数可以解决新内容被旧框窗包围的困扰，使用这参数，会将整个画面重新显示成链接的画面内容。
title -- 代表链接的附加提示信息
-->
<!--链接语法：<a href="url" target="_blank">显示的文字</a> target：打开新网页的方式 "_blank"表示另打开 "self"代表在本页跳转 -->
<a href="http:www.lampbrother.net" target="_blank">兄弟连官网</a> <!--定义一个兄弟连网站的超级链接-->
<a href="mailto:1570256014@qq.com">发送邮件到1570256014</a><hr/>
<a href="html的表单应用.html#碗里来" name="来吧来吧">快到碗里去</a>
<!-- 插入一张"兄弟连.png"图片,并设置图片显示的高度和宽度 -->
<!-- HTML的图片img标签
img标签 -- 代表HTML图像
img标签是单独出现的：<img />， img是image(图像)的缩写
常用属性:
alt -- 代表图像的替代文字
src -- 代表一个图像源(就是图像的位置)
border – 代表图片边框的宽度
height -- 代表一个图像的高度
width -- 代表一个图像的宽度
marquee 控制图片的移动 direction="right/left/down/up" 控制移动的方向 behavior(行为)="slide/scroll/altermate"
设计网页时经常使用的图片有三种格式：
GIF -- 最多支持256色,支持透明,支持多帧动画显示效果.
JPEG -- 支持多种颜色,可以有很高的压缩比,使用了有损压缩,不支持透明,不支持动画效果.
PNG -- 是一种新的图片技术,可以表现品质比较高的图片,使用了无损压缩,支持透明,不支持动画.
map标签 -- 定义图像点击区域的集合
map标签是成对出现的,即<map>…</map>,而且必须配合area标签使用。
map标签中name与id属性指定的值必须与定义图像点击区中图像(img)的usemap属性指定的值一致。
属性
id -- 定义map的名称。
name -- 定义map的名称。
area标签 -- 定义图像点击区域,
area标签是单独出现的,<area />
area标签必须使用在map标签中，而且必须配合img标签使用。
属性
accesskey -- 链接的快捷键访问方式
alt -- 图像的提示文字
coords -- 定义可点击区域图形的坐标
href -- HTML链接源的URL
nohref -- 图像点击排除的区域，当不使用href时应使用nohref
shape -- 可点击区域的形状
tabindex -- 使用"Tab"键的遍历顺序
target -- 链接目标
-->
<center><marquee direction="right" behavior="slide"><img src = "E:/兄弟会/兄弟连.png" alt="这是Linux图标 width="500" height="200" border="2"/></marquee></center>
<!--html -- 定义html文档 body -- 定义文档体body
head -- 定义文档头信息head title -- 定义文档的标题title
<a> -- html链接标签a img -- html图像标签img
<div> -- html层div <table> -- 定义html表格table
<caption>用于定义表格标题的位置，可由align和valign属性来设置
<tr> -- 定义表格行tr <td> -- 定义表格列td
<th>代表HTML表格中的表头，一般位于表格的首行。要求成对
form -- html表单标签form input -- 定义表单的输入域input
-->
<!--超链接范例:
网站链接：<a href="http://www.lampuser.net">PHP专家</a>
电子邮件链接：<a href="mailto:lamp@126.com">写信给我</a>
ftp链接： <a href="ftp://ftp.lampuser.com">下载档案</a>
有三种类型的链接路径：
绝对路径（例如 http://www.sohu.com/index.html）
文档相对路径（例如 adver/contents.html）
站点根目录相对路径（例如 /support/app/customer.html，其中“/”表示根目录）
-->
<!--定位网页内部的链接（锚点链接）：
用<a name=“”>定义，例如：<a name=“here1”>第一部分</a>，
使用<a href=“#here1”>跳转到第一部分</a>超链接就可以定位到网页中的“第一部分”这个位置。
注意：<a href=“#”>…</a>与<a href=“”>…</a>的区别
URL(Uniform Resource Locator)的基本组成：
协议名://主机名:端口号/资源名。
例如： http://www.lampuser.com:8080/index.html
为URL指定参数
例如：http://www.lampuser.com/register.html?name=zhangsan&password=123
带有定位标记的URL
例如：http://www.lampuser.com/index.html#section2
-->
<p>© " < § & > ¤ ©</p>
<p align="center">这里有一个矛盾：真理往往是在少数人手里，而少数人必须服从多数人，到头来真理还是在多数人手里，人云亦云就是这样堆积起来的。第一个人说一番话，被第二个人听见，和他一起说，此时第三个人反对，而第四个人一看，一边有两个人而一边只有一个人，便跟着那两个人一起说。可见人多口杂的那一方不一定都有自己的想法，许多是冲着那里人多去的。我是那第三个人。虽然可能讨人厌，但我始终坚守我的风格。</p>
<p>石化的海边是个休闲的好地方，放风筝不必担心像富兰克林一样险些被雷劈死或缠住电线。我曾见过一个放风筝高手，一开始双手平举马步于海边，一副练功的派头。问其干甚，大吃一惊，原来他在放风筝。抬头去看风筝，只见一片灰天，风筝怕是早就放到外太空去了。</p>
<b>这是一个字</b>
<p>一段文本</p> <!-- 使用段落标记输出一个文本-->
<center>这行文本在网页中居中显示</center> <!--居中设置一段文本-->
<pre> <!-- 预定义标记保留源代码格式输出 -->
上边 <!-- 保留这此文字在源代码中的格式 -->
左边 右边 <!-- 保留这此文字在源代码中的格式 -->
下边 <!-- 保留这此文字在源代码中的格式 -->
</pre> <!-- 保留这此文字在源代码中的格式 -->
<hr> <!-- 在段落与段段落之间输出的分隔 -->
无顺序列表： <!-- 在页面中输出一个文本 -->
<ul type="disk"> <!-- 无顺序列表的开始标记 -->
<li>妹子今天看起来不错！</li> <!-- 无顺列表中第一个列表项目 -->
<li>妹子今天看起来不错！</li> <!-- 无顺列表中第二个列表项目 -->
<li>妹子今天看起来不错！</li> <!-- 无顺列表中第三个列表项目 -->
</ul> <!-- 无顺序列表的结束标记 -->
<hr> <!-- 在段落与段段落之间输出的分隔 -->
有顺序列表： <!-- 有顺序列表的开始标记 -->
<ol type="1"> <!-- 有顺序列表的开始标记 -->
<li>妹子今天看起来不错！</li> <!-- 有顺列表中第一个列表项目 -->
<li>妹子今天看起来不错！</li> <!-- 有顺列表中第二个列表项目 -->
<li>妹子今天看起来不错！</li> <!-- 有顺列表中第三个列表项目 -->
</ol> <!-- 有顺序列表的结束标记 -->
<hr/>
自定义列表：
<dl>
<dt>面向对象</dt>
<dd>封装</dd>
<dd>继承</dd>
<dd>多态</dd>
<dt>c#循环<dt>
<dd>for循环</dd>
<dd>foreach循环</dd>
<dd>while循环</dd>
<dd>do-while循环</dd>
</dl>
<hr/>
<!-- 表格标签常见属性
table标签属性:
width -- 代表表格的宽度
height -- 代表表格的高度
bgcolor --背景颜色
bordercolor --边框颜色
border -- 代表表格边框(此属性应该使用CSS实现)
cellspacing -- 代表表格边框与表格内容填充的距离,也是内容填充之间的距离(此属性应该使用CSS实现)(单元格间距)
cellpadding -- 代表内容填充的宽度(此属性应该使用CSS实现)(单元格与内容填充)
th、td标签属性：
width与height – 代表宽度与高度
colspan -- 一行跨越多列
rowspan -- 一列跨越多行
align -- 代表水平对齐方式(left(左对齐) | center(居中对齐) | right(右对齐) | justify)(此属性应该使用CSS实现)
valign -- 代表垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现)
tr标签属性：
align与valign具体解释详见上面。
-->
<font size="5" color="green" face="仿宋">疯狂跳楼价，只要</font><font size=7 color=red>1</font>块钱
<a name="底端" href="#顶端">回到顶端</a>
</body>
</html>
HTML的设计与应用
原创
©著作权归作者所有：来自51CTO博客作者我看你很勇喔的原创作品，请联系作者获取转载授权，否则将追究法律责任
上一篇：org.apache.ibatis.exceptions.PersistenceException: ### Error building SqlSession. ### Cause: org.ap
下一篇：面试技巧
提问和评论都可以，用心的回复会被更多人看到
评论
发布评论
相关文章
-
详解数仓对象设计中序列SEQUENCE原理与应用
本文介绍了SEQUENCE的使用场景和相关的函数的使用方法，并对使用SEQUENCE过程中遇到的常见问题及解决方法进行了汇总。
字段 数据库 序列号 SEQUENCE GaussDB(DWS)
