首页 > 代码库 > HTML的基本使用

HTML的基本使用

2024-08-06 17:16:50   220人阅读

     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=http://www.mamicode.com/"uri" usemap="uri" alt="" name="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=http://www.mamicode.com/"">
     属性href用来设定链接到哪个页面中。
图片标记
     在页面中添加的图片是通过<img>标记来实现的。<img>标记的语法格式如下：
<img src=http://www.mamicode.com/"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=http://www.mamicode.com/"q.ico"/>>


HTML5的一些新增内容

新增的元素
  • <section>：<section>表示页面中的一个区域，例如章节、页眉、页脚或页面中的其他部分。可以与h1、h2、h3、h4等元素结合起来使用，标示文档结构。类似于在HTML4中使用<div>标记在页面中定义一个区域。
例：
<section>
     <h2>section标记的使用</h2>
     <p>完成百分比：100%</p>
     <input type="button" value=http://www.mamicode.com/"请单击"/>>
  • <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=http://www.mamicode.com/"#">明日图书2011-9-27>

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

HTML的基本使用


联系
我们