HTML结构

在sublime或HBuildr新建HTML文件,输入html:5,按下tab键后,自动生成的代码大致如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> </body>
</html>

文档声明头

标准的HTML页面,第一行以

<!DOCTYPE...

开头,而这一行就被称为文档声明头。

DocType Declaration,简称DTD。

此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

HTML4.01一共有6种DTD,也就是说HTML第一行语句一共有6种:

上图中的三种小规范进行解释:

  • strict:表示“严格的”,这种模式里面的要求更为严格。
  • Transitional:表示“普通的”,这种模式就是没有一些别的规范。
  • Frameset:表示“框架”,在框架的页面使用。

strict这种严格体现在哪里?有一些标签不能使用。

比如,u标签,就是给一个本文加下划线,但是这和HTML的本质有冲突,

因为HTML只能负责语义,不能负责样式,而u这个下划线是样式。

所以,在strict中是不能使用u标签的。那怎么给文本增加下划线呢?

可以使用css属性来解决。

XHTML1.0更为严格,因为这个体系本身规定比如标签必须是小写字母、必须严格闭合标签、必须使用引号引起属性等等。

头标签(head)

head标签是所有头部元素的容器。

<head>内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息等。
可添加到head部分的标签:<title>、<base>、<meta>、<link>、<script>、<style>:
<title>:指定整个网页的标题,在浏览器最上方显示。
<base>:为页面上的所有链接规定默认地址或默认目标(target)。
<meta>:提供有关页面的基本信息。
<link>:定义文档与外部资源的关系。
<script>:定义客户端脚本,如JavaScript。
<style>:定义内部样式表与网页的关系。

meta标签

可提供有关页面的原信息(mata-information),

针对搜索引擎和更新频度的描述和关键词。

元数据(metadata)是关于数据的信息。

<meta> 标签提供关于 HTML 文档的元数据。
元数据不会显示在页面上,但是对于机器是可读的。
典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于 head 元素中。
元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。
  • http-equiv属性

    • 用来向浏览器传达一些有用的信息,帮助浏览器正确地显示网页内容。
    • 与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
<!--重定向 2秒后跳转到对应的网址,注意分号-->
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
  • name属性

    • 用于页面的关键字和描述,是写给搜索引擎看的,
    • 关键字可以有多个,用 ‘,’号隔开。
    • 与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
<meta name="Description" content="网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,
开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。" />
<!-- 只要设置Description页面描述,那么百度搜索结果,就能够显示这些语句,
这个技术叫做SEO(search engine optimization,搜索引擎优化) -->
<meta name=viewport content="width=device-width, initial-scale=1">
<!-- 让网页支持移动端,移动设备优先 -->

title 标签

<title> 标签定义文档的标题。

title 元素在所有 HTML/XHTML 文档中都是必需的。

title 元素能够:

  • 定义浏览器工具栏中的标题
  • 提供页面被添加到收藏夹时显示的标题
  • 显示在搜索引擎结果中的页面标题
    • 告诉用户和搜索引擎这个网页的主要内容是什么,
    • 搜索引擎可以通过网页标题,迅速的判断出当前网页的主题。

base 标签

<base> 标签为页面上的所有链接设置默认的地址或默认的目标(target):
例:
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head> 实例2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<base href="http://www.w3cschool.cn/statics/images/w3c/" target="_blank">
</head> <body>
<img src="logo.png"> - 注意这里我们设置了图片的相对地址。
能正常显示是因为我们在 head 部分设置了 base 标签,
该标签指定了页面上所有链接的默认 URL,
所以该图片的访问地址为 "http://www.w3cschool.cn/statics/images/w3c/logo.png"
<br><br>
<a href="http://www.w3cschool.cn">W3Cschool教程</a> -
注意这个链接会在新窗口打开,即便它没有 target="_blank" 属性。
因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
</body>
</html>

link 标签

<link> 标签定义文档与外部资源之间的关系。
<link> 标签最常用于连接样式表: <head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

style 标签

<style> 标签用于为 HTML 文档定义样式信息。
您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式: <head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

注:link和style详细会在讲到样式和css时再详解和列实例。

script标签

script 标签用于定义客户端脚本,比如JavaScript。

HTML头部元素   标签描述
<head> 定义关于文档的信息。
<title> 定义文档标题。
<base> 定义页面上所有链接的默认地址或默认目标。
<link> 定义文档与外部资源之间的关系。
<meta> 定义关于 HTML 文档的元数据。
<script> 定义客户端脚本。
<style> 定义文档的样式信息。

参考:

1、w3cschool

2、小马哥

HTML-head头部浅析的更多相关文章

  1. "Linux内核分析"第七周

    可执行程序的装载 张文俊+原创作品转载请注明出处+<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.预 ...

  2. netty5 HTTP协议栈浅析与实践

      一.说在前面的话 前段时间,工作上需要做一个针对视频质量的统计分析系统,各端(PC端.移动端和 WEB端)将视频质量数据放在一个 HTTP 请求中上报到服务器,服务器对数据进行解析.分拣后从不同的 ...

  3. [转]STUN和TURN技术浅析

    [转]STUN和TURN技术浅析 http://www.h3c.com.cn/MiniSite/Technology_Circle/Net_Reptile/The_Five/Home/Catalog/ ...

  4. 浅析Netty的异步事件驱动(一)

    本篇文章着重于浅析一下Netty的事件处理流程,Netty版本为netty-3.6.6.Final. Netty定义了非常丰富的事件类型,代表了网络交互的各个阶段.并且当各个阶段发生时,触发相应的事件 ...

  5. 转载]浅析DEDECMS织梦留言板调用网站head.htm以及自定义的方法

    原文地址:浅析DEDECMS织梦留言板调用网站head.htm以及自定义的方法作者:it_wang 今天,一个客户朋友问到织梦留言板如何调用head.htm以及自定义,企业网站源码之前有摸索过,但是没 ...

  6. 浅析PHP正则表达式的利用技巧

    浅析PHP正则表达式的利用技巧 正则表达式是什么 正则表达式(regular expression)描述了一种字符串匹配的模式(pattern),可以用来检查一个串是否含有某种子串. 将匹配的子串替换 ...

  7. 计算机网络通信TCP/IP协议浅析 网络发展简介(二)

    本文对计算机网络通信的原理进行简单的介绍 首先从网络协议分层的概念进行介绍,然后对TCP.IP协议族进行了概念讲解,然后对操作系统关于通信抽象模型进行了简单介绍,最后简单描述了socket   分层的 ...

  8. 浅析 Hinton 最近提出的 Capsule 计划

    [原文]    浅析 Hinton 最近提出的 Capsule 计划     关于最新的 Hinton 的论文 Dynamic Routing Between Capsules,参见 https:// ...

  9. dtb和dtc文件浅析

    目录 dtb和dtc文件浅析 工具集 dts格式 dtb头部结构 dtb标识符 分析具体的文件 title: dtb和dtc文件浅析 date: 2019/4/25 20:09:38 toc: tru ...

随机推荐

  1. Mac配置多个版本JDK

    2016年mac上已经安装有jdk1.6的版本  目录在/Library/Java/JavaVirtualMachines/1.6.0.jdk 有时候mac版本跟新会自动删除jdk1.6 所以要去ma ...

  2. IOS第三方之SVProgressHUD

    这个第三方和MBProgressHUD差不多,也挺简单的. // // ViewController.m // ProgressHUD // // Created by City--Online on ...

  3. vue-cli中引入jquery

    vue-cli 在引入bootstrap时总是报找不到jquery.(模板用的webpack) 在webpack.base.conf.js里加入 var webpack = require(" ...

  4. 合天misc100

    打开txt文件是一串RGB颜色值 用len(file.readlines()),发现颜色值有61366个,能分解成122*503 from PIL import Image length = 122 ...

  5. [转]微信小程序 c#后台支付结果回调

    本文转自:http://www.cnblogs.com/weizhiing/p/7700723.html 又为大家带来简单的c#后台支付结果回调方法,首先还是要去微信官网下载模板(WxPayAPI), ...

  6. BG.Hive - part2

    1. 将mysql的订单数据导入hive的分区表(桶.倾斜)[partition,bucket,skew] a> 在Hive中新建分区表 CREATE TABLE IF NOT EXISTS H ...

  7. 关于EF Unit of Work Repository的简单用法

    其实ef本身就是unit of work+repository的 其中继承自DbContext的类就是unit of work context中的DbSet<T>属性就是repositor ...

  8. C#动态创建Gridview及批量插入到数据库

    这里介绍两种动态创建Gridview的方法: (一).有时需要应付上头领导的检查,所以就弄一些静态的Gridview来显示数据,这种方法的优点就是不用连接数据库,比较方便,但是代码灵活性不高,所有数据 ...

  9. 三:Jquery-event

    一:jq中事件 1.页面载入事件 ready()方法 格式: $(document).ready(function(){}); $(function(){}); 2.绑定事件 click(),dblc ...

  10. linux下安装jdk8

    https://www.cnblogs.com/shihaiming/p/5809553.html