2.1标签
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<input> 标签
• 用于搜集用户信息。根据不同的 type 属性 值，输入字段拥有很多种形式。输入字段 可以是文本字段、复选框、掩码后的文本 控件、单选按钮、按钮等等。 • 其中：type 属性规定 input 元素的类型。 name 属性规定 input 元素的名称。name 属性用于对提交到服务器后的表单数据进 行标识，只有设置了 name 属性的表单元 素才能在提交表单时传递它们的值。
• Method：表示了发送表单信息的方式。 method有两个值：get和post。get的方式 是将表单控件的name/value信息经过编码 之后，通过URL发送(你可以在地址栏里看 到)。而post则将表单的内容通过http发送， 你在地址栏看不到表单的提交信息。那什 么时候用get，什么时候用post呢？一般是 这样来判断的，如果只是为取得和显示数 据，用get；一旦涉及数据的保存和更新， 那么建议用post。
下拉框(select)
• 下拉框(Select)既可以用做单选，也可以用 做复选。单选例句如下： • <select name="fruit" > • <option value="apple">苹果 • <option value="orange">桔子 • <option value="mango">芒果 • </select>
• (2)color属性 color属性用于控制<font>内的文字颜色，默认字体的颜 色是黑色。可以使用Color属性来改变字体的颜色，其 值可以是颜色的名称或是一组十六进制的数值。例如： <font color=“red”>杭州世界动漫节</font>
<font color=“#FF0000”>杭州世界动漫节</font>
• 当我们第一次启动Dreamweaver 时会自动打开一个空 文档，点击按钮切换到“显示代码视图”就可以看到一
个网页的HTML语言结构。如下图：
网页的HTML结构
网页的标题 头部 网页的代码结构
体 部
<!--...--> 标签
• 注释标签用来在源文档中插入注释。注释会被浏 览器忽略。您可使用注释对您的代码进行解释， 这样做有助于您在以后的时间对代码的编辑。 • 您也可以在注释内容存储针对程序所定制的信息。 在这种情况下，这些信息对用户是不可见的，但 是对程序来说是可用的。一个好的习惯是把注释 或样式元素放入注释文本中，这样就可避免不支 持脚本或样式的老浏览器把它们显示为纯文本。
• （3）face属性 用来指定字体的样式。中文默认字体是“宋体”，英文字体 是“Time New Roman”，使用face属性设置字体时，可以使用 多个字体名称作为face的属性值。当浏览器显示含有多个字体 的网页时，浏览器将逐个搜索系统字体以得到匹配。例如：
<font face=“黑体，宋体” zise=“5” color=“red”>杭州世界 动漫节</font>
• 表格的嵌套就是在某一单元格内<td>……</td>标记中， 添加表格<table>……</table>标记。效果如图所示：
<th>…</th>
设置表格头:通常是黑体居中文字
当在属性面板中选中了“标题”后面的复选框，当前 单元格的<td>……</td>标记将转变为<th>……</th>标 记（表头标记）。显示效果为单元格的内容居中对齐， 并显示为黑体加粗。效果如图：
6. 表格的基本语法
一个表格的所有内容都在<table >……</table>标记中。 一个<table >……</table>标记中，表格的行数由<tr>……</tr>标记的个数 确定，表格的列数由在一个<tr>……</tr>标记中包含的<td>……</td> 标记的个数确定。单元格的内容由<td>……</td>标记定义。 <table width="75%" border="1" >标记定义表格开始 <tr>标记定义表格第一行 <td> </td>标记定义该行第一个单元格的内容 <td> </td>标记定义该行第二个单元格的内容 <td> </td>标记定义该行第三个单元格的内容 </tr>标记结束表格第一行 <tr>标记定义表格下一行 <td> </td>标记定义该行第一个单元格的内容 <td> </td>标记定义该行第二个单元格的内容 <td> </td>标记定义该行第三个单元格的内容 </tr>标记结束表格下一行 </table>标记结束表格定义
Hale Waihona Puke Baidu
平行线 地址信息
3.使用超链接<a href=“ “>..</a>
链接接到站点中的其他网页 网页在浏览器中打开后，网页中的超文本链接通常 显示为蓝颜色，带下划线的文本。下图是一个超链接 的示例网页。
超链接代码 ， 设置格式为： <A href=”目标页面文件名 >描述文字</A>
• 链接到互联网中的某一资源 超链接不仅可以链接到指定的站点内的资源，也可以 链接到互联网中的任何站点。
4 在网页中添加图像
• 图像的格式
– 网页中加入图片会使页面更加美观、生动、有吸引力。 网页中可以添加的图片文件类型是扩展名为jpg、gif和 png的图片文件。
•
图像的位置 – 网页中插入的图片即可以是站点中的图片文件， 也可以是互联网中任何网站中的图片文件 。
•
添加图像的标记
<img>标记可以实现在网页中加入图片。使用<img>标记 加入图片时必须指定<img>标记的src属性值来确定图像文 件的位置。在网页“显示代码视图”中的代码如下图：
单行文本输入框(input type="text")
• 单行文本输入框允许用户输入一些简短的 单行信息，比如用户姓名。 • 例句如下： • <input type="text" name="yourname">
复选框(input type="checkbox") • 复选框允许用户在一组选项里，选择多个。 示例代码： • <input type="checkbox" name="fruit" value ="apple" >苹果<br> • <input type="checkbox" name="fruit" value ="orange">桔子<br> • <input type="checkbox" name="fruit" value ="mango">芒果<br>
<!DOCTYPE> 标签
• <!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 • 该标签可声明三种 DTD 类型，分别表示严格版本、过渡 版本以及基于框架的 HTML 文档。 • 以下面这个 <!DOCTYPE> 标签为例： • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> 在上面的声明中，声明了文档的根元素是 html， 它在公共标识符被定义为 "-//W3C//DTD XHTML 1.0 Strict//EN" 的 DTD 中进行了定义。浏览器将明白如何寻 找匹配此公共标识符的 DTD。如果找不到，浏览器将使 用公共标识符后面的 URL 作为寻找 DTD 的位置。
单选框(input type="radio")
• 使用单选框，让用户在一组选项里只能选 择一个。示例代码： • <input type="radio" name="fruit" value = "Apple">苹果<br> • <input type="radio" name="fruit" value = "Orange">桔子<br> • <input type="radio" name="fruit" value = "Mango">芒果<br>
HTML表单(Form)常用控件(Controls)
• HTML表单(Form)常用控件有：
– input type="text" 单行文本输入框 – input type="submit" 将表单(Form)里的信息提 交给表单里action所指向的文件 – input type="checkbox" 复选框 – input type="radio" 单选框 – select 下拉框 – textArea 多行文本输入框 – input type="password" 密码输入框(输入的文 字用*表示)
插入图像的 宽度像素值
插入图像的高 度像素值
5 图片超链接
• 很多网页中的图片不仅仅是一张图片，当鼠标指针在 图片上方悬停时会变成手型，点击图片后会打开其他 的网页或资源。实现这样效果的图片就是给插入的图 片添加超链接。
图2.22
图2.23
设置图片超链接的源代码为：
图片所设置的超链接 插入的图片文件
• 如果要变成复选，加muiltiple即可。用户 用Ctrl来实现多选。例句： • <select name="fruit" multiple> • 用户还可以用size属性来改变下拉框 (Select)的大小。
多行输入框(textarea) • 多行输入框(textarea)主要用于输入较长的 文本信息。例句如下： • <textarea name="yoursuggest" cols ="50" rows = "3"></textarea> • 其中cols表示textarea的宽度，rows表示 textarea的高度。
7.表单
• <form> 标签用于为用户输入创建 HTML 表 单。表单(Form)是HTML的一个重要部分， 主要用于采集和提交用户输入的信息。 • 表单能够包含 input 元素，比如文本字段、 复选框、单选框、提交按钮等等。 • 表单还可以包含 menus、textarea、 fieldset、legend和 label 元素。 • 表单用于向服务器传输数据。 • 看一个实例：
<meta> 标签
• <meta>标签位于文档的头部，可提供有关 页面的元信息（meta-information），比如 针对搜索引擎和更新频度的描述和关键词。
1.文本段落标记<p>…</p>
2.字体格式：<font>…</font>
• <font>…</font>标记有3个属性分别用于控制字体的颜色、 样式和大小。 （1）size属性：其值越大显示的文字越大，字号大小有7个 等级，默认为3。可以直接使用字号设置字体的大小，也 可以使用+1、-2等数值来指定字号的大小，这表示它比默 认的3号字体的大1号和小2号，即4号和1号字。例如： <font size=“+2”>杭州世界动漫节</font>
HTML标签
1.什么是HTML（HyperText Markup Language）语言 ？
• HTML（HyperText Markup Language）语言是一种描 述文本的标记性语言。标记是一些字母或单词，并被放 在<> 中，格式为： <标记>显示内容</标记> 通过浏览器解释标记的含义，显示文件的内容。
创建热区
<map name="Map"> <area shape="rect" coords="45,18,126,89" href="left.htm" target="_self"> <area shape="rect" coords="52,149,139,216" href="inputtext.asp" target="_self"> </map>
HTML表单(Form) 的三个要点：
• 表单控件(Form Controls) ：通过HTML表 单的各种控件，用户可以输入文字信息， 或者从选项中选择，以及做提交的操作。 比如上面的例句里，input type= "text"就是 一个表单控件，表示一个单行输入框。 • Action ：用户填入表单的信息总是需要程 序来进行处理，表单里的action就指明了处 理表单信息的文件。比如****。