网页设计中的HTML标签(二)

  • 2019-07-12 14:05:23
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

5. 图像多媒体标签

图像多媒体标签主要用于在网页设计时引入外部多媒体文件,并进行显示。主要包括下面几个标签。   

•<img>:定义图像。   

•<map>:定义图像映射。   

•<area>:定义图像地图内部的区域。   

•<canvas>:定义图形。   

•<figcaption>:定义figure元素的标题。   

•<figure>:定义媒介内容的分组,以及它们的标题。   

•<audio>:定义声音内容。   

•<source>:定义媒介源。   

•<track>:定义用在媒体播放器中的文本轨道。   

•<video>:定义视频。

6. 表格标签

表格标签用来在网站建设时组织和管理数据,主要包括下面几个标签。   

•<table>:定义表格。   •<caption>:定义表格标题。   

•<th>:定义表格中的表头单元格。   

•<tr>:定义表格中的行。   

•<td>:定义表格中的单元。   

•<thead>:定义表格中的表头内容。

•<tbody>:定义表格中的主体内容。   

•<tfoot>:定义表格中的表注内容(脚注)。   

•<col>:定义表格中一个或多个列的属性值。   

•<colgroup>:定义表格中供格式化的列组。

【示例7】新建文档,保存为test6.html。输入下面代码,使用表格结构显示5行3列的数据集。

<html>

<head>

<meta http-equiv="

Content-Type" content="text/html; charset=utf-8" />

<title>示例代码</title>

</head>

<body>

<table summary="ASCII是英文American Standard Code for Information Interchange的缩写。ASCII编码是目前计算机最通用的编码标准。因为计算机只能接收数字信息,ASCII编码将字符转换为数字来表示,以便计算机能够接收和处理。">           

<caption>ASCII字符集(节选)</caption>    

<tr>        

<th>十进制</th>        

<th>十六进制</th>        

<th>字符</th>    

</tr>    

<tr>        

<td>9</td>        

<td>9</td>        

<td>TAB(制表符)</td>    

</tr>    

<tr>        

<td>10</td>        

<td>A</td>        

<td>换行</td>    

</tr>    

<tr>        

<td>13</td>        

<td>D</td>        

<td>回车</td>    

</tr>      

<tr>        

<td>32</td>        

<td>20</td>        

<td>空格</td>    

</tr>

</table>

</body>

</html>

按F12键,在浏览器中预览。

7. 表单标签表单标签主要用来制作交互式表单,主要包括下面几个标签。   

•<form>:定义供用户输入的HTML表单。   

•<input>:定义输入控件。   

•<textarea>:定义多行的文本输入控件。   

•<button>:定义按钮。   

•<select>:定义选择列表(下拉列表)。   

•<optgroup>:定义选择列表中相关选项的组合。   

•<option>:定义选择列表中的选项。   

•<label>:定义input元素的标注。   

•<fieldset>:定义围绕表单中元素的边框。   

•<legend>:定义fieldset元素的标题。   

•<datalist>:定义下拉列表。   

•<keygen>:定义生成密钥。   

•<output>:定义输出的一些类型。

【示例8】新建文档,保存为test7.html。输入下面代码,分别定义单行文本框、多行文本框、复选框、单选按钮、下拉菜单和提交按钮的表单。

<html>

<head>

<meta http-equiv="

Content-Type" content="text/html; charset=utf-8" />

<title>示例代码

</title>

</head>

<body>

<form id="form1" name="form1" method="post" action="">    

<p>单行文本域:<input type="text" name="textfield" id="textfield" /></p>    

<p>密码域:<input type="password" name="passwordfield" id="passwordfield" /></p>

<p>多行文本域:<textarea name="textareafield" id="textareafield"> </textarea></p>    

<p>复选框:复选框1<input name="checkbox1" type="checkbox" value="" />

                     复选框2<input name="checkbox2" type="checkbox" value="" />    

</p>    

<p>单选按钮:        

<input name="radio1" type="radio" value="" />按钮1        

<input name="radio2" type="radio" value="" />按钮2</p>    

<p>下拉菜单:        

<select name="selectlist">            

<option value="1">选项1</option>            

<option value="2">选项2</option>            

<option value="3">选项3</option>        

</select>    

</p>    

<p><input type="submit" name="button"

id="button" value="提交" /></p>

</form>

</body>

</html>            

按F12键,在浏览器中预览。

8. 文档结构块标签

文档结构块标签主要用于在网页设计时定义符合标准化设计需求的文档结构块,主要包括下面几个标签。   

•<div>:定义文档中的分区或节(division/section),节表示内容结构块。   

•<span>:用来组合文档中的行内元素。   

•<header>:定义section或page的页眉。   

•<footer>:定义section或page的页脚。   

•<section>:定义section。   

•<article>:定义文章。   

•<aside>:定义页面内容之外的内容。   

•<details>:定义元素的细节。   

•<dialog>:定义对话框或窗口。   

•<summary>:为<details>元素定义可见的标题。

9. 编程标签

编程标签在网站建设时用于设计复杂的参数配置、程序设计或者样式代码,主要包括下面几个标签。   

•<style>:定义文档的样式信息。   

•<script>:定义客户端脚本。   

•<noscript>:定义针对不支持客户端脚本的用户的替代内容。   

•<embed>:为外部应用程序(非HTML)定义容器。   

•<object>:定义嵌入的对象。   

•<param>:定义对象的参数。    

当前文章标题:网页设计中的HTML标签(二)

当前URL:http://www.lyjtt.cn/news/wzzz/3051.html

上一篇:网页设计中的HTML标签(一)

下一篇:网页设计中的HTML属性

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)