目录
开发工具
我用的开发工具是IDEA
(1)创建web项目
先new->Project->Empty Project创建一个空项目
然后new->Module->Java Enterprise->Web Application创建javaweb项目
最后再在web项目中创建HTML文件
创建css文件
New->File
常见一个.css文件
一.HTML
1.HTML的标签学习
(1)注释
Ⅰ.语法
<!-- 注释内容 -->
(2)head标签
head标签主要用于配置浏览器的配置信息
Ⅰ.title子标签(★)
<Title>网页标题</Title>
Ⅱ.meta子标题(★)
<meta charset="ust-8"/>
网页解析编码格式的配置
Ⅲ.了解一下的内容
①网页关键字
<meta name = "keywords" content = ""/>
在content中写网页的关键字
②网页描述
<meta name = "description" content = "">
在content中添加网页描述，
③作者
<meta name = "author" content = "">
这三个都可以在搜索的时候提高网页搜索速度
④网页自动跳转
<meta http-equiv = "refresh" content = "5;url = http://ww.baidu.com"/>
表示在5秒后跳转到百度
这个简直小广告必备
Ⅳ.其他内容
还有css引入标签和js引入标签，这些后面再讲解
(3)body标签
Ⅰ.h标题标签
①语法
<h1></h1>
将其中的文本加粗加黑,h几代表的是几级标题,最低h6,等级越大字越小
且标题标签自带换行功能
这种自己占一行的标签我们成为块级元素
不自动换行的标签我们成为行内元素
②属性
align:center,left,right
<h1 align="center">
让标题居中显示
Ⅱ.水平线
①语法
<hr />
在页面中绘制一条水平线
②属性
width:600px,20%
水平线的宽度，可以指定占多少像素，也可以用百分数表示占浏览器窗口的大小
size:20px
水平线的高度
color:"颜色"
设置水平线的颜色
align:center,left,right
水平线的位置，默认居中
Ⅲ.p段落
①语法
<p>段落内容</p>
段落标签会将里面的数据作为整体显示，且结束的时候会自动换行，段间距还比较大
主要是进行css和js操作时比较方便
Ⅳ.pre文本原样输出
<pre>内容</pre>
pre标签中的文本会原样显示，包括空格和换行
但不同浏览器显示效果不同，一般只用来显示代码
Ⅴ.换行符
①语法
<br />
Ⅵ.空格符和尖括号<>
①语法
空格:
左尖括号:<
右尖括号:>
Ⅶ.权重标签
①语法<b>内容</b>
会将内容加黑加粗显示
Ⅷ.斜体
①语法
<i>内容</i>
将内容改成斜体
Ⅸ.下划线和中划线
①下划线
<u></u>
将内容加上下划线
②中划线
<del></del>
加上中划线
Ⅹ.列表
①有序列表
<ol type="">
<li></li>
<li></li>
<ol>
顺序从小到大且连续
type属性可以调整是顺序号码，默认使用阿拉伯数字
②无序列表
<ul>
<li></li>
<li></li>
<ul>
一个li标签代表一行数据
③自定义列表
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
dt:里面写列表标题
dl:里面写列表内容
(4)img图片标签
图片标签也是放在body中的
Ⅰ.语法
本地资源：<img src="图片的文件路径">
网络资源：<img src="图片的url地址">
Ⅱ.注意
①本地图片使用相对路径或绝对路径都可以
②可以使用width或者higth调整图片的宽或高，单位可以是px也可以使用百分比
③只要调整了宽或高中的一个，另一个会按比例变化，以保证图片不失真
④图片默认不换行
Ⅲ.属性
①title:图片的标题
就是鼠标放上去会显示
②alt:里面的内容，图片加载失败后显示
(5)a超链接标签
Ⅰ.语法
<a href="要跳转的网页资源路径">可以点击的内容</a>
超链接标签中一定要添加内容，不然没地方点击，内容可以是文字，也可以是图片
本地资源：相对路径或绝对路径都可以
网络资源：写URL地址
Ⅱ.属性
target:_blank，_self,_top,_parent
用于设置网络资源打开的位置
_self表示在当前页面刷新显示
_blank表示在新标签页中打开
_top表示在顶层页面中显示
_parent表示在父级页面中显示
Ⅲ.锚点
①语法
<a href="#页面内设置的名字">可以点击的内容</a>
跟之前连接到其他网页的语法差不多，只不过锚点是页面内自己的跳转，类似于一键回到顶部啥的
②在需要跳转的地方写上
<a name="名字"></a>
③最后再把页面内设置的name写到之前的a标签中，就可以实现了
④<a href="#">回到顶部</a>
单写#号表示，自己跳自己，即刷新当前页面
(6)table表格标签
Ⅰ.语法
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
talbe表示一个表格
tr表示一行
th表示一个单元格，表头格，默认居中加黑显示
td表示一个单元格，默认居左显示原始数据
每一行中的td标签数量应该一样
单元格的大小默认是根据单元格内容进行设置
Ⅱ.table属性
border:1px
给表格添加边框，数值表示边框的粗细
在table里设置宽度和高度设置的是表格的宽度和高度，不是单元格的
cellpadding:1px
表示内容到边框的距离
cellspacing:1px
表示表格边框线的大小
Ⅲ.tr属性
height:50px
设置行高，也就是单元格的高度
Ⅳ.td/th属性
weight:200px
设置列宽，只需要设置第一行的单元格的宽度即可
列合并属性:colspan:2
表示合并的单元格，数值表示要合并单元格的个数
先要找到你想合并的单元格位置，然后在它的td标签中加上这个属性，再把删除被合并的单元格
行合并属性:rowspan:2
表示合并的单元格，数值表示要合并单元格的个数
先要找到你想合并的单元格位置，然后在它的tr标签中加上这个属性，再把删除被合并单元格
注:要想实现单元格的合并要先确保表格是一个规整的表格
(7)iframe内嵌标签
Ⅰ.作用
在一个网页内显示另一个网页的内容,一般是在视频网页用的比较多
可以实现不同网页资源之间不互相干扰，并能在同一个页面中展现给用户的目的
Ⅱ.语法
<iframe></iframe>
默认当前页面打开及加载sec指向的资源
Ⅲ.属性
src:要显示的网页资源路径
资源可以是本地资源(相对或绝对路径)也可以是网络资源(URL)
width:设置显示区域的宽度，可以是数值也可以是百分比
height:设置显示区域的高度，可以是数值也可以是百分比
name:设置内嵌标签的名字，可以结合超链接标签的target属性来使用
Ⅳ.联合超链接标签的应用
<a href = "http://www.jd.com" target="_jd">京东</a>
<iframe sec = "" width="100%" heigh = "400px" name = "_jd">
这样可以实现点击京东之后在内嵌框内显示京东网页，其实超链接标签中的target属性本来就是用来指定网页打开的位置的
现在只不过指定网页的打开位置是内嵌框罢了
那么我们就可以知道其实"_blank"就是浏览器的新标签页的name
(8)frameset框架标签
让功能不相关的网页在一个页面进行展示
Ⅰ.功能
这个标签和iframe标签差不多，只不过frameset标签不需要结合超链接标签就可以实现多个网页的同时显示
iframe：是先创建一个内嵌标签页，然后让其他网页的内容在内嵌标签页内显示
farmeset：是直接在本网页中，把其他网页拼接在一起显示，是把当前页面切分成不同的块进行显示的
经典应用：邮箱
框架标签比内嵌标签更加灵活
Ⅱ.frameset的属性
rows:按行切
cols:按列切
数值表示每一行/列占的页面大小，可以有多个值，用逗号隔开即可
Ⅱ.frameset的子标签
<frame></frame>
一个frame表示一块区域，按行分还是按列分看frameset的属性
同时每个frame标签中右可以看成一块区域，在frame中可以再声明frameset标签，即每一块区域都可以再分
然后frameset中又要再声明frame标签
frame的属性
src：放入想要链接的资源(本地网络都可以)
Ⅲ.使用步骤
①删除body标签，因为当前网页自己不显示数据
②用frameset标签和frame标签划分网页
③给frame中添加src属性，链接到资源
Ⅴ.注意
在使用frameset的时候想设置一个退出按钮，需要给退出键的超链接target设置成_top
要不然就只在当前页面的当前区域退出到首页，这就比较好玩了
(9)form表单标签
提交所提交的是value的值不是你展示的内容
Ⅰ.作用
收集并提交用户数据给指定服务器
Ⅱ.语法
<form></form>
Ⅲ.属性
action:收集的数据要提交给的地址,也就是url
可以写url
写"#"表示提交给当前页面
method:提交方式,又get和post两种
get:适合少量数据
表单数据以?隔开拼接在URL后面，不同的键值对用&隔开，不安全
post:适合大量数据
安全，隐式提交，提交的数据不会显示在URL后面
Ⅰ.form的input子标签
①作用
在点击数据提交时，form标签会将其内部所有input表单域标签中用户书写的数据
按照method属性指定的提交方式提交给action属性所指明的提交地址
我们提交的数据其实都是input中value的值，value值会和name构成键值对
②使用
文本框
type:"text","possword"
text:收集少量的文本数据，且用户可见
possword:收集数据，用户不可见
value:type是text，则value表示的就是默认值
name:表单域的名称
提交按钮
type:"submit"
submit:这个input为一个提交按钮
value:type是submit，则value表示的就是提交按钮上的字
name:表单域的名称
单选框
type:"radio"
raido:单选框
所有name属性值相同的单选框，只能选一个，因此要实现单选只需要把他们的name设置成一样就行了
和上面一样也是name和value构成键值对后提交
name:表单域的名称，
value:本单选框的值，用户选择提交后会和name构成键值对
checked="checked":加上这个属性，此单选框默认选择状态
多选框
type:"checkbox"
raido:多选框
name:表单域的名称
一个多选组要使用相同的name值，可以选多个
value:本选框的值，用户选择提交后会和name构成键值对
checked="checked":加上这个属性，此选框默认选择状态
单选框和多选框如果被选中checked的值会变成true
------------------------------------------------------------------------------------------------
普通按钮
type:"button"
button:普通按钮
name:按钮的名称(一般不设置)
value:本按钮的值，用户选择提交后会和name构成键值对
id:
隐藏按钮
type:"hidden"
hidden:隐藏按钮
name:按钮的名称
value:本按钮的值，用户选择提交后会和name构成键值对
隐藏按钮一般用于记录一些重要的数据，这些数据会和用户输入的数据一起提交，但又不会让用户知道
注意
①form表单数据的提交，目前需要用
<input type="submit" value="提交">
来设置提交按钮才能提交，普通的button是没办法提交form表单中的数据的
②用输入数据提交后，name会和用户输入的数据构成键值对
③name属性必须设置，不设置name属性的话输入的值就没有键，后台没办法进行数据的获取
④button一般不设置name属性，这样button就不会提交，因为button一般是用来设置点击事件的不是用来收集数据的
Ⅱ.form的select子标签(下拉框)
①语法
<select name=""></select>
②使用
下拉框
③属性
name:下拉框的名字，用来和option中的value构成键值对
id:用来表示标签的唯一码，一般的命名规范是父节点的id_自己的id名
④子标签option
<option value="">--请选择--</option>
一个option代表一个下拉选项
属性
value:该下拉选项的值,选中后和name构成键值对的值,即它的value会赋给select的value
selected="selected":让下拉框默认选择该option
被选中的下拉框会selected会变成true
⑤其实比较像单选框，只不过有个下拉的效果
⑥在没有选择的时候默认展示第一个option标签展示的内容所以一般我们的第一个option都写成
<option value="">--请选择--</option>
Ⅲ.form的textarea子标签(文本域)
①语法
<textarea name="" rows="" cols=""></textarea>
②属性
name:文本域的名字
rows:文本域的行数
cols:文本域的列数
但是只有学了css才能固定文本域的大小
二.CSS
1.为什么需要css
HTML的不足：
(1)HTML的作用的是负责数据的格式化的展示的，不是用来进行数据的样式改变的
如果用HTML来进行数据的样式，会发现书写起来非常麻烦，且不易于维护，不能重复使用
(2)HTML可以有效的组织数据的展示，但是不同类型数据在浏览器中的分布没办法实现
就像书架可以用来放书，但是书架好看与否不应该让书架自己负责，所以CSS出现，用来给网页进行样式开发
一般什么表格的高宽，字体的加粗等都是用CSS来实现的
2.什么是CSS
概念：
层叠样式表
作用：给网页进行样式开发
给网页进行布局
特点：
语言特别简单
开发的样式可以重复使用
依赖于HTML
3.使用CSS
css的声明
css的选择器
css的常用样式
css的盒子模型
css的定位
css的布局
1.css的声明
(1)声明方式
Ⅰ.在head标签中使用style标签进行说明
<style type="text/css">
hr{
color:red;
width:50%
}
</style>
作用域：在此声明的css样式会影响该HTML所有的这种标签
这种方式解决了HTML中样式代码的冗余
Ⅱ.在标签上使用style属性进行声明
<hr style="color:blue;width:50%" />
作用域：在此声明的css样式只会影响当前标签
每个标签都有style属性
Ⅲ.在head标签中使用link标签引入外部声明好的css文件
<Link rel="stylesheet" type="text/css" href="css文件">
作用域：在此声明相当于调用
解决了不同HTML文件相同样式的代码冗余问题
(2)注意
如果多个css代码都对同一个标签作用，那么遵循就近原则，谁离标签近，谁的样式会被采用
2.css的选择器
(1)标签选择器(同种标签用相同的样式)
Ⅰ.语法
标签名{样式名1:值1;样式名2:值2;...}
Ⅱ.作用
将当前HTML内的所有这种标签添加相同的样式
如果我只想作用于具体的某一个标签那么可以使用id选择器
(2)id选择器(单独一个标签的样式)
Ⅰ.语法
#id值{样式名1:值1;样式名2:值2;...}
Ⅱ.作用
给某个具体的标签添加样式
(3)类选择器(不同的标签用相同的样式)
Ⅰ.语法
.类选择器名{样式名1:值1;样式名2:值2;...}
例如：<table class="类选择器名"></table>
Ⅱ.作用
给不同的标签添加样式
每个标签都有class属性
(4)全部选择器
Ⅰ.语法
*{样式名1:值1;样式名2:值2;...}
Ⅱ.作用
给所有的HTML标签，添加相同的样式
--------------------------------------------------------------------以下的选择器了解即可--------------------
(5)组合选择器
Ⅰ.语法
选择器列表{样式名1:值1;样式名2:值2;...}
选择器之间用逗号分开
Ⅱ.作用
解决了不同的选择器之间相同的样式冗余的问题
(6)子标签选择器
Ⅰ.语法
标签名 子标签名 ...子标签名{样式名1:值1;样式名2:值2;...}
Ⅱ.例子
ul li a{样式名1:值1;样式名2:值2;...};
给ul标签中的li标签里的a标签添加样式
(7)属性选择器
Ⅰ.语法
标签名[属性名=属性值]{样式名1:值1;样式名2:值2;...}
Ⅱ. 作用
选择该种标签中指定属性名为属性值的标签
(8)使用过程
Ⅰ.声明css代码域
Ⅱ.使用选择器来添加选择器
根据需求来：
使用*选择器来给整个页面添加基础样式
使用类选择器给不同的标签添加基础样式
使用标签选择器给某类标签添加基础样式
使用id，属性选择器，style属性声明方式给某个标签添加样式
Ⅲ.书写样式单
但一般都是写在css文件中，且一个样式一般写一行
3.css的常用样式
边框设置
border:solod 1px red;//红色实线1px粗
border-raidus:10px;//是边框变圆润
border-top
border-left
border-right
border-buttom
这个给table用只显示外部框线
要想给table内部使用应该把border属性添加给tr/th标签，因为表格实际上是由单元格垒起来的
这样还能给每个单元格设置不同的边框颜色
字体设置
text-align:center;//字居中
font-size:10px;//设置字体大小
font-family:"黑体";//设置字体格式
font-weight:bold;//设置字体加粗
字体颜色设置
color:颜色;
背景颜色设置
background-color:颜色;
背景图片设置
background-img:url(图片的路径，本地网页都可以);
background-repeate:no-repeate;//设置图片不重复
background-size:cover;//图片平铺整个页面
高和宽设置
浮动设置
float:left|right;
行高设置(行间距)
line-height:10;
显示级别
z-index=1,2,...;
用来设置元素显示级别的
其他不常见的自己查api
4.css的盒子模型(div标签)
设置边框div内容区域的大小是不变的，边框是往外扩的,就像一层一层往外套盒子,所以称为盒子模型
div是块级元素
我们可以在div中再写div，来避免在body中直接声明过多div相互影响
(1)div标签
Ⅰ.作用
主要是用来进行网页布局的，会将其中的子元素内容作为一个独立的群体存在，比较像之前HTML里的框架标签
Ⅱ.特点
默认宽度是当前页面的宽度，但是可以设置
高度默认是没有的，但是可以设置(可以顶开)
如果子元素设置了百分比的高或宽，占据的是div的百分比，不是页面的
(2)盒子模型的属性
Ⅰ.外边距:margin
作用:用来设置元素和元素之间的间隔
居中设置:margin:auto;//会自动把左边距和右边距设置成一样大
一般设置margin:0px auto;//上下间隔0px，水平居中
也可以根据需求单独设置上下左右的外边距
Ⅱ.边框:border
作用:用来设置元素的边框大小
可以用来单独设置上下左右的边框
Ⅲ.内边框:padding
作用:设置内容和边框之间的距离
可以用来单独设置上下左右的内边距
Ⅳ.浮动:float:left|right;
给div标签都加上可以，实现盒子居左并列挨着，即可以让块级元素在一行显示
Ⅴ.内容区域大小的改变
设置宽和高就能改变内容大小
(3)使用
我们可以创建多个div给它们不同的id号，然后单独设置边距这就比我们之前在HTML中用frameset要方便的多
同样我们也可以在div标签中再写div标签
5.css的定位(position属性)
position属性
(1)相对定位:relative
是指相对元素自己原来的位置移动,参照点是自己
使用了相对定位以后这个元素和其他元素就可以看成不在一个平面上了,它的移动不会影响其他元素的位置
(2)绝对定位:absolute
默认参照点是body，即整个页面
可以给父级div标签设置了相对定位，则div绝对定位的参照点就变成父div了
(3)固定定位:fixed
将元素固定在屏幕的指定位置，不会随着滚动条的移动而改变位置
用来做小广告，贴二维码啥的
(4)向哪移动多少用
position:relative|absolute|fixed;
top:10px;
left:10px;
right:10px;
botton:10px;
进行设置
6.css的伪类
(1)作用
当鼠标放上去的时候才有效果，要么没效果
(2)语法
选择器:hover{样式名1:值1;样式名2:值2;...}
这样hover里面设置的样式只有鼠标放上去才会有效果
7.模拟百度首页
(1)写网页一般步骤
先用css+div进行页面的布局
css代码一般使用外联方式进行开发
然后使用HTML进行每一个块中的内容填充
364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
