02 HTML 列表 块行元素 滚动字幕 文本图片锚点超链接 相对绝对URL 图片标记
定义列表
<div>和<span>
块元素和行内元素
网页颜色表示
滚动字幕标记
计算机进制
计算机编码介绍
超级链接
超级链接的标记<a></a>，双边标记，是行内元素
URL介绍
绝对URL和相对URL地址
相对URL地址：一般是用于链接本网站中的各个文件的路径。
其它常用的链接
锚点链接：实现在一个网页的不同部分进行跳转
图片标记
定义列表
定义列表的格式：
<dl> <dt>定义标题</dt> <dd>描述信息</dd> </dl>
标记的解释说明：
dl，define List
dt，define title
dd，define description
<dl>标记中，至少包含一个<dt>或<dd>标记，也可以包含多个<dt>或<dd>。
<dt>定义标题，这个标记是必须的；
<dd>描述信息，可以根据情况使用，如果不需要它，可以不用加。
<div>和<span>
<div></div>和<span></span>标记，没有任何意义，但在网页中，又是使用最多的标记。
这两个标记，基本上没有太多的属性。
<div>和<span>这两个标记，一般要结合CSS来实现效果，或者说，DIV+CSS来实现各种样式。
块元素和行内元素(详细在CSS中再讲)
块元素(标记)：是块元素的前后，会自动插入一个换行符。块元素会另起一行进行排版。
比如：<div>、<p>、<ul><ol><dl>、<pre>、<h1>、<h2>等
行内元素(标记)：行内元素的高度和宽度由内容决定。多个行内元素将排在同一行，不会另起一行进行排版。
比如：<font><b><i><u><a><span>等
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>定义列表</title>
<style type="text/css">
div,p,span,b{border:1pxsolid #993300;background-color:#f0f0f0;}
</style>
</head>
<body >
<h2>定义列表的应用</h2>
<p><font color="red"size=4>说明文字：小试牛刀！</font></p>
<hr color="green" size=2>
<dt><b>HTML简介</b></dt>
<dd>html是超文本链接</dd>
<dt><b>CSS介绍</b></dt>
<dd>层叠样式表</dd>
<h2>div 和 span 标记 ，单独使用，没有任何效果</h2>
<hr color="green" size=2>
<div>从“众筹之王”破产看无人机创业必须要迈的四道坎不过就在上周，Zano无人机，这个2014年年底Kickstarter的众筹冠军，未坚持到自己的一周年生日便宣布倒闭，15000多台订单大多无法交货，支持者的340万美元打了水漂。</div>
<div>从“众筹之王”破产看无人机创业必须要迈的四道坎不过就在上周，Zano无人机，这个2014年年底Kickstarter的众筹冠军，未坚持到自己的一周年生日便宣布倒闭，15000多台订单大多无法交货，支持者的340万美元打了水漂。</div>
<div></div>
<div>块元素会自动另起一行</div>
<p>p标记也是块元素，比如：div、p、ul ol dl pre h1 h2等 </p>
<span>span标记1，行元素</span>
<span>span标记2,内容多宽，就占用多宽</span>
<span>span标记3，不会自动换行</span>
<b>b标记也是行元素</b>
<b>b标记 2</b>
<b>b标记 3</b>
</body>
</html>
网页颜色表示
英文单词表示：red、green、blue、yellow等。
10进制表示：
有10基本数：0、1、2、3、4、5、6、7、8、9
红色：rgb(255,0,0)
绿色：rgb(0,255,0)
蓝色：rgb(0,0,255)
16进制表示：
有16个基本数：0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F
红色：#FF0000
绿色：#00FF00
蓝色：#0000FF
RGB色彩模式（理解）
自然界中所有的颜色，都可以通过红、绿、蓝三种光的不同波长，来混合而成。共可以混合约1670万种颜色。
RGB色彩模式也叫加色模块，任何两种色加在一起，可以产生第三种颜色。
红+绿=黄
红+蓝=紫色
绿+蓝=青色
在计算机中，每一种基本色用0-255之间的亮度值来表示。
黑色：RGB(0,0,0) #000000
白色：RGB(255,255,255) #FFFFFF
每一种基本色，都是用1个字节(8位二进制，10101010)来表示(2^8=256)。256*256*256=1670万色
<fontcolor=“#ff0000”></font>
<fontcolor=“rgb(255,0,0)”></font>
<fontcolor=“red”></font>
注意：10进制在HTML中存在兼容性问题，一般用于CSS中。16进制在HTML和CSS中都可以正常显示。
滚动字幕标记
<marquee></marquee>
常用属性：
是块元素
Direction：滚动的方向，取值：left、 right、up、 down
Behavior：滚动的方式，取值：alternate(弹动)、scroll(滚动)、slide(滚动一次)
bgColor：背景颜色
width：滚动的宽度
height：滚动的高度
align：水平对齐方向，取值：left center right
scrollAmount：滚动的步长值，值越大，滚动的越快。
scrollDelay：两次滚动间的停留时间
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>滚动字幕</title>
<styletype="text/css">
marquee{border :1pxsolid #F00}
</style>
</head>
<marqueedirection="up" height="200" bgcolor="#CCCC33"behavior="scroll" scrollamount="5"scrollamount="2">
<ul>
<li>Hello World !</li>
<li>Hello World !</li>
<li>Hello World !</li>
<li>Hello World !</li>
<li>Hello World !</li>
<li>Hello World !</li>
</ul>
</marquee>
<body>
</body>
</html>
计算机进制(了解一下)
10进制：基本数0、1、2、3、4、5、6、7、8、9 运算规则：逢十进一
2进制：基本数0、1 运算规则：逢二进一 例如：11 加1后 100
8进制：基本数0、1、2、3、4、5、6、7，运算规则：逢八进一
八进制的基数R=2^3=8，也就是说：一位8进制可以用3位二进制来进行表示。
16进制：基本数0、1、2、3、4、5、6、7、8、9、A、B、C、D、E F，运算规则：逢16进一
16进制的基数R=2^4=16，也就是说，一位16进制可以用4位二进制来进行表示。
10进制 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
8进制 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
20 |
21 |
22 |
23 |
16进制 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
A |
B |
C |
D |
E |
F |
10 |
11 |
12 |
13 |
2进制 |
1 |
10 |
11 |
100 |
101 |
110 |
111 |
1000 |
1001 |
1010 |
1011 |
1100 |
1101 |
1110 |
1111 |
计算机编码介绍(字符集)
（1）什么是计算机编码
计算机只能处理二进制的数据，其它数据，比如：0-9、a-z、A-Z，这些字符，我们定义一套规则来表示。假如：A用110表示，B用111表示等。
（2）常用的字符编码
ASCII码：美国发布的，用1个字节(8位二进制)来表示一个字符，共可以表示2^8=256个字符。
美国的国家语言是英语，只要能表示0-9、a-z、A-Z、特殊符号。
ANSI编码：每个国家为了显示本国的语言，都对ASCII码进行了扩展。用2个字节(16位二进制)来表示一个汉字，共可以表示2^16＝65536个汉字。
中国的ANSI编码是GB2312编码(常用汉字的编码) 对6763汉字进行编码，600多特殊字符。
日本的ANSI编码是JIS编码；
台湾的ANSI编码是BIG5编码；
……
GBK：对GB2312进行了扩展，用来显示罕见的、古汉语的汉字。现在已经收录了2.1万左右。并提供了1890个汉字码位。K的含义就是“扩展”。
Unicode编码(统一编码)：用4个字节(32位二进制)来表示一个字符，想法不错，但效率太低。例如，字母A用ASCII表示的话一个字节就够，可用Unicode编码的话，得用4个字节表示，造成了空间的极大浪费。
A 用0000 0000 0000 0000 0000 0000 01000000表示
UTF-8(Unicode Transform Format)：根据字符的不同，选择期编码的长度。比如：字符A用1个字节要以，一个汉字用2个字节表示。
超级链接
1、概念：要想从一个网页跳转到另一个网页，就需要使用“超级链接”来实现。
2、超级链接的标记<a></a>，双边标记，是行内元素
常用属性：
Href：目标URL，如：href=http://www.sina.com.cn href=“about/index.html”
Name：主要用于设置一个锚点的名称。
Target：设置目标页面打开方式。
_blank：在新窗口中来打开目标文件，原来的窗口不关闭
_self：在当前窗口中来打开目标文件，原来窗口中的内容将被替换掉。
_top：在最顶层窗口中来打开目标文件，常用于“框架技术”中
_parent：在父级窗口中来打开目标文件，常用于“框架技术”中
例如：<a href=“http://www.sina.com.cn”></a>
3、URL介绍
URL(UniformResource Locator，统一资源定位器)
例如：http://php.itcast.cn/about/20140706/230.html
一个URL(网址)由四个部分构成：
第一部分：协议，比如：http:// ftp://
如何判断是什么服务器？主要是看安装了什么样的服务器软件？Apache软件是WWW服务器
如果安装了FTP的软件的服务器，FTP服务器；
如果安装了邮箱服务器的软件，那就是“邮件服务器”；
如果安装了MySQL软件的服务器，那就是“数据库服务器”；
第二个部分：主机名，比如：php.itcast.cn就是一个主机的二级域名(一级域名是以WWW开头的)。
第三部分：目录名，比如：about/20140706/
第四部分：文件名，比如：230.html
4、绝对URL和相对URL地址
绝对URL地址：一般是以主机名或IP地址开始的一个路径。比如：
http://www.sina.com.cn/index.html
http://www.sina.com.cn/about/index.html
http://www.sina.com.cn/news/20140706/230.html
http://www.sina.com.cn/users/register.php
提示：绝对URL的访问，总是从一个固定的起点开始，它们是访问的目标文件不相同，简单说：起点是固定的，目标是可变的。
相对URL地址：一般是用于链接本网站中的各个文件的路径。
在写相对URL地址时，要确定两个条件吧：
1） 你是谁？当前文件是谁，在哪里？
2） 目标文件是谁？目标文件在哪里？
3） 当前文件和目标文件是什么关系？
a) 平级关系的路径，直接目标文件名即可
b) 目标文件在下一级，先写同级的文件名称，再加一个斜线，后跟目标文件名。images/01.gif
c) 目标文件在上一级，往上一级先写“./”
i. ../ 代表上一级文件夹
ii. ../../ 代表上二级文件夹 如：../day1/images/01.png
5、其它常用的链接
E-mail链接：<ahref="mailto:[email protected]">给我发邮件</a>
下载链接：任何网页不能直接执行的文件，都会出现下载对话框。
网页可以直接执行的文件：.html .jpg .png .gif .htm
空链接：<a href="#">课外100网论坛</a>
JS空链接：<a href="javascript:void(0)">JS的空链接</a>
提示：在HTML中写JS程序时，一般是以“javascript:”开头，void(0)返回一个假值，什么也不做
JS的弹出一个警告窗口：<ahref="javascript:alert('别烦我！')">请点我！</a>
提示：alert()是JS的Window对象的一个方法，弹出一个字符串信息。
6、锚点链接：实现在一个网页的不同部分进行跳转
第一步：先定义一个锚点(记号)
<a name=“top”></a> 中间一般不写内容
第二步：链接到定义的锚点所在的位置
<a href=“#top”>返回顶部</a>
地址栏中的地址显示：http://www.sina.com.cn/about/index.html#top
HTML的注释：是对某个模块的解释说明，最终在网页中是看不见的。
<!―注释的内容-->
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{
width:200px;/*宽度*/
margin:0pxauto; /*居中显示*/
font-size:18px; /*文字大小*/
line-height:180%;/*行高是原来的1.8倍*/
}
</style>
</head>
<body>
<!--定义一个锚点-->
<a name="top"></a>
<div>！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，
<a href="#top">返回顶部</a>
</div>
</body>
</html>
图片标记
单边标记：<img>
常用的属性
Src：指图片的路径，如：src=“images/bg.gif”
Width：指图片的宽度，不加单位。Width=400
Height：指图片的高度。
Align：指图片的水平对齐方式，取值：left center right
Border：图片的边框线的粗细
Alt：如果图片不显示时，将显示alt指定的内容
Hspace：指图片左右的边距
Vspace：指图片上下的边距
Title：指定图片的提示信息，有利于SEO优化(关键字优化)
说明：title是一个公共的属性，任何标记都有title属性。
注意事项：
（1） 如果要想保证图片等比例缩放，请只设置width和height其中一个。
（2） 如果想实现图文混排的效果，请使用align属性，取值为left或right。
<a href="images/01.gif"target="_blank"><img src="images/01.gif"width="300" border=4 align="right" alt="dasdas" title="214143"hspace=50 /></a>
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{
width:800px;/*宽度*/
margin:0pxauto; /*居中显示*/
font-size:18px; /*文字大小*/
line-height:180%;/*行高是原来的1.8倍*/
}
</style>
</head>
<body>
<!--定义一个锚点-->
<a name="top"></a>
<div>！纯数字，<a href="images/01.gif"target="_blank"><img src="images/01.gif"width="300" border=4 align="right" alt="dasdas" title="214143"hspace=50 /></a>
不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，
<a href="#top">返回顶部</a>
</div>
</body>
</html>
问答题：一个网页上有100张图片，每张图片1MB，请问网页的大小是多少？
所有的外部文件，图片、视频、音乐、附件等，都没有真正的插入到网页中，而是写入一个链接的地址，在需要显示文件时，就从服务器上调用该文件。因此，网页的大小，是由文本和标记决定的。
<meta>标记
XHTML