HTML网页中的链接＋列表＋表单的属性

图像标签

在HTML中，用<img>标签在网页中添加图像，图像以嵌入的方式添加到网页中，图像格式为：

        <img src="图像文件名”alt="代替文字”/>

图像标签的常用属性

属性	说明
src	指定图像源，即图像的URL路径
alt	如果图像无法显示，在图像位置代替图像的说明文字
title	为浏览者提供额外的提示或帮助信息，方便用户使用
width	指定图像的显示宽度（像素数或百分数），通常设为图像的真实大小以免失真。若需要改变图像大小，最好事先使用图像编辑工具进行修改。百分数是指相对于当前浏览器窗口的百分比
height	指定图像的显示高度（像素数或百分数）
border	指定图像的边框大小，用数字表示，默认单位为像素，默认情况下图片没有边框，即border=0
hspace	设定图片左侧和右侧的空白像素数（水平边距）
vspace	设定图片顶部和底部的空白像素数（垂直边距）
align	指定图像的对齐方式，设定图像在水平（环绕方式)或垂直方向（对齐方式）的位置，包括left（图像居左，文本在图像的右边)、right(图像居右，文本在图像的左边），top(文本与图像在顶部对齐）、middle（文本与图像在中央对齐)或bottom(文本与图像在底部对齐）

超链接

        在HTML文档中，使用<a>标签指引页面中理解的目标点，让设计者创建指向目标的链接。在连接的属性中，代码的写法如下：

<a href="ur1"title="指向链接时显示的文字"target="窗口名称'>热文本</a>

在同一网站的不同页面中使用超链接

1.链接到同一网页格式为：

<a href="目标文件名.html>热点文本</a> 

2.链接到下一级目录中的网页文件格式为：

 <a href="子目录名/目标文件名.html>热点文本</a> 

 3.链接到上一级目录中的网页文件格式为：

 <a href="../目标文件名.html>热点文本</a> 

"../"表示退到上一级目录，然后再进入目标文件是在的目录 

例图 

书签链接 

 <a name="记号名”>显示在页面的文本</a>

列表 

无序列表

HTML无序列表标签用于创建一个无序的列表。它使用<ul>标签将列表包裹起来，然后使用<li>标签创建每一个列表项。

<ul>

<li>...<li>

      ...

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>
 

HTML无序列表使用<ul>标签来表示，其中每一项使用<li>标签来表示。HTML提供了多种无序列表符号供选择，可以使用type属性来指定使用的符号。

以下是常用的无序列表符号及其对应的type属性值：

• 实心圆点：type="disc"
• 空心圆点：type="circle"
• 方形：type="square"
• 阿拉伯数字：type="1"
• 小写字母：type="a"
• 大写字母：type="A"
• 罗马数字：type="i"（小写罗马数字）、type="I"（大写罗马数字）

例如，使用实心圆点作为无序列表符号的代码示例：

<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

输出效果为：

• 第一项
• 第二项
• 第三项

 有序列表

HTML中的有序列表使用<ol> </ol>标签来定义，其中<li> </li>标签用于定义列表项。有序列表会自动为每个列表项添加一个自动递增的编号。

<ol>

<li>...<li>

      ...

以下是一个示例的HTML代码：

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

输出结果为：

1. 列表项1
2. 列表项2
3. 列表项3

 表单

表单标签

 <from>标签用于创建供用用户输入的HTML表单，<from>...</from>表示一个表单

<from name="表单名"action="URL"method="get/post”>

name属性:表单的名字，在网页在用于唯一识别一个表单

action属性：表单处理的方式，往往是E-mail地址或网址

method属性;表单数据的传送方向，是获得GET表单还是送出POST表单

表单元素

表单元素	功能
input	用于创建输入字段，如文本框、密码框、单选按钮、复选框等
option	用于定义<select>元素中的选项
label	用于为表单元素定义标签
output	用于显示计算结果
select	用于创建下拉列表
textarea	用于创建多行文本框

<input>元素

<input>元素基本语法格式为：

<input type =“表项类型” name="表项名" value="默认值” size="x" maxlength="y"/> 

HTML的<input>元素用于创建可与用户进行交互的表单字段。

<input>元素可以用于创建多种不同类型的输入字段，例如文本输入字段、密码输入字段、单选按钮、复选框、日期选择器等。

<input>元素的常见属性有：

• type：指定输入字段的类型，可选值有text、password、radio、checkbox、date等。
• name：指定输入字段的名称，用于在表单提交时标识该字段。
• value：指定输入字段的默认值。
• placeholder：指定输入字段的占位符文本，显示在输入字段为空时。
• required：指定输入字段是否为必填字段。
• readonly：指定输入字段是否为只读字段。
• disabled：指定输入字段是否禁用。

示例：

<input type="text" name="username" placeholder="请输入用户名" required>
<input type="password" name="password" placeholder="请输入密码" required>
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
<input type="checkbox" name="hobbies" value="reading">阅读
<input type="checkbox" name="hobbies" value="music">音乐
<input type="date" name="birthday">

上述示例代码创建了一个表单，包含了一个文本输入字段、一个密码输入字段、两个单选按钮、两个复选框和一个日期选择器。在表单提交时，通过name属性标识各个字段，并且可以设置其他属性来控制字段的样式和行为。

属性值	说明	属性值	说明
text	文本库	button	标准按钮
password	密码框	submit	提交按钮
file	文件框	reset	重置按钮
checkbox	复选框	image	图像域
radio	单选按钮

列如：

        <input type=”text" name="文本框名">

        <input type=”password" name="文本框名">

        <input type=”submit" value="按钮名"> 

        <input type=”reset" value="按钮名"> 

        <input type=”button" value="按钮名"> 

<input type=”checkbox" name="复选框名" value="提交值"checked="checked"> 

<input type=”radio" name="单选按钮名" value="提交值" checked="checked"> 

<select>元素

在HTML中，<select>元素用于创建下拉列表框。下拉列表框通常用于用户选择一个或多个选项。

<select>元素有以下属性：

• name：指定下拉列表框的名称
• id：指定下拉列表框的唯一标识符
• multiple：指定是否允许多选，默认为单选
• size：指定下拉列表框可见的行数

<selec>t元素包含一个或多个<option>元素作为选项。每个<option>元素可以有以下属性：

• value：指定选项的值
• selected：指定默认选中的选项

以下是一个示例：

<select name="mySelect" id="mySelect" multiple size="3">
  <option value="option1">选项1</option>
  <option value="option2" selected>选项2</option>
  <option value="option3">选项3</option>
</select>

在上面的示例中，创建了一个名称为"mySelect"的下拉列表框，允许多选，可见的行数为3。选项2被默认选中。

注：

        表单分组name的值需要相同。