HTML学习笔记(Day3)

最新推荐文章于 2024-08-14 10:15:39 发布

DesmondCobb

最新推荐文章于 2024-08-14 10:15:39 发布

阅读量345

点赞数 2

分类专栏： HTML学习笔记文章标签： html 学习笔记

本文链接：https://blog.csdn.net/DesmondCobb/article/details/74808769

版权

HTML学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、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/

DesmondCobb

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记(Day3)

HTML图像 HTML表格 HTML列表
复制链接

扫一扫

专栏目录