body内部标签总结

Posted 2020-09-21

body内部常用标签

　　- 图标，   > <
　　- p标签，段落
　　- br，换行
======== 小总结 =====
所有标签分为：
块级标签： div（白板），h系列（加大加粗），p标签（段落和段落之间有间距）
行内标签： span（白板）
标签之间可以嵌套
标签存在的意义，css操作，js操作
ps:chorme审查元素的使用
　　- 定位
　　- 查看样式

- input系列 + form标签
　　input type="text" - name属性，value="test"
　　input type="password" - name属性，value="test"
　　input type="submit" - value="提交" 提交按钮，表单
　　input type="button" - value="登录" 按钮

　　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="1" selected="selected">西安</option>

　　　　　　　　<option value="2">铜川</option>

　　　　　　</optgroup>

　　　　</select>

---

- a标签
　　- 跳转

　　　　<a href="http://www.baidu.com" target="_blank">百度</a>
　　- 锚 href=‘#某个标签的ID‘ 标签的ID不允许重复　　

　　　　<a href="#i1">第一章</a>

　　　　<a href="#i2">第二章</a>

　　　　<a href="#i3">第三章</a>

　　　　<a href="#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="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>