如何用mac编写html

在浏览器里面搜索 h builder， 然后点击进入到官网，点击 h builder， 进入到 h builder 插的页面，点击下载按钮 download， 这里选正式版， windows 版下面的标准版就可以了。 打开 h builder 插软件， 点击新建空白文件，输入代码保存，选择文件保存的目录， 我选择到一盘里面，然后输入文件名 index 点 html 保存 html 文件的后缀是点 html， 然后在一盘的目录 里面就可以看到 index 点 html 了。打开文件，鼠标左键点中这个文件，然后拖到 h builder 里面，松开就打开了，或者点上面菜单栏的文件，打开文件也是一样的。 第二种新建文件的方式，点击左上角这个图标，然后下面选择 htmi 文件文件名，确定选择保存的目录， 这里也可以先打开要放 html 文件的目录复制路径，然后粘贴到这 这里点创建，然后就生成 html 文件了。第三种方法，点击左上角的菜单栏里的文件新建，选 html 文件，后面的操作是一样的 文件名，刚才是 new file 点 html， 现在改成 new file， 一点 html 点创建，多出来一个 new file 一了。 h builder 的编辑器颜色是可以修改的，点上面菜单栏的工具， 下面的主题酷黑就变成黑色了，换成雅兰， 或者在这个页面点击主题切换也是一样的。

上手就会的 html 究竟是有多简单？今天我们一起来看一下。然后打开一个文件夹，第一步右键， 然后新建一个文本文档，文本文档给他重命名，叫我们随便写个名字是吧？ first 啊， html 后缀名改成 html， 然后回车，改好之后点击右键， 然后打开方式用进四本，就你任何一个文本编辑器都是可以的。然后把这个啊字体给改大一点，不然看不太见啊，然后改成出号啊，然后我们开始写代码了哟， 也会怕有一点回你， oh， yeah！ 这个就是我们最容易上手的 html， 上手就会的，你学会了吗？

这是一个俄罗斯方块小游戏，上面有一个一个不同形状的小块不断落下，最终堆满屏幕。 网页其实和他一样，也是由一个个小块堆满屏幕组成。如果你会玩俄罗斯方块，那么你就会写网页，不信，那我们把它倒过来， 是不是很像一个网页的结构呢？再加一点细节，一个标准的后台类系统界面就出现了。当然，这个肯定不能几分钟就写出来，但不管怎么说，你只要懂得写网页和搭积木一样好玩就行了。我们先让他们离开，换一个简单点的， 这个只有三个大积木块和一些图片文字小块的组合，是我的个人网站的结构，这一个倒是几分钟就可以搞定。 看完本期，你就完全可以写一个类似的你的个人网站。那在浏览器中怎么搭积木呢？其实很简单，就和写作文一样，上一期大家用一分钟写了自己的第一行代码，第一个网页 htm 文件， 这是我们上一期写的第一行代码，浏览器会把它渲染成这个样子的画面。套运第一节编程的本质，那些所说的数据和函数模型。在网页这个程序中，网页 stm 文件是数据，浏览器是函数， 浏览器，这个函数接收 hdm 文件数据，对这个文件中的内容进行处理，最后变成我们能看到的网页画面。我们来模拟浏览器函数的处理逻辑，他会先从头到尾分析你的 hdm 代码， 寻找你代码里的标签。标签就是这种格式，小于号，字母大于号。如果这个标签中间有内容或其他标签，那么后面还要再加一个结束标签，小于号，左斜杠和前面相同的字母，大于号， 标签格是小于号和大于号中间的这个字母就是标签的名称，比如这个就是 p 标签，意思是 progrif 段落 标签，就类似于书名号，比如我们用书名号把龙鱼两个字括起来，我们人类就知道这代表一本书。 而我们用上面的这个标签符号格式把内容包裹起来，浏览器就会知道这是一个标签，就会把它做成一个积木块。我们也可以叫他盒子，可以装东西的小盒子，盒子里面可以装文字，也可以装更多盒子。好，我们再回到浏览器的 函数逻辑，当他找到你的标签代码后，就会在网页上画出一个盒子，但是这个盒子该有多大，什么颜色，长什么样？不知道，那怎么办？这时候啊，浏览器就会再去找标签的外观代码。 外观代码我们叫样式，英文 style 也叫做 css， 这里就会找这个标签的 style， 暂时只需要知道他在开始标签的 style 属性里面就行。 格式就是这样，空格属性名等于号，英文双引号，引号里面就是具体的属性。 后面讲 css 的时候，我在详细说样式，一些标签有默认样式，在标签上看不到 style， 但是浏览器会给他自动加上，比如断落标签 p， 就有这么几个默认的样式属性。下面这四个样 样式我们先不用管，知道它是控制上下左右间距的就行。先来看 display， block 翻译过来就是显示快，这个属性的意思是告诉浏览器我要一个快，这个快盒子表现出来就是占满上级盒子的一整行， 如果什么样式都没有呢？比如我们这里自定一个康文昌表前，他的 style 是空的，那么他就是一个透明的盒子，他里面的内容有多大，这个盒子就会被撑多大。 我们来看实际的代码，你在浏览器中按 f 十二打开开发者工具，就可以看到整个网页就是一个 htm 标签盒子 head 头标签后面讲先看 body 身体标签，他就是网页的身体，实际显示的所有画面都在 body 里面。我们给 这两个标签都加上一个背景颜色的样式， background cola 为红色 red 就可以看出来区别了。 p 标签盒子占满了一整块，而康文昌标签盒子只有和内容大小相等的小小一块， 这时候如果我们给康文昌标签也加上这个样式 display block， 那他也变成了一个快盒子。 理解标签就是盒子这个概念，我们就能搭积木了。我再说一下盒子的几个基本样式，我这里写了两个标签，盒子一和盒子二，主要看盒子二，它的宽度位置是两百 p x 像素， 高度 hit 五十个像素，一个像素就代表显示屏后面的一个小 led 灯。这两个样式很简单，盒子的宽度和高度大家应该能懂吧。然后是 majin， 意思是编剧 border， 意思是边框拍定，翻译过来是填充的意思，也可以理解为内编剧。我们来看上面这个盒子，它离其他盒子的距离就是外编剧 margin， 他的边框就是波德，他的边框和内部内容的距离就是那边距拍顶，这个很形象吧。 其实所谓的写网页，就是用标签把内容分割成盒子，再用各种样式控制盒子的外观和位置，把他们像俄罗斯方块一样组合搭建起来就行了。 htm 中有很多不同功能的标签，能实现你的任何想法，我讲不完，你也没有必要记，我只教你一招，就是搜索，想用什么功能的时候再去搜索就可以了。所有标签的名称和作用，你可以 用 stm 标签这几个关键词去搜索就能搜到。我这里推荐两个网站，一个是 mdn， 相当于网页标准的新华字典，一个是菜鸟教程，中文内容比较好。你想在你的网页上实现什么功能，都可以搜索 htm 某某功能，基本上都会有答案， 比如这里我搜索一个 htm 图片标签就可以看到是这样子的，里面也都有各种视力，照着样子学就可以了。 学会搜索是编程最基本的技能，在问别人问题之前，一定要确保你已经搜了半个小时还没有找到答案。其实对于新手来说，这种情况很少， 因为编程的基础真的很简单，所有答案网上都有，只要你愿意搜索，翻译一下看不懂的单词，再上手练一练， 那么学会编程就没有任何难度。好，那么知道了浏览器的渲染原理之后，我们再来看刚开始的这个简单的个人网站，上中下三个大盒子， 大盒子里面再加一点文字和图片之类的小盒子就完成了哈。是不是豁然开朗？我们来用 htm 代码写出来 上期很多同学反映的问题，一个是没有电脑，一个是不会改文件格式，那么就写了个小工具给大家使用，解决这些问题。 进入这个网址，如果你的浏览器打不开，或者和我的操作不一致，请下载 a 纸或可用的浏览器。好，进入之后会有一个标准的 htm 模板，标准的 htm 文件是需要这些格式的，不能像我们上节那样直接写。你们也可以搜索 h 天，没有空白模板找到直接拿来用就行。模板里的标签具体是什么意思，你们可以自行搜索，我就不废话了，直接来写 body 标签里面的网页内容。首先是三个大盒子，这里我们使用第五标签，这个标签的默认样式只有一个 display block。 第五是英语 dwensen 的缩写 divinceng， 翻译过来就是分开分割的意思，就是专门用来形成快盒子的标签。 我们以后写网页用的大部分标签都是他好，那么分成三个大盒子之后，先来给最上面的盒子里加一个图片标签，前面我们搜索过要怎么写，你们写的时候再搜一下，仔细看。 这里我们用一个网络图片链接地址，然后给他命名为康文昌，再设置宽度，位置为八十像素 高度 hit 也是一样，此时图片默认在最左侧。我们来给上级大盒子加点样式，变好看一点。编辑第一个大盒子的 style， 背景颜色为灰色，内容之中 那边去加大一点。嗯，看的过去了。第三个大盒子底部蓝的样式也一样。把前面的复制过来，再把字体变小一点， ok， 里面再加一个 p 标签，一个 a 标签，写上网站的版权声明和友情链接， a 标签就是链接，点击后可以跳转到你指定的网址。再来看中间的第二个大盒子，里面加上一堆 p 标签，文本段落随便写，你想写的内容都可以，毕竟是你的网站嘛。然后我们来改一下大盒子的样式，给他设 设置一个最大宽度 max 位子七百 px， 还记得吗？快，盒子默认是占据全部宽度，这样在电脑端不好看，所以设置一个最大宽度就会在电脑端好看一点，不会占满全屏。 如果只设置这个，那么这个大盒子就会默认靠左，我们要让他居中才行。设置外编剧 majin 三是 p x auto， 意思是这个盒子距离上下其他盒子各三十个像素左右，是额头自动的意思，浏览器就会自动计算左右编剧相等，就是居中了吗？ 然后再加一个那边去拍顶十五 px， 这样在手机端显示就不会贴边，好看一点。最后把行高设成一点七倍，文字行的高度大一点，看起来更舒服。完成， 你们看一下用了几分钟。当然如果你们想自定义设置一下颜色呀，字体大小呀，图片等等，自己在家标签再改样式就行，就是搭积木改样子呗，难吗？ 最后别忘了点右上角的保存文件，就会把刚刚写好的代码下载下来了。看，这里出现了 mx， 点 htm 文件双击会默认浏览器打开它，那一个标准的个人网站就出现了 这些视频重做了好几遍，就是为了让你们一次性学会 html css 和浏览器渲染原理，我觉得应该值一个三连 好。最后我们总结一下，第一， htm 文件数据作为参数传给浏览器函数后就可以输出网页画面。第二，浏览器渲染的底层原理就是先找到 二十天没有数据里的标签，把他们分成小盒子，再找到小盒子里的 css 样式，然后把他们画出来。第三，通过组合不同的标签，使用不同的样式，我们可以像玩俄罗斯方块一样，做出各种漂亮的网页。 本期作业写一个你自己的个人网站，提交到评论区，下一期就会将你的个人网站布置到服务器上，让全世界都能访问他。

你还在用拢长拖他的 htmil 写网页吗？教你把网页写的像拍，从那样简洁，把充满各种标记的代码变成这种简洁易读的样子，这就是模板引擎，接下来我们实操一下，做一个生理网站，这里我们用的后端是 note gs， 框架是 xpx， 模板引擎用的是这个。 新建一个生理文件夹，去创建一个派克 gicon 的配置文件，用任何编辑器打开，填上基本配置。打开终端，这里我用的是 win 十自带的 winx 系统。 进入生理文件夹， rpm 因斯豆安装模块就安装好了。添加帕布利文件夹，放点前端的图片素材，新建一个 siri js 作为后端的入口， siri js 里写一些基本配置，让他监听三千端口，并简单的返回一个 hello word。 然后在终端里我们启动， 打开浏览器看一下，胜利出来了，说明没有问题。然后开始写页面，新建一个语友文件夹，里面创建后面的这个。 这一代的写法类似于拍摄，用缩镜表示层次，这样就省去了 htmil 里面包围在元素前后的坚固号，比如前后两个包顶，只要写一个包顶就可以了。 我们在头部包含常用的玻璃 spa 样式，连接写两个山林网站顶部的菜单，打开浏览器看一下，出来了，我们添加一个 cs， 做点修正， 把菜单文字变成白色，接下来写上菜单的其他项目。浏览器刷新一下，看到没什么问题，接下来添加底部的要素，刷新一下能看到，然后我们在中间添加一个产品信息，刷新一下，接着再添加一个产品信息，迈克步 pro， 这样我们就做好了迈克的页面，接下来 我们要做 iphone 的页面，我们知道两个页面的顶部菜单栏和底部是一样的，所以最好不要写两边一样的东西，这时可以用到这个的基层功能。我们就创建一个鸡类，叫做雷奥特短 j， 里面只写顶部和脚步的内容， 中间的内容用 welcomet 来标记起来，然后 homm 点这里就可以继承雷奥点这里不用写头部和脚步了，只用写内容，部分替换都要积累你的 flok， 刷新一下跟原来一样，说明没问题。我们再创建一个 iphone 的页面，现在就简单了，和刚才的 home 一样， 继承之类的内要放一个 iphone s 一的产品信息，打开浏览器看一下，没有，因为这个连接的行为没有在 siri gs 里定义，所以我们就添加一下，然后重启 no， 再刷新一下出来了，接着添加 iphone 十一和 pro 的内容，看一下感觉不错，就这样 我们的生理网站就做好了。好了，我们回顾一下代码页面，一共是有三个这类文件，一个鸡类两个字类，里面的调理也非常简洁清晰，想要源代码的可以评论区里扣一下，你学会了吗？

搬砖啦，标签的写法，这个也是非常重要的，标签的写法，他是由两个间括号组成，这样写的话是一组，也说标签他分为开始和结束， 那怎么样来去使用呢？我们来简单组，举一个例子，比如当前我要显示一段内容，那我们就可以用到 p 标签， 这里面用来去展示我们所要输入的内容啊，也就是用户看到的。那当前这一块内容写完了之后，我们需要给他来一个结束符，这样就是一个完整的标签， 记得一定是英文状态下的监控号啊。组成 htm 的重要标签有哪些？第一个是 htm， 他呢就是一个跟节点，也就 是我们当年学到的 h 前门，对吧？好，一看到他就知道，哦，这是 h 前面，紧接着呢，他是根节点，也说他是老大，那他的这个里面呢？又有一些子节点，这些子节点呢？第一个是害的，第二个保底， 他们两个是同等级的，这些标签里面就像刚才我们看到 htm 一样，他也可以去嵌套标签，怎么样去嵌套呢？就是在害的开始与结束的中间去嵌套我们所需要的标签。比如说开头标签， 这个是固定的一个格式，一个写法啊，也就是 h 签包里面嵌套了汉德和包底，那汉德里面呢？又有胎头这一块，怎么样来去记呢？你可以把它想象成一个人，人有什么呀？头部对不对？哎？ 身体部分那块来给大家展示一下。回到桌面，我们来创建一个文本文档，在文本文档里 输入我们刚才所需要的一些标签。第一个 htm， 他是一个跟节点老大，对吧？好，一定要记得有开始也有结束。标签。好，第二个像人一样，他有头部， 同样的，只要是标签基本都是成对出现的人，还有包底部分，对吧？好，这样写完了之后，我们还需要在害的里面给他来一个胎头， 这个格式可以对齐一下。 好，在这里我们来给他输出一些内容， 换成中文吧。展示网 页标题的这个包地呢，是用来去展示我们所需要的一块内容，比如说第一个网页一般都会输出什么？哈喽，偶尔的对吧？ 好，这是我们的第一个 helloword， 这些写完成了之后，紧接着我们怎么样在浏览器里面去看呢？好，需要把当前的后缀名给他改一下， 改的时候给他改成 htm 也可以，或者是 htm 都行啊，直接回车点击式 好，重命名一下吧，当前我们就创建好了，也就是当前 htm 页面就可以在我们浏览器里面去运 行了。好，我们来看一下效果，这个地方是刚才我们看到的写到的抬头里面的，这是头部展示的标题，对不对？好，这一块呢是 用来包底里面展示输出的内容，像刚才我们看到监括号里的内容，他是不会被输出到页面中给用户看到的，所以我们想要输出的内容完全可以放在标签里面， 就是上节课我们说到的，你可以把当前的标签理解成为容器。好，抬头这里呢就是头部这一块是属于头部内容，就是主要是显示的这一块区域的内容。 好，如果是你想要设定这一块展示的内容区域，那就可以把你所要展示的内容写在包地里面。一个想助你学好前端的隐身程序员。

一分钟教你学会写 html 代码！

那是不是以后咱们只要写 h t m o 文件，就必须选这一串代码呢？是的，那 很多同学都会问，那不是很麻烦吗？啊，每次都要写一遍啊，好，没有关系啊。 vs 扣呢，我们可以在这里使用一个快捷键啊，什么快捷键呢？感叹号加 tap 键还是那个 tap 键啊？那么你截点也可以的，感叹号加 tap 键，回到我们的笔记中。 vs 扣呢，生成页面结构可以用个快捷键，就是这个感叹号加 type 键。好，我们再回到我们代码当中啊， 这里要强调一个注意事项，就是很多同学啊，他的符号他是区分不清楚的啊，我们这里用符号一定要用英文符号，英文符号跟中文符号有什么区别呢？看着啊，感叹号，我们就看感叹号， 这是英文的符号，而中文的是怎么样子呢？是这个样子的，可以看到啊，英文的符号他是只占一个字符，而中文的符号呢？他不一定啊，他可能占两个字符，而且他会有一个框框，比较明显的一个提示啊。好，例如我们再看英文的逗号 跟中文的逗号啊，你要自己去找找感觉啊，中文的逗号，英文的句号跟中文的句号，他是一定有一定的不同的。那我们在写代码的时候一定要用英文符号，就像这个监括号也一样啊，一定是英文的符号。 我们来看一下这个生成的页面结构多了哪些内容啊？第一个 doctor， doc 什么意思啊？文档 type 类型， doctor 是声明文档类型，那么声明文档微型为什么呢啊？ h t m 五， h t m 五指的是我们 h t m 的其中一个最新的版本，那么生命文档类型要让浏览器用最新的 h t m 规范去解析我们代码， 这个是在我们的 html 这里面呢，多了一个，这个叫什么呢？属性啊，先记住大家属性啊，后面我会讲 这个的作用是什么呢？这个是告诉浏览器我们当前页面的这个语言类型，当我们写的是 e n 的时候呢，它代表是英文，我们的中文是什么呀？加 h。 先 当你把这个 link 设置成 e n 的时候，无论你的网页是什么内容啊，我们浏览器看来都是英文，他会认为都是英文，那么如果我们本地浏览器设置的这个默认语言不是 英文的话，他就会问我们是否需要翻译啊？这个应该大家有看过这种提示吧。第三个， meter 啊， meter 什么东西呢？它是原信息，那么它存储了很多网页相关的这些信息， 那么我们见说过网页相关的信息都是写在 head 标签内的，对吧？啊？网页相关的信息，所以 meter 呢，它也是写在 head 标签内的， 那么里面有一个属性叫做叉线，那叉线呢，它提供的是字符编码，我们页面字符编码啊，一般都是用 u t f 杠八， u t f 杠八指的是国际通用编码， 好，字符编码有什么用呢？我们的内容啊，都是需要存储在计算机里面的，对吧？那存储在计算机里面，我们就得跟计算机说好，我们会用怎样的字符编码传输给他，让他给他转换成二进制，存储在我 我们的计算机中，对吧？所以这个了解一下就行了啊。那么叉 s s 提供支付编码，我们现在目前用的基本都是 u g f 杠八国际通用编码，还有其他的一些编码，大家可以自行去了解一下。

前端特效哪家强？苹果犹如东皇加张良，逛完 apple 的官网，发现只有这个 irpods 特效能勉强实现。具体的实现思路就是通过六十五张图片在页面滚动时不断的替换编写动态渲染六十五张图片的函数， 创建一个 image 对象，给 image 对象的 sr c 负值相当于给浏览器缓存图片， 在页面初始化时需要执行该函数。也就是说在页面加载完成后，我们就已经拿到了这六十五张需要渲染的图片。目前页面乌黑嘛漆一片，此时需要把页面初始化时的图 片给渲染到页面。跟前面一样，使用 init 对象来处理图片。 ipod 盘数就是用来返回图片地址的，传递的是数字几就显示第几张图， 至于画布的宽高可自行调整。此时页面就出现了一对 airpod。 接下来就是监听页面的滚动事件。 先来计算网页的最大滚动高度， 其中 h d m led is crow height 表示整个网页的高度， window 点 inner height 表示浏览器窗口的高度。通过这两个值得差就可以得到网页的最大 滚动高度。最后并根据滚动条的位置计算出一个图片的锁引 request animation friend 可以匹配浏览器的刷新率，跟着系统的绘制频率走，它能保证回掉函数，在屏幕每一次的绘制间隔中只被执行一次，有效的节省 cpu 的开销。还差一个更新图片的事件， 来看一下像 效果显示效果是出来了，不过屏幕会闪，明显是有问题。可以看到页面初始化时已经拿到全部图片，在页面滚动时还是会重新获取，大概率是这个原因导致的， 可以把图片给缓存起来，使用缓存里面的图片做动画会更加的顺畅。现在当我们再次滚动，就不会重新发请求，看一下最后实现的效果。

大家好，今天我们讲一下永记四本编写 stml 出现的问题。首先我们鼠标右键新键 文本文档，这里如果没有点 txt 的文件后证明，说明我们缺少设置。我们双击计算机，我们从组织这去找点这里，然后 我们在文件夹选线里点查看，我们找到隐藏已知文件类型的扩展名，我们把它前面这个勾去掉，然后我们点击确定，我们就可以去修改文件的后缀名， 然后我们鼠标右键从命名，我们给他起名字，弹出来对话框以后，我们点式，或者我们直接按一下安特键，鼠标右键 打开方式这里我们选记事本，如果这一块我们没有记事本的话，我们从这个默认程序这一块去找，在这个位置有的话我们就选，如果没有的话，我们从这个其他程序这一块选，选到以后呢，我们 选中，然后要把这个勾给它去掉，我们直接打开了记事本，可以去写文档，写完以后我们保存，然后再回来双击打开就可以看 我们写的内容。大家如果刚才存的文件是这样子的话呢，那我们写内容的时候呢，给他双击打开，打开以后呢，我们在这个位置给他最大化， 然后我们开始往里写文本内容。写之前呢，我们可以从这个格式这里找到字体，来设置一下自己喜欢的字体 和字形，文字大小，我用的很收纳式字体，因为它是浏览器 默认的字体。选好以后呢，我们点击确定，我们先写 h 五的声明头，写的时候一定要英文输入法，写完这个单词以后 后呢空格，需要注意的是感叹号后面没有空格这个单词呢，他也可以全小写，然后我们开始写 html 的标签， 写的时候呢，一定要注意， html 的标签呢，不能大写，只能小写。写好 html 标签以后呢，我们给他往里写他欠套的害的标签和包得标签， 因为害的标签呢是嵌套在 html 标签当中的，我们为了让代码阅读方便呢，我们可以给这个害的标签增加缩进， 我们看起来就方便多了。然后我们再给他写包的标签，包的标签 写好以后呢，我们再往害的标签里添加标签，我们给他添加一个麦塔标签，麦塔标签添加完以后呢，我们可以给他一个黑头标签， 然后我们再往包的标签里写文本内容，我们用一个段落标签，段落标签里面呢，我们来写入文本，我们写好以后呢，我们选择 另存为，然后我们把编码这个位置呢改成 utf 杠八，把这个保存类型，这呢改成所有文件，然后我们点击保存，我们点击是，然后我们回来我们刚才打开的页面刷新一下看， 这个呢是推头里边的内容，我的第一个网页，然后这个呢就是我们包的标签里边的正文内容。我们如果是这样子的写完以后的话，我们打开的时候呢，一定要选择一个 浏览器，任何一款浏览器都可以，比如我们选择火壶，这是抬头里边的内容，这个呢是我们包得里边的内容。

浏览器搜索 csdn， 搜索代码圣诞树， 找到代码，这页显示最火热的圣诞树就是的了。右上角点击复制到建好的文档，这里可以修改文字 并存为文件名后缀， h， d， m， l 保存类型，所有文件编码选择 use 发就可以了。 点击桌面保存好的图标，这就是成品啦。

好嘞，各位同学们，那最近的话是有这么一道面试题啊，这是两个太不夜之间呢，是如何进行这个通讯的？注意是在统一的情况下。对，就是我们这个端口号和地址都是一模一样的， 只是文件不一样。对，我们这个是 index 点 h t m l 和这个 index 二点 h t m l 来，如何去进行这个通讯呢？啊？我们可以简单实现一下，其实代码非常简单，只是发一个广播就可以了。哦，我们现在定一下这个广播啊， 它呢叫这个 boardcast channel。 对，就是这么一个 epi。 好，然后这里边呢需要接受一个 name， 就是广播的一个名字。啊，这个名字你可以随便定啊。对，比如说我就写一个，随便写个数字。好，然后发。是怎么发呢？比如说我们给这个按钮呢，加一个点击式键啊， 加一个 click。 哦，其实发的话它这些事件其实都一样的。对，就跟 iphone 的通讯呢是一样的，也是发一个 post message。 好，然后呢？比如说你要发一个什么对象，或者字幕串发一个什么都可以，比如说发一个 name。 对，我这是一个对象，然后里边有个属性叫 小满。好，那这样的话我就进行了广播。好，那广播人的这个页面该如何去接收呢？好，要在对应的频道上的进行接收。对，因为我们这 定义的是麒麟这个频道，所以说我们要在这个频道上呢去接收对应的信息就可以了。对，这就是 name 的一个作用啊。好，通过 add event listener， 然后监听 message 就可以了。好，然后他会回传给这个 event 里边，那这里边 data 呢？就 我们所需要的信息，我们可以来看一下。好，然后我们可以把它拼接到这个 u l 里边，这儿的话我们来创建一个标签吧，点 correct element， 好，然后把这个给他复过去。对，他是一个对象，我们给他 string 放一下，好，然后给他添加到这个 list 里边。 好，那这样的话简单就实现了。我们来看一下，好，把这两个页面都刷新一下，好，然后我在 index 点 h t m l 去发送这个信息。好，然后在二里边呢，哎，发现就可以收到了，对，因为他发了这个广播，那这个页面呢？就接收了这个广播的信息，对，所以说 它就可以去实现这么一个功能，当然也可以反过来的，比如说我们在这个 index 二里边去发送，在 index 也能收到我们这个信息，就是 pose message， 这他们可以反过来的，比如说我是 index 二。 好，那这边的话同样也是可以收到信息的，同样也是通过 add， 因为它 listener， 然后监听一下 message 就可以了。对，它们是可以是进行这个反过来使用的。对，其实就跟发布订阅呢，是很类似的， 这会放到这个 data 里边，好，刷新一下就可以了。 哎，我也发现，哎，是不是我们收到二发过来消息了，那你如果不想收了怎么办呢？哎，其实也非常简单，通过 close， 对，给它关掉就可以了啊， 就是跨页面级别的一个通讯，大家可以使用这个 boardcast channel， 然后大家最关心的还是这个兼容性问题，其实它兼容性还可以，我们可以来看一下。 好，基本上除了 i e 啊这些主流浏览器呢，都是支持的，对，它进入性还可以。好。

好了大家，那么接下来呢，咱们再说一个标签，叫做超链接，叫超链接，超链接这个标签， 那么超链接这个标签呢，其实还是也很简单啊，叫超链接，超链接是干什么的呢？就是可以从一个页面跳转到另外一个页面，哎，可以从一个页面跳转到另一个页面，这就是超链接干的事。 那么抄链接呢？使用哪个标签呢？来使用 a 标签去创建抄链接就可以了，你比如说我们搞一个 a， 占一个标签，一个贴宝剑， 那这就是 a 标签，那么 a 标签呢？这有几个重要的属性，我们必须清楚啊，那么叫超链接，超链 接的属性，那第一个你看我们快捷键一生成，他是不是自动给我提示了，就是这个 herf 属性，实际上这个 herf， 这个这也不是一个单词啊，这个 h 呢，指的就是 happy text 超文本， r e f 呢，叫 reference 啊，就是超，说白了就是资源，对吧？超级超级文本资源，大概这意思啊，那么赫赫的话呢，叫做指定，用他用这个了去指定你跳转到目标页面的地址啊，用于指定， 用于指定呢？跳转到目标页面的地址，那么这个 hippo 呢，它实际上可以指定外部链接，也可以指定就是内部的地址都可以，比如说咱们先来一个跳到外部吧，叫做外部页面链接，比如说 直接去跳到百度，那就要写这个协议 http， 然后呢三 w 点，百度点 com， 然后呢我们在这个标签之间给一点文本的提示，对吧？比如说百度一下，那这时呢我们一直行 注意看，那这就是一个超连接，对吧？那么当我们一点击，那这样的话，他就给我们跳到了百度， 对吧？哎，那这个就是超链接，从一个页面跳到另一个页面，那么刚刚大家有没有注意到这个超链接呀？在你从来没点击过的时候，他实际上是蓝色的，那如果当你点击过以后啊，他就会变成这种， 这应该是紫色的啊，说明你以前呃点击过这个链接，对吧？或者说用过这个链接，然后浏览器呢会有一些缓存帮你记录，因此 他就变成紫色的了，提示你已经点击过了。那么此时呢，大家注意看现在啊我这一点这个超链接，我一点他是不是在当前页面给我进行的挑转呢？或者说叫在当前窗口打开的， 那有的时候咱们遇到过的你一点超连接，他是不是在新窗口给你打开呀？那这个怎么设置呢？哎，那就是涉及到超超连接的第二个属性，对吧？第二个属性叫做他给他，他给的属性，他给的属性呢？就是用于指定以什么方式打开页面？用于指定叫做以什么 什么方式打开页面，那么他有两个可选值，或者说有两个，呃，常用的可选值，那一个呢叫做 self， self 呢，指的就是当前页面打开，叫当前 当前窗口打开，当然呢，他是默认纸，我们发现 当我没有指定他给他的时候，我这一点是不是就在当前这个窗口给我打开了呀？哎，打开新的这个连接，那么呢还有一个可选值呢，叫做布兰克 blank， 布兰克，那叫做新窗口， 新窗口打开。那么过来呢，我们也可以试一下，比如说 ahop 指定一个链接 https 吧，冒号，冒号，对吧？至于什么是 http， 什么是 https 啊，咱们以后也会说到的啊。 然后呢，来个三 w 点，比如说 it 点播点 com， 这里来个点播教育，那此时我一直行，哎，我指没指定他给他，对吧？哎，那叫他给他，然后我来个 布兰克，叫新窗口打开啊，再来重新执行一下，注意看啊，点播教育没点，没有点击过，他是不是蓝色的呀？那这时我一 我，我先把其他的都给关掉吧。嗯，其他都关掉，注意看我一点击点播教育，那是不是新窗口打开了呀？哎，在新的窗口打开，那之前那个没指定他默认是不就是赛夫啊？那我这一点击他是在当前窗口打开斜面，那实际上这两个用哪个呢？ 咱们在咱们国内啊，其实用他给的是 blank 的这种，这种方式呢比较多，对吧？他有一点好在哪呢？比如说一点， 在新窗口打开了，然后你浏览，浏览，浏览，对吧？然后呢，你当你回过去的时候，原来的页面还在啊，对吧？比如说我们可以在这里这个一个网页在这里找找找啊，现在我看到了，这 啊，完了，点过去有吗？这个，这个是当前窗口打开的，是吧？这个是当前窗口打开的，居然 啊，还还都是，对吧？都是，嗯，我还真不知道呢，比如在线课程，然后呢？点击还还还还都当选唱歌来，好吧好吧，就当我没说， 对吧？实际上国内的网站大部分是用新窗口打开，新窗口打开好在哪呢？就是比如说我们在这里浏览，浏览到这个地地方的时候呢？往这一过去，新窗口打开了，新窗口打开了之后回过来，刚才在哪点的，我们其实还能找的到， 对吧？但是他有一个弊端，弊端就是你如果是都是这种新窗口打开，你点一点，一点一点点，上边全都是，就是密密麻麻有点乱，然后导致你回头再找你都不知道在哪跳过来的了啊，是这个 缺点，那么当前窗口的好处呢？就是他不会出现太多的这个标题栏，听懂吧，但是呢，如果你回去的时候呢，他默认是从最上方开始的，就是不知道你网页过长的话，你就不知道浏览到哪了啊，所以说这个东西看设定，对吧？其实国外的 网站一般啊，当前窗口打开的多，对吧？国内的一般的网站都是新窗口打开，对吧？你就点一会，点着点着点着上面就一大堆了，对吧？看哪个？那么看咱们点播教育的官网好，在哪呢？他是当前窗口和新窗口打开相结合，哎，这样用户体验更强了， 行了，我，我圆不下去了。好了，那么刚刚呢，我们打开了一个外部的连接，那么还可以打开，当然也可以打开，叫内部 页面的连接啊，叫做内部页面链接。那么来一个，比如说 a， 然后呢？ hiv 的话呢？呃，那就用绝对路径或者是相对路径，是不是就都可以了啊？比如说在当前路径下，对吧？哎，当前文件的路径下， 当前文件所在的路径下哪呢？用一个叫，这吧叫，呃，图片标签点 html， 对吧？这叫内部内部链接， 叫链接。 ok， 那这时呢，我们执行一下，好，这就有个内部链接，然后一跳，这不跳到跳转到咱们自己内部的页面的链接，或者说咱们当前项目页面的链接。 好，那这个就没啥可说的了，这里边你选择用绝对路径也好，用相对路径是不是也没问题啊？比如说我们也可以来 一个相对路径的给大家看一眼相对路径，大家注意这个杠是不至关重要啊，哎，前面呢就是服务器的跟路径了，然后你就找你文件所在的路径，从头往下捋就行了，比如说外边下面，然后再有一个，嗯，来哪个呢？ 叫做羽翼画标签吧，三点雨，他咋不给我提示啊？雨雨，哎， 羽翼画标签点 html 对吧？内部链接二，或者叫羽翼画标签吧，羽翼画标签过来，上边是，呃，相对路径，下边是绝对路径， 顺便复习一下，一点就过来了，看到吗？ ok， 行了，除了这个可以跳到内部的页面之外呢，还可以 有空链接，叫空链接。空链接指的什么意思呢？就是当你想要写个超链接，但是你要往哪跳啊？你还没想好的时候，你可以用这个空链接啊，代替一下，直接就是一个井就完事了啊，叫做，呃，无指定页面的一个链接，然后呢 默认跳转到跳转到当前页面，就是你想往哪跳，你还没想好呢，但是呢，你知道这里有个超链接，那一点一点点点，他是不是在当前页面呢？哎，一会我们告诉大家，空链接其实还有一个另外一个作用。 好，那这个是空链接，那么还能干嘛呢？叫做下载链接，叫下载链接，下载链接的话指的是什么呢？就是当你 hif 的那个路径啊，指定的是一个文件的时候，他此时就变成了 一个下载链接，做弱链接的路径是一个文件啊，则为下载链接。那么呢，我们可以去找一个文件吧， 去找一个文件，嗯，我们就把它打个包就完事了，你，妹子，然后呢，我们把这个打个包，打个压缩包，比如说文件呢？是这个压缩包的，像压缩包啊，也好啊，还是这个点一 s e， 其他的文件也好啊，其实都可以啊， 那么过来这里是不是就多了个 gip 的压缩包啊？那这是 a 标签，然后呢，我们在 当前路径下叫伊妹子，是下有个叫一点 zip 啊，叫下载链接，下载链接，那此时我们执行，然后呢，一点下载链接，注意看我浏览器 右下角，他就给我下载下来了，看懂吧。哎，那这个就是下载链接，下载链接，那么除了下载链接以外还可以干嘛呢？我们也可以给网页中的其他元素加点链接啊，叫给其他 网页元素添加超链接。给其他网页元素，比如说什么其他网页元素呢？比如说图片呢，这个表格啊，等等啊，给点其他元素加个超链接，比如说 a 标签。 超链接。跳到哪呢？跳 http， 百度吧。呃，三 w 点，百度点 com， 然后呢，这个文本的我指定一个图片，比如说 amates， 然后呢？嗯，在当前路径下， amates 下有个一点 gpg， 然后呢，我们可以是不是给点提示啊？啊，来个抬头，抬头 的话就是来个点，我进来看看我， ok， 就这样，注意，就是超链接标签的内容其实是一张图片，对吧？用超链接把它包裹了，包裹了之后执行啊，这是不是一张图片啊？鼠标往上一放，他说，啊，点我进来看看我，那我就看看你吧，啊，看看，实际上是百度是吧？ ok， 那这就是给其他元素添加一些超连接，那么我加个换行啊，那么还可以干嘛呢？大家注意，超连接还有个叫做毛点链接啊，叫毛点链接， 叫毛点链接。那么什么是毛点链接呢？哎，就是跳转到当前页面中的指定位置在当前页面中的指定位置进行跳转，就叫毛点链接，叫做跳转到跳转到当前 页面中的指定位置。那么其实这个毛点链接呢？大家经常用到，那可能小伙伴们对这个词可能有点陌生，比如说百度百科，比如说我抽罗翔，对吧？ 罗翔，法外狂徒张三，对吧？比如说这百度百科，那这时呢？什么是毛点链接？大家注意看这个人物经历什么的，我一点他是不是在当前页面给我跳转呢？哎，在当前页面给我跳转叫社会责任点， 是不？到我当前页面的指定位置啊，包括旁边这有个导航栏，你点点点点点点，是不是在当，哎呦呵，是不是在当前页面来回的跳转呢？ 哎，跳到当前页面的指定位置啊，这个就叫做毛点链接。我这视频，我这视频可千万别被人家罗翔看着，我回头说我 侵犯肖像权，对吧？人家罗翔说说发挥发挥的好呢，他打官司的时候发挥的好呢，可以把这个对方律师送进去啊，发挥超好一点呢，可以把法官也送进去，这我侵犯人家肖像权被他看到了，他把我也送进去就坏了。 罗小老师，我是你的粉丝啊，你别把我送进去，在这里说影响是吧？好了，那么这个毛领链接怎么去用呢？其实很简单。那当然呢，我们现在这个页面的内容啊，有点少，对吧？你这页面没法跳，我去找点其他的内容去， 比如说资料这里有个快捷键，这篇内容呢有点长，相对来说比较长，长一些呢，我给他 copy 到页面中来， copy 到这个文档中来， copy 过来。靠，过来，我们先执行一下，看看什么效果。 大家一直行。哎呀，这些文字是密密麻麻堆到一块了呀，哎，那假如说你想保留他这个格式的话，有一个标签啊，大家了解一下，稍微你想保留他这个格式呢？叫做 prepre 标签， 保留你复制过来的格式啊，那这是执行啊，还行，对吧？差不多也够长了。那么够长了的话呢，怎么来个猫点链接呢？ 就是两步搞定。哪两步呢？第一第一呢，那就是目标标签， 你添加一个属性对吧？叫目标标签呢。添加一个属性什么属性呢？就是一个 id 啊， idid 属性啊，其实每个标签你都可以设置，这个 id 就相当于什么呢？ 就是他唯一，对吧，并唯一的是唯一的啊。唯一唯一指的是什么意思？就如同人的身份证号， 那么我们通过身份证号是不可以锁定一个人呢，哎，那么这个 id 属性呢？其实我们可以利用这个 id 属性去锁定某一个标签，因此呢，当我们写 id 的时候呢，就尽量不要让他重复听懂吧，哎， 然后呢添目标标签，添加个 id 属性，这里边呢随便指定一个名称对吧？指定的名称啊，然后呢要注意的是什么呢？叫做 id 啊，不能重复啊，其他标签通常也是 id 呢，尽量不要让他重复， 然后抄链接。第二步呢，就是抄链接的这个客服属性为是二一 f 这个属性的值为属 属性值，为什么呢？为一个叫井号，后边是你上边 id 指定的名称即可，听懂吧？哎，比如说我这文本某个地方，我是不是可以有标签啊？或者我在这里呢，我给他加个标签也行， 嗯，往上一点吧，在这吧，在这吧，对吧？比如说我随便加个标签，来个 h 一啊，叫做定位一下，然后呢，我要给这个标签呢，这个 设置一个属性叫 idaid 呢？来一个，比如说他叫哈哈吧，随便起个名，然后呢，我再来个其他位置啊，再来个其他位置，也来个 h 一，然后呢也来个 id， 这叫呵呵。然后呢叫再定位一下，可以吧？再定位一下， 行，那就定位了两个位置，那此时呢，我们就可以搞一个超链毛点链接刚才一个井号，刚才咱们那个 id 名，某个标签名，一个叫，哈哈吧，啊，比如说来个去，哈哈， 然后来个闭眼，然后再来一个呢？是不是还有个呵呵呀，那就去，呵呵，对吧，注意后边的直为一个井，后边跟上你 id 指定那个名称即可，然后一直停，对吧？看这里有个去，哈哈。一个去，呵呵，我先去，哈哈， 是不就定位一下啊？哎，那这时我再个去，呵呵啊，就再定位一下，其实我下边就没有内容了啊，如果你下边还足够长的话，其实你定位的话呢，他是定位到最上方，对吧？哎，如果下边有足够多的内容，比如说我们刚才那个去去，哈哈，看这 是不是就那个定位一下那个地方啊，然后你就可以往下浏览，这就叫毛点连接，听懂吧。那有的时候呢，大家注意， 比如说我这个，呃，文章非常长，这个网页非常长啊，最下边是不是有个我希望直接回到顶部啊？那现在没有直接回到顶部，我还得自己往上撸，对吧？哎，撸这个滚轮是不是撸到最顶上？最顶啊， 那这个时候呢？我们有的时候啊，比如说当我浏览完了呢，我希望这里有个叫回到顶部啊，回到顶部，那回到顶部肯定也是一个超链接呗。叫回到顶部，回到顶部，那么这是谁就派上用场了呢？就是这个井， 刚才咱们是不是提到一个空链接啊？空链接默认跳转到当前页面，那这时啊，比如说我要去，呵呵啊，下边有个回到顶部，注意看，这 回到顶部吧，我一点就回到顶部了，哎。去，呵呵，回到顶部，看懂吧。哎，所以说这个景这个空链接呀，除了这个，嗯，无指定页面时用他的以外，他还可以，对吧？啊？可以实现叫做回到回到 回到顶部这样的功能，可以完成回到顶部的功能，那么假如说是 实际上这个空链接，他还是有跳转，只不过默认跳转到当前页面，那假如说我就有个超链接，我就是想点他毫无反应，那这时怎么办呢？ 也有一个一个办法，叫什么呢？叫做这里写一个叫扎玩 scrapd， 扎玩死 cipa 的，然后冒号分号啊，加完死 cup 的冒号分号，这就是毫无反应链接， 对吧？哎，毫无反应链接，然后执行一下，这里是不是有个毫无反应链接？我，点点点点点点点点。嗯，这是真的毫无反应链接，看到吧？好了， 那么以上呢，就是超链接啊，有几个你可以跳外部啊，跳内部啊，空链接。如果你的超链接指定的路径是一个文件，你他也可以实现下载的功能，然后呢，你也可以给 其他网页元素添加超链接。那么还有一个，那就是毛点链接，在当前页面中你可以跳到指定的位置啊，应用的还非常的广，好吧。

程序员为什么喜欢用 mac 过？其实我们用 mac 是因为 mac 自带的 unis 环境很方便，对于用 linis 和 unis 开发者姿势都很不错。系统里的特密的终端简直就是程序员的最爱，而且他玩不了游戏，可以让我们更专注的携带码。