首页 > 代码库 > body内部标签总结
body内部标签总结
body内部常用标签
- 图标, > <
- p标签,段落
- br,换行
======== 小总结 =====
所有标签分为:
块级标签: div(白板),h系列(加大加粗),p标签(段落和段落之间有间距)
行内标签: span(白板)
标签之间可以嵌套
标签存在的意义,css操作,js操作
ps:chorme审查元素的使用
- 定位
- 查看样式
- input系列 + form标签
input type="text" - name属性,value="http://www.mamicode.com/test"
input type="password" - name属性,value="http://www.mamicode.com/test"
input type="submit" - value="http://www.mamicode.com/提交" 提交按钮,表单
input type="button" - value="http://www.mamicode.com/登录" 按钮
input type="radio" - 单选框 value,checked="checked",name属性(name相同则互斥)
input type="checkbox" - 复选框 value, checked="checked",name属性(批量获取数据)
input type="file" - 依赖form表单的一个属性 enctype="multipart/form-data"
input type="rest" - 重置
<textarea >默认值</textarea> - name属性
select标签 - name,内部option value, 提交到后台,size,multiple
<select name="city" size="3" multiple="multiple">
<optgroup label="陕西省">
<option value="http://www.mamicode.com/1" selected="selected">西安</option>
<option value="http://www.mamicode.com/2">铜川</option>
</optgroup>
</select>
- a标签
- 跳转
<a href="http://www.baidu.com" target="_blank">百度</a>
- 锚 href=http://www.mamicode.com/‘#某个标签的ID‘ 标签的ID不允许重复
<a href="http://www.mamicode.com/#i1">第一章</a>
<a href="http://www.mamicode.com/#i2">第二章</a>
<a href="http://www.mamicode.com/#i3">第三章</a>
<a href="http://www.mamicode.com/#i4">第四章</a>
<div id="i1" style="height:600px;">第一张内容</div>
<div id="i2" style="height:600px;">第二张内容</div>
<div id="i3" style="height:600px;">第三张内容</div>
<div id="i4" style="height:600px;">第四张内容</div>
- img
src
alt
title
<a href="http://www.baidu.com"> <img src="http://www.mamicode.com/test.jpg" style="height:500px;width:500px;" alt="美女" title="大美女"> </a>
- 列表
ul
li
ol
li
dl
dt
dd
<ul> <li>1</li> <li>2</li> <li>3</li> </ul> <ol> <li>1</li> <li>2</li> <li>3</li> </ol> <dl> <dt>标题</dt> <dd>列表1</dd> <dd>列表2</dd> </dl>
- 表格
table
thead
tr
th
tbody
tr
td
colspan = ‘‘ 列合并
rowspan = ‘‘ 行合并
<table border="1"> <thead> <tr> <th>表头1</th> <th>表头2</th> </tr> </thead> <tbody> <tr> <td>表体1</td> <td>表体2</td> </tr> </tbody> </table>
- label
用于点击文件,使得关联的标签获取光标
<label for="username">用户名:</label>
<input id="username" type="text" name="user" />
- fieldset
legend
<fieldset> <legend>登录</legend> <label for="username">用户名:</label> <input id="username" type="text" name="user" /> <br/> <label for="pwd">密码:</label> <input id="pwd" type="password" name="user" /> </fieldset>
body内部标签总结