HTML 页面源代码布局介绍

http://www.cnblogs.com/polk6/archive/2013/05/10/3071451.html

此介绍以google首页源代码截图为例:

从上到下依次介绍:

1.<!DOCTYPE html>

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

XHTML规范:必须小写,有开始结束标签,属性也用双引号。

HTML规范:不区分大小写,有开始和结束标签,也可把结束标签放在开始标签里,如:<input type=‘text‘ /> 。属性可用双引号、单引号(必须配对使用)。

2.HTML 节点:HTML页面的根节点,页面的代码信息都放在这个节点里。

<head> 节点:头部节点。包含以下子节点:

  <mete> 标签:提供页面的元信息(meta-information),比如页面关键字;

  <title> 标签:页面的标题;

  <script> 标签:一般存放Css和JavaScript代码的区域;

<Body> 节点:页面内容区域,存放html各元素信息

  <Div> 标签 : 存放各元素控件。

  <script> 标签:因为Html页面是从上到下加载,不是加载完再一次性显示内容,而是一边加载一边展示内容。

把Script放在body的后面,类似于说明此Script里的代码要调用body里的元素。若放在Head标签里,运行到此script代码时,body里的元素还没有加载,会获取不到所需的元素信息。

==================================系列文章==========================================

本篇文章:1.1 HTML 页面源代码布局介绍

时间: 2024-08-03 17:21:15

HTML 页面源代码布局介绍的相关文章

WPF Step By Step 完整布局介绍

WPF Step By Step 完整布局介绍 回顾 上一篇,我们介绍了基本控件及控件的重要属性和用法,我们本篇详细介绍WPF中的几种布局容器及每种布局容器的使用场景,当 然这些都是本人在实际项目中的使用经验,可能还存在错误之处,还请大家指出. 本文大纲 1.Grid 2.StackPanel 3.DockPanel 4.WrapPanel Grid 1.Row和Column 我们下面来介绍Grid的行的用法,及我们在UI设计过程中需要注意的细节. 由于前面我们在第一章中已经介绍了基本的关于Gr

html5/css3响应式布局介绍及设计流程

html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media query兼容问题 html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media query兼容问题 一个普通的自适应显示的三栏网页,当你用不同的终端来查

问题:关于贴友的一个书本页面简单布局(html+css)的实现

贴友需求:以html+css仿照书本的页面实现布局效果(见图) html代码: 1: <!-- 我的博客:http://www.ido321.com --> 2: <!DOCTYPE HTML> 3: <html> 4: <head> 5: <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6: <title>T

关于贴友的一个书本页面简单布局(html+css)的实现

贴友需求:以html+css仿照书本的页面实现布局效果(见图) html代码: 1: <!-- 我的博客:http://www.ido321.com --> DOCTYPE HTML> html> head> meta http-equiv="content-type" content="text/html;charset=utf-8"> title>Test</title> meta name="au

ionic css布局介绍(一)

                                                ionic css 布局介绍 1. 基本布局2. 色彩.图标和边距3. 界面组件列表4. 界面组件按钮5. 界面组件 表单输入6. 界面组件选项卡7. 定制布局 栅格系统------------------------------------------------ 1. 基本布局 1.布局模式 基本布局: 标题/header.内容/content 和页脚/footer. 标题区总是位于屏幕顶部,页脚

Bootstrap~页面的布局

Bootstrap作为支持响应式布局的一个前端插件,确实发挥着重要的作用,无论你是在手机,平板还是PC上浏览网页,都能达到不错的效果,这一切一切,都是bootstrap带给我们的! 今天主要说下页面的布局,这是最基础的东西了,当我们设计一个站点时,应该为它设计一个全局性的统一的规范页面,这种页面我们叫它布局页,而在页面上体现出来的东西,就是布局的元素,在bootstrap里当然也是不可缺少的东西. Bootstrap的布局是一种栅格系统,即它由行和列组成,在使用时需要为页面内容和栅格系统包裹一个

手机页面rem布局

手机页面设计一般的大小是640,但是,手机屏幕大小确实不确定的,这样,怎么才能做出适应所有手机的手机页面呢?一般的解决方案有两种,rem布局和百分比布局.这两种方案我有都试过,所以现在更推荐用rem布局来制作手机页面; rem布局的兼容性:Mozilla Firefox 3.6+.Apple Safari 5+.Google Chrome.IE9+和Opera11+.ie6-ie8 还是别用rem不过现在的手机一般浏览器,一般可以直接不用去管IE内核的浏览器了. REM的计算公式例:html 设

Qt Quick 布局介绍

在 Qt Widgets 中,我们经常使用布局管理器来管理界面上的众多 widgets .在 Qt Quick 中也有这么一套与布局管理器类似的东西,叫作 Item Positioner .我还是沿用使用 Qt widgets 编程时的叫法,称它们为布局管理器. Qt Quick 提供这么几种常用的布局方式: anchors ,锚布局 Row ,行布局 Column ,列布局 Grid ,表格布局 Flow ,流式布局 咱们一个一个来看. 请给我的参赛文章<Qt Quick 事件处理之信号与槽>

带SVG统计图的报表实现(附svg部分页面源代码)

SVG作为一种矢量图形,具有任意缩放而不失真.可以被高质量打印.文件较小.交互性强等特性,成为当前一种主流的图片格式.润乾集算报表可以生成SVG格式的统计图,在HTML5中可以直接嵌入SVG统计图,方便用户在PC或移动端查看. 制作报表         1. 连接数据源 打开集算报表设计器,菜单栏选择工具-数据源,在弹出的数据源编辑窗口中新建数据源或连接现有数据源,这里使用默认的demo数据源.         2. 新建报表 菜单栏选择文件-新建报表,点击"生成空白报表",新建一个空