HTML常用元素
1.换行符
当需要结束一行,又不想开始新段落时,使用<br>标签。<br>标签不管放在什么位置,都能够强制换行。
代码如下:
<p>我是一只小小小鸟<br>想飞,飞不高</p>
2.段落
<p>标签定义段落。
代码如下:
<p>相信我,这是一个段落,不骗你</p>
说明:可加属性 align 进行行对齐(left,right,center)
代码如下:
<p align="left">看!我是左对齐</p> <p align="right">看!我是右对齐</p> <p align="center">看!我是居中</p>
3.标题
标题元素由标签<h1>到<h6>定义。<h1>定义了最大的标题元素,<h6>定义了最小的。
代码如下:
<h1>标题一</h1> <h2>标题二</h2> <h3>标题三</h3> <h4>标题四</h4> <h5>标题五</h5> <h6>标题六</h6>
4.文本格式化
代码入下:
<b>定义粗体文本</b> <strong>定义加重语气</strong> <big>定义大字号</big> <em>定义着重文字</em> <i>定义斜体字</i> <small>定义小字号</small> 定义下标字H<sub>2</sub>O 定义上标字X<sup>2</sup>+Y<sup>2</sup> <del>定义删除字</del> <u>定义下划线</u>
5.链接
HTML使用标签<a>来创建一个连接到其他文件的链接。超链接可以指向网络上的任何资源:HTML页面,图像,声音,影片等等。
代码如下:
<a href="http://www.baidu.com">百度一下</a>
target属性,定义从什么地方打开链接(_blank新的空白页,_self当前页,_top顶级框架)
代码如下:
<a href="http://www.baidu.com" target="_blank">新的空白页打开<a/> <a href="http://www.baidu.com" target="_self">当前页打开<a/> <a href="http://www.baidu.com" target="_top">顶级框架打开<a/>
6.锚点
锚点标签用于使用户“跳”到文档的某个部位。
代码如下:
<a href="#jump">我想跳</a> <a name="jump">跳到这里了</a>
7.图像
图像是由<img>标签定义的。
属性说明:
src 定义图像的url
alt 定义图像的替代文本(当浏览器无法载入图像时,替代文本属性告诉用户失去的信息)
width 设置图像的宽度
height 设置图像的高度
代码入下:
<img src="img.jpg" width="100" height="100" alt="永远在加载中">
8.图片相对地址的定义
情形 |
Html文件位置 |
图片位置 |
写法 |
同一目录 |
F:/html/01.html |
F:/html/01.jpg |
<img src=”01.jpg”/> <img src=”./01.jpg”/> |
下一层目录 |
F:/html/01.html |
F:/html/image/01.jpg |
<img src=”imag01.jpg”/> |
上一层目录 |
F:/html/01.html |
F:/01.jpg |
<img src=”../01.jpg”/> |
同一层不同目录 |
F:/html/01.html |
F:/image/01.jpg |
<img src=”../imag01.jpg”/> |
说明:
./ 当前目录
../ 回到上一层目录
images/ 进入一层目录
../images/ 回到上一层目录,然后再进入images目录
9.图像热区
打开带有图片的网页时,有时会看到:当鼠标指向图片的不同部位时,可以打开不同的超链接,我们把这个称之为网页图像热区。
语法:
<img src="URL" usemap="# map 名称" />
<map name="map 名称">
<area shape="形状" coords="坐标值" href="URL" />
</map>
属性说明:
shape 热区形状(rect方形、circle圆形、poly多边形 )
coords 形状的坐标值
代码如下:
<area shape="rect" coords="x1,y1,x2,y2" href="http://www.baidu.com"> <area shape="circle" coords="x1,y1,r" href="http://www.baidu.com"> <area shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4" href="http://www.baidu.com">
10.HTML实体字符
- -!太多了!直接打开链接吧http://www.runoob.com/html/html-entities.html
11.列表相关标签
1)无序列表:一个项目的序列。各项目前加有标记(通常是黑色的实心小圆圈)
以<ul>标签开始,每个列表项目以<li>开始。
type属性可以控制列表前的符号。方块square,实心圆disc(默认),空心圆circle
代码如下:
<ul> <li>实心圆</li> <li>实心圆了</li> <li>实心圆</li> </ul> <ul type=“circle”> <li>空心圆</li> <li>空心圆</li> <li>空心圆</li> </ul> <ul type="square"> <li>方块</li> <li>方块</li> <li>方块</li> </ul>
2)有序列表:这也是一个项目的列表。
以<ol>标签开始,每个列表项目以<li>开始。
type属性说明:
type="1",表示前面的标记是数字
type="a",表示前面的标记是小写字母
type="A",表示前面的标记是大写字母
type="i",表示前面的标记是小写的罗马字母
type="I",表示前面的标记是大写的罗马字母
代码如下:
<ol type="1"> <li>数字</li> <li>数字</li> <li>数字</li> </ol> <ol type="1"> <li>数字</li> <li>数字</li> <li>数字</li> </ol> <ol type="a"> <li>小写英文字母</li> <li>小写英文字母</li> <li>小写英文字母</li> </ol> <ol type="A"> <li>大写英文字母</li> <li>大写英文字母</li> <li>大写英文字母</li> </ol> <ol type="i"> <li>小写罗马字母</li> <li>小写罗马字母</li> <li>小写罗马字母</li> </ol> <ol type="I"> <li>大写罗马字母</li> <li>大写罗马字母</li> <li>大写罗马字母</li> </ol>
3)定义列表(- -!这列表这尼玛的烦,那么多!):用来组织术语和他们的定义。任何信息如果包含多个术语和相对应的解释,都可以用定义列表进行组织。
定义列表由<dl>开始。术语由<dt>开始。术语的解释说明,由<dd>开始,<dd></dd>里的文字缩进显示。
代码如下:
<dl> <dt>MUMU</dt> <dd>mumu 是“木木”的拼音</dd> <dd>也可以是“林”的拼音</dd> </dl>
(未完待续...)