HTML的一些标签以及表单

HTML的一些标签以及表单

图片标签

属性	说明
src	图像的路径
alt	图像不能显示时的替换文字
title	鼠标悬停时显示的内容
border	设置图像边框的宽度
align	对齐方式

相对路径

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级 <img src="baidu.gif"/>
下一级路径	/	图像文件位于HTML文件下一级 <img src="data:images/baidu.gif"/>
上一级路径	…/	图像文件位于HTML文件上一级 <img src="../baidu.gif"/>

超链接

属性	作用
target	用于指定链接页面的打开方式，-self是默认值，_blank为在新窗口的打开方式

锚点链接

通过给内容中特定位置加id值来标记位置，然后用<a href="#id名">来实现位置的跳转

表格的基本语法

属性	说明
<table> </table>	定义表格的标签
<tr> </tr>	定义表格的行，嵌套在table标签中
<td> </td>	定义表格的单元格，嵌套在tr标签中
<th> </th>	定义表头部分，可以使单元格里的内容加粗居中
cellspacing	单元格之间的空白位置的大小，就是表格线的宽度
cellpadding	单元边沿与其内容之间的空白，就是内容与表格线的距离

 <table border="1" cellspacing="0" cellpadding="4">
     <tr> <th>球员</th> <th>薪资</th> <th>年龄</th> </tr>
     <tr> <td>salah</td> <td>2亿欧元</td> <td>28岁</td> </tr>
     <tr> <td>salah</td> <td>2亿欧元</td> <td>28岁</td> </tr>
 </table>

合并单元格

• 跨行合并：rowspan="合并单元格的个数"
• 跨列合并：colspan="合并单元格的个数"

三部曲

1. 先确定跨行还是跨列
2. 把合并代码写在目标单元格内（跨行就写在最上侧的单元格，跨列就写在最左侧的单元格）
3. 删除多余的单元格

列表

属性	说明
ul元素	无序列表，没有层级，都是并列的，列表项前会有点
li	嵌套在ul，ol里面的列表项
ol元素	有序列表，会有顺序，1，2，3，
start	加在ol里面，可以设置编号的起始值<ol start="2">
dl元素	自定义列表，列表项前什么都没有，dt，dd

表单

form：用来定义表单域，就是创建表单

 <form action="网址" method="提交方式" name ="表单名称">

input 标签中的type属性

1. 单行文本输入框<input type="text"/>
2. 密码输入框<input type="password"/>,输入的内容用圆点显示
3. 单选按钮<input type="radio"/>，几个选项添加相同name值后，可以单选（小圆圈）
4. 复选框<input type="checkbox"/>常用于多选（小正方形）
5. 普通按钮<input type="button"/>
6. 提交按钮<input type="submit"/>
7. 重置按钮<input type="reset"/>

input 中的其他标签

属性	说明
value	规定input控件的默认文本值
maxlength	规定输入字段中的最大长度
checked	首次加载就被选中，就是默认选中

textarea元素：创建多行文本框

<textarea cols="每行中的字符数" rows="显示的行数"></textarea>

select元素：创建下拉菜单

<select>
    <option>选项1</option>
    <option>选项2</option>
    <opyion>选项3</opyion>
    ...
</select>

在option中可以添加selected="selected"来设置默认选项

---