html脚本语言

最新推荐文章于 2022-09-28 16:56:50 发布

Lotheve

最新推荐文章于 2022-09-28 16:56:50 发布

阅读量5.2k

点赞数 2

分类专栏： Web 文章标签： html 脚本语言 web

本文链接：https://blog.csdn.net/Lotheve/article/details/49760117

版权

Web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML脚本语言

介绍

HTML（Hyper Text Markup Language）即超文本标记语言或超文本链接标示语言，它不是一种真正的编程语言，只是一种标记符。通过一些约定的标签符号对文件的内容进行标注，指出内容的输出格式，如字体大小及颜色、背景颜色、表格形式、各部分之间逻辑关系等。当用户浏览WWW信息时，浏览器会自动解释这些标签的含义，并按照一定的格式在屏幕上显示这些被标记的信息。

标签介绍

单标签

某些标签只需单独使用就能完整地表达意思，控制网页效果，这类标签的语法是：
<标签>……
<br>，它表示换行。

双标签

标签成对使用，由一个开始标签和一个结束标签构成。开始标签告诉Web浏览器从此处开始执行该标签所代表的功能，而结束标签告诉Web浏览器在这里结束该功能，结束标签的形式是在开始标签前加上一个斜杠。语法：
<标签>内容

标签属性

在单标签和双标签的开始标签里，还可以包含一些属性，以达到个性化的效果。
其语法格式是：
<标签属性1 属性2 属性3……>
各属性之间无先后次序，属性也可省略（即取默认值）。
如：

说明

HTML语言不区分大小写。例如：

<BR>和<br>

都表示换行。

HTML的基本标签

常规文档标签结构：

<html>
     <head>
         <title>标题</title>
     </head>
     <body>
        正文
     </body>
</html>

各标签说明如下：

<html></html >

这个标签对告诉浏览器这个文件是HTML文档。标志用于HTML文档的最前边，用来标识HTML文档的开始，</html>放在HTML文档的最后边，用来标识HTML文档的结束。

<head></head>

这个标签对中的内容是文档的头部信息，说明一些文档的基本情况，如文档的标题等，其内容不会显示在网页中。在此标签对之间可使用<title></title>、<script></ script >等描述HTML文档相关信息的标签对。

<body></body>

这个标签对中的内容是HTML文档的主体部分，可包含<p></p>、<h1></h1>、<br>、<hr>等标签，它们所定义的文本、图像等将会在网页中显示出来。

<title></title>

这个标签对用来设定网页标题，浏览器通常会将标题显示在浏览器窗口的标题栏左边。<title></title>标签对只能放在<head></head>标签对之间。

标题标签

<hX></hX>

在HTML文档中，<hX></hX>标签可以定义不同显示效果的标题，X表示标题的级数，取值范围为1~6，X越小，标题字号越大。
<hX>可以使用属性align，用于设置标题文字的对齐方式，其取值如下：

left：左对齐。
right：右对齐。
center：居中对齐。
未设置该属性时，默认值是左对齐

代码示例：

<body>
   <h1 align ="center">一级标题</h1>
   <h2>二级标题</h2>
   <h3>三级标题</h3>
   <h4>四级标题</h4>
   <h5>五级标题</h5>
   <h6>六级标题</h6>
</body>

段落标签

<p></p>

用来创建一个新的段落，在此标签对之间加入的文本将按照段落的格式显示在浏览器上。
<p>标签可以有多种属性，例如align属性控制其内容的对齐方式,其取值如下：

left：左对齐。
right：右对齐。
center：中间对齐。

代码示例：

<body>
    <p align="center">这是一个段落</p>
    <p align="left">这又是一个段落</p>
    <p align="right">这还是一个段落</p>
</body>

预定格式标签

<pre></pre>

在编辑文档时，如果希望将来浏览网页时仍能保留在编辑工具中已经排好的形式显示内容，可以使用该标签对。使用该标签对时，默认字体为10磅。
代码示例：

<html>
      <head><title>预定格式标签使用</title></head>
       <body>
           墙角数枝梅，
           凌寒独自开。
           遥知不是雪，
           为有暗香来
          <pre>
            兰陵美酒郁金香
             玉碗盛来琥珀光
             但使主人能醉客
            不知何处是他乡
            </pre>
       </body>
</html>

显示效果如下：

格式排版标签

<br>

该标签强制文本换行，但不会在行与行之间留下空行。如果把<br>加在<p></p>标签对的外边，将创建一个大的回车换行，即<br>前边和后边的文本的行与行之间的距离比较大；若放在<p></p>的里边则<br>前边和后边的文本的行与行之间的距离将比较小。

<hr>

该标签在网页中加入一条横跨网页的水平线，具有多种属性用于设置水平线的宽度、长度及显示效果等。属性如下：

size属性：设置水平线的粗细，默认单位是像素。
width属性：设置水平线的宽度，默认单位是像素，也可以使用对屏幕的百分比表示。
noshade属性：该属性不用赋值，而是直接加入标签即可使用，它用来取消水平线的阴影（不加入此属性水平线默认有阴影）。
align属性：设置水平线的对齐方式。
color属性：设置水平线的颜色。

    <hr align="center" width ="600" size ="9" color ="blue">
    对应下面的蓝线

文字格式标签

<font></font>

该标签对用来控制文字的字体、大小、样式和颜色，各属性功能如下：

face属性：设置字体样式。
size属性：设置字体大小，值为整数，分为7个级别，默认字体大小为3。
color属性：设置字体颜色。

注释标签

在编写HTML文件时，为提高文件的可读性，可以使用标签对编写注释文字，注释内容不会在浏览器中显示。其语法如下：

<!--注释语句-->

列表

有序列表

有序列表是指各列表项按一定的编号顺序显示，列表用<ol>开始，以</ol>结束，每一个列表项用<li></li>标签定义，其语法如下：

<ol>
<li>列表项1</li>
<li>列表项2</li>
……
</ol>

在<ol>中可以使用type、start属性。type属性用于设置编号的种类和格式，其取值如下：
l：编号为数字，默认值。例如：1，2，3，……
A：编号为大写英文字母。例如：A，B，C，……
a：编号为小写英文字母。例如：a，b，c，……
I：编号为大写罗马字符。例如：Ⅰ，Ⅱ，Ⅲ，……
i：编号为小写罗马字符。例如：ⅰ，ⅱ，ⅲ，……
代码示例：

<body>
      Java方向：                           
    <ol type ="A">
          <li>Java程序设计</li>
          <li>数据库技术</li>
          <li>JSP程序设计</li>
      </ol>
</body>

显示结果：

无序列表

无序列表指各列表项之间没有顺序关系，列表项显示时前面有一个项目符号。无序列表用<ul>开始，以</ul>结束，每一个列表项同样也用<li></li>标签定义，其语法如下：

<ul>
   <li>列表项1</li>
   <li>列表项2</li>
   ……
</ul>

在<ul>、<li>中都可以使用type属性。
type属性取值如下：
disc：实心圆点，默认值。
circle：空心圆点。
square：实心正方形。
代码示例：

<body>                          
    <ul type ="disc">
        <li>Java程序设计</li>
        <li type="circle">数据库技术</li>
        <li>JSP程序设计</li>
    </ul>
</body>

显示结果：

自定义列表

除了上述两种列表外，在实际应用中还可以根据需要自定义列表，实现一种分两层的项目清单，其语法如下：

<dl>
<dt>第一个列表项<dd>对第一个列表项的说明</dd>
</dt>
<dt>第二个列表项<dd>对第二个列表项的说明</dd>
</dt>
……
</dl>

自定义列表用<dl>开始，以</dl>结束，给每一个列表项加上了一段说明性文字，说明性文字独立于列表项另起一行显示。其中，<dt></dt>标签用来定义列表项；<dd></dd>标签用来对列表项进行说明。
代码示例：

<body>                   
  <dl>
   <dt>Java程序设计<dd>该课程主要讲述……</dd></dt>
   <dt>数据库技术<dd>该课程主要讲述……</dd></dt>
   <dt>JSP程序设计<dd>该课程主要讲述……</dd></dt>
 </dl>
</body>

显示结果：

多媒体和超链接

图像

使用<img>标签可以为网页添加.gif、.jpg、.png等格式的图像。语法格式：

视频

语法格式：

<img dynsrc=“  ”  属性=“  ”>

标签常用属性如下：
dynsrc：指定视频的源文件路径。
loop：指定视频循环播放次数。值为-1或infinite时，表示无限次循环播放。
loopdelay：指定两次播放的时间间隔。
start：指定何时开始播放视频。其属性值可取fileopen（默认值，即在链接到含该标签的页面时开始播放）、mouseove（把鼠标移到播放区域之上时才开始播放）
controls：指定在视频窗口下附加播放控制条。该属性直接添加，不用赋值。

代码示例：

<body>
   <img dynsrc="image/Backkom.wmv" start="mouseover" loop="3">    </body>

背景音乐

使用<bgsound>标签可以在网页中添加.wav、.mid、.mp3等格式的背景音乐。语法格式：

<bgsound  src=“  ”  loop=“  ”>

主要属性如下：
balance：指定音乐的左右均衡。
delay：指定播放延时。
loop：指定音乐循环播放次数。值为-1或infinite时，表示无限次循环播放。
src：指定音乐源文件的路径。
volume：指定音量
代码示例：

<bgsound src="prettyboy.mp3" loop="1">

超链接

创建超链接就是在当前页面与其它页面间建立链接，使用户可以从一个页面直接跳转到其它的页面、图像或服务器。格式为：

<a href="资源地址">超链接文本及图像</a>

其中，<a></a>标签对用来创建超链接，<a>的主要属性有：

 href：指定链接地址。若是链接到网站外部，必须为URL地址；若是链接到网站内部页面，只需指明该页面的绝对路径或相对路径。
target：指定显示链接目标的窗口。可取如下值：
    _self：默认值。当前窗口
    _blank：新打开、未命名的窗口
    _top：清除当前窗口并在整个浏览器窗口显示
    _parent：当前窗口的父窗口
alt：本意是用于指定超链接的替换文本，但在IE浏览器中可以用它来定义提示信息，当鼠标停留在此热区上时，它的值会显示在鼠标指针位置处。

代码示例：

<a href=“http://baidu.com”>百度</a>

百度

表格

语法格式

<table>
   <tr>
       <th> 表格第一列的标题</th>
       <th> 表格第二列的标题</th>
       …
   </tr>
   <tr>
       <td> 表格第一行的第一个单元格内容</td>
       <td> 表格第一行的第二个单元格内容</td>
       …
   </tr>
   <tr>
        <td> 表格第二行的第一个单元格内容</td>
        <td> 表格第二行的第二个单元格内容</td>
        …
   </tr>
    …
</table>

<table>常用属性

border：设置表格边框的宽度，若为0表示边框不可见，单位为像素。
cellspacing：设置单元格边框到表格边框的距离，单位为像素。
cellpadding：设置单元格内文字到单元格边框的距离，单位为像素。
width：设置表格宽度。其值可为整数，单位为像素，如：100表示100像素；也可以是相对页面宽度的相对值，如：20%表示表格宽度为整个页面宽度的20%。
height：设置表格高度，取值方式与width一致。
bgcolor：设置表格背景色。可以是十六进制代码，也可以是英文字母，
bordercolor：设置表格边框颜色。
align：设置表格在水平方向的对齐方式，其值可为left、right、center。
valign：设置表格在垂直方向的对齐方式，其值可为top、middle、baseline。

<tr>常用属性
bordercolor：设置该行的外边框颜色。
bgcolor：设置该行单元格的背景颜色。
height：设置该行的高度。
align：设置该行各单元格的内容在水平方向的对齐方式，其值可为left、right、center。
valin：设置该行各单元格的内容在垂直方向的对齐方式，其值可为top、middle、bottom。

<td>常用属性
colspan：设置单元格所占的列数，默认值为1。
rowspan：设置单元格所占的行数，默认值为1。
background：设置单元格背景图像。
width：设置单元格宽度。

<th>
<th></th>定义的列标题的文字以粗体方式显示，其属性使用与<td>一致，在表格的定义语法中，也可以不使用<th>定义标题单元格。

代码示例：

<html>
     <head>
        <title>创建表格</title>
     </head>
     <body>
         <table border="1" width="80%" bordercolor="blue" cellpadding="2">
            <tr height ="50" valign="middle">
            <th width="33%" colspan="2">Java方向</th>
            <th width="36%" colspan="2">软件测试</th>
            <th width="36%" colspan="2">.NET方向</th>
            </tr>
            <tr align="center">
            <td width="16%">Java程序设计</td>
            <td width="16%">数据库技术</td>
            <td width="17%">Java程序设计</td>
            <td width="17%">数据库技术</td>
            <td width="17%">C#程序设计</td>
            <td width="17%">数据库技术</td>
           </tr>
            <tr align="center">
            <td width="16%">JSP程序设计</td>
            <td width="16%">JavaEE技术</td> 
            <td width="17%">JSP程序设计</td>
            <td width="17%">软件测试理论</td>
            <td width="17%">ASP程序设计</td>
            <td width="17%">ADO.NET</td>
           </tr>  
        </table>
    </body>
</html>

显示效果：

Java方向		软件测试		.NET方向
Java程序设计	数据库技术	Java程序设计	数据库技术	C#程序设计	数据库技术
JSP程序设计	JavaEE技术	JSP程序设计	软件测试理论	ASP程序设计	ADO.NET

表单

表单在网页中用来供用户填写信息，当用户填写完信息执行提交操作后，表单的内容就从客户端传送到服务器上，经服务器处理后，将所需信息传回客户端，使网页具有交互功能。

表单标签

表单语法结构如下：

<form action=“url” method=“get|post” name=“value” enctype=“编码方式" onsubmit ="function" onreset="function" target="window"></form>

action属性

设置服务器上用来处理表单数据的处理程序地址，处理程序可以是JSP程序、CGI（Common Gateway Interface，通用网关接口）程序、ASP.NET程序等，该属性值可以是URL地址也可以是电子邮件地址。
例如：action=”http://localhost/sample/ShopCart.jsp”，表示当用户提交表单后，将调用服务器上的JSP页面ShopCart.jsp来处理用户的输入。
另外，采用电子邮件地址的格式是：action=”mailto:接收用户输入信息的邮件地址”。
例如：action=”mailto:youremail@zzuli.edu.cn”，表示把用户的输入信息发送到电子邮件地址youremail@zzuli.edu.cn。

method属性
设置处理程序从表单中获得信息的方式，取值可为get或post。
get方法将表单中的输入信息作为查询字符串附加在action指定的地址后（中间用“？”隔开）传送到服务器。查询字符串使用key=”value”的形式定义，如果有多个域，中间用“&”隔开，如：http://localhost/sample/ShopCart.jsp？flowerid=”0169”&count=”16”，问号后面的即为查询字符串。get方法在浏览器的地址栏中以明文形式显示表单中各个表单域的值，对数据的长度有限制。

post方法将表单中用户输入的数据进行包装，按照HTTP传输协议中的post方式传送到服务器，且对数据的长度基本没有限制，目前大都采用此方式。

name属性：设置表单的名字。
onsubmit、onreset属性：设置在单击了“submit”或“reset”按钮后要执行的脚本函数名。
target属性：设置显示表单内容的窗口名。
enctype属性：设置表单信息提交的编码方式。如下取值：

Text/plain：以纯文本的形式传送
Application/x-www-form-urlencoded：默认的编码方式
Multipart/form-data：MIME编码，上传文件的表单必须选择该项

表单域

单行输入域

<input>

该标签用来定义单行输入域，用户可在其中输入单行信息。
结构如下：

主要属性如下：
type属性：设置输入域的数据类型，取值如下：
type=text：表示输入单行文本。
maxlength=m：type取值text时有效，表示最大输入字符的个数m
typet=textarea：表示输入多行文本。
size=m：type取值texyarea时有效，表示在输入多行文本时最大输入字符个数m。
type=password:表示输入数据为密码，显示时用*表示。
type＝checkbox：表示复选框。
type＝radio：表示单选框。
checked：在type取值radio/checkbox时有效，表示该项被默认选中
type＝submit：表示提交按钮，数据将被送到服务器。
type＝reset：表示清除表单数据，以便重新输入。
type＝file：表示插入一个文件。
type＝image：表示插入一个图像。
src=文件名：针对type=image情况，指定图像文件名。
type＝button：表示普通按钮。
type＝hidden：表示隐藏按钮，用户不能在其中输入，用来预设要传送的信息。
name属性：设置输入域的名字。
value属性：设置输入域的默认值。
align属性：设置输入域位置，可取值left（靠左）、right（靠右）、middle（居中）、top（靠上）、bottom（靠底）。
onclick属性：设置按下按钮后调用指定的脚本函数名（子程序）。
onselect属性：设置当前项被选择时调用指定的子程序。

多行输入域

<textarea></textarea>

该标签对用来定义多行文本输入域，主要属性如下：
name属性：设置输入域名字。
rows属性：设置输入域的行数。
cols属性：设置输入域的列数。
wrap属性：设置是否自动换行，属性值可取off（不自动换行）、hard（或physical，自动硬回车换行，换行标记一同被传送到服务器）、soft（或virtual，自动软回车换行，换行标记不会被传送到服务器）。

选择域

<select></select>

标签对用来建立一个下拉列表，<option>标签用来定义下拉列表中的一个选项，用户可以从列表中选择一项或多项。
<select></select>主要属性：
name属性：设置下拉列表的名字。
size属性：设置下拉列表中选项个数，默认值为1。
multiple属性：表示下拉列表支持多选。
<option>主要属性：
selected属性：表示当前选项被默认选中。
value：设置当前选项的值，在该项被选中之后，该项的值将被送到服务器。

表单按钮

<button></button>

标签对用于定义提交表单内容给服务器的按钮，主要属性有type和accesskey。
type属性：设置按钮类型，属性值可取button（一般按钮）、reset（复位按钮）、submit（提交按钮）。他们与<input>中同名的属性具有相同的功能。
accesskey属性：设置按钮热键，即按下Alt键的同时按下该属性值所对应得键便可以快速定位到该按钮。

表单代码示例

<html>
    <head>
        <meta charset="UTF-8">
        <title>title</title>
    </head>
    <body>
          <form name="form1" method="post" action ="register.jsp">
             <h1 align ="left" >注册</h1>
             <p>用户名：<input type ="text" name="username"></p>
             <p>密  码：<input type ="password"name="userpwd1"></p>
             <p>确认密码：<input type ="password"name="userpwd2"></p>
             <p>性  别：<input type ="radio" name ="usersex" value="男">男  
             <input type ="radio" name ="usersex" value="女">女</p>
              <p>证件类型：<select name="select">
                            <option value="xsz">学生证
                            <option value="sfz" selected>身份证
                            <option value="jgz">军官证    
                          </select></p>
              <p>证件号码：<input type ="text" name="userid"></p>
             <p><input type ="submit" name="submit" value ="提交">
          <input type ="reset" name="reset" value ="取消"></p>
        </form>
    </body>
</html>