web学习笔记
web前端(运行在浏览器)
html(标签语言)
html4.0（HTML基础用法）
W3C：世界万维联盟
W3C制定了HTML规范，每个浏览器生产厂家都会遵守规范
w3school：快捷文档为开发提供方便
html不区分大小写，语法松散不严格，不过建议还是写严格点，方便自己，方便他人
（B/S架构 浏览器/服务器交互形式，
Browser/Server
优点：升级方便
缺点：速度慢，体验较差
代表：京东百度天猫（网页）
C/S架构 客户端/服务端交互形式
Client/Server
缺点：升级麻烦，维护成本较高
优点：速度快，体验好（较多数的娱乐性系统都是C/S）
）
<html>
<body>
<title></title>
</body>
<body>
基础符号，基本标签
<p></p>段落
<h1></h1>标题字
<h2></h2>
<br> 换行
<hr> 横线 独目标记
<hr colo=""widt="">color和width都是html中的样式
<pre>预留格式 原样输出</pre>
<del></del>删除字
<ins></ins>插入字
<b></b>粗体字
<i></i>斜体字
10<sup>xx</sup>右上角加字
10<sub>xx</sub>右下角加字
<font color=""size=""</font>字体标签
实体符号(特点是以&开始以;结束)
小于号<< // 大于号 >>
a<b>c
空格
aab cdef
表格
table标签
align对其方式 border设置边框像素 width设置表格宽度height高度
th标签，将td换为th时表格内元素会自动加粗并且居中
<center><h1>表格</h1></center>
<table align="center"border="1px"width="60%"height="150px">
<tr align="center">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td align="center">你</td>
<td>我</td>
<td>他</td>
</tr>
row合并时，删除下面的不能删除上面的，单元格合并 rowspan="x"
col合并时，删除哪个没有影响
</table>
thead tbody tfoot标签
将表格分为几部分便于在js中进行操作
<thead>
<tr align="center">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="center">你</td>
<td>我</td>
<td>他</td>
</tr>
</tfoot>
背景颜色与背景图片
bgcolor设置背景颜***ackground设置背景图片
<body bgcolor="red"background="img/bd_logo1.png"></body>
图片
只设置宽度高度会随之更改
img标签就是图片标签
src标签是图片路径
title设置鼠标放在图片上显示信息
alt设置图片加载失败时显示信息
<body><img src="img/bd_logo1.png"width="100px"title="设置悬停信息"alt="图片加载失败时显示">
<br><br>
</body>
超链接
href :hot references 热引用
href属性后一定是一个资源地址既可以是绝对路径也可以是相对路径
target属性 可取值开启新窗口
—blank新窗口
—self当前窗口
—top顶级窗口
—parent父窗口
浏览器向服务器发送请求 request
服务器向浏览器发送数据 response
<body><a href="http://www.baidu.com">百度</body>
<body><a href="http://www.baidu.com"target="_self">百度</body>
列表
<body>
有序列表
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
无序列表
<li>中国
<ul type="disc">
<li>西安
<ul type="square">
<li>鄠邑区</li>
</ul>
</li>
<li>宝鸡</li>
<li>成都</li>
</ul>
<ul></ul>
</li>
</body>
表单 ***
（收集用户信息，用户填写表单，点击提交给服务器）
使用form标签画表单，一个网页中可以有多个表单
表单数据是要提交给服务器的，form标签有一个action标签，用来指定服务器地址
表单数据向服务器提交格式是
格式：action？name=value&name=value&name=value
不想提交不写name就可以，但是不写value时会将value=null提交给java程序
text文本框
password密码框
submit提交框
<form action="路径">
submit表示有提交能力的按钮
账户<input type="text" name="username"/><br>text文本框
密码<input type="password"name="userpwd"/><br>password密码框
<inpute type="submit"value="按钮显示文本">
<inpute type="button">
<inpute type="submit"value="按钮显示文本">submit提交框
<inpute type="reset"value="清空">
<><>
</inpute>
</inpute></inpute></inpute>
</form>
get与post提交方法
采用get提交时，用户提交的信息会显示在浏览器的地址栏上
采用post提交时则不会显示
在默认情况与设置为get时都会为get提交
只有设置为post才会是post提交
当用户信息中有密码等敏感信息时建议采用post提交
<body>
<form action="">
用户名<input type="name"name="username"/>
密码<input type="password"name="userpwd">
确认密码<input type="userpwd">
性别<input type="redio"name="gender"value="1"checked>checked默认选中
<input type="redio"name="gender"value="0">
兴趣爱好<input type="checkbox"name="interest"value="">唱歌
学历<selsct name="grade">
<option value="dz">大专</option>
<option value="bb">本科</option>
<option value="ss">硕士</option>
</selsct>
<br>
简介
<textarea rows="10"clos="50"name="introduce"></textarea>
<br>
<input type="subnit"value="注册"/>
<input type="reset"value="清空"/>
</form>
</body>
下拉列表支持多选
multiple是设置多选，size设置选择个数
<select multiple="multiple"size="">
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
</select>
file控件
文件上传
<input type="file"/>
隐藏域
在页面上用户看不到不过提交时会一起提交
<input type="hidden"name="userid"value="1"/>
readonly disabled
readonly与disabled都是只读不可以修改
不过readonly可以提交给服务器，disabled数据不会提交给服务器（即使有name属性也不会修改）
用户名<input type="name"name="username"vaule="111"readable/>
密码<input type="password"name="userpwd"value="123"disabled/>
inpute控件的maxlength
用来控制最大输入个数
<input type="text"maxlength="3"/>
id属性
任何元素都有id属性，id属性是该节点的唯一标识，所以在同一个html文档中id值不能重复，id可以让我们更快的获取元素，
在javascript，对html文档更快的进行增删改查
id让我们获取元素（节点）更加方便
用户名<input type="name"id="username"name="username"/>
密码<input type="password"id="userpwd"name="userpwd">
div与span
布局作用，div与span都可以称为图层，保证页面灵活布局
盒子套盒子
div是通过定位左下角的xy轴定位
</body>
</html>CSS
一。介绍：
1.是一种专门在浏览器编译并执行的编程语言. 2.用于定位浏览器中HTML标签并对定位的HTML标签中【样式属性】进行统一管理
二。HTML标签属性分类
1.基本属性：
大多数HTML标签都拥有属性，是一个非常庞大群体
比如 id属性，相当于身份证编号，用于区分HTML标签
<input type="text" id="one"/>
<input type="text" id="two"/>
比如 name属性，相当于人名字,允许一组标签拥有相同name
<input type="text" id="one" name="myText"/>
<input type="text" id="two" name="myText"/>
2.样式属性：
是一个非常庞大群体，通知浏览器将HTML标签中数据在
浏览器中以指定形态展示
<div style="background-color:red;color:green;width:300px;height:200px"></div>
3.工作状态属性:
只存在于【表单域标签】中，用于表示【表单域标签】状态.
checked:存在于radio与checkbox中，表示标签是否被选中
disabled:表示标签处于不可用状态
readOny:表示标签处于只读状态
seleteced：存在option标签，表示标签是否被选中
4.监听属性：
监听属性用户与HTML标签之间进行通信通道，监听属性
用于监听用户在何时对当前标签进行何种操作,当指定
操作产生时，监听属性将会通知浏览器调用对应JavaScript
方法处理当前请求三。样式属性开发难度：
1.由于网页经常出现大量的HTML标签拥有相同的样式属性设置，因此导致
前端工程师进行大量重复性开发操作.
2.当用户修改需求时，导致前端工程师进行大量重复维护工作四。CSS编程语言作用：
1.通知浏览器将所有满足定位条件的HTML标签进行统一定位 2.通知浏览器对已经定位HTML标签中样式属性进行集中统一赋值管理
五。CSS选择器:
1.介绍：
CSS选择器，实际上就是一组定位条件用于定位HTML标签。
CSS选择器有9个大的分类
2.CSS选择器语法格式:
<html>
<head>
<!--type='text/css'，-->
<style type="text/css">
定位条件{
"样式属性1":"值1";
"样式属性2"："值2"
}
</style>
</head>
</html>六。ID选择器:
只能作为一个id的使用
1.介绍：
根据HTML标签中ID属性的值进行定位
2.语法:
<style type="text/css">
#id编号{
"样式属性1":"值1";
"样式属性2"："值2"
}
</style>七。标签类型选择器:
标签选择器作用比id选择器高
1.介绍:
根据HTML标签类型进行定位
2.语法:
<style type="text/css">
标签类型名{
"样式属性1":"值1";
"样式属性2"："值2"
}
</style>八。层级选择器
1.HTML标签之间关系：
父子关系
兄弟关系
2.父子关系:
即为包含关系
<tr>
<td>
<input type="text">
</td>
</tr>
td标签是tr标签的子标签
input标签是td标签的子标签
3.兄弟关系:
一组标签拥有相同的父标签，并且彼此之间
没有任何包含关系，即为兄弟
<body>
<div>1</div> 大哥
<p>2</p> 二哥
<span>3</span> 三弟
</body>
4.层级选择器介绍:
根据标签之间父子关系或则兄弟关系进行定位
5.简单的层级选择器
<style type="text/css">
定位父标签条件 定位子标签条件{
}
找到指定父标签下满足条件的所有子标签
</style>九。自定义选择器
1.介绍：
如果一组HTML标签之间没有相同的特征，但是却需要
对指定属性赋值相同内容，此时将自定义选择器绑定
到对应标签上
2.语法:
<style type="text/css">
.自定义选择器名{
color:red;
}
</style>
<div class="自定义选择器名"></div>
<p class="自定义选择器名"></p>在HTML页面嵌套使用CSS的三种方式
第一种方式：在标签内部使用style属性设置元素的CSS样式，这种方法称为内联定义方式
语法格式：<标签 style=“样式名：样式值;样式名:样式值;.......”></标签>
第二种方式：在head标签中使用style块，这种方式被称为样式块方式
语法格式
<head>
<style type=“text/css”>
选择器{
样式名：样式值；
样式名：样式值；
...........
}
选择器{
样式名：样式值；
样式名：样式值；
...........
}
</Style>
</head>
第三种方式
链入外部样式表文件，这种方式最常用。（将样式写入一个独立的xxx.css文件中，在需要的网页上直接引入css文件，样式就引入了）这种方法易维护，维护成本较低
语法格式
<link type="text/css"rel="stylesheet"href="css文件的路径"/>Javascript
运行在浏览器上的脚本语言js
