前面的话

  一个完整的HTML文档必须包含3个部分：文档声明、文档头部和文档主体。而正是它们构成了HTML的骨架结构。前面已经分别介绍过文档声明和文档头部，本文将详细介绍构成HTML骨架结构的基础元素

HTML

  <html>元素代表HTML文档的根(root)，其他所有元素都是该元素的后代。<html>与</html>标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。文档的头部由<head>标签定义，而主体由<body>标签定义

【xmlns】

  xmlns属性用于指派文档的XML命名空间。预设值是"http://www.w3.org/1999/xhtml"，这在XHTML中是必要的，而在HTML中则是可选的

<html xmlns="http://www.w3.org/1999/xhtml">

HEAD

  <head>标签用于定义文档的头部，它是所有头部元素的容器。;<head>大部分不可见，描述了文档的一些基本的属性和信息(可以呈现的是title和icon)。<head>元素下的子元素主要包括<meta>、<title>、<base>、<link>、<style>和<script>这六个元素

  <title>定义文档的标题，它是head部分中唯一必需的元素

  如果在文档中忽略了<head>标签，则大部分浏览器会自动创建一个<head>元素

  关于文档头部的更多信息移步至此

BODY

  <body>表示的是HTML文档的主体内容，任何一个HTML文档，只允许存在一个<body>元素

【默认样式】

chrome/firefox/safari/IE8+

    margin:8px;

IE7-

    margin:15px 10px;

结构

  在sublime编辑器中，输入!，再按住Tab键，就可以生成一个基本的HTML结构，结构如下

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

</body>

</html>

  在实际中，文档的头部结构常常需要承载一些常用的功能，所以HTML结构较复杂，结构如下

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>Document</title>

    <meta name="keywords" content=""/>

    <meta name="description" content=""/>

    <meta name="viewport" content="width=device-width"/>

    <link rel="stylesheet" href="5/style.css"/>

    <link rel="shortcut icon" href="ico.ico"/>

</head>

<body>

</body>

</html>

HTML骨架结构的更多相关文章

  1. iOS_20_微博的骨架结构

    最后效果图: BeyondViewController.m // // BeyondViewController.m // 20_帅哥no微博 // // Created by beyond on 1 ...

  2. 【转】Mecanim Animator使用详解

    http://blog.csdn.net/myarrow/article/details/45242403 1. 简介 Mecanim把游戏中的角色设计提高到了一个新的层次,使用Mecanim可以通过 ...

  3. 如何让一个json文件显示在表格里

    <body> //首先得把架子搭起来 <table id = "tb" border="1"> <tr></tr> ...

  4. HTML学习目录

    前面的话 HTML被认为是前端知识体系里面最简单的知识,几年前,很多人都推荐在W3C上学习个几天就能够基本掌握.但随着HTML5和移动端的强势发展,HTML的技能点也越来越难.世上无难事,好学好总结. ...

  5. sublime简要笔记

    选中单词 [1]选中当前单词 ctrl+d [2]跳过当前单词 ctrl+k ctrl+d [3]选中相同的所有单词 alt+f3 [4]多行游标 按住shift,然后按住鼠标右键向下拖动 行操作 [ ...

  6. Android源码学习之模板方法模式应用

    一.模板方法模式定义 模板方法模式定义: defines the skeleton of an algorithm in a method, deferring some steps to subcl ...

  7. Ruby on rail 开发准备

    下载安装Instant Rails ,该软件包中包含了Ruby,Rails,Apache(HTTP服务器软件),MySql,并且配置均可自动完成.完成安装后就可以拥有一个完整的Rails开发环境.下载 ...

  8. 使用Maven创建一个Spring MVC Web 项目

    使用Maven创建java web 项目(Spring MVC)用到如下工具: 1.Maven 3.2 2.IntelliJ IDEA 13 3.JDK 1.7 4.Spring 4.1.1 rele ...

  9. [原]Unity3D深入浅出 - 新版动画系统(Mecanim)

    Mecanim概述: Mecanim是Unity提供第一个丰富而复杂的动画系统,提供了: 针对人形角色的简易的工作流和动画创建能力 Retargeting(运动重定向)功能,即把动画从一个角色模型应用 ...

随机推荐

  1. 札记：Fragment基础

    Fragment概述 在Fragment出现之前,Activity是app中界面的基本组成单位,值得一提的是,作为四大组件之一,它是需要"注册"的.组件的特性使得一个Activit ...

  2. Java 8五大主要功能为开发者提供了哪些便利？

    两年前当Java 8发布后,立即受到了业界的欢迎,因为它大大提高了Java的性能.它独特的卖点是,顾及了编程语言的每一个方面,包括JVM(Java虚拟机)和编译器,并且改良了其它帮助系统. Java是 ...

  3. Android数据加密之Base64编码算法

    前言: 前面学习总结了平时开发中遇见的各种数据加密方式,最终都会对加密后的二进制数据进行Base64编码,起到一种二次加密的效果,其实呢Base64从严格意义上来说的话不是一种加密算法,而是一种编码算 ...

  4. 终端mysql Operation not permitted错误解决方案

    前言 前段时间装mysql,就遇到了ln: /usr/bin/mysql: Operation not permitted的错误,网上好多方法都过时了,下边是我的解决方法 原因 这是因为苹果在OS X ...

  5. javascript动画系列第四篇——拖拽改变元素大小

    × 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...

  6. 【转】java通用URL接口地址调用方式GET和POST方式

    java通用URL接口地址调用方式GET和POST方式,包括建立请求和设置请求头部信息等等......... import java.io.ByteArrayOutputStream; import ...

  7. C# 工厂模式+虚方法(接口、抽象方法)实现多态

    面向对象语言的三大特征之一就是多态,听起来多态比较抽象,简而言之就是同一行为针对不同对象得到不同的结果,同一对象,在不同的环境下得到不同的状态. 实例说明: 业务需求:实现一个打开文件的控制台程序的d ...

  8. Android 微信第三方登录（个人笔记）

    今天在写微信登录,花了半天时间搞定.然后写下自己的笔记,希望帮助更多的人...欢迎各位指教. 微信授权登录,官方说的不是很清楚.所以导致有一部分的坑. 微信注册应用平台的应用签名,下载 微信签名生成工 ...

  9. asp.net core 负载均衡集群搭建（centos7+nginx+supervisor+kestrel）

    概述 本文目的是搭建三台asp.net core 集群, 并配上 nginx做负载均衡   首先准备要运行的源码 http://pan.baidu.com/s/1c20x0bA 准备三台服务器(或则虚 ...

  10. 超全面的.NET GDI+图形图像编程教程

    本篇主题内容是.NET GDI+图形图像编程系列的教程,不要被这个滚动条吓到,为了查找方便,我没有分开写,上面加了目录了,而且很多都是源码和图片~ (*^_^*) 本人也为了学习深刻,另一方面也是为了 ...