码迷,mamicode.com
首页 > Web开发 > 详细

html 主要标签总结

时间:2016-08-04 21:38:40      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:

基础结构标签:html,head,body。

 

1 <html>
2     <head></head>
3     <body></body>
4 </html>

 

1.换行符

1 <br/>

 

2.段落

对齐属性:align。属性值:left,center,right。

1 <p align="center">这是一个段落</p>

 

 3.标题标签 h1~h6。

1 <h1>这是h1标签</h1>
2 <h2>这是h2标签</h2>
3 <h3>这是h3标签</h3>
4 <h4>这是h4标签</h4>
5 <h5>这是h5标签</h5>
6 <h6>这是h6标签</h6>

 

4.文本修饰标签,其用途类似于word的字体变化。

1 <b>定义粗体文本</b>
2 <i> 定义斜体文本 </i>
3 <del>定义删除文本</del>
4 <sup>定义上标字</sup>
5 <sub>定义下标字</sub>

 

5.链接标签。

1 <a href="url" title="_title" target="_blank">
2     href:跳转地址;
3     title:连接提示;
4     target:跳转的方式;可选值:_blank,_parent,_self,_top;
5 </a>
6 <a href="#">用于跳转页面内部位置</a>

 

6.图片引入标签。

1 <img src="url" alt="img-title" width="100" height="100"/>
2 src:图片的地址;
3 alt:图片的提示文本;
4 width:宽;
5 height:高;

 

7.文件路径规范。

1 ./ 当前目录;
2 ../ 上层目录;
3 address / 子层目录;
4 ../address/ 结合性目录;

 

8.图像热区。在一张图片上定义一些特定的区域来实现链接。

1 <img src="url" usemap="_map"/>
2 <map name="_map">
3     <area shape="rect" coords="0,0,10,10" href="url"/>
4     <area shape="circle" coords="50,50,10" href="url"/>
5     <area shape="poly" coords="50,50,10,10,80,80" href="url"/>
6 </map>

 

9.字符实体。使浏览器显示html中的格式符号。

1 <
2 >
3 &

 

10.无序列表。以符号开头的列表。

1 <ul type="disc">
2     <li>这是第1行</li>
3     <li>这是第2行</li>
4     <li>这是第3行</li>
5     <li>这是第4行</li>
6     <li>这是第5行</li>
7     type:定义列表开头符号的样式;
8 </ul>

 

11.有序列表。以序号开头的列表。

1 <ol type="A">
2     <li>这是第1行</li>
3     <li>这是第2行</li>
4     <li>这是第3行</li>
5     <li>这是第4行</li>
6     <li>这是第5行</li>
7     type:用来定义开头序号的样式;
8 </ol>

 

12.定义列表。有标题的列表。

1 <dl>
2     <dt>列表标题</dt>
3     <dd>列表项1</dd>
4     <dd>列表项2</dd>
5     <dd>列表项3</dd>
6     <dd>列表项4</dd>
7     <dd>列表项5</dd>
8 </dl>

 

13.表格。

1 <table>
2     <tr>行1
3         <td>单元格1</td>
4         <td>单元格1</td>
5         <td>单元格1</td>
6         <td>单元格1</td>
7         <td>单元格1</td>
8     </tr>
9 </table>

合并单元格:colspan="number":合并列;rowspan="number":合并行;在合并单元格后,需删除多余的单元格。

 

15.内嵌框架。它可以把一个网页显示在另一个网页中。

1 <iframe src="url" frameborder="0" width="100" height="100" scrolling="yes"></iframe>
2 scrolling可选项:yes,no,auto。设置是否显示滚动条。

 

16.form表单。

1 <form action="url" method="post" enctype="multipart/form-data" target="_blank"></form>
2 属性        说明
3 name    表单的名称
4 action    表单提交地址
5 method    表单数据提交的方式 (get ,post)
6 enctype    MIME类型        
7 target     打开方式 

 

17.input类型。

 请移步 “input 类型 总结”

 

18.文本域。

1 <textarea name="_text" id="_text" cols="30" rows="10"></textarea>
2 cols:每一行可容纳的字符个数;rows:容器可容纳的行数。

 

19.下拉菜单框。

1 <select name="" id="" size="1">
2     <optgroup label="group_1">
3         <option value="1">opt_1</option>
4         <option value="2">opt_2</option>
5     </optgroup>
6 </select>
7 optgroup:分组;
8 option:选项;
9 size:选框可显示的选项的个数;

 

扩展:

1.label标签。

1 跨度写法;
2 <label for="input_1"></label>
3 <input type="text" id="input_1">
4 非跨度写法;
5 <label><input type="text"></label>

 

html 主要标签总结

标签:

原文地址:http://www.cnblogs.com/darcrand-blog/p/5737949.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!