您的位置：首页 > Web前端 > HTML

HTML学习笔记(Day3)

2017-07-08 14:23 162 查看
一、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/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html 学习笔记
相关文章推荐
新的分享
章节导航