Html常用标签
1.排版标签
<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6><h7></h7> 标题标签,从左到右依次变小 <p> </p>段落标签 <hr> 水平线标签 <br/> 换行标签 <div></div> 没有语义,布局标签 <span> </span>没有语义,布局标签 <strong> </strong>文字加粗 <em> </em>文字倾斜 <del> </del>文字加删除线 <ins> </ins>文字加下划线
<img src=" " alt=" " title=" " width=" " height=" "> 图片标签
src |
图片的url地址 |
alt | 图片不存在时显示的文本信息 |
title | 鼠标悬停在图片上时显示的文字 |
width | 图片的宽度 |
height | 图片的高度 |
<base target="_blank"/> 所有链接标签,设置为在新的窗口打开链接,一般设置在<head></head>中,全局使用。
<a href=" " target=" ">文本或者图片</a> 链接标签
href | 目标的url地址 |
target | 链接的打开方式,分为self和blank,self在自己的窗口打开,默认为self,blank是在新的窗口打开链接 |
2.列表标签
无序列表
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ...... </ul>
有序列表
<ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ...... </ol>
自定义列表
定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:
<dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> ... <dt>名词2</dt> <dd>名词2解释1</dd> <dd>名词2解释2</dd> ... </dl>
3.表单标签
<table width="500" border="1" align="center" cellspacing="0" cellpadding="0"> <caption>个人信息表</caption> <thead> <tr> <th>姓名</th> <th>性别</th> <th>电话</th> </tr> </thead> <tbody> <tr> <td>小王</td> <td>女</td> <td>110</td> </tr> <tr> <td>小明</td> <td>男</td> <td>120</td> </tr> </tbody> </table>
<thread> | 表格的头部 |
<tbody> | 表格的主体 |
<caption> | 表格的标题,一般放在<table>标签下面 |
<tr> | 表格的行 |
<th> | 表格的表头 |
<td> | 表格的单元格 |
border | 表示表格的边框 |
align | 表示表格的位置,默认为left |
cellspacing | 表示单元格和单元格之间的间距 |
cellpadding | 表示单元格和单元格中的内容的间距 |
表格跨行合并:rowspan,跨列合并:colspan
<table cellpadding="0" cellspacing="0" border="1" width="400"> <tr> <td colspan="3" align="center">123</td> <!-- <td>123</td> --> <!-- <td>123</td> --> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> </tr> </table>
<table cellpadding="0" cellspacing="0" border="1" width="400"> <tr> <td rowspan="3" align="center">123</td> <td>123</td> <td>123</td> </tr> <tr> <!-- <td>123</td> --> <td>123</td> <td>123</td> </tr> <tr> <!-- <td>123</td> --> <td>123</td> <td>123</td> </tr> </table>
跨行从上往下看,跨列从左往右看。
Input控件
type | text | 单行文本输入框 |
password | 密码输入框 | |
radio | 单选按钮 | |
checkbox | 复选框 | |
button | 普通按钮 | |
submit | 提交按钮 | |
reset | 重置按钮 | |
image | 图像提交按钮 | |
file | 文件上传按钮 | |
name | 控件的名称 | |
value | 默认文本值 | |
size | 在页面显示的宽度 | |
checked | 选择控件默认被选中的项 | |
maxLength | 允许输入的最多字符数 |
Label标签
<label for="male">Male</label> <input type="radio" name="sex" id="male" value="male">
textarea文本域
<textarea cols="每行中的字符数" rows="显示的行数"> 文本内容 </textarea>
下拉菜单
<select> <option selected="selected">选项1</option> <option>选项2</option> <option>选项3</option> ... </select>
在option 中定义selected =" selected "时,当前项即为默认选中项。
表单域
<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件 </form>
action | 向服务器提交表单的url地址 |
method | 向服务器提交表单的方式,一般分为get和post |
name | 表单的名称 |