class 属性可为元素提供一个标识名称，以便进一步为元素指定样式或进行其他操作时使用。 属性应该包含： 在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。...块级元素,内联元素和可变元素 1.块状元素（block element） 块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，常用的块状元素包块div,dl,dt,dd,ol,ul,(...Block: 块级元素，可以设置宽高，独占一行。 Inline: 内联元素， inline-block：既能设置宽高 有能一行显示。 空元素 不包含任何内容的元素称为空元素。...| | | 代表关于文档元数据的一个集合，包括脚本或样式表的链接或内容。 | | | 定义文档的标题，将显示在浏览器的标题栏或标签页上。...| | | 代表一段没有特殊含义的文本，当其他语义元素都不适合文本时候可以使用该元素。 | | | 代表_换行_ 。 | | | 代表一张_图片_ 。
整体设计 整体颜色设计基本不变，为了优化整体的样式统一性，主要改动点如下： 移除副色调 hover 样式，使用下划线高亮 hover 可点击元素 调整全局背景色 调整卡片背景色为半透明，配合 CSS backdrop-filter...属性实现毛玻璃效果 为减小 CSS 文件大小，移除使用的 Bulma 和 Primer CSS 框架，全部样式均为自定义。...模块和设计相关 列表 文章列表添加字数和阅读时间显示，移动端隐藏 笔记列表样式完全重写 友链列表样式完全重写 侧边栏 移除侧边栏的 Firefox 和 Mozilla 广告 移除由 Vue.js 构建的自定义搜索...两个模块，便于选择性插入对应的 CSS 和 JS 模板传参全面改为使用 scratch 添加通用 pagination 模板 Lazyload 图片通过内置函数获取长宽比，并用内联样式进行懒加载占位渲染...规范相关 外置 JS 脚本全部使用自定义动态 loader 加载 各模块需要的 DOM 相关属性名定义在各模块内部
我们可以使用hugo new命令生成新内容，然后使用命令后跟我们要生成的内容的路径。默认情况下，Hugo内容是用Markdown编写的。...默认情况下包含的前端内容通常由您正在使用的主题定义。 我们当前的主题包括生成页面的前面三个项目。您可以根据需要调整这些或添加其他项目。 Hugo可用的一般变量可以在这里找到。...这将被翻译为正文HTML文本。我们将添加一些段落，一个标题。...，并呈现将向访问者显示的实际HTML页面。...我们的Pygments样式已应用于代码块： 如果我们点击“关于”链接，我们将进入“关于我”页面： 如您所见，我们的主题相当基本，但它的功能与我们预期的完全相同。
PaperMod， 然后在themes文件夹下会出现如下文件目录： image.png 使用该主题的方法就是在站点配置文件输入主题的名字: theme: PaperMod # 主题名字，和themes文件夹下的一致...然后把主题里面的一些静态文件和配置文件复制到站点目录下，目的是为了可以自定义博客的样式，而不会改动主题文件夹里的样式，这样主题要更新的时候，直接在主题目录下git pull就可以，站点目录的修改会优先覆盖主题里的配置...# hl_Lines：高亮的行号，一般这个不设置，因为每个代码块我们可能希望让高亮的地方不一样。 # lineNoStart：行号从编号几开始，一般从 1 开始。...# noClasses：使用 class 标签，而不是内嵌的内联样式 privacy: vimeo: disabled: false simple...hugo的生成方式只会往public文件夹里添加内容，但是不会删除外部已经不存在而public里面还存在的文件， 所以我一般用hugo -F --cleanDestinationDir命令，表示每次生成的
例如，添加紫色和font-family verdana 的样式元素将如下所示： 这是在HTML中添加段落的方法... 另一个属性，HTML 类，对于开发和编程来说是最重要的。class 属性添加了可以作用于具有相同类值的不同元素的样式信息。 例如，我们将对标题 和段落使用相同的样式。...样式包括背景颜色、文本颜色、边框、边距和填充，在 .important 类下。...尽管现代浏览器不再支持其中一些标签，但学习所有可用的不同元素仍然是有益的。 本节将讨论最常用的 HTML 标签和两个主要元素——块级元素和内联元素。 块级元素 块级元素占据页面的整个宽度。...内联元素 内联元素格式化块级元素的内部内容，例如添加链接和强调的字符串。内联元素最常用于在不破坏内容流的情况下格式化文本。
简述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表【.css文件、css区域】中 样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题...导入css的方式 分为内联（写在标签内），内部（写在html文件内），外部（写在html文件外，通过标签导入） 优先级按“就近原则”：内联样式表>内部样式表>外部样式表 4.1 内联样式表...一般情况下，这种方式只有在一个标签上只应用一次样式时才会使用 4.2 内部样式表 我们可以使用标签在html文档的中来定义样式表。 例如: ?...若采用内部样式，则你需要写20个相同的样式分别放在每个网页的头部 若采用外部样式，则你只需要写一个，然后在20个里面导入样式即可 样式不应当与html耦合 5. css选择器 css选择器主要是用于选择需要添加样式的...5.3 元素选择器 文档中的元素就是选择器 ? 5.4 属性选择器 ? 5.5 伪类 css伪类用于向某些选择器添加特殊效果。
2、q、blockquote对文本进行引用 标签是对短文本进行引用，其样式是对文本添加双引号，标签是对长文本进行引用，其样式是对文本进行缩进。...） 可以使用text-align样式代码为块状元素中的文本、图片设置居中样式。...，元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。...常见的内联块级元素有：、 总结：每一种类型的元素都可以通过代码来设置成其他类型元素，比如你可以使用display:block将元素设置成块级元素，使用display:inline...将元素设置成内联元素，使用display:inline-block将元素设置成内联块级元素。
Bootstrap 表单 在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。...向所有的文本元素 、 和 添加 class ="form-control" 。...在使用内联表单时，您需要在表单控件上设置一个宽度。 使用 class .sr-only，您可以隐藏内联表单的标签。 水平表单 水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。...Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。...为了添加一个占用整个宽度的内容块，请在 后使用 .help-block。
; 1、特征： 1.1 块级元素在一行显示 （得到内联元素的属性） 1.2 内联元素支持宽高 （得到块的属性）... 浮动特征：具有且不仅仅有 内联块 inline-block 的特征 1.1.1 块级元素在一行显示 1.1.2 内联元素支持宽高...第二个div用margin-left设置，让其在视觉上不被遮挡 3.2 当浮动元素相邻的下一个块级元素包含文本内容时，浮动元素没有覆盖文本，而是浮动在文本的左边 ...: inline-block; 1、特征： 1.1 块级元素在一行显示 （得到内联元素的属性） 1.2 内联元素支持宽高...第二个div用margin-left设置，让其在视觉上不被遮挡 3.2 当浮动元素相邻的下一个块级元素包含文本内容时，浮动元素没有覆盖文本，而是浮动在文本的左边
HTML 块和内联 在 HTML 中，您主要会遇到两种类型的 HTML 元素： 块元素用于通过将内容划分为连贯的块来构造页面的主要部分。...>）都是 的后代； 块元素和内联元素嵌套 块元素可以包含块元素或内联元素。... 增加文字大小 带有删除线的渲染文本 也可以使用几个 HTML 属性： bgcolor 在元素上定义背景色 text 定义文字颜色 几个margin属性可用于在元素的任何一侧添加间隔的空间...它们主要是文本属性： 文字颜色 字体（大小/ 字体 Family/ 样式/ 粗细） 行高 “一些 HTML 元素不会从其祖先那里继承。例如，链接（ 标签）不继承该color属性。...red important">，而是在语义上更具描述性； 不要使用像这样的内联样式 CSS 常用属性一览表
一个完整的网页是由HTML（超文本标记语言），css（层叠样式表）JavaScript(动态脚本语言)三部分组成....DOCTYPEhtml> HTML也有多个不同的版本,只有完全明白页面中使用确切HTML版本，浏览器才能正确的显示HTML页面,这就是用处....什么是标签： 1·有尖括号包围的关键词 2·通常是成对出现的 3·也有单独呈现的标签,如：等..... 4·标签不区分大小写和推荐使用小写...>:为文字加上一条中线（内联标签） :文字变成斜体（内联标签） :上角标（内联标签） :下角标（内联标签） :元素包含的内容,在显示格式上没有任何变化,没有应为插入...,形成一个一个“块”,因此也被称作“块级元素”（块级标签） 常见的块状标签： address - 地址 block - 块引用 center - 居中对齐块(不推荐)
为表格添加标题文本 ......认识CSS样式： CSS：层叠样式表（Cascading Style Sheets），主要用于定义HTML内容在浏览器内的显示样式 语法： 选择符{ 属性: 值}...CSS 伪类选择符 伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色 a:hover{color...3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。 ...块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100% 第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示
与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记（markup）进行标识。...(默认占用浏览器的最大宽度，只有块级标签可以设置长度和宽度) 内联标签也叫行内标签（inline）：按内容扩展 b em sup sub span a ( 默认文本内容有多长就占用多大的长度...主要通过CSS样式为其赋予不同的表现。 span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。...注意： 关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。 p标签不能包含块级标签。...name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 novalidate 规定浏览器不验证表单。
二 引入方式 （1）行内式：在标记的style属性中设置CSS样式，不推荐使用。 如果以上几种方式同时使用，采取就近原则，离标签最近的样式将被适用。...外边距和内边距 在html中一切皆盒子。...块级元素可以嵌套内联元素或者某些块级元素，内联元素不能包含块级元素而只能包含其他内联元素； 2. h1, h2, h3, h4, h5, h6 p, dt这些块级元素只能包含内联元素； 3. li...块级元素应该与块级元素并列， 内联元素与内联元素并列；
HTML5（纯文本类型的语言）、CSS3（层叠样式表）和JavaScript（网页设计的一种脚本语言） 1-2 概述HTML5文件的基本结构。 一个HTML5文件由一些元素和标签组成。...元素是HTML5文件的重要组成部分，例如title（文件标题）、img（图片）及table（表格）等。元素名不区分大小写，HTML5用标签来规定元素的属性和它在文件中的位置。...1、在默认情况下，每个块状元素从新的一行开始，其后面的元素另起一行； 2、在默认情况下，块状元素是自上而下垂直排列，且每个块状元素独占一行； 3、块状元素一般都作为其他元素的容器，可以容纳内联元素和其他块状元素...4、块状元素的高度，行高及其外边距和内边距都可以通过CSS属性来控制和调整！ 5、在不设置宽度的情况下，块级元素的宽度则和它的父级元素的宽度一致。...6、在不设置高度的情况下，块级元素的高度则和它的父级元素的高度一致。 ❝ 块状元素❞ 内联元素 指本身属性为display:inline的元素，其宽度随元素的内容而变化。
CSS 声明块与选择器配对，以生成 CSS 规则集 。 1.1 HTML中引入CSS的方式 外部样式，link标签将外部样式表链接到页面。...--不推荐此方式，因为在一个站点里，在需要更改 CSS 时修需要改每个页面文件。--> 内联样式表存在于 HTML 元素的 style 属性之中，每个 CSS 表只影响一个元素。...--此方式难以维护（在需要更新时，你必须在修改同一个文档的多处地方）--> 注：样式优先级别:内联样式>内部样式>外部样式 根据样式的引入先后顺序，后引入会覆盖前面的样式 1.2 常用样式属性 字体相关属性...=val] 属性以指定值结尾的元素 3 [attr~=val] 属性包含指定值(完整单词)的元素(不推荐使用) 2 [attr|=val] 属性以指定值(完整单词)开头的元素(不推荐使用) 2 2.9...： 块级盒子（block） 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽 每个盒子都会换行 width 和 height 属性可以发挥作用 内边距
text-decoration：文本装饰 下划线 : underline 删除线 :line-through 上划线 : overline 不添加任何装饰 : none...内联标签之间会有空隙，原因：换行产生的 inline-block : input、select … 贴在一起，但是支持宽高 注：布局一般用块标签，修饰文本一般用内联标签 按内容 Flow：流内容...left、top、right、bottom是相对于当前元素自身进行偏移的 absolute： 使元素完全脱离文档流（类似于浮动） 使内联元素支持宽高 （让内联具备块特性） 使块元素默认宽根据内容决定（...让块具备内联的特性）。...） 使块元素默认宽根据内容决定（让块具备内联的特性） 相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响 BFC规范 BFC即Block Formatting Contexts(块级格式化上下文
理解这两者的区别及正确使用它们，对于构建结构清晰、布局合理的网页至关重要。 一、块级元素与内联元素概述 块级元素 块级元素在页面中独占一行，其宽度默认为100%，可以设置宽高，并且会自动换行。...常见的内联元素有、、、、等。它们主要用于文本样式和链接的处理。 二、块级与内联元素的常见问题及易错点 1....不恰当的元素选择 错误地使用块级元素来包裹内联内容或反之，会导致布局混乱。...正确选择元素 在编写HTML时，应根据内容的语义来选择合适的元素。例如，对于段落文本使用，对于列表使用或，对于链接使用，这样既保证了语义的清晰，也有利于SEO和可访问性。...: inline;">原本为块级的现在表现为内联 四、总结 理解并熟练掌握块级元素与内联元素的特性和使用，是每一位前端开发者的基本功。
与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。 2、可以使用类选择器词列表方法为一个元素同时设置多个样式。...，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。...在html中、 、、、 和 就是块级元素。设置display:block就是将元素显示为块级元素。...（真霸道，一个块级元素独占一行） 元素的高度、宽度、行高以及顶和底边距都可设置。 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。...（真霸道，一个块级元素独占一行） 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
CSS实现定位的效果主要通过浮动( float )和定位( position)两个样式属性实现。 文档流 文档流是HTML页面中元素在排列时所占用位置的一-种规则。...理解好文档流的概念有助于学习CSS样式中的浮动和定位两块内容。 将HTML页面中的元素自，上向下分成一行一行，并在每行中按从左至右的挨次排放元素，即为文档流。...行内块级元素 行内块级元素设置为浮动后，元素之间的空白间隙被取消 浮动的特殊情况 父级与子级之间的浮动 为子级元素设置浮动不能超出父级元素的范围（与父级元素浮不浮动无关） 兄弟同时设置浮动 如果兄弟关系的两个元素...子级元素设置浮动 解决方案： 为父级设置高度（不推荐） 块级格式化上下文（BFC） 开启方式如下几种： 将元素设 置为浮动(元素的CSS样式属性float值不为none ) 将元素...设置为绝对定位 将元素设 置为行内块级元素(元素的CSS样式属性display值为inline- -block ) overflow属 性值设置不为visible的块级元素(一般情况下，值为
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
