学习过程htm-----css-----js+两个框架
cs架构 客户机到服务器的计算模式
bs架构 浏览器到服务器计算模式 优点 访问方便，，数据放置在服务器，
缺点 访问量特别大 容易崩溃
常用的 Web服务器： 使用第一的Apache
Jboss :Web sercies容器. ejb的容器
Tomcat ：开源免费的一个服务器，apache的一个基金会项目
IIs：Internet 信息服务微软主推的服务器
webLogic:开发管理部署一些大型的web应用，分布式的服务器。
等等
FireFox浏览器 要下载
FireBug 要下载
网页文件 html文件后缀
1什么是html： 本质上是一种描述网页的语言，
html超文本标记语言 全称 Hypertext markup language
html属于标记语言，不属于编程语言。 还有xml语言
html文档也称为网页。
2.html标签含义
第一个标签是开始标签，第二个标签是结束标签，不是所有的标签都需要结束，自动开闭标签，
html注意格式规定，必须成套出现。
html标签最好区分大小写 ，也就是标签对应大小 写名字要一样！
A <!DOCTYPE HTML>
B <html>
C <head>
D <title>show myfirst web</title>
E <meta charset="utf-8">
F <head>
G <body>
H <p>this is my frist web pro</p>
I </body>
J </html>
A html标签的含义
1申明网页的版本以及网页应该遵循的规范，有助于浏览器正确显示网页 并且向浏览器声明他是采用严谨模式 要有开闭
2网络上有各种不同类型的文件，浏览器都应该正确的打开，如果正确声明html，那浏览器解析就更加准确
3doctype 不区分大小写！
D 两个标签之间是标题名
E mata 含义
mata不需要闭合的标签，提供html的元素，元素不是显示踹，只会被浏览器解析！
meta标签除了设置编码集以外，还可以设置网页的关键字，网友的描述信息，作者的信息！
G 两个body标签中放 相当于java中的类里面的内容
body里面设置 标签 它的文字大小 h1-h6
h1显示最大文字 h6 最小文字
<h1>内容</h1>
注释 <!-- 内容-->
段落标签
<p id="p1"这个p1是唯一的不允许重名>内容</p>
超链接
<a href="#"这个#号代表跳转到本页>标签内容</a>
通过a标签设置锚点需要两个a标签一个a标签设置name属性一个a标签跳转到当前name属性对应的值
例
<h1><a name="cc"设置a标签名字 style="color: red; 设置颜色">标签显示的内容,</a></h1>
<h1>sxxxxxxxxx</h1>
<h1>sxxxxxxxxx</h1>
<h1>sxxxxxxxxx</h1>
<h1>sxxxxxxxxx</h1>
<h1>sxxxxxxxxx</h1>
<h1>sxxxxxxxxx</h1>
<h1>sxxxxxxxxx</h1>
<h1>sxxxxxxxxx</h1>
<h1>sxxxxxxxxx</h1>
<h1>sxxxxxxxxx</h1>
<h1>sxxxxxxxxx</h1>
<h1>sxxxxxxxxx</h1>
<h1>sxxxxxxxxx</h1>
<h1>sxxxxxxxxx</h1>
<h1看你需要设置的字体大小><a href="#cc"表示回到本页的cc处>回到h1处</a></h1>
标签显示图片 ../代表回到上一级目录
<img src="绝对路径 文件名/图片全名" width（宽）="200px" heigth（高）="200px" title=提示内容"xx" alt="这是桌面图片"/>
<img src=../(这个../代表回到上一级目录)>
换行标签
</br>自开闭 例如
<p>xxxx</br> xxasdasdsads</p>
空格
<p>xxxx </br> xxasdasdsads</p> xxxx后面会空一格
分割线
<hr width="100px"/>
缩写
<abbr>
<abbr title="中啊实打实的">zg</abbr> zg缩写 显示zg 当鼠标放到zg位置时会自动显示全1称
粗体
优先选择 strong
<strong> this is strong element</strong>
斜体
<em > today is a good day</em>
设置内容显示顺序
<bdo dir="rtl">大飒飒是是是 </bdo>
i标签
特别用法
<p> 跳楼价来了不要<del>998</del>只要<ins>298</ins>/p>
显示结果
<pre>
3
+
2
=
5
</pre>
显示结果
Html表单
表单是一个包含表单元素的区域
表单元素是允许用户在表单中（例如文本域 下拉单列 单选框 复选框 等等）输入信息的元素
<
input
type=
"text"
maxlength=
"6"
placeholder=
"密码" valus="小王"
>
placeholder 效果
values 代表默认
在制作表格中 有如下关键字
tr td border thead tbody tfoot
第一种
<!DOCTYPE
html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
title
></
title
>
</
head
>
<
body
>
<!--border代表边框的风格-->
<
table
border=
"1"
>
<!--第一种表格的书写形式 缺点多 只是能够构造一个表格而已-->
<
tr
>
<
td
>
名字
</
td
>
<
td
>
性别
</
td
>
<
td
>
年龄
</
td
>
</
tr
>
<
tr
>
<
td
>
wade
</
td
>
<
td
>
男
</
td
>
<
td
>
45
</
td
>
</
tr
>
<
tr
>
<
td
>
james
</
td
>
<
td
>
男
</
td
>
<
td
>
32
</
td
>
</
tr
>
<
tr
>
<
td
>
kobe
</
td
>
<
td
>
男
</
td
>
<
td
>
38
</
td
>
</
tr
>
</
table
>
第二种
<!--thead tbody tfoot语义化标签：有利于搜索引擎查询。可以快速定位内容-->
<
table
border=
"1"
>
<!--第二种表格-->
<
thead
>
<!--头 -->
<
tr
>
<
td
>
名字
</
td
>
<
td
>
性别
</
td
>
<
td
>
年龄
</
td
>
</
tr
>
</
thead
>
<!--tr代表行 td代表列-->
<
tbody
id=
"tb"
>
<!--身体-->
<
tr
>
<
td
>
wade
</
td
>
<
td
>
男
</
td
>
<
td
>
45
</
td
>
</
tr
>
<
tr
>
<
td
>
james
</
td
>
<
td
>
男
</
td
>
<
td
>
32
</
td
>
</
tr
>
<
tr
>
<
td
>
kobe
</
td
>
<
td
>
男
</
td
>
<
td
>
38
</
td
>
</
tr
>
</
tbody
>
<
tfoot
>
<!--尾部-->
<
tr
>
<
td
>
123
</
td
>
<
td
>
123
</
td
>
<
td
>
123
</
td
>
</
tr
>
</
tfoot
>
</
table
>
第三种表格
<
table
border=
"1"
>
<!--第三种表格-->
<
thead
>
<
tr
>
<
th
>
名字
</
th
>
<
th
>
性别
</
th
>
<
th
>
年龄
</
th
>
</
tr
>
</
thead
>
<
tbody
id=
"tb1"
>
<
tr
>
<
td
>
wade
</
td
>
<
td
>
男
</
td
>
<
td
>
45
</
td
>
</
tr
>
<
tr
>
<
td
>
james
</
td
>
<
td
>
男
</
td
>
<
td
>
32
</
td
>
</
tr
>
<
tr
>
<
td
>
kobe
</
td
>
<
td
>
男
</
td
>
<
td
>
38
</
td
>
</
tr
>
</
tbody
>
<
tfoot
>
<
tr
>
<
td
>
123
</
td
>
<
td
>
123
</
td
>
<
td
>
123
</
td
>
</
tr
>
</
tfoot
>
</
table
>
第四种
<
table
border=
"1"
>
<!--第四种表格-->
<
colgroup
>
<
col
style=
"
background-color
:
red
"
span=
"1"
>
<!-- <col style="background-color: green">-->
<
col
style=
"
background-color
:
pink
"
>
<
col
style=
"
background-color
:
pink
"
>
</
colgroup
>
<
tr
>
<
td
>
名字
</
td
>
<
td
>
性别
</
td
>
<
td
>
年龄
</
td
>
</
tr
>
<
tr
>
<
td
colspan=
"3"
>
wade
</
td
>
<!--colspan代表合并多少列 总共三列 下面的要注释不然会自动向外填充 -->
<!-- <td>男</td>-->
<!-- <td>45</td>-->
</
tr
>
<
tr
>
<
td
rowspan=
"2"
>
jkobe
</
td
>
<!--rowpan代表合并多少行-->
<
td
>
男
</
td
>
<
td
>
32
</
td
>
</
tr
>
<
tr
>
<!-- <td>kobe</td>-->
<
td
>
男
</
td
>
<
td
>
38
</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
结果如下
action表示要提交的服务器地址 method表示提交方式
<form action="" method="get">
<input type="submit">
</form>
布局标签
布局用div标签，表示一个区域快，本身没有任何宽和高
<div style="width:960px;height:50px;backgroud:antiquewhite>xxx</div>
<div >456</div>
div可以嵌套，，，，
span可以显示内容 也可以 用来布局
<span style="disply" :block;width:200px;heigth :200px;backgroud-color :#f0ff85></span>
1563
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
