whaso's Blog
0%

前端从入门到放弃

发表于 分类于

一. HTML

VScode 快捷键:

ctrl+shift+enter 在此行的上面insert # pycharm 是 ctrl + enter

ctrl+enter 在此行下面insert

ctrl + B 侧边栏显示/隐藏

tab 切换多项输入位置

  • HyperText Mark-up Language 超文本标记语言

1. 标签

  • 结构 标签不区分大小写 但是推荐小写

    • 双标签 <标签> ………..<标签>

      • html 网页的开始
      • head 头
      • title 标题 一般放到 head 里面
      • body 网页页面显示的内容内容

    • 单标签 <标签>

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>
  • 第一行<!DOCTYPE html>是文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档
  • html标签是告诉浏览器，整个网页是从这里开始到结束,也就是html文档的开始和结束标签
  • head标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件的。
  • body标签是编写网页上显示的内容。

2. 属性

属性用于定义元素的行为和外观，以及与其他元素间的关系

属性名不区分大小写，属性值区分大小写

3. 区块

块级元素(block)通常用于组织和布局页面的主要结构和内容，如段落、标题、列表、表格等。它们用于创建页面的主要部分，将内容分隔成逻辑块

  • 块级元素通常从新行开始，并占据整行，在页面上呈现为一块独立内容块
  • 可以包含其他块级元素和行内元素
  • 常见的有div、p、h1、ul、ol、table、form等

行内元素(inline)通常用于添加文本样式或为文本中一部分应用样式 。它们可以在文本中

  • 行内元素通常在同一行呈现，不会独占一行
  • 只占据其内容需要的宽度，而不是整行宽度
  • 不能包含块级元素，可包含其他行级元素
  • 常见的有span、a、strong、em、img、br、input等
  • div 常用于创建块级容器以便于组织页面的结构和布局
  • span 常用于内联样式化文本，给文本应用样式或标记

4. 表单

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    <h1>HTML 标签</h1>
    <h1>1级标题标签</h1>
    <h2>2级标题标签</h2>
    <h3>3级标题标签</h3>
    <h4>4级标题标签</h4>
    <h5>5级标题标签</h5>
    <h6>6级标题标签</h6>
    <p>段落标签</p>
    <p>
        更改文本样式: <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除线</s>
    </p>
    <ul>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>
    <ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>
    <h1>table row</h1>
    <table border="1">
        <tr>
            <th>列标题1</th>
            <th>列标题2</th>
            <th>列标题3</th>
        </tr>
        <tr>
            <td>元素1</td>
            <td>元素2</td>
            <td>元素3</td>
        </tr>
        <tr>
            <td>元素4</td>
            <td>元素5</td>
            <td>元素6</td>
        </tr>
    </table>
    <h1>HTML 属性</h1>
    <a href="https://www.baidu.com">百度链接</a>
    <hr>
    <br>
    <a href="https://www.baidu.com" target="_self">百度链接</a>
    <img src="https://baikebcs.bdimg.com/baike-react/common/logo-baike.svg" alt="替代文本" width="100" height="100">
    <img src="https://baikebcs.bdimg.com/baike-react/common/logo-baike.sv" alt="替代文本">

    <h1>HTML 区块</h1>
    <div class="nav">
        <a href="a">链接1</a>
        <a href="a">链接2</a>
        <a href="a">链接3</a>
    </div>
    <div class="content">
        <h4>文章标题</h4>
        <p>文章内容</p>
        <p>文章内容</p>
        <p>文章内容</p>
    </div>

    <span>span1</span>
    <span>span2</span>
    <span>span3</span>

    <h1>HTML 表单</h1>
    <form action="后端接口">
        <!-- for 用于绑定 input 常用于绑定 input 的 id -->
        <label for="username">用户名：</label>
        <input type="text" id="username" placeholder="请输入内容">
        <br>
        <label for="">密码：</label>
        <input type="password" value="请输入密码">
        <br>
        <label>性别：</label>
        <!-- 加name 从多选变单选 -->
        <input type="radio" name="gender"> male
        <input type="radio" name="gender"> male
        <input type="radio" name="gender"> male
        <br>
        <label for="">爱好：</label>
        <input type="checkbox"> 唱
        <input type="checkbox"> 跳 
        <input type="checkbox"> rap

        <input type="submit">
    </form>

</body>
</html>

二. CSS

Cascading Style Sheets 层叠样式表

1. 引入

优先级：内联 > 内部 > 外部

  • 行内式：直接在标签的style属性中添加，方便直观但缺乏可重用性
1
<div style="width:100px; height:100px; background:red ">hello</div>
  • 内嵌式：在head标签中加入style标签，在style标签中写css代码，在一个页面内方便复用和维护，多个页面可复用性不高
1
2
3
4
5
6
7
<head>
   <style type="text/css">
      h3{
         color:red;
      }
   </style>
</head>
  • 外链式：将css代码写在一个单独的css文件中，在head标签中使用link标签引入到当前页面中
1
<link rel="stylesheet" type="text/css" href="css/main.css">

2. 选择器

选择用css样式的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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<style>
    /* 标签选择器 */
    p {
        color: blue;
        font-size: 24px;
        background-color: yellow;
    }
    /* 类选择器 */
    .highlight {
        background-color: cyan;
    }
    /* id选择器 */
    #idhighlight {
        background-color: aquamarine;
    }
    /* 通用选择器 */
    * {
        font-family: 'Franklin Gothic Medium';
    }
    /* 子元素选择器 */
    .father > .son {
        color:blueviolet;
    }
    /* 后代选择器 */
    .father p {
        color:aqua;
    }
    /* 相邻元素选择器 */
    h3 + p {
        background-color: red;
    }
    /* 伪类选择器 */
    #element:hover {
        background-color: purple;
        /* 选中第一个子元素 :first-child
                           :nth-child()
                           :active
        
        */
    }
    /* 伪元素选择器 创建个虚拟元素并样式化
    ::after
    ::before
    */
</style>
<body>
    <p>p标签</p>
    <p class="highlight">hightlight类</p>
    <p id="idhighlight">idhighlight</p>

    <div class="father">
        <p class="son">子元素</p>
        <div>
            <p class="grandson">grandson</p>
        </div>
    </div>

    <p>p before h3</p>
    <h3>h3</h3>
    <p>p next h3</p>
    <p>p next p next h3</p>

    <h3 id="element">伪类选择</h3>
</body>
</html>

3. 属性

三. JS