网页开发基础
学习目标
熟悉HTML的常用标记
熟悉CSS选择器和常用属性
掌握HTML+CSS+JavaScript的开发基础
提示：以下是本篇文章正文内容，下面案例可供参考
一、网页开发基础是什么？
分类：网页技术可以粗略的划分为前台浏览器端技术和后台服务器端技术。早期只需使用HTML即可单独完成前台网页制作，而今天则需要学习整个Web标准体系才能完成规范的前台网页制作。在Web标准中，HTML/XHTML负责页面结构，CSS负责样式表现，JavaScript则负责动态行为。
动态网页：指网页的内容可以根据条件的改变而自动改变。动态网页通常情况下都是数据驱动的网页，即网页中变化的数据是通过数据库的操作来完成的。常见动态网页一般扩展名为asp、aspx、php、jsp等，其共同特点为其网页内的代码都存放的网页服务器上，完成数据库操作后，生成的HTML代码网页发送给客户端的浏览器执行。
静态网页：即纯粹的HTML网页。网页代码除了包括完整的HTML代码之外，还可以包含运行于客户端的JavaScript程序。一般的扩展名为html、htm的网页 为静太网页。其共同点就是其网页内的代码都是在客户端的浏览器中执行的。
HTML(Hypertext Markup Language)，超文本标记语言：HTML命令用于说明并组织网页上的文字、图形、动画、声音、表格、链接等。组织网页元素的HTML命令是由<和>包括的，这些HTML命令也叫HTML标签。一般的HTML标签都是成对出现的，补组织的网页元素放在首尾标签内，如你好，也有少数标签是单个出现的，如
，。
学习网页技术应循序渐进，推荐学习顺序如下：HTML—>CSS—>JavaScript---->ASP—>PHP—>AJax—>ASP.net
编写HTML注意如下4点：
1、任何标签必须用两个括号括起来，即<和>，如：
2、任何单独的标签都是闭合的（闭合就是标签的最后要有一个/来标示结束），比如
就是单独的（注意要在最后加上/，以表示其是独立的）。双标签必须有结束标签，在开始和结束标签中可以有内容。
3、单标签里可以添加部分属性，用空格分隔开，如。而双标签则可以在其开始标签添加部分属性，用空格分隔，如。
4、标签是大小写无关的，跟表示的意思是一样的，标准推荐使用小写。
二、HTML：（超文本标记语言）
主要作用是通过HTML标记对网页中的文本、图片、声音等内容进行描述。
带< >符号的元素被称为HTML标记，标记是放在标记符（< >）中的用户表示某个功能的编码命令，也称为HTML标签或元素。
1.<!DOCTYPE>标记
位于文档最前面，用于向浏览器说明当前文档使用的是哪种HTML，如7-1使用的是HTML5。通常网页必须在开头处使用<!DOCTYPE>标记为所有的HTML文档指定HTML版本和类型。只有这样浏览器才能将该网页作为有效的HTML文档，并按指定的文档类型进行解析。该标记和浏览器兼容性有关，删除后，会把如何展示HTML页面的权力交给浏览器，这样页面显示效果有多种，开发中不允许。
2.< html >标记
位于<!DOCTYPE>标记后，也称根标记，用于告知浏览器其自身是一个HTML文档。
以< html >开始，以< /html >结束，两者之间的内容是文档的头部和主体。
3.< head>标记
该标记用于定义HTML文档的头部信息，也称为头部标记，紧跟中< html>标主要用于封装其他位于文档头部的标记，如< title>、< meta>、< link>及< style>等，其中< title>标记用于描述文档的标题，< meta>可提供有关页面的元信息，也可指定字符编码；< link>用于定义文档与外部资源的关系，其最常见的用途是链接样式表，< style>用于为HTML文档定义样式信息。
注：一个HTML文档只能含有一对< head>标记，并且绝大多数文档头部包含的数据都不会真正作为内容显示中页面中。
4.< body>标记
== 用于定义HTML文档所要显示的内容==，也称为主体标记。里面的信息才是最终展示给用户的。
注：一个HTML文档只能含有一对< body>标记，< body>标记必须在< html>标记内，且位于< head>头部标记之后，与< head>标记是并列关系。
5.HTML文件的创建及运行
首先创建一名为chapter07的文件夹，然后在文件夹中新建一个txt结尾的文本文件，将上述7-1内容编写到文件中，保存文件后，将文件名称改为htmlDemo01，后缀为html。双击即可通过默认浏览器打开。。如果要展示页面效果，可在两< body>标记之间添加内容
三、CSS技术
CSS
层叠样式表单
网页的3个层：
内容层： HTML承载页面的内容 表示层： CSS 的作用就是给网页做化妆的，实现显示效果 行为层： JS 为网页添加程序行为
第一个CSS
CSS 注释
css 中只能使用 /* */ 注释， 不能使用 // 也不能使用
如果使用错误的注释，会造成CSS效果显示失败。
CSS 的3种使用方式
内联式CSS：
直接写在元素的style属性中的css样式
具有最高的优先级别
只作用在当前元素上，不能复用的样式
网页内嵌式
使用
样式保存在.css文件中
使用 元素引用到当前页面中的样式
可以作用在所有引用了CSS文件的网页，可以在这些网页复用
CSS 样式的优先级
当内联样式，内部样式，外部样式，等多个样式作用在同一个元素时候，元素最终优先采用的样式。称为样式的优先级。
浏览器（用户代理）默认样式优先级最低。
内部样式，外部样式，哪个距离元素近，哪个优先
内联样式优先级最高
CSS 继承特性
元素有父子嵌套关系时候，外层设置的可继承CSS属性，可以被子元素继承。
常见的可继承属性： 颜色，字体等
CSS 语法
选择器
元素选择器：使用元素名选择全部的同类元素
p {color: red}
id 选择器：使用#id选择页面中唯一的一个元素
网页中的ID属性应该唯一
#menu {color: red}
类选择器：使用.class 选择一组具有相同class属性的元素
.error {color: red}
一个元素上可以使用多个class，绑定多个类选择器样式
派生选择器： 利用元素的层级关系选择元素，绑定样式
子孙后代选择
/* 选择 ul 中全部的子孙li元素 */
ul li {color: red;}
子选择
/* 选择 ul的li的ul的li 元素 */
ul>li>ul>li {color: #ddd}
选择器组： 为了给一组元素设置一致样式，可以使用组选择器
h1, h2, h3, h4, h5 {boder-bottom: 1px solid #ddd;}
相当于
h1{boder-bottom: 1px solid #ddd;}
h2{boder-bottom: 1px solid #ddd;}
h3{boder-bottom: 1px solid #ddd;}
h4{boder-bottom: 1px solid #ddd;}
h5{boder-bottom: 1px solid #ddd;}
伪类选择器：用于设置元素的不同显示状态时候的效果
鼠标悬停：hover 用于设置鼠标停留在元素上面时候的显示效果。
复合使用选择器：id，类，元素，伪类等选择器可以组合使用
p.error 选择p元素，其class属性包含 error
p.error:hover 选择p元素，其class属性包含 error 并且设置鼠标悬停在上方的效果
CSS 常用属性
关于值的单位
常用属性值：
px 像素
em 字体大小
% 百分比
颜色字面量 red blue 等
16进制RGB颜色如： #48547d
文本相关属性
文字的缩进
text-indent: 2em; /* 文本缩进2个字符 */
设置字体大小
font-size: 12px;
行高
line-height: 1.6em;
设置文字颜色
color: #48547d;
块元素中的文本居中
text-align: center; /* 块元素中的文本居中 */
CSS
Box（盒子） 模型
盒子模型：页面元素绘制时候其占用空间方式
案例：
#box{
margin: 8px; /* 设定外边距，盒子与盒子之间的距离 /
}
#box2{
/ id选择器 优先于 类选择器 /
border: 3px dashed #00f; / 设定边框，盒子皮的厚度 /
/ margin: 18px; / / 对四个边同时设置外边距 /
/ margin-left: 8px;/ / 单独设置左侧外边距 /
/ margin-right: 8px; /
/ margin-top: 18px; /
/ margin-bottom: 8px; */
/* margin: 上 右 下 左; 单行设置4边属性，从后向前
可以省略数值，如果省略则使用对边代替*/
margin: 18px 8px 8px ;
}
.demo{
/* 利用类选择器复用样式 /
width: 100px; / 设定内容区域的宽 /
height: 80px; / 设定内容区域的高 /
padding: 20px;/ 设定内边距，内容与盒子边界的缝隙 /
border: 3px dashed #ddd; / 设定边框，盒子皮的厚度 */
/背景绘制在内边距之内，外边距范围不绘制背景/
background-color: #ff0;
}
盒子模型
1、行内式JS
可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性)，如： onclink
注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号
可读性差，在 HTML 中编入 JS 大量代码时，不方便阅读
特殊情况下使用
2、内嵌式JS
可以将多行JS代码写到
利于HTML页面代码结构化，把单独JS代码独立到HTML页面之外，既美观，又方便
引用外部JS文件的script标签中间不可以写代码
适合于JS代码量比较大的情况