web简介：万维网（world wide web）是一个有相互连接的超文本组成的系统，通过互联网访问
URL（uniform resource locator 统一资源定位符）
组成部分：协议、服务期地址（域名）、资源路径
网络应用程序框架：
B/S框架（browser/server）
通过浏览器访问网络程序
C/S架构(browser/server)
通过客户端应用软件访问网路程序
互联网的发展：
信息共享、信息共建、随时在线、物联网（互联网+）
网页浏览过程：
1、通过输入网址（URL）指定要访问的网页
2、请求：把XXX网页文件传送给我
3、响应：把XXX网页文件传送给你
4、浏览器“解释”网页文件，呈现出网页
网页文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>网页文件</title>
</head>
<body>
<h1>2019.3..24对之前学的web进行复习</h1>
</body>
</html>
网页文件：
浏览器中看到的网页实质为：网页文件
网页文件：
文本文件
扩展名为.html或.htm
文件内容为HTML代码和文本内容
HTML简介：超文本标记语言
HTML不是一种编程语言，而是一种标记语言。标记语言是一套标记语言。标记语言是一套标签
，HTML 使用标签来描述网页
HTML语言三要素：
词汇（标签）、语法（标签的使用规定）、语义（浏览器“理解”的标签的含义）
HTML标记标签通常被当成HTML标签，它是由尖括号包围的关键词，如<html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>demo</title>
</head>
<body>
<h1>你好！</h1>
</body>
</html>
<meta/> 定义页面有关信息，如页面编码、关键词、页面描述
单标签，必须在head标签内、利用属性值进行设置
标签分类：
双标签：由“开始标签“和”结束标签”两部分组分组成。结束标签比开始标签
多了一个“/”，必须成对使用
单标签：在开始标签中进行关闭，即以开始标签的结束而结束（比如<meta/>）
为什么HTML语言设计出单双两种标签：
双标签：代表标签作用范围
单标签：无需表达范围，仅在标签出现有效
标签与标签之间可以是嵌套的，但先后书序必须保持一致
HTML标签对大小写不敏感，但建议同一规范小写
<body>标签的额可选属性
bgcolor 颜色名称 规定文档的背景颜色
text 颜色名称 规定文档中所有文本的颜色
标题标签
<h1></h1> h1~h6
段落标签：
段落——网页中显示一段文字
<p>.....</p>
图片标签——网页中显示一张图片
<img src="" alt=“”/>
src:指明存储图像的位置
alt:为图片添加替换文本
绝对路径：
本机绝对路径：从盘符开始的完整路径
网络绝对路径：网络可访问地址
相对路径：
先对路径是指先对当前文件或目录的路径
先对路径规则：
1、图片和网页在同级目录 src="./图片名"
2、图片在网页的下一级目录 Src="目录名称/图片名"
3、图片在网页的上一级目录 src="../图片名"
优点：文件夹被移动，其内部文件的相对路径不变
注意事项：
1、不要使用本机绝对路径，推荐使用相对路径
2、图片文件单独存放在一个文件夹中
3、图片文件夹与页面文件放在同一个目录下
超链接
超链接——从一个网页指向一个目标的而连接关系
<a href="链接目标">链接对象</a>
属性：
href:规定链接目标
target:在何处打开目标
_blank:在新窗口打开
_self:在当前窗口打开（默认）
列表
无序列表：是一个没有前后顺序的信息列表
有序列表：是一个有前后顺序的信息列表
无序列表
无序列表使用<ul>标签，每个列表使用<li>标签
列表项内部可以使用段落、换行符、图片、链接以及其他列表等
有序列表
有序列表使用<ol>标签。每个列表项使用<li>标签
列表项内部可以使用段落、换行符、图片、链接以及其他列表等
表格
表格代码：
、、
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
<tr>
<td>李思</td>
<td>21</td>
<td>100</td>
</tr>
<tr>
<td>李思白</td>
<td>20</td>
<td>100</td>
</tr>
<tr>
<td>李白</td>
<td>10</td>
<td>59</td>
</tr>
</table>
</body>
<th></th> ?
语法：
1. 成对出现
2. 嵌套于<tr></tr>标签内 ?
语义：定义“表头”（特殊的单元格） ?
<td></td> ?
语法：
1. 成对出现
2. 嵌套于<tr></tr>标签内 ?
语义：定义表格中的“一个单元格
表格相关的属性：
border:表格表框的额宽度（pixels）
bordercolor:表格边框的颜色
background:表格背景图
bgcolor:表格背景颜色
cellpadding:单元便沿与其内容之间的距离
cellspacing:单元格之间的空白
规定表格元素的宽度（pixels或%）
height：规定表格元素的额高度（pixels或%）
align:表格的对齐方式（left center right）
单元格合并
——跨列
rowspan="几列"
——跨行
border="几行"
表单
表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入信息的元素（文本框、
下拉列表、单选框、复选框等等）；其作用是从访问网站的而用户哪里获得信息，是用户
向服务器除数数据接口
表单标签
<form></form>
语法：1、成对出现
2、表单的开始和结束位置
语义：定义一个表单
相关属性：
action:规定向何处发送提交表单数据。
method:规定以何种方式将表单数据传送ado服务器
所有表单控件都必须放到<form></form>标签之间，
否则用户输入的信息无法提交到服务器
文本框
当用户要在表单中键入字母、数字的内容时，就会用到文本框
<form>
<input type="text" name="名称" value="文本"/>
</form>
1、type：当type=“text”，输入框为文本输入框
2、name:为输入框命名，以备后台程序使用
3、value：为输入框设置默认值。（一般起到提示作用）
密码框
<input type="password" name="名称" value="文本"/>
选择框
单选框：radio
<form>
<input type="radio" value="Male" name="sex" checked/>男
<input type="radio" value="Female" name="sex">女
</form>
复选框：checkbox (同组复选框name属性值需要一致)
2、value：提交数据到服务器的值
3、name=为控件命名
4、checked:当添加checked时，该选项默认选中
文件控件：
当type属性值为file时，用于文件上传
<form>
<input type="file" name="files"/>
</form>
按钮
提交按钮：type="submit" 提交表单到服务器
重置按钮：type="reset" 重置表单信息至初始状态
普通按钮：type="button"
多行文本域
<textarea></textarea>
相关属性：
rows:规定文本区内可见行数
cols:规定文本区内可见列数
<form>
<textarea name="cat" rows="3" cols="3">
</textarea>
</form>
<select>标签
下拉列表
标签：<select></select>
列表项：<option></option>
<form>
<select name="class">
<option value="one" selected>软件一班</option>
<option value="two" selected>软件二班</option>
</select>
</form>
web开发一：第四章 CSS语法基础
CSS概述：
css是cascading style sheet 的缩写。
css是用于（增强）控制网页样式并允许将样式与网页内容分离的一种标记性语言
为什么使用CSS：
单纯HTML方法控制元素样式的缺点：
-针对元素样式设置的属性太少
-修改元素样式太麻烦
-控制元素样式的代码*余度过高
*更专业的样式修饰方法
*改一处动全局的改方法
*更简便的样式修饰方法
*更简约的布局方法
CSS语法：
选择器{属性：属性值；属性：属性值；...........}
1、选择器
2、大括号
3、属性：属性取值（属性之间用；分隔）
选择器的种类（选择器：规定该选择器定义的样式对那些元素生效）：
标签选择器——选择器是HTML标签
p{color:red;font-size:14px;}
<p>这是第一段话</p>
<p>这是第二段话</p>
<p>这是第三段话</p>
影响整个页面中改标签的样式
类选择器——以“.”开头定义的选择器
.red{color:red;font-size:14px;}
<p class="red">这是最后一次</p>
<p class="red">这是最后一次</p>
<p class="red">这是最后一次</p>
影响所有以class属性引用该类的标签样式
注意：类名的第一个字符不能使用数字
元素可以加入多个类。把各个类放在class属性中，各个类名之间用一个空格分隔，
类名的顺序并重要。
<body>
<p class="bluep redd">我可以有多个类名，通过任何一个类名都可以找到我，
通过不同的类名可以给我添加不同的样式。</p>
</body>
ID选择器——以“#”开头定义的选择器
#red{color:red;font-size:14px}
<p id="red">我不会再想你~</p>
行内样式——在元素标签内通过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}
</style>
</head>
用途：对页面中的某些标签或元素设置样式风格。控制当前页面样式，维护较困难
外部样式——引用外部建立的.css文件
<head>
...
<link rel="stylesheet" type="text/css" href="样式文件路径">
...
</head>
用途：可以同时控制多个页面，适用于各类大型网站，可用性最强，推荐使用
样式优先级
ID选择器》类选择器》标签选择器
行内样式》页面样式》外部样式
就近原则，距离元素最近的样式优先级最高