泰安市住宅与房产信息网产品做优化好还是超级网站好

当前位置： 首页 > news >正文

泰安市住宅与房产信息网,产品做优化好还是超级网站好,可以做外国网站文章,一般的手机网站建设多少钱版本说明 当前版本号[20231019]。 版本修改说明20231018初版20231019补充了综合案例二新闻列表的代码及完善部分代码 目录 文章目录 版本说明目录盒子模型01-选择器结构伪类选择器基本使用:nth-child(公式)伪元素选择器 02-PxCook03-盒子模型盒子模型-组成边框线四个方向单方…版本说明 当前版本号[20231019]。 版本修改说明20231018初版20231019补充了综合案例二新闻列表的代码及完善部分代码 目录 文章目录 版本说明目录盒子模型01-选择器结构伪类选择器基本使用:nth-child(公式)伪元素选择器 02-PxCook03-盒子模型盒子模型-组成边框线四个方向单方向边框线 内边距尺寸计算外边距版心居中清除默认样式元素溢出外边距问题合并现象外边距塌陷 行内元素 – 内外边距问题圆角盒子阴影拓展 04-综合案例-产品卡片HTML标签CSS样式 05-综合案例二 – 新闻列表补充正则表达式ab*cab{2,6}cabcab{2,}caba cat | doga cat | dog[abc][0-9][a-z][A-Z][0-9]\d\W\W\s\S.^ac$ 贪婪匹配转懒惰匹配匹配RGB颜色 盒子模型 目标掌握盒子模型组成部分使用盒子模型布局网页区域 01-选择器 结构伪类选择器 基本使用 作用根据元素的结构关系查找元素。 在这里我们可以先创建10个 li 标签对标签添加选择器看最后的结果。 演示li:first-child示例代码如下 li:first-child {background-color: green; }输出结果如下 演示li:first-child示例代码如下 注演示本方法时要记住把所有的元素用一个div或者ul包起来形成一个闭合区间这个方法才会生效 演示代码如下 !DOCTYPE html htmlheadmeta charsetutf-8title/titlestyle/* li:first-child{background-color: green;} /li:last-child{background-color: red}/style/headbodydivlili : 1/lilili : 2/lilili : 3/lilili : 4/lilili : 5/lilili : 6/lilili : 7/lilili : 8/lilili : 9/lilili : 10/li/div/body /html输出结果如下 演示li:nth-child示例代码如下 li:nth-child(4) {background-color:aqua; } 输出结果如下 :nth-child(公式) 提示公式中的n取值从 0 开始。 以上面十个 li 标签为例进行测试 演示li:nth-child(2n)示例代码如下 li:nth-child(2n) {background-color: aquamarine; }输出结果如下 演示li:nth-child(2n1)示例代码如下 li:nth-child(2n1) {background-color: aquamarine; }输出结果如下 演示li:nth-child(5n)示例代码如下 li:nth-child(5n) {background-color: aquamarine; }输出结果如下 演示li:nth-child(n5)示例代码如下 li:nth-child(n5) {background-color: aquamarine; }输出结果如下 演示li:nth-child(-n5)示例代码如下 li:nth-child(-n5) {background-color: aquamarine; }输出结果如下: 伪元素选择器 作用创建虚拟元素伪元素用来摆放装饰性的内容。 div::before {content: before 伪元素; } div::after {content: after 伪元素; }注意点 必须设置 content: ””属性用来 设置伪元素的内容如果没有内容则引号留空即可伪元素默认是行内显示模式权重和标签选择器相同 示例代码如下 !DOCTYPE html htmlheadmeta charsetutf-8title/titlestylediv::before{content: 英雄;}div::after{content: 联盟;}/style/headbodydiv传奇/div/body /html在浏览器打开网页的检查后我们也会发现 02-PxCook PxCook像素大厨 是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。 开发面板自动智能识别设计面板手动测量尺寸和颜色 使用方法创建项目 → 输入 项目名称、项目类型 Web → 单击按钮【创建项目】 → 单击按钮【添加】导入设计稿 03-盒子模型 作用布局网页摆放盒子和内容。 盒子模型-组成 内容区域 – width height内边距 – padding出现在内容与盒子边缘之间边框线 – border外边距 – margin出现在盒子外面 div {margin: 50px;border: 5px solid brown;padding: 20px;width: 200px;height: 200px;background-color: pink; }边框线 四个方向 属性名borderbd 属性值边框线粗细 线条样式 颜色不区分顺序 div {border: 5px solid brown;width: 200px;height: 200px;background-color: pink; }单方向边框线 属性名border-方位名词bd方位名词首字母例如bdl 属性值边框线粗细 线条样式 颜色不区分顺序 div {border-top: 2px solid red;border-right: 3px dashed green;border-bottom: 4px dotted blue;border-left: 5px solid orange;width: 200px;height: 200px;background-color: pink; }内边距 作用设置 内容 与 盒子边缘 之间的距离。 属性名padding / padding-方位名词 div {/ 四个方向 内边距相同 /padding: 30px;/ 单独设置一个方向内边距 /padding-top: 10px;padding-right: 20px;padding-bottom: 40px;padding-left: 80px;width: 200px;height: 200px;background-color: pink; }提示添加 padding 会撑大盒子。 padding 多值写法 技巧从上开始顺时针赋值当前方向没有数值则与对面取值相同。 演示代码如下; !DOCTYPE html htmlheadmeta charsetutf-8title盒子模型展示/titlestylediv{width:300px;height: 200px;background-color: pink;/ 内容与盒子边缘之间的距离 /padding: 20px;border: 1px solid #000;margin: 50px;}/style/headbodydiv盒子模型展示/div/body /html输出结果如下 展示为 尺寸计算 默认情况盒子尺寸 内容尺寸 border 尺寸 内边距尺寸 结论给盒子加 border / padding 会撑大盒子 解决 手动做减法减掉 border / padding 的尺寸內减模式box-sizing: border-box !DOCTYPE html htmlheadmeta charsetutf-8title盒子模型展示/titlestylediv{width:200px;height: 200px;background-color: pink;padding: 20px;/ border: 2px dashed red; /}/style/headbodydiv盒子模型展示/div/body /html尝试两种方法来看如何才能不撑大盒子模型 第一种自己手动调整 stylediv{width:160px;height: 160px;background-color: pink;padding: 20px;/ border: 2px dashed red; /}/style第二种 stylediv{width:200px;height: 200px;background-color: green;padding: 20px;/ border: 2px dashed red; // 内减模式不需要手动做减法哪怕加padding和border都不会撑大盒子 /box-sizing: border-box;}/style外边距 作用拉开两个盒子之间的距离 属性名margin 提示与 padding 属性值写法、含义相同 且 外边距不会撑大盒子 单写一个margin的话是表示居中 并且上下左右的距离均为50px margin: 50px;版心居中 左右 margin 值 为 auto盒子要有宽度 div{width:200px;height: 200px;background-color: green;padding: 20px;/ border: 2px dashed red; // 内减模式不需要手动做减法哪怕加padding和border都不会撑大盒子 /box-sizing: border-box;margin: 0 auto; }清除默认样式 清除标签默认的样式比如默认的内外边距。 / 清除默认内外边距 */

• {margin: 0;padding: 0;box-sizing: border-box; } /* 清除列表项目符号 / li {list-style: none; }如 !DOCTYPE html htmlheadmeta charsetutf-8title盒子模型展示/titlestyle{margin: 0;padding: 0;}/* 去掉li标签前面的小点 /li{ list-style: none;}/style/headbodydiv盒子模型展示/divli康康/lip是不是真的去掉原样式了/p/body /html一般如果担心我们的盒子会被撑大所有会在后面加一句 box-sizing: border-box; style{margin: 0;padding: 0;box-sizing: border-box;} /style元素溢出 作用控制溢出元素的内容的显示方式。 属性名overflow 先用一篇长文对溢出进行测试给盒子模型增加了宽、高、背景颜色、不让盒子模型变形及版心居中 !DOCTYPE html htmlheadmeta charsetutf-8title盒子模型展示/titlestylediv{width: 360px;height: 360px;background-color: aqua;box-sizing: border-box;margin: 0 auto;}/style/headbodydiv在一个遥远的小山村里有一片被遗忘的竹林。这片竹林里生活着一群快乐的竹子。它们每天都在阳光下翩翩起舞与风儿嬉戏与鸟儿共鸣。夏日的午后阳光透过竹叶洒在地上形成斑驳的光影。竹子们在这光影中摇曳生姿仿佛在诉说着一个个美好的故事。村子里的孩子们喜欢来这里玩耍他们在竹林里捉迷藏攀爬竹子尽情地享受着童年的快乐。秋天来临竹林里的竹子变得更加翠绿。这时村民们会来到竹林采摘新鲜的竹笋。竹笋的味道鲜美可口是村民们餐桌上的一道美味佳肴。而竹子们则在秋风中低吟浅唱为这个季节增添了一份宁静与祥和。冬天的时候竹林里银装素裹一片洁白。雪花飘落在竹叶上形成了一个个晶莹剔透的冰晶。竹子们在寒风中挺立不倒仿佛在告诉人们即使严寒降临也要坚强地面对生活。春天来临万物复苏。竹林里的竹子抽出嫩芽绿意盎然。这时蝴蝶飞舞蜜蜂采蜜小鸟歌唱一切都充满了生机与活力。竹子们在春风中摇曳生姿仿佛在欢庆着生命的奇迹。这片竹林见证了四季的更替也见证了村民们的生活变迁。它用自己的坚韧与美丽诠释着生命的价值与意义。在这个小山村里竹林成为了一个永恒的传说流传在人们的心间。/div/body /html此时输出的结果如下 此时出现的问题就是文字过多了 超过了盒子模型溢出到下面了 接下来我们使用overflow 进行测试 1、overflow : hidden; 看得出来是直接截断的 2、overflow: scroll; 3、overflow: auto;只有右边显示进度条 外边距问题 合并现象 场景垂直排列的兄弟元素上下 margin 会合并 现象取两个 margin 中的较大值生效 .one {margin-bottom: 50px; } .two {margin-top: 20px; }示例 !DOCTYPE html htmlheadmeta charsetutf-8title盒子模型展示/titlestyle.a1{width: 100px;height: 100px;background-color: aqua;margin-bottom: 30px;}.a2{width: 100px;height: 100px;background-color: rebeccapurple;margin-top: 50px;}/style/headbodydiv classa1盒子1/divdiv classa2盒子2/div/body /html很明显中间的大小不止30px 检查盒子2时发现中间位置充满了所以中间位置大小为 50 px 。 当上面的盒子有设置margin-bottom 下面的盒子有设置margin-top那中间的大小即取两个之间最大的那个。 外边距塌陷 场景父子级的标签子级的添加 上外边距 会产生塌陷问题 现象导致父级一起向下移动 .son {margin-top: 50px;width: 100px;height: 100px;background-color: orange; }解决方法 取消子级margin父级设置padding父级设置 overflow: hidden父级设置 border-top 示例 !DOCTYPE html htmlheadmeta charsetutf-8title盒子模型展示/titlestyle.father{width: 300px;height: 300px;background-color: aqua;}.son{width: 100px;height: 100px;background-color: rebeccapurple;}/style/headbodydiv classfatherdiv classsonson/div/div/body /html可见子模型在父模型的左上角 当子类的盒子添加上边距后就会出现坍塌的现象 .son{width: 100px;height: 100px;background-color: rebeccapurple;margin-top: 30px; }如下可见子模型上方有一条上边距 为了避免这样的情况我们有以下三种方法 1、取消子级margin父级设置padding style.father{width: 300px;height: 300px;background-color: aqua;padding-top: 30px;}.son{width: 100px;height: 100px;background-color: rebeccapurple;/* margin-top: 30px; /}/style解决后父类的子类盒子就会的上边距即为30px 2、父级设置 overflow: hidden style.father{width: 300px;height: 300px;background-color: aqua;overflow: hidden;}.son{width: 100px;height: 100px;background-color: rebeccapurple;margin-top: 30px;}/style隐藏完之后也不会出现塌陷的现象 父级设置 border-top style.father{width: 300px;height: 300px;background-color: aqua;/ overflow: hidden;/border-top: 1px solid saddlebrown;}.son{width: 100px;height: 100px;background-color: rebeccapurple;margin-top: 30px;}/style在子集上面产生一个间距超不出去从而不会让外边距塌陷 行内元素 – 内外边距问题 场景行内元素添加 margin 和 padding无法改变元素垂直位置 解决方法给行内元素添加 line-height 可以改变垂直位置 span {/ margin 和 padding 属性无法改变垂直位置 /margin: 50px;padding: 20px;/ 行高可以改变垂直位置 */line-height: 100px; }圆角 作用设置元素的外边框为圆角。 属性名border-radius 属性值数字px / 百分比 提示属性值是圆角半径 多值写法 技巧从左上角开始顺时针赋值当前角没有数值则与对角取值相同。 正圆形状给正方形盒子设置圆角属性值为 宽高的一半 / 50% img {width: 200px;height: 200px;border-radius: 100px;border-radius: 50%; }胶囊形状给长方形盒子设置圆角属性值为 盒子高度的一半 div {width: 200px;height: 80px;background-color: orange;border-radius: 40px; }示例 !DOCTYPE html htmlheadmeta charsetutf-8title盒子模型展示/titlestyleimg{width: 200px;height: 200px;background-color: yellow;border-radius: 100px;}div{width: 200px;height: 100px;background-color: purple;border-radius: 50px;}/style/headbodyimg src../img/mate紫.jpg altdiv/div/body /html输出结果如下 盒子阴影拓展 作用给元素设置阴影效果 属性名box-shadow 属性值X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影 注意 X 轴偏移量 和 Y 轴偏移量 必须书写默认是外阴影内阴影需要添加 inset div {width: 200px;height: 80px;background-color: orange;box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset; }示例 !DOCTYPE html htmlheadmeta charsetutf-8title盒子模型展示/titlestylediv{width: 200px;height: 100px;background-color: aqua;box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;}/style/headbodydiv/div/body /html输出结果如下蓝色盒子附近可看出明显的阴影效果 04-综合案例-产品卡片 CSS 书写顺序 盒子模型属性文字样式圆角、阴影等修饰属性 HTML标签 bodydiv classproductimg src../img/CSDN.jpg alt/h4中国最大的IT技术社区/h4a汇聚众多开发者和技术专家/a/div /bodyCSS样式 选择器通配符表示匹配所有元素。将外边距、内边距和盒模型设置为边界框。body选择器用于选择整个页面的body元素。将背景颜色设置为浅灰色#f1f1f1。.product选择器用于选择具有类名为product的元素。设置外边距为上下自动左右居中上内边距为50像素宽度为270像素高度为253像素背景颜色为白色#fff文本居中对齐边框圆角半径为10像素。.product h4选择器用于选择具有类名为product的元素内的h4标题元素。设置上外边距为20像素下外边距为12像素字体大小为18像素字体粗细为普通400颜色为深灰色#333。.product a选择器用于选择具有类名为product的元素内的链接元素a。设置字体大小为12像素颜色为浅灰色#555。 style{margin: 0;padding: 0;box-sizing: border-box;}body{background-color: #f1f1f1;}.product{margin: 50px auto;padding-top: 50px;width: 270px;height: 253px;background-color: #fff;text-align: center;border-radius: 10px;}.product h4{margin-top: 20px;margin-bottom: 12px;font-size: 18px;font-weight: 400;color: #333;}.product a{font-size: 12px;color: #555;}/style05-综合案例二 – 新闻列表 参考代码如下 !DOCTYPE html htmlheadmeta charsetutf-8title新浪新闻/titlestyle*{margin: 0;padding: 0;box-sizing: border-box;}li{list-style: none;}a{text-decoration: none;}.news{margin: 100px auto;width: 360px;height: 200px;}.news .new {height: 34px;background-color: #eee;border: 1px solid #dbdee1;border-left: 0;}.news .new a{margin-top: -1px;display: block;border-top: 3px solid #ff8400;border-right: 1px solid #dbdee1;width: 48px;height: 34px;background-color: #fff;text-align: center;line-height: 32px;font-size: 14px;color: #333;}.news .bo{padding: 5px;}.news .bo li{background-image: url(../img/square.png);background-repeat: no-repeat;padding-left: 15px;background-position: 0 center;}.news .bo li a {padding-left: 20px;background: url(../img/img.gif) no-repeat 0 center;font-size: 12px;color: #666;line-height: 24px;}.news .bo li a:hover {color: #ff8400;}/style/headbodydiv class newsdiv classnewa href#新闻/a/divdiv classboullia href#中国饭碗更“丰盛” 森林“粮库”成名副其实“摇钱树”/a/lilia href#山东淄博苹果丰收“红”金秋/a/lilia href#又是一年收获时 多地共绘秋收好“丰”景/a/lilia href#众人拾柴火焰高/a/lilia href#“数字丝绸之路”填平沟壑 共享数字经济红利/a/lilia href#展现中华体育文化新气象 绘就“美美与共”/a/li/ul/div/div/body /html值得注意的是 ​ 在写背景图的语句时background-image: url(../img/square.png);如果你的html所在的文件夹与图片所在的文件夹平级的话图片链接前要加两个点如…/img/square.png 展示如下
  补充正则表达式 ​ 正则表达式是一种用于匹配字符串中字符组合的模式它在前端开发中扮演着重要的角色。在JavaScript中正则表达式是一个对象这些模式被用于RegExp对象的exec和test方法以及String对象的match、matchAll、replace、search和split方法。 d? d出现0/1次 a a可以出现0/多次 a a出现一次以上 a6 a出现6次 a2 a出现2次以上 a26 a出现2-6次 匹配多个字符 (ab) ab出现一次以上 或运算 a (cat|dog) 匹配 a cat or a dog a cat|dog 匹配 a cat or dog 字符类 匹配由abc构成的数据【abc】 abc出现一次以上 abc aabbcc 【a-zA-Z0-9】 ABCabc123 ^ 排除 【^0-9】 匹配0-9之外的数据(包括换行符) 元字符 \d 数字字符 \d 匹配一个以上的数字 \D 非数字字符 \w 单词字符 单词 数字 下划线即英文字符 \W 非单词字符 \s 空白符 包含空格和换行符 \S 非空白字符 \b 单词的边界 单词的开头或结尾 单词与符号之前的边界 \B 非单词的边界 符号与符号 单词与单词的边界 . 任意字符不包含换行符 . 表示. 通过\进行了转意 ^ 匹配行首 \( 匹配行尾 贪婪匹配 strongbhttps://www.wondershare. com/strong/b . 会匹配整串 因为是贪婪匹配 .? 只匹配两个标签代码➕? 设置为懒惰匹配测试网站regex101: build, test, and debug regex 测试时出现相同的内容就会高亮显示 ab*c ​ 在正则表达式中**ab*c 代表匹配以 “ab” 开头后面跟着 0 个或多个 “c” 的字符串。**其中“ab” 部分可以是一个单词也可以是多个单词但是后面必须跟着 “c”。例如“abc”, “abbbc”, “abbbcc” 等都符合这个正则表达式。 ab{2,6}c ​ 在正则表达式中ab{2,6}c代表匹配以ab开头跟着至少2个且至多6个b的字符串。其中“ab”部分可以是一个单词或多个单词。例如“abc”, “abbbc”, “abbbcc”, “abbbcccc等都符合这个正则表达式。请注意”{2,6}是一个量词表示前面的元素至少出现两次且最多出现六次。 abc ​ 在正则表达式中**abc代表匹配以ab开头后面跟着一个或多个c的字符串。**其中“ab”部分可以是一个单词或多个单词后面必须跟随一个或多个c。例如“abc”, “abbbc”, “abbbcc等都符合这个正则表达式。这里的”号是一个量词表示前面的元素至少出现一次。 ab{2,}c ​ 在正则表达式中**ab{2,}c代表匹配以ab开头后面跟着至少两个b的字符串。**例如“abbc”, “abbbc”, “abbbbc等都符合这个正则表达式。这里的”{2,}是一个量词表示前面的元素至少出现两次。 ab ​ 在正则表达式中**ab“代表匹配以ab开头后面跟着一个或多个b的字符串。**这里的”号是一个量词表示前面的元素至少出现一次。例如“abb”, “abbb”, abbbb等都符合这个正则表达式。 a cat | dog ​ 在正则表达式中a cat | dog代表匹配字符串 “cat” 或 “dog”。这里的竖线符号 “|” 表示逻辑或即匹配两个表达式中的任意一个。因此这个正则表达式可以匹配 “cat” 或 “dog” 这两个单词中的任意一个。 a cat | dog ​ 在正则表达式中“a (cat | dog)” 的含义是匹配以 “a” 开头后面跟着 “cat” 或 “dog” 的字符串。这里的括号 “()” 是用来进行分组的所以 “(cat | dog)” 被看成一个整体。如果在文本中匹配到这一模式那么 “cat” 或 “dog” 就会被捕获到单独的分组里。例如如果输入的文本是 “my cat and my dog”那么第一个分组捕获到的是 “cat”第二个分组捕获到的是 “dog”。此外这个表达式也能用于查找数据流中是否存在 “cat” 或 “dog”。 [abc] ​ 在正则表达式中[abc]“代表匹配一个或多个连续的字母a”、“b或c”。这里的方括号 “[]” 是用来定义一个字符集合的因此 “[abc]” 表示匹配其中的任意一个字符。而**加号 “” 则是量词用来表示前面的元素至少出现一次。**所以 **“[abc]” 就表示匹配至少一个 “a”、“b” 或 “c”且这些字符可以连续出现。**例如它可以匹配 “abc”, “abb”, “bbb”, “ccc”, aaa等字符串。 [0-9] ​ 在正则表达式中**“[0-9]” 的含义是匹配0-9这十个数字中的任意一个。**这里的方括号 “[]” 是用来定义一个字符集合的因此 “[0-9]” 表示匹配0-9这十个数字中的任意一个。而加号 “” 则是量词用来表示前面的元素至少出现一次。所以 “[0-9]” 就表示匹配0-9这十个数字中的任意一个且这些数字可以连续出现。例如它可以匹配 “0001234”, “12345678”, “23456789” 等字符串。 [a-z] ​ 在正则表达式中**[a-z]代表匹配一个或多个连续的小写字母。**这里的方括号 “[]” 是用来定义一个字符集合的因此 “[a-z]” 表示匹配小写字母 a 到 z 中的任意一个。而加号 “” 则是量词用来表示前面的元素至少出现一次。所以 “[a-z]” 就表示匹配至少一个小写字母且这些字母可以连续出现。例如它可以匹配 “abc”, “abcd”, efgh等字符串。 [A-Z] ​ 在正则表达式中**[A-Z]代表匹配一个或多个连续的大写字母。**这里的方括号 “[]” 是用来定义一个字符集合的因此 “[A-Z]” 表示匹配大写字母 A 到 Z 中的任意一个。而加号 “” 则是量词用来表示前面的元素至少出现一次。所以 “[A-Z]” 就表示匹配至少一个大写字母且这些字母可以连续出现。例如它可以匹配 “ABC”, DEFGHIJKLMNOPQRSTUVWXYZ等字符串。 [*0-9] ​ 在正则表达式中“[*0-9]” 的含义是匹配是除了一个或多个连续的数字其他都能匹配到包括换行符。 \d ​ 作为数字字符匹配一个以上的数字。 \D ​ “D” 代表匹配一个或多个非数字字符。这里的反斜线 \ 是转义字符用于对特殊字符进行转义。“D” 在这里并不代表上面提到的定义域或者微分算子而是表示任意非数字字符。后面的 “” 是量词表示前面的元素至少出现一次。所以 “\D” 就表示匹配至少一个非数字字符且这些字符可以连续出现。例如它可以匹配 “abc”, “123!#”, \)%^()等字符串。 \W ​ 在正则表达式中“w” 代表匹配字母、数字或下划线。这里的 “\w” 是一个特殊的字符集其中 “w” 表示字母、数字或下划线中的任意一个。例如它可以匹配 “a1b2c3”, “abc123”, _abc等字符串。 \W ​ 在正则表达式中w代表除了一个或多个字母、数字或下划线以外的东西都能被匹配到包括换行符。 \s ​ 在正则表达式中s代表匹配一个或多个空白字符【即换行符】。这里的\s是一个特殊的字符集表示空格、制表符、换行符等空白字符中的任意一个。后面的“是量词表示前面的元素至少出现一次。因此”\s就表示匹配一个或多个空白字符且这些字符可以连续出现。 \S ​ 在正则表达式中S代表除了一个或多个非空白字符以外的东西都能被匹配到包括一个或多个字母、数字或下划线都能被匹配到。 . ​ 在正则表达式中.是一种通配符代表匹配任意数量包括0个的任意字符。其中.“表示任意单个字符”“则是量词表示前面的元素可以出现零次或多次。因此”.就可以匹配包括空字符串在内的任意字符串。例如它可以匹配 “abc”, “123”, “”, a1b2c3等字符串。 ^a 在正则表达式中^a的含义是以字符a开头的字符串。其中^是正则表达式中的特殊符号表示行的开头。因此^a就表示以字符a开头的字符串。例如它可以匹配 “abc”, “apple”, animal等以a开头的字符串。 c\( 在正则表达式中c的含义是以字符c结尾的字符串。其中\)的含义是以字符c结尾的字符串。其中这个符号是正则表达式中的特殊符号表示行的结尾。因此c$就表示以字符c结尾的字符串。例如它可以匹配 “abc”, “acb”, xyzc等以c结尾的字符串。 贪婪匹配转懒惰匹配 ​ 贪婪匹配和懒惰匹配是正则表达式中两种重要的匹配策略它们影响着限定符的匹配结果。 ​ 在贪婪匹配中正则表达式会尽可能多地匹配字符例如对于字符串aaab和正则表达式/a/它会匹配整个字符串aaab因为“表示一个或多个所以它会尽可能多地匹配a”。 ​ 而在懒惰匹配中正则表达式则会尽可能少地匹配字符如果可能的话它会在找到第一个满足条件的匹配后就停止匹配。 ​ 如果你想将贪婪匹配转换为懒惰匹配你可以在限定符后面加上一个问号?这样就变成了懒惰模式。例如对于上述的aaab和正则表达式/a?/它会只匹配到第一个a就停止而不是整个字符串。 匹配RGB颜色 ​ 要匹配RGB颜色可以使用以下正则表达式rgb((\d{1,3}),\s(\d{1,3}),\s*(d{1,3}))。这个正则表达式中d{1,3}表示1到3位数字s*表示可能有的空格。 #[a-zA-Z0-9]{6}\b以下是该正则表达式章节的总结