WEB基础入门一：基本结构
一、软件主要分两种架构C/S和B/S
- B/S中的B指的是browsers，是浏览器的意思，S值Server指服务器的意思。
- B/S架构的软件一般都是通过访问一个网页的形式来使用的，而将一些运算等操作放到远端的服务器上。
二、软件开发流程：
1、 网页设计师根据需求设计网页；
2、 前端工程师将设计做成静态网页；
3、后台工程师将静态网页修改为动态网页。
三、网页由三部分组成：
1、结构：HTML：用于描述页面的结构；
2、 表现 :CSS：用于控制页面中元素的样式；
3、行为：JavaScript：用于响应用户的操作。**
万维网联盟（W3C）：万维网联盟World Wid Web Consortium，W3C专门为了定义网页相关的标准而成立 。
四、HTML（Hypertext Markup Language）超文本标记语言。
- HTML使用标签的的形式来标识网页中的不同组成部分。
超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。
一个最基本的HTML页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<h1>网页正文</h1>
</body>
</html>
HTML中的标记指的就是标签。结构：<标签名>标签内容</标签名>
我们还将一个完整的标签称为元素。
1. 可以为HTML标签设置属性，通过属性为HTML元素提供附加信息。属性需要设置在开始标签或自结束标签中。属性总是以名称/值对的形式出现。比如：name=“value”
1、id：id属性作为标签的唯一标识，在同一个网页中不能出现相同的id属性值；
2、class：用来为标签分组，拥有相同class属性的标签我们认为就是一组，可以出现相同的class属性，可以为一个元素指定多个class；
3、title：title属性用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会出现提示文字。
2. 注释：< !-- 注释内容 -->；注释不能嵌套！
3.meta的用法：
1、设置页面的字符集：– <meta charset="utf-8">；
2、设置网页的描述：– <meta name="description" content="">；
3、设置网页的关键字：– <meta name="keywords" content="">；
4、请求的重定向：– <meta http-equiv="refresh" content="5;url=地址"/>。
4.<html>:用于告诉浏览器这个文档中包含的信息是用HTML编写的。一个页面中html标签只能有一个。
5.<head>:– <head>标签用来表示网页的元数据，head中包含了浏览器和搜索引擎使用的其他不可见信息。一个网页中只能有一个head。
6.<title>：表示网页的标题，一般会在网页的标题栏上显示。
7.<body>：用来设置网页的主体，所有在页面中能看到的内容都应该编写到body标签中。
8.<h1> ~ <h6>：h1 ~ h6都是网页中的标题标签，用来表示网页中的一个标题，不同的是，从h1~h6重要性越来越低。
9.<p>：<p>标签表示网页中的一个段落。一般浏览器会在段落的前和后各加上一个换行，也就是段落会在页面中自成一行。
10.<br />：<br />标签表示一个换行标签，使用br标签可以使br标签后的内容另起一行。
11.<hr />：<hr />标签是水平线标签，使用hr标签可以在页面中打印一条水平线，水平线可以将页面分成上下两个部分。
12.<img />：< img />标签是图片标签，可以用来向页面中引入一张外部的图片；– src：指向一个外部的图片的路径；– alt：图片的描述
13.<a>：<a>标签是超链接标签，通过a标签，可以快速跳转到其他页面；– href：指向一个链接地址；– target：设置打开目标页面的位置，可选值：_blank新窗口、_self当前窗口
14.字符实体：
1.小于号 <:– & lt;
2.大于号>:– & gt;
3.空格:– & nbsp;
4.和符号&:– & amp;
5.版权©:– & copy;
6.引号”:– & quot;
7.注册商标®:– & reg;
8.商标™:– & trade;**
五、 CSS:层叠样式表 (Cascading Style Sheets)所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的。
CSS的样式表由一个一个的样式构成，一个样式又由选择器和声明块构成。
语法：– 选择器 {样式名:样式值；样式名:样式值 ; }
– p {color:red ; font-size:12px;}
行内样式:
<p style="color: red;font-size: 30px"></p>(不推荐使用)
内部样式:可以直接将样式写到<style>标签中
<style>
p{color:red; font-size: 30px;}
<style>
外部样式:可以将所有的样式保存到一个外部的css文件中，然后通过<link>标签将样式表引入到文件中。
<style>
<link rel="stylesheet" type="text/css"href="style.css">
<style>
