首页 > 代码库 > 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内部标签总结