一 html图像
在htmtl中,图像由<img>标签定义.<img>是空标签,它只包含属性,并且没有闭合标签.
要在页面上显示图像,使用源属性(src).源属性的值是图像的url地址(统一资源定位符).
定义图像的语法是:
<img src="url"/>
url指存储图像的位置.
<html>
<head>
<title>first page</title>
</head>
<body>
<img src="logo.png" alt=" "/>
</body>
<html>
●如果图像无法显示,则alt属性用来为图像定义一串预备的可替换的文本.alt属性是必需的.
height(高度)与width(高度)属性用于设置图像的高度与宽度.该属性值可以以像素或百分比形式指定,默认单位为像素
<html>
<head>
<title>first page</title>
</head>
<body>
<img src="logo.png" height="100px" width="100px" alt=" "/>
<!--或者-->
<img src="logo.png" height="80%" width="80%" alt=" "/>
</body>
</html>
●<img>的border属性规定图像周围的边框的宽度.默认情况下,图像是没有边框的
border属性的属性值的单位是像素.表示边框的宽度
实例:带有2个像素粗边框的图像.
<img src="logo.png" height="100px" width="100px" border="2" alt=" " />
二 html链接
html使用标签<a>来设置超文本链接.
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,你可以点击这些内容来跳转到新的文档或者当前文档中的某个部分.
在标签<a>中,使用href(hyper text reference)属性来描述链接的目标地址
链接的html代码很简单.格式如下:
<a href="url">链接文本</a>
上边的代码显示为:链接文本(链接文本下面有下划线)
●使用target属性,你可以规定在何处打开链接文档.如果给target属性赋值_blank,将使链接在新窗口或新选项卡中打开.
<a href="url" target="_blank">链接文本</a>
三 html列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记
无序列表使用<ul>标签,与<li>标签一起使用(unordered list)
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
浏览器显示效果如下:
有序列表也是一列项目,列表项目使用数字进行标记.
有序列表始于<ol>标签,每个列表项目始于<li>标签.
<ol>
<li>咖啡</li>
<li>菜</li>
<li>牛奶</li>
</ol>
运行效果如下:
四 html表格
表格由<table>标签定义.
每个表格均有若干行(由<tr>标签定义,table row),每行被分割为若干单元格(由<td>标签定义,table division)
下面是一个包含两行两列的表格:
<table border="2">
<tr>
<td>阿/td>
<td>平</td>
</tr>
<tr>
<td>加</td>
<td>油</td>
</tr>
</table>
运行效果:
●border属性,指定表格的边框宽度,单位是像素.如果不定义边框属性,表格将不显示边框
●<td>标签定义html表格中的标准单元格.
●表格的表头使用<th>标签进行定义.大多数浏览器会把表头显示为粗体居中的文本
●使用colspan和rowspan属性分别定义跨列和跨行的表格单元格.
下面是一个单元格跨两行的表格
<table border="1">
<th>表头1</th>
<th>表头2</th>
<tr>
<td>First Name</td>
<td>Bill Gates</td>
</tr>
<tr>
<td rowspan="2">Telephone:</td>
<td>555 77 666</td>
</tr>
<tr>
<td>555 77 667</td>
</tr>
</table>
运行效果: