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代码
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>
<!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>
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>
<!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>
<!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>
<!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>
<!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>