一. div 与 span
<div> —— division的缩写，分区
div和span的最大特点就是默认都没有对元素内的对象进行任何格式化渲染。
共同点：主要用于应用样式表
不同点：div是块级元素，span是行内元素
块级元素是指以另起一行开始渲染的元素，行内元素进行渲染是则不需要另起一行。
联系：块级元素和行内元素也不是一成不变的，通过定义css的display属性值可以相互转化
二. ul 与 ol
<ol>—— ordered list, 有序列表
<ul>—— unordered list，无序列表
<li>—— list item，列表项目
html中的列表包括有序列表，无序列表和自定义列表
1. 有序列表
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
以上代码中，<ol>用来定义有序列表，<li>用来定义列表项
<ol start="40">
<li>first step</li>
<li>second step</li>
<li>third step</li>
</ol>
<ol>中的start属性可以指定有序列表的起始序号
注意：start属性只能定义在 <ol>标签内
<ol>
<li > 第一步</li> <!--数字列表-->
<li type="A">第二步</li> <!-- 大写字母列表-->
<li type="a">第三步</li> <!-- 小写字母列表-->
<li type="I">第四步</li> <!--大写罗马字母列表-->
<li type="i">第五步</li> <!--小写罗马字母列表-->
</ol>
如以上代码所示，可以通过改变type的属性值渲染出不同类型的有序列表
注意：type属性可以定义在<ol>中，也可以定义在<li>中
2. 无序列表
<ul>
<li>手机</li>
<li>电脑</li>
<li>计算机</li>
</ul>
上述代码中，<ul>用来定义无序列表，<li>用来定义列表项
<ul>
<li type="disc">手机</li> <!--实心圆点-->
<li type="circle">电脑</li> <!-- 空心圆点-->
<li type="square">计算机</li> <!--实心方块-->
</ul>
可以通过type属性来指定列表项前的形状
注意：type属性可以定义在<ul>中，也可以定义在<li>中
3. 自定义列表
<dl>—— define list, 定义列表
<dt>——define list title, 用于生成定义列表中各列表项的标题，重复使用可以定义多个列表项的标题
<dd>——define list define ， 用于生成定义列表各列表项的说明文字段，重复使用可以定义多个说明 文字段。dd是对应dt的简短说明或解释。
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
三. a 与 img
<a>标签
<a>——anchor 的缩写。anchor ['æŋkə] 基本解释 n. 锚
<a href="http://www.w3school.com.cn/" target="_top">w3school</a><br>
<a href="http://www.w3school.com.cn/" target="_self">w3school</a><br>
<a href="http://www.w3school.com.cn/" target="_blank">w3school</a><br>
<a href="http://www.w3school.com.cn/" target="_parent">w3school</a><br>
<a href="#" target="_parent">w3school</a><br>
href 属性规定链接的目标 URL
target 属性规定在何处打开目标 URL。仅在 href 属性存在时使用。
<img>标签
```
src 规定显示图像的URL， alt 规定图像的替代文本，
width, height 分别规定图像的宽度和高度
**创建图片链接**
<p>创建图片链接:
<a href="http://www.w3school.com.cn/">
</a></p>
####四. form,input 与button
#####1. form
form标签有两个常用属性：action 和 method
**action** 规定当提交表单时向何处发送表单数据
**method** 规定用于发送表单数据的 HTTP 方法(get, post)
<form action="form_data.jsp" method="get">
userName: <input type="text">
passWord: <input type="text">
<input type="reset">
<input type="submit">
</form>
`<form>`元素中可以包含一个或多个如下的表单元素：
`<input>`,`<textarea>`,`<button>`,`<select>`,`<option>`,`<fieldset>`,`<label>`
#####2. input
`<input>`标签有如下几个常用的属性：`checked`, `disabled`, `palceholder`,`height`,`width`,`name`,`type`,`value`
其中`type`有如下几个常用的属性值可供选择`button`,`radio`,`checkbox`,`text`,`reset`,`submit`,`hidden`
**注意：**当`type="radio"`时，相关选项的`name`应该一致
<form>
<input type="radio" name="sex" id="male">
<label for="male">
Male
</label>
<input type="radio" name="sex" id="female">
<label for="female">
Female
</label>
</form>
#####3. button
`<button>`标签有如下几个常用属性：`value`,`disabled`,`name`,`type`
其中`type`有如下三个属性值可供使用：`button`,`reset`.`submit`
<button type="button"> button</button>
<button type="reset">reset</button>
<button type="submit">submit</button>
####五. table
- 表格使用水平标题
<table border="1">
<h3>表格使用水平标题</h3>
<tr>
<th>Name</th>
<th>Telephone</th>
</tr>
<tr>
<td>Lucy</td>
<td>3969443</td>
</tr>
</table>
- 表格使用垂直标题
<table border="1">
<h3>表格使用垂直标题</h3>
<tr>
<th>Name</th>
<td>Lucy</td>
</tr>
<tr>
<th>Telephone</th>
<td>394672</td>
</tr>
</table>
- 横跨两行的单元格
<table border="1">
<h3>横跨两行的单元格</h3>
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555778534</td>
</tr>
<tr>
<td>555889078</td>
</tr>
</table>
- 横跨两列的单元格
<table border="1">
<h3>横跨两列的单元格</h3>
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577954</td>
<td>55577889</td>
</tr>
</table>
以上便是html常用元素的基本用法，详细代码，请[点这里](https://github.com/yhl221/html-basicElement)吧！
html标签对应英文全称请[点这里](http://wenku.baidu.com/link?url=ilLmXotR8yKePd80_gjicFaEIxqQWCy1Zmtdpl_JrnBHrTHt3STHiZys9pKj3raYscFWyHEfYdgreEvg96yxiQ7xTXSIabSvW_0_q9HQhiu)吧！
网友评论