一:JavaWeb
1.javaWeb技术体系
2.HTMl 超文本标记语言 (超文本的意思就是除了可以包含文字之外,还可以包含图片链接音乐视频等。。。)
2.1 HTML网页的组成 (结构:HTML 表现:CSS 行为:Ja vaScript JQuery)
2.2 常用HTML标签
1): html 根标签
2): head 头标签
3): body 体标签
4): h 标题标签
5): a 超链接
6): table 表格
7): form 表单 表单的method如果是get那么在浏览器的地址栏会有详细信息,如果是post则没有
1. HTML代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!-- 设置当前页面使用的字符集,同时也告诉浏览器使用该字符集进行解码 --> 5 <meta charset="UTF-8" /> 6 <!-- 设置浏览器标签页中显示的标题 --> 7 <title>Hello World</title> 8 </head> 9 <body> 10 <!-- 注释快捷键是ctrl + shift + / --> 11 <!--行注释的快捷键是Ctrl+shift+c --> 12 我的第一个网页 13 写完记得保存 14 </body> 15 </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常用标签</title> </head> <body> <!--标题标签 一共6个 --> <h1> 一级标签</h1> <h2> 二级标签</h2><br/> <!-- 标题与换行,<br>是换行 --> <h3> 三级标签</h3> <h4> 四级标签</h4> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 7 <!-- 统一修改当前页面链接的跳转方式 如果后续链接没有单独设置的话 --> 8 <base target="_self"> 9 </head> 10 <body> 11 <!--使用a标签创建一个超链接 12 href属性:用来设置要跳转的页面的路径 13 target属性:用来设置跳转的页面在何处打开 14 _self:默认。在当前标签页打开 15 _blank:在新的标签页打开 16 --> 17 <a href="./tag.html">hello</a><br> 18 <a href="./tag.html" target="_self">hello world</a> 19 <!-- --> 20 </body> 21 </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>this is label HTML</title> </head> <body> <!-- 通过table标签创建一个标签表格 --> <table border="1"> <!-- 表格中的行使用tr标签表示 --> <tr> <!-- 表格中的表头使用th标签表示 --> <th>姓名</th> <th>职业</th> <th>阵营</th> <th>武器</th> </tr> <tr> <td rowspan="2">liubei</td> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <!-- 跨行合并单元格 --> <td >guanyu </td> <td>a1</td> <!-- 跨列合并单元格 以及居中--> <td colspan="2" align="center">b1</td> </tr> </table> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- 使用form标签创建一个表单 action属性:指定服务器的地址 method属性:指定表单的请求方式 get:默认值,发送一个get请求,用户的数据通过浏览器的地址栏进行传输 post:发送一个post请求名用户输入的数据通过请求体 --> <form action="taget.html" method="post"> <!-- 表单中的表单项使用input表示,不同的表单项通过type属性指定 --> <!-- 用户输入的数据通过name属性值进行携带,并以键值对的形式发送到服务器,多个键值对之间使用&符号分隔 例如:user=admin&psd=123456 --> 用户名:<input type="text" name="user"><br> 密码:<input type="password" name="psd"><br> <!-- 通过value来指定按钮上显示的文字 --> <input type="submit" value="login"> </form> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>古诗词</title> <style type="text/css"> /* 标签选择器 */ h1 { color:red } h2 { background-color: red } /*ID选择器 格式:#id属性值 */ #p1{color:green} /*类选择器 格式:.class (该处的点class不能忽略点) */ .p2{color:blue} /*分组选择器 格式:将各个选择器之间使用逗号分隔 */ #p1,.p2{font-size:30px} </style> </head> <body> <h1>静夜思</h1> <h2>唐。李白</h2> <p id="p1">hi mygirfrined</p> <p class="p2">hi my boy frined</p> <p class="p2">hi my boy frined</p> <p class="p2">hi my boy frined</p> <p>hi my boy frined</p> <div>我是div标签,默认占用浏览器的一整行,我是用来布局的</div>1111 </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>古诗词</title> <style type="text/css"> /* 标签选择器 */ h1 { color:red } h2 { background-color: red } /*ID选择器 格式:#id属性值 */ #p1{color:green} /*类选择器 格式:.class (该处的点class不能忽略点) */ .p2{color:blue} /*分组选择器 格式:将各个选择器之间使用逗号分隔 */ #p1,.p2{font-size:30px} </style> </head> <body> <h1>静夜思</h1> <h2>唐。李白</h2> <p id="p1">hi mygirfrined</p> <p class="p2">hi my boy frined</p> <p class="p2">hi my boy frined</p> <p class="p2">hi my boy frined</p> <p>hi my boy frined</p> <div class="p2">我是div标签,默认占用浏览器的一整行,我是用来布局的</div>1111 <!-- 颜色表达方式: 1.使用英文单词表示 例如:红色:red 2.使用rgb值表示 例如:rgb(255,255,255) 3.使用十六进制数 例如红色:#FF0000 --> </body> </html>