Web开发基础
- 万维网：是一个由许多互相链接的超文本组成的系统，通过互联网访问
- 用户访问网页过程：1）用户在浏览器的搜索引擎上输入想要搜索的网页 2）浏览器向服务器索要所需的内容 3）服务器回应浏览器，发送所需的信息给浏览器 4）浏览器将收到的信息解析成网页呈现给用户
- web浏览器和web服务器：（浏览器=显示网页内容，并让用户和这些文件交互的一种软件。服务器=提供web服务的计算机，根据用户请求将信息资源传递给用户的应用程序）
- URL （统一资源定位符）：协议（http:）+服务器地址（域名）(:tech.sina.com.cn/)+资源途径(it/doc-iavxsaf46.html)
- 网络应用程序架构：1)B/S架构 : 通过浏览器访问的网络应用程序（师大官网，网页版微博，网页版京东） 2)C/S架构：通过客户端应用软件访问的网络应用程序（淘宝，QQ，微信）
- B/S和C/S的各自的优缺点：
无缝维护，跨平台能力强，无需用户安装，用户体验单一（B/S）
不同平台可开发不同版本，升级必重新安装，可直接使用用户硬盘资源，用户体验感强（C/S） - 网页和网页文件的区别：1）网页是构成网站的基本元素，是承载各种网站应用的平台，实质就是一个网页文件。2）网页文件就是文本文件，扩展名为 .html 或 .htm，文件内容为 HTML 代码和文本内容
- 描述单双标签分别在网页中的作用：1）单标签：在开始标签中进行关闭，无需表达范围，仅在标签出现处有效 2）双标签：由“开始标签”和“结束标签”两部分构成。必须成对使用。 代表标签作用范围
HTML基础（一）
什么是html：
超文本标记语言
它不是一种编程语言，而是一种标记语言，标记语言是一套标签，html使用标记标签来描述网页
html元素：从开始标签到结束标签的所有代码
网页元素：网页元素是构成网页的各项元素
书写规范：1）标签间是可以相互嵌套的，但先后书写顺序必须保持一致。2）对标签大小写不敏感，但建议统一规范用小写
网页文件：本质是文本文件，扩展名为.html或者.htm，文件内容为HTML代码和文本内容
html的三个特点
词汇，语法，语义
网页的基本框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>html的基础模板</title>
</head>
<body>
hello world！
</body>
</html>
基本标签的作用：
<html></html>成对出现，分别位于文件的开始和结束的位置
<head></head>成对出现，嵌套于html标签里，位于body标签之上
<title></title>成对出现，嵌套于head内
<meta/>单标签，必须在head内，利用属性值进行设置
标签属性：辅助标签提供更多信息
- body可选属性：bgcolor（文档的背景颜色）text（文档中所有文本的颜色）
- 标题：h1~h6可选
<h1>一级标题</h1>
<h2>二级标题</h2>
....
<h6>六级标题</h6>
- 段落：网页中显示一段文字（会自动分隔出间隙）
<p> 这样表现出一个单独的段落</p>
- 图片链接：
<img/>
属性：src（图片存储的位置）alt（为图片添加替换文本）
<img scr="images/logo.gif" alt="我是logo"/>
本机绝对路径：从盘符开始的完整路径（c:\xxx\xxx\xxx\a.png）
网络绝对路径：网络可访问地址（http://www.a.com/image/a.image）
相对路径：相对于当前文件或者目录的路径
——图片和网页在同级目录:src="./图片名"
——图片在网页的下一级目录：src=“目录名称/图片名”
——图片在网页的上一级目录：“src=“. ./图片名”
优点：文件夹被移动，其内部文件的相对路径不会改变
注意：
1）不要使用本机绝对路径，推荐使用相对路径
2）图片文件单独存放在一个文件夹中
3）图片文件夹和页面文件夹放在同一个目录下
- 超链接：从一个网页指向一个目标链接的关系
<a href="链接目标">链接对象</a>
属性：1）href:规定链接目标
2）target:在何处打开目标 （_blank:在新窗口打开 ）（_self:在当前窗口打开（默认））
<body>
超链接形式
<a href="XXX.html"><h6>假如这是一个链接</h6></a>
图片链接形式
<a href="XXX.com" target="_blank">
<img src="XXX.jpg" alt="这是一个图片链接"/>
</a>
</body>
- 列表：
无序列表：
<body>
<h4>这是一个无序列表</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
</ul>
</body>
有序列表：
<body>
<h4>这是一个有序列表</h4>
<ol>
<li>咖啡</li>
<li>茶</li>
</ol>
</body>
规范：
文件扩展名要以 .html结束
文件名由英文字母，数字或下划线组成
文件名不含特殊符号，如空格，$等，不使用中文。
HTML基础语法，三要素词汇、语法、语义
HTML基础（二）
- 表格：使用表格可以排列网页中的文本，图像以及各种对象
<body>
<table>
<tr>
<th>姓名</th>
<th>班级</th>
<th>学号</th>
</tr>
<tr>
<td>张三</td>
<td>软件3班</td>
<td>60</td>
</tr>
</table>
</body>
表格的一些总结：
1）<table></table>成对出现，定义一个表格
2）<tr></tr>定义表格其中的一行
3）<th></th>镶嵌在<tr></tr>定义为表头（特殊的单元格）
4）<td></td>镶嵌在<tr></tr>定义为表格中的一个单元格
表格的一些属性：
border：表格边框宽度
bordercolor：表格边框颜色
background：表格背景图
bgcolor：表格背景颜色
cellpadding：单元边沿与其内容之间的距离
cellspacing：单元格之间的空白
width：规定表格元素的宽度
height：规定表格元素的高度
align：表格对其方式（left center right）
表格的一些功能：
跨列：<colspan = "2">
跨行：<rowspan = "2">
- 表单：表单是一个包含表单元素的区域，是用户服务器传输数据的接口
<form></form>定义一个表单
相关属性：
action：规定向何处发送提交的表单数据（URL）
method：规定以何种方式将表单数据传送到服务器（get/post）
input是单标签哦！！
1）文本框
<form>
<input type="text" name="名称" value="文本"/>
</form>
type：属性为文本输入框
name：为输入框命名，以备后台程序使用
value：为输入框设置默认值
2）密码框
<form>
<input type="password" name="密码" value=“密码”/>
</form>
type：属性为密码输入框（输入的密码就会成为小黑点）
name：给输入框起一个名字，以被后台收集数据使用
value：为输入框设置默认值
3）单选框
<form>
<input type="radio" value="male" name="sex" checked/>男
<input type="radio" value="famale" name="sex"/>女
</form>
4）复选框
<form>
<input type="checkbox" value="good1" name="goods"/> i like bike
<input type="checkbox" value="good2" name="goods"/> i like car
</form>
type：控件为复选框
value：返回到服务器的值
name的值一定要保持一致
5）文件控件
<form>
<input type="file" name="files"/>
</form>
6)按钮
提交按钮
<input type="submit" value="提交" name="sub"/>
重置按钮
<input type="reset" value="重置" name="res"/>
普通按钮
<input type="button" value="按钮" name=“but”/>
<form></form>属性：action：规定将数据交往何处，method：规定以何种方式将数据传到服务器。（get/poset）
- 多行文本控件
<form>
<textarea name="cat" rows="3" cols="30">
The cat was playing in the garden.
</textarea>
</form><!-->注释<-->
//注释
/*注释*/
- 下拉列表
<form>
<select>
<option value="one" selected>软件一班</option>
<option value="two"> 软件二班 </option>
<option value="three"> 软件三班 </option>
</select>
</form>
- label标签
<label for="控件id名称"> 用户名：</label>
<input type="text" id="id名称" />
作用：没有什么明显的效果，仅当用户点击文本框前的数字时，焦点会自动定位到该文本框，增加用户体验
- 热点地图
<img src="planets.jpg" usemap="#planetmap"/>
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href="venus.html" alt="Venus"/>
<area shape="rect" coords="0,0,110,260" href="sun.html" alt="Sun"/>
</map>
1.<img src="" usemap="#名称"/>
2.<map name="名称” id="名称"></map>
3.<map>中的 id 属性和 name 属性设置为相同，不<img />标签的 usemap 属性匹配，创建图像不映射之间的联系。
- 内联框架
Web开发（一）
CSS语法基础
概述：层叠样式表
用法：允许将样式与网页内容分离的一种标记语言
css的好处：
1）css具有更加专业的样式修饰方法
2）改变一处就可以改变全局
3）更加简便的样式修饰方法
4）更加简约的布局方法
- 选择器：{属性：属性值；属性：属性值；}
规定该选择器定义的样式对哪些元素生效
1）标签选择器——选择器是html标签
p{color:red;font-size:14px;}
<p>这是第一段话</p>
<p>这是第二段话</p>
<p>这是第三段话</p>
影响整个页面中该种标签的样式
2）类选择器——以.开头定义的选择器
.red{color:red;font-size:14px;}
<p class="red">这是第一段话</p>
<p class="red">这是第二段话</p>
<h1 class="red">这是一个标签</h1>
1，影响所有以class属性引用该类的标签的样式
2，类名的第一个字符不能使用数字
3，元素可以加入多个类，把各个类的名字放进class属性里，各个类名之间用一个空格分隔，类名的顺序并不重要
3）id选择器——以#开头定义的选择器
#red{color:red;font-size:14px;}
<p id="red">这是第一段话</p>
影响以id属性引用该选择符的标签样式
在单一页面中，一个id选择器只能使用一次
css样式和html内容整合的三种方式：行内样式，页内样式，外部样式
行内样式：在元素标签通过style属性添加样式
<body>
<标签 style="属性：属性值；属性：属性值；">
</body>
<h1 style="color:#00FC00">将河北中学首页嵌入到此网页中</h1>
用途：置顶网页中个别元素的显示效果，不符合样式与内容分离的原则，不推荐使用
页内样式：在head部分的style标签内添加样式
<head>
<style type="text/css">
p{color:red; font-size:14px;}/*标签选择器*/
.green{color:green; font-size:14px;}/*类选择器*/
#one{color:yellow; font-size:14px;}/*id选择器*/
</style>
</head>
用途：对网页中某些标签或者元素设计样式的风格。控制当前页面样式，维护比较困难。
外部样式：引用外部建立的.css文件
<head>
<link rel="stylesheet" type="text/css" href="样式文件路径">
</head>
用途：可同时控制多个页面，适用于各类大型网站，可用性最强，推荐使用。
| 优点 | 缺点 | 用途 | |
|---|---|---|---|
| 行内样式 | 使用灵活 | 只能控制单一标签，不易维护，代码冗余度高 | 为页面中某些特殊标签进行样式设计时使用 |
| 页内样式 | 同一页面可以使用多次 | 作用范围仅限于定义的页面，其他页面无法使用 | 对特殊的页面设置单独的样式分风格 |
| 外部样式 | 可作用于多个页面，减少重复的工作量，方便后期维护 | 适用于各类网站 |
样式优先级
ID选择器 > 类选择器 > 标签选择器
行内样式 > 页内样式 > 外部样式
就近原则，距离元素最近的样式优先级最高
继承
css样式的叠加：多个样式，在同一内容上共同实现，叫做css的样式叠加
css样式的可继承性：文档中的某些元素，将沿用为其父元素所设置的样式，这种特点叫做css的样式可继承
注释
多行注释：
/*
注释内容
*/