首页 > 代码库 > （二）html常用标签
（二）html常用标签
1、图片标签 <img>
<img src="http://www.mamicode.com/地址信息" alt="图片名称（当图像不能显示时应显示出来的文本）"/>
2、标题标签 <h>
<h1-6> 1-6字号逐渐变小
3、段落 <p>
4、预文本标签 <pre>
可以将文本完全按照源文件的格式呈现
5、超链接标签 <a>
<a href="http://www.mamicode.com/具体的网址">按钮</a>
6、锚点（置顶功能） <a> （缺点：每次都要刷新页面）
①创建锚点（打个桩）
<a href=""name=”zhuang”>打桩</a>
②指向锚点（点击）
<a href="http://www.mamicode.com/#zhuang" >我是回到顶部</a>
7、盒模型 <div>
<div style=”border:1px solid red;height:2px”></div>
8、跨越多个字符 <span>
<p>森海<span style="color: red">赛尔</span>金卡是</p> （赛尔会变为红色，其余字不会）
9、<strong> 加粗字体
10、特殊字符
<br>换行 < >空格 <hr>分隔线 <sup>上标 <sub>下标 <del>删除 ©版权符号 <ins>下划线
11、无序列表（常用于导航）
<ul> <li*3> （3个清单）
12、有序列表
<ol> <li*3>
13、定义列表
<dl>
<dt>、<dd> （同级）
14、框架结构 （常用于财务系统） <iframe>
<iframe src="" frameborder="1"></iframe>
15、内联框架（需点击相应的链接，内联框架才能显示相应的内容）
①给内框命名
<iframe src="" frameborder="1"name=”my”style=”width:500px;height:100px”></iframe>
②点击后，内框跳转到相应内容，用<a>
<a href="http://www.mamicode.com/内容的地址"target=”my”>我可以显示</a>
16、表格 <table>
<table border="1"align="center"（表格位置居中） style=”border-collapse:collapse”（双边框变为单边框）cellpadding（单元格内边距变化）="70px"cellspacing（内外边框距离变化）="100px">
<caption>F33名单</caption> （标题）
<thead>（语义化标签）
<tr>（行）
<th>姓名</th>（表头）
<th>英语</th>
<th>数学</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">1-1</td> （同列合并）
<!--<td>1-2</td>--> （占谁的位置删去谁）
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td rowspan="2">2-3</td> （同行合并）
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<!--<td>3-3</td>-->
</tr>
</tbody>
<tfoot>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
</tr>
</tfoot>
</table>
17、 表单 （form表单：为前后台交互部分，可提供数据，一个页面一般只有一个表单）
（一）Input输入类型
1、HTML适用
1) text：文本
2) password：密码
3) submit：自带提交功能的按钮
4) button：不自带提交功能的按钮
5) reset：重置
6) radio：单选框
7) checkbox：多选框
8) image：图片
9) hidden：隐藏
10) color：颜色
2、HTML5适用
1) file：文件
2) date：日期
3) date time：时间
4) email：邮件
5) number：数字
6) search：搜索
7) month：月
8) week；周
9) time：时间
10) url：地址
（二）Input属性 （分为名和值）
1、autofocus 自动聚焦 （自动出现光标）
<input type="text"autofocus/>
2、readonly 只读，不能输字
<input type="text"readonly/>
3、disabled 带底纹，不能输入字
<input type="text"disabled/>
4、placeholder （按照指令做）
<input type="text"placeholder="用户名"/>
（三）文本域（textarea）（留言板、投诉）
<textarea name="" id=""class”” cols="30" rows="10"></textarea>
命名方式：
Name:姓名 （名称相同）与后台交互时使用
Id #（名称不能相同）具有唯一性
Class .（名称相同） HTML、CSS前台页面部分
（四）单选框
1、 <input type="radio"name="sex"/>男
<input type="radio"name="sex"/>女
Name必须相同，才可单选。
2、单选框默认选中（男）
<input type="radio"name="sex"checked/>男
3、多选框默认选中（男）
<input type="checkbox"name="sex"checked/>女
（五）多项选择，下拉菜单 <select>
1、<select name="" id="">
<option value="">美国</option>
<option value="">日本</option>
<option value="">中国</option>
<option value="">印度</option>
</select>
2、4个选项都显示出来
<select name="" id=""size="4">
<option value="">美国</option>
<option value="">日本</option>
<option value="">中国</option>
<option value="">印度</option>
</select>
3、多选
<select name="" id=""multiple>
<option value="">美国</option>
<option value="">日本</option>
<option value="">中国</option>
<option value="">印度</option>
</select>
4、默认选中
<select name="" id="">
<option value="">美国</option>
<option value="">日本</option>
<option value="">中国</option>
<option value=""selected>印度</option>
</select>
（六）定义域 （fieldset）用于管理系统
<fieldset style="width:30px">
<input type="text"/>
<legend>用户信息</legend>
</fieldset>
（七）form
<form action="#"method="get/post">
<input type="text"placeholder="用户名"name="user"/>
<input type="password"name="pass"/>
<input type="submit"/>
</form>
注：action：表单处理程序的地址。
Method：提交方式包括
Get：会在地址栏显示用户信息（不安全，速度快，用于查询）
Post：不会再地址栏显示用户信息（安全，速度慢，发送修改信息）
（八）label （点文字也可以选中）
属性for=相关标记的ID
<input type="radio"id="man"name="sex"/>
<label for="man">男</label>
<input type="radio"id="women"name="sex"/>
<label for="women">女</label>
（二）html常用标签