HTML学习笔记(Day3)

来源：互联网发布：易达工程造价软件编辑：程序博客网时间：2024/05/22 01:27

一、HTML图像
HTML中图像由<img>定义
1.<img>和src属性

<img src="url" />

URL 指存储图像的位置
2.alt属性
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

<img src="schoolday.gif" alt="Nice Boat">

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
3.背景图片

<html><body background="url"><p>gif 和 jpg 文件均可用作 HTML 背景。</p><p>如果图像小于页面，图像会进行重复。</p></body></html>

4.图片的对齐方式
图片在文字中的对齐方式由align属性确定

<html><body><h2>未设置对齐方式的图像：</h2><p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p><h2>已设置对齐方式的图像：</h2><p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p><p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p><p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p><p>请注意，bottom 对齐方式是默认的对齐方式。</p><p><img src ="/i/eg_cute.gif" align ="left">带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。</p><p><img src ="/i/eg_cute.gif" align ="right">带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。</p></body></html>

5.图像链接

<p>将链接的内容替换为图像，可以用图像作为链接<a href="/example/html/lastpage.html"><img border="0" src="/i/eg_buttonnext.gif" /></a></p>

6.图像映射<map>和<area>标签

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /><map name="planetmap" id="planetmap">  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" /></map>

<map>定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。
<area> 标签定义图像映射中的区域(注：图像映射指得是带有可点击区域的图像)。

area 元素总是嵌套在 <map> 标签中。

二、HTML表格
1.一个例子

<table border="1"><tr><th>Heading</th><th>Another Heading</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td> </td><td>row 2, cell 2</td></tr></table>

<th>定义表格的表头，通常是粗体居中的文字
<tr>定义表格的每一行
<td>定义单元格的内容
border属性确定表格的边框宽度
在空单元格中使用空占格符 以使表格边框显示出来

2.跨行/跨列以及单元格间距/边距
使用colspan和rowspan属性确定跨行和跨列的单元格
使用cellpadding确定单元格边距，cellspacing确定单元格间距

<html><body><table border="1" cellpadding="10" cellspacing="2"><tr>  <th>姓名</th>  <th colspan="2">电话</th></tr><tr>  <td>Bill Gates</td>  <td>555 77 854</td>  <td>555 77 855</td></tr><tr>  <td rowspan="2">DesmondCobb</td>  <td colspan="2">12345</td></tr><tr>  <td colspan="2">67890</td></tr></table></body></html>

3.背景与对齐方式
bgcolor属性确定单元格的背景颜色
background属性可以指定单元格背景图片
align属性可以指定单元格子对齐方式

4.frame属性
略，详见样例http://www.w3school.com.cn/tiy/t.asp?f=html_table_frame

5.<thead><tfoot><tbody>标签
比较简单，直接上例子吧

<html><head><style type="text/css">thead {color:green}tbody {color:blue;height:50px}tfoot {color:red}</style></head><body><table border="1">  <thead>    <tr>      <th>Month</th>      <th>Savings</th>    </tr>  </thead>  <tbody>    <tr>      <td>January</td>      <td>$100</td>    </tr>    <tr>      <td>February</td>      <td>$80</td>    </tr>  </tbody>  <tfoot>    <tr>      <td>Sum</td>      <td>$180</td>    </tr>  </tfoot></table></body></html>

三、HTML列表
1.无序列表
无序列表由<ul>标签声明
每个项目始于<li>
可以通过type属性修改标签的形状(disc,circle,square)

<ul type="disc"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li></ul>

2.有序列表
有序列表由<ol>标签声明
可以通过type属性修改表示顺序的类型

<ol type="A"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li></ol>

注:type属性默认为数字，A为大写字母，a为小写字母，I为大写罗马数字，i为小写罗马数字

3.列表的嵌套

举个例子就行吧

<html><body><h4>一个嵌套列表：</h4><ul>  <li>咖啡</li>  <li>茶    <ul>    <li>红茶</li>    <li>绿茶      <ul>      <li>中国茶</li>      <li>非洲茶</li>      </ul>    </li>    </ul>  </li>  <li>牛奶</li></ul></body></html>

4.自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl><dt>Coffee</dt><dd>Black hot drink</dd><dt>Milk</dt><dd>White cold drink</dd></dl>

Ref:http://www.w3school.com.cn/

阅读全文

0 0