HTML(二)
回顾
- 三组概念
- 客户端和服务器端
脚下留心:
- 管理员访问服务器,管理员用的计算机是客户端
- 通过服务器上的浏览器访问服务器的网站,这台计算机既是客户端也是服务器端。
- 浏览器和浏览器的内核
- 浏览器是一个用来解析HTML、CSS、JS的一个软件
- 浏览器内核:浏览器的核心代码
- 浏览器和浏览器的内核
脚下留心:不同的浏览器内核可以是一样的。
-
- 文件名、文件基本名、文件扩展名
文件名=基本名+扩展名
- HTML:超文本标记语言
- 网页的执行过程
- Web之间的通讯通过HTTP协议。
- HTML语法规则:
- 标签都要放在<>内
- 大部分标签都是成对出现
- <标签>:表示标签开始,</标签>表示标签结束
- 不区分大小写
- 常用标签
- <p>:段落
- <br>:换行
- <hr>:水平线
- <b>:粗体
- <i>:斜体
- <u>:下划线
- <strong>:加粗强调
- <em>:倾斜强调
- <ins>:下划线强调
- <sup>:上标
- <sub>:下标
- <pre>:预格式化
- <font color=’’ size=’’ face=’’>
- 标签的分类:
- 成对:双标签,容器标签,围堵标签
- 不成对:空标签,单标记
- 标签的属性,每个标签都有自己多个属性,各自的属性跟在各自的后面,属性和属性自己通过空格来分开,每个属性都有值,属性的值通过单引号或双引号引起来。属性之间是没有顺序的。
- DW编辑器
- 设置自动补全功能:编辑——首选参数(ctrl+U)
-
- 添加删除浏览器
- 滚动的文字:<marquee>
- 路径
- 绝对路径:从一个不变的地址出发去寻找目标,比如c:\aa.jpg
- 相对路径:从自身的地址出发去寻找目标
目录结构如下:
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
- 超链接
- 内部链接:链接到网站内部
- 外部链接:链接到外部网站
- 空连接:只有链接的样子,没有链接的地址,#
- 下载链接:连接到无法打开的文件自动出现下载界面
- 锚点链接:
作业
跳转到其他页面指定的锚点处。
第一步:在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>
例题
实体
实体就是一个固定不变的值,通过&去调用实体,分号表示调用结束。
空格:
<:lt less than <
>:gt greater than >
使用表格
网页默认情况下,使用的流布局,使用表格可以实现页面布局。
与表相关的标记
<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%”> </td>
<td rowspan=”3″ align=”center”>照<br /><br />片</td>
</tr>
<tr>
<th>性别</th>
<td> </td>
</tr>
<tr>
<th>年龄</th>
<td> </td>
</tr>
</table>
运行结果