当前位置：个人在线分享 > HTML和CSS基础（一）

HTML和CSS基础（一）

作者 : admin 本文共10160个字，预计阅读时间需要26分钟 发布时间： 2024-06-17 共1人阅读

前言

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它由各种标签组成，这些标签定义了网页的结构和内容。HTML的早期形式诞生于1989年，由CERN的物理学家Tim Berners-Lee发明，最初用于在科学家之间共享研究成果。1996年：HTML 4.0发布，引入了样式表、框架、表单等新特性，这个版本被广泛使用了很多年。这个HTML4.0就是我们经常说的HTML语言，而2014年，HTML5发布，这是自HTML 4.01以来最大的一次更新。HTML5引入了新的结构元素、表单控件、媒体播放功能以及对图形和交互性的支持。这个就是我们常说的H5。HTML不是编程语言，而是一种用于创建网页内容的标记语言。用通俗的语言来讲，HTML是一个可以被浏览器程序渲染展示界面的语言。这里还有一个概念就是CSS，CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML文档外观和布局的语言。

为了方便大家理解，我们可以将HTML语言比作一个房屋，HTML里的标签元素就是房屋里的房间、大门、窗户、水管、电线、煤气管道。而CSS语言就是将这个毛坯房装修漂亮的工具，你可以设置房间墙壁的颜色、是否挂壁画、屋顶吊顶。HTML和CSS组合起来就可以构造一个非常漂亮网页了。

接下来我们先整体介绍一下html语言中有哪些常用的标签元素以及CSS中有哪些常用的属性以及这些属性如何与常用标签的匹配。

一、HTML常用的标签元素

1.1标签元素分类

按照html标签元素的特性，我们将它们分为三类：块级元素（Block-level Elements）、行内元素（Inline Elements）、混合元素（可作为块级或行内）。
下面一张表格对比这三者的区别，以及每个类型的代表标签元素。

特性/元素类型块级元素行内元素混合元素（如 ）
常见标签示例,

,

    ,

, , HTML和CSS基础（一）插图
我们浏览的网页至少包含这三个标签。还有一个表示文件类型的标签
以下代码是一个html的基本结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    
</body>
</html>

上图可见元素可以包含四种元素:。</p><h4>1.2.2常用标签</h4><ul><li><strong>charset：</strong> 定义文档的字符编码。<br /> 示例：</li><li><strong>viewport：</strong> 控制布局在不同设备上的显示方式，用于响应式设计。<br /> 示例：</li><li><strong>description：</strong> 提供页面内容的简短描述，通常用于搜索引擎结果的摘要信息。<br /> 示例：</li><li><strong>keywords：</strong> 提供页面的关键词，虽然现代搜索引擎可能不再依赖此标签。<br /> 示例：</li><li><strong>author：</strong> 指定页面的作者。<br /> 示例：</li><li><strong>robots：</strong> 指示搜索引擎爬虫如何索引和跟随页面上的链接。<br /> 示例：</li><li><strong>http-equiv：</strong> 模拟HTTP头部，可以用于控制缓存或浏览器行为。<br /> 示例：</li><li><strong>refresh：</strong> 设置页面在指定秒数后刷新或跳转。<br /> 示例：</li><li><strong>X-UA-Compatible：</strong> 用于指定浏览器使用最新版本的IE渲染引擎。<br /> 示例：</li><li><strong>og（Open Graph Protocol）：</strong> 控制社交媒体网站如何显示链接的预览。<br /> 示例：<p></li></ul><p><strong>以下是一个完整的HTML文档包含常见的标签</strong></p><pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<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>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<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>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<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>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>description<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This is a sample webpage for demonstrating meta tags.<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>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>keywords<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>HTML, meta tags, tutorial<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>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>author<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>John Doe<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>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<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>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>robots<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index, follow<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>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>theme-color<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#ffffff<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>title</span><span class="token punctuation">></span></span>Sample Meta Tags<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Understanding Meta Tags and Style Tags<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This page includes examples of meta tags and style tags.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre><h4>1.2.3常用标签</h4><ul><li><strong>样式表：</strong> 引入外部CSS样式表。</li><li><strong>图标：</strong> 定义页面的favicon图标。</li><li><strong>触摸图标（用于iOS设备）：</strong>：为iOS设备定义触摸图标。</li><li><strong>预加载：</strong> 告诉浏览器预先加载资源，用于性能优化。</li><li><strong>预连接：</strong> 提前连接到另一个域，用于性能优化。</li><li><strong>DNS 预查询（DNS-Prefetch）：</strong> 提前执行DNS查询，用于性能优化。</li><li><strong>模块预加载：</strong> 预加载JavaScript模块。<br /> ：</li><li><strong>导航：</strong> 定义下一个导航目标。<br /> ：</li><li><strong>前一个页面：</strong> 定义前一个导航目标。<br /> ：</li><li><strong>授权（用于CORS）：</strong> 预获取资源，用于性能优化。<br /> ：</li><li><strong>Open Graph Protocol（OGP）：</strong> 用于社交媒体分享时定义页面的URL。<br /> ：</li><li><strong>短链接：</strong> 定义页面的短链接。<br /> ：</li><li><strong>canonical：</strong> 指定页面的官方URL，用于防止内容重复。<br /> ：</li><li><strong>Apple Safari主题颜色：</strong> 定义Safari的固定标签页图标和主题颜色。<br /> ：</li></ul><h4>1.2.4和<title>标签</h4><p>主要是用来引入<a href="http://www.xu0.com/tag/css" title="【查看更多[css]标签的文章】" target="_blank">css</a>样式表，如下图代码</p><pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</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/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #f8f8f8<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">h1</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">p</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></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> </code></pre><p><title>主要作用是指定网页的标题，这个标题就是浏览器里这个网页的tab头显示的名字。如下图所示。<br /> <img title="HTML和CSS基础（一）插图(1)" alt="HTML和CSS基础（一）插图(1)" src="//www.xu0.com/wp-content/uploads/2024/06/1718586775-754feeb97684b9c.png" /></p><h4>1.2.5块级元素（Block-level Elements）类型标签</h4><h6>1.div元素</h6><p> : 一个通用的容器元素，没有特定语义，主要用于组合其他元素</p><pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>天下之物生于有，有生于无。 道生一，一生二，二生三，三生万物。万物负阴而抱阳，中气以为和。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre><h6>2.p元素</h6><p>: 表示段落，包含文本内容。</p><pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>【第一章】道，可道也，非恒道也。名，可名也，非恒名也。无，名也，天地之始也。有，名也，万物之母也。故恒无，谷也，以观其眇；恒有，谷也，以观其皦。两者同出，异名同谓。玄之有玄，众眇之门。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre><h6>3.ul和li元素</h6><p>ul和li: 用来表示列表。</p><pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>天<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>人<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>地<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre><h6>4.table、th、tr、td元素</h6><p>table: 用于显示表格数据，其中th是表头，tr是行元素，td是单元格，</p><pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>水<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>木<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>火<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>土<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>金<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>志<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>魂<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>神<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>意<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>魄<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> </code></pre><h4>1.2.6行内元素（Inline Elements）类型标签</h4><h6>1.span元素</h6><p><span>: 一个通用的行内容器，没有特定语义，通常用于样式化文本的一部分。</p><pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>This text is red.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> </code></pre><h6>2.a元素</h6><p> 也称为锚（anchor）元素，在HTML中用于定义超链接。通过 元素，你可以链接到另一个资源，这可以是另一个网页、同一网页的不同部分、图像、文件或任何其他URL可访问的资源。 元素最重要的属性是 href，它指定了链接的目标地址。<br /> <strong>关键属性：</strong></p><ul><li><strong>href (Hypertext REFerence)：</strong> 指定链接的目标URL。这是创建链接时必须的属性。</li><li><strong>target：</strong> 指定在何处打开链接文档。例如，_blank 会在新窗口或新标签页中打开链接，_self<br /> 在相同的框架或窗口中打开链接（这是默认行为）。\</li><li><strong>title：</strong> 提供关于链接的额外信息，通常作为工具提示显示。</li><li><strong>rel：</strong> 描述当前文档与被链接文档之间的关系。例如，rel=“nofollow” 可以告诉搜索引擎不要追踪链接。</li><li><strong>download:</strong> (HTML5中引入)：指定链接是为了下载资源。如果指定了 download 属性，浏览器会提示用户下载链接的资源。</li></ul><h6>3.img元素</h6><p><img title="HTML和CSS基础（一）插图(2)" alt="HTML和CSS基础（一）插图(2)" src="//www.xu0.com/wp-content/uploads/2024/06/1718586819-afe9c9a9fd65ba2.png" /></p><p>以下是 margin 和 padding 的属性值及其含义：</p><p><strong>margin 属性：</strong></p><ul><li><p>margin-top: 顶部外边距。</p></li><li><p>margin-right: 右侧外边距。</p></li><li><p>margin-bottom: 底部外边距。</p></li><li><p>margin-left: 左侧外边距。</p></li><li><p>margin: 简写属性，可以同时设置所有四个方向的外边距。</p></li><li><p>具体数值，如 10px。</p></li><li><p>百分比，相对于包含块的宽度。</p></li><li><p>auto：自动计算外边距，常用于水平居中。</p></li></ul><pre><code class="prism language-css"><span class="token comment">/* 属性分开的形式 */</span> <span class="token selector">.example-margin</span> <span class="token punctuation">{</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* 简写形式 */</span> <span class="token selector">.example-margin</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 20px 30px<span class="token punctuation">;</span> <span class="token comment">/* 上下为20px，左右为30px */</span> <span class="token punctuation">}</span> <span class="token comment">/* 两个值：垂直 | 水平 */</span> <span class="token selector">.example-margin-2</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 10px 20px<span class="token punctuation">;</span> <span class="token comment">/* 上下为10px，左右为20px */</span> <span class="token punctuation">}</span> <span class="token comment">/* 三个值：顶部 | 右侧和左侧 | 底部 */</span> <span class="token selector">.example-margin-3</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 5px 10px 15px<span class="token punctuation">;</span> <span class="token comment">/* 上为5px，左右为10px，下为15px */</span> <span class="token punctuation">}</span> <span class="token comment">/* 四个值：顶部 | 右侧 | 底部 | 左侧 */</span> <span class="token selector">.example-margin-4</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 8px 12px 8px 12px<span class="token punctuation">;</span> <span class="token comment">/* 上右下左分别为8px, 12px, 8px, 12px */</span> <span class="token punctuation">}</span> </code></pre><p><strong>padding 属性：</strong></p><ul><li>padding-top: 顶部内边距。</li><li>padding-right: 右侧内边距。</li><li>padding-bottom: 底部内边距。</li><li>padding-left: 左侧内边距。</li><li>padding: 简写属性，可以同时设置所有四个方向的内边距。</li></ul><p><strong>padding 的值可以是：</strong></p><ul><li>具体数值，如 10px。</li><li>百分比，相对于包含块的宽度。</li></ul><pre><code class="prism language-css"><span class="token comment">/* 属性分开的形式 */</span> <span class="token selector">.example-padding</span> <span class="token punctuation">{</span> <span class="token property">padding-top</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span> <span class="token property">padding-right</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span> <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span> <span class="token property">padding-left</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* 简写形式 */</span> <span class="token selector">.example-padding</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 15px 25px<span class="token punctuation">;</span> <span class="token comment">/* 上下为15px，左右为25px */</span> <span class="token punctuation">}</span> <span class="token comment">/* 两个值：垂直 | 水平 */</span> <span class="token selector">.example-padding-2</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 10% 20%<span class="token punctuation">;</span> <span class="token comment">/* 上下为10%，左右为20% */</span> <span class="token punctuation">}</span> <span class="token comment">/* 三个值：顶部 | 右侧和左侧 | 底部 */</span> <span class="token selector">.example-padding-3</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 2em 4em 1em<span class="token punctuation">;</span> <span class="token comment">/* 上为2em，左右为4em，下为1em */</span> <span class="token punctuation">}</span> <span class="token comment">/* 四个值：顶部 | 右侧 | 底部 | 左侧 */</span> <span class="token selector">.example-padding-4</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 8px 12px 15px 20px<span class="token punctuation">;</span> <span class="token comment">/* 上右下左分别为8px, 12px, 15px, 20px */</span> <span class="token punctuation">}</span> </code></pre><h5>ul的css属性</h5><p>ul元素有几个控制列表效果的专有属性：</p><ul><li><p>list-style-type:</p><ul><li>disc: 默认值，显示为实心圆点。</li><li>circle: 显示为空心圆圈。</li><li>square: 显示为实心方块。</li><li>none: 不显示列表项标记。</li><li>decimal: 显示为数字。</li><li>decimal-leading-zero: 显示为带有前导零的数字（例如，01, 02, 03, 等）。</li><li>lower-roman: 显示为小写罗马数字。</li><li>upper-roman: 显示为大写罗马数字。</li><li>lower-alpha: 显示为小写字母。</li><li>upper-alpha: 显示为大写字母。</li></ul></li><li><p>list-style-image:</p><ul><li>使用图像作为列表项的标记。可以是URL路径或图像。</li></ul></li><li><p>list-style-position:</p><ul><li>inside: 列表项标记位于文本内部，紧贴文本。</li><li>outside: 列表项标记位于文本外部，与文本对齐。</li></ul></li><li><p>list-style:简写属性，用于同时设置 list-style-type, list-style-image, 和 list-style-position。</p></li></ul><pre><code class="prism language-css"><span class="token selector">ul.custom-list-type</span> <span class="token punctuation">{</span> <span class="token property">list-style-type</span><span class="token punctuation">:</span> square<span class="token punctuation">;</span> <span class="token comment">/* 使用实心方块作为标记 */</span> <span class="token property">list-style-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'custom-bullet.png'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token comment">/* 使用自定义图像作为标记 */</span> <span class="token property">list-style-position</span><span class="token punctuation">:</span> inside<span class="token punctuation">;</span> <span class="token comment">/* 标记位于文本内部 */</span> <span class="token punctuation">}</span> </code></pre><p>li.custom-list-item {<br /> padding-left: 10px; /* 为列表项添加左内边距 */<br /> }</p><h5>table、tr、td的特殊css属性</h5><p><strong>1.table专有：</strong></p><p><strong>border-collapse 属性：</strong> 决定表格的边框是否合并为一个单一的边框。</p><ul><li>collapse: 相邻单元格的边框会合并为一个单一的边框，这是默认值。</li><li>separate: 每个单元格的边框独立显示，单元格之间的间隙由 border-spacing 属性控制。<br /> <strong>table-layout 属性：</strong> table-layout 属性定义了表格的布局算法。</li><li>auto: 浏览器根据表格的行和列的尺寸自动计算表格的布局，这可能导致行和列的尺寸根据内容动态变化。</li><li>fixed: 表格的宽度和列宽固定，列宽由表格宽度和 width 属性决定，行的高度由内容决定。</li></ul><pre><code class="prism language-html">/* 表格样式示例 */ table.collapse-border { border-collapse: collapse; /* 边框合并 */ border: 1px solid black; /* 边框样式 */ } table.separate-border { border-collapse: separate; /* 边框独立 */ border: 1px solid #ccc; /* 边框样式 */ border-spacing: 10px; /* 边框间距 */ } table.auto-layout { table-layout: auto; /* 自动布局 */ width: 100%; /* 表格宽度 */ } table.fixed-layout { table-layout: fixed; /* 固定布局 */ width: 60%; /* 表格宽度 */ border: 2px solid blue; /* 边框样式 */ } /* 示例HTML结构 */ <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</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>collapse-border<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>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>标题1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>标题2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>内容1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>内容2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</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>separate-border<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>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>标题1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>标题2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>内容1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>内容2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</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>auto-layout<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token comment"></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</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>fixed-layout<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token comment"></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> </code></pre><p>在这个示例中，我们演示了不同的 border-collapse 和 table-layout 属性值如何影响表格的显示：</p><ul><li>.collapse-border 类的表格使用了 collapse 属性，边框合并为单一的边框。</li><li>.separate-border 类的表格使用了 separate 属性，边框独立显示，并通过 border-spacing 属性设置了边框间距。</li><li>.auto-layout 类的表格使用了 auto 属性，表格布局根据内容自动调整。</li><li>.fixed-layout 类的表格使用了 fixed 属性，表格布局固定，宽度由 width 属性决定。</li></ul><p><strong>2.tr和td专有：</strong></p><ul><li>vertical-align: 设置单元格内容的垂直对齐方式。</li><li>vertical-align: 设置单元格内容的垂直对齐方式。</li></ul><h5>input的css属性</h5><p><strong>outline属性</strong><br /> outline 属性在CSS中用于绘制元素轮廓，它是一个简写属性，允许你在一个声明中设置多个轮廓属性。以下是 outline 的属性值及其含义：</p><ul><li>outline-width:设置轮廓的宽度。可以是具体数值（如 1px）、百分比或关键字（如 thin, medium, thick）。</li><li>outline-style:设置轮廓的样式，如 solid（实线）、dotted（点线）、dashed（虚线）、double（双线）、groove、ridge、inset、outset 等。</li><li>outline-color:设置轮廓的颜色。可以是颜色名称（如 red）、十六进制值（如 #ff0000）、RGB 值（如 rgb(255, 0, 0)）等。</li><li>outline-offset:设置轮廓与元素边框之间的距离。</li><li>outline 属性的值可以组合使用，例如 outline: 1px solid red;，也可以只设置一个值，如 outline: none;。</li></ul><p><strong>CSS 示例代码：</strong></p><pre><code class="prism language-css"><span class="token comment">/* 无轮廓 */</span> <span class="token selector">.no-outline</span> <span class="token punctuation">{</span> <span class="token property">outline</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* 实线轮廓 */</span> <span class="token selector">.solid-outline</span> <span class="token punctuation">{</span> <span class="token property">outline</span><span class="token punctuation">:</span> 2px solid blue<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* 点线轮廓 */</span> <span class="token selector">.dotted-outline</span> <span class="token punctuation">{</span> <span class="token property">outline</span><span class="token punctuation">:</span> 1px dotted green<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* 虚线轮廓 */</span> <span class="token selector">.dashed-outline</span> <span class="token punctuation">{</span> <span class="token property">outline</span><span class="token punctuation">:</span> 3px dashed #333<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* 双线轮廓 */</span> <span class="token selector">.double-outline</span> <span class="token punctuation">{</span> <span class="token property">outline</span><span class="token punctuation">:</span> 3px double #000<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* 轮廓偏移 */</span> <span class="token selector">.offset-outline</span> <span class="token punctuation">{</span> <span class="token property">outline</span><span class="token punctuation">:</span> 2px solid red<span class="token punctuation">;</span> <span class="token property">outline-offset</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* 轮廓样式组合 */</span> <span class="token selector">.custom-outline</span> <span class="token punctuation">{</span> <span class="token property">outline-width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> <span class="token property">outline-style</span><span class="token punctuation">:</span> dashed<span class="token punctuation">;</span> <span class="token property">outline-color</span><span class="token punctuation">:</span> #ff00ff<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre><p>在这个示例中：</p><ul><li>.no-outline 类移除了轮廓。</li><li>.solid-outline 类添加了蓝色实线轮廓。</li><li>.dotted-outline 类添加了绿色点线轮廓。</li><li>.dashed-outline 类添加了灰色虚线轮廓。</li><li>.double-outline 类添加了黑色双线轮廓。</li><li>.offset-outline 类添加了红色轮廓，并设置了轮廓偏移。</li><li>.custom-outline 类组合使用了轮廓宽度、样式和颜色。</li></ul><p>轮廓通常用于视觉反馈，如当元素获得焦点时，可以通过 :focus 伪类来添加轮廓样式</p><h4>2.2.3CSS优先级（重点）</h4><p>在 CSS 中，优先级（Specificity）决定了当多个规则应用于同一个元素时，哪条规则会生效。优先级是由选择器的类型和复杂度决定的。CSS属性的优先级可以分为以下几种：</p><ol><li><strong>重要性（Importance）</strong></li></ol><pre><code class="prism language-css"> <span class="token selector">!important 是一种特殊的优先级，优先于所有其他规则。即使其他规则的优先级更高，带有 !important 的规则仍然会覆盖它们。、 p</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> red <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre><ol start="2"><li><strong>内联样式（Inline Styles）</strong><br /> 通过元素的 style 属性直接设置的样式，优先级高于所有CSS选择器，但低于 !important。</li></ol><pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>This is a paragraph.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre><ol start="3"><li><strong>ID选择器（ID Selectors）</strong><br /> ID选择器的优先级较高，它的权重为100。</li></ol><pre><code class="prism language-css"><span class="token selector">#my-id</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre><ol start="4"><li><strong>类、伪类和属性选择器（Class, Pseudo-class, and Attribute Selectors）</strong><br /> 类选择器、伪类选择器和属性选择器的优先级相同，它们的权重为10。</li></ol><pre><code class="prism language-css"><span class="token selector">.my-class</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> purple<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">p:hover</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> orange<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">input[type="text"]</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> bro </code></pre><p>wn;<br /> }<br /> 5. <strong>元素和伪元素选择器（Element and Pseudo-element Selectors）</strong><br /> 元素选择器和伪元素选择器的优先级最低，它们的权重为1。</p><pre><code class="prism language-css"><span class="token selector">div</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">p::after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"!"</span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre><ol start="6"><li><strong>选择器组合和层叠（Selector Combinations and Cascade）</strong><br /> 当选择器组合在一起时，其优先级是各个部分权重的总和。例如：</li></ol><pre><code class="prism language-css"><span class="token selector">div span</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> <span class="token comment">/* 1 + 1 = 2 */</span> <span class="token punctuation">}</span> <span class="token selector">ul li .item</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span> <span class="token comment">/* 1 + 1 + 10 = 12 */</span> <span class="token punctuation">}</span> <span class="token selector">#main .highlight</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span> <span class="token comment">/* 100 + 10 = 110 */</span> <span class="token punctuation">}</span> </code></pre><ol start="7"><li><strong>层叠顺序（Cascade Order）</strong><br /> 当多个选择器的优先级相同时，离目标元素最近的规则将覆盖其他规则。如果它们在同一个层次上，后定义的规则将覆盖之前的规则。</li></ol><pre><code class="prism language-css"><span class="token selector"> p</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.intro</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#main</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">p</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> orange<span class="token punctuation">;</span> <span class="token comment">/* 此规则将覆盖第一个 p 规则 */</span> <span class="token punctuation">}</span> </code></pre><p><strong>具体示例</strong><br /> 下面是一个具体示例，展示了优先级的实际应用：</p><pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<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>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<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>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<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>title</span><span class="token punctuation">></span></span>CSS Specificity Example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">p</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token comment">/* 权重 1 */</span> <span class="token punctuation">}</span> <span class="token selector">.intro</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> <span class="token comment">/* 权重 10 */</span> <span class="token punctuation">}</span> <span class="token selector">#main</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span> <span class="token comment">/* 权重 100 */</span> <span class="token punctuation">}</span> <span class="token selector">p</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> orange<span class="token punctuation">;</span> <span class="token comment">/* 权重 1，但在文档流中更靠后 */</span> <span class="token punctuation">}</span> <span class="token selector">p.intro</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> purple<span class="token punctuation">;</span> <span class="token comment">/* 权重 11 */</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This is a paragraph with low specificity.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</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>intro<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is a paragraph with class.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>main<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>p</span><span class="token punctuation">></span></span>This is a paragraph inside a div with id.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre><p>在上述示例中，不同选择器的优先级将决定每个段落的最终颜色：</p><ul><li>第一个段落颜色为 orange，因为 p { color: orange; } 规则在文档流中更靠后。</li><li>第二个段落颜色为 purple，因为 .intro { color: blue; } 的权重是 10，而 p.intro { color: purple; } 的权重是 11。</li><li>第三个段落颜色为 green，因为 #main { color: green; } 的权重是 100。‘’</li></ul><p><strong>总结</strong><br /> CSS 优先级由 !important、内联样式、ID选择器、类选择器、伪类选择器、属性选择器、元素选择器和伪元素选择器的权重决定。当多个规则作用于同一元素时，优先级更高的规则将生效。理解并正确运用CSS优先级，有助于更有效地控制样式应用和解决样式冲突。</p><h2>三、初学者常见错误</h2><h3>1. 标签未闭合或嵌套不正确</h3><p><strong>错误:</strong> 初学者常常忘记闭合标签或者标签嵌套不正确。</p><pre><code class="prism language-html"><span class="token comment"></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This is a paragraph <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>This is a div<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre><p><strong>正确示例:</strong></p><pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This is a paragraph<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>This is a div<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre><h3>2. 块级元素和行内元素的混淆</h3><p><strong>错误:</strong> 将块级元素放在行内元素内部。</p><pre><code class="prism language-html"><span class="token comment"></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>This is a div inside a span<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</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><strong>正确示例:</strong></p><pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>This is a span inside a div<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre><h3>3. 使用错误的标签</h3><p><strong>错误:</strong> 使用不合适的标签来标记内容。</p><pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>b</span><span class="token punctuation">></span></span>This is bold text<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>b</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span><span class="token punctuation">></span></span>This is italic text<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span> </code></pre><p><strong>正确示例:</strong> 现在推荐使用具有语义的标签。</p><pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>This is bold text<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>This is italic text<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</span><span class="token punctuation">></span></span> </code></pre><h3>4. 忘记包括</h3><p><strong>错误:</strong> 忘记在HTML文档开头声明文档类型。</p><pre><code class="prism language-html"><span class="token comment"></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>My Page<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Hello World!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre><p><strong>正确示例:</strong></p><pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>My Page<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Hello World!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre><h3>5. 不正确的注释使用</h3><p><strong>错误:</strong> 错误地使用注释标签。</p><p> <strong>正确示例:</strong></p><pre><code class="prism language-html"><span class="token comment"></span> </code></pre><h3>6. 忘记字符编码声明</h3><p><strong>错误: 忘记在部分设置字符编码。</strong></p><pre><code class="prism language-html"><span class="token comment"></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>My Page<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> </code></pre><p><strong>正确示例:</strong></p><pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<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>title</span><span class="token punctuation">></span></span>My Page<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> </code></pre></article><div id="pay-single-box"></div><div class="entry-tags"> <a href="http://www.xu0.com/tag/css" rel="tag"> css </a></div><div class="article-copyright">本站无任何商业行为<br/><a href="http://www.xu0.com">个人在线分享</a> » <a href="http://www.xu0.com/208995.html">HTML和CSS基础（一）</a></div><div class="article-footer"><div class="author-box"><div class="author-image"> <img alt='admin' data-src='http://xu0.com/wp-content/uploads/avatar/avatar-1.png' class='lazyload avatar avatar-140 photo gravatar' height='140' width='140' /></div><div class="author-info"><h4 class="author-name"> <a href="http://www.xu0.com/author/admin">admin</a> <span class="label label-warning"><i class="fa fa-diamond"></i> 钻石</span></h4></div></div><div class="xshare"> <span class="xshare-title">分享到：</span> <a href="" etap="share" data-share="qq" class="share-qq"><i class="fa fa-qq"></i></a> <a href="" etap="share" data-share="weibo" class="share-weibo"><i class="fa fa-weibo"></i></a></div></div></div></div></div></main><div class="entry-navigation"><nav class="article-nav"> <span class="article-nav-prev">上一篇<br><a href="http://www.xu0.com/208979.html" rel="prev">9.8k star！一款小而美的开源物联网操作系统：RT-Thread</a></span> <span class="article-nav-next">下一篇<br><a href="http://www.xu0.com/209008.html" rel="next">数据挖掘–挖掘频繁模式、关联和相关性：基本概念和方法</a></span></nav></div></div><div class="coments" style="margin-top:20px;"></div></div><div class="sidebar-column col-lg-3"><aside class="widget-area"><div id="search-2" class="widget widget_search"><form method="get" class="search-form inline" action="http://www.xu0.com/"> <input type="search" class="search-field inline-field" placeholder="输入关键词，回车..." autocomplete="off" value="" name="s" required="required"> <button type="submit" class="search-submit"><i class="mdi mdi-magnify"></i></button></form></div><div id="tag_cloud-2" class="widget widget_tag_cloud"><h5 class="widget-title">标签</h5><div class="tagcloud"><a href="http://www.xu0.com/tag/android" class="tag-cloud-link tag-link-2417 tag-link-position-1" style="font-size: 9.410071942446pt;" aria-label="android (1,133个项目)">android</a> <a href="http://www.xu0.com/tag/c" class="tag-cloud-link tag-link-2388 tag-link-position-2" style="font-size: 14.244604316547pt;" aria-label="C++ (3,406个项目)">C++</a> <a href="http://www.xu0.com/tag/css" class="tag-cloud-link tag-link-2368 tag-link-position-3" style="font-size: 11.625899280576pt;" aria-label="css (1,876个项目)">css</a> <a href="http://www.xu0.com/tag/c-yu-yan" class="tag-cloud-link tag-link-2360 tag-link-position-4" style="font-size: 9.8129496402878pt;" aria-label="c语言 (1,241个项目)">c语言</a> <a href="http://www.xu0.com/tag/docker" class="tag-cloud-link tag-link-2464 tag-link-position-5" style="font-size: 10.115107913669pt;" aria-label="docker (1,314个项目)">docker</a> <a href="http://www.xu0.com/tag/html" class="tag-cloud-link tag-link-2375 tag-link-position-6" style="font-size: 12.330935251799pt;" aria-label="html (2,187个项目)">html</a> <a href="http://www.xu0.com/tag/ava" class="tag-cloud-link tag-link-267 tag-link-position-7" style="font-size: 18.172661870504pt;" aria-label="Java (8,382个项目)">Java</a> <a href="http://www.xu0.com/tag/javascript" class="tag-cloud-link tag-link-2361 tag-link-position-8" style="font-size: 18.273381294964pt;" aria-label="javascript (8,468个项目)">javascript</a> <a href="http://www.xu0.com/tag/leetcode" class="tag-cloud-link tag-link-2864 tag-link-position-9" style="font-size: 8.705035971223pt;" aria-label="leetcode (960个项目)">leetcode</a> <a href="http://www.xu0.com/tag/linux" class="tag-cloud-link tag-link-2465 tag-link-position-10" style="font-size: 14.244604316547pt;" aria-label="linux (3,402个项目)">linux</a> <a href="http://www.xu0.com/tag/mysql" class="tag-cloud-link tag-link-2485 tag-link-position-11" style="font-size: 10.215827338129pt;" aria-label="mysql (1,361个项目)">mysql</a> <a href="http://www.xu0.com/tag/python" class="tag-cloud-link tag-link-2362 tag-link-position-12" style="font-size: 16.561151079137pt;" aria-label="python (5,736个项目)">python</a> <a href="http://www.xu0.com/tag/spring" class="tag-cloud-link tag-link-2398 tag-link-position-13" style="font-size: 9.7122302158273pt;" aria-label="spring (1,200个项目)">spring</a> <a href="http://www.xu0.com/tag/springboot" class="tag-cloud-link tag-link-2400 tag-link-position-14" style="font-size: 12.532374100719pt;" aria-label="springboot (2,266个项目)">springboot</a> <a href="http://www.xu0.com/tag/uni-app" class="tag-cloud-link tag-link-2446 tag-link-position-15" style="font-size: 9.3093525179856pt;" aria-label="uni-app (1,088个项目)">uni-app</a> <a href="http://www.xu0.com/tag/vue" class="tag-cloud-link tag-link-2411 tag-link-position-16" style="font-size: 8.705035971223pt;" aria-label="vue (944个项目)">vue</a> <a href="http://www.xu0.com/tag/vuejs" class="tag-cloud-link tag-link-2371 tag-link-position-17" style="font-size: 16.561151079137pt;" aria-label="vue.js (5,713个项目)">vue.js</a> <a href="http://www.xu0.com/tag/web-an-quan" class="tag-cloud-link tag-link-2504 tag-link-position-18" style="font-size: 8.9064748201439pt;" aria-label="web安全 (1,006个项目)">web安全</a> <a href="http://www.xu0.com/tag/windows" class="tag-cloud-link tag-link-2418 tag-link-position-19" style="font-size: 8pt;" aria-label="windows (819个项目)">windows</a> <a href="http://www.xu0.com/tag/ren-gong-zhi-neng" class="tag-cloud-link tag-link-15 tag-link-position-20" style="font-size: 16.661870503597pt;" aria-label="人工智能 (5,918个项目)">人工智能</a> <a href="http://www.xu0.com/tag/qian-duan" class="tag-cloud-link tag-link-2366 tag-link-position-21" style="font-size: 22pt;" aria-label="前端 (19,994个项目)">前端</a> <a href="http://www.xu0.com/tag/qian-duan-kuang-jia" class="tag-cloud-link tag-link-2397 tag-link-position-22" style="font-size: 9.0071942446043pt;" aria-label="前端框架 (1,031个项目)">前端框架</a> <a href="http://www.xu0.com/tag/dan-pian-ji" class="tag-cloud-link tag-link-2943 tag-link-position-23" style="font-size: 8.2014388489209pt;" aria-label="单片机 (856个项目)">单片机</a> <a href="http://www.xu0.com/tag/hou-duan" class="tag-cloud-link tag-link-2401 tag-link-position-24" style="font-size: 13.035971223022pt;" aria-label="后端 (2,565个项目)">后端</a> <a href="http://www.xu0.com/tag/da-shu-ju" class="tag-cloud-link tag-link-2450 tag-link-position-25" style="font-size: 12.028776978417pt;" aria-label="大数据 (2,037个项目)">大数据</a> <a href="http://www.xu0.com/tag/xue-xi" class="tag-cloud-link tag-link-2435 tag-link-position-26" style="font-size: 13.338129496403pt;" aria-label="学习 (2,761个项目)">学习</a> <a href="http://www.xu0.com/tag/an-quan" class="tag-cloud-link tag-link-2568 tag-link-position-27" style="font-size: 11.021582733813pt;" aria-label="安全 (1,615个项目)">安全</a> <a href="http://www.xu0.com/tag/rong-qi" class="tag-cloud-link tag-link-2463 tag-link-position-28" style="font-size: 9.1079136690647pt;" aria-label="容器 (1,045个项目)">容器</a> <a href="http://www.xu0.com/tag/xiao-cheng-xu" class="tag-cloud-link tag-link-2459 tag-link-position-29" style="font-size: 9.6115107913669pt;" aria-label="小程序 (1,171个项目)">小程序</a> <a href="http://www.xu0.com/tag/qian-ru-shi-ying-jian" class="tag-cloud-link tag-link-2944 tag-link-position-30" style="font-size: 8.3021582733813pt;" aria-label="嵌入式硬件 (874个项目)">嵌入式硬件</a> <a href="http://www.xu0.com/tag/kai-fa-yu-yan" class="tag-cloud-link tag-link-2372 tag-link-position-31" style="font-size: 17.971223021583pt;" aria-label="开发语言 (7,904个项目)">开发语言</a> <a href="http://www.xu0.com/tag/wei-xin-xiao-cheng-xu" class="tag-cloud-link tag-link-2424 tag-link-position-32" style="font-size: 8.6043165467626pt;" aria-label="微信小程序 (934个项目)">微信小程序</a> <a href="http://www.xu0.com/tag/%e6%95%b0%e6%8d%ae%e5%ba%93" class="tag-cloud-link tag-link-304 tag-link-position-33" style="font-size: 14.748201438849pt;" aria-label="数据库 (3,785个项目)">数据库</a> <a href="http://www.xu0.com/tag/shu-ju-jie-gou" class="tag-cloud-link tag-link-2460 tag-link-position-34" style="font-size: 10.517985611511pt;" aria-label="数据结构 (1,458个项目)">数据结构</a> <a href="http://www.xu0.com/tag/fu-wu-qi" class="tag-cloud-link tag-link-2436 tag-link-position-35" style="font-size: 13.841726618705pt;" aria-label="服务器 (3,066个项目)">服务器</a> <a href="http://www.xu0.com/tag/ji-qi-xue-xi" class="tag-cloud-link tag-link-2603 tag-link-position-36" style="font-size: 9.7122302158273pt;" aria-label="机器学习 (1,202个项目)">机器学习</a> <a href="http://www.xu0.com/tag/shen-du-xue-xi" class="tag-cloud-link tag-link-2469 tag-link-position-37" style="font-size: 10.820143884892pt;" aria-label="深度学习 (1,559个项目)">深度学习</a> <a href="http://www.xu0.com/tag/bi-ji" class="tag-cloud-link tag-link-2587 tag-link-position-38" style="font-size: 11.827338129496pt;" aria-label="笔记 (1,960个项目)">笔记</a> <a href="http://www.xu0.com/tag/suan-fa" class="tag-cloud-link tag-link-2386 tag-link-position-39" style="font-size: 14.446043165468pt;" aria-label="算法 (3,536个项目)">算法</a> <a href="http://www.xu0.com/tag/wang-luo" class="tag-cloud-link tag-link-853 tag-link-position-40" style="font-size: 13.035971223022pt;" aria-label="网络 (2,577个项目)">网络</a> <a href="http://www.xu0.com/tag/wang-luo-xie-yi" class="tag-cloud-link tag-link-2437 tag-link-position-41" style="font-size: 8.8057553956835pt;" aria-label="网络协议 (971个项目)">网络协议</a> <a href="http://www.xu0.com/tag/wang-luo-an-quan" class="tag-cloud-link tag-link-2505 tag-link-position-42" style="font-size: 8pt;" aria-label="网络安全 (814个项目)">网络安全</a> <a href="http://www.xu0.com/tag/yun-wei" class="tag-cloud-link tag-link-2477 tag-link-position-43" style="font-size: 14.345323741007pt;" aria-label="运维 (3,493个项目)">运维</a> <a href="http://www.xu0.com/tag/mian-shi" class="tag-cloud-link tag-link-2445 tag-link-position-44" style="font-size: 9.0071942446043pt;" aria-label="面试 (1,027个项目)">面试</a> <a href="http://www.xu0.com/tag/yin-shi-pin" class="tag-cloud-link tag-link-2438 tag-link-position-45" style="font-size: 8.8057553956835pt;" aria-label="音视频 (969个项目)">音视频</a></div></div><div id="calendar-2" class="widget widget_calendar"><div id="calendar_wrap" class="calendar_wrap"><table id="wp-calendar" class="wp-calendar-table"><caption>2024年七月</caption><thead><tr><th scope="col" title="星期一">一</th><th scope="col" title="星期二">二</th><th scope="col" title="星期三">三</th><th scope="col" title="星期四">四</th><th scope="col" title="星期五">五</th><th scope="col" title="星期六">六</th><th scope="col" title="星期日">日</th></tr></thead><tbody><tr><td colspan="6" class="pad"> </td><td id="today">1</td></tr><tr><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td></tr><tr><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td></tr><tr><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td></tr><tr><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td></tr><tr><td>30</td><td class="pad" colspan="6"> </td></tr></tbody></table><nav aria-label="上个月及下个月" class="wp-calendar-nav"> <span class="wp-calendar-nav-prev"><a href="http://www.xu0.com/date/2024/06">« 6月</a></span> <span class="pad"> </span> <span class="wp-calendar-nav-next"> </span></nav></div></div></aside></div></div><div class="related-posts-grid"><h4 class="u-border-title">相关推荐</h4><div class="row"><div class="col-6 col-sm-3 col-md-3 mt-10 mb-10"><article class="post"><div class="entry-media"><div class="placeholder" style="padding-bottom: 66.666666666667%;"> <a href="http://www.xu0.com/82742.html"> <img class="lazyload" data-src="http://www.xu0.com/wp-content/uploads/2024/06/1718448344-8670e5947f7d8c9.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="【前端素材】推荐5种优质大数据分析展示页面网站设计（18）（附源码）"> </a></div></div><div class="entry-wrapper"><header class="entry-header"><h4 class="entry-title"><a href="http://www.xu0.com/82742.html" title="【前端素材】推荐5种优质大数据分析展示页面网站设计（18）（附源码）" rel="bookmark">【前端素材】推荐5种优质大数据分析展示页面网站设计（18）（附源码）</a></h4></header></div></article></div><div class="col-6 col-sm-3 col-md-3 mt-10 mb-10"><article class="post"><div class="entry-media"><div class="placeholder" style="padding-bottom: 66.666666666667%;"> <a href="http://www.xu0.com/138638.html"> <img class="lazyload" data-src="http://www.xu0.com/wp-content/uploads/2024/06/1718484165-5485fedfb84b858.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="探究前端的跑马灯效果是如何用css实现的"> </a></div></div><div class="entry-wrapper"><header class="entry-header"><h4 class="entry-title"><a href="http://www.xu0.com/138638.html" title="探究前端的跑马灯效果是如何用css实现的" rel="bookmark">探究前端的跑马灯效果是如何用css实现的</a></h4></header></div></article></div><div class="col-6 col-sm-3 col-md-3 mt-10 mb-10"><article class="post"><div class="entry-media"><div class="placeholder" style="padding-bottom: 66.666666666667%;"> <a href="http://www.xu0.com/6015.html"> <img class="lazyload" data-src="http://blog.csdn.net/aisheisadas/article/details/img/1.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="前端 ：用HTML和css制作一个小米官网的静态页面"> </a></div></div><div class="entry-wrapper"><header class="entry-header"><h4 class="entry-title"><a href="http://www.xu0.com/6015.html" title="前端 ：用HTML和css制作一个小米官网的静态页面" rel="bookmark">前端 ：用HTML和css制作一个小米官网的静态页面</a></h4></header></div></article></div><div class="col-6 col-sm-3 col-md-3 mt-10 mb-10"><article class="post"><div class="entry-media"><div class="placeholder" style="padding-bottom: 66.666666666667%;"> <a href="http://www.xu0.com/180549.html"> <img class="lazyload" data-src="http://www.xu0.com/wp-content/uploads/2024/06/1718568475-062173995daaf19.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="web布局——说清楚fixed布局"> </a></div></div><div class="entry-wrapper"><header class="entry-header"><h4 class="entry-title"><a href="http://www.xu0.com/180549.html" title="web布局——说清楚fixed布局" rel="bookmark">web布局——说清楚fixed布局</a></h4></header></div></article></div></div></div> E--></div><footer class="site-footer"><div class="container"><div class="footer-widget"><div class="row"><div class="col-xs-12 col-sm-6 col-md-3 widget--about"><div class="widget--content"><div class="footer--logo mb-20"> <img class="tap-logo" src="http://www.xu0.com/wp-content/uploads/2024/06/1718412997-7db64bdd170b2cd.png" data-dark="http://www.xu0.com/wp-content/uploads/2024/06/1718412997-7db64bdd170b2cd.png" alt="个人在线分享"></div><p class="mb-10">本站无任何商业行为</p></div></div><div class="col-xs-12 col-sm-3 col-md-2 col-md-offset-1 widget--links"><div class="widget--title"><h5>本站导航</h5></div><div class="widget--content"><ul class="list-unstyled mb-0"></ul></div></div><div class="col-xs-12 col-sm-3 col-md-2 widget--links"><div class="widget--title"><h5>友情链接</h5></div><div class="widget--content"><ul class="list-unstyled mb-0"></ul></div></div><div class="col-xs-12 col-sm-12 col-md-4 widget--newsletter"><div class="widget--title"><h5>快速搜索</h5></div><div class="widget--content"><form class="newsletter--form mb-30" action="http://www.xu0.com/" method="get"> <input type="text" class="form-control" name="s" placeholder="关键词"> <button type="submit"><i class="fa fa-arrow-right"></i></button></form><h6>本站由<a href="http://ritheme.com/" target="_blank" rel="noreferrer nofollow">RiPro主题</a>强力驱动</h6><h6><div class="payment"></div></h6></div></div></div></div><div class="site-info"> © 2018 Theme by - <a href="http://ritheme.com/" target="_blank" rel="noreferrer nofollow">本站无任何商业行为</a> & WordPress Theme. All rights reserved <a href="https://beian.miit.gov.cn" target="_blank" class="text">蒙ICP备2023002302号-2 <br></a><div class="footer-shouquan">「虚灵个人在线分享」 XU0.COM 提供免费学习资料分享，本站资料全部由网上搜集，仅供学习使用， 不得用来做违法违纪，如有侵权请联系，立即删除</div></div></div></footer><div class="dimmer"></div><div class="off-canvas"><div class="canvas-close"><i class="mdi mdi-close"></i></div><div class="logo-wrapper"> <a href="http://www.xu0.com/"> <img class="logo regular" src="http://www.xu0.com/wp-content/uploads/2024/06/1717773004-dc1d71bbb5c4d2a.png" alt="个人在线分享"> </a></div><div class="mobile-menu hidden-lg hidden-xl"></div><aside class="widget-area"></aside></div> <script defer src="data:text/javascript;base64,DQogICAgICAgIGNvbnNvbGUubG9nKCJcbiAlYyBSaVByby3lrZDkuLvpopggVjguMSAlYyBodHRwczovL3p5Zng4LmNuIFxuXG4iLCAiY29sb3I6ICNmYWRmYTM7IGJhY2tncm91bmQ6ICMwMzAzMDc7IHBhZGRpbmc6NXB4IDA7IiwgImJhY2tncm91bmQ6ICNmYWRmYTM7IHBhZGRpbmc6NXB4IDA7Iik7DQogICAgICAgIGNvbnNvbGUubG9nKCJTUUwg6K+35rGC5pWw77yaOTgiKTsNCiAgICAgICAgY29uc29sZS5sb2coIumhtemdoueUn+aIkOiAl+aXtu+8miAxNi43MTgwMiIpOw0KICAgIA=="></script> <script defer src="data:text/javascript;base64,alF1ZXJ5KGRvY3VtZW50KS5yZWFkeShmdW5jdGlvbigkKXskKCcuY3QgaDMgc3BhbicpLmNsaWNrKGZ1bmN0aW9uKCl7JCh0aGlzKS5hZGRDbGFzcygic2VsZWN0ZWQiKS5zaWJsaW5ncygpLnJlbW92ZUNsYXNzKCk7JCgnLmN0ID4gdWwnKS5lcSgkKHRoaXMpLmluZGV4KCkpLmFkZENsYXNzKCdzaG93Jyk7JCgnLmN0ID4gdWwnKS5lcSgkKHRoaXMpLmluZGV4KCkpLnNpYmxpbmdzKCkucmVtb3ZlQ2xhc3MoJ3Nob3cnKTt9KTskKCJwcmUgPiBjb2RlIikuYWRkQ2xhc3MoImxhbmd1YWdlLXBocCIpO30pO2pRdWVyeSgiLmhlYWRlci1kcm9wZG93biIpLmhvdmVyKGZ1bmN0aW9uKCl7alF1ZXJ5KHRoaXMpLmFkZENsYXNzKCdhY3RpdmUnKTt9LGZ1bmN0aW9uKCl7alF1ZXJ5KHRoaXMpLnJlbW92ZUNsYXNzKCdhY3RpdmUnKTt9KTskKCcuaC1zY3JlZW4gbGknKS5jbGljayhmdW5jdGlvbigpeyQodGhpcykuYWRkQ2xhc3MoIm9uIikuc2libGluZ3MoKS5yZW1vdmVDbGFzcygpOyQoJy5jdCA+IHVsJykuZXEoJCh0aGlzKS5pbmRleCgpKS5hZGRDbGFzcygnc2hvdycpOyQoJy5jdCA+IHVsJykuZXEoJCh0aGlzKS5pbmRleCgpKS5zaWJsaW5ncygpLnJlbW92ZUNsYXNzKCdzaG93Jyk7fSk7JCgiLmgtc291cCBsaSBpIikuY2xpY2soZnVuY3Rpb24oKXt2YXIgc291cEJ0bj0kKHRoaXMpLnBhcmVudCgpOyQoIi5oLXNvdXAgbGkiKS5yZW1vdmVDbGFzcygib3BlbiIpO3NvdXBCdG4uYWRkQ2xhc3MoIm9wZW4iKTt9KTs="></script> <script defer src="data:text/javascript;base64,JChmdW5jdGlvbigpe3ZhciBuYXZIZWlnaHQ9JCgiI25hdkhlaWdodCIpLm9mZnNldCgpLnRvcDt2YXIgbmF2Rml4PSQoIiNuYXZIZWlnaHQiKTtpZihuYXZIZWlnaHQ+MzYpe25hdkZpeC5hZGRDbGFzcygibmF2Rml4Iik7fQp3aW5kb3cub25zY3JvbGw9ZnVuY3Rpb24oKXtpZigkKHRoaXMpLnNjcm9sbFRvcCgpPm5hdkhlaWdodHx8JCh0aGlzKS5zY3JvbGxUb3AoKT4zNyl7bmF2Rml4LmFkZENsYXNzKCJuYXZGaXgiKTt9ZWxzZXtuYXZGaXgucmVtb3ZlQ2xhc3MoIm5hdkZpeCIpO319fSkKJChkb2N1bWVudCkucmVhZHkoZnVuY3Rpb24oKXt9KQp2YXIgbmR0PSQoIiNoZWxwIGR0Iik7dmFyIG5kZD0kKCIjaGVscCBkZCIpO25kZC5lcSgwKS5zaG93KCk7bmR0LmNsaWNrKGZ1bmN0aW9uKCl7bmRkLmhpZGUoKTskKHRoaXMpLm5leHQoKS5zaG93KCk7fSk7"></script> <script defer type='text/javascript' src='http://www.xu0.com/wp-content/cache/autoptimize/js/autoptimize_single_27154160b5352fe140fcf82df293b2c3.js?ver=2.0'></script> <script defer type='text/javascript' src='http://www.xu0.com/wp-content/cache/autoptimize/js/autoptimize_single_f4168d76f155c6b079459b12937ec426.js?ver=8.1'></script> <script defer src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgY2Fvemh1dGkgPSB7InNpdGVfbmFtZSI6Ilx1NGUyYVx1NGViYVx1NTcyOFx1N2ViZlx1NTIwNlx1NGVhYiIsImhvbWVfdXJsIjoiaHR0cDpcL1wvd3d3Lnh1MC5jb20iLCJhamF4dXJsIjoiaHR0cDpcL1wvd3d3Lnh1MC5jb21cL3dwLWFkbWluXC9hZG1pbi1hamF4LnBocCIsImlzX3Npbmd1bGFyIjoiMSIsInRlbmNlbnRfY2FwdGNoYSI6eyJpcyI6IiIsImFwcGlkIjoiIn0sImluZmluaXRlX2xvYWQiOiJcdTUyYTBcdThmN2RcdTY2ZjRcdTU5MWEiLCJpbmZpbml0ZV9sb2FkaW5nIjoiPGkgY2xhc3M9XCJmYSBmYS1zcGlubmVyIGZhLXNwaW5cIj48XC9pPiBcdTUyYTBcdThmN2RcdTRlMmQuLi4iLCJzaXRlX25vdGljZSI6eyJpcyI6IjAiLCJjb2xvciI6InJnYigzMywgMTUwLCAyNDMpIiwiaHRtbCI6IjxkaXYgY2xhc3M9XCJub3RpZnktY29udGVudFwiPjxoMz5SaVByb1x1NjcwMFx1NjViMFx1NzI0OFx1NjcyY1x1NjZmNFx1NjViMFx1NjVlNVx1NWZkNzxcL2gzPjxkaXY+XHU4ZmQ5XHU2NjJmXHU0ZTAwXHU2NzYxXHU3ZjUxXHU3YWQ5XHU1MTZjXHU1NDRhXHVmZjBjXHU1M2VmXHU1NzI4XHU1NDBlXHU1M2YwXHU1ZjAwXHU1NDJmXHU2MjE2XHU1MTczXHU5NWVkXHVmZjBjXHU1M2VmXHU4MWVhXHU1YjlhXHU0ZTQ5XHU4MGNjXHU2NjZmXHU5ODljXHU4MjcyXHVmZjBjXHU2ODA3XHU5ODk4XHVmZjBjXHU1MTg1XHU1YmI5XHVmZjBjXHU3NTI4XHU2MjM3XHU5OTk2XHU2YjIxXHU2MjUzXHU1ZjAwXHU1MTczXHU5NWVkXHU1NDBlXHU0ZTBkXHU1MThkXHU5MWNkXHU1OTBkXHU1ZjM5XHU1MWZhXHVmZjBjXHU2YjY0XHU1OTA0XHU1M2VmXHU0ZjdmXHU3NTI4aHRtbFx1NjgwN1x1N2I3ZS4uLjxcL2Rpdj48XC9kaXY+In0sInBheV90eXBlX2h0bWwiOnsiaHRtbCI6IjxkaXYgY2xhc3M9XCJwYXktYnV0dG9uLWJveFwiPjxcL2Rpdj48cCBzdHlsZT1cImZvbnQtc2l6ZTogMTNweDsgcGFkZGluZzogMDsgbWFyZ2luOiAwO1wiPlx1NTE0ZFx1OGQzOVx1NjIxNlx1OTRiYlx1NzdmM1x1NTE0ZFx1OGQzOVx1OGQ0NFx1NmU5MFx1NGVjNVx1OTY1MFx1NGY1OVx1OTg5ZFx1NjUyZlx1NGVkODxcL3A+IiwiYWxpcGF5IjowLCJ3ZWl4aW5wYXkiOjB9fTsKLyogXV0+ICovCg=="></script> <script defer type='text/javascript' src='http://www.xu0.com/wp-content/cache/autoptimize/js/autoptimize_single_3d63ae9fc20c9541c081782157cba6ee.js?ver=8.1'></script> <script defer type='text/javascript' src='http://www.xu0.com/wp-content/themes/ripro/assets/js/plugins/jquery.fancybox.min.js?ver=8.1'></script> <script defer src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgc29jaWFsUm9ja2V0ID0geyJhamF4X3VybCI6Imh0dHA6XC9cL3d3dy54dTAuY29tXC93cC1hZG1pblwvYWRtaW4tYWpheC5waHAiLCJ3aGVyZV93ZV9hdCI6eyJpZCI6MjA4OTk1LCJ0eXBlIjoicG9zdCIsInVybCI6Imh0dHA6XC9cL3d3dy54dTAuY29tOjgxXC8yMDg5OTUuaHRtbCIsInNldHRpbmdzX2tleSI6InBvc3RfdHlwZV9wb3N0In19OwovKiBdXT4gKi8K"></script> <script defer type='text/javascript' src='http://www.xu0.com/wp-content/cache/autoptimize/js/autoptimize_single_1d5d2ad4f5dbdf913ba6de4401f4735d.js?ver=1.3.4'></script> <script defer type='text/javascript' src='http://www.xu0.com/wp-content/cache/autoptimize/js/autoptimize_single_da7438dbb3b8b182b57a5e1060df6f34.js?ver=8.1'></script> <script defer type='text/javascript' src='http://www.xu0.com/wp-content/themes/ripro-child/assets/js/pace.min.js?ver=8.1'></script> <script defer type='text/javascript' src='http://www.xu0.com/wp-content/cache/autoptimize/js/autoptimize_single_da612dba276a3e4d6ce92172f36c2e3b.js?ver=8.1'></script> <script defer type='text/javascript' src='http://www.xu0.com/wp-content/themes/ripro-child/assets/js/swiper.min.js?ver=8.1'></script> <script defer type='text/javascript' src='http://www.xu0.com/wp-content/cache/autoptimize/js/autoptimize_single_a286291139f4b6620b3a05c35bfc300c.js'></script> <script defer type='text/javascript' src='http://www.xu0.com/wp-content/cache/autoptimize/js/autoptimize_single_6223ec2de1bab9aaa9718f10b8bdd3bf.js'></script> <script defer type='text/javascript' src='http://www.xu0.com/wp-content/cache/autoptimize/js/autoptimize_single_348a660b84948fec7cb3af646936d009.js'></script> </body></html><!-- WP Fastest Cache file was created in 17.426239967346 seconds, on 01-07-24 23:07:03 -->