JavaWeb前端基础（HTML CSS JavaScript）

JavaWeb前端基础（HTML CSS JavaScript）
本文用于检验学习效果，忘记知识就去文末的链接复习

1. HTML

1.1 HTML基础

结构
- 头
- 身体
内容
- 图片
- 段落
- 图标
标签
- 单标签
- 双标签
常用标签
- div：分割块
- span：只占需要的大小
- p：段落
- br：换行
- hr：一根横线（与页面宽度一样）
- h1，h2，h3，h4，h5，h6：一级/二级/三级/四级/五级/六级标题
- a：链接
- ol，li：有序列表
- ul，li：无序列表
- teble，thead，tr，th，tbody，tr，tb：表格
转义字符
- &ensp半个空白格子
- &emsp一个空白格子
- 更小的空白格子
- <<
- >>
- &&
- ""
- ©版权
- ®已注册商标
- ×乘号
- ÷除号
```
DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>hello titletitle>
  <link rel="icon" href="./img/法案_bill.png" type="image/x-icon" />
head>

<body>
  <div id="anchor1">这是页面顶端（锚点位置）div>
  <h1>这是一级标题h1>
  <h2>这是二级标题h2>
  <h3>这是三级标题h3>

  <div class="b1">
    <p>【这是第1块，第1段】p>
    <p>
      【这是第1块，第2段】<br />《望庐山瀑布》<br />唐·李白<br />日照香炉生紫烟，遥看瀑布挂前川。<br />飞流直下三千尺，疑是银河落九天。
    p>
    <p>【这是第1块，第3段】< >< >< >p>
  div>

  <div class="b2">
    <p>【这是第2块】p>
    <a href="https://www.bilibili.com/">点击这里访问粉色小破站a>

    <ol>
      有序列表
      <li>这是第一项li>
      <li>这是第二项li>
      <li>这是第三项li>
      <li>这是第四项li>
      <li>这是第五项li>
      <li>这是第六项li>
    ol>
    <ul>
      无序列表
      <li>这是第一项li>
      <li>这是第二项li>
      <li>这是第三项li>
      <li>这是第四项li>
      <li>这是第五项li>
      <li>这是第六项li>
    ul>
    <table border="">
      <thead>
        <tr>
          <th>学号th>
          <th>姓名th>
          <th>班级th>
        tr>
      thead>
      <tbody>
        <tr>
          <th>001th>
          <th>小明th>
          <th>计科th>
        tr>
        <tr>
          <th>002th>
          <th>小红th>
          <th>软工th>
        tr>
      tbody>
    table>
  div>

  <div>
    <p>【这是第3块】p>
    <p>
      <img width="300" src="./img/可厉害.png" alt="可厉害" /><img width="300" src="./img/可厉害.png" alt="可厉害" />
    p>
    <p>
      <img width="300" src="./img/可厉害.png" alt="可厉害" /><img width="300" src="./img/可厉害.png" alt="可厉害" />
    p>
    <p><a href="#anchor1">跳转到页面顶端（锚点位置）a>p>
  div>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
```
1.2 HTML表单（写登录界面）

标签
- label
- input
- button
```
DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>hello titletitle>
  <link rel="icon" href="./img/法案_bill.png" type="image/x-icon" />
head>

<body>
  <div>
    <h1>登录网站h1>
    <hr />
    <label>
      账号:
      <input type="text" name="username" id="username" placeholder="账号" /><br />
      密码:
      <input type="password" name="password" id="password" placeholder="密码" /><br />
      颜色:
      <input type="color" name="color" id="color" /><br />
      选择文件:
      <input type="file" name="file" id="file" /><br />
      选择日期:
      <input type="date" name="date" id="date" /><br />
      备注
      <textarea name="textarea" id="textarea" cols="30" rows="10" placeholder="多行文本">textarea><br />
      <hr />
      <a href="http://www.baidu.com">忘记密码a>
      <button>登录button><br />
    label>
    <label>
      <input type="checkbox" name="checkbox" id="checkbox" />
      我同意本网站的隐私政策
      <a href="http://www.baidu.com">《隐私政策》a>
    label>
    <br>
    <label>
      <input type="radio" name="role" />
      学生
      <input type="radio" name="role" />
      老师
      <input type="radio" name="role" />
      管理员
      <br>
      选择身份
      <select>
        <option value="1">学生option>
        <option value="2">老师option>
        <option value="3">管理员option>
      select>
    label>

  div>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
```
2. CSS

用CSS自定样式
- 用外部css文件
- 在元素标签中用style=""
- 在头部定义样式

1. HTML

1.1 HTML基础

1.2 HTML表单（写登录界面）

2. CSS