JavaWeb前端
第一章 html以及css的用法 1.1 HTML语法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>grammar</title> </head> <body> <!-- 1.标签的分类 HTML标签分为两类,一类叫有开始有结束的标签,另一类叫自结束标签。 --> <div></div><div></div><span></span><p></p><br> <!-- 2.标签不区分大小写 --> <div>i am div</div> <DIV>I AM DIV</DIV> <!-- 3.标签可以嵌套但不能交叉嵌套 --> <div>div<span>span</div></span> <!-- 4.标签必须正确关闭 --> <div>div</div> <!-- 5.属性必须有值,且属性值必须加引号 --> <div id="one">id=one</div> <!-- 6.注释不能嵌套 --> <!-- html注释 <!-- --> --> </body> </html> 1.2 常用标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>tag</title> </head> <body> <!--需求1:div、span、p标签的演示 div标签 默认独占一行 span标签 它的长度是封装数据的长度 p段落标签 默认会在段落的上方或下方各空出一行来(如果已有就不再空) --> 2. 文本标签:和文本有关的标签 * 注释:<!-- 注释内容 --> * <h1> to <h6>:标题标签 * h1~h6:字体大小逐渐递减 * <p>:段落标签 * <br>:换行标签 * <hr>:展示一条水平线 * 属性: * color:颜色 * width:宽度 * size:高度 * align:对其方式 * center:居中 * left:左对齐 * right:右对齐 * <b>:字体加粗 * <i>:字体斜体 * <font>:字体标签 * <center>:文本居中 * 属性: * color:颜色 * size:大小 * face:字体 <!-- 1.标题标签 语法:h1-h6,字体大小,粗细递减。 --> <h1>h1</h1> <h2>h2</h2> <h3>h3</h3> <h6>h6</h6> <h7>h7</h7><br><!-- br标签简单的换行符--> h8 <!-- 2.div标签 语法:<div></div> 作用:无实际意义,布局,可以让页面变好看 --> <div> <div>上</div> <div>中</div> <div>下</div> </div> <!-- 3.段落标签 语法:<p></p> --> <p> 段落1</p> <p>  段落2</p> <p>段落3</p> <!-- 4.转义字符 语法: &开头,;结尾 常用: 空格: 普通空格   中文空格 大于号:> 小于号:< 版权号:© --> 问:下列哪些选项是标题标签?<br> a:<span></span><br> b:<div></div><br> c:<h1></h1><br> d:<h7></h7><br> © <!-- 5.列表 无序列表 语法:<ul> <li></li> </ul> ul li * type disc:实心圆 circle:空心圆 square:实心方 有序列表 语法: <ol> <li></li> </ol> --> <h1>无序列表</h1> <ul type="square"> <li>list1</li> <li>list2</li> <li>list3</li> </ul> <h1>有序列表</h1> <ol type="i"> <li>list1</li> <li>list2</li> <li>list3</li> <li>list1</li> <li>list2</li> <li>list3</li> <li>list1</li> <li>list2</li> <li>list3</li> <li>list1</li> <li>list2</li> <li>list3</li> </ol> </body> </html> 1.3 插入图片 <!--需求1:使用img标签显示一张美女的照片。并修改宽高,和边框属性 img标签是图片标签,用来显示图片 src属性可以设置图片的路径 width属性设置图片的宽度 height属性设置图片的高度 border属性设置图片边框大小 alt属性设置当指定路径找不到图片时,用来代替显示的文本内容 在JavaSE中路径也分为相对路径和绝对路径. 相对路径:从工程名开始算 绝对路径:盘符:/目录/文件名 在web中路径分为相对路径和绝对路径两种 相对路径: . 表示当前文件所在的目录 .. 表示当前文件所在的上一级目录 文件名 表示当前文件所在目录的文件,相当于 ./文件名 ./ 可以省略 绝对路径: 正确格式是: http://ip:port/工程名/资源路径 错误格式是: 盘符:/目录/文件名 --> <img src="1.jpg" width="200" height="260" border="1" alt="美女找不到"/> <img src="../../2.jpg" width="200" height="260" /> <img src="../imgs/3.jpg" width="200" height="260" /> <img src="../imgs/4.jpg" width="200" height="260" /> <img src="../imgs/5.jpg" width="200" height="260" /> <img src="../imgs/6.jpg" width="200" height="260" /> </body> </html> 1.4 超链接 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>hyperlink</title> </head> <body> <!-- 使用a标签制作超链接 href:链接路径 target: _self:以当前选项卡(页面)打开 _blank:以新的选项卡(页面)打开 --> <a href="pages/target.html" target="_blank">跳转到目标页面,目标页面有美女!</a> </body> </html> 1.5 表格 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>table</title> </head> <body> <!-- * 使用table制作表格 tr行 th表头 td单元格 * 语法 <table> <tr> <th>|<td> </tr> </table> * 跨行跨列 * 跨行:rowspan * 跨列:colspan cellspacing 设置单元格间距 <table align="center" border="1" width="300" height="300" cellspacing="0"> --> <table border="1"> <tr> <th>姓名</th> <th>阵营</th> <th>职业</th> <th>武器</th> </tr> <tr> <td>刘备</td> <td>蜀</td> <td>蜀汉集团董事长</td> <td>双股剑</td> </tr> <tr> <td>诸葛亮</td> <td>蜀</td> <td>蜀汉集团CEO</td> <td>羽扇</td> </tr> <tr> <td>关羽</td> <td>蜀</td> <td>荆襄总裁</td> <td>青龙偃月刀</td> </tr> <tr> <td>张飞</td> <td>蜀</td> <td>阆中销售经理</td> <td>丈八蛇矛</td> </tr> </table> </body> </html> 1.5.1 跨行跨列的用法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>table_blank</title> </head> <body> <h1>三行三列</h1> <table border="1" width="500px" height="300px" align="center"> <tr align="center"> <td>11</td> <td>12</td> <td>13</td> </tr> <tr align="center"> <td colspan="2">2122</td> <!-- <td>22</td> --> <td rowspan="2">2333</td> </tr> <tr align="center"> <td>31</td> <td>32</td> <!-- <td>33</td> --> </tr> </table> </body> </html> 1.6 表单 <!--需求1:创建一个个人信息注册的表单界面。包含用户名,密码,确认密码。性别(单选),兴趣爱好(多选),国籍(下拉列表)。 隐藏域,自我评价(多行文本域)。重置,提交。--> <!-- form标签就是表单 input type=text 是文件输入框 value设置默认显示内容 input type=password 是密码输入框 value设置默认显示内容 input type=radio 是单选框 name属性可以对其进行分组 checked="checked"表示默认选中 input type=checkbox 是复选框 checked="checked"表示默认选中 input type=reset 是重置按钮 value属性修改按钮上的文本 input type=submit 是提交按钮 value属性修改按钮上的文本 input type=button 是按钮 value属性修改按钮上的文本 input type=file 是文件上传域 input type=hidden 是隐藏域 当我们要发送某些信息,而这些信息,不需要用户参与,就可以使用隐藏域(提交的时候同时发送给服务器) select 标签是下拉列表框 option 标签是下拉列表框中的选项 selected="selected"设置默认选中 textarea 表示多行文本输入框 (起始标签和结束标签中的内容是默认值) rows 属性设置可以显示几行的高度 cols 属性设置每行可以显示几个字符宽度 <!-- form标签是表单标签 action属性设置提交的服务器地址 method属性设置提交的方式GET(默认值)或POST 表单提交的时候,数据没有发送给服务器的三种情况: 1、表单项没有name属性值 2、单选、复选(下拉列表中的option标签)都需要添加value属性,以便发送给服务器 3、表单项不在提交的form标签中 GET请求的特点是: 1、浏览器地址栏中的地址是:action属性[+?+请求参数] 请求参数的格式是:name=value&name=value 2、不安全 3、它有数据长度的限制 POST请求的特点是: 1、浏览器地址栏中只有action属性值 2、相对于GET请求要安全 3、理论上没有数据长度的限制 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单的显示</title> </head> <body> <form action="http://localhost:8080" method="post"> <input type="hidden" name="action" value="login" /> <h1 align="center">用户注册</h1> <table align="center"> <tr> <td> 用户名称:</td> <td> <input type="text" name="username" value="默认值"/> </td> </tr> <tr> <td> 用户密码:</td> <td><input type="password" name="password" value="abc"/></td> </tr> <tr> <td>性别:</td> <td> <input type="radio" name="sex" value="boy"/>男 <input type="radio" name="sex" checked="checked" value="girl" />女 </td> </tr> <tr> <td> 兴趣爱好:</td> <td> <input name="hobby" type="checkbox" checked="checked" value="java"/>Java <input name="hobby" type="checkbox" value="js"/>JavaScript <input name="hobby" type="checkbox" value="cpp"/>C++ </td> </tr> <tr> <td>国籍:</td> <td> <select name="country"> <option value="none">--请选择国籍--</option> <option value="cn" selected="selected">中国</option> <option value="usa">美国</option> <option value="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> </html> 1.7 iframe的用法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>8.iframe标签.html</title> </head> <body> 我是一个单独的完整的页面<br/><br/> <!--ifarme标签可以在页面上开辟一个小区域显示一个单独的页面 ifarme和a标签组合使用的步骤: 1 在iframe标签中使用name属性定义一个名称 2 在a标签的target属性上设置iframe的name的属性值 target(目标)指向iframe的name的属性值,实现在一个单独的页面上超链接切换不同的html --> <iframe src="3.标题标签.html" width="500" height="400" name="abc"></iframe> <br/> <ul> <li><a href="0-标签语法.html" target="abc">0-标签语法.html</a></li> <li><a href="1.font标签.html" target="abc">1.font标签.html</a></li> <li><a href="2.特殊字符.html" target="abc">2.特殊字符.html</a></li> </ul> </body> </html> 1.8 css的用法 第一种用法 这种方式的缺点? ...