HTML（二）

回顾

1. 三组概念
   1. 客户端和服务器端

脚下留心：

1. 管理员访问服务器，管理员用的计算机是客户端
2. 通过服务器上的浏览器访问服务器的网站，这台计算机既是客户端也是服务器端。
   1. 浏览器和浏览器的内核
      1. 浏览器是一个用来解析HTML、CSS、JS的一个软件
      2. 浏览器内核：浏览器的核心代码

脚下留心：不同的浏览器内核可以是一样的。

• 1. 文件名、文件基本名、文件扩展名

文件名=基本名+扩展名

1. HTML：超文本标记语言
2. 网页的执行过程
3. Web之间的通讯通过HTTP协议。
4. HTML语法规则：
   1. 标签都要放在<>内
   2. 大部分标签都是成对出现
   3. <标签>：表示标签开始，</标签>表示标签结束
   4. 不区分大小写
5. 常用标签
   1. <p>：段落
   2. <br>：换行
   3. <hr>：水平线
   4. <b>：粗体
   5. <i>：斜体
   6. <u>：下划线
   7. <strong>：加粗强调
   8. <em>：倾斜强调
   9. <ins>：下划线强调
   10. <sup>：上标
   11. <sub>：下标
   12. <pre>：预格式化
   13. <font color=’’ size=’’ face=’’>
6. 标签的分类：
   1. 成对：双标签，容器标签，围堵标签
   2. 不成对：空标签，单标记
7. 标签的属性，每个标签都有自己多个属性，各自的属性跟在各自的后面，属性和属性自己通过空格来分开，每个属性都有值，属性的值通过单引号或双引号引起来。属性之间是没有顺序的。
8. DW编辑器
   1. 设置自动补全功能：编辑——首选参数（ctrl+U）

• 1. 添加删除浏览器

1. 滚动的文字：<marquee>
2. 路径
   1. 绝对路径：从一个不变的地址出发去寻找目标，比如c:\aa.jpg
   2. 相对路径：从自身的地址出发去寻找目标

目录结构如下：

aa

aa.html

bb

bb.html

cc

cc.html

dd

dd.html

test.html

问题：

1、test.html跳转aa.html aa/aa.html

2、test.html跳转bb.html aa/bb/bb.html

3、test.html跳转cc.html aa/bb/cc/cc.html

4、aa.html跳转test.html ../test.html

5、bb.thml跳转test.html ../../test.html

6、cc.html跳转test.html ../../../test.html

7、dd.html跳转到bb.html ../bb/bb.html

8、dd．Html跳转到cc.html ../bb/cc/cc.html

1. 超链接
   1. 内部链接：链接到网站内部
   2. 外部链接：链接到外部网站
   3. 空连接：只有链接的样子，没有链接的地址，#
   4. 下载链接：连接到无法打开的文件自动出现下载界面
   5. 锚点链接：

作业

跳转到其他页面指定的锚点处。

第一步：在B页面创建锚点

第二步：在A页面跳转到B页面的锚点处

六级标题

h1~h6

多学一招：在DW中，ctrl+1就是一级标题的快捷键，ctrl+2是二级标题，以此类推。

多学一招：从SEO的角度说，h1的权重更大。

列表

有序列表（<ol>） order list

有序列表中的每一项目是<li>

tpye属性

例题

无序列表（ul） unorder list

type属性

例题

自定义列表（dl） define list

dl：自定义列表

dt：自定义列表中的标题

dd：自定义列表中的项

<!DOCTYPE>标签

文档声明，用来声明文档遵循的规范

document 文档

type 类别

脚下留心：

1、<!doctype>必须放在页面的最顶端

2、<!doctype>标签本身不是HTML标签，是用来声明文档遵循的规范，也告知浏览器通过此规范来解析此页面中的代码。

详细资料：http://www.w3school.com.cn/tags/tag_doctype.asp

常用的 DOCTYPE 声明

注意：使用最多的是HTML5和XHTML1.0过渡型的声明。

XHTML和HTML的区别

xHTML就是满足W3C定义的规范的HTML。

XHTML=规范+HTML

DW中更改文档规范

Ctrl+U，打开首选参数

<meta>

遇到的问题

分析

结论：服务器发送什么格式的编码，浏览器就需要使用什么样的编码来解析。如果编码格式不一样，就会出现乱码。

常用编码

GBK：简体中文

GB2312：简体中文

UTF-8：国际统一编码（推荐）

ANSI ：中文操作系统就用中文编码，日文的操作系统就用日文的编码，换句话说什么样的操作系统就用什么样的编码格式。

作用一：通过meta标记控制浏览器编码

<meta charset=”utf-8″>

告知浏览器通过utf-8的字符编码来解析。

作用二：给搜索引擎使用

例题

多学一招：搜索引擎上的描述可能是<meta>标记的description部分，也可能是这个页面上的一段话。

插入图片（img）

语法：<img src=’图片的源’ alt=’’ title=’’ width=’’ height=’’ />

src：图片的地址

alt：当图片无法显示的时候，将alt后面的文字显示在图片的位置上

title：当鼠标放到图片的位置的时候显示提醒性文字。

脚下留心：如果一个图片很大，要在图片引入之前先调整好尺寸，不要将图片进入后再通过width和height来调整尺寸。

热点（了解）

热点：带有超链接的区域

DW创建热点非常简单

第一步：在设计模式下选择图片

第二步：选择热点选区工具在图片上画出热点区域

第三步：将每个热点链接到指定目标即可。

Object标签（了解）

<object type=”application/x-shockwave-flash” data=”地址” width=”” height=””></object>

例题

实体

实体就是一个固定不变的值，通过&去调用实体，分号表示调用结束。

空格：&nbsp;

<：lt less than &lt;

>：gt greater than &gt;

使用表格

网页默认情况下，使用的流布局，使用表格可以实现页面布局。

与表相关的标记

<table></table> 表格

<tr></tr> 行

<td></td> 单元格

<th></th> 标题

使用表的相关标记创建表

<table border=”1″ width=”500″ height=”300″ bordercolor=”#0000FF”>

<tr>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

</tr>

<tr>

<td>令狐冲</td>

<td>男</td>

<td>22</td>

</tr>

<tr>

<td>任盈盈</td>

<td>女</td>

<td>18</td>

</tr>

<tr>

<td>任我行</td>

<td>男</td>

<td>55</td>

</tr>

<tr>

<td>岳不群</td>

<td>男</td>

<td>50</td>

</tr>

</table>

运行结果

单元格中数据的对齐方式

水平对齐

使用标签的align属性

align=”center”：水平居中

align=”left”：水平居左（默认）

align=”right”：水平居右

垂直对齐

valign=’top’：垂直居顶

valign=’ middle’：垂直居中（默认）

valign=’bottom’：垂直居底

单元间距和单元填充

单元格间距（cellspacing）：单元格和单元格距离，默认是2像素

单元格填充（cellpadding）：单元格和内容的距离，默认是1像素

例题

合并单元格

合并行(rowspan)：把不同的行合并起来

合并列(colspan)：把不同列合并起来

row：行

span：跨度

col：column（柱状体，列）

例题

<table border=”1″ align=”center” width=”500″ height=”300″>

<tr>

<th colspan=”3″>学生证</th>

</tr>

<tr>

<th width=”30%”>姓名</th>

<td width=”30%”>&nbsp;</td>

<td rowspan=”3″ align=”center”>照<br /><br />片</td>

</tr>

<tr>

<th>性别</th>

<td>&nbsp;</td>

</tr>

<tr>

<th>年龄</th>

<td>&nbsp;</td>

</tr>

</table>

运行结果