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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容

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