元素是所有头部元素的容器。 元素包含了所有的头部标签元素。在 元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。

以下标签都可以添加到 head 部分:

1.title:定义文档的标题,是必须有的元素

  1. <title>在这里写上文档标题</title>

2base:为页面上的所有链接规定默认地址或默认目标

  1. /*必须的属性*/
  2. href 规定页面中所有相对链接的基准 URL
  3. <base href="http://yeching.info" />
  4. /*可选属性*/
  5. target 在何处打开页面中所有的链接,该属性会被每个链接中的 target 属性覆盖
  6. /*可能的值:*/
  7. _blank _parent _self_top
  8. <base target="_blank" />

3.link:定义文档与外部资源之间的关系。一般用于链接外部样式表,

  1. <link rel="stylesheet" type="text/css" href="style.css" />
  2. /*常用的属性*/
  3. rel:必需。定义当前文档与被链接文档之间的关系。
  4. type:规定被链接文档的 MIME 类型
  5. href:规定被链接文档的位置
  6. media:规定被链接文档将被显示在什么设备上,主要用在媒体查询功能中
  7. <link rel="stylesheet" media="only screen and (min-width: 480px)" href="styles.css" />
  8. /*其他:*/
  9. <link rel="shortcut icon" href="img/favicon.ico"/>
  10. <link rel="apple-touch-icon" href="img/touchicon.png"/>

4.meta:元数据(Metadata)是数据的数据信息。META标签用来描述一个HTML网页文档的属性,例如作者、日期和时间、网页描述、关键词、页面刷新等。元数据不会显示在客户端,会被浏览器解析。元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务调用。搜索引擎优化排名等网络营销方法内容中,通常都要谈论META标签的作用

  1. /*常见用法*/
  2. 1.说明主页制作所使用的文字以及语言
  3. <meta http-equiv="content-type" content="text/html;charset=utf-8">
  4. <meta charset="utf-8" />HTML5中的用法
  5. 2.定义文档关键词
  6. <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
  7. 3.定义web页面描述
  8. <meta name="description" content=" Web about HTML and CSS">
  9. 4.定义页面作者
  10. <meta name="author" content="yeching">
  11. 5.30秒刷新页面
  12. <meta http-equiv="refresh" content="30">
  13. 6.设定网页的到期时间,一旦过期则必须到服务器上重新调用
  14. <meta http-equiv="expires" content="31 Dec 2016">
  15. 7.设定可视区
  16. <meta name="viewport" content="width=device-width" initial-scale=1.0 />
  17. /*常用属性*/
  18. contentcontent 属性提供了名称/值对中的值。该值可以是任何有效的字符串。content 属性始终要和 name 属性或 http-equiv 属性一起使用。
  19. http-equiv:为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
  20. namename 属性提供了名称/值对中的名称。通常情况下,您可以自由使用对自己和源文档的读者来说富有意义的名称。
  21. charsetHTML5):定义文档的字符编码。

**5.script **:定义了客户端的脚本文件

  1. 1.插入代码
  2. <script type="text/javascript">
  3. /*在这里写你的代码*/
  4. </script>
  5. <script>
  6. /*默认就是JavaScript,不写type="text/javascript"也可以*/
  7. /*在这里写你的代码*/
  8. </script>
  9. 2.规定外部脚本的 URL
  10. <script src="myscripts.js"></script>
  11. /*可用的属性*/
  12. asyncHTML5):规定异步执行脚本(仅适用于外部脚本)。
  13. charset:规定在脚本中使用的字符编码(仅适用于外部脚本)。常见的utf-8
  14. defer:规定当页面已完成解析后,执行脚本(仅适用于外部脚本)。
  15. src:规定外部脚本的 URL
  16. type:规定脚本的 MIME 类型。默认JavaScript

6.style:义 HTML 文档的样式信息

  1. <style type="text/css">
  2. /*在这里写样式*/
  3. h1 {color:red;}
  4. p {color:blue;}
  5. </style>

总结

  1. <head>
  2. <meta charset="utf-8"/>
  3. <title>head 使用</title>
  4. <base href=" " />
  5. <base target=" " />
  6. <meta name="keywords" content=""/>
  7. <meta name="description" content=""/>
  8. <meta name="viewport" content="width=device-width"/>
  9. <meta name="author" content=" ">
  10. <meta name="viewport" content="width=device-width" initial-scale=1.0 />
  11. <link rel="stylesheet" href="css/style.css"/>
  12. <link rel="shortcut icon" href="img/favicon.ico"/>
  13. <link rel="apple-touch-icon" href="img/touchicon.png"/>
  14. <style type="text/css">/*在这里写样式*/</style>
  15. <script>/*在这里写你的代码*/</script>
  16. </head>

HTML头部<head>学习的更多相关文章

  1. http头部信息学习

    想的每2周进行知识的总结,自己拖延症有犯了,发现自己知识库量还是太少,平时总结和发现问题还不够深,对待问题的深度也存在很多问题,但是坚持学习,总结,后面应该会有收获, 1.常见的返回码 100: 请服 ...

  2. 每日目标——HTML 头部标签学习 2015-8-27

    <head> <title>bp</title> <meta http-equiv="Content-Type" content=&quo ...

  3. TCP 中的三次握手和四次挥手

    Table of Contents 前言 数据报头部 三次握手 SYN 攻击 四次挥手 半连接 TIME_WAIT 结语 参考链接 前言 TCP 中的三次握手和四次挥手应该是非常著名的两个问题了,一方 ...

  4. HTML&CSS基础学习笔记1.17-表格的头部与尾部

    表格的头部和尾部 既然有标签表示表格的主体,那么自然表格的头部和尾部也有对应的标签. HTML中使用<thead>标签表示表格的头部,使用<tfoot>标签表示表格的尾部. 有 ...

  5. React Native学习(四)—— 写一个公用组件(头部)

    本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...

  6. 学习HTML 第二节.HTML头部

    HTML为什么要有个头部?还不太明白,可能是一些要提前声明的东西吧.先看看有什么内容吧. 可以添加在头部区域的元素标签为: <title>标题,这个我们知道了: <meta>使 ...

  7. HTTP的学习记录(二)头部

    本文主要讲一些 HTTP头部的信息 首先看一段 惊为天人 的文章. 来自于 <淘宝技术这十年> 你发现快要过年了,于是想给你的女朋友买一件毛衣,你打开了www.taobao.com.这时你 ...

  8. HTML学习(9)头部

    HTML <head> 元素 <head> 元素包含了所有的头部标签元素.在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种met ...

  9. 学习:erlang的不定长数据包头部。

随机推荐

  1. HTML实体

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 如何使用KMS激活win10和office

    首先你需要下载一个kms软件,地址: https://yunpan.cn/cRxVNy2LRXjBt (提取码:d5d8) 然后搭建kms服务器,很简单.启动软件,选择“附加”Tab, 点连接到服务器 ...

  3. Mysql修改设置root密码的命令及方法

    方法一:使用SQL语句命令UPDATE 需用到Mysql自带的加密函数PASSWORD(string),该函数对一个明文密码进行加密,但不能解密.专门用于mysql.user(用户权限表)中设置密码, ...

  4. ADO.NET学习小结【1】正在更新...

    小弟正在学习ADO.net有误的地方还请大大们批评指出,小弟在此谢过了 一.ADO.net简述: 以前我们写程序尤其是写和数据库有关的应用程序时,你我都得要了解Microsoft ADO COM对象才 ...

  5. vs2010 未能正确加载方案中的一个或多个项目

    Visual studio在打开解决方案时,往往会碰到一个这样的错误,提示说:未能正确加载方案中的一个或多个项目: 我们可以通过以下步骤来解决该问题:首先,在相应的sln类型文件上点击右键,选择用记事 ...

  6. Axure草记

    页面控件和DataSet绑定,DataSet和输入控件绑定(通过临时变量) 双击Repeater进入之后,你会发现下面已经默认添加了3行,这代表着,每增加一行将会重复3遍: Repeater可以只是部 ...

  7. javascript第二遍基础学习笔记(一)

    1.兼容xhtml方法: <script> //<![CDATA[ ... ... //]]> </script> 2.文档模式: IE5.5引入,最初包含2种:混 ...

  8. 反编译Android APK及防止APK程序被反编译

    怎么逆向工程对Android Apk 进行反编译 google Android开发是开源的,开发过程中有些时候会遇到一些功能,自己不知道该怎么做,然而别的软件里面已经有了,这个时候可以采用反编译的方式 ...

  9. 根据WSDL生成代理类方式(2)

    运行开发人员工具提示 输入命令行svcutil http://localhost:8080/Test/TestClassPort?wsdl

  10. 国内外免费PHP开源建站程序一览(最全)

    论坛社区:Discuz.PHPWind.ThinkSAAS.phpBB CMS内容管理:DedeCMS.PHPCMS.帝国CMS.齐博CMS.Drupal 企业建站:CmsEasy.KingCMS.P ...