echho 发布的文章

排序

快速排序

归并排序是由下向上的,先处理子数组然后再合并。而快速排序正好相反,它的过程是由上向下的,先分出两个子区间,再对子区间进行排序。归并排是非原地算法,而快排则是原地排序算法

时间复杂度:O(nlogn)

注意:快速选择 O(n)

void quick_sort(int q[], int l, int r)
{
    if (l >= r) return; //必须 l>=r

    int i = l - 1, j = r + 1, x = q[l + r >> 1];
    while (i < j)
    {
        do i ++ ; while (q[i] < x);
        do j -- ; while (q[j] > x);
        if (i < j) swap(q[i], q[j]);
    }
    quick_sort(q, l, j), quick_sort(q, j + 1, r);
}

补:快速选择

给定一个长度为 n 的整数数列,以及一个整数 k,请用快速选择算法求出数列从小到大排序后的第 k 个数。

#include <iostream>

using namespace std;

const int N = 1e5+10;

int n,k;
int q[N];

int quick_sort(int l, int r, int k)
{
    if (l >= r) return q[l];
    
    int x = q[l], i=l-1, j=r+1;
    while (i < j)
    {
        do i++; while (q[i] < x);
        do j--; while (q[j] > x);
        if (i<j) swap(q[i],q[j]);
    }
    int sl = j-l+1;
    if (k <= sl) return quick_sort(l,j,k);
    return quick_sort(j+1,r,k-sl);
}

int main()
{
    cin >> n >> k;
    
    for (int i = 0; i< n; i++) cin >> q[i];
    
    cout << quick_sort(0,n-1,k) << endl;
    
    return 0;
}

 

归并排序

时间复杂度:O(nlogn)

void merge_sort(int q[], int l, int r)
{
    if (l >= r) return;

    int mid = l + r >> 1;
    merge_sort(q, l, mid);
    merge_sort(q, mid + 1, r);
    
    int k = 0, i = l, j = mid + 1;
    while (i <= mid && j <= r)
        if (q[i] <= q[j]) tmp[k ++ ] = q[i ++ ];
        else tmp[k ++ ] = q[j ++ ];
    
    while (i <= mid) tmp[k ++ ] = q[i ++ ];
    while (j <= r) tmp[k ++ ] = q[j ++ ];
    
    for (i = l, j = 0; i <= r; i ++, j ++ ) q[i] = tmp[j];
}

二分

整数二分

bool check(int x) {/* ... */} // 检查x是否满足某种性质

// 区间[l, r]被划分成[l, mid]和[mid + 1, r]时使用:
int bsearch_1(int l, int r)
{
    while (l < r)
    {
        int mid = l + r >> 1;
        if (check(mid)) r = mid;    // check()判断mid是否满足性质
        else l = mid + 1;
    }
    return l;
}
// 区间[l, r]被划分成[l, mid - 1]和[mid, r]时使用:
int bsearch_2(int l, int r)
{
    while (l < r)
    {
        int mid = l + r + 1 >> 1;
        if (check(mid)) l = mid;
        else r = mid - 1;
    }
    return l;
}

浮点数二分

bool check(double x) {/* ... */} // 检查x是否满足某种性质

double bsearch_3(double l, double r)
{
    const double eps = 1e-6;   // eps 表示精度,取决于题目对精度的要求
    while (r - l > eps)
    {
        double mid = (l + r) / 2;
        if (check(mid)) r = mid;
        else l = mid;
    }
    return l;
}

高精度

高精度加法

// C = A + B, A >= 0, B >= 0
vector<int> add(vector<int> &A, vector<int> &B)
{
    if (A.size() < B.size()) return add(B, A);

    vector<int> C;
    int t = 0;
    for (int i = 0; i < A.size(); i ++ )
    {
        t += A[i];
        if (i < B.size()) t += B[i];
        C.push_back(t % 10);
        t /= 10;
    }
    
    if (t) C.push_back(t);
    return C;
}

高精度乘低精度

// C = A * b, A >= 0, b >= 0
vector<int> mul(vector<int> &A, int b)
{
    vector<int> C;

    int t = 0;
    for (int i = 0; i < A.size() || t; i ++ )
    {
        if (i < A.size()) t += A[i] * b;
        C.push_back(t % 10);
        t /= 10;
    }
    
    while (C.size() > 1 && C.back() == 0) C.pop_back();
    
    return C;
}

高精度除以低精度

// A / b = C ... r, A >= 0, b > 0
vector<int> div(vector<int> &A, int b, int &r)
{
    vector<int> C;
    r = 0;
    for (int i = A.size() - 1; i >= 0; i -- )
    {
        r = r * 10 + A[i];
        C.push_back(r / b);
        r %= b;
    }
    reverse(C.begin(), C.end());
    while (C.size() > 1 && C.back() == 0) C.pop_back();
    return C;
}

前缀和、差分

一维前缀和

S[i] = a[1] + a[2] + ... a[i]
a[l] + ... + a[r] = S[r] - S[l - 1]

二维前缀和

S[i, j] = 第i行j列格子左上部分所有元素的和
以(x1, y1)为左上角,(x2, y2)为右下角的子矩阵的和为:
S[x2, y2] - S[x1 - 1, y2] - S[x2, y1 - 1] + S[x1 - 1, y1 - 1]

一维差分

给区间[l, r]中的每个数加上c:B[l] += c, B[r + 1] -= c

二维差分

给以(x1, y1)为左上角,(x2, y2)为右下角的子矩阵中的所有元素加上c:
S[x1, y1] += c, S[x2 + 1, y1] -= c, S[x1, y2 + 1] -= c, S[x2 + 1, y2 + 1] += c

 

位运算

求n的第k位数字: n >> k & 1
返回n的最后一位1:lowbit(n) = n & -n

 

双指针算法

for (int i = 0, j = 0; i < n; i ++ )
{
    while (j < i && check(i, j)) j ++ ;

    // 具体问题的逻辑
}
常见问题分类:
    (1) 对于一个序列,用两个指针维护一段区间
    (2) 对于两个序列,维护某种次序,比如归并排序中合并两个有序序列的操作

 

离散化

vector<int> alls; // 存储所有待离散化的值
sort(alls.begin(), alls.end()); // 将所有值排序
alls.erase(unique(alls.begin(), alls.end()), alls.end());   // 去掉重复元素

// 二分求出x对应的离散化的值
int find(int x) // 找到第一个大于等于x的位置
{
    int l = 0, r = alls.size() - 1;
    while (l < r)
    {
        int mid = l + r >> 1;
        if (alls[mid] >= x) r = mid;
        else l = mid + 1;
    }
    return r + 1; // 映射到1, 2, ...n
}

 

区间合并

// 将所有存在交集的区间合并
void merge(vector<PII> &segs)
{
    vector<PII> res;

    sort(segs.begin(), segs.end());
    
    int st = -2e9, ed = -2e9;
    for (auto seg : segs)
        if (ed < seg.first)
        {
            if (st != -2e9) res.push_back({st, ed});
            st = seg.first, ed = seg.second;
        }
        else ed = max(ed, seg.second);
    
    if (st != -2e9) res.push_back({st, ed});
    
    segs = res;
}

--> 排序快速排序归并排序是由下向上的,先处理子数组然后再合并。而快速排序正好相反,它的过程是由上向下的,先分出两个子区间,再对子区间进行排序。归并排是非原地算法,而快排则是原地排序算法时间复杂度:O(nlogn)注意:快速选择 O(n)void quick_sort(int q[], int l, int r){ if (l >= r) return; //必须 l>=r ...

while(~scanf(“%d%d“,&a,&b))详解

按位取反

1. 原码、反码、补码

原码:符号位加上真值的绝对值, 即用第一位表示符号, 其余位表示值。

反码:正数的反码是其本身;负数的反码是在其原码的基础上, 符号位不变,其余各个位取反。

补码:正数的补码就是其本身;负数的补码是在原码的基础上, 符号位不变, 其余各位取反, 最后+1。 (即在反码的基础上+1)

十进制数原码反码补码
850101 01010101 01010101 0101
-851101 01011010 10101010 1011
90000 10010000 10010000 1001
-91000 10011111 01101111 0111

 

2. 取反符号:~

~ 取反运算,0 则变为 1,1 则变为 0,如

~ 1 0 0 1 1
-----------------------------
  0 1 1 0 0

 

3. 按位取反

按位取反需要涉及以上概念。要弄懂这个运算符的计算方法,首先必须明白二进制数在内存中的存放形式,二进制数在内存中是以补码的形式存放的。

下面以计算正数 9 的按位取反为例,计算步骤如下(注:前四位为符号位):

- 原码   : 0000 1001
- 算反码 : 0000 1001 (正数反码同原码)
- 算补码 : 0000 1001 (正数补码同反码)
- 补取反 : 1111 0110 (全位0变1,1变0)
- 算反码 : 1111 0101 (末位减1)
- 算原码 : 1111 1010 (其他位取反)

 

总结

  1. 所有正整数的按位取反是其本身+1的负数
  2. 所有负整数的按位取反是其本身+1的绝对值
  3. 零的按位取反是 -1(0在数学界既不是正数也不是负数)

 

scanf( ) 的返回值

对于scanf("%d%d%d",&a,&b,&c);

  1. 如果a、b 和c 都被成功读入,则scanf的返回值为3
  2. 如果 a 和 b 被成功读入,那么返回值为2
  3. 如果只有a被成功读入,那么返回值为1
  4. 如果遇到错误或遇到end of file,返回值为EOF

 

其中,EOFEnd Of File 的缩写,在 C 语言标准库中的定义为:#define EOF (-1)

可参考此篇文章:字符输入输出和输入验证 – Echo (liveout.cn)

 

总结

scanf 成功读取至少一个数时,scanf 的返回值是1或2,

1按位取反为-2, 2按位取反为-3,都会进入while循环内部。

当输入读取结束后,scanf的返回值是EOF,EOF即-1,-1按位取反为0,此时会跳出while循环。

//这个意思一样
while(~scanf("%d%d",&a,&b)) 
while(scanf("%d%d",&a,&b) != EOF)

 

--> while(~scanf(“%d%d“,&a,&b))详解按位取反1. 原码、反码、补码原码:符号位加上真值的绝对值, 即用第一位表示符号, 其余位表示值。反码:正数的反码是其本身;负数的反码是在其原码的基础上, 符号位不变,其余各个位取反。补码:正数的补码就是其本身;负数的补码是在原码的基础上, 符号位不变, 其余各位取反, 最后+1。 (即在反码的基础上+1)十进制数原码...

前言

本文为 CSS 基础笔记

上一篇笔记为:HTML基础 – Echo (liveout.cn)

CSS

CSS (Cascading Style Sheets,层叠样式表),是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言,CSS 文件扩展名为 .css

基础认知

1. 语法规则

css写在style标签中,style标签一般写在head标签里面,title标签下面

此方法为内嵌式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法</title>
    <style>
        /* 注释 */
        /* 选择器{css属性} */
        /* 选择器:查找标签 */
        p1{
            /* 文字颜色 */
            color: red;
            /* 字体 px:像素 */
            font-size: 30px;
            /* 背景色 */
            background-color: aqua;
            /* width height */
            width: 200px;
            height: 400px;
        }
    </style>
</head>
<body>
    <p1>p1红色字体标签</p1>
</body>
</html>

 

2. 引入方式

  1. 内嵌式 :css 写在 style标签中

    注意:style标签通常写在head标签中

  2. 外联式:css 写在 一个单独的 .css 的文件中

    注意:需要通过link标签在网页中引入

  3. 行内式:css 写在标签的 style 属性中

    注意:配合js使用

 

引入方式书写位置作用范围使用场景
内嵌式css 写在 style标签中当前页面小案例
外联式css 写在 一个单独的 .css 的文件中多个页面项目中
行内式css 写在标签的 style 属性中当前标签配合js使用

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引入式</title>
    <!-- stylesheet:关系为样式表 -->
    <link rel="stylesheet" href="引入式.css">
</head>
<body>
    <!-- 外联式:p1 -->
    <p1>p1标签</p1>
    <!--  行内式-->
    <div style="color: green; font-size: 20px;">div标签</div>
</body>
</html>
/* 选择器 {} */
p1{
    color: red;
}

 

基础选择器

1. 标签选择器

➢结构:标签名 { css属性名 : 属性值; }

➢作用: 通过标签名,找到页面中所有这类标签,设置样式

➢注意点:

  1. 标签选择器选择的是一 类标签, 而不是单独某一个

  2. 标签选择器无论嵌套关系有多深, 都能找到对应的标签

     

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础选择器</title>
    <style>
         /* 定义基础选择器 */
        p {
            color: red;
            font-size: 66px;
        }
    </style>
</head>
<body>
    <p>标签选择器</p>
</body>
</html>

 

2. 类选择器

➢结构: .类名{ css属性名 : 属性值; }

➢作用:通过类名,找到页面中所有带有这个类名的标签,设置样式

➢注意点:

  1. 所有标签上都有class属性, class属性的属性值称为类名(类似于名字)
  2. 类名可以由数字、 字母、下划线、中划线组成,但不能以数字或者中划线开头
  3. 一 个标签可以同时有多个类名, 类名之间以空格隔开
  4. 类名可以重复,一个类选择器可以同时选中多个标签

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础选择器</title>
    <style>
         /* 定义类选择器 */
        .red {
            color: red;
        }

        .size {
            font-size: 66px;
        }
    </style>
</head>
<body>
    <!-- 类: 定义 和 使用 才能生效 -->
    <p>普通p标签</p>
    <!-- 一个标签可以使用多个类名,需要空格隔开 -->
    <div class="red size">类选择器</div>
    <p class="red">加了class</p>
</body>
</html>

 

3. id选择器

➢结构:#id属性值 { css属性名 : 属性值; }

➢作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式,配合js制作动态效果

➢注意点:

  1. 所有标签上都有id属性
  2. id属性值类似于身份证号码, 在一个页面中是唯一的,不可重复的!
  3. 一个标签上只能有一个id属性值
  4. 一个id选择器只能选中一个标签

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器</title>
    <style>
        /* 定义id选择器 */
        #blue {
            color: skyblue;
        }
    </style>
</head>
<body>
    <div id="blue">蓝色div</div>
</body>
</html>

 

4.通配符选择器

➢结构: * { css属性名 : 属性值; }

➢作用:找到页面中所有的标签,设置样式

➢注意点:

  1. 开发中使用极少, 只会在极特殊情况下才会用到
  2. 小页面中可能会用于去除标签默认的margin和padding (后续讲解)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符</title>
    <style>
         /* 定义通配符选择器 */
        * {
            color:red;
        }
    </style>
</head>
<body>
    <p>p</p>
    <div>div</div>
    <h1>h1</h1>
    <span>span</span>
</body>
</html>

 

字体和文本样式

1. 字体样式

  1. 字体大小:font-size 谷歌默认16px
  2. 字体粗细:font-weight 正常normal/400 加粗blod/700
  3. 字体样式:font-style 倾斜 italic
  4. 字体类型:font-family
  5. 字体类型:font属性连写

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体样式</title>
    <style>
        p {
            /* font-size: 18px;
            font-weight: 700;
            font-style: italic;
            font-family: 'Lucida Sans', 'Lucida Sans Regular',  sans-serif; */

            /* font: style  weight  size  字体; */
            font: normal 700 66px 宋体;
            /* font: 66px 宋体; 省略style、weight为默认 */
            font-style: italic;


            /* 一个属性冒号后面书写多个值:复合属性 */
        }
    </style>
</head>
<body> 
    <p>Hello World</p>
</body>
</html>

 

2. 文本样式

  1. 文本缩进:text-indent (1)数字+px (2) 数字+em (推荐:1em =当前标签font-size大小)

  2. 文本对齐方式:text-align left左对齐 center居中对齐 right右对齐

  3. 文本修饰:text-decoration


    1. underline:下划线(常用)
    2. line-through:删除线(不常用)
    3. overline:上划线(几乎不用)
    4. none:无装饰线(常用)

    注意:开发中使用 text-decoration : none; 清除a标签默认的下划线

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本样式</title>
    <style>
        p {
            /* text-indent: 50px; */
            /* 首行缩进两个字大小 */
            text-indent: 2em;
            text-decoration: none;
        }

        h1 {
            text-align: left;
            text-align: right;
            text-align: center;
        }

        body {
            text-align: center;
        }

        /* 文本修饰 */
        div {
            text-decoration: underline;
        }

        h2 {
            text-decoration: line-through;
        }

        h3 {
            text-decoration: overline;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1>拣爱--Love Choice</h1>

    <img src="https://yy.liveout.cn/article/essay/life/2023/spring/jianai.png" alt="love choice">

    <p>前女友分手的时候告诉我这个游戏的,认识7年,因为不合适分开,无疾而终。 她跟我说”就连游戏我都得重来三次才能正确地爱一个人,不合适是没有办法的。”故事的结局在相遇的时候就定好了所以周芷若就算跟张无忌要结婚了也在不了一起,
所以英梨梨就算十年前就认识伦也一样没有胜算,我们哪里有游戏里重来的机会,每次的选择都会直通早就定好的结局。所以故事的结局远不如过程重要,我宁愿有一个不圆满的结局也希望有足够让人怀念的过程。剩下的,不过时也命也,人各有处,不必自缚。</p>


        <!-- 文本修饰 -->
        <div>div</div>
        <p>ppp</p>
        <h2>h2</h2>
        <h3>上划线</h3>
        <a href="https://www.liveout.cn" target="_blank">我是一个超链接</a>
</body>
</html>

 

3. 行高

line-height:控制一行的上下间距

取值:

  1. 数字+px
  2. 倍数(当前标签font-size的倍数)

 

应用:

  1. 让单行文本垂直居中可以设置line-height :文字父元素高度
  2. 网页精准布局时, 会设置line-height: 1可以取消上下间距

 

行高与font连写的注意点:

  1. 如果同时设置了行高和font连写,注意覆盖问题
  2. font: style weight size/line-height family ;

 

<!DOCTYPE html>
<html lang="en">
<head> 
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行高</title>
    <style>
        p {
            font-weight: 600;
            font-family: 宋体;
            line-height: 50px;

            /* 60px 宋体 倾斜 加粗 行高2倍 */
            font: italic 700 30px/2 宋体;
        }
    </style>
</head>
<body>
    <p>前女友分手的时候告诉我这个游戏的,认识7年,因为不合适分开,无疾而终。 她跟我说”就连游戏我都得重来三次才能正确地爱一个人,不合适是没有办法的。”故事的结局在相遇的时候就定好了所以周芷若就算跟张无忌要结婚了也在不了一起,
        所以英梨梨就算十年前就认识伦也一样没有胜算,我们哪里有游戏里重来的机会,每次的选择都会直通早就定好的结局。所以故事的结局远不如过程重要,我宁愿有一个不圆满的结局也希望有足够让人怀念的过程。剩下的,不过时也命也,人各有处,不必自缚。</p>
</body>
</html>

 

拓展

1. 颜色取值

颜色表示方式表示含义属性值
关键词预定义的颜色名red、green、 blue、 yello.....
rgb表示法红绿蓝三原色。每项取值范围: 0~255rgb(0,0,0)、rgb(255,255,255)、 r2550....
rgba表示法红绿蓝三原色+a表示透明度,取值范围是0~1rgba(255,255,255,0.5)、rgba(255,0,0,0.3....
十六进制表示法#开头,将数字转换成十六进制表示#000000、#f0000、 #e92322, 简写: #000、 #f00

 

2. 标签水平居中

方法总结:margin : 0 auto

让 div、p、h(大盒子) 水平居中:通过 margin : 0 auto ; 实现,其中 0 为上下间距,auto 为左右间距

注意:

  1. 如果需要让div、 p、h (大盒子) 水平居中,直接给当前元素本身设置即可
  2. margin: 0 auto -般针对于固定宽度的盒子,如果大盒子没有设置宽度,此时会默认占满父元素的宽度

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签水平居中</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

 

案例

1. 新闻

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻</title>
    <style>
        div {
            width: 800px;
            height: 600px;
           margin: 0 auto;
        }

        /* 类选择器 */
        .center {
            text-align: center;
        }

        .color1 {
            color: #808080;
        }

        .color2 {
            color: #87ceeb;
            font-weight: 700;
        }

        a {
            text-decoration: none;
        }

        /* 段落内容首行缩进 */
        .suojin {
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div>
        <h1 class="center">《自然》评选改变科学的10个计算机代码项目</h1>
        <p class="center">
            <span class="color1">2077年01月28日14:58 </span>
            <span class="color2">新浪科技</span>
            <a href="https://liveout.cn">收藏本文</a>         
        </p>
        <hr>
        <p class="suojin">2019年,事件视界望远镜团队让世界首次看到了黑洞的样子。不过,研究人员公布的这张发光环形物体的图像并不是传统的图片,而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据,研究人员进行了数学转换,最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码,并撰文记录这一发现,其他研究者也可以在此基础上进一步加以分析。</p>
        <p class="suojin">这种模式正变得越来越普遍。从天文学到动物学,在现代每一项重大科学发现的背后,都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖,他指出,今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力,”他说,“问题在于,我们仍然需要思考。”</p>
        <p class="suojin">如果没有能够解决研究问题的软件,以及知道如何编写并使用软件的研究人员,一台计算机无论再强大,也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起,后者已经渗透到研究工作的各个方面。近日,《自然》(Nature)杂志将目光投向了幕后,着眼于过去几十年来改变科学研究的关键计算机代码,并列出了其中10个关键的计算机项目。</p>
        <p class="suojin">最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言,允许用户用代码为计算机编程,但这两种语言都需要对计算机的架构有深入的了解,使得许多科学家难以掌握。20世纪50年代,随着符号语言的发展,特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran,这种情况发生了变化。利用Fortran,用户可以用人类可读的指令来编程,例如x = 3 + 5。然后由编译器将这些指令转换成快速、高效的机器代码。</p>
    </div>
</body>
</html>

 

2. 产品

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品</title>
    <style>
        body {
            background-color: #f5f5f5;
        }

        .goods {
            width: 234px;
            height: 300px;
            background-color: #fff; 
            margin: 0 auto;
            text-align: center;
        }

        img {
            width: 160px;
        }

        .title {
            font-size: 14px;
            line-height: 25px;
        }

        .info {
            font-size: 12px;
            line-height: 30px;
            color: #ccc;
        }

        .price {
            font-size: 14px;
            color: #ffa500;
        }

    </style>
</head>
<body>
    <!-- div 用来网页布局,一个页面可能用无数次 -->
    <!-- 如果使用 div,尽量使用类名控制样式 -->
    <div class="goods"><img src="car.jpg" alt="小米平衡车">
        <div class="title">九号平衡车</div>
        <div class="info">成年人的玩具</div>
        <div class="price">1999元</div>
</div>
</body>
</html>

 

 

--> 前言本文为 CSS 基础笔记上一篇笔记为:HTML基础 – Echo (liveout.cn)CSSCSS (Cascading Style Sheets,层叠样式表),是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言,CSS 文件扩展名为 .css基础认知1. 语法规则css写在style标签中,style标签一般写在head标签里面,...

前言

本文为HTML基础标签笔记

HTML

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

 


文本格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <!-- b加粗 u下划线 i倾斜 s删除线 -->
    <h1>腾讯科技高级web前端开发岗位</h1><hr>
    <h3>职位描述</h3>
    <u>负责重点项目的前端技术方案和架构的研发和维护工作</u>;
    <h2>岗位要求</h2>
    <p>5年以上前端开发经验,<b>精通html5/css3/javascript</b>等web开发技术;</p>
    <p>熟悉bootstrap,vue,angularjs,reactjs等框架,熟练掌握一种以上;</p>
    <p>代码⻛格严谨,能⾼保真还原设计稿,能兼容各种浏览器;</p>
    <p>对web前端的性能优化以及web常见漏洞有一定的理解和相关实践;</p>
    <p>具备良好的分析解决问题能力,能独立承担任务,有开发进度把控能力;</p>
    <p><s>责任心强,思路路清晰,抗压能力好,具备良好的对外沟通和团队协作能力。</s></p>
    <h2>工作地址</h2>
    <p> <i>上海市-徐汇区-腾云大厦</i></p
    <!-- alt 属性是一个必需的属性,它规定在图像无法显示时的替代文本 -->
    <img src="image/map.jpg" alt="">
     <!-- 空格 &nbsp -->
    HTML文档,学习字符实体,如文字间多三个 &nbsp &nbsp &nbsp空格

</body>
</html>

 

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表</title>
</head>
<body>
    <!-- 无序列表 unordered lists -->
    <ul>
        <!-- list item -->
        <li>榴莲</li>
        <li>苹果</li>
        <li>香蕉</li>
        <li>草莓</li>
        <li>哈密瓜</li>
    </ul>

    <!-- 有序列表 ordered lists -->
    <ol>
        <!-- list item -->
        <li>你:100分</li>
        <li>我:90分</li>
        <li>他:60分</li>
    </ol>

    <!-- 自定义列表 definition lists-->
    <dl>
        <!-- 自定义列表组  definition term-->
        <dt>帮助中心</dt>
            <!-- 自定义列表描述 definition description -->
            <dd>账户管理</dd>
            <dd>购物指南</dd>
            <dd>订单操作</dd>
        <dt>服务支持</dt>
            <dd>售后政策</dd>
            <dd>自助服务</dd>
            <dd>相关下载</dd>
    </dl>
    
</body>
</html>

 

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <!-- 表格 包含 tr(行) 包含td(数据) -->
    <!-- css 设置宽高 -->
    <table border="1">
        <!-- caption 表格大标题 -->
        <caption><strong>学生成绩表</strong></caption>
        <!-- 结构标签 thead tbody tfoot    包含th/td -->
        <thead>
                <tr>
                    <!-- 表头信息 th -->
                    <th>姓名</th>
                    <th>成绩</th>
                    <th>评语</th>
                </tr>
        </thead>
        
        <tbody>
            <!-- 只有同一个结构标签单元格才能合并 -->
            <tr>
                <td>你</td>
                <!-- 跨行合并 rowspan -->
                <td rowspan="2">100分</td>
                <td>牛的</td>
            </tr>
            <tr>
                <td>我</td>
                <!-- <td>90分</td> -->
                <td>还行</td>
            </tr>
            <tr>
                <td>他</td>
                <td>60分</td>
                <td>不错呦</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>总结</td>
                <!-- 跨列合并 colspan -->
                <td colspan="2">还不错呦</td>
                <!-- <td>very good</td> -->
            </tr>
        </tfoot>
    </table>
</body>
</html>

 

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <form action="#">
    <!-- text 文本框 -->
    <!-- placeholder 提示 -->
    邮箱:<input type="text" placeholder="邮箱/手机号">
    <br><br>

    <!-- password 密码框 -->
    密码:<input type="password" placeholder="请输入六位密码">
    <br><br>

    <!-- radio 单选框 -->
    <!-- checked 默认选中 -->
    性别:<input type="radio" name="sex" checked>中性

    <!-- label 表单标签(点击文字选中) -->
         <input type="radio" name="sex" id="nan"><label for="nan">男</label> 
        <label><input type="radio" name="sex">女</label> 
    <br><br>
    
    <!-- checkbox 多选框 -->
    爱好:<input type="checkbox">
    <br><br>

    <!-- file 文件 -->
    <!-- multiple 多文件选择 -->
    文件:<input type="file" multiple>
    <br><br>

    协议:<input type="checkbox" checked>默认勾选
    <br><br>

    <!-- button 按钮 -->
    <input type="submit">
    <input type="reset">
    <input type="button" value="普通按钮">
    <br><br>

    <button>按钮</button>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">button按钮,js添加功能</button>
    <br><br>

    <!-- select 下拉菜单 -->
    <select>
        <option>北京</option>
        <option  selected>上海</option>
        <option>深圳</option>
        <option>杭州</option>
    </select>
    <br><br>

    <!-- textarea 文本域 -->
    <!-- CSS 禁用掉右下角拖拽 -->
    <textarea name="#" id="#" cols="30" rows="10"></textarea>

</form>

</body>
</html>

 

综合案例

学生信息表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息表</title>
</head>
<body>
    <table border="1" width="500" height="300">
        <caption><strong>优秀学生信息表</strong></caption>

        <thead>
            <tr>
                <th>年级</th>
                <th>姓名</th>
                <th>学号</th>
                <th>班级</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td rowspan="2">高三</td>
                <td>张三</td>
                <td>110</td>
                <td>三年三班</td>
            </tr>

            <tr>
                <td>赵四</td>
                <td>120</td>
                <td>三年三班</td>
            </tr>
        </tbody>

        <tfoot>
            <td>评语</td>
            <td colspan="3">你们都很优秀</td>
        </tfoot>
    </table>
</body>
</html>

 

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <h1>青春不常在,抓紧谈恋</h1>
    <hr>
    <form action="">
        昵称:<input type="text" placeholder="请输入昵称">
        <br><br>

        性别:
        <label><input type="radio" name="sex">男</label>
        <label><input type="radio" name="sex">女</label>
        <br><br>

        所在城市:
        <select>
            <option value="shanghai">上海</option>
            <option value="beijing">北京</option>
            <option value="nanjing" selected>南京</option>
            <option value="shenzhne">深圳</option>
        </select>
        <br><br>

        擅长语言:
        <label><input type="checkbox">C</label>
        <label><input type="checkbox">C++</label>
        <label><input type="checkbox">Java</label>
        <label><input type="checkbox">Python</label>
        <br><br>

        个人介绍:<br>
        <textarea name="#" id="#" cols="60" rows="10"></textarea>
        <br><br>

        <h3>我声明</h3>
        <ul>
            <li>C/C++是最好的语言</li>
            <li>Java是最好的语言</li>
            <li>Python是最好的语言</li>
        </ul>
        <br><br>

        <input type="checkbox">我同意以上条款
        <br><br>

        <input type="submit" value="免费注册">
        <button type="button">登录</button>
        <button type="reset">重置</button>

    </form>
</html>

 

跋文

下一篇笔记为:CSS基础 – Echo (liveout.cn)

--> 前言本文为HTML基础标签笔记HTML超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。 文本格式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-e...

序言

最近偶然发现了一款小众的清新手绘风格游戏,名字叫拣爱,即Love Choice

在体验完后,挺有一番感想的,于是便想写篇文章介绍下

本文不会包含任何关于游戏的通关攻略,但会对有轻微剧透

总评:游戏通关只需90分钟,而人与人之间的感情却要倾尽一生去栽培


游戏参数

评测

“温暖、安静而贴近生活的爱情故事, 深入游玩之后,你就会发现这款游戏的独特之处,小清新手绘风格,巧妙的交互设计。这无疑是一款优秀的甜品游戏,喜欢此类型的玩家非常值得入手。”
——索然无味评测组

“本作的风格十分小清新,有着简约的画风、轻柔的背景音乐以及被其裹挟的单纯的爱的内核,可以说本作基本是一款可以推荐给每个玩家的独立游戏了。”
——奶牛关 Cowlevel

“LoveChoice is a fresh and cute visual novel adventure like game. A bit short but you could replay it to get all the different endings. Great drawing picture and sweet love story, give it a try. ”
——Earth in the Porthole

以上评测来自Steam平台

时长

《拣爱》由三个独立故事构成,完整游玩整个游戏大概需要1.5小时。
虽然我们认为这会是短暂但是有意思,有趣的一段体验。但如果购买了游戏的玩家因为游戏时长短而不能满足的话,我们能够理解你通过steam进行退款,依然感谢你能够花时间游玩我们的游戏^_^

关于

《拣爱》是一款以日式AVG选择玩法为核心的游戏。拣,有选择之意。我们在设计的时候十分在意让每一个场景,每一个选择都合理而有其自己的意义。力求让玩家能够在该游戏中做出有意义,且真正能影响结局的选择。

《拣爱》是一款谈论爱的游戏。比起是否好玩,我们更在意一款游戏是否有意思。希望通过我们设计的游戏和故事,玩家能够感受爱,学会爱他人和爱人的方法。希望通过游玩这个游戏,你能够有所感悟,有所得着。

特点

  • 富有深意的多结局故事
  • 可爱的美术风格
  • 17首动听的原创音乐
  • 46张可供收集的精美插画壁纸
  • 我们相信这游戏一定能够给你惊喜


感想

游戏共三个小章节,分别为

  1. 游戏
  2. 距离
  3. 侦探

其中感触最深的应该就是距离了,原因不必多说。

剧情(第二章)

以下为个人游玩故事线

异地恋一直是个很火的话题,并且有无数的情侣在距离的长河里走散,变得渐行渐远。然而有时候,可能分手才是对双方最好的一种方式。

第二个章节《距离》中,林立是乡镇里唯一会修电器的人的儿子,而韩婷则是从市里跟着教书的父母来到了乡镇,两人就这样相识了。

一个喜欢研究电器,一个喜欢演奏乐器,两个人就这样度过了小学。

离别终会来临,韩婷为了音乐离开了乡镇,回到市里上学。两人就靠着短信,一直坚持了五年。

后来林立家搬到了市里,五年未见的彼此终于有机会见面了,却未曾想,这次见面后,可能是永远了。

韩婷出国留学了,两人虽然有了电脑联系,但期间的困难,不只是距离,还多了时间。

再后来,为了音乐上有更高的造诣,韩婷留在了国外,最终成为了有名的乐曲家,而林立也终于成为了一名科学家,研究出厉害的芯片。

一些感想

第二章当时真的给我整emo了,一直都在努力维持着关系,可惜最后还是以失败结尾。但是看到两人未来都完成了各自的梦想,突然又挺开心的。

有时候,爱情可能是学会放手。如果双方为了对方而舍弃自己的梦想,估计结婚后也不会很开心。当然了,爱情也需要牺牲。

还有一句话,出自Steam里的老哥评论

人生没有存档,且行且珍惜

游戏可以重来,而人生不行,待君回头,一切已成过往云烟。

也许通关《拣爱》能够依靠游戏攻略,游戏结束,我们的感情路线仍然掌握在我们各自的手上。

爱情无法十全十美不留遗憾,但却可以做到问心无愧,我们都在尽心为各自的爱情编写一份最好的游戏攻略。

爱无法存档,且行且珍惜。祝愿诸君皆遇良人,爱而无憾。

除了这个评论外,还有一位老哥的故事

前女友分手的时候告诉我这个游戏的,认识7年,因为不合适分开,无疾而终。
她跟我说”就连游戏我都得重来三次才能正确地爱一个人,不合适是没有办法的。”
故事的结局在相遇的时候就定好了,
所以周芷若就算跟张无忌要结婚了也在不了一起,
所以英梨梨就算十年前就认识伦也一样没有胜算,
我们哪里有游戏里重来的机会,每次的选择都会直通早就定好的结局。
所以故事的结局远不如过程重要,
我宁愿有一个不圆满的结局也希望有足够让人怀念的过程。
剩下的,不过时也命也,
人各有处,不必自缚。

的确,游戏通关只需90分钟,而人与人之间的感情却要倾尽一生去栽培

截图





希望体验完游戏的人能够珍惜眼前人

 

--> 序言最近偶然发现了一款小众的清新手绘风格游戏,名字叫拣爱,即Love Choice在体验完后,挺有一番感想的,于是便想写篇文章介绍下本文不会包含任何关于游戏的通关攻略,但会对有轻微剧透总评:游戏通关只需90分钟,而人与人之间的感情却要倾尽一生去栽培游戏参数评测“温暖、安静而贴近生活的爱情故事, 深入游玩之后,你就会发现这款游戏的独特之处,小清新手绘风格,巧妙的交互设计。这无疑是一款优秀的甜品...