HTML的基本使用

HTML(HyperText Mark-up Language)是一种表示页面内容及样式的语言,它是事实上的web展示标准,被所有浏览器支持,也是它让你的页面可移植的出现在不同的系统和平台之上。

HTML结构

如下一段最简单的HTML代码:

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

展示效果为:

需要首先注意的是,html使用标签来告诉浏览器页面展现的样式以及自身的一些信息,大多数标签是成对出现的。下面详细介绍各类标签的作用。

  • <html>:所有的HTML文件都是以<html>标记开头,以</html>结束。HTML的所有标记内容都要放置在<html>和</html>中间。<html>标记没有实质的内容,但是不可缺少。
  • <head>:<head>是HTML文件的头标记。主要是放置一些HTML全局的一些信息。如定义CSS样式可以放置在<head>与</head>标记中。注:CSS主要用来定义html中的全局范围的样式,否则需要在html中每一处都引入详细的样式,css的作用有点类似于函数的作用,目的是样式复用。
  • <title>:<title>标记为标题标记。可将网页的标题定义在<title>与</title>标记中。
  • <body>:<body>是HTML页面的主体标记,页面的中的所有具体内容都定义在该标记中,<body>标记本身也具有控制页面的一些特性,如控制页面的背景图片和颜色等。

HTML常用标记

  • <p>:段落标记以<p>标记开头,以</p>标记结束。段落标记在段前和段后各添加一个空行,而定义在段落标记中的内容,不受该标记的影响。
  • <h1>-<h6>:如果需要不同级别的标题,则要使用该标题标记。在HTML标记中,设定了6个标题标记,分别为<h1>至<h6>,数字越小,级别越高,文字的字体就越大。

上面两个标记的示例:

<html>
     <head>
          <title>设置标题标记</title>
     </head>
     <body>
          <h1>Java开发的3个方向</h1>
          <h2>Java SE</h2>
          <p>主要用于桌面程序的开发。它时学习Java EE和Java ME的基础,也是本书的重点内容</p>
          <h2>Java EE</h2>
          <p>主要用于网页程序的开发。随着互联网的发展,越来越多的企业使用Java语言来开发自己的官方网站               </p>
          <h2>Java ME</h2>
          <p>主要用于嵌入式系统程序的开发</p>
     </body>
</html>

显示效果为:

  • <br>与</br>:有些标记会将内容自动换行,如<p>和<h1>-<h6>,而有些标记则不会,所以当你需要更加精细的换行控制的时候,可以使用<br>或者<br/>,注意这个标记可以单独使用。html标准建议所有标签都应该有结尾,所以使用</br>是更好的选择。(因为大部分标签是成对出现的,所以使用<br>这种标签总让人想去找对应的</br>,而换行标签成对使用是没有意义的,所以html建议都结尾标签)
  • <center>与</center>:html默认的布局方式是从左到右依次排序。如果想让页面中的内容在页面的居中位置显示,可以使用html中的<center>标记。<center>标记以<center>标记开头,以</center>标记结尾。标记中的内容为居中显示。

上面两个标记的示例:

<html>
     <head>
     </head>
     <body>
          <center>
               <H1>正在测试居中</H1>
               我要测试换行</br>已换行
               </center>
          </body>
</html>

效果如下:

  • <li>与<ul>、<ol>:html提供了文字列表标记,文字列表标记可以将文字以列表的形式依次排列,主要分为无序列表<ul>和有序列表<ol>两种。而每一个列表项以<li>表示。

如:

<html>
     <head>
          <title>html中的列表标记</title>
     </head>
     <body>
          一年有以下几季
          <p>
               <ul>
                    <li>春</li>
                    <li>夏</li>
                    <li>秋
                    <li>冬
               </ul>
          <p>
          <p>
               <ol>
                    <li>春</li>
                    <li>夏</li>
                    <li>秋
                    <li>冬
               </ol>
          </p>
     </body>
</html>

展示效果为:

表格标记

表格是非常重要的数据展现形式。表格包括标题、表头、行和单元格。使用表格要掌握下面几个标记。

  • 表格标记<table>:<table>...</table>标记表示整个表格。<table>标记中有很多属性,例如width属性用来设置表格的宽度,border属性用来设置用来设置表格的边框,align属性用来设置表格的对齐方式,bgcolor属性用来设置表格的背景色。
  • 标题标记<caption>:标题标记以<caption>开头,以</caption>结束,标题标记也有一些属性,例如align、valign
  • 表头标记<th>:表头标记以<td>开头,以</td>结束,也可以使用align、valign、background、colspan等属性设置表头。
  • 表格行标记<tr>:表格行标记以<tr>开头,以</tr>结束,一组<tr>标记表示表格中的一行。<tr>标记要嵌套在<table>标记中使用,该标记也具有align、background等属性。
  • 单元格标记<td>:一个单元格标记<td>中可以嵌套多个<td>标记。该标记也具有background、valign等属性。

表格经常还用于设计页面。在页面中创建一个表格,并设置没有边框,之后通过该表格将页面划分为几个区域,之后分别对几个区域进行设计,这是一种非常方便的设计页面的方式。

如:

<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">92</td>
                    <td align="center" valign="middle">87</td>
               </tr>
               <tr>
                    <td align="center" valign="middle">李四</td>
                    <td align="center" valign="middle">93</td>
                    <td align="center" valign="middle">86</td>
                    <td align="center" valign="middle">80</td>
               </tr>
               <tr>
                    <td align="center" valign="middle">王五</td>
                    <td align="center" valign="middle">85</td>
                    <td align="center" valign="middle">86</td>
                    <td align="center" valign="middle">90</td>
               </tr>
          </table>
     </body>
</html>     

HTML表单标记

前面介绍的都是静态的显示,而表单是一种用户与网页交互的重要手段。

<form>...</form>表单标记

表单标记以<form>标记开头,以</form>标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。<form>标记的基本语法如下:

<form action="url" method="get"|"post" name="name" onSubmit="" target="">

</form>

<form>标记的各属性说明如下:

  • action属性:该属性用来指定处理表单数据程序的URL地址。
  • method属性:该属性用来指定数据传送到服务器的方式。它有两种属性值,分别为get与post。get属性值表示将输入的数据追加在action指定的地址后面,并传到服务器。当属性值为post时,会将输入的数据按照HTTP协议中的post传输方式传送到服务器。
  • name属性:该属性指定表单的名称,其值程序员可以自定义。
  • onSubmit属性:该属性用于指定当用户单击提交按钮时触发的事件。
  • target属性:该属性指定输入数据结果显示在哪个窗口中,其属性值可以设置为_blank、_self、_parent和_top。其中,_blank表示在新窗口中打开目标文件;_self表示在同一窗口中打开,一般不使用该项;_parent表示在上一级窗口中打开,一般使用框架页时经常使用;_top表示在浏览器的整个窗口中打开,忽略任何框架。

下面例子为创建表单,设置表单名称为form,当用户提交表单时,提交至action.html页面进行处理。

<form id="form1" name="form" method="post" action="www.baidu.com" target="_blank">
</form>

<input>表单输入标记

表单输入标记是使用最频繁的表单标记,通过这个标记可以向页面中添加单行文本、多行文本、按钮等。<input>标记的语法格式如下:

<input type="image" disabled="disabled" checked="checked" width="digit" height="digit" maxlength="digit" readonly="" size="digit" src="uri" usemap="uri" alt="" name="checkbox"
value="checkbox">

<input>标记的语法格式如下:

属性 描述
type 用于指定添加的是哪种类型的输入字段,共有10个可选值
disabled 用于指定输入字段不可用,即字段变成灰色。其属性值可以为空值,也可以指定为disabled
checked 用于指定输入字段是否处于被选中状态,用于type属性值为radio好checkbox的情况下。其属性值可以为空值,也可以指定为checked
maxlength 用于指定输入字段可输入文字的个数,用于type属性值为text和password的情况下,默认没有字数限制
readonly 用于指定输入字段是否为只读。其属性值可以为空值,也可以指定为readonly
size 用于指定输入字段的宽度,当type属性为text和password时,以文字个数为单位,当type属性为其他值时,以像素为单位
name 用于指定输入字段的名称
value 用于指定输入字段默认的数据值,当type属性为checkbox和radio时,不可忽略此属性;为其他值时,可以省略。当type属性为button、reset和submit时,指定的是按钮上的显示文字;该type属性为checkbox和radio时,指定的是数据项选定的值
src 用于指定图片的来源,只有当type属性为image时有效
width 用于指定输入字段的宽度,用于type属性值为image的情况下
height 用于指定输入字段的高度,用于type属性值为image的情况下
usermap 为图片设置热点地图,只有当type属性为image时有效。属性值为URI,URI格式为"#+<map>标记的name属性值"。例如,<map>标记的name属性值为Map,该URI为#Map
alt 用于指定当图片无法显示时显示的文字,只有当type属性为image时有效

type属性的属性值:

可选值 描述 可选值 描述
text 文本框 submit 提交按钮
password 密码框 reset 重置按钮
file 文件域 button 普通按钮
radio 单选按钮 hidden 隐藏域
checkbox 复选框 image 图像域

<select>...</select>下拉列表框标记

<select>标记可以在页面中创建下拉列表框,此时的下拉列表框是一个空的列表,要使用<option>标记向列表中添加内容。<select>标记的语法格式如下:

<select name="name" size="digit" multiple="multiple" disabled="disabled">

<select>

属性解释如下表:

属性 描述
name 用于指定列表框的名称
size 用于指定列表框中显示的选项数量,超出该数量的选项可以通过拖动滚动条查看
disabled 用于指定当前列表框不可使用(变成灰色)
multiple 用于让多行列表框支持多选

示例如下:

<body>
     下拉列表框:
     <select name="select">
          <option>数码相机区</option>
          <option>摄影器材</option>
          <option>MP3/MP4/MP5</option>
          <option>U盘/移动硬盘</option>
     </select>
      多行列表框(不可多选):
     <select name="select" size="2">
          <option>数码相机区</option>
          <option>摄影器材</option>
          <option>MP3/MP4/MP5</option>
          <option>U盘/移动硬盘</option>
     </select>
      多行列表框(可多选):
     <select name="select" size="3" multiple>
          <option>数码相机区</option>
          <option>摄影器材</option>
          <option>MP3/MP4/MP5</option>
          <option>U盘/移动硬盘</option>
     </select>
</body>

效果如下:

<textarea>多行文本标记

<textarea>为多行文本标记,与单行文本相比,多行文本可以输入更多的内容。通常情况下,<textarea>标记出现在<form>或<table>标记的标记内容中。<textarea>标记的语法格式如下:

<textarea cols="digit" rows="digit" name="name" disabled="disabled" readonly="readonly" wrap="value">默认值</textarea>

<textarea>标记的属性如下:

属性 描述
name 用于指定多行文本框的名称,当表单提交后,在服务器端获取表单数据时应用
cols 用于指定多行文本框显示的列数(宽度)
rows 用于指定多行文本框显示的行数(高度)
disabled 用于指定当行文本框不可使用(变成灰色)
readonly 用于指定当前多行文本框为只读
wrap 用于设置多行文本中的文字是否自动换行,可选值如下表所示

warp属性的可选值:

可选值 描述
hard 默认值,表示自动换行,如果文字超过cols属性所指的列数就自动换行,并且提交到服务器时换行符同时被提交
soft 表示自动换行,如果文字超过cols属性所指定的列数就自动换行,但提交到服务器时换行符不被提交
off 表示不自动换行,如果想让文字换行,只能按下Enter键强制执行

示例:

在页面中创建表单对象,并在表单中添加一个多行文本框,文本框的名称为content,6行30列,文字换行方式为hard。关键代码如下:

<form name="form2" method="post" action="">
     <textarea name="content" cols="30" rows="5" wrap="hard"></textarea>
</form>

效果如下:

超链接与图片标记

超链接标记

超链接标记是页面中非常重要的元素,在网站中实现从一个页面跳转到另一个页面,这个功能就是通过超链接标记来完成的。其语法如下:

<a href=""></a>

属性href用来设定链接到哪个页面中。

图片标记

在页面中添加的图片是通过<img>标记来实现的。<img>标记的语法格式如下:

<img src="uri" width="value" height="value" border="value" alt="提示文字">

<img>标记的属性如下表所示。

属性 描述
src 用于指定图片的来源
width 用于指定图片的宽度
height 用于指定图片的高度
border 用于指定图片外边框的宽度,默认值为0
alt 用于指定当图片无法显示时显示的文字

使用示例:

<body>
     <table width="409" height="250" border="1" align="center">
          <tr>
               <td width="199" height="208">
                    <img src="q.ico"/>
               </td>
          </tr>
          <tr>
               <td height="35" align="center" valign="middle"><a href="message.html">查看详情</a>
               </td>
          </tr>
     </table>
</body>

HTML5的一些新增内容

新增的元素

  • <section>:<section>表示页面中的一个区域,例如章节、页眉、页脚或页面中的其他部分。可以与h1、h2、h3、h4等元素结合起来使用,标示文档结构。类似于在HTML4中使用<div>标记在页面中定义一个区域。

例:

<section>
     <h2>section标记的使用</h2>
     <p>完成百分比:100%</p>
     <input type="button" value="请单击"/>
</section>    
  • <article>:<article>元素表示页面中一块与上下文不相关的独立内容,例如博客中的一篇文章、一段用户评论等。除了内容部分,一个<section>元素通常有自己的标题、脚注等内容。
  • <header>:<header>元素表示页面中一个内容区域或整个页面的标题。
  • <footer>:<footer>元素表示页面中一个内容区域或整个页面的脚注。例如日期、作者信息。

例:

<article>
     <header>
          <h1>苹果美容</h1>
     </header>
     <p>
          苹果大仙
     </p>
     <footer>
          <p>2011-9-27</p>
     </footer>
</article>
  • <aside>:aside元素用来表示当前页面或文章的附属信息部分。可以包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条等信息。
<aside>
     <nav>
     <h2>侧栏</h2>
     <ul>
           <li>
               <a href="#">明日图书</a>2011-9-27
          </li>
          <li>
               <a href="#">明日软件</a>2011-9-27
          </li>
          <li>
               <a href="#">编程词典</a>2011-9-27
          </li>
     </ul>
     </nav>
</aside>

新增的input元素类型

  • email:将input元素的类型设置为email,表示文本框必须输入Email地址。
  • url:url表示必须输入URL地址。
  • number:number表示必须输入数值的文本框。
  • range:表示必须输入一定范围内数字值的文本框。

时间: 2024-10-12 19:47:55