分类随笔下的文章

Html学习笔记

作者: 刘昔羽
时间: 2022-11-12
分类: 随笔
评论

<body> , </body>等成对的标签，分别叫开放标签和闭合标签，单独呈现的标签（空元素），如<hr/> ，意味用 "/" 关闭空元素。

HTML注释写法

<!-- 这里是注释内容 -->

1.网页基本信息

<!-- DOCTYPE:告诉浏览器我们要使用什么规范 -->
<!DOCTYPE html>

<html lang="zh">

<!-- head标签代表网页头部 -->
<head>
    
    <!-- meta描述性标签，一般用来做 SEO -->
    <meta charset="UTF-8">
    <meta name="keywords" content="第一个网页">
    <meta name="description" content="这里是第一个网页的描述内容">
    
    <!-- title网页标题 -->
    <title>第一个网页</title>
    
</head>

<!-- body用来写网页主题内容 -->
<body>
    Hello,World
</body>
</html>

本节常用单词

head : 头部， meta : 元， keywords : 关键词 , description : 描述，content : 内容 , title : 标题 , body : 身体

2.基本标签

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>2.基本标签</title>
</head>
<body>
    <!-- 标题标签 -->
    <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>
    <h6>六级标签</h6>
    
    <!-- 段落标签 -->
    <p>会当凌绝顶</p>
    <p>一览众山小</p>
    <p>这一次我Html会有许多进步</p>
    
    <!-- 水平线标签 -->
    <hr/>
    
    <!-- 换行标签 -->
    会当凌绝顶<br/>
    一览众山小<br/>
    这一次我Html会有许多进步
    <br/>
    <!-- 粗体和斜体 -->
    粗体：<strong>I Love You</strong>
    斜体：<em>I Love You</em>
</body>
</html>

3.图像标签

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>3.图像标签</title>
</head>
<body>
    <!-- 
     src : 图片路径（必填）
     alt : 图片加载失败显示的文字（必填）
     title : 鼠标悬停时显示
     width : 设置宽度
     height : 设置高度
     -->
    <img src="https://api.isoyu.com/bing_images.php" alt="图片加载失败" title="这是今天的必应每日一图" width="100%" height="100%">
</body>
</html>

本节常用单词：width : 宽度， height : 高度

4.链接标签

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>4.链接标签</title>
</head>
<body>
    <!-- a标签
     href : 必填，表示要跳转的地址
     target : 表示窗口在哪里打开
         _blank : 在新标签页打开
         _self : 在自己的网页中打开
     -->
    
    <a href="https://www.5iv.top" target="_blank" >点击访问昔羽记</a>
    
    <!-- 锚链接
     暂时还没有写
     -->
     
    <!-- 功能性链接 -->
    <a href="mailto:root@5iv.top">root@5iv.top</a>

</body>
</html>

5.列表标签

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>5.列表标签</title>
</head>
<body>
    <!-- 有序列表 -->
    <ol>
        <li>Java</li>
        <li>Python</li>
        <li>PHP</li>
        <li>CSS</li>
    </ol>
    
    <!-- ul无序列表 -->
    <ul>
        <li>Java</li>
        <li>Python</li>
        <li>PHP</li>
        <li>CSS</li>
    </ul>
    
    <!-- 自定义列表
     dl : 标签
     dt : 列表名称
     dd :列表内容
     -->
     <dl>
         <dt>学科</dt>
         
         <dd>Java</dd>
         <dd>Python</dd>
         <dd>PHP</dd>
         <dd>CSS</dd>
         
         <dt>分数</dt>
         <dd>99</dd>
         <dd>78</dd>
         <dd>67</dd>
         <dd>98</dd>
     </dl>
</body>
</html>

6.表格标签

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>6.表格标签</title>
</head>
<body>
    <!-- 表格table 
    tr :行
    td :列
    colspan : 跨列
    rowspan : 跨行
    -->
    
    <table border="1px">
        <tr>
            <td colspan="3">学生成绩</td>
        </tr>
        <tr>
            <td rowspan="2">小佳</td>
            <td>语文</td>
            <td>100</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>100</td>
        </tr>
        <tr>
            <td rowspan="3">小星</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>100</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>100</td>
        </tr>
    </table>
</body>
</html>

7.媒体标签

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>7.媒体标签</title>
</head>
<body>
    <!-- 音频和视频
     src : 资源地址
     controls : 控制条
     autoplay : 自动播放
     -->
     
     <!-- 视频 -->
    <video src="1.mp4" controls autoplay></video>
    <!-- 音频 -->
    <audio src="1.mp3" controls autoplay></audio>
</body>
</html>

8.页面结构分析

元素名	描述
header	标题头部区域的内容
footer	标记脚部区域的内容
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

9.iframe 内联框架

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>9.iframe内联框架</title>
</head>
<body>
    <!-- iframe
     src : 资源地址
     w-h :宽度和高度
     -->
    <iframe src="https://www.5iv.top" frameborder="0" width="1000px" height="800px"></iframe>
    
    <!-- 设置点击按钮后调用 iframe 框架打开
     将框架命名为 name
     然后使用 a 标签 target 元素指定为名字为 name 的 iframe 框架打开
     -->
     <iframe src="" naframeborder="0" name="hello" width="1000px" height="800px"></iframe>
     
     <a href="https://www.5iv.top" target="hello">点击链接打开昔羽记</a>
</body>
</html>

10.表单

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>10.表单</title>
</head>
<body>
    <!-- 表单
     action : 表单提交的位置
     method : post , get 提交方式
     -->
    <form action="1.php" method="get">
        <!-- 文本输入框 input type = "text"
        type : 输入框类型，常用的有 
            text : 文本 , password : 密码 , submit : 提交 
            reset : 重置 , radio :单选 , checkbox :多选
            button : 按钮 , image : 图片按钮
        value : 默认值
        maxlength : 最长能写几个字符
        size : 文本框的长度
        hidden : 隐藏域
        readonly : 只读
        disabled : 禁用
         -->
        <p>名字： <input type="text" name="username" id="username" value="" /></p>
        
        <!-- 密码输入框 input type = "password" -->
        <p>密码： <input type="password" name="password" id="password" value=""></p>
        
        <!-- 单选框 需要使用 name 设置为一个组
        checked : 默认选中
        readonly : 只读
        -->
        <p>性别：
        <input type="radio" value="boy" name="sex" readonly>男
        <input type="radio" value="girl" name="sex" checked>女
        </p>
        
        <!-- 多选框 
        checked : 默认选中
        disabled : 禁用
        -->
        <p>爱好：
        <input type="checkbox" value="sleep" name="hobby" disabled>睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="game" name="hobby">游戏
        </p>
        
        <!-- 按钮 -->
        <input type="button" value="这是一个按钮" name="bt1">
        <!-- 图片按钮 需要指定图片路径-->
        <input type="image" src="test.png" alt="">
        
        <!-- 提交和重置 -->
        <p>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </p>
    </form>
</body>
</html>

11.表单扩展

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>11.表单扩展</title>
</head>
<body>
    <!-- 表单
     action : 表单提交的位置
     method : post , get 提交方式
     -->
    <form action="1.php" method="get">
        
        <!-- 下拉框 -->
        <p>国家：
            <select name="列表名称" id="country">
                <!-- 
                value : 选项的值
                 selected : 默认选择
                 -->
                <option value="选项的值">中国</option>
                <option value="选项的值">美国</option>
                <option value="选项的值" selected>瑞士</option>
                <option value="选项的值">印度</option>
            </select>
        </p>
        
        <!-- 文本域 -->
        <p>反馈：
            <textarea name="textarea" id="textarea" cols="30" rows="10">文本内容</textarea>
        </p>
        
        <!-- 文件域 -->
        <p>
            <input type="file" name="files">
            <input type="button" value="上传" name="upload">
        </p>
        
        <!-- 邮箱验证 -->
        <p>邮箱：
            <input type="email" name="email">
        </p>
        
        <!-- URL验证 -->
        <p>URL：
            <input type="url" name="url">
        </p>
        
        <!-- 数字 
        max : 最大值
        min : 最小值
        step : 步长
        -->
        <p>数字：
            <input type="number" name="num" max="100" min="0" step="1">
        </p>
        
        <!-- 滑块 -->
        <p>音量：
            <input type="range" name="voice" min="0" max="100" step="1">
        </p>
        
        <!-- 搜索框 -->
        <p>搜索
            <input type="search" name="search">
        </p>
    </form>

</body>
</html>

12.表单初级验证

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>12.表单初级验证</title>
</head>
<body>
    <!-- 表单
     action : 表单提交的位置
     method : post , get 提交方式
     -->
    <form action="1.php" method="get">
        <!-- 
        placeholder : 提示信息 
        required : 非空判断
        pattern : 正则表达式
        -->
        <p>手机号：
            <input type="text" name="phone" placeholder="请输入手机号" required pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\\d{8}$">
        </p>
        <p>账号：
            <input type="password" name="password" placeholder="请输入密码" required>
        </p>
        <p>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </p>
    </form>
</body>
</html>

Markdown基础语法---Typora

作者: 刘昔羽
时间: 2022-11-12
分类: 随笔
评论

1.标题

标题会在目录与大纲分级显示，可以跳转

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

2.强调

快捷键：Ctrl + B

**欢迎访问昔羽记**
__欢迎报访问昔羽记__

3.斜体

快捷键：Ctrl + I

*这是一行斜体文字*
_这也是一行斜体文字_

4.斜体并强调

***表示斜体并强调***
___表示斜体并强调___

5.删除线

快捷键：Alt +Shift + 5

~~这行文字现在已经被删除了~~

6.代码

`print ('这是一行代码')`

7.代码块

快捷键： Ctrl + Shift + K

```
//这里就可以开始输入了
//暂时没有示例代码，只写两行注释吧
```

8.引用

> 我们都有光明的未来
> > 引用是可以嵌套的

例子：

我们都有光明的未来
引用是可以嵌套的

9.无序列表

- 我是小键
+ 我是小佳
* 我是小星

示例：

我是小键
我是小佳
我是小星

10.有序列表（数字 + "." 空格前置）

我来这里就三件事
1. 公平
2. 公平
3. 还是TM的公平

例子：

我来这里就三件事

公平
公平
还是TM的公平

11.链接（常用 "[]" + "()" 分别包围文本与链接）

[来看看我们的昔羽记](https://www.5iv.top)
[教程：1.标题](#1.标题)

例子：

来看看我们的昔羽记
 教程：1.标题

12.任务列表（"- []" + 空格前置）

任务列表
- [ ] 学习HTML
- [ ] 学习Markdown

例子：

任务列表

[ ] 学习HTML
[ ] 学习Markdown

13.表格（用 "|" 绘制）

| 学号   | 姓名 | 年龄 |
| :----- | :--: | ---: |（引号的位置代表着左对齐，居中对齐，右对齐）
| 123456 | 小星 |   11 |
| 666666 | 小减 |   10 |
| 888888 | 小佳 |   13 |

例子：

学号	姓名	年龄
123456	小星	11
666666	小减	10
888888	小佳	13

14.图片（直接拖进来，或复制进来）

快捷键： Ctrl + Shift + I

![图片](图片的位置)

例子：

随即图

15.分割线（三个 "*" 或 "---" 或者"___" ）

***
---
___
//其实按三个或以上都可以

例子：

_

七日计划

作者: 刘昔羽
时间: 2022-08-23
分类: 随笔
评论

阅读30分钟
每日开销记账
洗漱完毕后才可以玩手机
杠铃左右手举重各不低于100下（7.25KG）
睡前和起床后分别冥想10分钟
每晚1：00前入睡，次日9：00前起床
今日事，今日毕，坚持自律

减脂

作者: 刘昔羽
时间: 2022-07-12
分类: 随笔
1 条评论

现在是7.12日，今天起我要正式开始减脂了，刚才和朋友喝了点酒，体重是81.2KG，BMI指数为25.1，超重

无题

作者: 刘昔羽
时间: 2022-04-11
分类: 随笔
评论

我现在位于江苏省苏州市陆家镇黄浦家园，在午夜临近十二点的时候，伴随着一声惨叫，所有还没睡的人都从房间中冲出。

有人跳楼了！

将近半个小时后，120来了。

紧接着，宿舍方面便有人过来通知，我们的健康码都变更了黄色

在这之前虽然身处防控区中，但除了不能离开小区，其它方面感知并不强，没有发生世硕二期“0元购”事件，物价稳定。