html基础

链接:JSP网站开发之HTML入门知识及常用标记符 (一)

网站开发之HTML基础知识及超链接(二)

1.BODY
正文标记符<BODY>和</BODY>包含Web 页的内容。文字、图形、链接以及其他HTML元素都位于该标记符内。注意:空格、回车这些格式控制在显示时都不起作用,如要使它们起作用,应使用预格式化元素<PRE>和</PRE>。
插入背景图片:<BODY BACKGROUND="image.gif">
插入音乐head:<BGSOUND src="soundfileURL">

2.字符格式 FONT
所谓字符格式是指针对段落中的部分文字(一个或一组文字,也可以是整个段落的文字)所设置的格式,通常包括字体、字号、文字颜色。
FONT标记符具有3个常用的属性: SIZE 设置字体大小、COLOR 设置字体颜色、FACE设置字体样式。

3.标题样式 Hn
在HTML中,用户可以通过Hn标记符来标识文档中的标题和副标题,其中n是1至6的数字;H1表示最大的标题,H6表示最小的标题。使用标题样式必须使用结束标记符。

4.添加水平线 HR
添加水平线的标记符为HR,它包括以下属性: SIZE 属性用来改变水平线的粗细, WIDTH 属性用来更改水平线的长度,NOSHADE 属性使水平线以实线显示, COLOR属性可以控制水平线的颜色。

5.ALIGN属性
ALIGN 属性用于设置段落的对齐格式,其值包括:RIGHT(右对齐)、LEFT(左对齐)、CENTER(居中对齐)和 JUSTIFY(两端对齐)。ALIGN 属性可应用于多种标记符,最典型的是应用于 P、DIV、Hn(标题标记符)、HR 等。

6.有序列表 OL LI
有序列表(Ordered list)也称数字式列表,它是一种在表的各项前显示有数字或字母的缩排列表。 定义有序列表需要使用有序列表标记符<OL></OL>和列表项(List item)标记符<LI></<LI>(结束标记符可省略)。OL 标记符最常用的属性type,用来设置数字序列样式。取值为:1、A、a、I、i。

7.无序列表 UL LI
无序列表(Unordered list)也称强调式列表,它是一种在表的各项前显示有特殊项目符号的缩排列表。 定义无序列表需要使用无序列表标记符<UL></UL>和列表项(List item)标记符<LI></LI>(结束标记符可省略)。

8.IMG 标记符
- src 属性用于指定要插入的图像的文件名(包括路径)
- alt 属性表示图像的简单文本说明
- width 和 height 属性指定图像的显示大小
- border 属性指定图像的边框
- align属性设置对齐方式
- hspace属性设置水平方向的空白
- vspace属性设置垂直方向的空白

二. 超链接
HTML(Hypertext Markup Language)超文本标记语言,它是一种规范,一种标准,它通过标记符(tag)来标记要显示的网页的各个部分。前面讲述了ML标记语言部分,通常是一个网页,这部分会讲解超链接Hyperlink,通过超链接才能够实现跳转,构成完整的网页。 1.URL URL(Universal Resources Locator)用于定位Web上的文档信息。 一个 URL 包括 3 部分:协议、计算机地址、文件路径。 协议://计算机/文件路径

    使用相对URL时,经常使用两个与DOS类似的符号:句点(.)表示当前目录双重句点(..)表示当前目录的上一级目录。


2.超链接类型 根据超链接的目标文件不同,分为: - 网页之间的超链接 - 页面内的超链接 - 文件下载超链接 - Email超链接 - 空超链接 根据超链接源对象的不同,分为: - 文本超链接 - 图像超链接(包括图像映射) - 对象超链接(例如Flash、Java小程序) 根据超链接实现方式的不同,分为: - HTML超链接 - JavaScript超链接 - 对象超链接 3.创建超链接 A标记符用于创建超链接(结束标记不能省略),href 属性指定超链接的目标文件。

内部网页超链接:<a href=test.htm>link</a> 外部网页超链接:<a href=http://www.microsoft.com>link</a> 注意:<a></a>之间是具体需要跳转的内容(切勿丢失),设置超链接后会增加下划线变蓝。

注意:test.htm文件需要和源文件放在同一目录下,同时如果想弹出新的网页,则添加target属性,如下: <a href="http://www.csdn.net/" target="_blank">Visit CSDN</a> 详见:http://www.w3school.com.cn/tags/tag_a.asp 如果希望图片作为跳转目录,参考W3School例子:

4.锚点链接 使用页面内的超链接,首先需要定义锚点,然后在超链接中指向该锚点。 定义锚点应使用<a name=xxx></a> 指向锚点的超链接为:<a href=#锚点名称>link</a> 指向其他页面内锚点的超链接:<a href = 页面的URL#该文件中的锚点>link</a> <a href= # >blank link</a>

<html>  
<body>  
  
<p>  
<a href="#C6">查看 Chapter 6。</a>  
</p>  
  
<h2>Chapter 1</h2>  
<p>This chapter explains ba bla bla</p>  
  
<h2>Chapter 2</h2>  
<p>This chapter explains ba bla bla</p>  
  
<h2>Chapter 3</h2>  
<p>This chapter explains ba bla bla</p>  
  
<h2>Chapter 4</h2>  
<p>This chapter explains ba bla bla</p>  
  
<h2>Chapter 5</h2>  
<p>This chapter explains ba bla bla</p>  
  
<h2><a name="C6">Chapter 6</a></h2>  
<p>This chapter explains ba bla bla</p>  
  
<h2>Chapter 7</h2>  
<p>This chapter explains ba bla bla</p>  
  
<h2>Chapter 8</h2>  
<p>This chapter explains ba bla bla</p>  
  
</body>  
</html>  

运行结果如下图所示,点击超链接跳转到第6章节。


百度百科的目录链接或CSDN的标题通常都是使用该方法实现。

5.超链接的显示效果 在伪类和伪对象中,与超链接相关的四个伪类选择器应用比较广泛。 - a:link 定义超链接的默认样式 - a:visited 定义超链接被访问后的样式 - a:hover 定义鼠标经过超链接的样式 - a:active 定义超链接被激活时的样式,如鼠标单击之后,到鼠标被松开之间的这段时间的样式 超链接的四种状态样式的排列顺序是有要求的,一般不能随意调换。先后顺序应该是:link、visited、hover、active 超链接的四种状态并非都必须要定义,可以定义其中的两个或三个。 下划线是超链接的基本样式,但是很多网站并不喜欢使用,所以在建站之初,就彻底清除了所有超链接的下划线: a{text-decoration:none;}。 下面举个简单的CSS例子,后面会详细介绍CSS,也是难点。

<html>  
    <head>  
  
         <style type="text/css">   
         A {   
             FONT-SIZE: 16px; FONT-FAMILY: 宋体  
         }   
         A:link {   
             COLOR: #0055bb; TEXT-DECORATION: none  
         }  
         A:visited {   
             COLOR: #0077bb; TEXT-DECORATION: none   
         }   
         A:hover {   
             COLOR: green; FONT-FAMILY: 楷体; FONT-SIZE: 20  
         }   
         P {COLOR: red}    
         </style>  
  
         <title>第一个HTML代码</title>  
    </head>  
     
    <body>  
  
    <P>CSS设置超链接样式<BR /></P>  
    <A href="http://blog.csdn.net/eastmount/" target="_blank"> Eastmount CSDN </A>  
  
    </body>  
</html>  

运行结果如下图所示,没有下划线,同时悬停变化。[图片上传中。。。(1)]
6.Email链接 <a href=mailto:i@email.com>Email</a>
控制命令:
?subject= 设置信件主题
?cc= 设置抄送人
?bcc= 设置密件抄送人 & 组合多个控制命令

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容