网页
浏览器 主要特点： 支持标准：HTTP、HTML、XHTML、XML、CSS等
超文本传输协议（http）
静态网页: 1.静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。 2.用超文本标记语言HTML来实现的。后缀名为.htm或.html
动态网页： 显著特点： 1.可以动态产生页面。 2.支持客户端和服务器端的交互功能。
静态网页和动态网页的区别：
- 程序是否在服务器端运行，是重要标志。
- 2.ASP、PHP、JSP
统一资源定位器（URL）
URL的一般形式： 在Internet中的每一个网页文件都有自己的URL地址。 协议://服务器地址(域名或IP地址) : 端口号/路径(含文件名) 必需 可省 http:超文本传输协议，wwW中使用的是http 如:home.sina.com省略了路径 如:home.sina.com news/ 1.htm ' *标准的URL 如: 新浪网 1.jpg图片文件的URL
网站访问方式 在Internet上，只能通过域名或IP地址来访问服务器。 域名和IP地址： 域名可以不唯一，但是每一个域名对应的IP地址只有一个。 网络内部能真正识别的只有IP地址。
IP地址
IP网络使用32位地址，以点分十进制表示，分为4段，每段8位。其十进制数范围从O到255，各段之间用 “.”进行分隔，如192.168.0.1
IP地址格式为:IP地址=网络地址net-id十主机地址host-id
域名 域名的构成：字母、狮子、下划线以"." 域名的一般结构： 计算机主机名.机构名.顶级域名
域名系统（DNS）
所有网站从技术上来说都属于B/S结构。
网站目录结构的设计注意事项:
- 不要将所有文件都放在根目录下;
- 按栏目内容建立子目录;
- 在每个主目录下都建立独立的images目录;
- 层次不要太深，一般不超过3层;
- 不要使用中文目录;
- 见名知意。
文字排版基础
标签<span>
<span>可以嵌套在其他元素中，将其部分文本挑选出来设计独立样式，而不会破坏原有的布局
<p>请使用<span style="color:red;">红色</span>标记作为重点内容的标识符号<p>
id选择器
用于选择具有特定id属性值的HTML元素，并为其指定样式。网页中，元素的id属性值是唯一的。
<style type="text/css">
#text1{
text-align:center;
color:blue;
}
</style>
<body>
<p id=”txt1”>这是一段测试文本<p>
<p>这是一段测试文本</p>
</body>
font-family属性
使用font-family属性设置字体。可以为元素按优先级指定多种字体，如果浏览器不支持第一种字体，则会尝试下一种。
body{
font-family:"Arial”,"Verdana”,"Microsoft YaHei”,"黑体","宋体";
}
font-size属性
使用font-size设置字号。
- 关键字设置字号的关键字有xx-small、x-small、small、medium、large、x-large、xx-large，其中xx-small最小，xx-large最大。
- 绝对数值常用的绝对数值有px（像素）和pt（磅）。
- 相对数值常用的相对数值有em和%，它们是以父元素为参考基准来计算当前元素的字体大小。1em和100%总是等于父元素font-size的值。
font-weight属性
使用font-weight属性设置字体粗细。font-weight的取值可以是normal（标准）、bold（粗体）、bolder（更粗）、lighter（更细）或者[100,200,300,400,500,600,700,800,900]当中的数值，其中400等同于normal，700等同于bold。
h1{font-weight:normal;}
span{font-weight:bold;}
h2{font-weight:500;}
line-height属性
使用line-height设置行高。可以使用像素、百分比或数值对line-height进行设置。例如要设置1.5倍的行高，那么右图中的3种方法都可以实现相同的效果。
<style type="text/css">
#par1{
font-size:14px;
line-height:21px;/*14px*1.5=21px*/
}
#par2
font-size:14px;
line-height:150%;
}
#par3
font-size:14px;
line-height:1.5;
}
</style>
border属性
使用border属性来设置边框。border属性包括border-width、border-style和border-color，可以分别设置这些属性，也可以缩写在border属性里。
<style type="text/css">
#par1{
border::1 px solid red;/缩略写法，统一设置4条边框的样式*/
}
#par2{
border-width:1px 2px 3px 4px;
/体上边框1px、右边框2px、下边框3px、左边框4px*/
border-style:solid dashed dotted double;
/上边框实线、右边框虚线、下边框，点线、左边框双线*/
border-color:black red green blue;
/体上边框黑色、右边框红色、下边框绿色、左边框蓝色*/
}
</style>
元素的边框有4条：上边框border-top、下边框border-bottom、左边框border- left以及右边框border- right，可以同时设置4条边框的样式，也可以分别设置不同的样式。
#par3{
border-top:2 px solid blue;/*上边框*/
border-bottom:2 px dashed blue;/*下边框*/
border-let:6 px dotted red;/*左边框*/
border-right:6 px double red;/*右边框*/
}
font-style属性
使用font-style属性设置字体风格。font-style的属性值通常有normal（标准字体，默认值）、italic（斜体）和oblique（倾斜体）。
text-decoration属性
使用text-decoration属性设置文本的修饰。text-decoration的常用属性值有underline（下划线）、overline（上划线）和line-through（穿过文本的线）。
background-color属性
使用background-color属性设置背景色。background-color可以使用颜色关键字、十六进制颜色值和rgb颜色值来设定。
h1{background-color:gray;}
h2{background-color:#bbffee;}
p{background-color:rgb(255,0,0);}
页脚样式
#footer{
font-size:12px;
color:white;
text-align:center;
line-height:250%;
background-color:black;
}
列表
区块标签<div>
网页中通常使用<div>标签对文档进行区块的划分，<div>中可以嵌套其他元素，分区后有利于对区块中的元素进行样式设置。
· <dl></dl>标签用于指定定义列表;
· <dt></dt>和<dd></dd>并列嵌套与<dl></dl>中;
· <dt></dt>用于指定术语名词，<dd></dd>标签用于对名词进行解释和描述,一对<dt></dt>可以对应多对<dd></dd>，也就是说可以对一个名词进行多项解释。
1、无序列表
<ul>
<li>内容1</li>
<li>内容2</li>
...
</ul>
2、有序列表
<ol>
<li>内容1</li>
<li>内容2</li>
...
</ol>
3、自定义列表
<dl>
<dt>标题</dt>
<dd>内容</dd>
</dl>
后代选择器
后代选择器使用“选择器1 选择器2”表示，中间使用空格分隔，用于选取父元素内部符合条件的子元素。
div p{
background-color:black;
}
#txt div h2{
border:1px solid gray;
}
通配符选择器
通配符选择器使用“*”表示，用于选取所有元素，与后代选择器组合使用可以选取某个元素中的所有子元素。
*{
background-color:black;
}
div*{
border:1px solid gray;
}
MARQUEE 标记
<MARQUEE DIRECTION=LEFT>啦啦啦，我从右向左移!</MARQUEE><P>
<MARQUEE DIRECTION=RIGHT>啦啦啦，我从左向右移!</MARQUEE><P>
<MARQUEE BEHAVIOR=SCROLL>啦啦啦，我一圈一圈绕着走!</MARQUEE><P>
<MARQUEE BEHAVIOR=SLIDE>啦啦啦，我只走一次就歇了!</MARQUEE><P>
<MARQUEE BEHAVIOR=ALTERNATE>啦啦啦，我来回走!</MZR∩TTEE>
字符实体 常用字符实体； · 空格 · "双引号 · <小于 · >大于
超级链接
target属性 指定打开链接的目标窗口。其默认情况下，超级链接打开新页面的方式是自我覆盖。 · _self: 表示链接的对象在当前窗口打开，为默认设置，一般不需要设置。 · _blank: 表示链接的对象将在一个新的窗口中打开。 · _parent: 表示链接的对象在上一级窗口打开，一般使用框架技术的网页会经常使用。 · top: 表示链接的对象在浏览器的整个窗口中打开，忽略任何框架。 new
图文上下的混排
<img src--”图像文件地址”alt=”对该图像的简要描述”/> <img>标签有两个必需的属性：src和alt。 ◆src属性指明了图像源文件所在的路径和文件名。 ◆alt属性规定了图像的替代文本。
行内元素与块状元素
行内元素和块状元素是HTML中的两种基本元素，常见的块状元素如h1、p、div、ul、li等，常见的行内元素如img、span、a、em等，两者主要区别如下：
- 块状元素独占一行，且宽度会占满父元素宽度；行内元素不会独占一行，与之相邻的行内元素可以排在同一行。
- 块状元素可以设置width和height，而行内元素设置width和height无效果。
- 块状元素可以设置margin和padding属性控制4个方向的内外边距；行内元素只能控制左右的内外边距，上下的内外边距没有效果。
相对定位与绝对定位
position属性用于指定元素的定位方法，通常有4种定位方法：static、relative、absolute和fixed。这里先来认识前面三种定位：
- static
static是position属性的默认值，指的是静态定位，元素出现在正常的文档流中，忽略top、bottom、left、right或者z-index属性的效果，没有定位。 - relative
relative表示相对定位，将元素相对其正常位置进行移动。元素设置此属性之后仍然处于文档流中，不影响其他元素的布局，但是移动元素会导致它覆盖其他元素，产生叠加效果。
#box2{
background-color:yellow;
position:relative;
left:50px;
top:20px;
}
- absloute
absolute表示绝对定位，元素会选择距离自己最近的且不是static的父元素作为参考对象来进行定位。元素设置此属性之后会脱离文档流，并释放原来所占空间。
图文混排
<style type="text/css">
*{ /* 全局选择器 */
margin: 0;
padding: 0;
list-style-type: none; /* 清除项目符号 */
}
li{
overflow: hidden; /* 溢出：隐藏 */
padding-bottom: 15px; /* 上边距 */
padding-top: 15px; /* 下边距 */
border-bottom: 1px dashed #999; /* 下边框：虚线 */
}
img{
display:block; /* 显示：块 */
float:left; /* 浮动：左 */
margin-right:10px; /* 右边距 */
}
p{
font-family:"微软雅黑";
font-size:14px;
color:#63C;
text-indent:2em;
line-height:200%; /* 行距 */
text-align:justify; /* 水平对齐：两端对齐 */
}
</style>
</head>>
<body>
<ul>
<li>
<img src="../DemoWeb/00.jpg" alt="这是一张照片" width="200" height="200" title="tishiwenzi">
<p>文本</p>
</li>
<li>
<img src="../DemoWeb/00.jpg" alt="这是一张照片" width="200" height="200" title="tishiwenzi">
<p>文本</p>
</li>
</ul>
</body>
