1.HTML的页面构成

html是一个网页的文件,创建文件可以用电脑的文本编辑器,或者用IDE工具。

1.1 用Sublime

先创建一个空的文本文档,把后缀名改成html,然后右键,用Sublime打开。用Sublime可以快速生成html的文档结构。方式:<h  ==> 回车。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

1.2 用Eclipse或者其他类似的IDE工具

一般是在项目创建好了之后,在某个包上右键,创建一个HTML file,IDE工具就会自动帮你生成一个带有基本结构的html文档。

image.png

image.png

<!DOCTYPE html>
<html>
<head>
<!-- 设置字符编码,utf-8可以支持中文 -->
<meta charset="UTF-8">
<title>这是网页的标题</title>
</head>
<body>

</body>
</html>

2.HTML的基本标签

h1 ~ h6 标题标签,类似于word中的N级标题,h1是最粗的

<b> 文字加粗

<img> 用来引入一张图片,需要你记住的属性:src(规定图片的地址 --> 相对路径,绝对路径,网络路径)

路径分类:

  1. 相对路径 <a href="index.jsp"><img src="logo.png"></a>  ==>http://localhost:8088/Article1.0/index.jsp  (相对路径就是在前面自动加上当前资源所在的目录)


  2. 绝对路径 <a href="/index.jsp"><img src="logo.png"></a>

    ==>http://localhost:8088/index.jsp (绝对路径就是在前面自动加上服务器的根目录)

相对路径的一个困局,当页面位置可能发生变动的时候,无法准确地去定位资源地址。

image.png

但是用绝对路径的也会有问题,就是项目的名称要写死,万一项目名字变了,就又很尴尬。

<a href="/index.jsp"><img src="/Article1.0/image/logo.png"></a>

JSP页面的对应的解决方法:${pageContext.request.contextPath}


<p>段落

<a> 超链接(当你点了就跳转),需要你记住的属性:

  1. href ==> 跳转的目标页面,但是也可以去调用某个JS方法。(比如:href="JavaScript:alert();")

  2. target 不设置就是当前页面跳转,设置_blank,就是在新窗口打开。



备注:我们在电脑上画了一个页面,里面引入一张图片,必然是想要去让别人访问的,但是别人不可能跑到你家里来开你的电脑来直接打开html,所以,我们要把网页发布到服务器上。别人用浏览器来访问你的网页。服务器有Apache/tomcat等。