• 技术文章 >web前端 >前端问答

    html5头部内容通常包括哪些

    青灯夜游青灯夜游2021-12-17 17:17:39原创166

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

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

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

    html5头部内容

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

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

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

    示例:

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

    1.png

    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">

    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头部内容通常包括哪些的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:html5 头部
    上一篇:html5中map标签的用法是什么 下一篇:html5视频标签是什么

    相关文章推荐

    • html5中哪个属性用于规定输入字段必填• html5中标题标签是什么• html5里边caption是什么意思• html5用什么标记播放音乐• html5中常用的分组元素是什么

    全部评论我要评论

  • 晨成

    高效办公:http://web3776.net/ 分秒帧:http://web918.net/ PPT超级***:http://weimei55.com/ 壁纸插画:http://weiy1193.com/ 极简壁纸:http://wendy105a.com/ 创作工具:http://wexiaoyao.com/ 创客贴:http://weyton.com/ 音乐下载:http://wgoogo.

    2021-12-19

  • 取消发布评论发送
  • 1/1

    PHP中文网