一、网页的组成部分
内容+表现+结构
内容：html实现：显示页面的内容（如：表单、列表、行列等）：css实现：对页面的元素进行添加样式（如：布局，边框，颜色等）：javascripts实现：把页面中的内容用动态的形式实现。
1、java文件需要先编译，在由虚拟机跑起来，但是html文件不需要编译，可以直接运行
2、html的书写规范
<!DOCTYPE html> <!-- 约束，声明--> <html lang="zh_CN"> <!--html标签表示html的开始，long="zh_CN 表示中文，html标签中一般分为两部分，分别是head,body"--> <head> <!--head表示头部信息，一般包含三部分内容titleb标签，css样式，js代码--> <meta charset="UTF-8"> <!--表示当前页面使用UTF-8字符集--> <title>标题</title> </head> <body><!--body是页面的恶主体内容--> hello </body> </html>
3、标签
1）标签的格式：<标签名>封装的数据</标签名>
2）标签名大小写不敏感
3）标签拥有自己的属性
基本属性。比如：bgcolor=“red” 可以修改简单的样式效果
事件属性。比如：onclint="alter('你好')；" 可以直接设置时间响应后的代码
4）标签又分为：单标签和双标签
单标签格式：< 标签名 /> 常用<br />换行 <hr />水平线
双标签格式：<标签名> 封装的数据<标签名/>
5、常用标签
1）font标签：字体标签，可以用来修改文本的字体，颜色，大小（尺寸）
-->有如下三个属性：
color属性修改颜色
face属性修改字体
size属性修改文本大小 -->1~7种大小
<font color="#dc143c" face="宋体" size="7">font字体标签</font>
2）特殊字体
常用特殊字符表，其他的 可以查看w3school
3）标题标签
标题标签是：h1 到h6
h1 -->h6 表示从大到小
-->有一个属性：
align：对齐属性
left 左对齐，right右对齐，center中间对齐
<body> <!-- 标题标签 --> <h1 align="left">标题1</h1> <h2>标题2</h2> <h3 align="right">标题3</h3> <h4 align="center">标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <h7>标题7</h7> </body>
4）超链接 （在网页中所有点击之后可以跳转的内容都是超链接）
a标签是超链接，有两个属性
href属性设置连接的地址
target属性设置那个目标进行跳转
_self 表示当前页面（默认）
_blank 表示打开新页面来进行跳转
<body> <!-- 超链接 --> <a href="http://www.baidu.com" target="_self">百度_self</a> <br /> <a href="http://www.baidu.com" target="_blank">百度_blank</a> <br /> </body>
5）列表标签
分为：无序列表：ul 标签，有序列表：ol 标签。li 是列表项
属性：type 可以修改列表项前面的符号
<body> <ol type=""> <li>赵丽颖</li> <li>倪妮</li> <li>杨幂</li> </ol> </body>
6）img标签 用来显示图片
src属性：可以设置图片的路径
width属性：设置图片的宽度
height属性：设置图片的高度
border属性：设置图片边框大小
alt属性：设置当指定路径的图片找不到的时候，用文本来显示内容
-------->
在javaSE中路径也分为相对路径和绝对路径
相对路径：从工程名开始算
绝对路径：盘符：/目录/文件名
在web中路径分为相对路径和绝对路径两种
. 表示当前文件所在的目录
.. 表示上一层目录
文件名 表示当前文件所在目录的文件，相当于./文件名，./可以忽略
绝对路径:
正确格式是：http://ip:port/g工程名/资源路径
错误格式是：盘符：/目录/文件名
<body> <img src="../imgs/1.jpg" width="200" height="260" border="1" alt="大美女没找到"/> <img src="../imgs/2.jpg" width="200" height="260" border="1" /> <img src="../imgs/3.jpg" width="200" height="260" border="1" /> <img src="../imgs/4.jpg" width="200" height="260" border="1" /> <img src="../imgs/5.jpg" width="200" height="260" border="1" /> <img src="../imgs/6.jpg" width="200" height="260" border="1" /> <img src="../imgs/7.jpg" width="200" height="260" border="1" /> </body>
7）表格标签：table
table 标签是表格标签
border 设置表格标签，width设置表格宽度，height设置表格高度，align设置表格相对页面的对齐方式，cellspacing设置单元格间距
tr 是行标签
th 是表头标签，表示列
td 是单元格标签，表示列
align 设置单元格文本对齐方式
b 标签是加粗标签
<!--需求： 1、做一个带表头的，三行，三列的表格，并显示边框 2、修改表格的宽度，高度，表格的对齐方式，单元格的间距 --> <table border="1" width="300" height="300" align="center" cellspacing="0"> <tr> <th>1.1</th> <th>1.2</th> <th>1.3</th> </tr> <tr> <th>2.1</th> <th>2.2</th> <th>2.3</th> </tr> <tr> <th>3.1</th> <th>3.2</th> <th>3.3</th> </tr>
8）跨行跨列表格 -->意思是有的单元格占两列，有的单元格占三列等
colspan 属性设置跨列
rowspan 属性设置跨行
<table width="300" height="300" border="1" cellspacing="0" > <tr> <td colspan="2">1.1</td> <td>1.3</td> <td>1.4</td> <td>1.5</td> </tr> <tr> <td rowspan="2">2.1</td> <td>2.2</td> <td>2.3</td> <td>2.4</td> <td>2.5</td> </tr> <tr> <td>3.2</td> <td>3.3</td> <td>3.4</td> <td>3.5</td> </tr> <tr> <td>4.1</td> <td>4.2</td> <td>4.3</td> <td colspan="2" rowspan="2">4.4</td> </tr> <tr> <td>5.1</td> <td>5.2</td> <td>5.3</td> </tr> </table>
9）了解iframe框架标签（内嵌窗口）
iframe标签可以在页面上开辟一个小区域显示一个单独的页面
iframe和a标签组合使用的步骤
1、在iframe标签中使用name属性定义一个名称
2、在a标签的target属性上设置iframe的name属性值
举例验证：点击a标签内的超链接，超链接的页面显示在iframe窗口内
<body> <iframe width="500" height="500" src="3.标题标签.html" name="abc"></iframe> <br /> <ul> <li><a href="1.font标签.html" target="abc"> 1.font标签.html</a></li> <li><a href="2.特殊字符.html" target="abc"> 2.特殊字符.html</a></li> <li><a href="4.超链接.html" target="abc"> 4.超链接.html</a></li> </ul> </body>
10）表单标签：form
什么是表单？
表单就是html页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器
案例1：表单的显示
</head> <!--需求：创建一个个人信息注册的表单页面，包括：用户名，密码，确认密码，性别（单选），兴趣爱好（多选）， 国籍（下拉列表），隐藏域，自我评价（多行文本域），重置，提交 input type="text" 文本输入框 value="默认值" value是默认值 input type="password" 密码输入框 input type="radio" radio是单选框，name可以进行分组，checked是默认选择 input type="checkbox" checkbox是多选框 select 是下拉选择框，option是下拉选择的内容 textarea rows="10" cols="20" 多行文本输入框，rows属性显示几行的高度，cols属性设置每行可以显示几个字符的宽度 input type="reset" 重置按钮 input type="submit" 提交按钮 input type="file" 文件上传域 --> <body> <form> 用户名称：<input type="text" value="默认值" /><br /> 用户密码：<input type="password" /><br /> 确认密码：<input type="password" /><br /> 性 别：<input type="radio" name="sex" checked="checked"/>男 <input type="radio" name="sex"/>女 <br /> 兴趣爱好：<input type="checkbox" checked="checked" />Java <input type="checkbox" />php <input type="checkbox" />c++ <input type="checkbox" />python <br /> 国 籍：<select > <option >---请选择国籍---</option> <option >中国</option> <option >美国</option> <option >俄罗斯</option> <option >小日本</option> </select> <br /> 自我评价：<textarea rows="10" cols="20">我才是默认值</textarea> <br /> <input type="reset"/> <input type="submit" /> </form> </body>
案例2：表单的格式化
<body> <form > <h2 align="center">用户注册信息表</h2> <!--h1~h6代表标题--> <table align="center" > <!--table代表表格--> <tr> <td>用户名称：</td> <td><input type="text" value="默认值" /></td> </tr> <tr> <td>用户密码：</td> <td><input type="password" /></td> </tr> <tr> <td>确认密码：</td> <td><input type="password" /></td> </tr> <tr> <td>性别：</td> <td> <input type="radio" name="sex" checked="checked"/>男 <input type="radio" name="sex"/>女 </td> </tr> <tr> <td>兴趣爱好：</td> <td> <input type="checkbox" checked="checked" />Java <input type="checkbox" />php <input type="checkbox" />c++ <input type="checkbox" />python </td> </tr> <tr> <td>国籍：</td> <td> <select > <option >---请选择国籍---</option> <option >中国</option> <option >美国</option> <option >俄罗斯</option> <option >小日本</option> </select> </td> </tr> <tr> <td>自我评价：</td> <td><textarea rows="10" cols="20">我才是默认值</textarea></td> </tr> <tr> <td><input type="reset"/></td> <td align="center" ><input type="submit"/></td> </tr> </table> </form> </body>
案例3：表单提交细节 （发送服务器）
form表单发送给服务器，需要用到两个属性：
action属性：设置提交的服务器地址
method属性：设置提交的方式GET(默认值)或post
--->设置form表单的action属性和method请求方式
<form action="http:/localhost:8080" method="get"> <input type="hidden" name="action" value="login">
提交以后：
http://localhost:63342/localhost:8080?action=login&sex=on
问题：从上面的提交到服务器的地址发现，只有sex参数被提交成功，其他的参数并没有被提交成功
原因：我们在设置表单的时候，是通过name属性值来提交的，所以表单中其他的参数并没有name属性
解决方法：在每个参数内加上name属性
验证：重新提交
问题：从上面提交服务器后的地址可以看到：sex=on&hobby=on 并没有显示我们这是的参数sex=男，hobby=java
原因：单选、复选（下拉列表中option标签）都需要添加value属性，以便发送服务器
解决办法：单选和复选框都加上value属性
验证：重新提交，已经显示
总结：表单提交的时候，数据没有发送给服务器的三种情况：
1、表单项没有name属性值
2、单选，复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
3、表单项不在提交form标签中
完整的代码：
<body> <!-- form表单发送给服务器，需要用到两个属性： action属性：设置提交的服务器地址 method属性：设置提交的方式GET(默认值)或post 表单提交的时候，数据没有发送给服务器的三种情况： 1、表单项没有name属性值 2、单选，复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器 3、表单项不在提交form标签中 GET请求的特点是： 1、浏览器地址栏中的地址是：action属性[+?+请求参数]，请求的格式：name=value&name=value 2、不安全（比如密码暴露在url地址栏） 3、它有数据长度的限制 POST请求的特点： 1、浏览器地址栏中只有action属性值 2、相对于GET请求要安全 3、理论上没有数据长度的限制 --> <form action="http://localhost:8080" method="get"> <input type="hidden" name="action" value="login"> <h2 align="center">用户注册信息表</h2> <!--h1~h6代表标题--> <table align="center" > <!--table代表表格--> <tr> <td>用户名称：</td> <td><input type="text" value="默认值" name="username"/></td> </tr> <tr> <td>用户密码：</td> <td><input type="password" name="password"/></td> </tr> <tr> <td>性别：</td> <td> <input type="radio" name="sex" checked="checked" value="boy"/>男 <input type="radio" name="sex" value="girl"/>女 </td> </tr> <tr> <td>兴趣爱好：</td> <td> <input name="hobby" type="checkbox" checked="checked" value="java"/>Java <input name="hobby" type="checkbox" value="php"/>php <input name="hobby" type="checkbox" value="c++"/>c++ <input name="hobby" type="checkbox" value="python" />python </td> </tr> <tr> <td>国籍：</td> <td> <select name="country"> <option name="none" >---请选择国籍---</option> <option name="cn">中国</option> <option name="usa">美国</option> <option name="ra">俄罗斯</option> <option name="jp">小日本</option> </select> </td> </tr> <tr> <td>自我评价：</td> <td><textarea name="desc" rows="10" cols="20">我才是默认值</textarea></td> </tr> <tr> <td><input type="reset"/></td> <td align="center" ><input type="submit"/></td> </tr> </table> </form> </body>
11、其他标签
div标签：默认独占一行
span标签：它的长度是封装数据的长度
p段落标签：默认会在段落的上方或下方空出一行来（如果已有就不在空）
二、CSS技术
1、css是【层叠样式表单】用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言
2、语法规则
选择器：标签，决定了css样式
属性：改变的样式名，每个属性有一个值。属性和值被冒号分开，并由花括号包围。比如：p{color:blue}
多个声明：不止一个时，需要用分开隔开，最后一个可以不加分号（建议加上）
例如：
p{
color:red;
font-size:30px;
}
一般每行只描述一个属性。 css注释：/**/
3、css和html结合的方式
1）第一种：在标签的style属性上设置“key:value value”，修改标签样式
<body> <!-- 需求1：修改边框为1像素，边框为实线，样色为黄色 --> <div style="border: 5px solid yellow;">div标签1</div>
2）第二种：在head标签中，使用style标签来定义各种自己需要的css样式
格式如下：
xxx{
key:value value;
}
<head> <meta charset="UTF-8"> <title>Title</title> <!--style标签专门用来定义css样式代码--> <style type="text/css"> /*修改body整个div区域*/ div{ border: 2px solid red; } /*修改body整个span区域*/ span{ border:2px solid blue; } </style> </head>
缺点：只能在一个页面内复用代码，不能再多个页面中复用css代码；实际工作中会有成千上万的页面，要到每个页面中修改，工作量太大
3）第三种：把css样式写成一个单独的css文件，在通过link标签引入即可复用
-->写一个css文件：1.css文件内容
div{
border: 2px solid red;
}
span{
border:2px solid blue;
}
-->然后用link引入，html文件代码
<head> <meta charset="UTF-8"> <title>Title</title> <!--link标签专门用来引入css样式标签--> <link rel="stylesheet" type="text/css" href="1.css"/> </head>
4、css选择器
1）标签名选择器
格式：
标签名{
属性：值；
}
标签名选择器，可以决定哪些标签被动的使用这个样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签选择器</title> <style type="text/css"> div{ border:1px solid yellow; color: blue; font-size: 30px; } span{ border:5px dashed blue; color: yellow; font-size: 20px; } </style> </head> <body> <!-- 需求1：在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。 并且修改所有span 标签的字体颜色为黄色，字体大小20个像素。边框为5像素蓝色虚线。 --> <div>div标签2</div> <div>div标签2</div> <span>span标签1</span> <span>span标签2</span> </body> </html>
2）id选择器
格式：
#id属性值{
属性：值
}
id选择器，可以让我们通过id属性选择性的去使用这个样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ID选择器</title> <style type="text/css"> #id001{ color: blue; font-size: 30px; border: 1px solid yellow; } #id002{ color:red; font-size: 20px; border: 5px dashed blue; } </style> </head> <body> <!-- 需求1：分别定义两个 div 标签， 第一个div 标签定义 id 为 id001 ，然后根据id 属性定义css样式修改字体颜色为蓝色， 字体大小30个像素。边框为1像素黄色实线。 第二个div 标签定义 id 为 id002 ，然后根据id 属性定义css样式 修改的字体颜色为红色，字体大小20个像素。边框为5像素蓝色点线。 --> <div id="id001">div标签1</div> <div id="id002">div标签2</div> </body> </html>
如何使用别人写好的css文件，如果别人写好了id选择器，那我们只需要在html的标签里面写上id="css标签内的元素"
3）class选择器（类选择器）
格式：
.class{
属性：值
}
class类型选择器，可以通过class属性有效的选择性的去使用这个样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>class类型选择器</title> <style type="text/css"> .class01{ color: darkgray; font-size: 30px; border:1px solid yellow; } .class02{ color:blue; font-size: 26px; border: 1px solid red; } </style> </head> <body> <!-- 需求1：修改 class 属性值为 class01的 span 或 div 标签，字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。 需求2：修改 class 属性值为 class02的 div 标签，字体颜色为灰色，字体大小26个像素。边框为1像素红色实线。 --> <div class="class01">div标签class01</div> <div class="class02">div标签</div> <span class="class01">span标签class01</span> <span>span标签2</span> </body> </html>
4）组合选择器
格式：
选择器1，选择器2，选择器n{
属性：值；
}
组合选择器可以让多个选择器共用同一个css样式代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>class类型选择器</title> <style type="text/css"> .class01,#id01{ color: blue; font-size: 20px; border: 1px solid yellow; } </style> </head> <body> <!-- 需求1：修改 class="class01" 的div 标签 和 id="id01" 所有的span标签， 字体颜色为蓝色，字体大小20个像素。边框为1像素黄色实线。 --> <div class="class01">div标签class01</div> <br /> <span id="id01">span 标签</span> <br /> <div>div标签</div> <br /> <div>div标签id01</div> <br /> </body> </html>
5）css常用样式
4、字体样式：
color:red;
font-size:20px;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>06-css常用样式.html</title> <style type="text/css"> div{ color: red; width: 19px; height: 20px; background-color: darkgray; font-size: 20px; border: 1px solid #0f0f8b; margin-left: auto; margin-right: auto; text-align: center; } a{ text-decoration: none; } table{ border: 1px solid black; /*设置边框*/ border-collapse: collapse; /*将边框合并*/ } th,td{ border: 1px solid black; } ul{ list-style: none; /*去除列表修饰：列表的修饰是前面的1 I 这样的修饰*/ } </style> </head> <body> <div>我是div标签</div> <a href="http://www.baidu.com">百度</a> <table> <th> <td>1.1</td> <td>1.2</td> </th> </table> <ul> <li>qqqqqq</li> <li>wwwwww</li> <li>eeeeee</li> </ul> </body> </html>