可搜索性：使用明确定义的名称可以使搜索和重构CSS代码更高效和节省时间。 可维护性和可扩展性：遵循命名约定后，CSS元素可以轻松地进行修改或修复错误。可以对现有代码进行新功能或改进，而不会引入错误。...减少错误和漏洞：通过命名约定，可以针对特定元素及其属性声明类，减少在CSS属性没有明确名称的情况下出现错误的可能性，开发人员可能会误用或误解其目的。...避免使用过长的名称，这可能会使使用或阅读变得困难。类名还应具有连贯性，连接兄弟元素或显示父子元素之间的关系。 避免过度嵌套：在为类分配名称时，命名模式应保持浅层，并且选择器不应过度嵌套。...important 行为修饰符对应用到的元素强制执行严格的行为，并覆盖任何更改。过度使用可能会导致冲突，使得更新现有样式变得困难，因为具有 !important 修饰符的属性占主导地位。...状态（State）：状态类别包含其他类名的行为属性，并可根据指定的条件修改它们的外观。这包括处理悬停、激活、禁用或隐藏元素的样式。 主题（Theme）：这个最后的类别涉及使用样式来为项目应用颜色主题。
在网页设计与开发中，HTML作为构建内容的基础，其元素根据显示特性的不同被分为两大类：块级元素（Block-level Elements）和内联元素（Inline Elements）。...二、块级与内联元素的常见问题及易错点 1. 不恰当的元素选择 错误地使用块级元素来包裹内联内容或反之，会导致布局混乱。...缺乏对元素转换的认知 有时候，开发者可能需要改变元素的默认行为，如将内联元素表现为块级元素，或反之。不了解display属性的使用方法，可能会导致布局调整困难。 三、如何避免这些问题 1....清除默认样式 在开始布局之前，建议通过CSS重置或 Normalize.css 来清除浏览器的默认样式，确保所有元素在不同浏览器中表现一致。 3....灵活运用display属性 转换块级元素为内联：使用display: inline;可以让块级元素像内联元素一样显示。
对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。...--这里是注释============这里是注释--> 6、所有标签的元素和属性名字都必须使用小写 与HTML不一样，XHTML对大小写是敏感的，和是不同的标签。...7、所有属性值必须用引号括起来（”” ”）双引号或单引号 8、把所有特殊符号用编码表示 空格为 、小于号（）>、和号（&）&等。...同理添加文字链接的title属性，帮助显示不完整的内容显示完整 13、在form表单中增加label，以增加用户友好度 使用总结 1、标签规范可以提高搜索引擎对页面的抓取效率，对SEO（搜索引擎优化）很有帮助...2、尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
渲染引擎 负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。...浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。 3....（4）怪异模式，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 不存在或格式不正确会导致文档以怪异模式呈现。 六、渐进增强 1....（4）属性值使用双引号。一旦遇到错误，立刻停止解析，并显示错误信息。 2. HTML 可兼容各大浏览器、手机以及 PDA，并且浏览器也能快速正确地编译网页。 十二、<!...十七、初始化CSS样式 （1）浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
创建 Web 页面或 App 等前端界面呈现给用户的过程，实现互联网产品的用户界面交互 Web 标准：结构、样式和行为。W3C 对其进行规范。...image-20211009150053255 盒模型的各个部分 CSS中组成一个块级盒子需要: Content box: 这个区域是用来显示内容，大小可以通过设置 width和 height。...这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为: 一个被定义成块级的（block）盒子会表现出以下行为: 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽...如果一个盒子对外显示为 inline，那么他的行为如下: 盒子不会产生换行。 width 和 height 属性将不起作用。...如果 JavaScript 在 HTML 和 CSS 就位之前加载运行，就会引发错误。
当要设置的属性值能自动继承并且父元素有相应的定义值时，该元素会继承父元素的值，即行为与`inherit`相同 2....当要设置的属性值不能自动继承或者父元素没有相应值的定义，该元素会使用默认（初始）值，即行为与`initial`相同 # CSS 工作流程 # CSS 盒模型 # width、height、padding...、隐藏溢出内容、对溢出内容增加滚动条 # 块级 & 行级 块级盒子 行级盒子 在常规流中不和其他盒子并列摆放 和其他行级盒子一起放在一行或拆开成多行 适用所有的盒模型属性 盒模型中的 width、height...块级元素或行级元素也可以通过 display: inline/display: block 改变默认行为（变成行级 / 块级盒子）。...，但是其内部文字依然是默认使用行级盒子 # CSS 布局 CSS 中的布局分为三套不同的模式：常规流、浮动、绝对定位 常规流中包括：行级、块级、表格布局、FlexBox、Grid 布局 # 常规流 Normal
网页三大元素 HTML：网页的基本结构 CSS：网页的展示效果 JS：网页的功能与行为 HTML 简介 HTML(HyperText MarkupLanguage 超文本标记语言),用于构建网页 超文本...> 可执行脚本 属性 defer：立即下载，延迟执行，表示脚本可以等到 dom 被完全解析和显示之后在执行...图像无法加载时(网络错误、内容被屏蔽或链接过期时)，浏览器会在⻚面上显示alt属性中的文本 decoding 解码方式：异步、同步 loading 懒加载 元素通过包含零或多个 元素和一个 元素来为不同的显示/设备场景提供相应的图像版本 media 属性：依据的媒体条件渲染相应的图片，类似媒体查询 type 属性：MIME 类型，根据浏览器支持性渲染相应的图片...(不同格式、清晰度，读取失败或无法解码时可以依次尝试) THML 解析 DOM (文档对象模型)：对节点结构化表述，并定义了一种方式可以使程序对该结构进行访问，将web⻚面和脚本语言连接起来 构建DOM
[image-20200530175055609.png] 简易：标签名为英文单词或简写，方便联想记忆。 下面介绍常用标签： HTML中，使用表示注释，不会显示在页面中。...属性用于改变标签的样式或行为，一个标签可以设置多个属性。...语法为： 由于很多属性可用CSS或JS替代，此处了解常用属性即可，不同标签具有的属性也不同。 2....2.3 样式 CSS可以控制布局、块（元素）、内容（块内的文字、图片）等样式，以及增加动画效果。 下面介绍CSS常用的样式： CSS中，注释用/ 注释内容 /表示。...HTML：结构层， 定义网页结构和内容 CSS：表现层，定义网站的样式和动画 JS：行为层，定义网站的交互行为 开发网站时，三层通常按照顺序开发，必须先有html，定义好网站的结构和内容，再用CSS美化网站
内联盒子 描述: 在 CSS 中我们广泛地使用两种“盒子, box”,即块级盒子 (block box) 和 内联盒子 (inline box),这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为...描述: CSS display 属性设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式Flow布局、网格Grids布局或弹性Flexible布局。... 总结: display 属性可以改变盒子的外部显示类型是块级还是内联，这将会改变它与布局中的其他元素的显示方式。...对于浮动元素、绝对定位元素、内联块元素或者有边框、内边距或清除浮动的元素，外边距合并的规则会有所不同。...padding-内边距 描述: 内边距位于边框和内容区域之间, 与外边距不同其值必须是 0 或正的值，不能有负数的内边距；应用于元素的任何背景都将显示在内边距后面，内边距通常用于将内容推离边框。
②对于css和js，尽量使用外链css样式表和js脚本，使结构，表现和行为分为三块，提高页面渲染速度，提高用户体验，尽量少用行间样式表，使结构与表现分离，标签的id和class等属性名要做到见文知意。...块级元素有哪些?CSS的盒模型?...①内联方式（很糟糕的书写方式） 直接在html标签中的style属性中添加css。...结构层HTML，表示层CSS，行为层JS 网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。...优点：面对不同分辨率设备，灵活性强，能够快捷地解决设备显示适应问题。
CSS 将 HTML 文档中的每个元素视为一个”框”或”盒”，其中包含一系列不同的属性，用于确定它在页面上的显示位置。...本章介绍了 CSS 框模型的核心组件: 填充，边框，边距，Block boxes 和 Inline boxes。可以将此视为 CSS 布局的”微观”视图，因为它定义了框的个别行为。...Inline boxes 不会影响垂直间距，它们不是用于确定布局，只是用于构建块内的样式 Inline boxes 的宽度基于其所容纳的内容，而与父容器的宽度无关 改变 Box 的行为 我们可以使用...CSS display 属性覆盖 HTML 元素的默认 box 类型。...我们可以通过修改 box-sizing 属性，使其变为不同的 Boxes。
4、CSS定义 CSS必须要用开头来定义，为保证各浏览器的兼容性，在写CSS时请都写上数量单位，例如：错误：.space_10{padding-left:10...–这里是注释============这里是注释–> 6、所有标签的元素和属性名字都必须使用小写 与HTML不一样，XHTML对大小写是敏感的，和是不同的标签。...6、所有属性值必须用引号括起来（”” ”）双引号或单引号 7、把所有特殊符号用编码表示 空格为 、小于号（）>、和号（&）&等。...同理添加文字链接的title属性，帮助显示不完整的内容显示完整。...2、尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
a:alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。...由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异 但是初始化CSS会对搜索引擎优化造成小影响 34. BFC是什么?...（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 （4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 44. 行内元素有哪些？...Css的初始化，取消浏览器的css的默认样式 * IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。...盒子模型 渲染模式的不同 使用 window.top.document.compatMode 可显示为什么模式 54. CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？
在标准模式下，行为即（但愿如此）由 HTML 与 CSS 的规范描述的行为。 使用时需要注意什么？...单纯的HTML代码是不带任何样式的只是用来标记这一段是标题、这一块是代码、那一个是要强调的内容等等，但是为什么我们只写HTML在浏览器中不同的标签也是有不同的样式呢？...4.提升用户体验，例如title、alt可用于解释名词或解释图片信息。 5.网页加载慢导致CSS文件还未加载时（没有CSS），页面仍然清晰、可读、好看。...是否允许用户进行缩放，值为"no"或"yes" 使用 data-* 属性有什么用？...白屏 不同浏览器对 CSS 和 HTML 的处理方式不同，有的是等待 CSS 加载完成之后，对 HTML 元素进行渲染和展示。 白屏不是bug，而是由于浏览器的渲染机制。
前言 前几天写了 CSS更改网站字体 这篇文章之后有人问我网站什么字体，我就把css发了过去，于是今天想写一篇关于网页使用第三方字体的详细讲解。...再来讲解一下相关属性与参数 font-display属性 font-display 属性决定了一个 @font-face 在不同的下载时间和可用时间下是如何展示的。...字体显示时间线基于一个计时器，该计时器在用户代理尝试使用给定下载字体的那一刻开始。时间线分为三个时间段，在这三个时间段中指定使用字体的元素的渲染行为。...参数 auto ：使用浏览器默认的行为； block ：浏览器首先使用隐形文字替代页面上的文字，并等待字体加载完成再显示； swap ：如果设定的字体还未可用，浏览器将首先使用备用字体显示，...当设定的字体加载完成后替换备用字体； fallback ：与 swap 属性值行为上大致相同，但浏览器会给设定的字体设定加载的时间限制，一旦加载所需的时长大于这个限制，设定的字体将不会替换备用字体进行显示
优先级问题 最近原则:不同的导入方式中,如果有属性一样的样式,那个方式里此html元素近就用那种方式定义的样式. 4.CSS选择器 css选择器主要是用于选择需要添加样式的html元素。...在支持css的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。...分类 CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。...除法特殊行为 如果结果太大或太小，那么生成的结果是 Infinity 或 -Infinity。 如果某个运算数是 NaN，结果为 NaN。...Infinity 被 0 以外的任何数字除，结果为 Infinity 或 -Infinity。 取模（余）特殊行为 如果被除数是 Infinity，或除数是 0，结果为 NaN。
HTML由一系列元素组成，您可以使用这些元素来包含或包装内容的不同部分，以使其以某种方式显示或以某种方式执行。...封闭的标签可以使单词或图像超链接到其他位置，可以斜体化单词，可以使字体变大或变小，等等； 例如，以以下内容行为例： My cat is very grumpy 如果我们希望该行独立存在，我们可以通过将其括在段落标记中来指定它是一个段落...元素的属性： 属性包含有关元素的额外信息，如果不希望这些元素显示在实际内容中。此处是属性名称，并且是属性值。...： 它与元素名称（或上一个属性，如果元素已具有一个或多个属性）之间的空格。...如果由于某种原因无法加载图像，普通浏览器也会在页面上显示alt 属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期时； title：属性写文本用于鼠标悬浮在图片上之后提示的文本信息； height
该属性提供了五个可选值： auto ：这是默认值，它的行为就好像该属性未被使用。浏览器使用自定义字体隐藏文本，直到字体加载完成后再显示文本。...它提供了一种创建平滑且精确的滚动行为的方式，特别适用于需要滚动浏览一系列项目或部分的情况。 scroll-snap 属性有多个子属性，用于控制滚动行为的不同方面。...block ：快照行为应用于块轴（垂直滚动）。 inline ：快照行为应用于内联轴（水平滚动）。...8. writing-mode writing-mode 属性允许我们控制文本的排列方式，无论是水平还是垂直，并确定块的进展方向。虽然这不是一个全新的属性，但对许多开发人员来说仍然不太熟悉。...需要注意的是， writing-mode 的影响在英语等语言中可能不会立即显现，但在需要垂直或横向排列的语言中，它变得更加重要。为了全面了解这个属性，建议尝试使用不同的语言和文本布局。
多个背景图像 将多个背景图像应用于具有不同属性的元素。...文本对齐 此属性控制文本对齐行为，指定是否应使用字间或字符间间距进行文本对齐。...首字母 将块元素的第一个字母或首字母字符设计为装饰性首字下沉或其他视觉上突出的首字母字符。...内容可见性 内容可见性允许您控制屏幕外或隐藏内容的渲染行为，通过跳过隐藏元素的布局和绘制阶段来提高渲染性能。...文字装饰风格 text-decoration-style 指定用于文本装饰的线条样式，允许您选择不同的线条样式，例如实线、双线、点线或虚线。
| 小爱 1、Display 指定元素的显示行为。...它需要许多不同的值，但坦率地说，在大多数情况下你将只使用 4 个值。 block：CSS 中的块级元素，它占用尽可能多的空间，但它们不能放置在同一水平线上。...开发人员主要使用块级元素来简化布局过程，因为他们能够改变他们选择的元素的宽度和高度。 inline：这是默认值，如果没有指定任何其他显示值，元素可以并排放置在与内联元素相同的水平线上。...你需要了解 4 种主要类型的背景属性： background-color：应用元素的背景颜色，并采用十六进制或 RGB 值。...如果你想掌握一些布局技巧，这个 CSS 属性是非常重要的，因为大多数时候开发人员会在 CSS 中定位元素，使用正确的定位值可以轻松完成工作。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
