第6章 网页代码优化

第6章网页代码优化课堂讲授6.1HTML基础学习目标◎了解HTML及常用的编辑工具◎掌握HTML基本标签的含义和用法◎了解代码编辑标准和编辑规范课堂讲授6.1.1网页和网页背后的秘密1．网页组成网页由代码组成，主要以HTML语言构成网页文档，网页源代码如图6-1所示。2．HTML简介HTML是HyperTextMark-upLanguage的缩写，是超文本标记语言或超文本标签语言。HTML文件以.html或.htm为扩展名，是目前网络上应用最广泛的语言，它可以跨网络、跨平台进行传输。HTML是构成网页文档的主要语言，它使用一系列的标签来结构化信息。课堂讲授6.1.1网页和网页背后的秘密3．HTML文档结构HTML源码结构如图6-2所示。（1）文档html：任何网页代码都以html开始，以/html结束。任何不在这两个标签之间的内容都不属于HTML文档，也不可能在网页上有所显示。（2）头部head：定义网站类型和属性，以head开始，以/head结束。（3）主体body：展示网页主体内容，以body开始，以/body结束。这部分是网页主要内容的集合体，包含在网页中显示的文本、图片、链接等具体内容。课堂讲授6.1.1网页和网页背后的秘密4．常用编辑工具（1）记事本：Windows内置，体积小、启动快、内存占用低。（2）UitraEdit（UE）：一款流行的老牌文本编辑器，一般用来修改EXE或DLL文件，软件附有HTML标签颜色显示、搜寻替换及无限制的还原功能。（3）Dreamweaver：集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻松地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。课堂讲授6.1.2HTML基本标签1．title标签网页标题，在head部分，以title开始，以/title结束，如图6-3所示。课堂讲授6.1.2HTML基本标签2．meta标签网页信息，在head部分，主要用于三大属性的定义。meta标签源代码如图6-4所示。课堂讲授6.1.2HTML基本标签3．h#标签定义文档标题，#可以用数字1～6替代,数字越小级别越高，级别越高的标题越大越醒目，以h#开始，/h#结束，中间是标题内容。4．p标签定义新段落，以p开始，以/p结束，中间是段落内容。5．br/标签自动换行，应用在语句尾部。6．strong标签加粗强调，以strong开始，以/strong结束，如图6-5所示。课堂讲授6.1.2HTML基本标签7．img标签定义图片，可通过相关属性对图片进行设置，如图6-6所示。课堂讲授6.1.2HTML基本标签8．a标签超链接，本质上属于网页的一部分，允许同一网站的网页之间或不同网站的网页之间进行链接的元素，以a开始，以/a结束。课堂讲授6.1.3代码编辑的标准及注意事项目前，互联网中的网站代码全部是根据W3C标准编辑的，下面来具体介绍一下。1．代码编辑的标准——W3C（1）W3C的定义：W3C是WorldWideWebConsortium的缩写，中文是W3C理事会或万维网联盟，是制定网络标准的一个非盈利组织。（2）W3C的作用：统一了各个浏览器对HTML等代码的显示。2．编辑HTML代码的注意事项（1）所有标签小写。（2）不要忘记标签的闭合。HTML标签需要有开始标签及闭合标签，若缺少其一则该条指令无法生效。课堂讲授6.2站内代码优化学习目标◎认识常用标签、js和CSS语言对SEO的作用◎掌握HTML中代码的优化方法◎掌握js、CSS代码的优化方法课堂讲授6.2.1HTML代码优化网站代码优化是SEO工作中的重点，下面介绍HTML代码中常见标签的优化方法。1．h#标签h#标签是用来定义标题表示强调的一种标签，有h1～h66种不同的级别，用来呈现页面内容的层级。1）作用h1和h2标签中包含关键词，可提升关键词在页面中的权重。2）优化方法（1）h1标签和h2标签在使用时建议包含关键词。（2）h1标签和h2标签在使用时建议只出现一次。（3）h3、h4、h5标签的SEO作用较小，建议不要乱用。（4）h6标签可以用在首页友情链接处，以降低友情链接对页面目标关键词的影响。课堂讲授6.2.1HTML代码优化2．strong标签strong标签表示强调，有加强语气的意思，在浏览器中表现为加粗显示。1）作用有助于在页面内突出关键词，提升关键词与页面的相关性。2）优化方法（1）页面内不要有大量的加粗文字。（2）页面内非关键词文本少用此标签。（3）一般网站版块标题需要用此标签。（4）可以用来标注文章小标题。课堂讲授6.2.1HTML代码优化3．b标签b标签用来加粗显示页面内容，标签内文本呈现粗体显示效果。b标签与strong标签的区别如下。（1）相同点：都显示为加粗效果。（2）不同点：b标签只是物理性质的加粗，strong标签是语义的强调。结论：当文本中包含关键词时建议选择strong标签。课堂讲授6.2.1HTML代码优化4．img标签中的alt属性img标签是表示图片信息的标签，而alt属性是一个必需属性（一定要有），它规定在图片无法显示时的替代文本，鼠标指针悬停在图片上时可以显示文字注释。1）作用使百度更好地识别图片信息，从而使图片有收录和排名。可以用来调整关键词的密度，用来保持关键词密度为2%～8%。2）优化方法alt属性要和图片内容相符，控制在100字符内。课堂讲授6.2.1HTML代码优化5．a标签中的title属性a标签中的title属性为链接添加描述性文字，鼠标指针悬停在超链接上，显示该超链接的文字注释。1）作用增强页面和关键词的相关性。2）优化方法（1）title属性属于非必需属性。（2）调整关键词密度时可以考虑。（3）不同浏览器有不同的显示效果。课堂讲授6.2.1HTML代码优化6．iframe标签iframe标签会创建包含另外一个文档的内联框架（行内框架），在页面内加载其他页面及资源。1）作用iframe标签内的链接会被百度蜘蛛忽略。2）优化方法（1）尽量减少iframe标签的使用。（2）百度蜘蛛对采用太多iframe标签的网页不太友好。课堂讲授6.2.2js、CSS代码优化由于搜索引擎无法准确识别js代码，因此在网站代码优化时需要将js代码尽量替换为CSS代码。下面介绍这两种代码的相关内容。1．js代码的定义javascript简称js，是一门面向对象的编程语言，用来开发网页。js代码可以直接写在网页内，也可以写在网页外调用，如图6-9所示。课堂讲授6.2.2js、CSS代码优化2．js代码对SEO的影响（1）搜索引擎对js抓取有压力。（2）影响网页的打开速度。3．js代码优化（1）尽量减少js的数量和体积。（2）采取调用的形式来实现js功能。（3）重要链接不要加在js里。课堂讲授6.2.2js、CSS代码优化4．CSS代码的定义CSS（CascadingStyleSheet）译为层叠样式表，也称为级联样式表或者风格样式表，它是用来进行网页风格设计的，使页面内容呈现出丰富多样的效果，利于阅读。现在，CSS2还在使用，CSS3是目前最新版本。5．CSS代码在SEO中的作用（1）精简网页的代码体积。（2）提高网页的打开速度。分享案例案例1：h#标签的代码示例【案例描述】通过为页面中文字添加h#标签，使文字实现由大到小的排列，如图6-10所示。【案例分析】h#标签有增大文字的效果，并且增大效果由h1至h6递减，实现图6-10所示效果的正确h#标签添加方法如图6-11所示。分享案例案例2：页面新窗口打开与原窗口打开的优缺点【案例描述】相信很多网友都有过这样的经历：在浏览一个页面后想返回之前的页面，无奈找不到之前页面的链接入口，所以只能单击浏览器的“后退”按钮。还有的网页在浏览一个页面后发现该页面毫无吸引力，想返回之前页面浏览新的内容，但却因为习惯性地关闭网页而造成退出了整个网站。以上两种情况在网民浏览网站时经常出现，这实际上反映的核心内容是页面是否设置了在新窗口打开。那么，页面究竟是在新窗口打开好还是在原窗口打开好呢？接下来我们详细地分析一下。分享案例案例2：页面新窗口打开与原窗口打开的优缺点【案例分析】1．新窗口打开优点：（1）用户可以同时浏览多个页面，很方便，而且如果浏览同类页面，用户会自行对比，有利于提升转化率。（2）用新窗口打开，用户一般也不会立刻关闭之前的页面，新窗口和原窗口都将会有流量，提升了网站的PV值，同时减少了跳出率，这将提升网站的权重。缺点：（1）如果用户打开的窗口过多，必须逐个手动关闭，会产生厌倦和疲劳感。（2）因为大多数网站都挂在虚拟空间上，而虚拟空间默认限制了IIS连接数，一个网页打开就默认占用一个IIS连接数，除非关闭才会释放。如果网站全部采用新窗口打开，那么用户很可能会打开十几个，甚至是二十几个，如果不及时关闭，会造成IIS连接数达到峰值，那么之后的浏览者将无法进入网站，造成网站暂时瘫痪。分享案例案例2：页面新窗口打开与原窗口打开的优缺点【案例分析】2．原窗口打开优点：（1）只采用一个窗口打开，将极大地减少网站服务器的开销，不会出现网站打不开的情况，除非在线人数过多，但如果流量非常大，用虚拟空间可能就不合适了，这个时候要用VPS或者是直接租用服务器。（2）采用一个默认窗口，用户会感觉很清爽，而且占用用户计算机的资源也少，也不会单击“关闭”按钮到手抽筋。缺点：（1）用户默认只能浏览一个网页，除非用户右击，在弹出的快捷菜单中选择“在新窗口中打开”命令，但相信只有经常上网的人才知道这样的操作（类似的还有按住Shift键单击，也是在新窗口中打开，用户可能看完一个页面，还想看另外一个页面，就需要后退，不方便。（2）用户浏览完一篇文章后随手关闭网页会将整个网站关闭，造成跳出率上升。比较之后发现，用新窗口打开要好一点，这正是大多数人都喜欢在新窗口打开网页的原因，也就是我们所说的用户体验。关于用户体验，我们会在之后的课程中进一步进行介绍。实战案例实战1：掌握HTML基本标签实战案例实战2：网站代码优化本章总结◎HTML的基本含义：HTML是HyperTextMark-upLanguage的缩写，是超文本标记语言或超文本标签语言。◎HTML中的基本标签：title、meta、h#、p、br/、strong、img、a。◎编写HTML代码的注意事项：所有标签小写，不要忘记标签的闭合，标签要正确嵌套，涉及属性的标签，其属性名要加引号。◎HTML标签的优化方法：h1标签和h2标签在使用时建议包含关键词；strong标签可以添加在栏目标题处；alt属性要和图片内容相符，控制在100字符内；尽量减少iframe标签的使用。◎js及CSS代码优化原则：尽量减少js的数量和体积，采取调用的形式来实现js功能，重要链接不要加在js里。本章作业1．简述HTML中8个基本标签的含义。2．简述HTML基本标签的优化方法及注意事项。3．简述strong标签与b标签的区别。4．简述图片alt属性的含义。5．简述js与CSS代码的优化原则。Thankyou