html基础

字数 1025阅读 25

链接: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= 设置密件抄送人 & 组合多个控制命令

推荐阅读更多精彩内容

  • 原 Blog 链接:HTML基础学习笔记 自学 html 基础笔记 Web 前端简单介绍 web 前端包含: pc...
  • 请各位读者添加一下作者的微信公众号,以后有新的文章,将在微信公众号直接推送给各位,非常感谢。 如果您觉得这篇文章还...
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
  • HTML基础 本文包括 HTML基本知识与结构 HTML常见标签 标签写法与嵌套的讨论 HTML、CSS、java...
  • 超文本标记语言 (HTML, HyperText Markup Language) ,是构成网页的最基础的内容,用...