Web 前端学习笔记（四）：JavaScript 基础
系列最后一篇。HTML 管结构、CSS 管样式，JavaScript 负责行为——响应用户操作、修改页面内容。每节同样附了可运行的 demo。 一、三种导入方式demo 11：JS 导入方式 和 CSS 类似，JS 也有三种写进页面的方式： 12345678910111213141516171819<!-- 1. 写在 head 里的内联脚本 --><head> <script> console.log("Hello,Head标签内联样式"); </script> <!-- 2. 外部文件 --> <script src="./js/myscript.js"></script></head><body> <h1>JavaScript 的导入方式</h1> <!-- 3. 写在 body 里的内联脚本 --> <script>...
Web 前端学习笔记（三）：CSS 布局（浮动 · 定位 · Flex）
浮动、定位、Flex 解决的是同一类问题——把元素摆到想要的位置，只是属于不同年代的方案。放在一起对比，比分开学更容易记住各自适合什么场景。 一、浮动 floatdemo 9：CSS 浮动 float 最初的用途是实现”文字环绕图片”的效果（就像杂志排版），后来被大量拿来搭多列布局。它的取值很简单： 123456789101112.left-son { width: 100px; height: 100px; background-color: yellow; float: left; /* 向左浮动 */}.right-son { width: 100px; height: 100px; background-color: orange; float: right; /* 向右浮动 */} 浮动的元素会尽量靠向指定方向，多个同向浮动元素会依次紧贴排列，一行放不下就换行。 半脱离文档流浮动元素会”浮”起来：它原来占据的位置会让给后面的元素，但行内内容（文字）...
Web 前端学习笔记（二）：CSS 基础
上一篇整理了 HTML 的结构，这一篇进入 CSS ——负责”长什么样”的部分。同样，每节都附了可以直接打开的 demo。 一、三种导入方式demo 5：CSS 导入方式 CSS 有三种写进页面的方式： 1. 外部样式 —— 单独写成 .css 文件，用 <link> 引入。实际项目里基本都用这种，因为可以被多个页面复用，也能被浏览器缓存。 1<link rel="stylesheet" href="css/style.css"> 1234/* css/style.css */h3 { color: yellow;} 2. 内部样式 —— 写在 <head> 里的 <style> 标签中，只对当前页面生效。 123456789<style> p { color: blue; font-size: 25px; } h2 { color: pink; &...
Web 前端学习笔记（一）：HTML 基础
这是我练习 Web 前端时整理的笔记，原文是一批可以单独打开的 HTML 练习文件。这里按知识点重新组织，每节都附了能直接点击运行的 demo，方便对照效果。 这篇文章覆盖 HTML 最基础的四个部分：文本标签、属性、区块、表单。 一、常见文本标签demo 1：常见文本标签 标题与段落HTML 提供六级标题，数字越小级别越高、字号越大： 1234567<h1>一级标题标签</h1><h2>二级标题标签</h2><h3>三级标题标签</h3><h4>四级标题标签</h4><h5>五级标题标签</h5><h6>六级标题标签</h6><p>这是一个段落标签</p> 一个页面里 h1 通常只用一次（它代表页面主标题），其余按层级递减。这不只是风格问题，搜索引擎和无障碍工具都依赖标题层级来理解页面结构。 文本样式标签123<p> 更改文本样式：<b>字体加粗</b>、<...
deepseek自主生成文章示例
这篇文章由 DeepSeek 生成，用途是当一篇”排版试纸”：把博客支持的各类内容都写一遍，方便一眼看出主题、字体、代码高亮有没有问题。 写博客最麻烦的往往不是写作本身，而是不确定某个语法能不能正确渲染。所以这篇示例文章会尽可能覆盖常见写法，你以后写新文章时可以直接来这里复制片段。 一、这篇示例是怎么来的起因是博客里有两处链接一直是坏的，排查过程中发现了一个很容易踩的坑，值得先记下来： Hexo 的主题目录 themes/<主题>/source/ 是主题资源区，不是内容区。 放在那里的 .md 文件只会被当成静态资源渲染一遍，不会解析 front-matter、也不会套用页面模板。你写的内容会被原样丢进 HTML，连 --- 都会变成分割线。 正确做法只有一条：自己写的内容一律放在站点根目录的 source/ 下。 判断标准很简单：主题目录是 git clone 来的，升级主题时会 git pull。凡是”升级后不能丢”的东西，都不该放在里面。 二、Markdown 基础排版文字格式普通文字、粗体、斜体、粗斜体、删除线、行内代码 npm run bui...
Hello World
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1$ hexo new "My New Post" More info: Writing Run server1$ hexo server More info: Server Generate static files1$ hexo generate More info: Generating Deploy to remote sites1$ hexo deploy More info: Deployment