Java Web学习笔记之4.HTML标记语言_使用 html 常用标记,实现以下页面 java 开发的3个方向 java se 主要用于桌面-CSDN博客

本文链接：https://blog.csdn.net/cyylovesmile/article/details/48914027

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>
b.<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