HTML之中hight和行高的区别
不会不会，真不会。上周出了一期视频，探讨了一个事实啊，就是高中导数六十五个题型，在校数学老师最多讲五十个，绝对不是没有责任心啊。 我把原因给大家盘一下，从一五年到二四年这十年期间，全国各地所有的高考试卷的最后一道题都是倒数，最后一道大题最后一问，百分之九十五的同学做不出来。 这就是在校老师不讲倒数难题的原因，绝对不是没有心，没有责任心啊。恰恰相反呢，是特别务实的一种放弃。 把精力和时间放在其他板块，我认为意义更大，这是主要原因啊。其次的原因是什么呢？就是导数确实有难度，一般老师啊， 不仅讲不明白，可能连参考答案都看不懂。比如说这道题啊，官方答案里给了这样一个大于零的点，并不要求写出啊。如何求出这个点？ 当时我的思路是在趋近于正无穷的位置上啊，利用函数之间速度增长的快慢的差异来做一个放缩啊，一分多钟吧，能出结果。 你可以把这道题和官方答案给你所有的老师，包括你在校的老师，你班课的老师，你一对一老师，你问问这个大于零的这个点是怎么来的， 他顶多看一眼啊，直接给你两句话，第一句话是零点存在定律嘛，经验很重要，你多刷点题就有感觉了。 第二句是，你没有必要把精力放在这种偏题怪题上，还是应该下功夫把基础打好。总而言之，就是啊，不会，他真不会， 你家感觉能精确到这种程度？我不是告诉你了吗， 从二零一五年到二零二四年这十年期间，导数大题太难，百分之九十五的同学是做不出来的，导致所有的在校数学老师都理智的放弃了导数大题的教言和传授。 所以吧，你就不要再刨根问底了，看破不说破， 咱们把话说回来啊，时间到了二零二五年以后，天变了，从二零二五年开始啊，新高考数学变成十九道题了，导数大题位置前移，难度降到了中等难度， 难度虽然变简单了，但老师们的这个教学模式，这个习惯并没有改变呐，还是选择性的放弃了导数大题，不信你看，这六十五个题型啊，至少有三分之一你们老师根本就不讲， 这就相当的不理智了，在当前这种命题难度的背景之下啊，导数的大题已经是唾手可得的一块大肥肉， 总分十七分，顶多扣两三分，都是题型模板，万变不离其宗啊！所以啊，所有的高二高三同学，一定要尽快的把题型补齐，扎扎实实的把这六十五个题型的二百道题走一遍， 倒数的底层逻辑你也就通透了，无论你现在是高二还是高三，做两百道题费劲吗？千万不要犯拖延症啊！
粉丝1.3万获赞11.7万
相关视频
02:22查看AI文稿AI文稿你在命令行里预览文件内容的时候，是想看左边这样的还是右边这样的呢？ cat 应该是大家经常用的命令了，对吧？今天介绍一个它的升级版，叫 bat。 还记得之前介绍过的文件搜索神器 f d 吗？它们是同一个作者，叫 baby peter， 这是一个德国的开发者，这大哥写了很多个好用的命令行工具，下次有机会我可以单独介绍一下他。 bet 内置了二十八套主题，跑一下 bet 杠杠 least themes 就 能全部列出来了。你看这里有 catpong， 然后， 嗯，抓哭了，然后 nord 这些热门的主题都有，你看同一个文件换个主题，完全不同的感觉，对吧？ 我个人一直是喜欢这个 catpupping mocha 这个主题的，所以那么选好了，我们怎么固定下来呢？那么在你的 shell 的 这个里面设置这个环境变量， bat themes 是 你喜欢的这个主题名就行了，那么以后每次打开 bat 就是 这个主题了。 除了好看败了还能自动识别语言，比如我们现在所在的这个目录是一个 python 项目，对吧？我们预览一下 app 点 py 文件，你看这是 python 文件的高亮效果，我们再试试。比如说 index 点 html 也是一样的， 这我们看看，比如说 config 点 ymail， 对 吧？不用告诉他是什么语言，这是一百八十三种 ymail， html， doc， file 都能认。左边还带这个行号，然后上面有文件名。有一些细心的小伙伴可能已经发现了，左边这些符号是啥意思呀？ 如果这个文件是在一个 get 仓库里，那么 bet 会在左边标出哪些行？改过这个加号就是新增的内容，然后波浪线就是修改的内容，扫一眼就能知道动到哪里。文件太长的时候， bet 会自动分页，比如说这个 server log， 他有一百多行，一屏放不下，所以我们可以按空格直接翻一页，然后按大写的记，跳到最后一行，然后按小写的记，可以跳回第一行。最实用的是搜索斜杠，加关键词就可以了，比如说我们斜杠 arrow 就可以把所有的报错都会高亮，那么按小写是跳到下一个，按大写跳回到上一个，然后看完我们直接按小写的 q 退出就行了。接管道的时候直接变成纯文本，不会影响后面的命令。比如我们看 bat， 比如 server， 然后后面接，比如 had， 直接输出。日常使用的话，我们只要在 shell 里加一行 alias， 把 cat 指向 bat 就 行了，那么以后打 cat 就是 彩色的了。
519张司机在路上
00:20查看AI文稿AI文稿你这有错误，不过另一半也还能跑。这其实也不算错吧。算了，能显示出来就行吧。你这有错误， 父母哪错了自己找。我只负责告诉你，有兄弟你代码第五百一十二行报错了什么？你告诉我。你代码一共就三十行，错误在第七行，但是我会告诉你在第二十一行。
727ai有点意思![[html系列教学]第一期 编写你的第一行代码 [html系列教学]第一期 编写你的第一行代码](https://p3-pc-sign.douyinpic.com/image-cut-tos-priv/b992082ae966ad5421c65f90548cff3c~tplv-dy-resize-origshort-autoq-75:330.jpeg?lk3s=138a59ce&x-expires=2103127200&x-signature=GRSLUz4L780un%2Fti40d0TV2GFBo%3D&from=327834062&s=PackSourceEnum_AWEME_DETAIL&se=false&sc=cover&biz_tag=pcweb_cover&l=20260827022150D7882B45571918556C14)
02:52查看AI文稿AI文稿你是否好奇过，每天浏览的网页看到的文字、图片布局究竟是怎么被浏览器呈现出来的？ 从今天开始，我们将开启一套零基础 html 入门系列教程。没有复杂的理论，没有晦涩的术语，我会用最简单最直观的方式带你从零开始，一步步搞懂网页的核心语言。 不管你是编程小白还是想入门前端，这个系列都能让你轻松学会。现在我们正式开始。 首先我们来回答第一个问题，什么是 html？ html 全称是超文本标记语言 hypertext markup language。 我们先拆开看第一个关键词，文本，这里的文本指的是纯文本，意思就是我们可以用任何能编辑纯文本的软件来写 html， 比如电脑自带的记事本， 如果条件允许，现在你就可以在你的电脑当中右键新建文本文档，来创建一个空的记事本。 然后我们双击打开这个记事本，在其中我们输入以下内容，请注意输入的时候记得换行哦。 这样我们就以日记的形式记录下了今天所学的内容。有标题，有日期，有政文，是常见的文章的格式。 那么接下来我们按住键盘上的 ctrl 加 s 保存我们所写的内容，然后关闭这个记事本，观察一下这个记事本文件的名字是什么样子的。 如果只有新建文文本档这几个字，那请跟着我做如下操作，随便找一个文件夹，我们双击打开，在上方点击查看， 在显示隐藏项目里勾选文件扩展名，这样你会看到你的新建文本文档后方多出了个后缀， 右键点击这个文件，找到重命名，我们更改这个后缀，将原来的点 txt 改为点 html， 改完鼠标点击空白处，这时通常会提示更改后缀名可能导致文件不可用，不必理会，我们确认更改即可。然后你就会发现你的文件变为了浏览器的图标， 然后我们双击左键打开这个文件，你就会看到电脑按照网页的模式打开了你刚刚写的日记， 这就是你在 html 学习当中所写下的第一个网页。当然你会发现它依然存在问题，比如标题和正文没有区分，所有的文字都在一行等等。当然修改它们就是我们下节课的内容了。
66阿巴阿巴1
00:54查看AI文稿AI文稿这是我用 html 做出来的 ppt， 就 用到这五个 skill， 在 天宫上还可以像 ppt x 格式一样调整字号、字体、行间距。从那里发现 m a r p、 slide 和自带的麦肯锡 skill， 还能把 excel 数据做成 svg 图标和仪表盘。 ppt 里面用到的图片素材，也能够用天宫自带的跨步设计和图像跨置增强 skill 去生成， 里面的文字也是都能调的。如果你觉得光有文字和图片的 ppt 还不够亮眼，那视频素材也能做，从分镜、脚本到素材拼接剪辑，它都能包圆。真的撑不下去了， 别人的 html ppt 还停留在文字阶段，聪明的你既保留了传统 ppt 的 素材灵活性，又把 html 好 看的前端动效都包圆了。我的天啊，你学会了吗？我的天啊，这里还有更多 ai 玩法！
689卡尔的AI沃茨![[html系列教学]第二期 标签的作用](https://p3-pc-sign.douyinpic.com/tos-cn-i-dy/55c5d700848d4fba8e1be040d2f7cb40~tplv-dy-resize-origshort-autoq-75:330.jpeg?lk3s=138a59ce&x-expires=2103127200&x-signature=END3QB6jEJojmmVeMYSvjQViT58%3D&from=327834062&s=PackSourceEnum_AWEME_DETAIL&se=false&sc=cover&biz_tag=pcweb_cover&l=20260827022150D7882B45571918556C14)
02:07查看AI文稿AI文稿上一期我们尝试用记事本完成了一个简单网页的制作，但是我们发现其中显示的内容依然存在问题，比如文字都在一行，正文和标题没有区别之类的。那这一期我们就来尝试修改它。 为什么会发生这种问题？这你写出的内容不是一个完整的网页，电脑只是简单地把你写的普通文字复述了一遍而已。那么问题出在哪？就是我们要说的第二个关键词，标记。标记就是用来标记网页里的内容， 告诉浏览器这段文字是什么，它应该怎么显示在 html 里。标记就是我们常修的标签 样子，就是一对带名字的肩括号标签，绝大多数都是成对出现的，开头是肩括号包裹标签名，结尾是肩括号包裹标签名，但在标签名前面多了一个斜杠来证明它是结尾开头和结尾中间包裹我们的内容。 请注意，这里的所有标点符号都要在英文输入法下输入，通常中文输入法输入的标点符号是无法作为代码结构的一部分的。 我们来改造一下上次的日记，右键点击上次的文件，将后键名改回点 t s t。 我 们双击打开这个记事本，将里面的内容改为下面这个样子， 和之前的操作一样，按下 ctrl 加 s 保存这个文件，然后退出。接着将文件后缀改为 h m l， 双击打开它，我们在网页中查看它的变化，如果你写的代码没有问题，大概会在网页当中看到这样的效果。 文字有了大小区分，按照我们的要求自动排版，这就是标签的作用。但是当前的网页代码结构依旧不完整， 浏览器能识别内容，但他不知道这是一个标准的 html 网页，想修改我们就又要回到记事本当中，你是否觉得这样来回折腾过于麻烦？那么我们下期就来长期安装一个用来编辑 html 的 专业软件吧。
12阿巴阿巴1
01:05查看AI文稿AI文稿哥们，你写个 html 就 能直接渲染成视频，这就是 hyperframes， premiere， ae 全不用学浏览器，就是你新的渲染引擎。 你写的每一行代码都会变成视频里的一帧 css 动画，直接用就行。弹跳、过渡、渐变全都支持 gsf 时间线 精确到 ds 的 动画编排，一行代码控制整个时间轴。 three g s 三 d 场景，完整的三维渲染能力，场景一目了然。 webgl 着色器自己写片段，着色器做出连 ae 都做不出来的图形特效，还支持数据可视化，柱状图，数字滚动全都能炫 粒子系统也没问题，上百个粒子的动态效果一帧一帧输出，你想想网页上能做的所有效果，它都能拍成视频给你看。最牛的是什么？ 每帧都确定可复现同样的代码，每次渲染出来完全一样。 ai 可以 直接量产视频，这在以前根本不可能，而且完全开源 ipad 二点零 gitlab 已经一万六千多颗星了。这个方向我觉得非常值得关注，我后面继续深挖，关注不走丢。
102祥子的骆驼
01:46查看AI文稿AI文稿两分钟带你高等软件测试 ui 自动化测试怎么学？今天我就结合自己整理的时代笔记，给大家把 ui 自动化学习路线梳理清楚，如果需要这些资料跟着学可以找我就行。第一个阶段，先打基础，别急着上手工具，先把前端基础知识搞明白。 h t n 没有常用标签、 css 选择器、 java script 基础操作，这些是 ui 自动化的前提。当我们结构看不懂，元素定位就是项目。推荐你先在 w 三 c 或者 mdn 过一遍，前端三件套不用精通，但能看得懂页面结构。 第二个阶段，学工具。现在做 ui 自动化， cnn 是 首选，必须拿下它的 api 简洁，速度快，支持多浏览器。面试也常问， playword 是 适应 ai 自动化的工具，多种语言都可以生态成熟，工具呢？不用参多，把 synonyms 或者 playword 玩转，就能应付大部分场景了。 第三个阶段，建脚本。 ui 自动化的核心是脚本，不是工具，也得知道怎么定位，元素怎么处理， ifring 和弹框怎么切换，窗口怎么做，等待和断言怎么上传文件怎么设计测试用力结构。 建议你找一个 web 项目，从登录到主流程实战走一遍， page object 设计模式必须掌握，这是自动化测试的标准实践。第四个阶段，五金街 u i 自动化往上走，可以懂持续集成和平台化 it， 配合 jacks 或者 github actions 实现自动化出发，多可容性化部署测试环境，形成完整的自动化测试体系。记住，单一的 u i 自动化价值有限，以计划才是你的竞争力。 总结来说呢，学习 u s 动画测试没有捷径，但有方法，选对路线比埋头苦干重要的多。大家在学习和工作中如果有任何问题，也欢迎大家一起来沟通。
43墨尺老师说软测
05:52查看AI文稿AI文稿当你想让 ai 帮你做网页的时候，你是不是也搞不懂那些专业名词，什么 html， react， css， 它们到底有什么用？我直接让 ai 做是不是就行了？我一定要搞明白它们吗？ ok， 大家好，我是 frank， 专注从普通小白视角分享怎么从零开始用 ai 和 web coding 来提升自己的生活和工作效率。 今天这一期呢，我就把这个前端和几个常见的词，用最通俗的方式跟你讲明白。我觉得你学懂之后，提升的不是说你一定要理解这些词，而是后续你怎么更好的跟 ai 去沟通。 很多小白啊，一听前端就乱了，就是不是因为笨呐，而是就像那些 html， css、 javascript， 什么 react 这种朝一起出现的时候，你很容易以为他们是可能是个不同的语言，对吧？其实你不用这样想，他们更像是一套分工， 比如说你要做一家门店，比如你要有人搭架子，对吧？有人要管长什么样，有人管怎么互动，有人也把这种负面的页面，复杂的页面整理成这种零件，给到下一家店去服用。如果网站是一家麦当劳的话， 你可以理解前端就是顾客面前的那家门店，对吧？他的招牌，他的呃菜单，柜台，比如点餐机或者座位号，取餐号，顾客能不能看懂，能不能下单，点完知道之后知不知道下一步 都是前端。而后端呢？其实我之前有讲过，就更像是厨房库存和订单系统，而负责真正的去处理业务。我们先来看 html 啊， 什么是 html？ 你 可以理解它就像是一家门店的一个结构，比如这里有招牌，这里有菜单墙，这里有柜台啊，有按钮， 包括放到网页里面就是呃，标题、图片列表、输入框，按钮这些东西。所以说 html 主要回答的一个问题就是页的页面上面到底有什么东西？然后什么是 css 呢？ 你可以理解它就像是门店的装修合同线，比如招牌呀，它要做到多大对吧？菜单要放在哪里？ 价格？那个价格单能不能看清楚？按钮是不是一眼就知道能点？所以说 css 不 止上页面变得更漂亮，更重要的是让用户少迷路，一眼就知道下一步该点什么。那什么是 java script 呢？ 啊？他更像是点餐机和店员的互动，比如说你点套餐，他的价格会变对吧？或者点薯条，然后购物车会更新你的手机号，没有体验页面会提醒你。他主要回答的一个问题就是用户 做了一件事情之后，页面会发生什么样的互动和变化啊？这就是个 javascript 的 作用。那什么是 react？ 它跟前者三者有什么区别呢？它不是一个另外一门完全替代前三者的一个语言，你可以把它理解为管理一个复杂门店的一个方法，比如说当你要有很多这种 商品卡，或者加加购的按钮，购物车，弹窗这些东西，如果按照传统的方式，你就是可能每次新增一个网页，你都重新去做，重新去写一套代码。但是 react 的 方式就是把他们拆成一个一个主键，尤其是这种长期复杂 或者一些附用标准化的一些东西。那你同样一个注意，把一个商品卡，你可能这个商品长这个样，另外一个商品长另外一个，呃，也是长这个样子，然后全球所有的麦当劳都长这个样子，那这个就是 react 的 主键， ok？ 所以 说像纯的这种 html 看板和 react 看板有什么区别呢？它不是低级或者高级的区别，而是任务不同。 如果你只是需要一个静态的报告，对吧？临时的看板，一次性的展示。我觉得单单文件 html 就 很合适，因为它不需要把这些东西抽拣成一些主键啊，因为你本本身就不需要去复用，对吧？ 但如果你以后需要更新数据，或者说筛选排序，包括登录和主复用的一个模块，你你要做一个很复杂的网站或者一个 app 啊，或者不能说复杂。但凡你要复用，那我觉得 react 就 会更适合啊， 因为他就能够帮帮你保持，一是能够减少代码的，呃呃，重新书写，对吧？那二是他能够保持所有的页面同一个主键都保持完全一致， ok？ 所以 说，当然前端不只是这么简单，就那四个叉，后面你还会遇到很多的一些专业名词，但是你都不需要， 不需要慌，你也不需要知道它怎么写，对吧？我们只需要知道有这些东西就 ok 呢。比如说 type script 啊，它是能够帮你提前找到一些错误啊。 white 呢，能够让项目跑起来 啊， time window 能够更快的去写一些样式。 root 呢，去能够管页面怎么跳转，包括 state 怎么去记住当前的变化。 api 呢？就是你怎么前端从后端去拿数据库， 对吧？然后 component 呢？呃， library 就是 现成的一些界面的零件啊。 responsive 就是 跟怎么去适配移动端和 web 端，对吧？所以说以后呢，你让 ai 去做一些前端或者看板，你就不要只跟它说做一个好看好看的页面，对吧？你能讲清楚五件事情，比如第一， 对吧？这个页面分成哪些区域？第二，整体风格长什么样，对吧？第三，点击之后发生了什么事？第四，用户，呃，这个哪些模块要附用啊？ 对吧？所以说最后要记住四句话，就是第一啊， html 决定了有什么， css 决定怎么去响应，而 react 决定呢怎么去附用。所以总结呢，也来看，就是前端就是能够让用户看懂，能点得动以及 能够拿到反馈，这就是一个完整的前端的讲解。 ok， 我是 fred， 我 们下期可能会启动一个三十天免费让你从零到一学习 ai 和 web coding 的 挑战，我们下期再见。
175FredTalk
01:19查看AI文稿AI文稿我只用了三个月时间，就从网安纯小白稳稳拿到了安全大厂 offer， 而有的人自学了好几年，却还只是个脚本。小子，其实这行真比你们想的要容易，只要掌握了正确的方法，你们学起来只会比我更快。接下来我就把我入行这么多年总结的学习路线告诉你，建议收藏死磕，三个月后你决 会来谢我。第一个月，如果以后想走企业渗透工程师这条路，学习计算机网络核心知识和 linux 系统实操是必经之路，搞懂 ip 端口、协议等概念，把考里的常用命令敲出肌肉，记忆基础打得越牢，大厦才能建得越稳。第二个月，专攻 web 安全，熟悉 circle map、 app search 等工具的使用，去 d v w a、 皮卡丘、 circle labs 等靶场进行漏洞实战，只要把 c q 尔注入 x s s 跨站绕口令等漏洞通关， 就基本上超越了百分之八十的新手。最后就是渗透实战了，企业最看重内网渗透、集权、应急响应这些硬能力，只要你真是个人才，企业绝不会吝啬给你的待遇。打开招聘软件也可以看到企业开的工资是越来越高的，你也可以去参加互网这类比赛，至少日薪高，还能给简历镀上一层真金。最后我想说， 网安这行从不拼学历，也不拼出身，拼的就是谁肯练谁实战的多。只要你真正沉下心练习，三个月真的是普通人非常好的一条出路了。由于视频时常限制，学习路线的各种细节无法全部展示完整版我可以甩给你，工具、路线、视频教程都在里面，肯定对你会有帮助的。
508曼波讲网安
01:54查看AI文稿AI文稿注意， html 才是新的 markdown！ 不 到一天，三百万人围观 cloud 工程师思考刷屏开场白，别再拿你的 ppt 和 word 文档去演示 ai 的 输出了！ cloud code 团队的工程师 stryk skipper 最近提出了一个炸裂的观点， html is the new markdown！ 这条思考在不到二十四小时内吸引了近三百万围观，直接刷屏科技圈痛点吐槽为什么 markdown 不 行了？紫 rick 指出，当 ai 生成的规划文档超过一百行， 或者涉及复杂的数据结构时， markdown 的 阅读体验极差，密密麻麻的文字堆砌，让人根本没有读下去的欲望，更别提用它来做演示了，简直是一场灾难。核心论， sriek 已经全面转向用 cloud 生成 html。 相比 markdown， html 有 三大降维打击优势，一、视觉密度与结构 html 原声支持表格列表、 svg 图标， 甚至简单的 css 样式，能让文档像网页一样层次分明，一眼就能抓住重点。二、分享即所得生成一个 html 文件，丢个链接给别人就能看，不需要对方安装特定的 markdown 编辑器，也没有兼容性烦恼 三、交互潜力 markdown 是 死的， html 是 活的。未来 ai 生成的文档可以内嵌简单的按钮、滑块或动态图标，让静态文档变成可交互的界面。场景升级， zarek 强调，二十二航空公司的 ceo 压力山大，一边是军方的合同和法律制裁，更多是在消磨，一方面呢，是自己的良心从 html 承载 ai 输出硅谷变成了军民党， 甚至到了看成品结尾呼吁，如果你还在用传统的文件格式来演示 ai 内容，真的 out 了，赶紧试试让 cloud 或 gpt 直接生成 html 吧，这才是属于 ai 时代的交付标准。
41:10css书写规则 CSS有三种书写位置： 行内样式（写在HTML标签内）、内部样式（直接写在head标签内）、 外部样式（使用外部.css 文 件）
#web #网络安全教程 #黑客 #编程 #经验分享查看AI文稿AI文稿温馨提示，本教程耗时一年，倾心打造， 全面针对零基础小白想学习网络安全，完完全全从零基础开始入门进阶，一步一步的逐渐掌握， 从电脑配置到软件安装，行业介绍，理论与实战结合，带你全面系统的进入网安行业。 同时为了保证学习效果，学习网络安全需要的软件工具，文档笔记，视频教程，攻防靶场面试宝典，进主播粉丝群即可领取。最后有什么问题 和评论区交流。那今天的话呢，就进入我们的 c s s 学习，在上节课我们讲到 html css g s 呢，共称为前端三剑客，那么 html 的 话呢，主要是用来去确定网页的主体组成部分的。 c s s 呢，主要是用来确定什么，确定我们网页的一些什么啊，这个样式确定啊，给我们的网站去进行化妆打扮的。那今天我们就是去在上节课的基础上去对网页的组成要素去进行化妆打扮。 我们先来看一下今天的学习有哪几个板块，呃，首先第一个板块呢，我们是先要去认识一下什么是 c s， 其次我们要去了解一下 css 的 书写规则啊，之后我们去了解一下一个比较特殊的样式设置的一个规则，叫做盒子模型，之后就会提到我们的 flex 布局和元素定位了，这是今天我们要学的五大板块啊， 内容还是比较充实的。我们先来看一下什么是 css 呢？ css 是 一组样式设置的规则，它主要是用于控制页面的一个外观样式的，就是控制我们这个页面的美观程度啊， 类似于什么？类似于这个有的时候我们做一个 word 文档，或者是做 ppt， 对 吧？那你看做 ppt， 我 可以只在 ppt 里面放一段文字，一张图片，但那样好看吗？啊，可能不是很美观，所以这个时候呢，就是会有些人啊，给这个 ppt 设置一些主题呀，啊，设置一些排版， 那这个主题和排版是谁去做的？在网页当中呢，就是我们的 css 去进行完成的啊，那么 css 全称翻译过来的话呢，是层叠样式表，所以有的时候我们去称呼它叫做层叠样式表啊。 前面我们说到 html 是 网页结构， css 是 网页的化妆师，那为什么要去使用 css 呢啊？结果显而易见嘛， 当然是为了让页面更加的精美啊，让我们的页面更加的好看，这是主要原因啊。其次的话呢，就是 css 这样的一个层叠样式表，它是可以实现让我们网页的一些化妆打扮的一个功能啊， 去进行啊，去与这个什么 html 网页结构去进行分离，这样的话呢，可以实现一个 css 代码的附用的一个效果，有一点点类似于在啊这个做 ppt 的 时候， 我们 ppt 的 模板，对吧？有一个这样子，一个一个好看的模板，那这个模板的话呢，跟 ppt 的 内容是分离的，当我们的模板套到 ppt 上了之后， ppt 会很美观啊，这个 css 的 话呢，它也可以实现这样的效果，我们写一套 css 之后，可以适用于适用于我们的 hmi 网页结构啊，并且可能是适用于多个网页 啊，这都是可以实现的，所以这是为什么要使用 css 的 原因，但是最根本的原因还是什么？还是让页面更精美，还是让我们的页面好看起来，这是最最最根本的原因。 好，我们在知道啊，为什么要使用 css 之后，我们来看一下这个 css 的 一个作用总结啊，美，美化我们的页面，以及实现特定的一个布局和定位啊，就是美化页面。 那么常见的 css 属性呢？在上节课的时候，其实我们有简单的去介绍到，比如说 phone 的 family 字体类型啊，比如说我们的 color 啊，这个字体颜色对不对？那么在该会的学习中，我们还会去用到 这些属性啊，待会儿还会去用到。呃，那今天我们的这个 css 书写的话在哪里写呢？同学们，我们写 css 用到的工具呢，依旧是 vsco 的， 我们并不需要去使用到新的工具，就用这个 vsco 就 可以了，就用 vsco 就 可以了。上节课你们用什么去写作业？这节课我们就用什么去进行学习啊，不需要去装新的软件。 好，那么我们今天这个 c s s 书写的话呢，就要说一下这个书写的位置是在哪里？我们刚刚提到的是书写是在哪个软件上写。接下来我们要讲一下这个 c s s 写哪里，它是去新建一个页面去写呢？还是说，还是说我们前面说到它的主呃， c s s 的 主要功能是给网页去进行化妆打扮嘛。 啊，那么我们就要去想这个化妆打扮的代码的话呢，到底是写在 ip 没有代码里面，还是说专门去创建一个文件去写 啊？同学们，这两种都可以，那么我们的这个程序员的话呢，或者是我们的开发者为 css 的 书写位置啊进行了一个分类，总共是三个分类， 第一种 css 书写的方式叫做行的样式啊，什么是行的样式呢？那这一个分类指的是我们的 css 代码写在 style 标签里面， 其实昨天我没有见到过啊，就昨天的话呢，我们有去写一个啊， h 标签，对吧？我们在 h 标签里面写了一个 style， style 等于什么？ color， red 啊，这些的话呢，其实就是我们的行的样式。那接下来我们将创建一个文件去写一下行的样式，我们打开 vsco 的， 然后去新建一个文件啊，比如说叫做 c c c 点 h t m l。 好， 创建好了之后呢，用英文的感叹号回车啊， 获取啊，就是获取到我们的一些原码之后啊，把这些没有必要的东西给它去掉啊，去掉了之后呢，我们就可以在这里面去写东西啊，我们先把这个内容改一下，我们先讲一下这个 css 位置与什么与选择器。学习好，这是我们的网页的一个什么一个标签页的名字啊，我们来运行一下。呃，运行了之后 好，运行了之后可以看到啊，他这里的话呢，确实出现了一个这样的一个标签页名。好，同学们，这个运行就代表运行成功了，代表什么？代表我们当前的这个网页啊，他是没问题的，代码没问题的。接着我们来演示一下行内样式啊，行内样式 我们直接从那里复制过来吧。行内样式， 什么是行的样式呢？写在 style 标签内部的啊，然后呢？这个 style 标签写的，呃，这个，这个 style 标签是什么？是在这个普通的 html 代码里面，这要改一下，是写在 style 属性内的啊，属性内， 并且这个属性啊，该属性 位于 h t m l 中啊，这是我们的衡量式，来举个例子啊，比如说我们这里有一个什么，有一个 h e， 或者是我用一个 d i v 来举例，同学们，用 d i v 来举例啊， 我们上几个讲过 diy 的 话呢，它没有什么特殊的含义，它就是一个包裹标签，对不对？只是说 diy 的 话呢，它可能会有一个换行的效果，所以我们这里就用 diy 来举例，我在 diy 里面写上一句话啊，这里写上一句什么？哎，行那样式，把这句话写上 好，写上了这句话写上了之后呢？接下，接下来我们来看一下啊，如果说我们想给这个，你看现在这个 diy 它的运行效果是什么样子的，在网页上就是一句话，没有任何的一个特殊的一个附加， 附加的一个样式，对不对？好，那如果说我们希望这个颜色啊，这个字体颜色变成红色，或是变成什么橙色，那该怎么办呢？哎，我们是不是可以用到这个 c s s 的 行内样式书写方式，我们可以在 diy 里面写上一个 style， 哎，写上一个 style， style 等于什么 color 啊？来看一下这个 color red 啊，这个 color red 是 什么东西？同学们， color red 的 话呢，它属于是我们的 c s s 属性啊， c s s 代码，它其实就是有很多很多这样的属性去组成的。那这个属性的话呢，一般来说，要么写在 style 的 这一个什么这一个 style 里面啊， style 属性 它要么写在我们这个标签里面，这个 style 这样的一个属性里面，它要么写在什么？它要么写在这个 hide 标签里面啊，在 hide 的 标签里面去新建 style 标签去写， 它要么写在这个外部样式里面啊，就是，就只有这几种方式，就是我们这个 css 代码放的一个位置。好，那么我们来看到的是第一种书写样式啊，第一种书写方式， 我们的 css 代码放在哪里呢？位于 html 标签当中啊，位于 html 标签当中，并且这个 css 代码永远是放在什么 style 里面的？永远是放在 style 里面的。好，同学们，那这里的话呢？哎，我们就要去了解一下， 这个写短一点，位于好，这个短一点，然后那边的话也短一点吧，短一点的话， 诶，写在 h 没有标签内。 好，这是第一种书写样式，比较简单啊。那么接下来的话呢，我们来讲一下第二种书写样式。呃，第二种书写样式的话呢，叫做什么？叫做我们的内部样式，内部样式的特点是什么？同学们，内部样式的特点是我们的 c s s 代码写在 hay 的 标签里面。 呃，那这里我们来也是用 diy 去进行举例，也是用这个 diy 啊去进行举例，那在 diy 里面写上一句话，叫做内部样式 啊，这叫做内部样式。一。好， 好，这个代码写好了之后，我们还是去运行这个代码去运行一下。哎，我们会发现一个事情，就是刚刚我们的这个行内样式，对吧？它是生效了，对吧？生效了，但是我们的内部样式它好像没有什么变化，为什么？ 是不是这个内部样式？这个 d i v 里面的内容，对吧？没有加任何的 css 设置呀。那如果说我想加，并且呢，我不希望像行内样式一样加在这里 啊，我可能说，我可能说我这个样式比较多啊，你看，比如说，我可能这个地方又又用到了这个 color， 哎，用到了这个 color， orange 啊， orange 又用到了什么？又用到了我们这一个冯头 family 啊，就设置这个字体类型啊，为楷体， 对吧？可能我的样式比较多，然后我发现我写在一行的话，好像也不是那么回事吧，我写一行这个代码就老长了，我现在才只写两个 css 代码，那如果说我再加两个，哎，我再加两个，来一个 phone size 啊，分个 size 啊，比如说来个八十 p x。 好， 你看，写那么长了之后，我们发现，其实啊，写那么长，如果都写在这个代码里面的话， h 没有标签里面的话，其实这个代码阅读起来很难受 啊，它非常的难受。那有没有办法可以把这个 style 里面内容给它提取出去呢？提取到哪里哎？我们就可以将它提取到这一个 head 当中啊，提到这个 head 头部当中，那么提取出去，哎，是怎么去提取的呀？我们直接把刚刚的这个代码放过来，可以吗？不可以啊，同学们， 只有当我们的 style 在 这个 html 代码里面的时候，才可以作为属性这样去写。当，当这个 style 在 外部的时候，在具体的 html 代码外部的时候，它得是一个标签，那它得怎么写呢？它得这么去写啊，它得这么去写， 哎，来，我们来演示一下。还要怎么去写？它得这样写啊？用一个箭括号把这个 style， 哎，给它包裹起来 之后，再把我们的 css 代码放这一个 style 里面。但是我们放进去了之后，发现一个很尴尬的事情，它报错了，它为什么报错？是因为这个前面和后面都加了引号吗？是因为这个原因吗？其实不是啊，那为什么我把 那为什么还报错呢？是因为他们写在一行吗？也不是，同学们，他们报错的根本原因是什么？是因为我们的网页并不知道这一段 c s s 代码，它到底是属于哪一个 html 代码的。 你看，我现在这里只写了一个 diy， 如果我写很多个 diy， 有 什么内部样式一啊，内部样式二，内部样式三啊，还来个内部样式四啊，你看我多写两个啊，四五，我写五个 diy。 那 同学们， 他怎么知道我这一段内容到底是对应谁的呢？是对应他的还是对应他的？还是对应他的还是对应他的？他不知道对不对？他不知道怎么办？我们是不是得想个办法让我们的浏览器知道这一段代码是对应谁的？ 好，那么我们想个什么办法呢？我们先做一件事情，先用一个花括号，哎，先用一个花括号把它包裹起来，哎，我先告诉浏览器这一段 css 它是一个整体。我先告诉浏览器它是一个整体。然后呢，我再通过 一个名字去告诉浏览器通过什么名字呢？根据名字的不同啊，我们分成了几种，几种啊？这个啊，几种？这个名词，几个名词。那么我来介绍一下，根据这个名称的不同，分别有哪些名词呢？好，那这个时候我们就可以 叫它选择器啊，选择器啊。什么是选择器？用来标识某一段代码和 html 有 代码联系的叫做选择器啊，选择器是用于标识啊，用于标识 某一段代码与某一段 c s s 代码与什么与 html 代码之间的 关联关系的啊？选择器的话呢，是用于标识某一段 c s s 代码和 html 代码之间的一个关联关系，就是这是我们的一个页面术语。那么选择器的话有几种？有好几种啊？ 没有，我们讲到三种，我们这里的话呢，主要是讲三种，对啊，第一种，第一种的话呢叫做什么？叫做元素选择器啊？元素选择器，第一种叫做元素选择器。那么元素选择器的特点是什么？他的特点是啊，他的这个特点是 以 html 名称去去关联啊，去关联这个 css 与 html 代码联系。 选元素选择器的特点是它是以 html 标签的名字去关联 css 代码与 html 代码联系的。举个例子，你看这个， 这个名字叫做 div， 对 不对？你看这个叫做 div 吧。好，我把它放上去，哎，这样它就关联上了，这样就关联上了。它怎么关联的呢？它会把所有所有这个， 所有这个 div 看到没有，所有名字是 div 的 这个代码啊，加上这些 cs 属性，给所有名字是 div 的 代码加上这个属性，不信的话我们来运行一下，看一下效果。 哎，我们运行了之后可以看到，对吧？他给所有的都加上了这个属性，但这个时候可能会有同学说，老师，不对啊，你不是说给所有的 都给所有的这个 diy 代码都加上这个属性吗？哎，那这个，这个，这个什么？第十九行的这个，哎，这个行那样式，他也是 diy， 怎么他的颜色是红色，他不是橙色呢？ 不对吧，你看是不是你会感觉不对，对不对？那我告诉你，其实是对的啊，那这个代码它其实有两个属性，它有两个颜色属性，它就有这个红色颜色属性，它又有这个，呃， 橘色啊，橘色的颜色属性。那当我们当一个代码，当一个 tm 代码有两个相同的属性设置的时候，它到底是以谁的为准呢？同学们， 告诉你，谁的就是哪一个 css 代码离他近，就以，就以谁为准。你看这个这个 css 代码离他近，所以他就以他为准 啊，就以他为准啊，是这么回事，这个时候就得体现到啊，一个情况，什么情况？就是我们的样式冲突的一个情况，所以我们的下方的话，在前面的话呢，可以再加一个，就是，就是介绍一下这个样式冲突啊。冲突？什么是样式冲突呢？就是说啊，可能说 就是对于啊，对于同一个 html 代码啊进行了重复的 css 样式 设置，就对同一个这个 html 代码进行了重复的这个 css 样式好，当重复的情况下啊，当重复的情况下，谁离什么离这个代码近？谁离 html 近啊？近， 近啊， 听谁的，那谁离得近啊？那肯定是以这个行那样式近吧？那肯定是以这个行那样式近吧。所以说行那样式的权重是最高的，他的权重很高啊，他的权重是第一的。 好，这个大家了解一下，权重很高 啊，权重很高，因为他离这个代码最近啊，那这个的话就是说到了我们的样式冲突以及选择器中的啊，这个元素选择器。那个同学可能会说，老师你虽然上面讲，但是我还是觉得 当时我还是没有看到他是怎么同时拥有两个颜色属性，对不对？好，那这里的话呢，我就给大家看一下好不好？ 嗯，就是给大家看一下这个 diy 是 怎么同时也有两个颜色属性，并且呢它是怎么去进行选择的？来，我们去打开我们的浏览器刚刚的话运行的这一个页面啊，接着啊，在浏览器空白的地方注意啊，不要点击这个文， 这个有文字的内容啊，我们在空白地方右击鼠标点击检查去打开我们的开发者模式，之后的话呢？哎，我们将鼠标，你看到没有，这个开发者模式右边的这个什么右边有一个这样的小小箭头嘛？我们将它点在这句话上啊， 点在这句话上，点了之后呢，来注意了，在下面是不是有内容发现没有？发现没有。这个 d i v 它有什么？它有这个红色属性， 他是不是也有这个橘色？他有吗？他有，他前面这个勾勾是勾上的，他有。那为什么没有用到这个橘色呢？就是因为样式冲突了，这两个 color a 出现哪个样式冲突都是设置颜色的，听谁的？听 我们的这个行那样式的，听行，那样式，听他的，就把这个给他干掉了啊，那这个的话呢，就是我们的这一个 啊，选择器的权重问题啊。选择器的，呃，就是我们这个样式的一个权重问题啊，就是谁离代码近啊，就听谁的，谁离代码近就听谁的。好，那么刚刚我们是讲完了这个元素选择器，那有的同学会疑惑说，老师除了元素选择器之外，难道没有别的选择器了吗？ 啊，你看刚刚那个元素显示器啊，它的这个关联范围这么广阔，只要是 diy 的 全都关联上了，那我有的时候，我在做一个网页的时候，可能我会有很多个 diy， 我 肯定不希望每个 diy 都有同样的样式吧， 那肯定不行啊，好，那这个时候怎么样去？哎，怎么样去让这个选择器啊，它关联的代码更加精确呢？同学们，这个时候我们要推出我们的这个类选择器了， c l a s s 选择器 啊，这个选择器它的特点是什么呢？特点是，哎，只会关联 相同类名的的 h t m l h t m l 与 css 代码联系。 什么意思啊？它只会关联具有相同类名的这个 h t m l 跟啊，然后与这个 c、 s、 s 吗去联系起来，什么意思呢？啊？我们来看一下，我写一下大家就知道了。比如说啊，我想 我们刚刚这个元素选的界面放的太广了，然后呢，我想啊，我就只需要我想给这个什么二三，对吧？给他设置一些其他的样式。我想设置什么样式呢？我想把这个颜色改了，我觉得这个橘色不好看，哎，我想把它改成什么啊？改成这一个 红橙黄啊，改成黄色或者改成绿色。那这个时候我可以用到我们的 class 显示器，那这个 class 怎么用呢？哎，咱们就直接给这个 d、 i、 v 加上一个 class 类名啊，给他一个类名啊，比如说给他一个什么？给他一个，给 你看他一个 x 零零一啊，这个名字随便你取，看你高兴。你只要不以数字开头，不用中文就行啊，这个地方随便你取，然后你不包含那些奇奇怪怪的符号，不要包含这种什么特别奇怪的符号，这种符号就不要包含了，你就正常的用英文开头，可以加数字就行。好，你看 现在第二十四行，第二十五行这两行代码，同学们，它是不是有了一个相同的 class， 另名，零 x 零零一，对不对？好，那么我们就可以在上方再去写这个 c s s 代码了。同样的啊，为了让我们的浏览器知道哪一段代码是跟哪一段代码产生关联的，我们得先得用一个花括号，把这个什么，把这个 c s s 给它关联起来，之后在里面写这个 c s s 代码， color， c o， l， o r color， 然后给它来一个 green 啊， g r e e l。 写完，但是写完了之后，我们在想， css 代码我们是早怎么写了，并且我们也知道，是啊，得用这个花苞给它裹起来。但是我这个地方到底放什么呢？我是指，我是放这个 x 零零一就行了吗？我就放一个 x 零零一就行了吗？但是如果说我就放一个 x 零零一的话，这个时候我就想一个问题， 看元素选择器，对吧？就是一个名字，当我的类选择器还是一个名字吗？哎，这个浏览器到底能不能分得清楚？哎，我这个 div 啊，就是我们这个元素选择器和类选择器的区别啊，它分得清楚吗？同学们，浏览器它分不清，为什么？因为 html 代码太多了， 包括有的时候 html 里面你自己创代码，它也不会报错，你就你自创，你自己写，你自己创代码，它也不会报错， 所以说他分不清，他分不清怎么办？同学们，我们是不是得啊，得给这个 class 显示器加一个标识符号，对不对？好，那么在，那么在我们的这个啊写代码当中呢，我们的程序员就想到可以用一个符号去给这个 class 显示器做一个标识， 只要是这个名字加了这个符号，哎，我就知道他是类选择器，那加什么符号？加到哪里呢？那是不是一定得加到最前面才最显眼，对吧？加到最前面是最显眼的，那加什么符号呢？哎，我们的程序员想到可以用点去作为这个 class 的 一个类选择器的标识符点， x 零零代表当前这个 x 零零，它是一个类选择器名，它是一个 class 选择器的名称， 那这样的话呢，浏览器也能够认识了，我们程序员去阅读代码呢，也能够看懂了，所以这个就是我们的什么，这就是我们的类选择器啊，类选择器它的标识符号啊，用什么？用这个点去 进行标识啊？去进行标识，类选择器，我们的元素选择器呢？无标识符号啊，它是没有标识符号的，那这个的话就提到了我们的这个类选择器和元素选择器，然后刚刚我们说到说类选择器它可以更加精确，对不对？它只会给， 只会给什么？只会给有相同类型的 h t， 没有代码去与 cs 代码产生联系，也就说他只会给第二十八，第二十九哈，这个内部样式二三去加上这个绿色的 颜色设置，来我们看一下效果，我们去运行一下，看效果是不是真的啊？我们发现果然没错，果然没错，并且如果说大家想去检查里面再去啊验证的话，你会发现啊，它确实把这个 orange 这个颜色也给干掉了，然后用到是什么？用到是这一个类选择器的 x 零零一同学们，那这是什么选择器啊？这就是我们的这一个类选择器啊，类选择器它的这个选择范围会更加的精确，会相对于元素选择器更加的精确，但是呢，它也不是说完全精确到 很细节的那种啊，所以说在我们的 cs 当中呢，还存在第三种选择器啊，这种选择器的话呢，也是平时用的很多的叫做 id 选择器。 id 选择器的特点是什么呢啊？特点是在整个 html 网页当中啊，我们的一个 id 选择器只会对应一个 html 代码，它的特点是啊，它的特点是 啊，一个 h， 一个 id 选择器 只会对应一个 h t m l 代码， 这样的话呢，就可以精确到啊，每一个什么可以精确到每一个 h p o 具体的某一个 h p o 代码，它对应的 css 是 什么？它的这个啊，是 css 设置更加精确， css 代码的关联呢？代码的关联 极其啊精确啊，非常精确。这是我们的 id 选择器，那么 id 选择器用什么去进行标识呢啊？ id 选择器的话呢，是用这个井号去进行标识啊，标识 好，这是我们的这个 id 选择器，那么我们来用一下这个 id 选择器啊，那么通过刚刚的学习，我们会发现啊，就是刚刚我们给这个二三都加上了类名，它现在都变成绿色，对不对？但假设我把这个类名啊，把这个类名的适用范围再 广阔一点，哎，我给二三四都加上这一个类啊类的一个选择器之后，我这个二三四对吧，二三四都变成绿色，对不对？好，接下来我要做件事情， 就是我需要很精确的选中这个内部样式三这一行句子，这行句子，然后呢，我在其上再加一个属性，哎，我要把颜色改成蓝色。 好，现在我的要求更加精确了，我只需要他这一行，这一行句子变成蓝色，对不对？好，所以这个时候呢，就可以给这个第三十行单独的加一个 id 选择器， 等于什么名字随便取啊，可以叫什么？可以叫 y 零零一，我这个名字是随便取的。好，那这里的话也不要放上一些奇奇怪怪的符号就行了。之后我们先写一个井号，井号表示后面的名字是 id 选择器，然后写上括号，啊，括号表示这里面的一段内容是 css 代码，然后我们给它加一个颜色， color， color， 不 录，不录啊， b l u e 不 录。 洗完，洗完之后我们再看一下效果，哎，我们会发现这一行确实变成蓝色，那这个的话呢，就是我们的 id 选择器，通过刚刚的学习，我们会发现啊，随着 随着我们的讲解，这个选择器的精确程度对高，呃，就是精确程度会越来越高，对不对？那精确程度越高呢？其实也对应了一个东西，叫什么叫做权重关系， 在 css 里面，你的精确程度越高，你的权重越高啊，不信的话呢，我们可以去看一下刚刚的我们这一段代码里面的这个，什么里面的这一个， 哎，不是这个啊，是这个蓝色的内部样式三，我们发现这一行代码它既有什么？它既有元素显示器，对吧？啊？元素显示器，这个 orange 这个颜色给它干掉了， 它又有类选择器，类选择器呢，也被干掉了，它还有 id 选择器，那为什么它最终用的是 id 选择器呢？就是因为 id 选择器它更加的精确， 所以说它的权重最高。那其次是谁？其次就是类选择器，不信的话，我们换一个来看一下这个绿色的，你看这个绿色内部样式二，它既有，它既有元素选择器，它又有类选择器，那听谁的？ 哎，听累的。因为累，它的精确程度会比什么？会比元素选择器高？那什么都没有的情况下，就只有一个，一个元素选择器的情况下，听谁的啊？就听我们这一个元素选择器的啊，那这个的话就是我们的什么？这个的话就是我们的这一个 选择器的一个权重啊，权重问题，所以说我们可以排个序啊， 这个 a 选择器是大于啊，这个累选择器 又大于什么？又大于我们的元素选择器啊，是这样的一个对应关系，这样的一个对应关系，大家了解一下就行了啊。这个是权重的一个问题。 id 感觉和 class 重叠了。不一样啊，因为 class 的 话呢，它是可以对应多个 html 代码的， id 的 精确程度会更高，虽然 class 也可以指 只选择一个。呃，但是 class 的 话呢，它确实可以用在多个 ip 模上。所以说啊，所以说有的时候为了去搞不搞混，保不搞混这个选择器，我们就还是加了一个 id。 嗯， 好，同学们，那么到目前为止的话呢，其实我们已经讲了两两种样式书写了，然后呢，我们还讲了三个选择器，对吧？啊？现在我们讲了哪两个样式书写呢？我们讲了这一个 行内样式和内部样式，然后呢我们做了一个，然后我们学习之后发现啊，这个行内样式的权重是大于内部样式，对不对？我们学习之后发现什么？发现这个行内样式的权重是大于内部样式的，所以我们在上方做一个总结 啊，这个行内 是大于内部样式 大于的。用 id 的 时候可以直接不用 class 不？ 呃，可以啊，你可以不用，你可以不用 class 啊，你用 id 的 时候可以不用 class 啊， 看你自己，看你自己的使用，只是说有这几种选择器，但是你到底要用哪个，这个就看你自己的选择，这个没关系啊，这个没有限制 好。呃，现在我们又就了解到啊，行内选择器的样式的话呢，是大于内部选择器的，那我们还有一个选择器没有讲到叫什么叫做外部样式选择器 啊？那什么是外部样式选择器呢？它指的是来我们看一下外部样式，我们又叫做外连样式，它指的是呢将我们的 h t 没有代码文件中的 css 代码 提取出来，单独的去做一个文件。呃，就像我们来演示一下什么叫做提取出来单独的做一个文件的，你看这一段是 css 代码对不对？好，我们就可以把它去给它 ctrl 加 c 啊，然后剪切出来。剪切到哪里呢？哎，我们剪切到外面啊，去新建一个文件，叫这个，呃，叫叫这个 ccc 下划线零零二。好吧，我们叫 c a c 零零二之后我们要写上它的后缀，同学们这里要注意了，后缀呢，不能叫 h t 秒后缀的话呢，得写成 c s s 啊，那这个就是一个 css 的 一个样式文件了，我们将 css 代码粘贴到这里，粘贴到这里了之后，我们先去运行一下什么？先去运行一下 cht？ 没有我们发现啊，刚刚的话呢？呃，下面的这几行什么内部样式一，内部样式二，内部样式三到五， 它们的样式设置都没有了，对不对？没有是为什么？没有是因为我把 css 代码给它挪出去啊，挪到了一个单独的 css 文件里面了。 那如果说我想在 html 里面去引入这个 css 文件，我要用到你们的 css 代码怎么办呢？很简单，这里的话呢，我们就可以用到一个一个指令啊，叫做 link 啊， link 令可指令啊，那么令可指令的话呢，是一个引入的一个指令，它的功能是什么？引入 css 文件在令可当中呢，我们必须写上两个属性值啊，要写上两个属性来，我们要写上两个属性设置吗？复制过来。第一个属性设置呢，是表示你要引入的文件是什么类型？ style style shade 表示的是 cs 的 代码文件类型。第二个属性是什么？第二属性是一个 herf 属性，用于指定你要引入的文件在哪里。那么我们当前注意了，一般 css 文件都在 html 的 代码附近啊，都在附近， 那么当前呢，这个 c s s 代码在 html 旁边，所以我们就可以用一个点斜杠去表示啊，去引出这一个 c c c 零零二点 css， 你 看这么样引入了之后呢，我们再去运行代码，你看 是不就能用上了呀？那这个的话呢，就属于是我们的一个外连样式，又叫做外部样式。外部样式呢是写在哪的呢？外部样式是写在这个呃，是单独写在一个文件里面的，来我们把这个名字给它写上 啊。外部样式是使用外部 css 文件啊，去进行写代码的， 外部样式的话呢，在项目里面比较常见，当然我们自己学习的话呢，只要认识他就行了，不需要自己去写啊，他这块是外部样式。那么外部样式权重是什么样？同学们，外部样式权重的话呢？跟我们的 h 跟我们的这个内部样式权重是一样的， 外部样式权重跟内部样式的权重是一样的。 那么到底如果说，如果说发生发生这个外部样式和内部样式冲突的情况下，听谁的啊？谁离代码近听谁的啊？当当这个什么当啊？发生这个内部样式与外部样式冲突的时候 啊？外部样式冲突的时候，谁离着离这个 h t m 啊？代码近 听谁的啊？谁离代码先听谁的？我们可以举个例子。举个什么例子呢？我们在下面再写一个 diy， 这个 diy 的 话呢，用来去写这一个外部样式 啊，这个是引入啊，给它换个行吧，换个行的话呢，好看一点。好，呃，把这个改一下叫做外部样式。 外部样式一。 好，我们给这个 d r v 啊加一个 id， 显示器 id 等于什么 id 等于 啊？ z 零零一啊， z 零零一之后呢，把这个 z 零零一啊给他复制上去。我们在在内部里面呢也写一个 css 的 一个样式代码 啊，比如说还是来一个卡喽颜色吧，我在内部里面给他设置成了红色，我在这个内部样式当中给这一行 外部样式一这个文字啊设置成了红色之后呢？我又跑到哪里去呢？我又跑到 c 零零二里面去，哎，也给这个 g 零零一啊，这个 id id 啊，这个对应的这个 atm 的 代码给他设置颜色，设什么颜色呢？我给它设置成了这个粉色 pink 这个皮粉色吧。好，同学们，我先补运行代码，大家猜一下，最终啊，最终我们这个第三十六行，它的运行效果是什么颜色？大家可以思考一下。最终这个第三十六行是什么颜色？可以思考一下，你们觉得是什么颜色， 是粉色还是红色 啊？仔细看一下这个这个外，这个内部样式和外部样式它的位置啊，看它的位置。好，我们来运行一下，我告诉你是什么颜色啊？它是这个粉色，它是粉色啊，它是粉色。为什么是粉色？ 因为你看他是先啊，这上面他是先先设置红色之后，对吧？他这个红色设置完了之后，哎，我又引入了外部样式，外部样式里面又对他设置成了粉色。 我们前面说过，嗯，当内部样式与外部样式发生冲突的时候，谁离 html 代码近，听谁的，谁离得近。那肯定是这一行代码离得近吧，这一行代码离得近吧，那就肯定就听它的呀，它是干嘛的？它是用来引入这个外部样式的啊，所以说 听他的。对对，谁离代码近，听谁的啊？谁离代码近听谁的。那这个的话，就是我们的这一个 css 的 这一个样式权重问题啊，我们主要是说说到三种样式书写方式以及呢三种选择器。 呃，当然除了这三种选择器之外，没有别的类型选择器了吗？那肯定也有别的同学们在笔记里面的话呢，有给大家做一个拓展啊， 除了我们刚刚说到这些什么啊，元素选择器，类选择器啊， d 选择器之外呢，还有层级选择器，还有这个什么选组合选择器，还有什么这个通配符选择器啊，还有什么伪类元素选择器等等一些，那这些的话呢，都是拓展，大家课后的话呢，可以 可以去看一下啊，这个的话不要求去掌握啊，因为我们不是做前端开发的，所以这一块的话呢，只要了解就行，我们主要是了解到几个用到的非常多的啊，用到的很多的，这一个 css 的 一个选择器就可以了啊，学到前三个就行，前三个你搞明白了就可以了，后面的话呢，大家感兴趣可以去看一下。 好同学们，那么到目前为止的话呢，那么到目前为止的话呢，我们的这个 c s s 的 书写规则就讲完了。 c s s 书写规则呢，我们介绍完了，现在大家应该知道诶，这个 c s s 是 怎么用的了吧，写哪里了，对不对？
50萌新玩网安
01:34查看AI文稿AI文稿ai 产出越来越多，你却越来越读不完。你跟 ai 对 话，百分之八十的时间不是在思考，是在读它吐出来的文字。这个死循环， osropik 的 工程师已经找到解法了。 osropik 的 工程师 sarik 就是 做 cloud code 的 那个团队的，他前阵子发了篇文章，标题翻译过来就是 html， 有 效到离谱。 他说了一句话特别扎心，超过一百行的 markdown， 他 自己就读不下去了，更别说让公司里其他人读。为什么 markdown 就是 纯文字，他没法放图，没法对比，没法调参数， ai 越强，他越撑不住。 markdown 是 给人好读设计的，但当 ai 的 存储量远远超过你的阅读量，他就不够用了。三种场景极其实用。 先说第一个拿来比较，比如你让 ai 做一个页面设计，不确定哪个方案好，直接让他一次升六个版本，全部排进同一页，并排对比，一眼就能挑。再看一个拿来理解。比如你看不懂一段代码逻辑，让 ai 读完之后，直接生成一个网页流程图，重点标注全在一页上。 还有一个拿来决策。比如你有三十个任务要排优先机，让 ai 做一个可以拖拽的看板网页， ai 先帮你排好，你觉得不对直接拖，调完一键导出。 但我要说清楚，不是让你用 html 全面取代， markdown 适合处理文字， html 适合处理状态对比和交互。 最关键的是，你根本不需要学前端，直接跟 ai 说一句，帮我做成 html 文件就行了。今天就去试一次，下次 ai 给你吐一大堆文字的时候，让它做成网页给你看，你会发现审核效率直接翻倍。
32别太离谱了
11:18查看AI文稿AI文稿很多人以为 markdown 是 ai 写作的最佳格式，但这可能已经过时了。当 agent 能写方案、画图、做原型、做交互时， html 才更像它真正的输出画布。 markdown 它简单可移植， 具备一定的复文本能力，也方便你编辑。 cloud 甚至已经非常擅长在 asci 挨字母画图。但随着 agent 变得越来越强， 我越来越觉得 markdown 变成了一种限制。我发现自己很难阅读超过一百行的 markdown 文件。我想要更丰富的可视化效果、颜色和图标，也希望这些内容能够轻松分享。我现在也越来越少亲自编辑这些文件， 而是把它们当做规格说明、参考文件、头脑风暴输出等，即使我需要修改，通常也是让 cloud 帮我改。 这就削落了 markdown 最大的优势之一。我已经开始更偏好用 html 作为输出格式，而不是 markdown。 我 也越来越多地看到 cloud code 团队里的其他人这样做，原因如下，一， html 相比 markdown 能传递更丰富的信息。 它当然可以做简单的文档结构，比如标题和格式，但它还可以表达各种其他信息，例如用表格呈现结构化数据，用 css 表达设计数据， 用 svg 做插图，用 script 标签展示代码片段，用 html 元素、 javascript 和 css 做交互， 用 svg 和 html 表达工作流，用绝对定位和 canvas 表达空间数据， 用 image 标签展示图片。我甚至可以说几乎不存在。 cloud 能提取，但你无法用 html 高效表达的信息集合，这让 html 成为模型向你传递深度信息， 并方便你审阅的一种高效方式。我发现，如果没有这种能力，模型在 markdown 里就会做一些低效的事情，比如 askey 图标。更典型的是像 cloud code 截图中那样，用 unico 的 字符估算颜色， code code 试图在 markdown 中展示颜色。二、视觉清晰度与易毒性随着 cloud 能完成越来越复杂的工作，他也会写出越来越长的规格说明和计划。实际使用中，我发现自己通常不会认真读超过一百行的 markdown 文件， 更不用说让组织里的其他人去读。但 html 文档更容易阅读。 cloud 可以 用视觉结构组织内容，例如标签页、插图、链接等， 让文档更适合导航。它甚至可以做成移动端响应式布局，让你在不同设备上有不同的阅读体验。三、异于分享 markdown 文件其实不太容易分享， 因为大多数浏览器不能很好地原声渲染它们，你通常不得不把它们作为邮件或消息附件发送。而 html 只要上传文件，比如上传到 s 三，就可以直接分享链接。你的同事可以在任何地方打开并引用它。如果你的规格说明、 报告或 pr 说明是 html， 别人真正阅读它的概率会高得多。四、双向交互 html 可以 让你和文档互动，比如， 你可以让它添加滑块或旋钮，用来调整设计参数，或者让你调整算法中的不同选项，看结果会发生什么变化。你还可以让它提供一个按钮，把这些修改复制成提示词， 再粘贴回 cloud code 可以 阅读我关于 playgrounds 的 帖子，查看更多这种双向交互的事例。五、数据摄取为什么用 cloud code 来做 html 文件，而不是 cloud ai 或 cloud design？ 一个重要原因是 cloud code 能摄取大量上下文。 比如在写这篇文章时，我让 cloud code 读取我的代码文件夹，找出我生成过的所有 html 文件，对它们进行分组和分类，然后生成一个 html 文件， 用图标展示每一种类型。你在这篇文章中看到的图标就是这个过程的直接结果。除了文件系统， cloud code 还可以通过 m c p 获取更多上下文，比如 slack、 linear 等。也可以通过浏览器，比如 chrome 中的 cloud， 还可以读取 git， 历史等。六、它更有乐趣用 cloud 制作 html 文档就是更有趣，也让我更有参与感和投入感。使用场景为了更具体，我做过很多不同用途的 html 文件。当我开始研究一个问题时， 我不会只期待一个简单的 markdown 计划，而是会期待生成一组 html 文件。比如，我可能会先让 c l a u d e c o d e 头脑风暴，并创建不同方案的探索稿，然后我会让它深入展开其中一个方向， 也许生成一些原型或代码片段。最后，当我觉得方向不错时，再让它写一份实施计划。当我对计划满意后，我会开启一个新绘画， 把这些文件全部传进去，让他执行实现。在验证阶段，我也会让验证 agent 读取这些文件，这样他就能拥有更完整的上下文， 知道真正需要验证什么。生成六种明显不同的方案，分别在布局、语气和信息密度上做差异化，并把它们放在一个 html 文件的网格中，方便我并排比较每个方案，标注他所做的取舍。 创建一个完整的实施计划，写成 html 文件。 html 使用场景一、 代码审查与理解代码在 markdown 文件里可能很难阅读，但用 html， 我 们可以渲染 def、 注示、流程图、模块图等。你可以用它来理解 agent 写出的代码，进行代码审查，或者向审查你代码的人解释 pr。 我 发现 这通常比 github 默认的地赋式图更好用。现在我每次提交 pr 都会附上一个 html 代码解释器。二、设计与原型 clod design 基于 html， 因为 html 在 设计表达上非常强积，支持你的最终产物并不是 html。 clod 可以 先用 html 草拟设计， 然后再用你选择的语言实现，比如 react swift 等。你也可以用 html 做交互原型，比如动画、动作等。可以让 cloud 做滑块、旋钮等，让你精确调试想要的效果。我想原型设计一个新的 checkout 按钮， 点击后它先播放一个动画，然后快速变成紫色。三、报告研究与学习 cloud code 非常擅长整合多个数据源的信息，并把它们转成可读性很高的报告。你可以让 cloud 搜索信息代码库、 git、 历史互联网等，然后用它为你自己、管理层或团队生成非常易读的报告。你可以把它做成长篇 html 文档、交互式解释器，甚至是焕灯片或 deck。 可以 要求 cloud 使用 svg 制作图标，帮助可视化。 例如，我写关于 prompt caching 的 帖子时，就让 cloud 读取 get 历史后，为我准备了一份深入的 html 研究文件，用来理解我们对 prompt caching 所做的所有变更视力提示词。我不理解我们的 rate limiter 到底是怎么工作的。 请阅读相关代码，生成一个单页 html 解释器，包括 token、 bucket、 流程图，三到四个带注视的关键代码片段 以及底部的注意事项。部分目标是让人读一遍就能理解，适合用于总结某个功能是如何工作的。向我解释一个概念， 给老板的周报、给管理层的事故报告、 svg 叉图、流程图、技术图标等。四、 自定义编辑界面有时候仅靠文本框，很难描述你想要什么。这种情况下，我会让 cloud 为我构建一个一次性编辑器，专门服务于我当前处理的这份数据。它不是产品，也不是可附用工具， 而是一个单文件。 html 专门为这一次任务定制，关键是最后一定要有导出能力，比如复制为 js 或复制为提示词按钮。请做一个 html 文件， 把每个公单作为可拖拽卡片放到 now next later cut 四列中。请先按你的最佳判断域排序增加一个复制为 markdown 按钮，导出最终排序， 并为每个分组附上一句话。理由，常见问题，我已经向很多人讲过，我为什么转向 html， 也看到了一些重复问题。它不是更浪费 token 吗？ markdown 通常确实使用更少 token， 但我发现 html 增加的表达能力以及我更有可能真正阅读它最终带来了更好的输出。随着 opus 四点七拥有一百万上下文窗口， 这部分额外 token 占用在上下文窗口中并不明显。你现在什么时候还用 markdown？ 老实说，我几乎已经完全不再使用 markdown 了，不过我可能确实偏向 html 极端主义者。 我该如何查看 html 文件？我通常直接在本地浏览器打开，它也可以让 cloud 帮我打开。 如果需要分享链接，可以上传到 s 三。这不会比 markdown 生成更慢吗？确实会更慢， html 可能比 markdown 慢二到四倍，但我发现结果值得版本控制。怎么办？这确实是 html 最大的缺点之一。 相比 markdown， html 的 地方很嘈杂，也更难审查。怎么让 cloud 符合我的审美，而不是做得很丑？ 前端设计插件可以帮助 cloud 生成不错的 html 文件，但如果你想匹配自己公司的风格， 可以让 cloud 根据你的代码库创建一个单独的设计系统 html 文件之后，你就可以把这个设计系统文件作为其他 html 文件的参考，保持参与感。 以上所有内容想表达的是，我使用 html 的 真正原因，是它让我在和 cloud 写作时更有在场感。我曾经开始担心，因为自己已经不再深入阅读计划，最终只能把选择权交给 cloud。 但现在我很高兴地说， 使用 html 之后，我比以前更能参与到 cloud 的 工作过程中。希望你也能有同样的体验。
56无疆AI
01:29查看AI文稿AI文稿你写 html， 它自动变成视频，不是特效，不是剪辑软件，是一个开源框架，发布两周就冲到 github， 一 万六千星 做视频。以前你要学 p r a e 或者花大价钱找剪辑师， ai 视频工具大多只能生成十几秒的片段，而且你根本控制不了细节。现在有个新思路，用你最熟悉的 html 和 css 来写视频。 hyperframes 由黑剑团队开源，核心理念就一句话，写 html 渲染视频，为 ai 编程代理而生，写各网页加时间线标记框架，逐帧捕获输出 mp 四，支持 g s a p 动画 tailwind、 c s s 甚至 lottie 和 three js。 怎么做？给 ai 代理一句提示词。比如用 hyperframes 做一个十秒产品介绍，它自动搭建项目，写 html 加动画，生成配音，最后渲染 mp 四。 你甚至可以用自然语言改稿，标题放大，换深色背景加弹出，改 html 就 行，预览实时刷新，不用碰剪辑软件 发布仅两周， github 新标从三千标到一万六千，内置五十多个开箱即用的模板，模块从转场数据可化到特效全覆盖， apache 两点零开源协议， note g s 加 f pack 就 能跑。 以后做视频可能真的不需要剪辑软件了。关注锋芒 ai 追星，不盲从，实测出真谛！
61锋芒AI
01:43查看AI文稿AI文稿不会编程也能自己做网站了？不是套模板，不是找外包，是直接用 codex 让 ai 帮你一步步搭出来。 以前做网站，你得懂 html、 css、 javascript， 一 行一行敲代码，现在不一样了，你不会写代码也没关系，你只要把需求说清楚， codex 就 能帮你拆页面，写代码，跑项目，修报错。但新手最容易翻车的地方，就是上来一句 帮我做一个网站，听着像需求，其实等于什么都没说。你没说这个网站给谁看，做什么用，有哪些页面，什么风格，按钮点了去哪，他只能边猜边写，最后做出来就像一个临时拼的模板站。 普通人想用 codex 做网站，记住一个公式，你是谁，给谁看，放什么内容，要什么风格，最后怎么验收。 比如，你别说帮我做个人网站，你要说我想做一个 ai 教学个人网站，给刚接触 ai 的 普通人看，首页要有个人介绍，课程入口、案例展示和联系方式，整体干净专业，手机上也要好看。然后别急着让他直接写代码， 先让 codex 给你出网站结构，首页从上到下放什么，每个按钮跳到哪里，需要哪些页面，哪些地方用图片，哪些地方放文字，你先确认这张图纸对不对，再让它开始施工。 写完以后也别直接信他一句完成了，让他启动项目检查报错，打开页面看效果，有问题就一个一个修，不要一口气乱改。 所以不会编程不是问题，真正的问题是，你别一上来就让 ai 乱盖楼，先把需求说清楚，再让 codex 画图纸，写代码，跑测试。这样做出来的不是一堆看不懂的代码，而是一个你真的能慢慢改、慢慢用起来的网站。
43Ai 彭于晏
03:18查看AI文稿AI文稿大家好，不知道大家最近有没有这个感受啊，现在 ai 不是 不能写，或者不是不会写正确的东西，而是他写的太多了啊，动辄给你几千行的 markdown， 实在让人很头疼。最近呢， astropic 的 工程师呢，在推上发了一个帖子，它的内容总结成一句话，就是 h t m l is the new markdown。 它公开了一个视力合集，里面大概有二十多个 h t m l 的 模板，其中包含视力演示， code review、 研究报告、状态复盘，甚至有自定义编辑器 markdown 呢。咱们说到本质，它还是一个文档文件啊， h t m l 不 一样，它天生适合 a 着呢去进行编排，它可以有布局，有颜色，有筛选，有图标，有交互 capathy 呢。在这个圆推下面也发表了类似的想法，他说呢， ai 的 输出呢，不应该只停留在纯文本和 markdown 上， 因为人类的大脑呢，更适合多模态并行的输入方式。接下来呢，我分享一个我最近在培训项目时候使用的一个纯 html， 由我的 codex 帮我设计完成的项目面板，其中包含我很多实际工作中需要的功能。这个就是 codex 帮我搭建的一个我的 ai 视频培训的运营工作台。 这整个页面呢，是我让他帮我脱敏了客户的信息之后呢，重新生成。那么一个 demo 功能上呢，是一模一样的，大家可以看一下他整个的这个功能的划分。 最上面呢，是我今日的工作的重点，还有待处理的事项和一些最近的更新。这些内容呢，全部是由我跟 codex 沟通，我日常工作时候，我让他跑一个 skill， 然后帮我同步到我的工作台上的啊，然后这边也有一些格式化的内容， 下面就是一些可以交互的内容，比如说这个客户案例的解锁，然后我可以根据之前服务过客户的这些行业，然后客户的类型，还有 b 端的客户，有 c 端的客户，有行业的客户， 培训的周期，然后核心的目标去找到我相对应之前的客户案例啊，有我课程的这个模块库，然后里面有一些脚本生成的内容啊，视觉资产呢，分镜脚本啊，视频生成啊，项目交付方面的内容。还有一个行业打法，就是我之前做过哪一些的行业， 他沉淀下来的这一部分，一些方法论的内容，我会让 callix 帮我沉淀到这里。这个是我比较喜欢的一个功能啊，他呢是可以帮我准备一份草稿，比如说我现在要给一个 b 端的企业，他是教育行业做两天的工作坊， 核心目标呢是内容的体校啊，参考案例是我之前做过的其他的培训机构的内容，然后我可以让他直接帮我整理一份草稿，可以看到他现在正在工作啊， 它这里有个预览页，它会生成一个独立的 html 的 这个页面供我使用，这个是可以帮我理清一些思路啊，它毕竟只是一个草稿 啊，比较深度的内容呢，除了你自己准备之外，你还要跟你的 ai agent 去做深度的沟通。再跟大家讲一下用这个 html 的 一些缺点啊，第一就是它的 token 的 消耗肯定是明显要高于输出 markdown， 因为它不光是要输出这种文案类型的内容，还要做交互，还要做视觉，都是比较消耗 token 的。 第二个呢，就如果你生成的这个 html 呢，它的信息的获取并不是在你日常工作流中，你跟 ai 一 阵的沟通去 同步过来的话，修改的话就需要让 ai 去修改啊，因为我这边呢，每一次的很多的工作的复盘，包括资料的查找都是跟 a 阵进行沟通之后完成的，所以呢，它自然而然的就可以帮我同步到工作台这边。好的，这次视频就到这，谢谢大家。
71王温特
![48-HTMLCSS零基础-[扩展]行高的取值【渡一教育】](https://p3-pc-sign.douyinpic.com/image-cut-tos-priv/22b55f88699a96cdd70b066058c20ac3~tplv-dy-resize-origshort-autoq-75:330.jpeg?lk3s=138a59ce&x-expires=2103127200&x-signature=FW9cnAyZ0n0rUl115dbmfohyDMs%3D&from=327834062&s=PackSourceEnum_AWEME_DETAIL&se=false&sc=cover&biz_tag=pcweb_cover&l=20260827022150D7882B45571918556C14)