一：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代码

 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>

hello world

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

常用标题以及换行br

 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>

选择器设置字体颜色等css

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

颜色表达方式