html《课时内容》第一篇
html基本结构：
<html>
<head>
<meta charset="utf-8"><!-- 字符编码格式 -->
<title>网页标题</title>
</head>
<body>
内容
</body>
</html>
标签和属性，并使用样式代替:
| 标签 | 描述 |
|---|---|
| <center> | 定义居中的内容 |
| <font>和<basefont> | 定义HTML字体 |
| <s><strike> | 定义删除线文本 |
| <u> | 定义下划线文本 |
| 属性 | 描述 |
|---|---|
| align | 定义文本的对齐方式 |
| bgcolor | 定义背景颜色 |
| color | 定义文本颜色 |
对齐方式的align有：
<h1 align="left">靠左
<h1 align="center">居中
<h1 align="right">靠右
<h1 align="absbottom">靠下
<h1 align="absmiddle">水平居中
<h1 align="bottom">低部
<h1 align="top">顶部
HTML格式化
HTML可以定义很多供格式化输出的元素，比如粗体和斜体字。
文本格式化标签：
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文字 |
| <big> | 定义大号字 |
| <em> | 定义着重文字 |
| <i> | 定义斜体文字 |
| <small> | 定义小号字 |
| <strong> | 定义加重语气 |
| <sub > | 定义下标字 |
| <sup > | 定义上标字 |
| <ins> | 定义插入字 |
| <del> | 定义删除字 |
| <s> | 使用<del>代替 |
| <strike> | 使用<del>代替 |
| <u> | 使用样式 （style）代替 |
HTML链接：
- HTML链接是通过
<a></a>标签进行定义的，并且在href属性中指定链接的地址。 - 实列：
<html>
<body>
<a href="http://www.w3school.com.cn">w3school是一个非常好的学习Web技术的网站。</a>
</body>
</html>
image
HTML图像
- HTML图像是通过
<img src="资源路径">标签进行定义的，图像的名称和尺寸是以属性的形式提供的。
如果是本地的话，后面加上图片的绝对路径或者相对路径。
如果图片源来自网上，那必须使用绝对路径。
示例：排列图片
- 本例演示如何在文字中排列图像:
<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>
</body>
</html>
示例：浮动图像
- 本例演示如何使图片浮动至段落的左边或右边。
<html>
<body>
<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>
示例：调整图片尺寸
- 本例演示如何将图片调整到不同的尺寸:
<html>
<body>
<img src="/i/eg_mouse.jpg" width="50" height="50">
<br />
<img src="/i/eg_mouse.jpg" width="100" height="100">
<br />
<img src="/i/eg_mouse.jpg" width="200" height="200">
<p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p>
</body>
</html>
示例：制作图像链接
- 本例演示如何将图像作为一个链接使用:
<html>
<body>
<p>
您也可以把图像作为链接来使用：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>
</body>
</html>
初识div
认识div在排版中的作用
语法：<div>…</div>
给div命名，使逻辑更加清晰
我们把一些标签放进<div>里，划分出一个独立的逻辑部分。为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为<div>提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。
如下两图进行比较，如果设计师把两个图给你，哪个图你看上去能更快的理解呢？是不是右边的那幅图呢。
语法：<div id="版块名称">…</div>
table标签，认识网页上的表格
table标签 ＝ 我们平时看到到表格
有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。如下表：
想在网页上展示上述表格效果可以使用以下代码：
-
创建表格的四个元素：
table、tbody、tr、th、td -
<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。 -
<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。 -
<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。 -
<th>…</th>：表格的头部的一个单元格，表格表头。 -
表格中列的个数，取决于一行中数据单元格的个数。
上述代码在浏览器中显示的默认的样式为：
总结：
1.table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
2.表头，也就是th标签中的文本默认为粗体并且居中显示
用css样式，为表格加入边框
Table 表格在没有添加 css 样式之前，是没有边框的。这样不便于我们后期合并单元格知识点的讲解，所以在这一节中我们为表格添加一些样式，为它添加边框。
代码中加入：
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
上述代码是用 css 样式代码，为th，td单元格添加粗细为一个像素的黑色边框。
结果窗口显示出结果样式：
表格应用和布局
-
内容目标
- 会使用表格的基本结构实现简单表格
- 会使用表格相关标签实现跨行、跨列的复杂表格
- 会使用表格相关设置进行美化修饰
表格的基本结构:
<html>
<head></head>
<body>
<table bordercolor="#000000" cellspacing="0" cellpadding="30" border="1">
<tr>
<td>姓名</td>
<td>性别</td>
<td>专业</td>
</tr>
<tr>
<td>贝贝</td>
<td>男</td>
<td>计算机</td>
</tr>
<tr>
<td>晶晶</td>
<td>女</td>
<td>计算机</td>
</tr>
</table>
</body>
</html>
说明：bordercolor="颜色或者十六进制颜色代码"：设置边框的颜色；cellspacing="0"：设置单元格之间的间隔；cellpadding="30"：设置单元格边框和内容之间的间隔；border="1"：设置边框的宽度。
视图
效果图：
跨行跨列的表格：
- 示列
<TABLE border="1">
<TR>
<TD>手机充值、IP卡 </TD>
<TD colspan="2">办公设备、文具</TD>
</TR>
<TR>
<TD rowspan="2">各种卡的总汇</TD>
<TD>铅笔</TD>
<TD>彩笔</TD>
</TR>
<TR>
<TD>打印</TD>
<TD>刻录</TD>
</TR>
</TABLE>
如图所示：
rowspan:表示跨行；colspan:表示跨列；<TD colspan="2">办公设备、文具</TD>:跨了2行，<TD rowspan="2">各种卡的总汇</TD>:跨了2列详细PPT教程：表格应用和布局——html02
跑马灯marquee:
<MARQUEE scrolldelay ="100" direction="up" >
滚动文字或图像
</MARQUEE>
说明：
scrolldelay：表示滚动延迟时间，默认值为90。
direction：表示滚动的方向，默认为从右向左 up：是从上向下。
