《HTML第一周》

这周主要简单的学习HTML涉及的基本元素、Tag、属性等。

回顾这周所学章节所作笔记：

一、HTML基本Tag

<b></b>定义加粗 英文：bold
<p></p>定义段落
<h1></h1>到<h6></h6>定义正文标题
<br>定义换行，没有closing bag结尾标签
<!-- 这是注释 --> 定义注释标签，不会再浏览器显示出来。
<hr> 定义 加一条横线
<h1 align="center"></h1>  定义字体居中
<body bgcolor="red"></body> 定义背景颜色

二、tag说明、常用格式

<b> 粗体bold
<i> 斜体italic
<del> 文字当中划线表示删除
<ins> 文字下划线表示插入
<sub> 下标
<sup> 上标
<pre> 保留空格和换行
<blockquote>  缩进表示引用 *
<code> 表示计算机代码，等宽字体 *

三、HTML字符实体(符号)

&nbsp;   表示空格
&lt;     小于<
&gt;     大于>
&amp;    &符号
&quot;   双引号“”

&copy;   版权      
&reg;    注册商标  
&times;  乘号      
&divide; 除号   

四、链接<a>标签的使用

<a></a> 定义a标签，用来表示超链接的，可以指向任何一个文件源。
<taget="_bank"> 定义taget属性，用来打开一个新窗口。
alt="图片文字注释" 以及title="图片文字注释"

文字链接（新窗口打开）：<a href="路径" target="_bank"></href>
图片链接（新窗口打开）：<a href="图片指向的路径链接" target="_bank"><img src="图片路径" width="图片的宽度" height="图片的高度" alt="图片上文字注释"></a>

<p><a href="#2">直接跳转到第2章</a></p>
   <a name="c1">这是第一张</a>
   <a name="c2">这是第二张</a>     <!--这一段代码是name属性在a标签的使用可以直接跳转到指定页面-->

邮件链接：<a href="mailto/cc/bcc/subject/body">发邮件联系我们</a>
    注明：mailto:送件人，指发送到某个邮件地址去.       subject:是邮件主题
          cc:抄送   bcc: 密送               body：主要内容


五、链接的相对路径和绝对路径


注意：源文件路径假设为：E:\123\站点\info.html
      被引用文件假设为：E:\123\index-1\index.html

那么，<!--相对路径-->

<p><a href="index.html" target="_blank">相对路径</a></p>
<p><a href="index-1\index.html" target="_blank">相对-下级目录</a></p>
<p><a href="..\index-1\index.html" target="_blank">相对-上级目录</a></p>


六、表格<table>

表格最常用的Tag：<table>表示表格、<tr>表示行、<th>表头，可以实现加粗、居中的功能、<td>表示行里的单元格。
注：表格所用到的Tag：整个表格开始要用table；每一行开始要用tr；每一单元格开始要用td。

英语单词：Row行、Colum列

例如：分别用<table>/<tr>/<td>制作一个3行2列的表格，代码如下：

<p>表格实例实践3行2列</p>
<table border="1">             <!--这段代码是表格边框的大小-->
<tr bgcolor="#FF0000">         <!--这段代码是第一行背景颜色为红色-->
   <td><h5 align="center"><b>Tag</b></h5></td>       <!--这段是单元格里面的内容居中、加粗-->
   <td><b>Tag说明</b></td>
</tr>
<tr bgcolor="#00FF99">
   
   <td>tag用法</td>
   <td>tag说明法</td>
</tr>
<tr bgcolor="#00FF99">
   <td>第三行第一列</td>
   <td>第三行第二列</td>
</tr>
</table> 


空内容的单元格：用&nbsp
<th></th>：表头，可以实现加粗、居中的功能。
<caption>表格的标题</caption>：在<table>后面增加。
如：<table border="6">
    <caption>表格标题</caption>

colpsan属性：设置包含多列的单元格（横的多列表格）
rowspan属性：设置包含多行的单元格（竖的多行表格）

例如：分别用colpsan、rowspan属性制作一个多行多列的表格，代码如下：

<h4>用colpsan属性，设置包含多列的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">联系方式</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

<h4>用rowspan这个属性，设置包含多行的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">联系方式</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>


cellpadding属性：可以改变单元格内容和单元格边界之间的距离。
如：<table border="1" cellpadding="30">     <!--将cellpadding属性值设为30的表格-->

Cellspacing属性：表示单元格之间的距离。
如：<table border="1" cellspacing="20">     <!--将Cellspacing属性值设为20的表格-->

表格的背景颜色设置如：<table border="1" bgcolor="red">
表格的背景图片设置如：<table border="1" background="../p_w_picpaths/html_tutorials/background.gif">

单元格的背景颜色设置如：<td bgcolor="red">第一</td>
单元格的背景图片设置如：<td  background="../p_w_picpaths/html_tutorials/background.gif">第二</td>

单元格内容的对齐方式如：<td align="center">谢静名字对齐居中</td>

 

HTML框架<frames>

HTMLk列表<lists>

HTML表单<forms>

HTML图片<p_w_picpaths>

HTML字体<fonts>

HTML背景颜色和图片

HTML头部信息<head>