站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

html5头部内容通常包括哪些

时间:2021-12-20 [网络编程]作者:fabuyuan 浏览:10 次

html5头部内容通常包括:1、title标签定义的网页标题;2、Favicon(网站小图标);3、编码方式;4、网站描述;5、页面关键字;6、页面作者;7、Viewport(移动端适配);8、CSS样式表;9、JavaScript脚本。

html5头部内容通常包括哪些  2

本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

根据我们的需求,可以在 HTML 头部定义大量的元数据,也可以定义很少或者根本就不定义。虽然头部标签是 HTML 文档的一部分,但其中的内容并不会显示在浏览器中。

html5头部内容

1、网页标题--<title> 标签

<title> 标签用来定义 HTML 文档的标题,只有包含 <title> 标签的文档才算是一个有效的 HTML 文档。另外,一个 HTML 文档中仅允许存在一个 <title> 标签,并且 <title> 标签必须放置在 <head> 标签中。

注意,在 <title> 标签内部仅允许包含纯文本内容,不能包含其他 HTML 标签。

示例:

<head>
    <title>PHP中文网</title>
</head>

html5头部内容通常包括哪些  2

2、Favicon

网页标题左边的小图标,指定他的路径,如果没有指定,浏览器会在根目录下寻找

<link rel="icon" href="/favicon.ico" type="image/x-icon" />

3、编码方式

编码方式的规范是放在head的最前面,如果不指定,浏览器也会根据服务器的header进行判定,但是不一定准确。

<head>
    <meta charset="UTF-8">
</head>

<meta> 标签用于提供有关 HTML 文档的元数据,例如页面有效期、页面作者、关键字列表、页面描述等信息。<meta> 标签定义的数据并不会显示在页面上,但却会被浏览器解析。

charset 属性用来指定 HTML 文档的字符编码,上面的示例中,我们将文档的字符编码设置为了“UTF-8”。

4、网站描述

<meta name="description" content="这里是对网站的描述">

定义页面的描述信息有利于搜索引擎的搜索。

5、页面关键字

<meta name="keywords" content="HTML, HTML教程, HTML入门">

关键字用于为搜索引擎提供与页面有关的信息。

6、页面作者

<meta name="author" content="作者名">

通过某些内容管理系统可以自动提取作者信息。

7、Viewport(移动端适配)

这个就很常见了,viewport一般是做移动端适配,将页面放在一个虚拟的窗口中-viewport中,如果网页没有用viewport就会出现我们在手机浏览器打开时很小,而且还可以移动缩放,low爆了,viewport就是让网页开发者通过其大小,动态的设置其网页内容中控件元素的大小,从而使得在浏览器上实现和web网页中相同的效果(比例缩小)。,用来更好支持响应式网站。

 <meta name="viewport" content="width=device-width, initial-scale=1">
  • width:控制viewport的大小,一般情况下指定为device-width(单位为缩放为100%的CSS像素),也可以指定一个固定的值例如600.

  • height:和width相应,指定高度。

  • initial-scal:初始缩放比例,页面第一次load的时候的缩放比例。

  • maximum-scale:允许用户缩放到的最大比例。

  • minimum-scale:允许用户缩放到的最小比例。

  • user-scalable:用户是否可以手动缩放。

8、内嵌CSS样式--<style>标签

使用 <style> 标签可以在 HTML 文档中嵌入 CSS 样式,需要注意的是在 <style> 标签中定义的样式仅对当前 HTML 文档有效。示例代码如下:

<head>
    <title>此处书写标题</title>
    <style>
        body { background-color: YellowGreen; }
        h1 { color: red; }
        p { color: green; }
    </style>
</head>

注意:对于文档中的唯一样式可以使用 <style> 标签,但对于在多个文档中通用的样式,使用外部样式表更为合适。

9、外部css样式表--<link> 标签

<link> 标签经常用于引用外部 CSS 样式表,<link> 标签中包含两个主要的属性,分别是 rel 和 href。rel 属性用来指示引用文件的类型,href 属性用来设置外部文件的路径。示例代码如下:

<head>
    <title>此处书写标题</title>
    <link rel="stylesheet" href="common.css">
</head>

HTML <head> 标签中可以包含任意数量的 <link> 标签。

10、JavaScript 脚本

通过script标签嵌入JavaScript 脚本代码或链入脚本文件

<head>
    <script>
        document.write("PHP中文网")
    </script>
</head>
<head>
    <script src="js/test.js"></script>
</head>

相关推荐:《html视频教程

以上就是html5头部内容通常包括哪些的详细内容,更多请关注站长家园其它相关文章!

本文标签:  html5头部

转载请注明来源:html5头部内容通常包括哪些

本文永久链接地址:https://www.adminjie.com/post/6666.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • docker能用yum命令吗

      docker能用yum命令吗

      docker能用yum命令,docker容器内安装yum的方法:1、通过“apt-getupdate”更新apt-get指令;2、通过“apt-getins...

    • 如何解决docker telnet不通的问题

      如何解决docker telnet不通的问题

      dockertelnet不通的解决办法:1、查看配置文件;2、修改nginx配置文件的端口为80;3、重新加载即可。本文操作环境:centOS6.8系统、Do...

    • css怎样改变一个图片高度和宽度

      css怎样改变一个图片高度和宽度

      在css中,可以使用width和height属性来改变一个图片高度和宽度,只需要给图片元素添加“width:宽度值;height:高度值;”样式即可。width...

    • docker不能删除镜像怎么办

      docker不能删除镜像怎么办

      docker不能删除镜像的解决办法:1、删除REPOSITORY;2、删除IMAGEID;3、通过“dockerimages”查看镜像即可。本文操作环境:c...

    • css怎么实现图片放大缩小动画

      css怎么实现图片放大缩小动画

      方法:1、使用“@keyframes动画名称{}”规则和“transform:scale(缩放比例);”语句创建放大缩小动画;2、使用“图片元素{animat...

    热门文章