首页 > 代码库 > HTML元素总结

HTML元素总结


html元素

<p></p> :段落标记,会自动换行,常用于文本内容

        例:<p>这是一个段落</p>

               技术分享

<h1> ~ <h6> :标题标记,会自动换行,字体由大到小

        例:<h1>这是h1</h1>

               <h2>这是h2</h2>

               <h3>这是h3</h3>

               <h4>这是h4</h4>

               <h5>这是h5</h5>

               <h6>这是h6</h6>

              技术分享

<br/> :换行标记

<nobr/>:强制不换行

<a></a>:链接,href属性指向链接地址,行内元素,不会自动换行

          例:<a href="http://www.baidu.com">百度</a>

                <a href="http://www.google.com">google</a>

          技术分享

<img> :图片元素,src指向图片地址,行内元素,不会自动换行

          例:<img src="http://www.mamicode.com/1.png"/>

                 <img src=http://www.mamicode.com/2.png/>

               技术分享

<i></i>:斜体字标记,行内元素

<b></b>:粗体字标记,行内元素

<u></u>:下划线标记,行内元素

<s></s>:删除线标记,行内元素

<sub></sub>:下标标记,行内元素

<sup></sup>:上标标记,行内元素

<hr/>:分割线,单行标记

          例:<i>这是i标记</i>

               <b>这是b标记</b>

               <s>这是s标记</s>

               <u>这是u标记</u>

               <sub>这是sub</sub>

               <sup>这是pub</sup>

               <hr/>

        技术分享

<div></div>:分区标记,块元素,会自动换行

<span></span>:分区标记,行内元素

表格:

<table>

     <tr>

          <td></td>

     </tr>

</table>

<tr>:每一行

<td>:第一列

属性:

     border:显示表格边框

     cellspacing:单元格的外边距

     cellpadding:单元格的内边距

     align:表格内元素水平对齐方式

     valign:表格内元素简直对齐方式

     rowspan:合并行

     colspan:合并列

例:

<table cellspacing="1px" cellpadding="1px" border="1px">

  <tr>

  <td>第一行第一列</td>

  <td>第一行第二列</td>

  </tr>

  <tr>

  <td>第二行第一列</td>

  <td>第二行第二列</td>

  </tr>

</table>

技术分享

列表:

<ol></ol>:有序列表

<ul></ul>:无序列表

<li></li>:列表中子元素

例:

     <ol>

         <li>有序列表</li>

         <li>有序列表</li>

         <li>有序列表</li>

     </ol>

     <ul>

         <li>无序列表</li>

         <li>无序列表</li>

         <li>无序列表</li>

     </ul>

     技术分享

表单

<form></form>:表单元素

<input type="" value=""/>:输入框

     属性:type="text/password/submit/button/radio/checkbox"         

               text:文本输入框

               password:密码输入框,文本为密文

               submit:提交按钮 

               button:普通按钮

               radio:单选框

               checkbox:复选框

               checked:默认选中项

          value:文本框提示,默认值

<textarea></textarea>:多行文本域

          属性:cols :指定文本域的列数

                    rows:指定文件域的行数

例:

          <form action="">

              用户名:<input type="text" value="http://www.mamicode.com/请输入用户名"/><br/>

              密码: <input type="password" value="http://www.mamicode.com/请输入密码"/><br/>

              性别: <input type="radio" name="sex" value="http://www.mamicode.com/man" checked/>男

                 <input type="radio" name="sex" value="http://www.mamicode.com/woman"/>女

                 <br/>

         爱好: <input type="checkbox" name="interest" value="http://www.mamicode.com/1" checked/>蓝球

                 <input type="checkbox" name="interest" value="http://www.mamicode.com/2"/>电影

                 <input type="checkbox" name="interest" value="http://www.mamicode.com/3"/>音乐

                 <input type="checkbox" name="interest" value="http://www.mamicode.com/4"/>散步

        个人简介:<br/><textarea cols="30" rows="10">请输入个人信息<textarea><br/>

        来自: <select>

                    <option>请选择</option>

                    <option>北京</option>

                    <option>上海</option>

               </select>

                 <br/>

                 <input type="submit" value="http://www.mamicode.com/提交"/>

       </form>

技术分享

为控件分组

<fieldset>:为控件分组

<legend>:指定分组元素标题

例:

     <fieldset>

         <legend>地址信息</legend>

         地址:<input type="text"/><br/>

         邮编:<input type="text"/>

     </fieldset>

技术分享

<!-- 中间部分为注释 -->  :注释符号,中间部分在网页上不显示

特殊字符:

&nbsp;   :空格

&amp;   :&

&lt;        :<

&gt;       :>


本文出自 “探讨科学” 博客,请务必保留此出处http://xiaoxin901008.blog.51cto.com/10300691/1934974

HTML元素总结