zoukankan      html  css  js  c++  java
  • 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>© " <   § & > ¤ &copy</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源代码
    <html>,<head>,<body>,<title>的作用
    HTML中的标签和属性
    记录Git的安装过程
  • 原文地址:https://www.cnblogs.com/justdoitba/p/7582169.html
Copyright © 2011-2022 走看看