您的位置：首页 > 编程语言 > Java开发

Java Web学习笔记之4.HTML标记语言

2015-10-05 14:34 771 查看

HTML标记语言

创建第一个HTML文件

编写HTML文件可以通过两种方式，一种是手工编写HTML代码，另外一种是借助一些开发软件，比如Dreamweaver等。

<html>
<head>
<title>html页面</title>
</head>
<body>
<b>应用记事本编写HTML文件</b>
</body>
</html>

2、 html文档结构

HTML文件不区分大小写
<html><--!HTML开头，父级，最顶级的标记-->
<head><--!HTML头标记，放置一些HTML文档的信息-->
<title>html页面</title><--!标题标记-->
</head>
<body><--!HTML主题标记，显示页面中的所有内容-->
<b>应用记事本编写HTML文件</b>
</body>
</html>

3.HTML常用标记

换行标记

`<br>`，HTML中回车键，空格并不能换行
实例
<html>
<head>
<title>换行实现</title>
</head>
<body>
<b>黄鹤楼送孟浩然之广陵</b><br>
故人西辞黄鹤楼，烟花三月下扬州。<br>
孤帆远影碧空尽，唯见长江天际流。
</body>
</html>

段落标记

<p>内容</p>

段落标记在段落前和段落后添加了一个空行，而定义在段落标记中的内容，不受该标记的影响。

<html>
<head>
<title>段落以及标题标记</title>
</head>
<body>
<h1>Java开发的三个方向</h1>
<h2>Java SE</h2>
<p>主要用于桌面程序的开发。它是学习Java EE和Java ME的基础。</p>
<h2>Java EE</h2>
<p>主要用于网页程序的开发。随着互联网的发展，越来越多的企业使用Java语言来开发自己的官方网站，其中不乏世界500强</p>
<h2>Java ME</h2>
<p>主要用于嵌入式系统程序的开发</p>
</body>
</html>

标题标记

在HTML中创建不同级别的标题，使用

<hn>标题</hn>

，n=1,2，…,6.数字越小，表示级别越高，文字的字体也就越大。

居中标记

HTML页面中内容有一定的布局方式，默认的布局方式是从左到右依次排序。居中标记

<center></center>

<html>
<head>
<title>段落以及标题标记</title>
</head>
<body>
<center>
<h1>Java开发的三个方向</h1>
<h2>Java SE</h2>
<p>主要用于桌面程序的开发。它是学习Java EE和Java ME的基础。</p>
<h2>Java EE</h2>
<p>主要用于网页程序的开发。随着互联网的发展，越来越多的企业使用Java语言来开发自己的官方网站，其中不乏世界500强</p>
<h2>Java ME</h2>
<p>主要用于嵌入式系统程序的开发</p>
</center>
</body>
</html>

文字列表标记

列表主要分为无序列表和有序列表

有序列表的标记是

<ol></ol>

,每一个列表项前使用

<li></li>

,无序列表的标记是

<ul></ul>

,每一个列表项前面使用

<li></li>

实例

<html>
<head>
<title>无序列表</title>
</head>
<body>
<p>编程词典有以下几个品种</p>
<ul>
<li>Java编程词典</li>
<li>VB编程词典</li>
<li>.net编程词典</li>
<li>C#编程词典</li>
</ul>
</body>
</html>

<html>
<head>
<title>有序列表</title>
</head>
<body>
<p>编程词典有以下几个品种</p>
<ol>
<li>Java编程词典</li>
<li>VB编程词典</li>
<li>.net编程词典</li>
<li>C#编程词典</li>
</ol>
</body>
</html>

表格标记

表格包含标题、表头、行和单元格。表格标记使用

<table></table>

,标题

<caption></caption>

,表格行标记

<tr></tr>

,单元格标记

<td></td>

（他们还有许多属性）

<html>
<head>
<title>表格</title>
</head>
<body>
<table width="318" height="167" border="1" align="center">
<caption>学生考试成绩单</caption>
<tr>
<td align="center" valign="middle">姓名</td>
<td align="center" valign="middle">语文</td>
<td align="center" valign="middle">数学</td>
<td align="center" valign="middle">英语</td>
</tr>
<tr>
<td align="center" valign="middle">张三</td>
<td align="center" valign="middle">89</td>
<td align="center" valign="middle">97</td>
<td align="center" valign="middle">87</td>
</tr>
<tr>
<td align="center" valign="middle">李四</td>
<td align="center" valign="middle">99</td>
<td align="center" valign="middle">87</td>
<td align="center" valign="middle">67</td>
</tr>
<tr>
<td align="center" valign="middle">王五</td>
<td align="center" valign="middle">87</td>
<td align="center" valign="middle">88</td>
<td align="center" valign="middle">98</td>
</tr>
</table>
</body>
</html>

表单标记

是用户与网页交互信息的重要手段

a.

<from></from>

表单标记，可以处理表单数据的url信息，action属性可以处理表单数据程序的URL地址

b.

<input>

表单输入标记，可以指定类型

c.

<select></select>

下拉菜单标记，列表项要使用

<option></option>

<textarea>

多行文本标记

超链接与图片标记

超链接

<a href="链接地址">链接</a>

图片

<img src="">

实例

<html>
<head>
<title>超链接与图片</title>
</head>
<body>
<table width="409" height="523" border="1" align="center">
<tr>
<td width="199" height="208">
<img src="imgs/1.png">
</td>
<td width="194">
<img src="imgs/2.png">
</td>
</tr>
<tr>
<td align="center" height="35" valign="middle"><a href="1.html">查看详情</a>
</td>
<td align="center" valign="middle"><a href="2.html">查看详情</a>
</td>
</tr>
<tr>
<td  height="277">
<img src="imgs/3.png">
</td>
<td>
<img src="imgs/4.png">
</td>
</tr>
<tr>
<td align="center" height="35" valign="middle"><a href="3.html">查看详情</a>
</td>
<td align="center" valign="middle"><a href="4.html">查看详情</a>
</td>
</tr>
</table>
</body>
</html>

—CYY

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航