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

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标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 8,635评论 1 41
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,684评论 32 459
  • (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!)(注2:更多内容请查看我的目录。) ...
    love丁酥酥阅读 3,723评论 1 4
  • HTML5< !--...--> 标签 comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。...
    野小宝阅读 5,101评论 0 10
  • 舅舅找上门来的时候,身边还带了一个十一岁的孙女。 孙女长得亭亭玉立,显然是一个将来的美人坯子,一张白皙的瓜子脸上张...
    梦想2050阅读 2,361评论 1 7