美文网首页
html学习之路(一)- 头部标签

html学习之路(一)- 头部标签

作者: 绝弹 | 来源:发表于2018-11-06 19:50 被阅读0次

title标签

说明:定义一个文档级别的标题,这个标题会在浏览器输入栏上方显示。
属性:暂无
用法:<title>菜鸟教程 - 学的不仅是技术,更是梦想!</title>

meta标签

说明:定义文档的元信息,不同的属性,标记着不同的元内容。
属性:
1.charset属性定义文档的编码方式,未声明可能会出现乱码。
  取值:UTF-8,GBK
2.name属性定义关于SEO的元信息,配合content属性使用。
  取值:冒号前为name属性的值,冒号后为content属性的值
  1.description:文本值,
  2.keywords:文本值,以逗号隔开
  3.author:文本值(名字和邮箱,以逗号隔开)
  4.robots:待补充
  5.viewport:代补充
3.http-equiv属性定义等同于http头部的元信息,配合content属性使用。
  取值:冒号前为name属性的值,冒号后为content属性的值
  1.content-type:UTF-8,GBK
  2.X-UA-Campability:ie-edge,chrome-1
  3.refresh:刷新间隔(秒)[,跳转地址(绝对地址或相对地址)]
4.content属性不能单独使用,需和前面两个属性配合使用。
用法一:
<!-- 这是html5的写法,也有html4.0.1的写法,推荐这种写法 -->
<meta charset="UTF-8">
用法二:
<!-- 文档描述,会被搜索引擎显示在搜索页面中。 -->
<meta name="description" content="绝弹一个博客">
<!-- 文档关键字,关键字之间以逗号隔开,搜索引擎根据该关键字分类收录。 -->
<meta name="keywords" content="html,css,javascript,个人博客">
<!-- 文档作者,由名字与邮箱组成,中间以逗号隔开。-->
<meta name="author" content="juetan,952222@163.com">
<!-- 搜索机器人的搜索权限,具体权限看这里: -->
<meta name="robots" content="index,flow">
<!--  视图端口,主要针对移动端 -->
<meta name="viewport" content="width=device-width,inite-scale=1.0">
用法三:
<!-- 文档编码,这是html4.0.1的写法,推荐上述html5的写法 -->
<meta http-equiv="content-type" content="text/html,charset=UTF-8">
<!-- 浏览器兼容,告诉浏览器选择什么样的版本渲染文档 -->
<meta http-equiv="X-UA-campability" content="IE=edge,chrome=1">
<!-- 文档刷新,由间隔时间(秒)和跳转地址组成,中间以逗号隔开 -->
<meta http-equiv="refresh" content="5,https://www.juetan.cn">

link标签

说明:定义文档所链接的外部资源,按属性值的不同,链接不同的资源。
属性:
1.rel属性定义文档与外部资源的关系。
  值:icon,stylesheet,author,alternate,archives,bookmark,external,first
  last,help,license,next,nofollow,norefere,pingback,prefetch,prev,search
  sidebar,tag,up
2.media属性定义资源在什么设备上加载。
  取值:以下组合
  1.运算符:and not ,
  2.设备:all,screen,handheld,aural,braile,projection,print,tty,tv
  3.取值:width,height,device-width,device-height,orientation,aspect-ratio
  device-aspect-ratio,color,color-index,monochrome,resolution,scan,grid
3.src属性定义资源的地址,文本值。
<!-- 引入一个文档图标,该图标与文档标题一同显示在浏览器输入栏上方 -->
<link rel="shortcut icon" src="favicon.ico">
<!-- 引入一个外部样式表,可根据media属性在特定设备上引入该样式表 -->
<link rel="stylesheet" media="screen and width>768px" src="/style.css">

style标签

说明:定义一个内联样式表,作用在该文档之内。
属性:暂无
用法:
<style>
  h1 {
    color:red
  }
</style>

script标签

说明:定义脚本,作用在该文档之内。
属性:
1.type属性定义脚本的类型,非以下值会被当做数据块。
  值:text/[javascript,ecmascript],application[javascript,ecmascript],module
2.src属性定义脚本的来源地址,文本值。
3.defer属性定义脚本在文档解析后,DOMContentload前触发,布尔值。
4.async属性定义是否异步执行脚本,布尔值。
用法:
<!-- 引入外部脚本 异步加载 -->
<script scr="index.js" async></script>
<!-- 定义内部脚本 延迟解析 -->
<script defer>
  alert("hello,world!");
</script>

附录:

<!DOCTYPE html> <!-- 头部标签(4个),以下标签分类,仅方便个人记忆,并非官方给出,暂时先列出标签,以后再慢慢补上 -->
<html lang="zh-cmn-Hans"> <!-- 中文汉字 -->
    <head>
        <!-- 字符编码(html5写法) -->
        <meta charset="UTF-8">
        <!-- 字符编码(html4.0.1写法) -->
        <meta http-equiv="content-type" content="text/html;charset=UTF-8">

        <!-- 页面标题 -->
        <title>Title of  this page</title>

        <!-- 兼容模式 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <!-- 移动设备 -->
        <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">

        <!-- 页面描述 -->
        <meta name="description" content="绝弹小站 - 正在学习前端的个人博客"/>
        <!-- 页面关键词 -->
        <meta name="keywords" content="前端,Html学习,Css学习,Js学习,个人博客"/>
        <!-- 网页作者 -->
        <meta name="author" content="juetan, contact@juetan.cn"/>
        <!-- 搜索引擎 -->
        <meta name="robots" content="index,follow"/>
    
        
        <!-- 页面刷新 -->
        <meta http-equiv="refresh" content="5;https://www.juetan.cn">
        <!-- 网页图标 -->
        <link rel="shortcut icon"  href="/favicon.ico">

        <!-- 外部样式表 -->
        <link rel="stylesheet" media=""  href="/css/index.css">
        <!-- 外部脚本 -->
        <script src="/js/index.js"></script>
        <!-- 内部样式表 -->
        <style>div {background-color:red}</style>
        <!-- 内部脚本 -->
        <script>document.ready(function(){alert("hello,world");});</script>
    </head>
    <body>
    </body>
</html>

相关文章

  • html学习之路(一)- 头部标签

    title标签 meta标签 link标签 style标签 script标签 附录:

  • Html标签

    HTML标签:作用所有HTML中标签的一个根节点。最大的标签 根标签 head标签:文档的头部 文档的头部描述了文...

  • HTML-CSS基础学习笔记

    HTML 1. HTML文件结构 称为根标签,所有的网页标签都在 中。 标签用于定义文档的头部,它是所有头部元素...

  • HTML5常用标签

    一.HTML文档标签 : 定义文档类型. : 定义HTML文档. : 定义文档的头部.(头部内...

  • HTML基本标签

    HTML基本标签 head(头部)标签 头部 字符集标签 标题标签 标题 关键词标签 描述标签 body(主体)标...

  • HTML基础

    ⒈ 是根标签,所有的网页都要在html标签里面 ⒉ 用于定义文档的头部,它是所有头部元素的容器。头部元素: 标签 ...

  • HTML文档结构