html首页导航栏标签怎么设置

大家好，欢迎来到胖胖学前端，今天我们来学习 css 导航栏，所有的网站都存在导航栏，我们如何才能实现一个导航栏呢？我们来看一下这个 demo。 一个列表元素如何才能变成像图中的这样子的一个导航栏呢？可以通过给 ul 或者 lia 标签添加样式， 首先把列表的列表像去掉，也就是左侧的小圆点，然后给大家添加宽度。背景色， 把 a 标签变成 block 元素，我们要把 a 标签去掉文本修饰，也就是底部下划线，再给 a 标签添加一个 hire 的样式，背景色或者颜色字体的变化，如图中就可以得到一个这样子的简单的导航栏。觉得讲的好就点个赞吧！

这样的导航栏怎么实现？这是 html 代码，他定义了一个简单的导航菜单。接下来是 css 代码，然后表示一个无需列表，通常用于显示导航链接这一行，移除了列表项前的默认标记。列表示每个列表项包含一个导航链接， 行驶每个列表项横向排列。这段 css 代码定义了链接的样式，适用于未访问和已访问的链接。这段 css 代码定义了链接在悬停和激活状态下的样式。当用户将鼠标悬停在链接上或点击时，背景颜色的变化可以有效提升用户体验，增加胶布感，大功告成。

接下来呢我们来学习一下这个 a 标签，那 a 标签呢是我们在网站开发中非常重要的一个标签， 那这个标签呢，我们在之前的内容中呢，也给大家去简单的演示过，我们通过这个标签呢是可以打开其他的一个网站的，那我们在自己的网站内部当中的这些页面的跳转啊，页面的切换，其实也是通过这个 a 标签来完成的。 那首先看到我们这里我们已经简单的给他去做了一个文件结构，我们在跟这个 html 文件的评级的这样的一个结构中呢， 放了几个文件夹，然后每个文件夹当中呢都设立了他自己的这个 h t m l 文件，然后它内部的这个文 h t m l 文件呢，它的名称都是 index， 然后呢我 我们在这里啊，在这个 htm 文件中，就是最一开始的这个 htm 文件中呢，我们给他去写了三个 a 标签，然后呢我们用他的这个 href 属性去设置这个具体的一个值，那这个值呢就是 其他的这些文件夹当中的这些 h t m l 文件的一个访问路径，那我们这里呢用的是一个 相对路径的写法，因为我们现在这个 htm 文件，它跟这些文件夹是平级的，对吧？所以它的这个写法是这样的一个写法，直接点斜杠，然后是它这个文件夹名，然后具体的这个文件， 那写好之后呢，其实你就可以看到我们这边这样的一个链接的一个文字就已经出来了啊，注意我们是把文字放 在这个 a 标签里面，然后这个文字呢就有一个默认的将一个下滑线，然后蓝色的一个效果，然后当我们去点击这个文字的时候啊，你注意看啊，因为我这里链接的地址，我这个 hr ef 的地址是指向不同的这个文件夹当中的这个 html 文件的，所以呢当我去点击它的时候呢， 会跳转到，哎，我这个页面就会跳转到相应的这个 htm 文件的一个内容里面了，也就是浏览器已经把这个文件访问到，并把它获取过来，展示在这个浏览器的显示区域当中了。 然后呢这个文件我们可以点击看一下这个文件的它这里呢就是一个，也有一个这样的一个 a 标签，那这个 a 标签呢，它就是一个 home 啊，就是这里这个 home， home 呢，其实它的这个地址就是这样一个斜杠，那斜杠呢，其实 是表示一个跟目录，那当我们点击这里的话呢，他就会自动的返回到这个我们原来的这样的一个 htm 文件的这样的一个页面啊，然后我们再看到这边啊，像这边这个 staff 这个页面呢，我们再点过去 啊，他这里的这个地址其实是一种绝对路径的一种写法啊，绝对路径的一个写法，那所谓的绝对路径呢，其实是非常好理解的，也就是当我们去使用一个绝对路径去访问一个文件，或者是去访问一个路径的时候呢， 其实他的开头永远都是一个斜杠，这样的一个斜杠，这样的一个斜杠，这个斜杠就表示了指向的是这个项目文件的根目录，项目文件的根目录的话呢，其实就是最顶上的这一层 啊，然后呢，比如说你要访问到具体某个路径某个文件的话，你就可以根据他具体的一个路径往下写就可以了。比如说我在这里 src， 然后再 image s， 然后在 mountain 点 png， 那我你通过这个路径访问到的就是这个文件了。然后绝对路径的话呢，是你放在任何一个地方用他的写法都是一模一样的，因为他的一个文件结构永远是从这个文件夹的最顶层开始算的， 所以你不管你这个路径放在哪一个文件里面去使用，只要你访问的是同一个文件，那么他这个地址，他这个路径的写法肯定都是一样的，因为他这个文件结构是不变的。比如说我要访问这个 home 文件夹里面的 这个五 htm 文件，那我就要把它改成斜杠啊，表示跟目录就顶最顶层的这个目录，然后配置文件夹， 然后 home 这个文件夹，然后比如说这个文件的名字是 index 点 h t m l， 那我们这里呢就改成 index 点 h t m l 这样的。你这个路径，你放在你只要是在这个项目里面的任何一个文件里面去访问这个路径，都是能 访问到这个文件的啊。所以绝对路径的一个特点就是只要是你在这个项目里面用这个地址去访问这个文件，那么他这个地址都是一样的。 如果我们单纯的只有一个斜杠的话呢，其实访问的就是这个根目路的最顶上的这一层，那为什么我们这里只要一个斜杠，我们他就能点击这个文字，然后就跳转到了 相当于是最顶上的最原始的这个 h t m 文件呢？那其实呢，它这个 a 标签的一个访问逻辑，它有一种默认的一种模式， 就是当我们去访问某个路径，你可以把它理解成就是访问某个文件夹，因为我们访问这个根目录的话呢，其实也就是访问根目录那个文件夹，它会自动的去访问，首先会自动的去访问 index 点 h t m l 这个文件， 所以你这样写跟这样写是一样的啊，是一样的，只是说你这样写的话呢，如果我们过去，然后再给他 点回来，他这里的一个地址的一个显示效果是不一样，他会具体这个地址栏这里他会有这个具体的一个文件名展示出来。但是如果我们这里没有的话呢， 我们再切换回去，你看他这里就没有这个具体的 一个后面的一个文件名啊啊。所以有时候呢，我们都不会去这样跟一个 index 点 h t m l 而是直接就写一个路径，这样的话看起来会清爽一点。然后像前面的这个文件，这个原始的一开始的 h t m 文件， 其实这里的话呢，我们也可以按照他这种默认访问模式，把这个访问路径给他精简一点，我们这里呢可以把它全部切换为这种绝对路径的模式， you stop 这样，然后 这个 product， 然后这里 about 用绝对 促进模式，相当于是访问一个文件夹嘛，所以它自动会先去搜索有没有对应的这个文件夹，里面有没有对应的这个 index 点 h t m o 这也是为什么我们一开始就是跟大家说，你这个 h t m o 这个文件最好都取名叫做 index 啊 index， 然后呢我们这里也可以看到， 我们可以完全没有问题去访问到这些文件，对不对？然后呢其实这个这个斜杠，最后这个斜杠你加不加都没有关系，他其实也能正常的访问到的， 比如这个 product 哎，它会自动的在这个后面加一个斜杠啊，在访问过去之后，在这个地址栏里面自动加一个斜杠，但是你这里其实不加也是可以的啊，但是如果是一个好的书写习惯的话呢，你是可以把它加上的，那 a 标签的内部呢？它这里文字啊，不一定是只可 可以用文字，他也可以嵌套其他标签。比如说我这里用一个图片标签，然后呢我这个地址我也用这个绝对路径的写法，然后 这样的一个方式，然后回到这样的一个路径这里，然后你就会看到我这里就变成了一个图片，对吧？然后呢我这个图片他其实是有一个 点击的效果的啊，点击的效果你就可以点击它，点击之后呢一样可以跳转。所以很多时候呢，你去点击一个图片啊，或点击一个视频，或点击其他的元素，让它产生一个跳转，其实都是可以用一个 a 标签去给它包裹一下它，然后达到这样的一个目的的。 然后像我们这个 a 标签呢，其实你包他有一些默认的一些点可点击的一个状态，比如说这个鼠标的样式变化呀，然后像这个颜被点击之后，颜色变成一种紫色的这样一个效果的话呢， 其实这些东西我们后期其实都是可以改的啊，这些都是这样的一个 a 标签的一个默认的一种样式的一个效果。

大家好，今天我们介绍两个标签，喜欢请点赞收藏。第一个要介绍的是导航标签， 标签表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见势力是菜单目录和。所以要注意的是，并不是所有的链接都必须使用导航标签，他只用来将一些热门的链接放入导航栏。 例如福特标签就常用来在页面底部包含一个不常用到没必要加入那样的链接列表。一个网页也可能含有多个那标签， 例如一个是网站内的导航列表，另一个是本页面内的导航列表。站内导航就是可以跳转到站内的其他页面，页面内的导航就是可以跳转到页面内指定位置。下面我们一向视力代码以及运行效果。 接下来我看一下第二个标签，标签含义是如果页面上的脚本类型不受支持，或者当前在浏览器中关闭了脚本，则在 html 元素中并以脚本未被执行时的替代内容。 最后我们看一下视力代码以及运行效果。从运行效果上看，左边是支持脚本的显示结果，页面显示内容正常，右边是浏览器不支持脚本时候显示的结果，在页面上显示了标签中定义的内容。

htvl 标签可以拥有属性，属性是以名称直对的形式出现， 属性是在 htmil 开始。标签中规定，请看演示，比如我们给网页设置背景颜色，请看在包的标签中设置 style 等号，双引号里面显示，这里我们选 bic blod go clol 背景色冒号格瑞。这句代码的意思是设置背景色为灰色，卡车加 s 保存，保存好以后选择文件，右击选择浏览器，打开背景色已变成灰色。 颜色值我们可以使用预定义的颜色值名称如格瑞来定义，也可以使用十六静置的值来定义，如修改格瑞 瑞为井号 f f 六六六六，这个颜色是个红色，修改好以后考试加 s 保存，按快捷键 f 五刷新浏览器 背景色变成红色。关于颜色我会在后面单独讲，这里就不多做解释。再比如，我们写一个标题肩括号 h， 一开始标签肩括号斜杠 h 一结束标签 标题名称我们写 ht 秒第五讲，写好以后考出加 s 保存，再按快捷键 f 五，刷新浏览器标题显示在这里。现在标题标签文字是左对齐， 我们设置居中对齐，请看设置烂属性为三层就可以了。考试加 s 保存，按快捷键 f 五，刷新浏览器 标题以居中显示。再比如，我们设置标题字体为红色，请看设置 style， 等于双引号当中写卡了冒号 red， 这就是代表设置标题字体为红色。 考试加 s 保存爱。快捷键 f 五刷新浏览器标题字体已显示为红色，由于背景色的原因看不清楚，我们把背景色修改一下，改为灰色，再刷新下浏览器，现在看到的就比较清晰了， 总结一下，今天我们讲了如何设置背景颜色以及标题居中和标题字体颜色的更改。当然 st 马尔标签的属性有很多，会在日后 的讲解中用到的时候给大家慢慢介绍。在这里没有办法一次性讲完，下一节讲解水平线、 hr 标签以及 ht 秒注视和如何查看原代码。

呃，大家好，我是钱玉，说是吧？我们三节课呢，把这个地图社区给大家讲了，其实那个图这个图片这一块的话， 我们又讲完了，是吧？嗯，然后呢上上去我给大家说过要利用这个这个图片标签是吧？来做一个这个呃完整的一个网页，是吧？这一块的话我们放在下一个讲，是吧？ 因为一讲到案例基本上呢这个话费时间是很长的事的。我再说呢，我们这个整个的 hdm 也上了很长时间了，然后也接近尾声了，所以说所以说呢，我们想把这个剩下的这个标签， 然后给给讲完剩下的一些小标签给讲完，讲完之后呢，然后我们再再来，嗯，做一个这个完整的页面是吧？就做了一个收尾。 什么？你想一个 hm 课程，我们不可能俩拖这么长时间是吧？其实大家学这么久是吧？学完之后如果大家跟着我的视频呃，认真学之后是吧？嗯， 你们现在其实可以在工作当中是吧？呃，做一些简单的工作，比如说这个网站编辑这一块，比如说做一个简单的维护这一块，你们应该都是没有问题的，嗯，是吧？我讲的东西是吧？ hm 虽然不难，但是我讲的东西还是呃比较实用的。 然后这节课呢，我们给大家讲这个超连接啊，是吧？超连接的话，其实我们在地图热区里面是吧？也，那也是一种连接方式是吧？只不过呢这时候呢，我们要做一个就是说更加呃专业的一个连接，他相对来说是比较专业的一个标准的这个独立标签。 然后这一块的话是我们还是呃先看下课件啊，是吧？操，连接是吧？操，连接的结构呢？是 a 开头是吧？然后属性是黑 f 的话，这个呢也就是个连接，这个连接属性是吧？你要连接哪里面去是吧？当然了，它可以连接到这个外网，是外部网网站是吧？ 可以连接到本地文件的啊？本地文件都是可以的啊，你包括的话他也可以这个发邮件是吧？连接到 ftp 是吧？嗯，像这些呢，我现在暂时不讲，是吧？等到我们后面讲到的时候，再给大家这个对应去讲解，是吧？现在给你讲这些东西，你没 ftp 讲了你也没有用，是吧？所以说呢，我们就说目前来说比较实用的，讲比较实用的啊， 然后我们首先呢还是以代码为主，我们把这个页面打开，然后切换到代码模式啊，我们这块就不需要设计了，是吧？比如说我这块要给一个文字做个长连接，比如说百度， 百度的话，然后这时候呢我就可以给百度做个槽连接，然后把 a 标签给写英语，他是 a 标签， a 开始，然后呢 a 结束，然后他这里面的话，你既然要连接了百度的话，那我就快。然后 是不是要加 haf， 然后连接到对应的网网址里面？ htgp， 一定要记住啊，你连接外网的话一定要加 htpp 啊，不然的话连接不到点上啊，百度点 come 我们这块，然后我们在页面当中看一下， 把前面给关了啊， 大家看到没？我这个百度是不是有字体变色了，是吧？然后我一点他的时候， 他就跳到那百度这个呢是在本页面的打开，像我们上一个在讲热区的时候也给大家讲过一个他个属性这个哎， a 标签的话，他也有个他一个属性他一个的 是吧？这个胎克也是一样的是吧？你看你在哪里面显示是吧？如果赛夫的话是在本页面的显示。呃，本来可的话是在这个新的新的窗户里面打开啊， top 和拍下论成 先不讲啊，那个一般是在框架里面用的啊，我们再靠刷新一下，再刷新一下，看一看他是不是在新的窗口里面打开了， 是吧？这回呢，我这网又连不上了是吧？然后这一块的话，你这一块的话就是给连接是吧？你可以给蚊子做连接，当然你也可以给图片做连接，比如说我现在要给一个图片做连接，首先的话你要把图片给插入进来，有 img 啊，把它结束了，然后呢？ s r c 嗯？一点让平行记是吧？我这里面好像是一点平行记，是个地图是吧？一点平行记没有关系啊。 imags 下面一点偏见，然后我再往里面浏览看一下，是吧？他俩是不换行的，因为这个 a 标间和这个 img 图片他俩都属于标 先是吧？不是一个容器，然后这时候呢，我我给这个一麦姐，然后做个连接是吧？这时候不是热血了，大家注意点啊，我是给整体做做连接，这时候呢，你要把这个一麦姐连接，把它包进来。 a 表情，然后的话我在后面，然后加一个结束， 在这里面加黑 f。 这个呢？这个黑 f 呢？跟 src 他俩类似啊，也就是路径。然后呢，我让你连接到 http 冒号双鞋杠三 w， 点上百度 点看吧是吧？我给你来个，他也给他是吧？他也给他，我让你在新的窗口里面打开， 然后点保存一下，是吧？如果你要嫌这个太长了，你这块，然后可以给他加一个换行，然后把这个呢空一个，是吧？这样 刷新一下，你看一点整张图片，他是不是跳到百度了，大家看一看，你点百度也是一样的，是吧？跳到百度了，是吧？这个呢就是给这个图片做长链接， 既然我们学到这一块的话，大家想想，我结合我前面所所讲的东西，是吧？大家可以想一下是吧？你可以给哪些做长连接是吧？你可以给导航做长连接，可以给这个新闻做长连接，也可以给这个产品图片做做长连接，对不对？我们这块，然后可以，然后新建一个页面给大家看一看，比如说 弹幕一上，我来做个导航， 是吧？这时候呢，我就可以来推补一下，是吧？做个导航是吧？我前面都已经做了很多了 基地，然后比如说我这块，然后来百度是吧？网站首页是吧？ 然后比如说我来复制几个是吧？咱俩这块你先先把这个导这个连接加上吧，不然的话一个一个复制太麻烦了，哎，黑暗服。 然后你这块，然后你可以来写一下，比如说我写 http， 当然我们作为网站里面的东西啊，一般情况不会连接到外网是吧？都连接本站内，但是我们这边没有几个文件是吧？所以说我们这块拿先连接到这个百度里面 来这么多是吧？完了之后呢，我给大家加一个什么 y 的字， 有八百，我让你拉 at， 然后我把这个内部属性给清一下， 高斯贝斯，然后是二零，呃呃，这给他加什么东西呢？必须卡的是吧？ 比如说这个这个颜色吧，我们来刷新看一下，好，他现在是这样的，是吧？这时候呢，我再给他设个高度， 告诉我给他算个四十，五十吧，五十。然后吧，我再让这个 t rtr 里面加个拉印三层， 让蚊子驱动，是吧？他就变成这样了啊。大家先不用看这个蚊子上面有斜杠是吧？比如说把这个颜色去掉或斜杠去掉，我们现在先不管他，我们后面再处理是吧？到 css 再处理，我们现在只只了解这些标签怎么使用啊 啊，不用在乎这个玩意美观。做完之后呢？比如说我点了他的，他到百度了，是不是这个是在本页面打开的？是赛夫默认赛服吗？然后这块的话，你可以给他加他一个他，比如说他一个他 啊，你这块，呃，你可以在这个布莱克里面打开，是吧？在新的页面里面，当然这块你不一定非要连接到这个里面，是吧？你，你也可以连接到图片是吧？比如说 imags。 我连接到图片 超连接话，他也是可以连接到图片里面的，比如说 zs 三点 gpg 是吧？ zs 三点 gp g 是吧？我们来看一看啊，这双也可以加他也可，他是吧？他也给他是吧？然后让他不耐克吧， 然后第二个是吧？第二个是连接到图片的，大家看一看啊，他是不是到图片了是吧？也就是我的藏连接是吧？既可以连接到外部网站是吧？也可以连接到藏连接，比如说我也可以连接到 内部网站内部页面，比如说我连他 dm 是吧？你最快的话，你就怎么来连接的，是吧？就是 dm， 因为他俩是同级嘛，是吧？ dm 点上个 html 啊，多一个 l 啊，是吧？因为这个单某一和单某他俩是同级的，单某一和这个 img 他俩也是同级的，所以说你在写的时候要注意路径， 然后写完之后的时候，第三个是吧？第三个连接我们上线页面看啊，看是不是连接到咱榜一了吧， 是吧？这个呢，我没有加他一个的，所以说在这个本页面内打开的，所以说这块的话，你可以给他加他一个的， 他一个特 black 说这个呢是，你是给这个文字加连接是吧？那我们也可以给这个图片加连接，对吧？图片怎么来加呢？是吧？我们这块然后可以做个简单的，是吧？比如说加个 b 啊，换行一下 是吧？这节课呢，我们主要讲标签应用是吧？然后讲这个案例的话，我们下一个再给大家讲这个具体怎么来使用，比如说我现在给他然后插入几张图片，是吧？ 这样吧，我来换行呀，因为这个代码这个标签有点多，是吧？ i m g s r c 是吧？我来连接这个 i m a g s 下面的 z s 三点上 gp g 是吧？ 嗯， 三百是吧？三百来四四五六是吧？那我最快拿来复制一下， 然后设置完之后呢，我就可以拿外的纸给他设一下，外的纸的话，你这个三四一千二的是吧？一千二。然后的话，呃，高度的话我先不设是吧？然后呢，我让你拉你三层 把默认的这个水印清掉， 当然我这边也可以给他设设多点，是吧？三零，然后我让你既然你图片这个标签的话，他也是个内容，我也可以让你去做来三次，然后我们在浏览器上去看一看， 是吧？他，我这么做的目的上主要是让图片是吧？他中间有个间隔是吧？当然你这上面这张图的话，上面这个导航的话，你也可以给他设一下，是吧？设个幺二三零，然后保持一致 啊。这块的话，你也可以在这图片里面做连接，比如说我一点的话，跳远了一个页面啊，产品们跳远到产品页面，这时候呢，你就可以在里面加了，比如说 a 标签 f， 然后你在这里面然后给他加一个，比如说我连接到百度 http 冒号双斜杠三 w 点上杠，百度 来正眼看我，是吧？然后呢我再给大家拍给他，是吧？ 布莱克，我们来刷新一下我们的页面，然后点一下是不是可以跳到百度了， 是吧？当然的话你也可以按照这个跳远的，这个图片上面也可以让你跳远到这个页面里面，本本在内的页面里面都行，然后第二个，比如说 a 标签， 然后这个地方我可以加 f h r e f 等于，哎，我就我就让他写到 这个，我连接到他自己本本图片吧。 zs， 四点上的 gpg， 说一字类推是吧？下面 a h r e f 等于 i m a g s， 下面的 z s 五点上 g pg， 是吧？一字类推是吧？你这个是六是吧？我复制一下 来，大家看一看页面是不是一点他跳远了 啊？我是没有加泰格的啊， 浏览一下，然后把它这个属性全给拿下， 我不想让我本爷们的关了是吧？ black， 让大家闪一下页面看一看是不是这个到百度， 然后呢？这个道呢？你看大家发现啊，你这个连接到外网是吧？他是有速度的时候，我这网不好的话，他就打不开页面，然后你相相反，这个是吧？这个的话本地的话速度肯定会快的秒开是吧？在本地再连嘛，所以说呢，你看是不是 这个呢？就是给超连接这个使用方法是吧？我们是吧学了超连接之后，是吧？大家就可以做自己想做的东西，也， 所以说你们的网站也不就是干妈的网站是吧？你们做一个页面当中可以跳远了不同的页面是吧？呃，让不同在不同的页面里面显示是吧？我们下节课呢？呃，利用长链接给 给大家讲一个这个网站是吧？网站连接是吧？给大家讲个实力是吧？嗯，给大家讲正儿八经的一个网站的一个开发流程是吧？比如页面是吧？跳到哪个页面，跳到哪个页面，我们做规范的是吧？下节课是吧？这节课呢？给大家讲那么多是吧？大家下去一定要练习啊，因为我们剩的东西不多了，剩的东西都是些小标签， 嗯，所以说呢，大家还是以时间为主，是吧？希望，嗯，这门课录完之后，大家能能有能有所收获是吧？能把我讲东西正儿八经的工作当去去。

上一角我们讲了 htmil 的基本结构，这一角我们讲 htmil 的 h 标签和 p 标签。 先给大家演示 x 标签的效果，在解释其意思，请看肩框号 h， 一开始标签，肩框号斜杠 h 一结束标签，这里写标题，比如标题写 ht 秒视频教程， 写好以后，按快捷键烤串，加 s 保存，选择文件，点击右键选择浏览器，打开这个标题，就是 h 一标题显示的效果。 h 标签总共预定了六个级别， 分别给大家演示一遍，我们把上面的代码复制改为 h 二 h 三， h 四， h 五， h 六， h 二， h 三， h 四， h 五， h 六，修改完毕以后，按快捷键考证，加 s 保存。我们把浏览器刷新一下，点击刷新按钮，或者按快捷键 f 五刷新 六个标题显示的效果是这样，在开发当中需要哪个选哪个。再给大家演示 p 标签， p 标签里面写的是文导的段落内容，请看肩宽号 p 开始标签，肩宽号衔告 p 结束标签，这里面我们写文导段落内容， 比如我们写今天讲解 html 的 h 标签和 p 标签，写好以后，按快捷键 ctrl 加 s 保存， 我们在刷新下浏览器 p 标签段落内容显示在这里。大家请注意， ht 秒有很多标签，不同的标签代表不同的意思， 我们一定要按照 htmil 的规定把内容和标签对号入座，比如标题我们就写到 h 标题标签当中，文稿的段落内容我们就写到 p 标签当中。 当然我们使用 p 标签也可以实现小 h 标题标签一样的外在效果，但是不建议大家这样去做，因为浏览器是通过 ht 庙标签来剪辑内容， 搜索引擎是通过浏览器解析的内容优化和推广。如果你的标题是写在 p 标签当中，那么浏览器 就不会检测到你的标题，无法向搜索引擎推送。你只有把标题写在标题标签当中，搜索引擎才能解锁到。所以我们一定要对号入座。 标签规定写什么内容我们就写什么内容，规范使用。比如 h 标签当中我们就写标题， p 标签当中我们就写文导段落的详细内容。下一讲讲解 a 标签和 am 卷标签。

a 标签在 htm 当中用于定义链接，请看演示肩框号 a 开始标签，肩框号斜杠 a 结束标签，这里写链接标题，我们写百度链接，需要指定一个地址。 a 标签中 hr， e、 f 属性，设置链接地址等于号，后面写链接的具体地址需要选在双引号当中，这里我们选 https 冒号双弦杠三 w 点百度点 com 上面 a 标签的意思是链接到百度网页， 爱考顺加 s 保存，保存好以后选择文件，右击选择浏览器打开，这就是刚刚编写的 a 标签代码，我们点击百度就可以链接到百度首页，请看一链接到百度首页 再给大家演示，哎。每卷标签的定义请看肩框号 img， 我们也可以在开始标签中结束标签，有的标签可以这样写，打上斜杠就代表标签结束。 srs 是 am 者标签的一个属性，设置图片的地址等于号，后面写图片，具体地址需要写在双引号里面，我们就设置 bc 点 jpg 这张图片 f 冒号闲告 bc 点 jpg。 我们的图片是放在 f 盘跟目录下，设置好以后 考却加 s 保存爱快捷键 f 五，刷新浏览器，图片显示在这里，这是图片显示的原始尺寸，图片太大，我们把它设置小一点，请看 位置，设置图片宽度等于号，后面写宽度值，这里我们选四十像素四十需要选在双引号当中 pat 设置图片高度等于号，后面写高度值，这里我们写二十像素。 ctrl 加 s 保存，我们按快捷键 f 五，刷新浏览器 am 卷标签的图片显示在这里，我们可以把图片修改成链接按钮，点击图片 链接到指定地址。假如点击图片链接到百度首页，现在点击图片没有任何反应，请看 我们把 amazi 标签代码复制到这里就可以了。 ht 码标签是可以健康使用，现在考这家 s 保存，我们爱 快捷键 f 五刷新浏览器，现在点击这张图片就可以链接到百度首页。点击图片链接成功。 总结一下，今天我们讲了链接标签 a 标签，图片显示标签， am 卷标签。下一节讲解 htvl 属性。

我们浏览的网页是通过外部浏览器剪辑 htvil 标签显示出来的，浏览器不会显示 stmil 标签， 而是使用标签来解释页面的内容。先给大家写一个最基本的网页结构，让大家看到效果，再一一解释其中的意思。 首先我们先新建一个网页文档，点击右击选择新界文本文档，我们给网页取个名字，这里就叫 maxt st 苗，我的第一个 ht 苗 st 苗网页的后缀名必须是 h t m l 或者 h t m。 文件创建好以后，我们使用 note 八的加价这款编辑器打开，我们在这里编写 h t 苗 代码。 note 八的加加编辑器有个好处，那就是 s t l 关键字会变色，通过变色字体我们会减少代码书写的错误。 当然 s t m 二的开发有更高级的开发工具在后面，开发项目的时候我会介绍给大家。对于初选者，不建议大家使用高级的开发工具，因为高级开发工具能自动生成很多代码，不便与初选者学习。 使用简单的编辑器编写代码，第一能让你多练习书写代码，第二能让你彻底加深理解代码的每一个意思。 现在我们开始第一个 ht 苗代码的编写，请看如果我写的这些代码你看不懂没有关系，写完以后我会给大 大家解释的。 ht 秒开始 ht 秒结束，黑的开始，黑的结束，胎头开始胎头结束，这是我的第一个 ht 秒包的开始，包的结束， p 标签开始 p 标签结束，这是我做的第一个网页写好以后，我们点击保存，或者按键盘上烤串加 s 快捷键保存，保存好以后选择文件，右击买 fast st 秒文件，选择浏览器，打开 这个网页就是我们刚刚编写的，现在给大家解释上面代码的意思。 ht 秒是用来描述网页的一种语言。 ht 秒指的是超文本标记语言 happy tict、 马卡普来个位置，使这四个英文单词的首字母缩写。 s t 苗不是一种编程语言，而是一种标记语言。 标记语言是一套标记标签组成，写在肩括号里的代码就是标记标签。 htvl 使用标记标签来描述网页。 html 通常是成对出现的，比如 xtmo， 第一个标签是开始标签，第二个标签是结束标签。开始标签和结束标签也被称为开放标签和闭合标签。选在包的标签当中的内容是我们在浏览器中看到的正文呈现在这里。选在贪图标 标签当中的内容在浏览器中呈现在这里。浏览器标题头部。现在我们再来理解我开头讲的这句话。我们浏览的网页是通过外部浏览器减息 htmo 标签显示出来的， 浏览器不会显示 htmil 标签，而是使用标签来解释页面的内容，所以我们编写的 htmil 标签不会显示出来，而是通过浏览器解析输出内容。 这就是第一个 s t m 二网页，大家把这几个标签都记住，多练习几次。这是 h t m 二网页最基本的结构。每个网页都必须选在肩括号 s t 秒开始标签和肩括号斜杠 xt 秒结束标签当中。黑的标签当中应该写什么内容，我会在后面课间详细讲解。网页的主题内容必须选在包的标签当中。 下一节我们讲解标题标签、 h 标签和段落标签、 p 标签。

我们看一下，接下来我们需要做的是对中间导航条，对吧？刚才导航条让我们插入是一张图片， 那图片里面虽然说我也可以设置链接，对吧？也可以设链接，选首页追动态画面介绍给他分别设链接。但是呢，这种链接呢，是没有颜色的，就没有办法达到一个达到我们这里面的效果，就像这样，你看我点每个图片，他对应的背景颜色可以发生变化啊，没办法实现这种效果， 那这是怎么办呢？我就需要来设链接啊，先把它删掉，删除，删除之后我要看一下他需要有几列，对吧？几列需要在这里面插入表格， 有几列需要操的表格？首先呢，看一下前面这个部分，是一列就是空白，对方是一列，首页是第二列，三四五六 七八九， 一共是九列，对吧？九列一行， 那我就需要在这里面在这个地方插入一个表格，是九列一行的，插入一个表格，九列一行啊，好，我们看一下点插入表格，选择一行九列， 一行九列，这时候你可以用像素保持百，保持为一千的像素，也可以跟他大小一模一样也行，或者这种百分比，把它改为百分之百，就完全嵌套在我这个表格里面去啊，嵌套在这个表格里面， 就让他中间没有任何的缝隙，可以完全实现完全的嵌套，但他没有任何的缝隙，那其他的均为零啊，他们之间三个 无缝衔接，都会领，就让他单元格和单元格之间不需要有间距啊，都会领，点确定就可以了。好，这时候我们可以发现啊，这个表格就这样了，你看有九列对吧？第一列里面怎么添加？点第一个单元格？ 点第一个单元格往里面添加。插入就不要选图像了啊，我们第一个可以插入图像啊，因为第一个是不屑又被点颜色可以插图像，图像没找什么呢，找一下，就这个啊，看一下 nav 零二，就找这个红色的 nav 零二，点确定就可以了。 确定，那其他的呢？要一定要把这个线拖过来啊，拖到最前面来，因为他前面这个地方是代表是一列啊，代表第一列，这个是第二列，第三列，对吧？这个距离一定要一定不要把所有的图，所有的图片 全部插到一个单元格里面去了啊，一个单元格里面只放一个图片，一个内容，你不要。以前呢，有很多同学就是把所有图片都放在一个单元格里面，最后预览的时候就出现很多的错误啊。 然后最后一个单元格也是一样啊，最后一个列一二三四五六七八九，最后最后列也是一样，插入一个图像，插入一个 nav。 最后一个啊，就这个幺零，第十个 就可以了。好，中间呢，你把它拖动一下，稍微能看得到图像。 好，第二个从第二个开始啊，先把头尾给它添加上。从第二个开始需要添加什么呢？ 添加插入里面选择。不要选图像了啊，选择图像对象就是当鼠标经过这个图像的时候，他会变一张图片啊，变一张图片好点，这这样点这个啊，图像对象里面鼠标经过图像啊，选择图像对象，鼠标经过图像 里面这个图片名称不需要改。那么原数图像是什么呢？点浏览就是 nav 首页这个啊，零三圆的图像，红色的，那么数，当我的鼠标放在图片上之后，他会变成另外一张图片， 变成黄色底开始的啊，就这个啊， nav 零三二，零三，就这个，就鼠标经过图像，然后呢，要给个必须要提问文本，你写也可以，不写也可以，但是 这个必须要给我写，就这个 url 就是链接必须要写，知道吧？你不写的情况下，后期没办法设链接啊，这个链接名称你可以给他设置一个，就是什么呢？我本身是首页，你可以点浏览选择首页，选择他， 你自己手动写也可以， rnds 点 atm 手动写也可以，知道吧。好，这第一个就完成了，破小一点啊，然后中间的间隔呢？等会我们再去完成完善一下他啊，间隔 记得把拖的一个紧一点啊，那么第二个就开始插入同样鼠标经过头像这个地方啊，选择浏览 是最新动态零四这个， 那么鼠标进口图像呢？就是黄色底的零四这个，这个 duil 必须要写，这时候就没办法预览了啊，这是动态，你可以写一个什么动态？点 atm 写拼音啊， 链接里面必须要写拼音啊，动态或者英文单词都可以。点 html 至最完整，一定是点 html， 不然的话他识别不出来什么什么名称。点 atm， 这个必须要有啊，点 atm， 动态点 atm， 你可以用他的拼音吗？ 一次类推，将后面的所有的全部做出来，全部添加完成。那这样我们导航条就完成了啊，我们做完之后保存一下啊， ctrl 加 s 保存，然后呢再将刚才的页面刷新一下就可以了啊， 我们这个页面刷新就可以了。那这个鼠标经过他就可以变了啊？鼠标经过他就可以变了。中间的线等于我们把它变得齐一点就可以了啊。变稍微略齐一点就行了，这还要往前面移动一点距离，还是稍微看看是不是五十九啊？这个是二百一十九， 要往中间去一点，还要微调一下。 好，大家把后面几个全部射完啊，全部射的完啊，来试一试啊。 鼠标经过图像啊，在鼠标经过图像里面来请编辑啊，在鼠标经过图像里面来编辑，编辑时候每个里面必须要添加链接啊。

哈喽，大家好，我是退役成轩。上节课我们介绍了 c s s 里面一些常用的选择器，这次我们通过实现一个页面里面的导航栏这样的效果来进一步讲解。 c s s 最后用到的还是以前制作过的这个读书笔记的网页。稍后我也会把和这节课相关的 h t m l 代码和 c s s 部分发布到我的公众号退役程序员的茶室。 我们先看一下 html 页面里面，这次我们希望把这个 header 里面显示的内容作为导航栏的内容展示出来。所以在样式表里，首先在后面我添加了一个 header。 如果这个页面里面还有 多个嗨的标签的话，这里我们就不应该使用他的标签名字为选择器了，而是应该用类这样的选择器代替。首先我设置的是这个嗨的元素在页面里面的宽度， 这里属性用的是 with， 它的值设置的是百分之一百，那就是应该让它占用从左至右整个的部分，它的高度我设置的是五十 p x， 所以用到的属性是 hat。 接着呢，为了和页面里面其他部分区分，我设置了他的背景色，用到的属性就是 background color。 在页面里面我们已经可以看到了 他的背景色显示了出来。但是有一个问题，就是这个 hider 里面存在的这个退役成宣的茶式和下面的这个列表部分，他是分上下两行来显示的，而我们希望他是在同一行显示， 所以在这个 hider 里面，我们设置它的 display 的值为 blacks。 这样的话，这个 hider 标签里面的各个元素在页面里面就可以在同一行显示了，下面呢我们需要让这个 导航标签里面的这个列表里面的内容要按照在一行里面显示的方式，所以在 c s s 里面我们添加了一个选择器，也就是在 header 部分里面 的 name 里面的 ul 对这个元素来进行设定它的样式。这里首先用到的属性就是 list gunstyle 这个属性，将它的之设置成 no， 设定他之后，我们就可以去掉默认的这个无需列表的格式了，可以看到前面的点已经不在了。 接着为了让他每一项水平来显示的话，我们需要针对的是这个 ul 里面的 li 标签进行设定他的样式， 也就是用属性 display 来设定它的值，是音赖，也就是在行内的意思。这样的话设定之后可以看到纵向的列表已经变成了横向的， 这时我们看到因为我们在每一个列表项里面用到的都是 a 这个标签，所以 a 标签有自己的样式，也就是默认的是没有点击的时候是蓝色，还有下划线这样的样式。 我们不想让他还显示成这种样式的话，就需要继续添加一个针对这个元素的样式，所以在选择器设定的时候，要把范围限制在这个 li 里面的 a 标签， 所以用到的中间都是用空格来分割的，表示他的下一集。然后在这里面我们用到的属性是 text 杠 decoration， 将它的值也设置成 none 这个 test decoration， 也就是说这个 文字的装饰这样一个意思。然后呢，我们还改变了这个字体的颜色，把它的咖了设置成了 y 子，也就是白色，然后它的字体大小用的是 fountain size， 把它设置成二十 p x， 这样我们可以看到这个链接的效果基本就显示出来了，但是他的之间的距离还是太近了，所以在每一个链接之间我设置了他的 pandy， 他的意思也就是 这个元素的内容到他所在的这个元素边界之间的间距，这里面他后面的值可以有四位，也可以有两位，也可以只是一位。这里我用的是两位，也就是第一位代表的是上下的间距，这里都设的是十片 x， 然后呢，它的左右的间距设置的是二十 p x， 设置完之后我们就可以直接看到它的间距已经拉开了。但是需要注意一点的是，可以看到 虽然我设定的是上下都是十 px， 但实际显示的时候可以明显看到上面的宽度跟下面的宽度是不一样的。 这就是因为我们每一个标签对应的元素，他们都有些默认的间距，如果这个元素以外的间距叫做 margin， 这个元素内部的间距叫做 padding， 所以呢，我们首先要清除掉这些默认的间距，这就需要我们在这个作为 包含着这些列表项的容器 ul 标签里面，将这个 margin 和 pending 都设置成零 设置之后，他也会影响到下一集他的标签。去掉这些多余的间距之后，在这个 a 标签的样式里面先添加一下他的背景色，看一下实际这个元素现在的位置是什么样子的。 可以看到他并没有居中显示，为了让他能够居中显示，这里需要在这个 a 标签当中还要设置一个叫做 line 杠 height， 也就是行高，它的值要和我们这个设定的 header 它的高度是一致的，所以都是五十 px。 设置完之后，我们可以看到这几个菜单下基本就是上下居中显示了。另外呢，我还希望改变这个 hider 里面包含了这两个元素的间距，这两个元素也就是我们前面的退役成全的茶室所在的这个 h 三标签，还有我们后面的这个 u l 标签，他们俩之间的间距， 这里用到的这个属性是在 hider 的样式里面添加的 column 杠 gap 这个属性，也就是列的间隔，它的距离我设置的是二十 px， 设置完之后可以看到 这两部分的间距已经拉开了。另外我还希望改变这个 h 三标签里面的样式，所以 这里面添加了他的选择器之后，设定了他的字体颜色为白色，然后将他的字体大小也设置的是二十 px。 为了让他居中呢，这里用到的属性 是 online 杠 self， 让它设定的是 center。 设定之后我们就可以看到这个 h 三标签内容已经居中了，为了让它的位置再靠右一点，而不是完全贴着左边， 在 header 里面还可以再添加一个 padding left， 也就是设定这个 header 标签里面的元素，它左间距要有二十 p x 设定之后可以看到页面里面左边 已经多出来了一段的间距。为了实现鼠标移动到链接上时的变色的效果， 这里要用到一种新的选择器，就是冒号后面跟着 hover， 他可以让鼠标移动到页面上的某个元素上的时候，做出相应的样式变化， 这里因为我们需要让链接做出变化，所以是 a 后面加上冒号 however， 设定他的背景色发生改变，这里我选择的是 dark red， 修改完之后 可以看到页面里面鼠标一到链接上的时候，背景色就发生了相应的变化。好了，这节课就介绍到这里，我会把这节课相关的代码和补充发布到我的公众号退役程序员的查室，欢迎大家关注我们，下次再见！