HTML的设计与应用
<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的设计与应用的更多相关文章
- 如何一步一步用DDD设计一个电商网站（九）—— 小心陷入值对象持久化的坑
阅读目录 前言 场景1的思考 场景2的思考 避坑方式 实践 结语 一.前言 在上一篇中(如何一步一步用DDD设计一个电商网站(八)—— 会员价的集成),有一行注释的代码: public interfa ...
- 如何一步一步用DDD设计一个电商网站（八）—— 会员价的集成
阅读目录 前言 建模 实现 结语 一.前言 前面几篇已经实现了一个基本的购买+售价计算的过程,这次再让售价丰满一些,增加一个会员价的概念.会员价在现在的主流电商中,是一个不大常见的模式,其带来的问题是 ...
- 设计爬虫Hawk背后的故事
本文写于圣诞节北京下午慵懒的午后.本文偏技术向,不过应该大部分人能看懂. 五年之痒 2016年,能记入个人年终总结的事情没几件,其中一个便是开源了Hawk.我花不少时间优化和推广它,得到的评价还算比较 ...
- 如何一步一步用DDD设计一个电商网站（十）—— 一个完整的购物车
阅读目录 前言 回顾 梳理 实现 结语 一.前言 之前的文章中已经涉及到了购买商品加入购物车,购物车内购物项的金额计算等功能.本篇准备把剩下的购物车的基本概念一次处理完. 二.回顾 在动手之前我对之 ...
- 如何一步一步用DDD设计一个电商网站（一）—— 先理解核心概念
一.前言 DDD(领域驱动设计)的一些介绍网上资料很多,这里就不继续描述了.自己使用领域驱动设计摸滚打爬也有2年多的时间,出于对知识的总结和分享,也是对自我理解的一个公开检验,介于博客园这个平 ...
- 如何一步一步用DDD设计一个电商网站（七）—— 实现售价上下文
阅读目录 前言 明确业务细节 建模 实现 结语 一.前言 上一篇我们已经确立的购买上下文和销售上下文的交互方式,传送门在此:http://www.cnblogs.com/Zachary-Fan/p/D ...
- 如何一步一步用DDD设计一个电商网站（六）—— 给购物车加点料，集成售价上下文
阅读目录 前言 如何在一个项目中实现多个上下文的业务 售价上下文与购买上下文的集成 结语 一.前言 前几篇已经实现了一个最简单的购买过程,这次开始往这个过程中增加一些东西.比如促销.会员价等,在我们的 ...
- 如何一步一步用DDD设计一个电商网站（五）—— 停下脚步，重新出发
阅读目录 前言 单元测试 纠正错误,重新出发 结语 一.前言 实际编码已经写了2篇了,在这过程中非常感谢有听到观点不同的声音,借着这个契机,今天这篇就把大家提出的建议一个个的过一遍,重新整理,重新出发 ...
- 如何一步一步用DDD设计一个电商网站（四）—— 把商品卖给用户
阅读目录 前言 怎么卖 领域服务的使用 回到现实 结语 一.前言 上篇中我们讲述了“把商品卖给用户”中的商品和用户的初步设计.现在把剩余的“卖”这个动作给做了.这里提醒一下,正常情况下,我们的每一步业 ...
- 如何一步一步用DDD设计一个电商网站（三）—— 初涉核心域
一.前言 结合我们本次系列的第一篇博文中提到的上下文映射图(传送门:如何一步一步用DDD设计一个电商网站(一)—— 先理解核心概念),得知我们这个电商网站的核心域就是销售子域.因为电子商务是以信息网络 ...
随机推荐
- gulp的使用以及Gulp新手入门教程
Gulp新手入门教程 原文 http://w3ctrain.com/2015/12/22/gulp-for-beginners/ Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭 ...
- dvwa 源码分析(二) --- dvwaPage.inc.php分析
在setup.php中,包含了这个文件,所以这里分析这个文件. <?php if( !defined( 'DVWA_WEB_PAGE_TO_ROOT' ) ) { define( 'DVWA S ...
- C#多线程解决界面卡死问题的完美解决方案，BeginInvoke而不是委托delegate 转载
问题描述:当我们的界面需要在程序运行中不断更新数据时,当一个textbox的数据需要变化时,为了让程序执行中不出现界面卡死的现像,最好的方法就是多线程来解决一个主线程来创建界面,使用一个子线程来执行程 ...
- kubernetes健康检查
有时候容器在running的状态,但是里面的服务挂了,这个就难办了,所以k8s提供了一种检查服务是否健康的方法 Liveness Probe的种类: ● ExecAction:在container中执 ...
- LACP-链路聚合
一. 术语 LA (Link aggregation): 链路聚合,不同厂家名称不同,ethernet channel(以太通道). LAG: Link aggregation group. LACP ...
- Hibernate- QBC查询方式
QBC查询方式 01.基本查询 02.组合查询 03.关联查询 04.分页查询 05.QBE查询 06.离线查询
- java-过滤器Filter_多个Filter的执行顺序
http://www.cnblogs.com/HigginCui/p/5772514.html [Filter链] *在一个web应用中,可以开发编写多个Filter,这些Filter组合起来称为一个 ...
- js学习笔记14----DOM概念及子节点类型
1.概念 DOM:Document Object Model---文档对象模型 文档:html页面 文档对象:页面中的元素 文档对象模型:是一种定义,为了能够让程序(js)去操作页面中的元素. DOM ...
- easyui datagrid列拖拽
<script type="text/javascript"> var cols = [{ field: 'testName', title: '<span cl ...
- 统一建模语言 UML
目录 统一建模语言 UML UML定义了5类10种模型图 一用例图用于建立需求模型 二静态图主要描述系统的静态表示和关系包括类图包图对象图 三行为图描述系统动态模型和对象组成的交换关系包括状态图和活动 ...