【HTML+CSS+JavaScript】网页实战开发笔记之一——HTML的头部信息里你不知道的事

简介: HTML中我们一般把head部分称为网页的头部。头部部分的内容虽然不会在页面中显示,但它能影响到搜索引擎对网页的收录和排序,以及网页的各种全局设置,可以说是至关重要。 ▲知识点一——头部信息里设置网页的基底网址 基底网址的实质是统一设置超级链接的属性,基底网址标签是,它有两个属性,href和_target。

HTML中我们一般把head部分称为网页的头部。头部部分的内容虽然不会在页面中显示,但它能影响到搜索引擎对网页的收录和排序,以及网页的各种全局设置,可以说是至关重要。




▲知识点一——头部信息里设置网页的基底网址


基底网址的实质是统一设置超级链接的属性,基底网址标签是</base>,它有两个属性,href和_target。href用于设置基底网址的路径,_target用于设置超级链接的打开方式。

通过基底网址的添加,页面中所有的相对网站根目录地址可转换成绝对地址。当浏览器浏览页面时,通过<base>标记将相对网站跟目录地址附加在基底网址路径的后面,从而转化成绝对地址。我们首先创建一个base.htm,编写HTML代码如下:

  1. <html>  
  2. <head>  
  3. <title>基底网址的设置</title>  
  4. <base href="http://www.google.com" target="_blank" />  
  5. </head>  
  6. <body>  
  7. </body>  
  8. </html>  
<html> <head> <title>基底网址的设置</title> <base href="http://www.google.com" target="_blank" /> </head> <body> </body> </html>

通过以上代码对基底网址的设置。Base.htm页面中的任何超级链接的地址,都将在其前面加上"http://www.google.com",即转换为绝对地址。并且,页面中的超级链接打开方式都是打开新窗口。





▲知识点二——头部信息的元信息标签


元信息标签是头部信息的基本标签,专业网页代码中都对元信息有详细设置。元信息标签为</meta>,为单标签。Meta元素提供的信息对于浏览用户是不可见的,一般用于定义页面信息的名称,关键字,作者等。在HTML页面中,一个meta标签内就是一个meta内容,而在一个HTML头页面中可以有多个meta元素。

meta标签属性分两种:页面描述属性(name)和http标题信息(http-equiv)。


name属性

name属性主要用于描述网页的内容,用于对搜索引擎的优化,必须重点掌握。正确地设置name属性,以便搜索引擎(比如google,baidu)的搜索机器人查找,分类,搜索引擎一般都会自动查找meta值来给网页分类。name的取值如下:


<1>keywords。即关键字,用于说明网页所包含的关键字等信息,从而提高被搜索引擎搜索到的概率。编写格式为<meta name="keywords" content =“关键字”/>,content属性的值为用户所设置的具体关键字。(一般可设置多个关键字,他们之间用英文半角的逗号分开,搜索引擎都限制关键字的数量,所以关键字内容要简洁精练)


<2>description。中文意思为"描述",用于描述网页的主要内容、主题等,合理设置也可以提高被搜索引擎搜索到的概率。格式为<meta name="description" content =“对页面的描述”/>,content属性值为用户所设置的页面具体描述的内容,最多容纳1024个字符,但搜索引擎一边只显示约前175个字符。


<3>author。作者,用于设置网站作者的名称,比较专业的网站经常用到。格式为<meta name="author" content =“作者名称”/>


<4>generator。生成器,用于设置网站编辑工具的名称,比较专业的网站页面上经常用到。格式<meta name="generator" content =“网站编辑工具名称”/>


<5>robots。机器人,用于限制页面搜索方式。搜索引擎的搜索机器人,沿着网页上的链接(如http和src链接),不断地检索资料建立自己的数据库。通过这种meta标签可以限制部分内容不被搜索引擎检测到,降低部分信息公开性。编写格式为<meta name=“robots” content="指令组合">。该属性的值包含4个命令,分别是index、noindex、follow、nofollow,根据排列组合,有4种组合。Index和follow组合也可称为all,noindex和nofollow也可称为none。


http-equiv属性

http-equiv属性的取值具体如下:

<1>content-type,内容类别,用于设置页面的类别和语言字符集。编写格式<meta http-equiv=“content-type” context=“text/html”;charset=“gb2312”/>,content属性的值代表页面采用HTML代码输出,字符集为gb2312(简体中文),国际化网站开发的话,为了字符统一,建议charset采用utf-8.


<2>refresh。刷新,用于设置多长时间内网页自己刷新一次,或者用一段时间自动跳转到其他页面,第一种编写格式<meta http-equiv=“refresh” context=“30”/>表示隔30秒刷新一次,第二种编写格式<meta http-equiv=“refresh” context=“30;url=www.google.com”/>,表示30秒后页面自动跳转到www.google.com网站


<3>expires,中文意思为“到期”,用于设置页面到期时间。一旦网页过期,必须到服务器上重新调用网页。第一种编写格式为<meta http-equiv=“expires” context=“Wed,10 Mar 2011 12:00:00 GMT”/>,content值代表网页过期的时间,必须使用GMT时间格式。第二种编写格式为<meta http-equiv=“expires” context=“30”/>,表示多少秒后过期。


<4>cache-control,缓存控制。用于禁止在缓存中调用网页,编写格式为<meta http-equiv=“cache-control” context=“no-cache”/>,no-cache代表不允许缓存。


<5>set-cookie,设置cookie,用于设置本页面cookie多久过期,编写格式为<meta http-equiv=“set-cookie” context=“Wed,10 Mar 2011 12:00:00 GMT”/>,代表到这个时间,cookie将被删除。






知识点三——头部信息实现与CSS及JavaScript混编


CSS负责HTML网页的样式,JaveScript负责HTML网页的动态行为。CSS和JaveScript最常用的融合方式是写入头部信息部分。

<1>加入CSS只需在头部信息中加入<style type=“text/css”></style>标签对。范例代码如下:

  1. <html>  
  2. <head>  
  3. <title>CSS的设置</title>  
  4. <style type=“text/css”>  
  5. CSS具体内容  
  6. </style>  
  7. </head>  
  8. <body>  
  9. </body>  
  10. </html>  
<html> <head> <title>CSS的设置</title> <style type=“text/css”> CSS具体内容 </style> </head> <body> </body> </html>


<2>加入JavaScript只需要在头部信息中加入<script type=“text/javascript”></script>标签对。范例代码如下:

  1. <html>  
  2. <head>  
  3. <title>CSS的设置</title>  
  4. <style type=“text/css”>  
  5. CSS具体内容  
  6. </style>  
  7. <script type=“text/javascript”>  
  8. JavaScript具体内容  
  9. </script>  
  10. </head>  
  11. <body>  
  12. </body>  
  13. </html>  
<html> <head> <title>CSS的设置</title> <style type=“text/css”> CSS具体内容 </style> <script type=“text/javascript”> JavaScript具体内容 </script> </head> <body> </body> </html>


知识点四——常用头部信息功能推荐


<1>页面切换特效,其中一种特效的编写格式如下:

<meta http-equiv=“page-enter” content=“blendtrans(duration=0.5)”/>

http-equiv属性的值为page-enter时表进入该页面时启用特效,http-equiv属性的值为page-exit时代表退出(离开)该页面时启用特效。

Content属性的值代表特效的种类,这种特效也叫动态滤镜。滤镜种类很多,比如blendtrans就是很常见得一种,效果为淡入淡出,duration值表示效果持续的时间(单位为秒)。

另一种滤镜特效编写格式如下:

<meta http-equiv=“page-enter” content=“revealTrans(duration=6)”/>

动态滤镜revealTrans也可用于页面进入与退出效果。Duration表示滤镜特效持续时间(单位为秒),Transition是滤镜类型,表示想使用哪种特效,取值为0~23。


<2>强制页面在当前窗口以独立页面显示,可以防止网页被其他网站框架,编写格式如下:
<meta http-equiv="window-target" content=“_top">


<3>页面图标设置,编写格式如下:

<link rel="Shortcut Icon" href="/myicon.ico">

href属性的值是ico图标文件的路径,这里采用的是相对根目录路径。

目录
相关文章
|
15天前
|
移动开发 前端开发 数据可视化
前端HTML:构建网页的基石
前端HTML:构建网页的基石
17 0
|
2天前
|
JavaScript 前端开发
javascript获取url信息的常见方法
javascript获取url信息的常见方法
10 2
|
2天前
|
数据采集 JavaScript 数据可视化
Node.js爬虫在租房信息监测与分析中的应用
Node.js爬虫在租房信息监测与分析中的应用
|
7天前
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
|
7天前
|
编解码 缓存 前端开发
【专栏:HTML与CSS移动端开发篇】移动端网页布局与适配
【4月更文挑战第30天】本文探讨了如何使用HTML和CSS优化移动端网页布局与适配,强调响应式设计、灵活布局和媒体查询的重要性。针对移动设备的屏幕尺寸、操作方式、网络速度和性能差异,提出了断点选择、触摸优化、图像和性能优化等最佳实践。测试和调试、框架工具的应用也是关键步骤,以确保在多设备上提供优秀用户体验。开发者需持续学习新趋势和工具,以适应移动端发展。
|
7天前
|
移动开发 缓存 前端开发
【专栏:HTML与CSS实践篇】网页性能优化:CSS与HTML的最佳实践
【4月更文挑战第30天】本文探讨了优化CSS和HTML以提升网页性能的最佳实践。HTML优化包括:精简结构、压缩代码、异步加载脚本和利用缓存。CSS优化则涉及:精简代码、合并文件、使用CSS Sprite、善用CSS3属性、避免@import及响应式设计。这些方法能加快加载速度,改善用户体验。
|
7天前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 实践篇】网页图标与字体图标的使用
【4月更文挑战第30天】本文探讨了网页设计中两种主要图标形式——传统图标和字体图标。传统图标(PNG, JPEG, GIF)视觉效果丰富但文件大,易影响加载速度且维护不便。字体图标占用空间小,易于维护和定制,但视觉效果相对简单,选择有限。实际应用中,两者可结合使用,以导航栏、操作按钮和提示信息为例说明了图标的重要性。设计师需注意兼容性、清晰度和性能优化问题,根据项目需求选择合适图标类型,以提升网页质量和用户体验。
|
7天前
|
运维 前端开发 JavaScript
【专栏:HTML进阶篇】HTML与Web标准:构建可访问与可维护的网页
【4月更文挑战第30天】本文探讨了HTML与Web标准的关系,强调遵循标准对创建高质量、可访问、可维护网页的重要性。通过使用语义化标签、提供文本替代、合理使用表格和列表,可提升网页可访问性;通过结构化文档、添加注释、分离结构与表现,能增强网页可维护性。遵循Web标准,可确保网页在不同设备上的兼容性,并满足各类用户需求。
|
7天前
|
移动开发 JavaScript 前端开发
【专栏:HTML进阶篇】HTML模板与Web组件:可复用的网页元素
【4月更文挑战第30天】HTML模板和Web组件提升网页开发效率和可维护性。HTML模板,如&lt;template&gt;元素和服务器端模板引擎,用于创建可复用的HTML结构。Web组件是自定义的HTML元素,结合影子DOM和模板,实现封装的可重用组件。两者助力构建高效、现代的网页和网站。
|
7天前
|
移动开发 前端开发 开发者
【专栏:HTML进阶篇】网页结构与语义化标签进阶
【4月更文挑战第30天】提升网页结构清晰度和无障碍访问性,有利于SEO。这些标签为屏幕阅读器提供额外上下文,简化CSS样式设计,避免无意义的&lt;div&gt;和&lt;span&gt;。正确使用语义化标签是现代网页开发的关键,能创造更优质、易访问和优化的Web体验。