首页 > 代码库 > 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>
<!-- 中间部分为注释 --> :注释符号,中间部分在网页上不显示
特殊字符:
:空格
& :&
< :<
> :>
本文出自 “探讨科学” 博客,请务必保留此出处http://xiaoxin901008.blog.51cto.com/10300691/1934974
HTML元素总结