刘昔羽发布的文章

封城的一周

作者: 刘昔羽
时间: 2022-11-27
分类: 日记
评论

来县城已经一个礼拜了，从刚来的第一天就全县静默，直到今天才能出去，据小道消息，明天会再次封城。
在读了【小习惯】以后，现在在读【微习惯】，希望可以用这方面的知识，培养一些对自己有益的习惯，再配合滴答清单类应用来改善自己拖延的情况，写到这里突然决定，以后每周要对自己的待办情况也进行一些总结，把待办总结写进周记里面，这样子也可以更好地水字数吧😊

周记

作者: 刘昔羽
时间: 2022-11-21
分类: 日记
评论

继8天前开始学习html和css，拖延到现在总算是学习完了，因为以前就学习了好几次😂，再加上这次做了笔记，所以学习起来挺顺利的，这两天会给自己安排一些仿站的小练习。

这周的阅读时间相比上周短了许多，定下的小任务也有些没有完成，尤其是减脂任务，尤其是有一天晚上太饿，去做了夜宵，第二天就胖上了1公斤

最近看了《小习惯》，便想着按照书中所写，来做一些对自己有益的小习惯。
在2022年，首先选择一些APP来辅助自己小习惯的完成，在尝试了主流的To Do 应用后，我选择了滴答清单，这款APP我比较看中的功能为多样化的通知方式，还有最重要的多平台支持。
选择好用来辅助习惯建立的APP以后，给自己定下一个小规则，那便是当天小习惯没完成不可以睡觉::(捂嘴笑)
因为设立了写周记的小习惯，所以现在有了这篇周记，后面就没有了，累了…

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>