一. 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>
标签
![](./smile.jpg)```
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)吧!