ASP.NET ( C# + SQL ) 学习者

不积小流,无以成江海;不积跬步,无以至千里
让我们一起成长
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理

HTML语言:经典笔记

Posted on 2006-12-21 18:04 耀眼冰蓝 阅读(5237) 评论(26)  编辑 收藏 所属分类: HTML专题


我知道做这件事一定会很繁琐,要很长的时间,先给找几个理由来支持自己、来激发自己的。。。

      1、为了找工作,有必要把这些基础总结一下;
      2、完成了这项基础工程,就可以把精力转到另一个点上;
      3、自己总结的,印象比较深刻,记得比较牢;
      4、方便日后,复习或者说是查询;
      5、我把它总结,对其它的朋友也会有帮助;
      6、把它做好,阅读的人就多,朋友给我意见、建议或帮助就多;
      7、不积跬步,无以至千里;今天的一小步也的意义也很大;
      8、学好了,就可以去牟利;这是最根本的,相信大家都支持;
      9、我为人人,人人为我;我为人人这句话在人人为我的前面;
      10、够了,可以开工了,要把它做好,也希望大家来完善。


目   录

                    一、HTML语言简述
                    二、HTML语言的精华——超链接 
                    三、提高代码的可读性——注释语句
                    四、格式化文本
                    五、格式化段落
                    六、引用多媒体
                    七、头部内容
                      ...     ......




一、HTML语言简述

HTML:Hyper Text Markup Language 的简写,意为: 超文本标记语言;
HTML:不是 程序 语言,它只是一种 标记 语言,一种 文本 语言;
HTML:所有标记都必须用尖括号( " < " 和 " > " )括起来;
HTML:大部分标记是成对出现的,结束标记须以"/"开头;只有少数标记不成对出现;
HTML:标记不区分大小写,web标准中是小写的;
               默认情况ASP.NET 2.0 中系统提供的HTML标记都用小写字母表示;

HTML:已成为各种浏览器的通用标准,并独立于各种操作系统平台;
HTML:的重要性:是所有浏览器都能识别的语言,是浏览器生成网页的基础;
                        不管你采用哪种技术,哪种语言最终都以HTML的形式输出;
另外:XML语言的标记可以任意定义,所以HTML标记可以说是其中的一部分。


二、HTML语言的精华——超链接

超链接是HTML语言的精华。
在HTML语言中使用A标记来创建超链接

文字链接
耀眼冰蓝
基本格式:

<href="URL(必选项)" target="目标(可选项)" title="鼠标放上时显示的文字(可选项)">文本</a>

锚点(书签)链接
回到顶部      跳转到其它页面的指定部分 
基本格式:
<name="top" id="top"></a> <!--定义锚点的方法:只是把 href 换成了 name 而已.-->
<href="#top">回到顶部</a><br />
<href="http://www.cnblogs.com/yoyebina/archive/2006/11/12/558479.html#20" target="_blank">跳转到其它页面的指定部分</a>

邮件链接
给耀眼冰蓝发信
基本格式:
<href="mailto:yoyebina@gmail.com?subject=关于耀眼冰蓝的博客">
<SPAN style="TEXT-DECORATION: none">给耀眼冰蓝发信</SPAN>
</a>

 图片链接
点击去耀眼冰蓝的博客
基本格式:
<href="http://yoyebina.cnblogs.com" target="_blank" >
<img src="http://www.yoyebina.com/Images/logo.gif" border="0" alt="点击去耀眼冰蓝的博客" >
</a>

移动链接
(目的:增加吸引力)
点这里查看详细方法...
基本格式:
<marquee>
<href="http://www.cnblogs.com/yoyebina/archive/2006/11/22/569178.html" target="_blank" >
<SPAN style="TEXT-DECORATION: none">点这里查看详细方法</SPAN>
</a>
</marquee>


三、提高代码的可读性——注释语句

下面是单行和多行两种注释语句:
<!--单行的注释语句:欢迎访问耀眼冰蓝的博客: http://yoyebina.cnblogs.com-->

<!--这是一条多行的注释语句,
欢迎访问耀眼冰蓝的站点: http://www.yoyebina.com
-->


四、格式化文本

<font face="宋体" size="2" color="green">http;//yoyebina.cnblogs.ocm</font>

上标:耀眼冰蓝
<suP>yoyebina</sup>
下标:耀眼冰蓝
<sub>yoyebina</sub>

粗体:
<B>耀眼冰蓝</B>
斜体:
<I>耀眼冰蓝</I>

下划线:
<U>耀眼冰蓝</U>
删除线:
<S>耀眼冰蓝</S>

效果如下:
http://yoyebina.cnblogs.com

上标:耀眼冰蓝yoyebina

下标:耀眼冰蓝yoyebina


粗体:耀眼冰蓝

斜体:耀眼冰蓝


下划线:耀眼冰蓝

删除线:耀眼冰蓝


 五、格式化段落

·分段标记P:用该标记时会跳过一个空行,若省略结束</p>,则可将开始标<p>记放在段尾。
   其常用属性是align,用于设置段落的水平对齐方式。

·换行标记br:强行规定当前行中断,使后续的内容在下一行显示。

·标题标记Hn:n的取值是1到6,当n取1时,标题的字号最大;当n取6时,标题的字号最小;

·水平线标记hr:属性有:align(默认为center), color, noshade(无阴影), size(竖直尺寸), width(水平长度)

·如果要将部分内容居中对齐,可以用<center>和</center>
   如果要将多个段落设置为相同的对齐方式,可用<div>和</div>


 六、引用多媒体

背景音乐
<bgsound src="URL" loop="*"> loop设定循环的次数,loop=infinete表示不断循环到关闭为止

插入图象
<img src="Images/yoyebina.gif" alt="我的图片" bordor="1">
img标记的常用属性:src,alt.height,width,border,hspace(图片与左右两端文本距离),vspace(图片与上下两端文本距离) ,align

插入视频
<img src="yoyebina.avi">

插入动画
<embed src="yoyebina.swf/midi"></embed>

通用标记
<object 属性=属性值></object>


  七、头部内容

头部的内容在网页中 基本上(标题会显示)不显示出来,但也是非常重要的。

收藏夹小图标:
制作一个16x16的icon图标,命名为favicon.ico,放在根目录下;然后将下面的代码嵌入head区:

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

。。。稍后。。。

Feedback

#1楼    回复  引用  查看    

2006-12-21 18:28 by 我不是一只鹿      
呵呵 应该多点去了解 xhtml

#2楼    回复  引用  查看    

2006-12-21 18:32 by U2U      
放在主页十户不太适合

#3楼 [楼主]   回复  引用  查看    

2006-12-21 18:34 by 耀眼冰蓝      
@我不是一只鹿
你说得对,
但这只是我自己总结的第一篇,
不久我将去学,谢谢你的指导!

#4楼 [楼主]   回复  引用  查看    

2006-12-21 18:37 by 耀眼冰蓝      
@ U2U
放在主页十户不太适合

这些都是我自己总结归纳的。
是花了时间的,
放在主页,也是为了分享给大家,和听取大家的指导。

#5楼    回复  引用  查看    

2006-12-21 18:59 by Clingingboy      
现在基本强调用css吧.

#6楼    回复  引用    

2006-12-21 19:04 by 虫子[匿名] [未注册用户]
这个也太初级了. ^_^
多发表 xhtml = div + css
的文章.

#7楼 [楼主]   回复  引用  查看    

2006-12-21 19:06 by 耀眼冰蓝      
@Clingingboy
下一篇,就是:css.
再下和篇是:javascript
再下和篇,我就不清楚了,请大家指点,是XML,Ajax&Atlas ...我还没学呢!

#8楼 [楼主]   回复  引用  查看    

2006-12-21 19:08 by 耀眼冰蓝      
@虫子
一步一步来,我们一直在努力!
下次我会向 那方面努力的, 谢谢你的指向.

#9楼    回复  引用    

2006-12-21 19:13 by unknown [未注册用户]
书上有的就不要了,写写经验和技巧,难点。

比如:在dreamweaver中,form tag 会占用空间,怎么办呢?

请多写写这种实际的问题。

#10楼    回复  引用  查看    

2006-12-21 19:14 by dudu      
还是放在新手区吧。

#11楼 [楼主]   回复  引用  查看    

2006-12-21 19:20 by 耀眼冰蓝      
@unknown
书上有的就不要了

我是想下次不要去翻书了

比如:在dreamweaver中,form tag 会占用空间,怎么办呢?
我还没有注意,谢谢你!

#12楼 [楼主]   回复  引用  查看    

2006-12-21 19:24 by 耀眼冰蓝      
@ dudu

在博客园中,搜索一下" HTML " ,很少找到一些比较全面的文章,
在园中,毕竟有很多像我一样的新手,
我想,基础是比较重要的。
我是想多让大家来关注一下,来完善一下这“基础工程”。

#13楼    回复  引用  查看    

2006-12-21 19:28 by dudu      
@耀眼冰蓝
在网上搜索一下,实在太多了。

#14楼    回复  引用    

2006-12-21 19:37 by unknown [未注册用户]
Q:在dreamweaver中,form tag 会占用空间,怎么办呢?

A:用 <form style="margin:0em"> 消除。

#15楼 [楼主]   回复  引用  查看    

2006-12-21 19:40 by 耀眼冰蓝      
@dudu
在网上搜索一下,实在太多了,何必重复劳动
谢谢,这点是应该注意的。借鉴别人的经验是快速成长的好办法。

之前在网上找过,大家的篇幅都比较大,我想用自己的方式来表达,就像以前老师要我们 抄写/默写 书 一样,
会读,会背,老师还要我们抄写/默写(敲)几遍。

#16楼    回复  引用  查看    

2006-12-21 19:46 by dudu      
@耀眼冰蓝
嗯,相当于学习笔记,对学习还是很有帮助的。

#17楼 [楼主]   回复  引用  查看    

2006-12-21 19:53 by 耀眼冰蓝      
@dudu
是啊,标题中一直都带着"笔记"两个字。呵呵!

#18楼 [楼主]   回复  引用  查看    

2006-12-21 20:02 by 耀眼冰蓝      
@unknown
Q:在dreamweaver中,form tag 会占用空间,怎么办呢?

A:用 <form style="margin:0em"> 消除。
就是在表单form中增加一个样式(属性)。

form tag 会占用空间 我不明白。再次感谢!

#19楼    回复  引用    

2006-12-21 20:14 by unknown [未注册用户]
我建议你直接看w3c.org的文档标准,简单,明了,还有图和测试效果的test web site;
同时注意代码和主流浏览器的兼容;
代码和主流网页编辑器的的兼容。
html不简单,w3c的人不是吃干饭的。

#20楼    回复  引用    

2006-12-21 20:15 by unknown [未注册用户]
sorry, it is w3.org.

#21楼 [楼主]   回复  引用  查看    

2006-12-21 20:52 by 耀眼冰蓝      
@unknown
Thank you !

#22楼    回复  引用  查看    

2006-12-22 08:59 by 迷途小猪儿      
总结的不错,就是不适合放首页,哈哈

#23楼    回复  引用  查看    

2007-01-04 15:21 by 魔幻天空      
UP!

#24楼    回复  引用    

2007-03-01 10:42 by hgch [未注册用户]
<a href="URL(http://hi.baidu.com/krei)" target="目标(可选项)" title="my,blog">文本</a>

#25楼    回复  引用    

2007-03-20 15:29 by 啊啊 [未注册用户]
什么东西啊。。晕~~~~

#26楼    回复  引用    

2007-04-29 13:22 by 东风 [未注册用户]
多谢,虽然很基础,但是正好用的到,不用自己写了,呵呵

标题  
姓名  
主页
Email (只有博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2006-12-25 22:23 编辑过


相关链接:
 
28 Apr 07