GoldenaArcher
GoldenaArcher

Fullstack 面试复习笔记：HTML / CSS 基础梳理

Fullstack 面试复习笔记：HTML / CSS 基础梳理

之前的笔记：

  • Fullstack 面试复习笔记：操作系统 / 网络 / HTTP / 设计模式梳理
  • Fullstack 面试复习笔记：Java 基础语法 / 核心特性体系化总结
  • Fullstack 面试复习笔记：项目梳理总结
  • Fullstack 面试复习笔记：Spring / Spring Boot / Spring Data / Security 整理
  • SCSS的学习笔记
    • SASS 学习笔记
    • SASS 学习笔记 II

本来是想把H5C3JS的东西放一起整理的，然后看了下有点长……

毕竟主自用，还是先拆开来方便自己复习了

HTML 基础

meta tag

tag 是 HTML 中用于提供页面元数据（metadata）的标签，它不会直接显示在页面中，但会被浏览器、搜索引擎、社交平台等工具读取。

常见用途包括：

  • 设置字符编码（charset）

  • 控制 viewport（响应式布局）

  • 设置 SEO 信息（如 description, keywords）

  • 定义页面作者

  • 配置浏览器行为（如 http-equiv）

  • 常见的 & 用法

    
<meta charset="UTF-8" />


<meta name="viewport" content="width=device-width, initial-scale=1.0" />


<meta name="description" content="A lightweight e-commerce site built with React and Node.js" />


<meta name="keywords" content="React, Node.js, MongoDB, E-commerce" />


<meta name="author" content="Louise Han" />


<meta http-equiv="cache-control" content="no-cache" />

semantic syntax

Semantic tags 是指那些 带有语义（semantic meaning) 的 HTML 标签，它们告诉浏览器、开发者和 assistive technology（如 screen reader）“这块内容的作用是什么”。

  • 常见的语义标签

    标签 用途说明 释义
    		页面或 section 的头部区域 页眉区域
    网站导航栏 导航栏
    		页面主内容，唯一出现一次 主体内容
    		拥有独立主题的一块内容 内容区块
    		独立的文章、博文、论坛贴文等 独立内容
    与主内容相关但不直接相关的信息（如侧边栏） 侧边信息
    		页面或 section 的底部区域 页脚
    /
    		图像 + 图说 图片配文
    时间元素，可被机器读取 机器可识别的时间
    高亮文本 高亮词汇（搜索匹配）

  • 为什么使用 Semantic Tags

    • 对搜索引擎友好（Better SEO）
    • 对 screen reader 更友好（提升 Accessibility）
    • 可读性提升，便于团队协作和维护
    • 明确结构，有助于浏览器默认样式渲染（如

常见 input type

  • text：单行文本输入（默认类型）

  • password：密码输入，用户输入内容会以圆点/星号显示

  • email：必须为邮箱格式，会启用浏览器校验

  • url：必须为合法的 URL（浏览器校验）

  • number：只能输入数字，可配合 min、max、step

  • tel：电话号码输入，不会强制格式校验，但移动端会弹出数字键盘

  • search：语义上表示搜索，功能上类似 text，可提供清除按钮（某些浏览器）

  • date：选择日期（浏览器弹出日期选择器）

  • time：选择时间

  • datetime-local：选择本地时间和日期

  • month：选择月份

  • week：选择第几周

  • checkbox：复选框，可多选，值为 true / false

  • radio：单选按钮（需要 name 相同才能形成互斥组）

  • range：滑动条（可配合 min/max/step）

  • file：文件上传，accept 可限定类型

  • color：颜色选择器，返回 HEX 色值

  • hidden：隐藏字段（不显示在页面上，但提交时会包含）

    可以传递包括用户id、CSRF Token之类的字段

    注意不要放敏感信息，毕竟还是可以被JS所访问的

datalist vs options

特性 +
是否可自由输入 ✅ Yes（可选或自填） ❌ No（只能选择）
外观可定制性 基于 ，可定制性高 原生样式难以改造
表单提交值 仅提交 的值 提交
使用场景 搜索框、模糊匹配、辅助推荐 下拉菜单、选项限定

datalist的用法：

<label for="browser">Choose your browser:label>
<input list="browsers" name="browser" id="browser">

<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
datalist>

select+options的用法：

<select name="fruit">
  <option value="apple">Appleoption>
  <option value="banana">Bananaoption>
  <option value="mango" selected>Mangooption>
select>

form vs div

维度
语义（Semantics） 表示“表单提交区域” — 属于结构语义标签之一 没有语义，只是一个容器
默认行为 提交时会触发表单事件、支持 submit 操作 不会自动触发提交行为
可访问性支持 默认被 Assistive Technology 识别为表单 屏幕阅读器不会当做表单处理
事件行为支持 可监听 onSubmit 事件 没有 submit 行为
可与按钮协作 必须手动添加 JS 才能模拟提交
浏览器原生校验 支持如 required、pattern 等自动校验 不支持，需要自己写 JavaScript 校验逻辑

标签嵌套规则 & DOM 结构

HTML 并不是可以随意嵌套标签的语言，浏览器会根据 HTML 规范对结构做自动修正。如果标签嵌套不当，可能会出现异常、访问性问题，和语义化校验失败

  • 基础语义分类

    分类 示例标签 描述说明
    Metadata content </code>, <code><style></code>, <code><meta></code></td> <td>用于页面 <code><head></code> 内，定义页面元信息</td> </tr> <tr> <td><strong>Flow content</strong></td> <td>绝大多数标签（如 <code><div></code>, <code><p></code>, <code><ul></code>）</td> <td>通常可出现在 <code><body></code> 内的所有内容</td> </tr> <tr> <td><strong>Sectioning content</strong></td> <td><code><section></code>, <code><article></code>, <code><nav></code>, <code><aside></code></td> <td>定义页面结构和内容区块，具有 outline 层级意义</td> </tr> <tr> <td><strong>Heading content</strong></td> <td><code><h1></code>–<code><h6></code></td> <td>用于标识内容标题，必须嵌套在 Sectioning Content 中</td> </tr> <tr> <td><strong>Phrasing content</strong></td> <td><code><span></code>, <code><a></code>, <code><strong></code>, <code><img></code></td> <td>行内文本及格式化元素，用于构成段落内部的细节内容</td> </tr> <tr> <td><strong>Embedded content</strong></td> <td><code><iframe></code>, <code><img></code>, <code><video></code></td> <td>嵌入其他资源的标签</td> </tr> <tr> <td><strong>Interactive content</strong></td> <td><code><a></code>, <code><button></code>, <code><details></code></td> <td>具备交互能力的元素，不应彼此嵌套</td> </tr> <tr> <td><strong>Form-associated content</strong></td> <td><code><input></code>, <code><textarea></code>, <code><form></code></td> <td>与表单行为有关的控件或容器</td> </tr> <tr> <td><strong>List content</strong></td> <td><code><ul></code>, <code><ol></code>, <code><li></code></td> <td>有序或无序列表</td> </tr> </tbody> </table></li> <li> <p>通用嵌套规则</p> <table> <thead> <tr> <th>外层元素语义类型</th> <th>可嵌套的内容类型</th> <th>不合法的内容类型（应避免）</th> <th>备注 / 举例</th> </tr> </thead> <tbody> <tr> <td><strong>Sectioning content</strong></td> <td>Flow content、Heading content</td> <td>Metadata content</td> <td><code><article><h2>Title</h2><p>text</p></article></code></td> </tr> <tr> <td><strong>Heading content</strong></td> <td>Phrasing content</td> <td>Block-level content（如 <code><div></code>, <code><p></code>）</td> <td><code><h1><em>Title</em></h1></code> ✅</td> </tr> <tr> <td><strong>Flow content</strong></td> <td>Sectioning、Heading、Phrasing、Embedded、Interactive</td> <td>Metadata content</td> <td>几乎可嵌套任何主体内容</td> </tr> <tr> <td><strong>Phrasing content</strong></td> <td>其他 phrasing content（span、a、strong）</td> <td>Block-level content</td> <td><code><p><span>hello</span></p></code> ✅</td> </tr> <tr> <td><strong>List container (<code><ul></code> / <code><ol></code>)</strong></td> <td><code><li></code>（唯一直接子元素）</td> <td><code><div></code>、直接文本、其他 block（除非包裹在 <code><li></code> 中）</td> <td>❌ <code><ul><div>错</div></ul></code>✅ <code><ul><li><div>合法</div></li></ul></code></td> </tr> <tr> <td><strong><code><li></code> 元素</strong></td> <td>Flow content（包括 p、div、a、ul）</td> <td>仅 metadata</td> <td><code><li><p>Item</p></li></code> ✅</td> </tr> <tr> <td><strong><code><form></code> 元素</strong></td> <td>Flow content、Form-associated content（不能嵌套 <code><form></code>）</td> <td><code><form></code></td> <td><code><form><input /></form></code> ✅❌ <code><form><form>错</form></form></code></td> </tr> <tr> <td><strong><code><p></code> 元素</strong></td> <td>Phrasing content</td> <td>Block-level content（div、ul、table）</td> <td><code><p><strong>Yes</strong></p></code> ✅❌ <code><p><div>No</div></p></code></td> </tr> <tr> <td><strong>Interactive content（a, button）</strong></td> <td>Phrasing（text、span、img）</td> <td>其他 interactive（a、button）</td> <td>❌ <code><a><button>错误</button></a></code>✅ <code><button><span>确定</span></button></code></td> </tr> </tbody> </table></li> <li> <p>一些个人的总结 & 反思</p> <ul> <li> <p><code>span</code> 不是一定要嵌套在 <code>p</code> 里使用</p> <p><code>span</code> 负责的还是段落内做标记使用，只不过大多数情况下这个段落直译成了 paragraph，也就是 <code>p</code> 标签。不过从其他的UI库中也可以看到，不少的UI库直接使用 <code>span</code> 做样式——比如说封装成button</p> </li> <li> <p>交互元素之间的嵌套</p> <p>其实之前没注意到这个问题，一直到写React的时候碰到了，就是 <code>a</code> 标签 → 由 React Router DOM 提供的 <code>Link</code> 和 <code>button</code> 嵌套的时候出现了问题，就是重定向不工作</p> <p>找了一下才发现，HTML规定了交互元素（interactive content）不能互相嵌套，否则会发生不可预期的问题，在我当时的情况下就是重定向失败，点击没有任何的反应</p> <p>React本身是不会修正这种问题的，所以实现的时候还是需要注意一下……本地没有报错是运气好，特别是现在本地开发环境React会渲染两次，这个情况确实mask了很多问题。上了production再出现问题就糟糕了……</p> </li> </ul> </li> </ul> <h4>表单标签进阶</h4> <p>对于 <code>label</code>、<code>fieldset</code>、<code>legend</code> 这些 <strong>表单进阶标签</strong>，它们主要起的是<strong>结构化和可访问性（accessibility）优化</strong>的作用，只需要熟悉它们的作用和用法场景即可</p> <ul> <li> <p><code><label></code></p> <ul> <li> <p>作用：用于描述表单控件的含义（文本说明）</p> </li> <li> <p>常用写法：</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Username<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> Username <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> </code></pre> </li> <li> <p>优势：</p> <ul> <li>点击 label 可以自动聚焦对应 input</li> <li>提升可访问性（屏幕阅读器友好）</li> </ul> </li> </ul> </li> <li> <p><code><fieldset></code></p> <ul> <li> <p>作用：将多个表单控件<strong>逻辑分组</strong>，用于视觉区块化和辅助语义划分</p> </li> <li> <p>使用场景：例如“个人信息”、“支付方式”这样的分块区域</p> </li> <li> <p>通常搭配 <code><legend></code> 使用</p> </li> <li> <p>示例：</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Personal Info<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Name:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>age<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Age:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>age<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> </code></pre> </li> </ul> </li> <li> <p><code><legend></code></p> <ul> <li>作用：为 <code><fieldset></code> 提供标题说明，是视觉和语义上的「小标题」</li> <li>注意事项： <ul> <li><code><legend></code> 只能直接作为 <code><fieldset></code> 的第一个子元素出现</li> <li>不建议单独使用 <code><legend></code>，它没有独立语义意义</li> </ul> </li> </ul> </li> </ul> <h4>Accessibility (A11Y)</h4> <p>Accessibility（可访问性）指的是：**确保网页内容对所有用户都可用，包括视障、听障或行动不便的用户；**常见实践不仅提升用户体验，也有助于 SEO</p> <ul> <li> <p>核心目标</p> <ul> <li>页面结构 <strong>语义清晰</strong>，便于辅助技术（如屏幕阅读器）识别</li> <li>所有交互元素都能被 <strong>键盘导航</strong></li> <li>提供 <strong>文字替代（alt text）</strong> 以支持非视觉用户</li> <li>使用合适的<strong>ARIA 属性</strong>增强语义（仅在 HTML 不够时使用）</li> </ul> </li> <li> <p>实用标签</p> <table> <thead> <tr> <th>标签</th> <th>功能</th> </tr> </thead> <tbody> <tr> <td><code>label</code></td> <td>关联表单元素，提升 screen reader 识别准确性</td> </tr> <tr> <td><code>fieldset</code> + <code>legend</code></td> <td>对表单区域进行语义分组和说明</td> </tr> <tr> <td><code>button</code></td> <td>明确的交互控件，优于滥用 <code><div></code> / <code><a></code></td> </tr> <tr> <td><code>a</code>（超链接）</td> <td>应该有明确 <code>href</code>，避免仅作按钮用</td> </tr> <tr> <td><code>nav</code>, <code>header</code>, <code>main</code>, <code>footer</code></td> <td>结构语义清晰，有助 assistive tech 理解页面</td> </tr> <tr> <td><code>alt</code>（图片说明）</td> <td>为 <code>img</code> 提供描述内容或说明装饰性（如 <code>alt=""</code>）</td> </tr> </tbody> </table></li> <li> <p>推荐实现</p> <ul> <li>为所有图片添加 <code>alt</code> 描述</li> <li>使用语义化 HTML 结构</li> <li>交互元素需可用键盘访问 <ul> <li>使用 <code><button></code>、<code><input></code> 等原生可交互元素</li> <li>避免用 <code><div></code> 模拟点击（无法 tab focus）</li> <li>如必须自定义组件，添加 <code>tabindex="0"</code> 和 <code>role="button"</code></li> </ul> </li> <li>添加 Skip to Content 跳转锚点（推荐大项目）</li> </ul> </li> <li> <p>ARIA（Accessible Rich Internet Applications）</p> <p>ARIA 是补充机制，优先使用原生语义标签</p> <p>ARIA的使用方式包括：</p> <table> <thead> <tr> <th>属性</th> <th>用途</th> </tr> </thead> <tbody> <tr> <td><code>aria-label</code></td> <td>给元素添加可识别名称</td> </tr> <tr> <td><code>aria-hidden="true"</code></td> <td>隐藏不重要的视觉装饰元素</td> </tr> <tr> <td><code>role</code></td> <td>补充 HTML 结构中缺失的语义，例如 <code>role="dialog"</code></td> </tr> <tr> <td><code>aria-live</code></td> <td>通知 screen reader 某区域内容动态更新</td> </tr> </tbody> </table></li> </ul> <h4>HTML 加载顺序与性能</h4> <p>浏览器加载顺序是 HTML → CSS → JS，即：</p> <ul> <li><strong>自上而下解析 HTML</strong></li> <li>遇到 <code><link rel="stylesheet"></code>：<strong>阻塞渲染</strong>（必须等待 CSS 下载 & 解析）</li> <li>遇到 <code><script></code> （无 <code>async</code>/ <code>defer</code>）：<strong>阻塞解析</strong>（必须等待 JS 执行完，才继续解析 HTML） <ul> <li> <p>JS前如果有CSS文件，并且CSS尚未加载完毕，那么JS会等到CSS加载完成后再执行</p> </li> <li> <p>因此传统做法——在 <code>defer</code> 未出现时——是将JS放到 <code><body></code> 最底部，让HTML先完成解析，渲染部分UI</p> <p>现代开发则是通过使用 <code>defer</code> + 将 script 放在 <code><head></code>，配合模块化打包（vite/webpack）实现更好的加载性能与维护行</p> </li> <li> <p><code><script></code> 加载方式对比</p> <table> <thead> <tr> <th>属性</th> <th>是否阻塞 HTML 解析</th> <th>执行时机</th> <th>执行顺序</th> <th>使用场景</th> </tr> </thead> <tbody> <tr> <td><strong>默认</strong></td> <td>✅ 阻塞</td> <td>下载完立即执行</td> <td>顺序执行</td> <td>样板页 script、页面逻辑入口</td> </tr> <tr> <td><strong>async</strong></td> <td>❓ 不完全阻塞</td> <td></td> <td></td> <td></td> </tr> <tr> <td>下载时不阻塞解析</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>但是下载完成后，执行时会阻塞</td> <td>下载完立即执行（⚠ 无顺序）</td> <td>⚠️ 不保证顺序</td> <td>独立脚本（如广告/统计脚本）</td> <td></td> </tr> <tr> <td><strong>defer</strong></td> <td>❌ 不阻塞</td> <td>DOM 全解析后、DOMContentLoaded 前执行</td> <td>顺序执行</td> <td>页面初始化逻辑推荐使用</td> </tr> <tr> <td><strong>preload</strong></td> <td>❌ 不执行，仅预取</td> <td>N/A</td> <td>N/A</td> <td>提前加载 JS，但需配合 <code><script></code></td> </tr> </tbody> </table></li> </ul> </li> <li>解析完成后，构建 DOM、CSSOM → 生成 Render Tree → 触发绘制 &布局</li> </ul> <h3>CSS 样式机制</h3> <h4>CSS 选择器分类</h4> <table> <thead> <tr> <th>类型</th> <th>示例</th> <th>说明</th> <th>Specificity 权重</th> </tr> </thead> <tbody> <tr> <td>通配选择器</td> <td><code>*</code></td> <td>匹配所有元素</td> <td><code>0,0,0,0</code></td> </tr> <tr> <td>元素选择器（Element）</td> <td><code>div</code>, <code>p</code>, <code>a</code></td> <td>匹配特定标签</td> <td><code>0,0,0,1</code></td> </tr> <tr> <td>类选择器（Class）</td> <td><code>.card</code>, <code>.active</code></td> <td>匹配指定 class 的元素</td> <td><code>0,0,1,0</code></td> </tr> <tr> <td>属性选择器（Attribute）</td> <td><code>[type="text"]</code></td> <td>匹配指定属性的元素</td> <td><code>0,0,1,0</code></td> </tr> <tr> <td>伪类选择器（Pseudo-class）</td> <td><code>:hover</code>, <code>:nth-child(2)</code></td> <td>选择特定状态</td> <td><code>0,0,1,0</code></td> </tr> <tr> <td>ID 选择器（ID）</td> <td><code>#header</code>, <code>#app</code></td> <td>匹配特定 ID 的元素</td> <td><code>0,1,0,0</code></td> </tr> <tr> <td>伪元素（Pseudo-element）</td> <td><code>::before</code>, <code>::after</code></td> <td>针对元素插入虚拟节点</td> <td><code>0,0,0,1</code>（同元素选择器）</td> </tr> <tr> <td>组合选择器（Combinator）</td> <td><code>div .title</code>, <code>ul > li</code></td> <td>父子/兄弟等嵌套结构</td> <td>权重相加（逐个计算）</td> </tr> <tr> <td>优先权最高：内联样式</td> <td><code>style="color: red;"</code></td> <td>直接写在元素上</td> <td><code>1,0,0,0</code>（最高）</td> </tr> <tr> <td><code>!important</code>（特例）</td> <td><code>color: red !important</code></td> <td>不属于 specificity，但<strong>强制优先</strong></td> <td>会覆盖正常权重规则（除非被另一条更强的 <code>!important</code> 覆盖）</td> </tr> </tbody> </table> <p>CSS Specificity 是 4 维度权重，记作 <code>a,b,c,d</code>：</p> <ul> <li><code>a</code>：是否为内联样式 → <code>1,0,0,0</code></li> <li><code>b</code>：ID 选择器数量</li> <li><code>c</code>：Class、属性、伪类</li> <li><code>d</code>：标签选择器、伪元素</li> </ul> <h4>box model</h4> <p>Box Model 是 HTML 元素在页面中所占空间的数学模型。</p> <p>每个元素都可以看作一个矩形盒子，由以下几部分组成：</p> <pre><code class="prism language-html"> (Outline - 不占空间) +---------------------------+ | Margin | | +---------------------+ | | | Border | | | | +---------------+ | | | | | Padding | | | | | | +--------+ | | | | | | | Content | | | | | | | +--------+ | | | | | +---------------+ | | | +---------------------+ | +---------------------------+ </code></pre> <table> <thead> <tr> <th>层级</th> <th>是否占据空间</th> <th>描述说明</th> </tr> </thead> <tbody> <tr> <td><code>outline</code></td> <td>❌ 否</td> <td>仅视觉效果，不影响布局，常用于焦点提示</td> </tr> <tr> <td><code>margin</code></td> <td>✅ 是</td> <td>元素与外部元素的距离</td> </tr> <tr> <td><code>border</code></td> <td>✅ 是</td> <td>包裹 padding + content 的边线</td> </tr> <tr> <td><code>padding</code></td> <td>✅ 是</td> <td>内容与边框之间的内边距</td> </tr> <tr> <td><code>content</code></td> <td>✅ 是</td> <td>实际显示文本/图片的区域</td> </tr> </tbody> </table> <ul> <li> <p>标准盒模型（content-box）→ 默认</p> <p><code>width</code> 为 content的宽度，所以计算的时候需要通过 <span class="katex--inline"><span class="katex"><span class="katex-mathml"> c o n t e n t + p a d d i n g + b o r d e r content + padding + border </span><span class="katex-html"><span class="base"><span class="strut" style="height: 0.6984em; vertical-align: -0.0833em;"></span><span class="mord mathnormal">co</span><span class="mord mathnormal">n</span><span class="mord mathnormal">t</span><span class="mord mathnormal">e</span><span class="mord mathnormal">n</span><span class="mord mathnormal">t</span><span class="mspace" style="margin-right: 0.2222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right: 0.2222em;"></span></span><span class="base"><span class="strut" style="height: 0.8889em; vertical-align: -0.1944em;"></span><span class="mord mathnormal">p</span><span class="mord mathnormal">a</span><span class="mord mathnormal">dd</span><span class="mord mathnormal">in</span><span class="mord mathnormal" style="margin-right: 0.0359em;">g</span><span class="mspace" style="margin-right: 0.2222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right: 0.2222em;"></span></span><span class="base"><span class="strut" style="height: 0.6944em;"></span><span class="mord mathnormal">b</span><span class="mord mathnormal" style="margin-right: 0.0278em;">or</span><span class="mord mathnormal">d</span><span class="mord mathnormal" style="margin-right: 0.0278em;">er</span></span></span></span></span> 的方式去计算</p> </li> <li> <p>替代盒模型（border-box）→ 推荐</p> <p><code>width</code> 为 <span class="katex--inline"><span class="katex"><span class="katex-mathml"> c o n t e n t + p a d d i n g + b o r d e r content + padding + border </span><span class="katex-html"><span class="base"><span class="strut" style="height: 0.6984em; vertical-align: -0.0833em;"></span><span class="mord mathnormal">co</span><span class="mord mathnormal">n</span><span class="mord mathnormal">t</span><span class="mord mathnormal">e</span><span class="mord mathnormal">n</span><span class="mord mathnormal">t</span><span class="mspace" style="margin-right: 0.2222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right: 0.2222em;"></span></span><span class="base"><span class="strut" style="height: 0.8889em; vertical-align: -0.1944em;"></span><span class="mord mathnormal">p</span><span class="mord mathnormal">a</span><span class="mord mathnormal">dd</span><span class="mord mathnormal">in</span><span class="mord mathnormal" style="margin-right: 0.0359em;">g</span><span class="mspace" style="margin-right: 0.2222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right: 0.2222em;"></span></span><span class="base"><span class="strut" style="height: 0.6944em;"></span><span class="mord mathnormal">b</span><span class="mord mathnormal" style="margin-right: 0.0278em;">or</span><span class="mord mathnormal">d</span><span class="mord mathnormal" style="margin-right: 0.0278em;">er</span></span></span></span></span> 的宽度，即元素的整体宽度，计算起来相对省心</p> <p>也是现代CSS框架的默认计算方式</p> </li> </ul> <h4>display</h4> <p><code>display</code> 定义了元素的<strong>布局行为</strong>，是 CSS 中最基础也最重要的属性之一。它决定了元素如何参与文档流以及是否能成为容器</p> <table> <thead> <tr> <th>属性值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code>block</code></td> <td>块级元素，占满整行，可设置宽高（如 <code><div></code>）</td> </tr> <tr> <td><code>inline</code></td> <td>行内元素，不可设置宽高（如 <code><span></code>）</td> </tr> <tr> <td><code>inline-block</code></td> <td>兼具行内与块级特性，可并排也可设置宽高</td> </tr> <tr> <td><code>none</code></td> <td>元素隐藏且不参与渲染，不占据空间</td> </tr> <tr> <td><code>flex</code></td> <td>启用 Flex 一维弹性布局容器</td> </tr> <tr> <td><code>inline-flex</code></td> <td>行内弹性容器，可与文字并排显示</td> </tr> <tr> <td><code>grid</code></td> <td>启用 Grid 二维网格布局容器</td> </tr> <tr> <td><code>inline-grid</code></td> <td>行内网格容器</td> </tr> <tr> <td><code>table</code></td> <td>模拟表格布局行为</td> </tr> <tr> <td><code>contents</code></td> <td>不渲染元素自身，只保留子元素结构（⚠ 有兼容性问题）</td> </tr> <tr> <td><code>list-item</code></td> <td>元素表现为列表项，通常带有 <code>•</code> 符号</td> </tr> </tbody> </table> <p><strong>常见场景推荐：</strong></p> <ul> <li>页面区域布局 → 推荐使用 <code>flex</code> 或 <code>grid</code></li> <li>水平排布多个组件 → 使用 <code>inline-block</code> 或 <code>flex</code></li> <li>条件渲染 → 用 <code>display: none</code> 控制显示与隐藏</li> </ul> <h4>position 定位机制</h4> <p><code>position</code> 定义元素<strong>脱离文档流的方式</strong>，影响其在页面中的位置计算方式</p> <table> <thead> <tr> <th>属性值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code>static</code></td> <td>默认值，按照文档流正常排列</td> </tr> <tr> <td><code>relative</code></td> <td>相对自身原位置偏移，可配合 <code>top/right/bottom/left</code> 使用</td> </tr> <tr> <td><code>absolute</code></td> <td>相对最近的<strong>非 static</strong>父元素定位，脱离文档流</td> </tr> <tr> <td><code>fixed</code></td> <td>相对于 <strong>视口（viewport）</strong> 定位，常用于吸顶、悬浮按钮</td> </tr> <tr> <td><code>sticky</code></td> <td>在滚动时在 <code>relative</code> 与 <code>fixed</code> 之间切换，实现“粘性”效果</td> </tr> </tbody> </table> <p><strong>配套偏移属性（仅 <code>relative</code> / <code>absolute</code> / <code>fixed</code> / <code>sticky</code> 有效）：</strong></p> <pre><code class="prism language-css"> <span class="token property">top</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> </code></pre> <p><strong>注意：</strong></p> <ul> <li><code>absolute</code> 必须有明确定位上下文，否则会相对 <code>body</code> 定位</li> <li><code>fixed</code> 不随滚动条滚动，适合做悬浮按钮</li> <li><code>sticky</code> 需要设置 <code>top</code> 或其他边界，且外层容器不能有 <code>overflow: hidden</code></li> </ul> <p><strong>实用技巧：</strong></p> <ul> <li> <p>经典居中方法：</p> <pre><code class="prism language-css"><span class="token selector">.centered</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span> -50%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </li> <li> <p>粘性标题栏：</p> <pre><code class="prism language-css"><span class="token selector">header</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> sticky<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </li> </ul> <h4>column layout</h4> <p>允许将一个元素的内容<strong>分成多个列</strong>，类似报纸排版</p> <p>核心属性包括：</p> <table> <thead> <tr> <th>属性名</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code>column-count</code></td> <td>指定列的个数</td> </tr> <tr> <td><code>column-width</code></td> <td>指定每列的<strong>理想宽度</strong>（浏览器会根据实际情况调整）</td> </tr> <tr> <td><code>columns</code></td> <td>简写形式：<code>columns: column-width column-count;</code></td> </tr> <tr> <td><code>column-gap</code></td> <td>列与列之间的间隙（默认 <code>1em</code>）</td> </tr> <tr> <td><code>column-rule</code></td> <td>列之间的分隔线（包含宽度、样式、颜色）</td> </tr> <tr> <td><code>break-inside</code></td> <td>控制子元素是否可中断换列（避免被拆开）</td> </tr> </tbody> </table> <p>它的限制与注意事项：</p> <table> <thead> <tr> <th>特点</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>❌ 支持不如 Flex/Grid 丰富</td> <td>无法灵活控制每列内容的对齐、分布</td> </tr> <tr> <td>❌ 不支持嵌套列</td> <td>嵌套结构时可能会失效或排版错乱</td> </tr> <tr> <td>✅ 非常适合内容流排版</td> <td>如长文本、段落内容、简报式展示</td> </tr> </tbody> </table> <h4>flex layout</h4> <p>Flex 是一种<strong>一维布局系统</strong>，擅长处理 <strong>主轴方向的对齐、伸缩、排序</strong>等问题。核心概念是<strong>容器（flex container）和项目（flex item）</strong></p> <ul> <li> <p>启用flex的方法比较简单，将 display改成flex即可：</p> <pre><code class="prism language-css"><span class="token selector">.container</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token comment">/* 或 inline-flex */</span> <span class="token punctuation">}</span> </code></pre> <p>这样所有的自元素都自动成为flex item</p> </li> <li> <p>主轴方向控制使用 <code>flex-direction</code>:</p> <pre><code class="prism language-css"><span class="token selector">.container</span> <span class="token punctuation">{</span> <span class="token property">flex-direction</span><span class="token punctuation">:</span> row | row-reverse | column | column-reverse<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </li> <li> <p>换行控制使用 <code>flex-wrap</code>:</p> <pre><code class="prism language-css"><span class="token selector">.container</span> <span class="token punctuation">{</span> <span class="token property">flex-wrap</span><span class="token punctuation">:</span> nowrap | wrap | wrap-reverse<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </li> <li> <p>主轴对齐：<code>justify-content</code></p> <pre><code class="prism language-css"><span class="token selector">.container</span> <span class="token punctuation">{</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> flex-start | flex-end | center | space-between | space-around | space-evenly<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </li> <li> <p>交叉轴对齐使用 <code>align-items</code>:</p> <pre><code class="prism language-css"><span class="token selector">.container</span> <span class="token punctuation">{</span> <span class="token property">align-items</span><span class="token punctuation">:</span> stretch | flex-start | flex-end | center | baseline<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>现在比较流行的一种水平/垂直的实现方法，就是使用 <code>justify-content</code> + <code>align-items</code> 实现的</p> </li> <li> <p>多行对齐：<code>align-content</code></p> <pre><code class="prism language-css"><span class="token selector">.container</span> <span class="token punctuation">{</span> <span class="token property">align-content</span><span class="token punctuation">:</span> stretch | flex-start | flex-end | center | space-between | space-around<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </li> <li> <p>子项控制：<code>flex</code> 简写</p> <pre><code class="prism language-css"><span class="token selector">.item</span> <span class="token punctuation">{</span> <span class="token property">flex</span><span class="token punctuation">:</span> [flex-grow] [flex-shrink] [flex-basis]<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </li> <li> <p>子项对齐（覆盖 align-items）：<code>align-self</code></p> <pre><code class="prism language-css"><span class="token selector">.item</span> <span class="token punctuation">{</span> <span class="token property">align-self</span><span class="token punctuation">:</span> auto | flex-start | flex-end | center | baseline | stretch<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </li> <li> <p>间距控制：<code>gap</code></p> <pre><code class="prism language-css"><span class="token selector">.container</span> <span class="token punctuation">{</span> <span class="token property">gap</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span> <span class="token comment">/* 行列统一间距 */</span> <span class="token property">row-gap</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token comment">/* 仅行间距 */</span> <span class="token property">column-gap</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token comment">/* 仅列间距 */</span> <span class="token punctuation">}</span> </code></pre> </li> </ul> <h4>grid layout</h4> <p>Grid 是一种 <strong>二维布局系统</strong>，适合处理<strong>复杂网格、区域布局</strong>等需求。与 Flex 不同，Grid 可以同时控制行（row）和列（column）</p> <ul> <li> <p>启用 Grid 布局</p> <pre><code class="prism language-css"><span class="token selector">.container</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token comment">/* 或 inline-grid */</span> <span class="token punctuation">}</span> </code></pre> </li> <li> <p>定义网格行与列</p> <pre><code class="prism language-css"><span class="token selector">.container</span> <span class="token punctuation">{</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 100px 1fr 2fr<span class="token punctuation">;</span> <span class="token comment">/* 列宽 */</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> auto 50px<span class="token punctuation">;</span> <span class="token comment">/* 行高 */</span> <span class="token punctuation">}</span> </code></pre> </li> <li> <p>设置间距：<code>gap</code></p> <pre><code class="prism language-css"><span class="token selector">.container</span> <span class="token punctuation">{</span> <span class="token property">gap</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token comment">/* 同时设置行列间距 */</span> <span class="token property">row-gap</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token property">column-gap</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </li> <li> <p>放置子项：行列定位</p> <pre><code class="prism language-css"><span class="token selector">.item</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / 3<span class="token punctuation">;</span> <span class="token comment">/* 第1列开始到第3列前结束（跨2列） */</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> 2 / span 2<span class="token punctuation">;</span> <span class="token comment">/* 从第2行开始，跨2行 */</span> <span class="token punctuation">}</span> </code></pre> </li> <li> <p>命名区域（推荐）</p> <pre><code class="prism language-css"><span class="token selector">.container</span> <span class="token punctuation">{</span> <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">"header header"</span> <span class="token string">"sidebar main"</span> <span class="token string">"footer footer"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.item-header</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> header<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </li> <li> <p>自动排列：<code>auto-fill</code> 与 <code>auto-fit</code></p> <pre><code class="prism language-css"><span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>auto-fill<span class="token punctuation">,</span> <span class="token function">minmax</span><span class="token punctuation">(</span>200px<span class="token punctuation">,</span> 1fr<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> </li> <li> <p>对齐内容</p> <pre><code class="prism language-css"><span class="token selector">.container</span> <span class="token punctuation">{</span> <span class="token property">justify-items</span><span class="token punctuation">:</span> start | center | end<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> start | center | end<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </li> </ul> <h4>column vs flex vs grid</h4> <table> <thead> <tr> <th>特性</th> <th>Column Layout</th> <th>Flexbox</th> <th>Grid</th> </tr> </thead> <tbody> <tr> <td>排版方式</td> <td>垂直分栏</td> <td>一维（行或列）</td> <td>二维（行 + 列）</td> </tr> <tr> <td>控制力</td> <td>⭐️ 中等</td> <td>⭐️⭐️⭐️ 强</td> <td>⭐️⭐️⭐️⭐️ 最强</td> </tr> <tr> <td>内容流动</td> <td>自动分流</td> <td>子项自己布局</td> <td>显式定义区域</td> </tr> <tr> <td>使用场景</td> <td>报纸式文本</td> <td>UI组件对齐</td> <td>页面布局骨架</td> </tr> </tbody> </table> <h4>响应式布局&媒体查询</h4> <p>响应式设计是指页面可以根据不同屏幕尺寸、分辨率和设备特性自动调整布局与样式，从而提供良好用户体验的一种设计理念</p> <ul> <li> <p><strong>核心目标</strong></p> <ul> <li>同一个 HTML 页面，适配不同设备（手机、平板、桌面）</li> <li>自动调整布局、字号、边距、组件显示/隐藏等</li> <li>避免内容“溢出”或“太小看不清”</li> </ul> </li> <li> <p>实现方法</p> <p>主要通过media query去做，基础的模板代码为：</p> <pre><code class="prism language-css"><span class="token atrule"><span class="token rule">@media</span> <媒体类型> <span class="token keyword">and</span> <span class="token punctuation">(</span><条件><span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment">/* 只在满足该条件下才生效 */</span> <span class="token punctuation">}</span> </code></pre> <p>如：</p> <pre><code class="prism language-css"><span class="token comment">/* 屏幕宽度小于等于 768px（平板及以下） */</span> <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 768px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">.sidebar</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">/* 屏幕宽度大于等于 1024px（桌面端） */</span> <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 1024px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> </li> <li> <p>常用断点</p> <table> <thead> <tr> <th>断点类型</th> <th>宽度范围（参考值）</th> <th>用途</th> </tr> </thead> <tbody> <tr> <td>Extra small (<code>xs</code>)</td> <td><code>< 576px</code></td> <td>手机竖屏</td> </tr> <tr> <td>Small (<code>sm</code>)</td> <td><code>≥ 576px</code></td> <td>手机横屏</td> </tr> <tr> <td>Medium (<code>md</code>)</td> <td><code>≥ 768px</code></td> <td>平板设备</td> </tr> <tr> <td>Large (<code>lg</code>)</td> <td><code>≥ 992px</code></td> <td>小型桌面</td> </tr> <tr> <td>Extra large (<code>xl</code>)</td> <td><code>≥ 1200px</code></td> <td>常规桌面</td> </tr> <tr> <td>XXL (<code>xxl</code>)</td> <td><code>≥ 1400px</code></td> <td>大屏显示器</td> </tr> </tbody> </table></li> <li> <p>响应式单位 &技巧补充</p> <table> <thead> <tr> <th>单位</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code>%</code></td> <td>相对于父元素的宽/高</td> </tr> <tr> <td><code>vw</code></td> <td>视口宽度的百分比（100vw = 屏幕宽）</td> </tr> <tr> <td><code>vh</code></td> <td>视口高度的百分比（100vh = 屏幕高）</td> </tr> <tr> <td><code>em/rem</code></td> <td>字体相对单位，适用于字号随屏幕变小自动缩放</td> </tr> <tr> <td><code>clamp()</code></td> <td>设定最小、推荐值、最大值，实现响应式字体大小：<code>clamp(14px, 2vw, 18px)</code></td> </tr> </tbody> </table></li> <li> <p>响应式布局技巧</p> <ul> <li> <p>使用 <code>flex-wrap: wrap</code> 或 Grid 布局 + <code>auto-fit</code></p> </li> <li> <p>使用 <code>gap</code> 代替传统 <code>margin-right</code>/<code>padding</code></p> </li> <li> <p>合理隐藏某些组件：</p> <pre><code class="prism language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 768px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">.menu-sidebar</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> </li> <li> <p>用容器类限制最大宽度（如 <code>max-width: 1200px; margin: 0 auto;</code>）</p> </li> </ul> </li> <li> <p>Mobile First</p> <p>目前responsive design的主流策略，核心理念是从小屏幕（如手机）出发设计 UI，再逐步为大屏幕添加增强样式</p> <p>这种设计用 <code>max-width</code> 更加的合适，反之，如果从 desktop first 则用 <code>min-width</code></p> </li> </ul> <h4>BEM 命名</h4> <p>BEM 是一种 <strong>结构化命名规范</strong>，用于让 CSS 类名<strong>清晰表达组件结构与状态</strong>，便于维护、避免冲突</p> <table> <thead> <tr> <th>部分</th> <th>描述</th> <th>示例</th> </tr> </thead> <tbody> <tr> <td><strong>Block</strong></td> <td>独立的功能模块（可以单独复用）</td> <td><code>card</code>, <code>nav</code>, <code>form</code></td> </tr> <tr> <td><strong>Element</strong></td> <td>Block 内部的组成部分</td> <td><code>card__title</code>, <code>nav__item</code></td> </tr> <tr> <td><strong>Modifier</strong></td> <td>表示 Block 或 Element 的状态 / 变体</td> <td><code>card--highlighted</code>, <code>button--disabled</code></td> </tr> </tbody> </table> <p>如：</p> <pre><code class="prism language-css"><span class="token comment">/* Block */</span> <span class="token selector">.button</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token comment">/* Element：使用两个下划线 */</span> <span class="token selector">.button__icon</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token comment">/* Modifier：使用两个连字符 */</span> <span class="token selector">.button--primary</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token selector">.button__icon--large</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> </code></pre> <p>一般来说用BEM的话，写原生CSS比较多，或者是需要构建比较大的UI库这种情况，我们项目的话，因为有自己的UIF（UI Framework），所以反而会比较多的依赖UIF的实现，有需要重在的情况BEM也帮不上什么忙，就用JSX里的inline css搞定了</p> <h4>SCSS/SASS 简述</h4> <p><strong>底层编译器相同</strong>：两者都使用 Dart Sass（现在是官方唯一支持的实现），不过实现的格式有些许的不同：</p> <table> <thead> <tr> <th>特性</th> <th><strong>SASS (.sass)</strong></th> <th><strong>SCSS (.scss)</strong></th> </tr> </thead> <tbody> <tr> <td>语法风格</td> <td>缩进式（无大括号、分号）</td> <td>类似 CSS（用大括号和分号）</td> </tr> <tr> <td>可读性</td> <td>更简洁，偏向 Ruby 风格</td> <td>更接近原生 CSS，学习曲线低</td> </tr> <tr> <td>支持程度</td> <td>老项目可能使用</td> <td>新项目主流使用</td> </tr> <tr> <td>推荐程度</td> <td>可选（老项目或喜欢极简）</td> <td>✅ 推荐（兼容性、迁移、团队协作）</td> </tr> </tbody> </table> <ul> <li> <p>变量定义</p> <pre><code class="prism language-scss">$primary-color: #3498db; .button { background: $primary-color; } </code></pre> </li> <li> <p>嵌套规则（Nested Rules）</p> <pre><code class="prism language-scss">.navbar { ul { list-style: none; } li { display: inline-block; } } </code></pre> </li> <li> <p>Mixin（类似函数，可传参）</p> <pre><code class="prism language-scss">@mixin flex-center { display: flex; justify-content: center; align-items: center; } .container { @include flex-center; } </code></pre> </li> <li> <p>Extend（继承已有样式）</p> <pre><code class="prism language-scss">%base-button { padding: 0.5rem 1rem; border-radius: 4px; } .btn-primary { @extend %base-button; background-color: blue; } </code></pre> </li> <li> <p>条件和循环（Control Directives）</p> <pre><code class="prism language-scss">$themes: light, dark, blue; @each $theme in $themes { .theme-#{$theme} { // 动态类名 } } </code></pre> </li> </ul> <h4>过渡</h4> <p>元素状态变更时的过渡，一般与 <code>:hover</code>、<code>:focus</code> 等伪类配合使用，如：</p> <pre><code class="prism language-css"><span class="token selector">.button</span> <span class="token punctuation">{</span> <span class="token property">transition</span><span class="token punctuation">:</span> all 0.3s ease-in-out<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.button:hover</span> <span class="token punctuation">{</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.05<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>具体结构为：</p> <pre><code class="prism language-css"><span class="token property">transition</span><span class="token punctuation">:</span> <property> <duration> <timing-function> <delay><span class="token punctuation">;</span> </code></pre> <h4>动画</h4> <p><code>animation</code>：关键帧动画（更复杂），使用方法如下：</p> <pre><code class="prism language-css"><span class="token atrule"><span class="token rule">@keyframes</span> fade-in</span> <span class="token punctuation">{</span> <span class="token selector">from</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>10px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">to</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token selector">.card</span> <span class="token punctuation">{</span> <span class="token property">animation</span><span class="token punctuation">:</span> fade-in 0.6s ease forwards<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>具体结构为：</p> <pre><code class="prism language-css"><span class="token property">animation</span><span class="token punctuation">:</span> <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode><span class="token punctuation">;</span> </code></pre> <p>常见参数：</p> <ul> <li><code>infinite</code>：无限循环</li> <li><code>alternate</code>：来回动画</li> <li><code>forwards</code>：保留最后状态（常用！）</li> </ul> <h4>animation vs. transition</h4> <table> <thead> <tr> <th>点</th> <th><code>transition</code></th> <th><code>animation</code></th> </tr> </thead> <tbody> <tr> <td>用途</td> <td>简单状态切换（如 hover）</td> <td>复杂序列动画</td> </tr> <tr> <td>触发方式</td> <td>被动（如鼠标 hover）</td> <td>可自动播放（无须交互）</td> </tr> <tr> <td>控制方式</td> <td>仅开始状态和结束状态</td> <td>多帧（keyframes）</td> </tr> <tr> <td>写法复杂度</td> <td>低</td> <td>中高</td> </tr> </tbody> </table> <h4>视觉可访问性 Visual Accessibility</h4> <ul> <li> <p>重要性：</p> <ul> <li>WCAG（Web Content Accessibility Guidelines）明确要求视觉元素满足对比和聚焦可见性要求</li> <li>企业级产品（尤其 B2B/Gov）经常要通过 A11y 审核</li> <li>Tailwind / Chakra / MUI 等现代框架已经内建</li> </ul> </li> <li> <p>颜色对比 color contrast</p> <table> <thead> <tr> <th>元素类型</th> <th>最低对比度比值</th> </tr> </thead> <tbody> <tr> <td>正文文字</td> <td>4.5:1</td> </tr> <tr> <td>粗体大文字（≥18px bold / 24px regular）</td> <td>3:1</td> </tr> <tr> <td>UI 组件边界（如按钮边框）</td> <td>通常建议 ≥ 3:1</td> </tr> </tbody> </table><p>检查工具包括：</p> <ul> <li>WebAIM Contrast Checker</li> <li>Figma 的 A11y 插件</li> <li>VS Code 插件：<strong>WCAG Color Contrast Checker</strong></li> </ul> </li> <li> <p>焦点可见性 focus outline</p> <p>目标用户：键盘用户（Tab键导航者）、辅助技术用户</p> <p>推荐实现方法：</p> <pre><code class="prism language-css"><span class="token selector">button:focus, a:focus</span> <span class="token punctuation">{</span> <span class="token property">outline</span><span class="token punctuation">:</span> 2px solid #2684FF<span class="token punctuation">;</span> <span class="token property">outline-offset</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <ul> <li><code>outline</code>: 视觉边框，不占空间，适合可访问性标示</li> <li><code>outline-offset</code>: 将 outline 往外或内偏移，不会遮住按钮内容</li> <li>⚠️ 如果用了 <code>outline: none</code>，<strong>必须自己补上焦点状态的视觉标识</strong>（如 <code>box-shadow</code>、<code>border</code> 等），否则违反可访问性规范</li> </ul> </li> <li> <p>图片与alt文字，之前提过</p> </li> <li> <p>可感知的状态变化（Visible State Change）</p> <p>仅靠颜色可能不太明确，正确方法推荐：</p> <pre><code class="prism language-html">**<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">aria-invalid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>error<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>邮箱格式不正确<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>** </code></pre> <p>这个应该是针对色盲/色弱做的优化</p> </li> <li> <p>深色模式支持 Dark Mode Support</p> <p>属于现代设计中的视觉舒适性优化，<strong>对于光敏感用户尤为关键</strong></p> </li> <li> <p>字体大小 / 可缩放性（Zoom & Font Size）</p> <p>页面应支持最高到 200% 的缩放，仍能正常操作和阅读</p> <p>那……很多网页应该是做不到的……</p> </li> <li> <p>认知可访问性（Cognitive Accessibility）</p> <ul> <li>避免使用动图、闪烁图像（容易引发癫痫/认知负担）</li> <li>避免使用过多动画（结合 <code>prefers-reduced-motion</code>）</li> <li>保持按钮文本明确（如“提交表单”比“点我一下”更清晰）</li> </ul> </li> </ul> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1931825987482349568"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(面试,面试,笔记,html)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1950232820773351424.htm" title="移动端城市区县二级联动选择功能实现包" target="_blank">移动端城市区县二级联动选择功能实现包</a> <span class="text-muted">good2know</span> <div>本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery</div> </li> <li><a href="/article/1950232782412247040.htm" title="日更006 终极训练营day3" target="_blank">日更006 终极训练营day3</a> <span class="text-muted">懒cici</span> <div>人生创业课（2）今天的主题：学习方法一：遇到有用的书，反复读，然后结合自身实际，列践行清单，不要再写读书笔记思考这本书与我有什么关系，我在哪些地方能用到，之后我该怎么用方法二：读完书没映像怎么办?训练你的大脑，方法：每读完一遍书，立马合上书，做一场分享，几分钟都行对自己的学习要求太低，要逼自己方法三：学习深度不够怎么办？找到细分领域的榜样，把他们的文章、书籍、产品都体验一遍，成为他们的超级用户，向</div> </li> <li><a href="/article/1950225381961297920.htm" title="SpringMVC的执行流程" target="_blank">SpringMVC的执行流程</a> <span class="text-muted"></span> <div>1、什么是MVCMVC是一种设计模式。MVC的原理图如下所示M-Model模型（完成业务逻辑：有javaBean构成，service+dao+entity）V-View视图（做界面的展示jsp，html……）C-Controller控制器（接收请求—>调用模型—>根据结果派发页面2、SpringMVC是什么SpringMVC是一个MVC的开源框架，SpringMVC=Struts2+Spring，</div> </li> <li><a href="/article/1950225255557558272.htm" title="力扣面试题07 - 旋转矩阵" target="_blank">力扣面试题07 - 旋转矩阵</a> <span class="text-muted">茶猫_</span> <a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/%E7%9F%A9%E9%98%B5/1.htm">矩阵</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a> <div>题目：给你一幅由N×N矩阵表示的图像，其中每个像素的大小为4字节。请你设计一种算法，将图像旋转90度。不占用额外内存空间能否做到？示例1:给定matrix=[[1,2,3],[4,5,6],[7,8,9]],原地旋转输入矩阵，使其变为:[[7,4,1],[8,5,2],[9,6,3]]示例2:给定matrix=[[5,1,9,11],[2,4,8,10],[13,3,6,7],[15,14,12,</div> </li> <li><a href="/article/1950223497875746816.htm" title="最新阿里四面面试真题46道：面试技巧+核心问题+面试心得" target="_blank">最新阿里四面面试真题46道：面试技巧+核心问题+面试心得</a> <span class="text-muted">风平浪静如码</span> <div>前言做技术的有一种资历，叫做通过了阿里的面试。这些阿里Java相关问题，都是之前通过不断优秀人才的铺垫总结的，先自己弄懂了再去阿里面试，不然就是去丢脸，被虐。希望对大家帮助，祝面试成功，有个更好的职业规划。一，阿里常见技术面1、微信红包怎么实现。2、海量数据分析。3、测试职位问的线程安全和非线程安全。4、HTTP2.0、thrift。5、面试电话沟通可能先让自我介绍。6、分布式事务一致性。7、ni</div> </li> <li><a href="/article/1950220179610857472.htm" title="【花了N长时间读《过犹不及》，不断练习，可以越通透】" target="_blank">【花了N长时间读《过犹不及》，不断练习，可以越通透】</a> <span class="text-muted">君君Love</span> <div>我已经记不清花了多长时间去读《过犹不及》，读书笔记都写了42页，这算是读得特别精细的了。是一本难得的好书，虽然书中很多内容和圣经吻合，我不是基督徒，却觉得这样的文字值得细细品味，和我们的生活息息相关。我是个界线建立不牢固的人，常常愧疚，常常害怕他人的愤怒，常常不懂拒绝，还有很多时候表达不了自己真实的感受，心里在说不嘴里却在说好……这本书给我很多的启示，让我学会了怎样去建立属于自己的清晰的界限。建立</div> </li> <li><a href="/article/1950218946015719424.htm" title="图论算法经典题目解析：DFS、BFS与拓扑排序实战" target="_blank">图论算法经典题目解析：DFS、BFS与拓扑排序实战</a> <span class="text-muted">周童學</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95/1.htm">数据结构与算法</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E4%BC%98%E5%85%88/1.htm">深度优先</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E8%AE%BA/1.htm">图论</a> <div>图论算法经典题目解析：DFS、BFS与拓扑排序实战图论问题是算法面试中的高频考点，本博客将通过四道LeetCode经典题目（均来自"Top100Liked"题库），深入讲解图论的核心算法思想和实现技巧。涵盖DFS、BFS、拓扑排序和前缀树等知识点，每道题配有Java实现和易错点分析。1.岛屿数量(DFS遍历)问题描述给定一个由'1'(陆地)和'0'(水)组成的二维网格，计算岛屿的数量。岛屿由水平或</div> </li> <li><a href="/article/1950218819616174080.htm" title="基于redis的Zset实现作者的轻量级排名" target="_blank">基于redis的Zset实现作者的轻量级排名</a> <span class="text-muted">周童學</span> <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a> <div>基于redis的Zset实现轻量级作者排名系统在今天的技术架构中，Redis是一种广泛使用的内存数据存储系统，尤其在需要高效检索和排序的场景中表现优异。在本篇博客中，我们将深入探讨如何使用Redis的有序集合（ZSet）构建一个高效的笔记排行榜系统，并提供相关代码示例和详细的解析。1.功能背景与需求假设我们有一个笔记分享平台，用户可以发布各种笔记，系统需要根据用户发布的笔记数量来生成一个实时更新的</div> </li> <li><a href="/article/1950216170401492992.htm" title="常规笔记本和加固笔记本的区别" target="_blank">常规笔记本和加固笔记本的区别</a> <span class="text-muted">luchengtech</span> <a class="tag" taget="_blank" href="/search/%E7%94%B5%E8%84%91/1.htm">电脑</a><a class="tag" taget="_blank" href="/search/%E4%B8%89%E9%98%B2%E7%AC%94%E8%AE%B0%E6%9C%AC/1.htm">三防笔记本</a><a class="tag" taget="_blank" href="/search/%E5%8A%A0%E5%9B%BA%E8%AE%A1%E7%AE%97%E6%9C%BA/1.htm">加固计算机</a><a class="tag" taget="_blank" href="/search/%E5%8A%A0%E5%9B%BA%E7%AC%94%E8%AE%B0%E6%9C%AC/1.htm">加固笔记本</a> <div>在现代科技产品中，笔记本电脑因其便携性和功能性被广泛应用。根据使用场景和需求的不同，笔记本可分为常规笔记本和加固笔记本，二者在多个方面存在显著区别。适用场景是区分二者的重要标志。常规笔记本主要面向普通消费者和办公人群，适用于家庭娱乐、日常办公、学生学习等相对稳定的室内环境。比如，人们在家用它追剧、处理文档，学生在教室用它完成作业。而加固笔记本则专为特殊行业设计，像军事、野外勘探、工业制造、交通运输</div> </li> <li><a href="/article/1950210374787723264.htm" title="第八课: 写作出版你最关心的出书流程和市场分析（无戒学堂复盘）" target="_blank">第八课: 写作出版你最关心的出书流程和市场分析（无戒学堂复盘）</a> <span class="text-muted">人在陌上</span> <div>今天是周六，恰是圣诞节。推掉了两个需要凑腿的牌局，在一个手机，一个笔记本，一台电脑，一杯热茶的陪伴下，一个人静静地回听无戒学堂的最后一堂课。感谢这一个月，让自己的习惯开始改变，至少，可以静坐一个下午而不觉得乏味枯燥难受了，要为自己点个赞。我深知，这最后一堂课的内容，以我的资质和毅力，可能永远都用不上。但很明显，无戒学堂是用了心的，毕竟，有很多优秀学员，已经具备了写作能力，马上就要用到这堂课的内容。</div> </li> <li><a href="/article/1950208989954371584.htm" title="Selenium 特殊控件操作与 ActionChains 实践详解" target="_blank">Selenium 特殊控件操作与 ActionChains 实践详解</a> <span class="text-muted">小馋喵知识杂货铺</span> <a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a> <div>1.下拉框单选操作(a)使用SeleniumSelect类（标准HTML标签）Selenium提供了内置的Select类用于操作标准下拉框，这种方式简单且直观。fromselenium.webdriver.support.uiimportSelect#定位下拉框dropdown=Select(driver.find_element("id","dropdown_id"))#通过以下三种方式选择单个</div> </li> <li><a href="/article/1950208107430866944.htm" title="python笔记14介绍几个魔法方法" target="_blank">python笔记14介绍几个魔法方法</a> <span class="text-muted">抢公主的大魔王</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>python笔记14介绍几个魔法方法先声明一下各位大佬，这是我的笔记。如有错误，恳请指正。另外，感谢您的观看，谢谢啦！(1).__doc__输出对应的函数，类的说明文档print(print.__doc__)print(value,...,sep='',end='\n',file=sys.stdout,flush=False)Printsthevaluestoastream,ortosys.std</div> </li> <li><a href="/article/1950207097413103616.htm" title="微信公众号回调java_处理微信公众号消息回调" target="_blank">微信公众号回调java_处理微信公众号消息回调</a> <span class="text-muted">weixin_39607620</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E5%9B%9E%E8%B0%83java/1.htm">微信公众号回调java</a> <div>1、背景在上一节中，咱们知道如何接入微信公众号，可是以后公众号会与咱们进行交互，那么微信公众号如何通知到咱们本身的服务器呢？咱们知道咱们接入的时候提供的url是GET/mp/entry，那么公众号以后产生的事件将会以POST/mp/entry发送到咱们本身的服务器上。html2、代码实现，此处仍是使用weixin-java-mp这个框架实现一、引入weixin-java-mpcom.github.</div> </li> <li><a href="/article/1950205034075582464.htm" title="《感官品牌》读书笔记 1" target="_blank">《感官品牌》读书笔记 1</a> <span class="text-muted">西红柿阿达</span> <div>原文:最近我在东京街头闲逛时，与一位女士擦肩而过，我发现她的香水味似曾相识。“哗”的一下，记亿和情感立刻像潮水般涌了出来。这个香水味把我带回了15年前上高中的时候，我的一位亲密好友也是用这款香水。一瞬间，我呆站在那里，东京的街景逐渐淡出，取而代之的是我年少时的丹麦以及喜悦、悲伤、恐惧、困惑的记忆。我被这熟悉的香水味征服了。感想:感官是有记忆的，你所听到，看到，闻到过的有代表性的事件都会在大脑中深深</div> </li> <li><a href="/article/1950203883577995264.htm" title="我不想再当知识的搬运工" target="_blank">我不想再当知识的搬运工</a> <span class="text-muted">楚煜楚尧</span> <div>因为学校课题研究的需要，这个暑假我依然需要完成一本书的阅读笔记。我选的是管建刚老师的《习课堂十讲》。这本书，之前我读过，所以重读的时候，感到很亲切，摘抄起来更是非常得心应手。20页，40面，抄了十天，终于在今天大功告成了。这对之前什么事都要一拖再拖的我来说，是破天荒的改变。我发现至从认识小尘老师以后，我的确发生了很大的改变。遇到必须做却总是犹豫不去做的事，我学会了按照小尘老师说的那样，在心里默默数</div> </li> <li><a href="/article/1950201675771867136.htm" title="分布式链路追踪系统架构设计：从理论到企业级实践" target="_blank">分布式链路追踪系统架构设计：从理论到企业级实践</a> <span class="text-muted">ma451152002</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E6%9E%B6%E6%9E%84/1.htm">系统架构</a> <div>分布式链路追踪系统架构设计：从理论到企业级实践本文深入探讨分布式链路追踪系统的架构设计原理、关键技术实现和企业级应用实践，为P7架构师提供完整的技术方案参考。目录引言：分布式链路追踪的重要性核心概念与技术原理系统架构设计数据模型与协议标准核心组件架构设计性能优化与扩展性设计企业级实施策略技术选型与对比分析监控与运维体系未来发展趋势P7架构师面试要点引言：分布式链路追踪的重要性微服务架构下的挑战在现</div> </li> <li><a href="/article/1950201094361640960.htm" title="人工智能应用研究快讯 2021-11-30" target="_blank">人工智能应用研究快讯 2021-11-30</a> <span class="text-muted">峰谷皆平</span> <div>[HTML]ArtificialIntelligenceforSkinCancerDetection:ScopingReviewATakiddin,JSchneider,YYang,AAbd-Alrazaq...JournalofMedicalInternet...,2021ABSTACT:Background:Skincanceristhemostcommoncancertypeaffectin</div> </li> <li><a href="/article/1950200414989250560.htm" title="面试必考题：Android Binder 机制详解" target="_blank">面试必考题：Android Binder 机制详解</a> <span class="text-muted">大模型大数据攻城狮</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/binder/1.htm">binder</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/native/1.htm">native</a><a class="tag" taget="_blank" href="/search/kotlin/1.htm">kotlin</a><a class="tag" taget="_blank" href="/search/dalvik/1.htm">dalvik</a><a class="tag" taget="_blank" href="/search/retrofit/1.htm">retrofit</a> <div>目录第一章：Binder的基本概念什么是Binder？多角度解读Binder第二章：Binder的工作机制Binder的整体流程服务注册：从零到有的第一步服务查询：找到目标的“地图”服务调用：请求与响应的旅程Binder驱动的幕后功劳为什么Binder这么快？第三章：Binder在系统架构中的角色Activity：界面背后的通信枢纽Binder的角色实例分析Service：后台任务的跨进程支柱Bi</div> </li> <li><a href="/article/1950199576451411968.htm" title="20210517坚持分享53天读书摘抄笔记 非暴力沟通——爱自己" target="_blank">20210517坚持分享53天读书摘抄笔记 非暴力沟通——爱自己</a> <span class="text-muted">f79a6556cb19</span> <div>让生命之花绽放在赫布·加德纳（HerbGardner）编写的《一千个小丑》一剧中，主人公拒绝将他12岁的外甥交给儿童福利院。他郑重地说道：“我希望他准确无误地知道他是多么特殊的生命，要不，他在成长的过程中将会忽视这一点。我希望他保持清醒，并看到各种奇妙的可能。我希望他知道，一旦有机会，排除万难给世界一点触动是值得的。我还希望他知道为什么他是一个人，而不是一张椅子。”然而，一旦负面的自我评价使我们看</div> </li> <li><a href="/article/1950196906563006464.htm" title="Unity学习笔记1" target="_blank">Unity学习笔记1</a> <span class="text-muted">zy_777</span> <div>通过一个星期的简单学习，初步了解了下unity，unity的使用，以及场景的布局，UI，以及用C#做一些简单的逻辑。好记性不如烂笔头，一些关键帧还是记起来比较好，哈哈，不然可能转瞬即逝了，（PS:纯小白观点，unity大神可以直接忽略了）一：MonoBehaviour类的初始化1，Instantiate()创建GameObject2，通过Awake()和Start()来做初始化3，Update、L</div> </li> <li><a href="/article/1950195876991397888.htm" title="【Jupyter】个人开发常见命令" target="_blank">【Jupyter】个人开发常见命令</a> <span class="text-muted">TIM老师</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Pycharm/1.htm">Pycharm</a><a class="tag" taget="_blank" href="/search/%26amp%3B/1.htm">&</a><a class="tag" taget="_blank" href="/search/VSCode/1.htm">VSCode</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/Jupyter/1.htm">Jupyter</a> <div>1.查看python版本importsysprint(sys.version)2.ipynb/py文件转换jupyternbconvert--topythonmy_file.ipynbipynb转换为mdjupyternbconvert--tomdmy_file.ipynbipynb转为htmljupyternbconvert--tohtmlmy_file.ipynbipython转换为pdfju</div> </li> <li><a href="/article/1950194742100815872.htm" title="用代码生成艺术字：设计个性化海报的秘密" target="_blank">用代码生成艺术字：设计个性化海报的秘密</a> <span class="text-muted"></span> <div>本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准</div> </li> <li><a href="/article/1950191165710069760.htm" title="前端面试每日 3+1 —— 第39天" target="_blank">前端面试每日 3+1 —— 第39天</a> <span class="text-muted">浪子神剑</span> <div>今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss</div> </li> <li><a href="/article/1950190146074767360.htm" title="大数据技术笔记—spring入门" target="_blank">大数据技术笔记—spring入门</a> <span class="text-muted">卿卿老祖</span> <div>篇一spring介绍spring.io官网快速开始Aop面向切面编程，可以任何位置，并且可以细致到方法上连接框架与框架Spring就是IOCAOP思想有效的组织中间层对象一般都是切入service层spring组成前后端分离已学方式，前后台未分离：Spring的远程通信：明日更新创建第一个spring项目来源：科多大数据</div> </li> <li><a href="/article/1950187554129113088.htm" title="Django学习笔记（一）" target="_blank">Django学习笔记（一）</a> <span class="text-muted"></span> <div>学习视频为：pythondjangoweb框架开发入门全套视频教程一、安装pipinstalldjango==****检查是否安装成功django.get_version()二、django新建项目操作1、新建一个项目django-adminstartprojectproject_name2、新建APPcdproject_namedjango-adminstartappApp注：一个project</div> </li> <li><a href="/article/1950187223672483840.htm" title="GDP经济社会人文民生栅格数据下载网站汇总" target="_blank">GDP经济社会人文民生栅格数据下载网站汇总</a> <span class="text-muted">疯狂学习GIS</span> <div>  本文为“GIS数据获取整理”专栏（https://blog.csdn.net/zhebushibiaoshifu/category_10857546.html）中第八篇独立博客，因此本文全部标题均由“8”开头。本文对目前主要的GDP、社会与经济数据获取网站加以整理与介绍，若需其它GIS领域数据（如遥感影像数据、气象数据、土地土壤数据、农业数据等），大家可以点击上方专栏查看，也可以看这一篇汇总文</div> </li> <li><a href="/article/1950180497007112192.htm" title="【MySQL】MySQL数据库如何改名" target="_blank">【MySQL】MySQL数据库如何改名</a> <span class="text-muted">武昌库里写JAVA</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>MySQL建库授权语句https://www.jianshu.com/p/2237a9649ceeMySQL数据库改名的三种方法https://www.cnblogs.com/gomysql/p/3584881.htmlMySQL安全修改数据库名几种方法https://blog.csdn.net/haiross/article/details/51282417MySQL重命名数据库https://</div> </li> <li><a href="/article/1950179614320029696.htm" title="python学习笔记（汇总）" target="_blank">python学习笔记（汇总）</a> <span class="text-muted">朕的剑还未配妥</span> <a class="tag" taget="_blank" href="/search/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E6%95%B4%E7%90%86/1.htm">python学习笔记整理</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>文章目录一.基础知识二.python中的数据类型三.运算符四.程序的控制结构五.列表六.字典七.元组八.集合九.字符串十.函数十一.解决bug一.基础知识print函数字符串要加引号，数字可不加引号，如print(123.4)print('小谢')print("洛天依")还可输入表达式，如print(1+3)如果使用三引号，print打印的内容可不在同一行print("line1line2line</div> </li> <li><a href="/article/1950175578921431040.htm" title="Redis 分布式锁深度解析：过期时间与自动续期机制" target="_blank">Redis 分布式锁深度解析：过期时间与自动续期机制</a> <span class="text-muted">爱恨交织围巾</span> <a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F%E4%BA%8B%E5%8A%A1/1.htm">分布式事务</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E6%9C%8D%E5%8A%A1/1.htm">微服务</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/go/1.htm">go</a> <div>Redis分布式锁深度解析：过期时间与自动续期机制在分布式系统中，Redis分布式锁的可靠性很大程度上依赖于对锁生命周期的管理。上一篇文章我们探讨了分布式锁的基本原理，今天我们将聚焦于一个关键话题：如何通过合理设置过期时间和实现自动续期机制，来解决分布式锁中的死锁与锁提前释放问题。一、为什么过期时间是分布式锁的生命线？你的笔记中提到"服务挂掉时未删除锁可能导致死锁"，这正是过期时间要解决的核心问题</div> </li> <li><a href="/article/1950175508729753600.htm" title="08.学习闭环三部曲：预习、实时学习、复习" target="_blank">08.学习闭环三部曲：预习、实时学习、复习</a> <span class="text-muted">0058b195f4dc</span> <div>人生就是一本效率手册，你怎样对待时间，时间就会给你同比例的回馈。单点突破法。预习，实时学习，复习。1、预习：凡事提前【计划】（1）前一晚设置三个当日目标。每周起始于每周日。（2）提前学习。预习法进行思考。预不预习效果相差20％，预习法学会提问。（3）《学会提问》。听电子书。2.实时学习（1）（10％）相应场景，思维导图，快速笔记。灵感笔记。（2）大纲，基本记录，总结篇。3.复习法则，（70％），最</div> </li> <li><a href="/article/36.htm" title="ASM系列四 利用Method 组件动态注入方法逻辑" target="_blank">ASM系列四 利用Method 组件动态注入方法逻辑</a> <span class="text-muted">lijingyao8206</span> <a class="tag" taget="_blank" href="/search/%E5%AD%97%E8%8A%82%E7%A0%81%E6%8A%80%E6%9C%AF/1.htm">字节码技术</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/AOP/1.htm">AOP</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E4%BB%A3%E7%90%86/1.htm">动态代理</a><a class="tag" taget="_blank" href="/search/ASM/1.htm">ASM</a> <div>        这篇继续结合例子来深入了解下Method组件动态变更方法字节码的实现。通过前面一篇，知道ClassVisitor 的visitMethod()方法可以返回一个MethodVisitor的实例。那么我们也基本可以知道，同ClassVisitor改变类成员一样，MethodVIsistor如果需要改变方法成员，注入逻辑，也可以</div> </li> <li><a href="/article/163.htm" title="java编程思想 --内部类" target="_blank">java编程思想 --内部类</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E9%83%A8%E7%B1%BB/1.htm">内部类</a><a class="tag" taget="_blank" href="/search/%E5%8C%BF%E5%90%8D%E5%86%85%E9%83%A8%E7%B1%BB/1.htm">匿名内部类</a> <div>内部类;了解外部类 并能与之通信 内部类写出来的代码更加整洁与优雅   1,内部类的创建  内部类是创建在类中的 package com.wj.InsideClass; /* * 内部类的创建 */ public class CreateInsideClass { public CreateInsideClass(</div> </li> <li><a href="/article/290.htm" title="web.xml报错" target="_blank">web.xml报错</a> <span class="text-muted">crabdave</span> <a class="tag" taget="_blank" href="/search/web.xml/1.htm">web.xml</a> <div>web.xml报错   The content of element type "web-app" must match "(icon?,display-  name?,description?,distributable?,context-param*,filter*,filter-mapping*,listener*,servlet*,s</div> </li> <li><a href="/article/417.htm" title="泛型类的自定义" target="_blank">泛型类的自定义</a> <span class="text-muted">麦田的设计者</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E6%B3%9B%E5%9E%8B/1.htm">泛型</a> <div>   为什么要定义泛型类，当类中要操作的引用数据类型不确定的时候。 采用泛型类，完成扩展。   例如有一个学生类     Student{ Student(){ System.out.println("I'm a student....."); } }  有一个老师类   </div> </li> <li><a href="/article/544.htm" title="CSS清除浮动的4中方法" target="_blank">CSS清除浮动的4中方法</a> <span class="text-muted">IT独行者</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>清除浮动这个问题，做前端的应该再熟悉不过了，咱是个新人，所以还是记个笔记，做个积累，努力学习向大神靠近。CSS清除浮动的方法网上一搜，大概有N多种，用过几种，说下个人感受。 1、结尾处加空div标签 clear:both 1 2 3 4 .div 1 { background : #000080 ; border : 1px   s</div> </li> <li><a href="/article/671.htm" title="Cygwin使用windows的jdk 配置方法" target="_blank">Cygwin使用windows的jdk 配置方法</a> <span class="text-muted">_wy_</span> <a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/cygwin/1.htm">cygwin</a> <div>1.[vim /etc/profile]    JAVA_HOME="/cgydrive/d/Java/jdk1.6.0_43"  (windows下jdk路径为D:\Java\jdk1.6.0_43)    PATH="$JAVA_HOME/bin:${PATH}"    CLAS</div> </li> <li><a href="/article/798.htm" title="linux下安装maven" target="_blank">linux下安装maven</a> <span class="text-muted">无量</span> <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E8%A3%85/1.htm">安装</a> <div>Linux下安装maven(转) 1.首先到Maven官网 下载安装文件，目前最新版本为3.0.3，下载文件为 apache-maven-3.0.3-bin.tar.gz，下载可以使用wget命令； 2.进入下载文件夹，找到下载的文件，运行如下命令解压 tar -xvf  apache-maven-2.2.1-bin.tar.gz 解压后的文件夹</div> </li> <li><a href="/article/925.htm" title="tomcat的https 配置,syslog-ng配置" target="_blank">tomcat的https 配置,syslog-ng配置</a> <span class="text-muted">aichenglong</span> <a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/http%E8%B7%B3%E8%BD%AC%E5%88%B0https/1.htm">http跳转到https</a><a class="tag" taget="_blank" href="/search/syslong-ng%E9%85%8D%E7%BD%AE/1.htm">syslong-ng配置</a><a class="tag" taget="_blank" href="/search/syslog%E9%85%8D%E7%BD%AE/1.htm">syslog配置</a> <div>1) tomcat配置https,以及http自动跳转到https的配置     1)TOMCAT_HOME目录下生成密钥(keytool是jdk中的命令)      keytool -genkey -alias tomcat -keyalg RSA -keypass changeit -storepass changeit</div> </li> <li><a href="/article/1052.htm" title="关于领号活动总结" target="_blank">关于领号活动总结</a> <span class="text-muted">alafqq</span> <a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8/1.htm">活动</a> <div>关于某彩票活动的总结 具体需求，每个用户进活动页面，领取一个号码，1000中的一个； 活动要求 1，随机性，一定要有随机性； 2，最少中奖概率，如果注数为3200注，则最多中4注 3，效率问题，（不能每个人来都产生一个随机数，这样效率不高）； 4，支持断电（仍然从下一个开始），重启服务；（存数据库有点大材小用，因此不能存放在数据库） 解决方案 1，事先产生随机数1000个，并打</div> </li> <li><a href="/article/1179.htm" title="java数据结构 冒泡排序的遍历与排序" target="_blank">java数据结构 冒泡排序的遍历与排序</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>java的冒泡排序是一种简单的排序规则   冒泡排序的原理：           比较两个相邻的数，首先将最大的排在第一个，第二次比较第二个 ，此后一样；         针对所有的元素重复以上的步骤，除了最后一个     例题；将int array[] </div> </li> <li><a href="/article/1306.htm" title="JS检查输入框输入的是否是数字的一种校验方法" target="_blank">JS检查输入框输入的是否是数字的一种校验方法</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div>如下是JS检查输入框输入的是否是数字的一种校验方法： <form method=post target="_blank"> 数字：<input type="text" name=num onkeypress="checkNum(this.form)"><br> </form> </div> </li> <li><a href="/article/1433.htm" title="Test注解的两个属性：expected和timeout" target="_blank">Test注解的两个属性：expected和timeout</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a><a class="tag" taget="_blank" href="/search/expected/1.htm">expected</a><a class="tag" taget="_blank" href="/search/timeout/1.htm">timeout</a> <div>JUnit4：Test文档中的解释： 　　The Test annotation supports two optional parameters. 　　The first, expected, declares that a test method should throw an exception. 　　If it doesn't throw an exception or if it </div> </li> <li><a href="/article/1560.htm" title="[Gson二]继承关系的POJO的反序列化" target="_blank">[Gson二]继承关系的POJO的反序列化</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a> <div>父类     package inheritance.test2; import java.util.Map; public class Model { private String field1; private String field2; private Map<String, String> infoMap</div> </li> <li><a href="/article/1687.htm" title="【Spark八十四】Spark零碎知识点记录" target="_blank">【Spark八十四】Spark零碎知识点记录</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a> <div>1. ShuffleMapTask的shuffle数据在什么地方记录到MapOutputTracker中的 ShuffleMapTask的runTask方法负责写数据到shuffle map文件中。当任务执行完成成功，DAGScheduler会收到通知，在DAGScheduler的handleTaskCompletion方法中完成记录到MapOutputTracker中   </div> </li> <li><a href="/article/1814.htm" title="WAS各种脚本作用大全" target="_blank">WAS各种脚本作用大全</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/WAS+%E8%84%9A%E6%9C%AC/1.htm">WAS 脚本</a> <div>　　　http://www.ibm.com/developerworks/cn/websphere/library/samples/SampleScripts.html 　　　无意中，在WAS官网上发现的各种脚本作用，感觉很有作用，先与各位分享一下 　　　 获取下载 这些示例 jacl 和 Jython 脚本可用于在 WebSphere Application Server 的不同版本中自</div> </li> <li><a href="/article/1941.htm" title="java-12.求 1+2+3+..n不能使用乘除法、 for 、 while 、 if 、 else 、 switch 、 case 等关键字以及条件判断语句" target="_blank">java-12.求 1+2+3+..n不能使用乘除法、 for 、 while 、 if 、 else 、 switch 、 case 等关键字以及条件判断语句</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/switch/1.htm">switch</a> <div>借鉴网上的思路，用java实现： public class NoIfWhile { /** * @param args * * find x=1+2+3+....n */ public static void main(String[] args) { int n=10; int re=find(n); System.o</div> </li> <li><a href="/article/2068.htm" title="Netty源码学习-ObjectEncoder和ObjectDecoder" target="_blank">Netty源码学习-ObjectEncoder和ObjectDecoder</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div>Netty中传递对象的思路很直观： Netty中数据的传递是基于ChannelBuffer（也就是byte[]）； 那把对象序列化为字节流，就可以在Netty中传递对象了 相应的从ChannelBuffer恢复对象，就是反序列化的过程 Netty已经封装好ObjectEncoder和ObjectDecoder 先看ObjectEncoder ObjectEncoder是往外发送</div> </li> <li><a href="/article/2195.htm" title="spring 定时任务中cronExpression表达式含义" target="_blank">spring 定时任务中cronExpression表达式含义</a> <span class="text-muted">chicony</span> <a class="tag" taget="_blank" href="/search/cronExpression/1.htm">cronExpression</a> <div>一个cron表达式有6个必选的元素和一个可选的元素，各个元素之间是以空格分隔的，从左至右，这些元素的含义如下表所示： 代表含义            是否必须 允许的取值范围         &nb</div> </li> <li><a href="/article/2322.htm" title="Nutz配置Jndi" target="_blank">Nutz配置Jndi</a> <span class="text-muted">ctrain</span> <a class="tag" taget="_blank" href="/search/JNDI/1.htm">JNDI</a> <div>1、使用JNDI获取指定资源： var ioc = { dao : { type :"org.nutz.dao.impl.NutDao", args : [ {jndi :"jdbc/dataSource"} ] } } 以上方法,仅需要在容器中配置好数据源,注入到NutDao即可. </div> </li> <li><a href="/article/2449.htm" title="解决 /bin/sh^M: bad interpreter: No such file or directory" target="_blank">解决 /bin/sh^M: bad interpreter: No such file or directory</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a> <div>在Linux中执行.sh脚本，异常/bin/sh^M: bad interpreter: No such file or directory。   分析：这是不同系统编码格式引起的：在windows系统中编辑的.sh文件可能有不可见字符，所以在Linux系统下执行会报以上异常信息。 解决： 1）在windows下转换： 利用一些编辑器如UltraEdit或EditPlus等工具</div> </li> <li><a href="/article/2576.htm" title="[转]for 循环为何可恨？" target="_blank">[转]for 循环为何可恨？</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6/1.htm">读书</a> <div>  Java的闭包(Closure)特征最近成为了一个热门话题。 一些精英正在起草一份议案，要在Java将来的版本中加入闭包特征。 然而，提议中的闭包语法以及语言上的这种扩充受到了众多Java程序员的猛烈抨击。 不久前，出版过数十本编程书籍的大作家Elliotte Rusty Harold发表了对Java中闭包的价值的质疑。 尤其是他问道“for 循环为何可恨？”[http://ju</div> </li> <li><a href="/article/2703.htm" title="Android实用小技巧" target="_blank">Android实用小技巧</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>1、去掉所有Activity界面的标题栏 　　修改AndroidManifest.xml 　　在application 标签中添加android:theme="@android:style/Theme.NoTitleBar"   2、去掉所有Activity界面的TitleBar 和StatusBar  　　修改AndroidManifes</div> </li> <li><a href="/article/2830.htm" title="Oracle 复习笔记之序列" target="_blank">Oracle 复习笔记之序列</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/Oracle+%E5%BA%8F%E5%88%97/1.htm">Oracle 序列</a><a class="tag" taget="_blank" href="/search/sequence/1.htm">sequence</a><a class="tag" taget="_blank" href="/search/Oracle+sequence/1.htm">Oracle sequence</a> <div>转载请出自出处：http://eksliang.iteye.com/blog/2098859 1.序列的作用 序列是用于生成唯一、连续序号的对象 一般用序列来充当数据库表的主键值 2.创建序列语法如下：   create sequence s_emp start with 1 --开始值 increment by 1 --増长值 maxval</div> </li> <li><a href="/article/2957.htm" title="有“品”的程序员" target="_blank">有“品”的程序员</a> <span class="text-muted">gongmeitao</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a> <div>完美程序员的10种品质　　   完美程序员的每种品质都有一个范围，这个范围取决于具体的问题和背景。没有能解决所有问题的   完美程序员（至少在我们这个星球上），并且对于特定问题，完美程序员应该具有以下品质： 　　1. 才智非凡- 能够理解问题、能够用清晰可读的代码翻译并表达想法、善于分析并且逻辑思维能力强   （范围：用简单方式解决复杂问题）　　 </div> </li> <li><a href="/article/3084.htm" title="使用KeleyiSQLHelper类进行分页查询" target="_blank">使用KeleyiSQLHelper类进行分页查询</a> <span class="text-muted">hvt</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/hovertree/1.htm">hovertree</a> <div>本文适用于sql server单主键表或者视图进行分页查询，支持多字段排序。KeleyiSQLHelper类的最新代码请到http://hovertree.codeplex.com/SourceControl/latest下载整个解决方案源代码查看。或者直接在线查看类的代码：http://hovertree.codeplex.com/SourceControl/latest#HoverTree.D</div> </li> <li><a href="/article/3211.htm" title="SVG 教程 （三）圆形，椭圆，直线" target="_blank">SVG 教程 （三）圆形，椭圆，直线</a> <span class="text-muted">天梯梦</span> <a class="tag" taget="_blank" href="/search/svg/1.htm">svg</a> <div>SVG <circle> SVG 圆形 - <circle> <circle> 标签可用来创建一个圆： 下面是SVG代码： <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" c</div> </li> <li><a href="/article/3338.htm" title="链表栈" target="_blank">链表栈</a> <span class="text-muted">luyulong</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div> public class Node { private Object object; private Node next; public Node() { this.next = null; this.object = null; } public Object getObject() { return object; } public</div> </li> <li><a href="/article/3465.htm" title="基础数据结构和算法十：2-3 search tree" target="_blank">基础数据结构和算法十：2-3 search tree</a> <span class="text-muted">sunwinner</span> <a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a><a class="tag" taget="_blank" href="/search/2-3+search+tree/1.htm">2-3 search tree</a> <div>  Binary search tree works well for a wide variety of applications, but they have poor worst-case performance. Now we introduce a type of binary search tree where costs are guaranteed to be loga</div> </li> <li><a href="/article/3592.htm" title="spring配置定时任务" target="_blank">spring配置定时任务</a> <span class="text-muted">stunizhengjia</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/timer/1.htm">timer</a> <div>最近因工作的需要，用到了spring的定时任务的功能,觉得spring还是很智能化的,只需要配置一下配置文件就可以了,在此记录一下，以便以后用到：     //------------------------定时任务调用的方法------------------------------ /** * 存储过程定时器 */ publi</div> </li> <li><a href="/article/3719.htm" title="ITeye 8月技术图书有奖试读获奖名单公布" target="_blank">ITeye 8月技术图书有奖试读获奖名单公布</a> <span class="text-muted">ITeye管理员</span> <a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8/1.htm">活动</a> <div>ITeye携手博文视点举办的8月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 8月试读活动回顾： http://webmaster.iteye.com/blog/2102830 本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）： 《跨终端Web》 gleams：http</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>