-
WEB内容
C/S：客户端和服务器，画面精美，不依赖网速，用户体验好，但是需要在使用前要下载一个庞大的客户端，更新时需要将所有服务器停止，并且在更新完成之后用户需要下载更新包在某些场景之下这种情况是被允许的。
B/S：浏览器和服务器，不需要下载安装包。如果服务器有更新，用户不必停止访问，可以刷新页面直接采用最新资源但是画面较差，依赖网速
-
HTML
超文本标记语言
-
HTML结构
<!DOCTYPE HTML>
<HTML>
<HEAD>
<title>我的第一个页面</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
头部分：书写配置信息，书写在head中的内容会优先加载。
</HEAD>
<BODY>
体部分：书写页面构成的标签。
</BODY>
</HTML>-
HTML语法
a.标签可以书写成标签对的形式，由起始标签和结束标签组成。<起始标签></结束标签>
b.标签可以书写成自闭标签的形式:<br/> -----换行符、<hr/> -----画一条线
c.html中多个空格、制表符和回车都会合并成一个空格在页面中展示。
d.标签属性由属性名和属性值组成：属性名='属性值' ,注意：单引号或双引号都可以使用，必须使用英文的符号。
-
HTML标签
<font>font标签</font>
| color属性： |
|
| 颜色名称 | red green |
| Hex | #AAAAAA 6为16进制数值 |
| rgb | rgb(0,255,255); |
| size属性： | 1~7 默认大小为3 |
<h1></h1>
<h2></h2>
<h6></h6>
| align | 对齐方式 |
| left | 左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
| justify | 自适应 |
有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
| type | 图标样式 |
| disc | 实心圆 |
| square | 实心方块 |
| circle | 空心圆 |
<img src="" alt="" />
| src | 图片路径 |
| alt | 代替图片出现的文字 |
| width | 宽度 px % |
| height | 高度 px % |
a标签可以作为一个超链接的标签使用。a标签的功能:在页面内部跳转 ------ 书签。埋下书签，创建一个包含id或name属性的a标签。<a name="tag"></a>，提供跳转标签，创建一个包含href属性的a标签，href属性值位#name，<a href="#tag"></a>在页面间跳转。
<a href="跳转的目标地址">百度一下</a>
| name | 标签名称 |
| href | 跳转的目标地址 |
| target | _self 在当前窗口打开页面 _blank新打开创建打开页面 |
table表示一个表格，需要在其中添加代表行和列的子标签， table，tr，td，th
table的重要属性:
border 边框宽度、cellspacing 单元格之间的空白距离、cellpadding 边框与单元格内容之间的距离、bgcolor 背景颜色、bordercolor 边框颜色、width 宽度、align 对齐方式、
tr重要属性:
align 对齐方式、bgcolor 背景颜色
th/td重要属性: align 对齐方式、bgcolor 背景颜色、width 宽度、height 高度、colspan 可横跨的列数 column、rowspan 可竖跨的行数 row
<caption> 定义表格的标题
-
Form表单标签
提交数据的方式：
- 在地址栏中手动拼接参数。这种方式如果遇到较多的参数和较复杂的参数值，会难以拼接，如果拼接很有可能出现错误。所以不推荐直接在地址栏中书写参数。
- 利用form表单提交数据。在form表单中书写的内容，提交时会自动拼接在浏览器的地址栏中。
form表单的使用
<form action="http://www.tmooc.cn" method="get">
| action: | form表单提交的地址 |
| method: | 提交方式 |
method：一共有7种提交方式。常用的有两种 get post
get提交特点：参数拼接在地址栏中，安全性较低，参数拼接的长度一般不超过1KB。
post提交特点：在底层以流的形式提交，安全性较高，在理论上传递的参数长度不收限制。
Input输入框
| 文本框 text | 输入的文本信息直接显示在框中 |
| 密码框 password | 输入的文本以圆点或者星号的形式显示 |
| 单选框 radio | 进行单项的选择 如性别选择 多个radio的name属性相同会被当作一组来使用 必须用value为选项指定提交的值 |
| 复选框 checkbox | 进行多项选择，爱好的选择。 多个checkbox具有相同的name属性时会被当作一组来使用 必须用value为选项指定提交的值 |
| 隐藏字段 hidden | 如果有一些信息，不希望用户看见，又希望表单能够提交，就可以用隐藏字段隐含在表单中 |
| 提交按钮 submit | 实现表单提交操作的按钮 可以通过value属性指定按钮显示的文字 |
| 重置按钮 reset | 重置表单到初始状态 |
| 按钮 button | 普通按钮, 没有任何功能 需要配合JavaScript为按钮指定具体的行为。可以用value属性指定按钮显示的文字。 |
| 文件上传项 file | 提供选择文件进行上传的功能。 |
| 图像 image | 利用一张图片替代提交按钮的功能, 不常用 |
重要属性：
| name | 标签名称。并且在form表单中需要被提交的数据标签身上必须要包含一个name属性。否则不会被提交。 |
| value | 当前标签具有的值 |
-
CSS
页面构成与样式修改：
a.页面构建初期，使用table组成页面，但是面对复杂页面组成是，table难以完成对应的布局格式。
b.后来产生新的页面组成方式，利用div+css两门技术实现页面的组成和样式的修改
div 盒子模型
a.div 块级元素 每个元素自己独占一行
b.span 行内元素 多个元素同在一行
c.p 块级元素 每个元素自己独占一行
css
css就是层叠样式表。
- 页面中的多个元素都需要进行相同的样式修改，若一个一个修改则会造成代码冗余和维护的不便利性。
- 页面中大量标签可以通过层叠样式表来完成批量修改。
- css语法
css注释： /**/
css在页面中的引入：
css选择器
基本选择器
#id选择器
#div1{
}
类选择器
.class1{
}
元素名选择器
元素名{
}
扩展选择器
后代选择器
div中所有的span元素选中
div span{
}
子元素选择器
div中所有的子元素span
div>span{
}
相邻兄弟选择器
div的下一个相邻的兄弟span
div+span{
}
属性选择器
选择包含name属性的div
div[name]{
}
选择包含name='ls'属性的div
div[name='ls']{
}
多元素选择器(分组选择器)
#id,.class1,span{
}
伪元素选择器：
其实就在html中预先定义好的一些选择器。称为伪元素。是因为CSS的术语。
:link 未点击的状态
:visited 被点击过的状态
注：在不设置visited状态时active生效，否则会出现visited覆盖active效果
:hover 鼠标移动到元素之上但是仍然未点击的状态
:active 被鼠标点击着的状态
2276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
