时间戳

首页 > 技术文章 > 高级标签

高级标签

sylz 2016-07-12 12:43 原文

1、列表标签

　　自定义列表标签

<dl>

　　<dt>标题1</dt>

　　<dd>列表项1</dd>

　　<dd>列表项2</dd>

　　<dd>列表项3</dd>

 

　　<dt>标题2</dt>

　　<dd>列表项1</dd>

　　<dd>列表项2</dd>

　　<dd>列表项3</dd>

　　<dd>列表项4</dd>

</dl>

这个用的还是比较广泛的。比如京东的页面，手机通讯就好比标题1，之后的手机  对讲机   以旧换新  手机维修就是列表项。

2、表格标签（QQ的注册页面竟然是用表格做的）

　　<table>

　　　　<thead>

　　　　　　<tr>　　

　　　　　　　　<th></th>

　　　　　　</tr>

　　　　</thead>

　　　　<tbody>

　　　　　　<tr>

　　　　　　　　<td></td>

　　　　　　</tr>

　　　　</tbody>

　　</table>

　　列加上修饰属性border:1px solid red;会出现一个双层红色边框，怎样将双层变单层呢？在table中的css修饰属性中加上border-collapse:collapse;属性即可。只要下边的边框border-bottom。

3、单元格的合并

　　rowspan="2";一个单元格占用2行显示；

　　colspan="2";将一行中的一个单元格占用两个列显示；

4、节标签

　　①div块级标签

　　　　

　　②span行内标签

　　　　

5、单选框radio默认选中是checked，下拉列表select默认选中的是selected，多选框checkbox默认选中是checked。

　　<input type="radio" name="">name属性是让同一个name的多个单选按钮成为一组。

6、label标签：

　　应用实例：QQ注册页面单选按钮点击文字的时候也可以选中单选按钮。

　　①点击label中文字会根据for指向的id自动指向这个id。②不用for，用label标签直接将单选按钮和文字包裹在一起也可以实现。

<input type="radio" name="gender" checked id="man" /><label for="man">男</label>&nbsp;&nbsp;
<label><input type="radio" name="gender" />女</label>

7、表单组合标签

　　

<form action="#">
           <fieldset>
           <legend>用户组1</legend>
               用户名：<input type="text" >
               密码：<input type="password" >
           </fieldset>
   </form>

效果图如图所示：

8、iframe

　　内联标签，常用于后台管理界面。

9、base标签

　　通过target属性可以设置这个页面的所有a标签的target属性。

10、HTML5中input标签添加了许多类型，比如date（日期选择控件），color（颜色选择控件）等属性，但是大部分不兼容。

 

推荐阅读