CSS语法 选择符 { 属性:值} 选择符:又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段(p)的文字将变 成蓝色，而其他的元素(如ol)不会受到影响。...1 em = 父元素的font-size 如: p{font-size:14px} span{font-size:0.8em;} 以这个span>例子span>为例。...如果想为元素设置层模型中的相对定位，需要设置position:relative(表示相对定位)，它通过left、right、top、 bottom属性确定元素在正常文档流中的偏移位置。...:relative 和 left:50%:利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的 • 垂直居中-父元素高度确定的单行文本 通过设置父元素的 height 和 line-height...高度一致来实现的 • 垂直居中-父元素高度确定的多行文本 使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align:middle 设置块级元素的 display
斜体文本（强调） 斜体文本内容 粗体文本 粗体显示文本内容 span>单独样式文本span> 没有语义的，... 使用： span class="stress">胆小如鼠span> 9....，而ID选择器是不可以的，如 span class="stress bigsize">三年级span> 10.CSS 子选择器 还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素...) 需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来 然后使用left、right、top...(position: relative) position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置
选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。...如代码： .first span{color:red;} 这行代码会使span中字体颜色变为红色。...比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。...子选择器 还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。...如右侧代码编辑器中的代码： .first span{color:red;} 这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。
C1 能力认证——Web基础 语义化标签 元素 说明 article 定义独立的来自外部的文档，如新闻投稿、博客文章、论坛帖子等 aside 一般用于网页中的侧边栏或者文章内部的标注框 header...用于选取属于其父元素的最后一个特定类型的子元素 :nth-child(N) 选择匹配属于其父元素的第N个子元素且满足基础选择器选取要求，N可以为数字、关键字（odd / even）、公式（如：2n+1...: ＂结束＂; } ::before 用于创建伪元素，在元素内容之前插入内容，该伪元素默认为行内元素 p::before { content: ＂开始＂; } ::first-line 向文本的首行添加样式...，为行内元素设置宽，行内元素的宽高为内容的宽高 以下选项中，全部标签都为行内元素的选项是_______？...元素会自动从上至下，从左往右流式排列，称为文档流 元素脱离文档流后，将不在文档流中占据空间，元素浮于文档流的上方，此时元素层级发生变化 div.box2定位在div.box1上方，横线处可填写的最大整型数字是
4.body标签： 作用：页面在的主体部分，用于存放所有的HTML标签： p,h,a,b,u,i,s,em,del,ins,strong,img HTML标签分类 在HTML页面中，带有“”符号的元素被称为...span, 跨度，跨距；范围 语法格式： 这是头部 span>今日价格span> 文本格式化标签(熟记) 在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到...4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。 锚点定位 （难点） 通过创建锚点链接，用户能够快速定位到目标内容。...路径(重点、难点) 实际工作中，通常新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。...但是实际工作中， 较少用 ol 自定义列表（理解） 定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
一、块级元素和块框 块级元素是源文档中那些在视觉上被格式化为块（如：段落）的元素。...span> 提示：你可以先修改部分代码再运行。 上述代码中，SPAN 元素包含匿名文本区块 C1，后跟块级元素 P ，最后是匿名文本区块 C2。...匿名框不会影响元素的原有特性设置。如例2中 SPAN 设置了 border，产生匿名框后，C1 C2还是被红色的边框包围。 块框会占据一整行。...二、行内级别元素和行内框 行内元素是源文档中那些不形成新的内容块的元素；内容在行内分布（如，段落内着重的文本，行内图形等等）。...如果一个块框（不是浮动，也不是绝对定位）跟随在一个插入的控制框之后，则该插入框成为该块框的第一个行内框。 3. 否则，该插入框成为一个块框。
选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。...比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。...p{color:red;} 三年级时，我还是一个span>胆小如鼠span>的小女孩。 可见右侧结果窗口中p中的文本与span中的文本都设置为了红色。...盒模型 CSS 盒模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和 的方式,页面中的所有标记都可以看成是一个盒子，盒模型是我们对网页 行定位的基础，而定位是我们对网页元素进行位置固定的重点知识...一般来说，把各个元素的内边距和外边距 浮动 因为 div 元素是块级元素，独占一行的。如何在一行显示多个 div 元素？显然默认的标准流已经无法满足需求，这就要用到浮动。
:值; } 子元素选择器只会查找儿子, 不会查找其他被嵌套的标签 子元素选择器之间需要用>符号连接, 并且不能有空格 后代选择器使用空格作为连接符号 | 子元素选择器使用>作为连接符号 后代选择器会选中指定标签中...div会单独的占领一行,而span不会单独占领一行 div是一个容器级的标签, 而span是一个文本级的标签 容器级的标签和文本级的标签的区别?...文本级的标签 span p buis strong em ins del ... 在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素 什么是块级元素, 什么是行内元素?...块级元素会独占一行 行内元素不会独占一行 容器级的标签 div h ul ol dl li dt dd ... 文本级的标签 span p buis stong em ins del ......背景图片仅仅是一个装饰, 不会占用位置 插入图片会占用位置 背景图片有定位属性, 所以可以很方便的控制图片的位置 插入图片没有定位属性, 所有控制图片的位置不太方便
它允许人们“使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML(或者HTML)文档”。 Markdown 吸收了很多在电子邮件中已有的纯文本标记的特性。 ?...Markdown的目标是：成为一种适用于网络的书写语言。 Markdown的基本语法-区块元素 段落和换行 一个 Markdown段落是由一个或多个连续的文本行组成，它的前后要有一个以上的空行。...Markdown的基本语法-区段元素 强调： Markdown 使用星号（*）和底线（_）作为标记强调字词的符号 code： test *stest* __test__ **_...转义字符： Markdown 可以利用反斜杠来插入一些在语法中有其它意义的符号。...Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号： \ 反斜线 ` 反引号 * 星号 _ 底线 {} 花括号 [] 方括号 () 括弧 # 井字号 +
号来表示，如： 1. 第一项 2. 第二项 3. 第三项 显示结果如下： ? 列表嵌套 列表嵌套只需在子列表中的选项添加四个空格即可： 1....Markdown 还没有办法指定图片的高度与宽度，如果你需要的话，你可以使用普通的 ? 标签。...目前支持的 HTML 元素有：等 ，如： 使用 Ctrl+Alt+Del 重启电脑 输出结果为： ?...转义 Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdown 使用反斜杠转义特殊字符： **文本加粗** \*\* 正常显示星号 \*\* 输出结果为...Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号： \ 反斜线 ` 反引号 * 星号 _ 下划线 {} 花括号 [] 方括号 () 小括号 # 井字号 +
1.jpg 选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。... 上面代码不可以实现为“三年级”三个文字设置文本颜色为红色并且字号为25px的作用。 5-4 子选择器 还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。...如右侧代码编辑器中的代码： .first span{color:red;} 这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。...比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。...p{color:red;}三年级时，我还是一个span>胆小如鼠span>的小女孩。 可见结果窗口中p中的文本与span中的文本都设置为了红色。
3.1 块级元素Block-level Elements与块盒Block Boxes 块级元素是指源文档中以块(如段落)的形式被格式化，生成主要块级盒(principal block-level box...每个块级元素生成一个主要的块级盒( principal block-level box)。 一些元素，比如li和list-item，生成额外的盒来放置项目符号，这些额外的盒会相对于主要盒来摆放。...(如，段落内强调文本，行内图片等等）。...3.4 匿名行内盒 Anonymous Inline Boxes 任何直接包含在块容器元素中的文本(不在内联元素内)都必须作为匿名行内元素处理。...3.5 插入盒Run-in boxes 插入盒，由 display:run-in 定义，根据上下文来决定其为块盒还是行内盒。属性根据插入盒的最终状态（行内级还是块级）应用于其上。 4.
none; background-color: #eee; #框里面的背景色 } 12，伪元素选择器 #将p标签中的文本的第一个字变颜色变大小 p:first-letter { font-size...: 48px; color: red; } /*在每个元素之前插入内容*/ p:before { content:"*"; color:red; } /*在每个元素之后插入内容*...kkdkkdkksk span>rewrrrreerrrespan> 此时div标签下的所有标签前的文本颜色都会继承... 1，static，默认值，无定位，为标签设置top，left等值都没作用的 2，relative（相对定位） 相对定位是相对于该元素在文档流中的原始位置，在这种情况下，虽然原来的位置没有了内容...3，absolute（绝对定位） 设置为绝对定位的元素框会从文本流出来，也就不会占据原来的位置，同时也会出现父级塌陷的现象，绝对定位是相对于父级位置来的（父级必须是relative，也就是父级要是相对定位的
再次强调，p是一个文本级的标签，p里面只能放文字、图片、表单元素。 图片 页面上可以插入图片，能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。...不能往网页中插入的图片格式是：psd、ai HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。 插入方法： 1!...div和span div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。 CSS课程中你将知道，这两个东西，都是最最重要的“盒子”。...默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是一个小区域。...div标签是一个容器级标签，里面什么都能放，甚至可以放div自己 span也是表达“小区域、小跨度”的标签，但是是一个“文本级”的标签。 就是说，span里面只能放置文字、图片、表单元素。
1.概念和原理 DOM中并没有直接获取光标位置的方法，那么我们只能间接来获取光标位置。...DOM支持获取光标选中的范围，我们可以以此为切入点，来获取或定位光标的位置，当选取范围起始点和结束点一样时，就是光标插入的位置。 1.1. 术语 anchor：选区起点。 focus：选区终点。...range：选区范围，包含整个节点或节点的一部分。 1.2. Selection Selection对象表示用户选择的文本范围或插入符号的位置。...extractContents()：将range的内容从文档树移动到文档片段中。 insertNode(newNode)：在range的其实位置插入新的节点。...>光标位置:span> span>span> 文本框测试: <textarea
比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。...p{color:red;} 三年级时，我还是一个span>胆小如鼠span>的小女孩。...important;} p{color:green;} 三年级时，我还是一个span>胆小如鼠span>的小女孩。...固定定位（position:fixed） 绝对定位: positon:absolute,这条语句的作用是将元素从文档中拖出来，然后使用left、top、right、bottom属性相对于最接近的一个具有定位属性的父包含块进行绝对定位...除了上面讲到的插入table标签，可以使父元素高度确定的多行文本垂直居中之外，本节介绍另外一种实现这种效果的方法。但这种方法兼容性比较差，只是提供大家学习参考。
请解释以下常见HTML标签的用途： 和 和 span>5. HTML中的属性是什么？给出一些常见的HTML属性的示例及其作用。6. 什么是HTML表单？...列举一些常见的HTML表单元素和它们的用途。7. 请简要解释HTML语义化的概念。8. 在HTML中，什么是注释？如何在HTML中编写注释？HTML试题答案1. HTML是什么意思？... 和 span>：用于在文档中创建容器，可以用于布局和样式控制。5. HTML中的属性是什么？给出一些常见的HTML属性的示例及其作用。...常见的HTML表单元素：（接收用户输入，如文本框、复选框、单选框等）（用于多行文本输入）（创建下拉列表）（创建按钮）（包含表单元素...它能够增强页面的可读性、可维护性，并对搜索引擎和辅助技术提供更好的支持。8. 在HTML中，什么是注释？如何在HTML中编写注释？
如果在文字行内插入代码块，可以在代码前后分别插入一个 符号即可。被包裹的文字会变成红色。...inline Block Toggle inline 就是直接在文本行内插入隐藏元素，只限文字, MARKDOWN {% hideInline content,display,bg,color %} 参数...HTML 的区段标签如 span>、、 则不受限制，可以在 Markdown 的段落、清单或是标题裡任意使用。...所以你如果要在文件中插入一个着作权的符号，你可以这样写： © Markdown 将不会对这段文字做修改，但是如果你这样写： AT&T Markdown 就会将它转为： AT&T 类似的状况也会發生在...Markdown 还没有办法指定图片的宽高，如果你需要的话，你可以使用普通的 标签。
) 当前需求的拆解 按住shift + @ 的时候，弹出通知列表 选择时 @的用户标签插入当前的光标位置中 生成@的用户标签的规则是：高亮、携带用户ID、一键删除信息、不可以编辑。...如果您使用id，它就有重复的问题，这就意味着你不可能重用某个元素。 例：我再生成一个富文本组件就会初始化失败、因为id是唯一的。这就是为什么很多人推荐尽量少用ID的原因。...要兼容中文输入法的时候@的事件判断(如：中文输入法打“哈哈哈@” 这个时候不能监听@的事件 ) 中文输入法的时候单独输入@的时 怎么判断中文输入？...contents.length) { const index = contents.length - 1 // 在文本中拆入换行符号兼容...获取光标的坐标在文本中的位置 caret-pos 从 textarea、contentedtiable 或 iframe 正文中获取插入符号/光标的位置/偏移量 import { position, offset
*/规定当文本溢出包含元素时发生的事情 text-overflow: ①ellipsis;说明:①ellipsis /*clip:修剪文本，ellipsis:显示省略符号来代表被修剪的文本，string...[属性] {通用代码} /*用于选取带有指定属性的元素。*/[属性=值] {通用代码} /*用于选取带有指定属性和值的元素。*/[属性~=值] {通用代码} /*用于选取属性值中包含指定词汇的元素。...*/[属性$=值] {通用代码} /*匹配属性值以指定值结尾的每个元素。*/[属性*=值] {通用代码} /*匹配属性值中包含指定值的每个元素。...absolute:绝对定位 fixed:相对于浏览器窗口进行定位 relative:相对于其正常位置进行定位 static:默认值，没有定位*/ } 扩展名及首页上页下页末页区域定义 span { background-color...:before{ content:"插入内容"; /*文件扩展名前面插入内容*/ color: red; /*文件扩展名前面插入内容的颜色*/ background: black; /*文件扩展名前面插入内容的背景色
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
