1.web概念概述
1.1 JavaWeb介绍：
学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语⾔。
HTML是⽹⻚内容的载体。内容就是⽹⻚制作者放在⻚⾯上想要让⽤户浏览的信息，可以包含⽂字、图⽚、视频等。
CSS样式是表现。就像⽹⻚的外⾐。⽐如，标题字体、颜⾊变化，或为标题加⼊背景图⽚、边框等`。所有这些⽤来改变内容外观的东⻄称之为表现。
JavaScript是⽤来实现⽹⻚上的特效效果。如：⿏标滑过弹出下拉菜单。或⿏标滑过表格的背景颜⾊改变。还有焦点新闻（新闻图⽚）的轮换。可以这么理解，有动画的，有交互的⼀般都是⽤JavaScript来实现的
总结
- HTML：用于搭建基础网页，展示页面的内容
- CSS：用于美化页面，布局页面
- JavaScript：控制页面的元素，让页面有一些动态的效果
1.2软件架构：
1.2.1 C/S: Client/Server 客户端/服务器端
在用户本地有一个客户端程序，在远程有一个服务器端程序
* 如：QQ，迅雷…
优点：
1. 用户体验好
缺点：
1. 开发、安装，部署，维护 麻烦
*
1.2.2. B/S: Browser/Server 浏览器/服务器端
只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
优点：
1. 开发、安装，部署，维护 简单
缺点：
1. 如果应用过大，用户的体验可能会受到影响
2. 对硬件要求过高
*
1.2.3 B/S架构详解
资源分类：静态资源，动态资源
1. 静态资源：
使用静态网页开发技术发布的资源。
特点：
- 所有用户访问，得到的结果是一样的。
如：文本，图片，音频、视频, HTML,CSS,JavaScript
如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
2. 动态资源(重点)：
使用动态网页及时发布的资源。
特点：
- 所有用户访问，得到的结果可能不一样。
如：jsp/servlet,php,asp…
* 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
结论：我们要学习动态资源，必须先学习静态资源！
2. HTML
2.1. HTML简介
HTML是⽤于创建⽹⻚的语⾔。我们通过使⽤HTML标记标签创建html⽂档来创建⽹⻚。HTML代表超⽂本标记语⾔。HTML是⼀种标记语⾔，它具有标记标签的集合
2.2概念：
HTML： Hyper Text Markup Language 超文本标记语言，是最基础的网页开发语言。
超文本:
- 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
标记语言
- 由标签构成的语言。<标签名称> 如 html，xml
- 标记语言不是编程语言
2.3. 快速入门：
语法：
html文档后缀名 .html 或者 .htm
标签分为
1. 围堵标签：有开始标签和结束标签，
标签中间的文字就是标签所包含的内容。如
2. 自闭和标签：开始标签和结束标签在一起。如标签可以嵌套：
需要正确嵌套，不能你中有我，我中有你
错误：<a> <b> </a></b>
正确：<a><b> </b></a>在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
html的标签不区分大小写，但是建议使用小写。
< h1>和< H1 >是⼀样的。浏览器会识别< CODE>和< code>，甚⾄< CoDe >作为代码元素的起始标签
3. 标签学习：
1. 文件标签：构成html最基本的标签
html：根标签
html文档的根标签，顶层标签。所有的变迁都放在该标签里面的
head：头标签
头标签。用于指定html文档的一些属性。引入外部的资源。
标签⽤于定义⽂档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、<style>、<link>、 <meta>等标签，
title：标题标签
表示该页面的主题。
body：体标签
在<body>和</body>标签之间的内容是⽹⻚的主要内容，如<h1>、<p>、<a>、<img>等⽹⻚内容标签，在这⾥的标签中的内容会在浏览器中显示出来
< !DOCTYPE >：声明版本
作用：<!DOCTYPE> 声明帮助浏览器正确地显示⽹⻚。
Web 世界中存在许多不同的⽂档。只有了解⽂档的类型，浏览器才能正确地显示⽂档。HTML 也有多个不同的版本，只有完全明⽩⻚⾯中使⽤的确切 HTML 版本，浏览器才能完全正确地显示出 HTML ⻚⾯。
是 HTML 标签。它为浏览器提供⼀项信息（声明），即 HTML 是⽤什么版本编写的
HTML5:
<!DOCTYPE html>
HTML 4.01
<h!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML 5的实例
< meta charset=“utf-8”>
作用：HTML乱码解决
当⽹⻚出现乱码时，在<head></head>标签之间添加: <meta charset="utf-8">设置字符集
注意：如果HTML文件里面没有指定字符集可能会乱码，如果是中文科目采用GBK来解码，所以就会乱码。
*
2. 文本标签：和文本有关的标签
注意：换行的制表符都会被解析成空格
- 文件标签：构成html最基本的标签
* html:html文档的根标签
* head：头标签。用于指定html文档的一些属性。引入外部的资源
* title：标题标签。
* body：体标签
* ：html5中定义该文档是html文档- 文本标签：和文本有关的标签
- 注释：
- < h1> to < h6>：标题标签
- h1~h6:字体大小逐渐递减
- < p>：段落标签
- < br>：换行标签
- < hr>：展示一条水平线
- 属性：
- color：颜色
- width：宽度
- size：高度
- align：对其方式
- center：居中
- left：左对齐
- right：右对齐
- 属性：
- < b>：字体加粗
- < i>：字体斜体
- < font>:字体标签
- < center>:文本居中
- 属性：
- color：颜色
- size：大小
- face：字体
- 属性：
- 文本标签：和文本有关的标签
2.1 注释**：
< !-- 注释内容 – >
2.2 .< h1> 标题内容 < /h6 >：标题标签 **
标题（Heading）是通过<h1> - <h6>等标签进⾏定义的。
<h1>定义最⼤的标题。<h6>定义最⼩的标题。
<html>
<body>
<!--标题标签：h1~h6-->
<h1>Html</h1>
<h2>Html</h2>
<h3>Html</h3>
<h4>Html</h4>
<h5>Html</h5>
<h5>Html</h5>
</body>
</html>
2.3 < p>：段落标签
- 浏览器会⾃动地在标题的前后添加空⾏。
- 默认情况下，HTML 会⾃动地在块级元素前后添加⼀个额外的空⾏，⽐如段落、标题元素前后。
- 请确保将 HTML heading 标签只⽤于标题。不要仅仅是为了产⽣粗体或⼤号的⽂本⽽使⽤标题。 应该将
h1⽤作主标题（最重要的），其后是h2（次重要的），再其次是h3，以此类推。
<html>
<body>
<!--段落标签<p></p>-->
<p>段落1</p>
<p>段落2</p>
</body>
</html>
2.4 < br>：换行标签
如果希望在不产⽣⼀个新段落的情况下进⾏换⾏（新⾏），请使⽤ < br />标签：
< br/>标签作⽤相当于word⽂档中的回⻋
<html>
<body>
how are you <br /> i'm fine
</body>
</html>
< br>还是< br />?
< br> 与 < br /> 很相似。
在 XHTML、XML 以及未来的 HTML 版本中，不允许使⽤没有结束标签（闭合标签）的 HTML 元素。即使
在所有浏览器中的显示都没有问题，使⽤
也是更⻓远的保障
2.5.< hr>：展示一条水平线
< hr/>标签和< br/>标签⼀样也是⼀个空标签，所以只有⼀个开始标签，没有结束标签。
属性：
- color：颜色
- width：宽度
- size：高度
- align：对其方式
* center：居中
* left：左对齐
* right：右对齐
<html>
<body>
how are you <hr /> i'm fine
</body>
</html>
2.6强调标签、
如果想在⼀段话中特别强调某⼏个⽂字，这时候就可以⽤到< em>或< strong>标签。
但两者在强调的语⽓上有区别:
- < em> 表示强调，< strong> 表示更强烈的强调。
- 并且在浏览器中< em>默认⽤斜体表示，< strong> ⽤粗体表示。推荐使⽤< strong>表示强调
<html>
<body>
<em>em 标签</em><br />
<strong>strong 标签</strong>
</body>
</html>
2.7 字体标签
字体属性：
- < b>：字体加粗
- < i>：字体斜体
- < font>:字体标签
- < center>:位置标签
<!--
字font体标签：
color:字体的颜色
width：字体的宽度
size：字的大小
face:字体
-->
<font color=pink width=900 size=10 face=微软雅黑 >
BOBO
</font>
- < b>字体加粗
<font color=pink width=900 size=10 >
<b>BOBO</b>
</font>
- < i>：字体斜体
<font color=pink width=900 size=10 >
<i>BOBO</i>
</font>
- < center>< /center>
<font color=pink width=900 size=10 face=微软雅黑 >BOBO</font><br/>
- 属性定义：
* color：
1. 英文单词：red,green,blue
2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
<font color=pink width=900 size=10 face=微软雅黑 >BOBO</font><br/>
<font color="252326" width=900 size=10 face=微软雅黑 >BOBO</font><br/>
<font color=FF00AB width=900 size=10 face=微软雅黑 >BOBO</font><br/>
<br/>
特殊标签
- width：
1. 数值：width=‘20’ ,数值的单位，默认是 px(像素)
2. 数值%：占比相对于父元素的比例
how are you <hr color="pink" width=50 size="10"/> i'm fine
how are you <hr color="pink" width="50%" size="10"/> i'm fine
3. 图片标签：
- img：展示图片
属性：
* src：指定图片的位置 - 相对路径
* 以.开头的路径
* ./：代表当前目录(一个点) ./image/1.jpg
* …/:代表上一级目录（两个点）
<!--img：展示一张图片
src：图片的位置
align:对其方式
alt: 当图片加载错了，显示文字信息
-->
<img src="img/HBuilder.png" alt="HBUilder"/>
<!--
相对路径
以.开头的路径
./ ：代表当前路径 例子：./img1.jsp
。../ : 代表上一级路径
-->
<img src="./img/HBuilder.png"/>
<img src="../img/HBuilder.png"/>
```
#### 4. 列表标签：
#### 有序列表：
* ol: 有序列表始于 < ol> 标签
* li: 每个列表项始于 < li> 标签
<!--
有序列表
ol:列表的开始标签
li:列表项的 开始标签
type：列表项的开始属性
1:数字
A:大写字母
a:小写字母
i:小写罗马数字
I:大写罗马数字
start：从列表项的第几项开始
-->
<ol type="I">
<li>看书</li>
<li>打篮球</li>
<li>跑步</li>
<li>听英语</li>
</ol>
* 无序列表：
* ul: ⽆序列表始于< ul> 标签。
* li: 每个列表项始于 < li>。
```html
<!--
无序列表
ul:无序列表的开始
li:无序列表项
cricle:圆点显示
square:正方形显示
disc:圆圈显示
-->
<ul type="square">
<li>看书</li>
<li>打篮球</li>
<li>跑步</li>
<li>听英语</li>
</ul>
5. 链接标签：
< a>< /a>:定义一个超链接
属性：
- href：指定访问资源的URL(统一资源定位符)
- target：指定打开资源的方式
_self:默认值，在当前页面打开
_blank：在空白页面打开
<!--
超链接：<a></a>
属性：
href：指定访问资源的 URL（统一资源定位符）
可以访问网络上的网站
可以访问本地网页
target：
_self:本页面显示（默认）
_blank:新页面显示
-->
<!--显示超链接-->
<a href="www.baidu.com">百度</a>
<!--显示本地网页-->
<a href="index.html">index页面</a>
<!--本页显示-->
<a href="www.baidu.com" target="_self">本页显示</a>
<!--新页面显示-->
<a href="www.baidu/com" target="_blank">新页面显示</a>
<!--超链接和图片一起显示-->
<a href="index.html"><img src="img/HBuilder.png"></a>
6. div和span：
- div:每一个div占满一整行。块级标签
- span：文本信息在一行展示，行内标签 内联标签
<!--
span:文本信息在一行显示，行内标签，内敛标签
-->
<span>哈哈哈</span>
<!--
div:每个div占一行。会计标签
-->
<div>hehehe</div>
7. 语义化标签：html5中为了提高程序的可读性，提供了一些标签。
- < header> < /header>：页眉
- < footer>< footer>：页脚
8. 表格标签：
- table：定义表格
* width：宽度
* border：边框
* cellpadding：定义内容和单元格的距离
* cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
* bgcolor：背景色
* align：对齐方式 - tr：定义行
* bgcolor：背景色
* align：对齐方式 - td：定义单元格
* colspan：合并列
* rowspan：合并行 - th：定义表头单元格，会变粗体居中
* < caption>：表格标题
* < thead>：表示表格的头部分
* < tbody>：表示表格的体部分
* < tfoot>：表示表格的脚部分，会在表格最后显示
<table border="2" width="50%" cellpadding="0" cellspacing="0" bgcolor="aquamarine" align="center">
<thead>
<caption>班级表</caption>
<tr>
<th rowspan="2">编号</th>
<th>班级</th>
<th>学号</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>计算机</td>
<td>001</td>
</tr>
<tr>
<td colspan="2">1</td>
<td>计算机</td>
<td>002</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>1</td>
<td>计算机</td>
<td>002</td>
</tr>
</tfoot>
</table>
HTML标签：表单标签
表单：
概念：用于采集用户输入的数据的。用于和服务器进行交互。
表单标签 < from>< /from>
< form>< /from>：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围。只有在from标签内的数据才会被提交
- 属性：
* action：指定提交数据的URL
* method:指定提交方式
method分类：一共7种，2种比较常用（post，get）
Post 和get的区别
1. get：
- 请求参数会在地址栏中显示。会封装到请求行中，出现在地址栏里面。
- 请求参数大小是有限制的，URL最多为2KB。
- 不太安全，因为所发送的数据是URL的一部分。
- 可见性：数据在URL里面是对所有用户都是可见的
- 缓存：可以被缓存，收藏为书签
- 数据类型：只能为ASCII字符
2.post：
请求参数不会再地址栏中显示。会封装在请求体中，保存到body里面
请求参数的大小没有限制。
较为安全，因为参数不会保存到浏览器历史或者web日志中。
可见性：相比get较为隐蔽，因为在按F12j进入开发者页面里面可以看见
缓存：不能被缓存
数据类型：没有限制，数据也可以是二进制数据
表单项中的数据要想被提交：必须指定其name属性
get提交
post提交
表单项标签：
< input / >：可以通过type属性值，改变元素展示的样式
type属性：
- text：文本输入框，默认值。 它以显示的方式出现。
placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
- password：密码输入框，会以圆点方式出现
- radio:单选框
注意：- 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
- 一般会给每一个单选框提供value属性，指定其被选中后提交的值。
checked属性，可以指定默认值（默认被选中）。
- checkbox：复选框
- 注意：
1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
2.checked属性，可以指定默认值（默认被选中）
- 注意：
- file：文件选择框：可以通过该属性提交文件
*
- hidden：隐藏域，用于提交一些信息。隐藏域不会显示在页面上但是，他的value会被提交
- email:它会做正则的校验，必须要匹配到格式正确的邮箱，否则不予通过
- 按钮：button：
- submit：提交按钮。可以提交表单
- button：普通按钮
- image：图片提交按钮
* src属性指定图片的路径
- date 和 datetime-local
- data：提交格式是
年-月-日 - datatime-local：提交格式是
年-月-日 小时：分钟
- data：提交格式是
label：指定输入项的文字描述信息
- 注意：
- label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
- label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
select: 下拉列表
- 子元素：option，指定列表项
- 默认项：selected：默认选择它
textarea：文本域
- cols：指定列数，每一行有多少个字符
- rows：默认多少行。行不够了会自动扩容
<body>
<form action="#" method="get">
<label>用户名：<input name="username" placeholder="输入用户名"/><br/></label>
密码：<input type="password" name="=password" /> <br/>
性别：<input type="radio" name="sex" value ="boy"/> 男孩
<input type="radio" name="sex" value= "gril"/> 女孩<br/>
爱好：<input type="checkbox" name="hobby" value="游泳" />游泳
<input type="checkbox" name="hobby" value="看书" />看书
<input type="checkbox" name="hobby" value="跑步" />跑步
隐藏域：<input type="hidden" name="id" value="ABCDS" >
生日：<input type="date" name="brithday"/><br/>
生日：<input type="datetime-local" name="brithday"/><br />
邮箱：<input type="email" nmae="email"/><br />
上传文件<input type="file" name="file" /><br />
取色器：<input type="color" name="color" /><br/>
省份：<select>
<option>请选择</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected>深圳</option>
</select><br/>
自我介绍<textarea cols="10" rows="5" name="discrition"></textarea><br>
<input type="submit" value="登录" /><br/>
<input type="button" value ="一个button" />
<!--src:里面放的图片的路径-->
<input type="image" src="img/HBuilder.png" />
</form>
</body>
3. CSS：页面美化和布局控制
3.1 概念： Cascading Style Sheets 层叠样式表
- 层叠：多个样式可以作用在同一个html的元素上，同时生效
3.2 好处：
- 1.功能强大
- 2.将内容展示和样式控制分离
- 降低耦合度。解耦
- 让分工协作更容易.分别写HTML和css，然后再和一起
- 提高开发效率
3. 3 CSS的使用：CSS与HTML结合方式
3.3.1 内联样式（不推荐）
- 在标签内使用style属性指定css代码
*如：< div style=“color:red;”>hello jojo< /div>
3.3.2. 内部样式（推荐）
- 在head标签内，定义style标签，style标签的标签体内容就是css代码
- 如：
<html>
<head>
<!--Css代码-->
<style>
div{
color:pink;
}
</style>
</head>
<body>
<div>hello CSS</div>
</body>
</html>
3. 外部样式（推荐）
1 定义css资源文件。
2.在head标签内，定义link标签，引入外部的资源文件
如：* a.css文件： div{ color:green; } < link rel="stylesheet" href="css/a.css"> < div>hello css< /div> < div>hello css< /div>- 注意：
- 1,2,3种方式 css作用范围越来越大
- 1方式不常用，后期常用2,3
- 3种格式可以写为：
- 注意：
4. css语法：
4.1 格式：
`**选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}**
- 选择器:筛选具有相似特征的元素
- 注意：
*每一对属性需要使用；隔开，最后一对属性可以不加；
4.2选择器：筛选具有相似特征的元素对其样式进行改变
4.2.1分类：
1. 基础选择器**
1. id选择器：选择具体的id属性值的元素.
建议在一个html页面中id值唯一
* 语法：#id属性值{ 属性的样式 }
* 注意：id选择器优先级最高2. 元素选择器：选择具有相同标签名称的元素
* 语法： 标签名称{ 属性样式 }
* 注意：id选择器优先级高于元素选择器3. 类选择器：选择具有相同的class属性值的元素。
* 语法：.class属性值{}
* 注意：类选择器选择器优先级高于元素选择器
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style >
/*-id选择器-*/
#div1{
color:greenyellow
}
/*元素选择器 */
p{
color: royalblue;
}
/*类选择器*/
.class{
color: blue;
}
</style>
</head>
<body>
<div id="div1">Html</div>
<div>CSS</div>
<p>hello HTML</p>
<p class="class">hello HTML</p>
</body>
</html>
4. 扩展选择器：**
1. 选择所有元素：
* 语法： *{}2. 并集选择器：
* 选择器1,选择器2{}3. 子选择器：筛选选择器1元素下的选择器2元素
* 语法： 选择器1 选择器2{}4. 父选择器：筛选选择器2的父元素选择器1
* 语法： 选择器1 > 选择器2{}5. 属性选择器：选择元素名称，属性名=属性值的元素,一般用于input标签
* 语法： 元素名称[属性名=“属性值”]{}
例子：input [ type =‘text’ ] { }6. 伪类选择器：选择一些元素具有的状态
* 语法： 元素:状态{}
* 如：
* 状态：
* link：初始化的状态
* visited：被访问过的状态
* active：正在访问状态
* hover：鼠标悬浮状态
<html>
<head>
<style>
a:link{
color: black;
}
a:hover{
color: bisque;
}
a:active{
color: green;
}
a:visited{
color: red;
}
</style>
</head>
<body>
<a href="#" >Test</a>
</body>
</html>
4.3. 属性
1. 字体、文本
- font-size：字体大小
- color：文本颜色
- text-align：对其方式
- line-height：行高
2. 背景
- background：
3. 边框
- border：设置边框，复合属性
4. 尺寸
- width：宽度
- height：高度
5. 盒子模型：控制布局
- margin：外边距
- padding：内边距
- 默认情况下内边距会影响整个盒子的大小
- box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小
- float：浮动
* left
* right
