html静态页面自动生成java html可以编写静态网页

转载

mob64ca13fa6a3c 2023-10-23 08:30:16

文章标签 html静态页面自动生成java html xml HTML 文章分类 Java 后端开发

网页主要由三部分组成：分别为结构，表现和行为。

XHTML：可扩展文本标签语言，XHTML是一种基于XML的语言。XHTML是一个扮演者类似HTML角色的XML。 HTML提供了六级标题，分别为<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,<h1>字号最大，<h6>最小。

图像类型	优点	缺点
*.jpg	体积小，比较清晰	有损压缩、画面失真
*.gif	支持Internet标准，支持无损耗压缩和透明度	支持有限的透明度，效果不如别的JPG图像
*.bmp	支持24位颜色深度，兼容性好	不支持压缩，容量大
*.png	最新的图像格式，兼有GIF和JPG的优势	部分浏览器不支持

图片标签：<img>标签，这个标签重要属性src，用于指定图片路径；alt，替代文本，当因为网速较慢，或者路径错误等原因导致图像无法显示时将显示该文本信息，width表示图像的宽度，height表示图像的高度。

例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片标签示例</title>
</head>
<body>
<img src="../Pictures/tomcat设置.png" alt="配置信息" width="500" height="300"/>
</body>
</html>

此时浏览器效果为

html静态页面自动生成java html可以编写静态网页_xml

当图片路径错误时将显示为：

html静态页面自动生成java html可以编写静态网页_xml_02

段落标签：<p>段落中的文本</p>，换行<br/>,水平线<hr/>

超链接语法：<a href = "url" target = "目标窗体位置">链接文本或图像</a>锚链接在名字前面加#

target属性常用的取值有_self和_blank，_self表示在自身窗口中打开超级链接文件，而_blank表示在新窗口中打开目标网页。

超级链接分类

1、页面间链接

2、锚链接

3、功能性链接

首先看锚链接

在要插入锚节点的位置写入

<a name = "about"></a>

然后在需要跳转到锚节点位置定义超链接

<a href="#about">返回锚节点处</a>

特殊符号	字符实体
空格	&nbsp；
大于号	&gt；
小于号	&lt；
双引号	&quo；t
版权符号(©)	&copy；

HTML文档添加注释方法：

常用规范：1、标签名和属性名必须小写。2、HTML标签必须闭合。3、属性值必须用引号括起来，一般情况下建议试用双引号。4、HTML标签必须正确嵌套。5、属性不能简写。6、必须添加文档类型声明。

列表分为三类：无序列表、有序列表、自定义列表

html静态页面自动生成java html可以编写静态网页_html_03

无序列表语法：有序列表标签：

</ul> </ol>

无序标签使用方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片标签示例</title>
</head>
<body>
<ul>
	<li>苹果</li>
	<li>香蕉</li>
	<li>橘子</li>
</ul>
</body>
</html>

有须标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片标签示例</title>
</head>
<body>
<ol>
	<li>苹果</li>
	<li>香蕉</li>
	<li>橘子</li>
</ol>
</body>
</html>

表格语法：

html静态页面自动生成java html可以编写静态网页_HTML_04

使用表格的示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>商品列表</title>
</head>
<body>
<table width="100%" border="1" cellspacing="0">
	<tr>
		<td>商品名称</td>
		<td>价格</td>
		<td>生产日期</td>
	</tr>
	<tr>
		<td>海尔洗衣机</td>
		<td>1800</td>
		<td>2014-8-7</td>
	</tr>
	<tr>
		<td>华为手机</td>
		<td>1500</td>
		<td>2014-8-5</td>
	</tr>
</table>
</body>
</html>

表格跨列：colspan 表格跨行：rowspan

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>商品列表</title>
</head>
<body>
<table width="100%" border="1" cellspacing="0">
	<tr>
		<td>商品名称</td>
		<td colspan="2">价格</td>
		<!--<td>生产日期</td>-->
	</tr>
	<tr>
		<td>海尔洗衣机</td>
		<td>1800</td>
		<td>2014-8-7</td>
	</tr>
	<tr>
		<td>华为手机</td>
		<td>1500</td>
		<td>2014-8-5</td>
	</tr>
</table>
</body>
</html>

表单语法：

method的取值一般为get或post

表单中使用input标签收集用户信息。

type属性表示表单元素的类型，常用的属性值有：

html静态页面自动生成java html可以编写静态网页_HTML_05

name属性定义表单元素的名称

value属性指定表单元素的默认值

表单中还可以使用<select>标签创建一个下拉列表

使用<textarea>创建一个多行文本框

text示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本输入框</title>
</head>

<body>
<form action="" method="post" name="myform">
<p>  E-mail：<input name="email" type="text" size="20" /></p>
<p>用户名：<input name="userName" type="text" value="张三" size="20" /></p>
</form>
</body>
</html>

password示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>密码输入框</title>
</head>

<body>
<form action="" method="post" name="myform">
<p>E-mail：<input name="email" type="text" size="20" /></p>
<p> 密码：<input name="pwd" type="password"  size="22" /></p>
</form>
</body>
</html>

radio示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单选按钮</title>
</head>

<body>
<form action="" method="post" name="myform">
<p>性别：
       <input name="sex" type="radio" value="女" />女
       <input name="sex" type="radio" value="男" checked="checked"/>男
</p>
</form>
</body>
</html>

checkbox示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>复选框</title>
</head>

<body>
<form action="" method="post" name="myform">
<p>课程选择：
       <input name="course1" type="checkbox" value="C#" />C#   
       <input name="course2" type="checkbox" value="JavaScript" checked="checked"/>JavaScript   
       <input name="course3" type="checkbox" value="HTML" />HTML   
       <input name="course4" type="checkbox" value="Flash"  checked="checked"/>Flash 
</p>
</form>
</body>
</html>

button示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户登录</title>
</head>

<body>
<form action="" method="post" name="myform">
<p>E-mail：<input name="email" type="text"  size="18"/></p>
<p> 密码：<input name="pwd" type="password" /></p>
<p> <input name="btn1" type="submit" value="提交" />
    <input name="btn2" type="reset" value="重置" />
    <input name="btn3" type="button" value="取消" />
</p>
</form>
</body>
</html>

select示例：

在表单中，使用<select>标签定义一个下拉列表，使用<option>标签定义下拉列表中的选项。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉列表</title>
</head>
<body>
<form action="" method="post" name="myform">
    课程选择：
    <select name="course">
        <option value="C#">C#</option>
        <option value="JavaScript">JavaScript</option>
        <option value="HTML" selected="selected">HTML</option>
        <option value="Flash">Flash</option>
    </select>
</form>
</body>
</html>

textarea示例：

可以通过cols和rows控制多行文本域大小，同时我们不能使用它的value设置它的初始值，它的初始值应当放在<textarea>标签和</textarea>之间。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉列表</title>
</head>
<body>
<form action="" method="post" name="myform">
   <textarea name="content" cols="20" rows="10">欢迎阅读本网站的服务协议.....</textarea>
</form>
</body>
</html>

<div>标签相当于一个容器标签，即<div>和</div>之间相当于一个容器。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。