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里的元素还没有加载,会获取不到所需的元素信息。

 

转载于:https://www.cnblogs.com/polk6/archive/2013/05/10/3071451.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/400665.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python对Protobuf进行序列化与反序列化

Python Protobuf1.了解Protobuf&#xff1a;1.1 Protobuf语法介绍&#xff1a;2. Python使用Protobuf&#xff1a;(windows平台上)1.了解Protobuf&#xff1a; 我们在使用protobuf之前首先要了解protobuf&#xff0c;那么什么是protobuf呢&#xff1f; 官方的解释是&#xff…

sql server management studio 查询的临时文件路径

C:\Users\你的登录名称\Documents\SQL Server Management Studio\Backup FilesC:\Users\你的登录名称\AppData\Local\Temp\sql server management studio 非正常关闭时自动保存的路径在sql server management studio 里创建的“新建查询”且没有手动保存的路径转载于:https://w…

K210 / Openmv实现 大津法/Otsu最大类间方差法 自适应二值化

目录源码效果平台&#xff1a;K210 固件版本&#xff1a;maixpy_v0.6.2_54_g897214100_openmv_kmodel_v4_with_ide_support.bin OpenMv库自带Otsu算法: 源码 # Otsu.py - By: Royic - 周三 9月 22 2021import sensor, imagesensor.reset() sensor.set_pixformat(sensor.GRAY…

第一章:OpenCV入门

第一章&#xff1a;OpenCV入门 OpenCV是一个开源的计算机视觉库&#xff0c;1999年有英特尔的Gary Bradski启动。OpenCV库由C和C语言编写&#xff0c;涵盖计算机视觉各个领域内的500多个函数&#xff0c;可以在多个操作系统上运行。它旨在提供一个简洁而又高效的接口&#xff…

【机器视觉学习笔记】双边滤波算法(C++)

目录源码滤波器主函数效果完整源码平台&#xff1a;Windows 10 20H2 Visual Studio 2015 OpenCV 4.5.3 本文所用源码修改自双边滤波(bilateral filter)以及联合双边滤波&#xff08;joint bilateral filter&#xff09;—— flow_specter 源码 滤波器 // 双边滤波 // src…

第二章:图像处理基础

第二章&#xff1a;图像处理基础操作一、图像的基本表示方法&#xff1a;1. 二值图像&#xff1a;2. 灰度图像&#xff1a;3. 彩色图像&#xff1a;二、像素处理&#xff1a;1. 二值图像及灰度图像&#xff1a;2.彩色图像&#xff1a;3. 使用numpy.array访问像素&#xff1a;三…

《Head First设计模式》 读书笔记16 其余的模式(二) 蝇量 解释器 中介者

《Head First设计模式》 读书笔记16 其余的模式&#xff08;二&#xff09; 蝇量 解释器 中介者 蝇量&#xff08;Flyweight Pattern&#xff09; 如想让某个类的一个实例能用来提供许多“虚拟实例”&#xff0c;就使用蝇量模式&#xff08;Flyweight Pattern&#xff09; 。 例…

洛谷P1525 关押罪犯

P1525 关押罪犯 题目描述 S 城现有两座监狱&#xff0c;一共关押着N 名罪犯&#xff0c;编号分别为1~N。他们之间的关系自然也极不和谐。很多罪犯之间甚至积怨已久&#xff0c;如果客观条件具备则随时可能爆发冲突。我们用“怨气值”&#xff08;一个正整数值&#xff09;来表示…

【机器视觉学习笔记】Hough变换直线检测(C++)

目录源码效果平台&#xff1a;Windows 10 20H2 Visual Studio 2015 OpenCV 4.5.3 本文源码摘自OpenCV2马拉松第22圈——Hough变换直线检测原理与实现 源码 #include <opencv2\opencv.hpp> #include <iostream> #include <opencv2\imgproc\types_c.h> #in…

第3章:图像运算

第3章&#xff1a;图像运算one. 图像加法运算&#xff1a;1. 加号运算符"":2. cv2.add()函数&#xff1a;two. 图像加权和&#xff1a;three. 按位逻辑运算&#xff1a;1. 按位与运算&#xff1a;2. 按位或运算&#xff1a;3.按位非运算&#xff1a;4. 按位异或运算&…

JMS中的消息通信模型

1. MQ简介&#xff1a; 消息队列&#xff08;Message Queue&#xff0c;简称MQ&#xff09;,是应用程序与应用程序之间的一种通信方法。应用程序通过发送和检索出入列队的针对应用程序的数据 - 消息来通信&#xff0c;而无需专用连接来链接它们。程序之间通过在消息中发送数据进…

【机器视觉学习笔记】最近邻插值实现图片任意角度旋转(C++)

目录原理源码RotateImage主函数效果完整源码速度优化源码优化效果平台&#xff1a;Windows 10 20H2 Visual Studio 2015 OpenCV 4.5.3 本文算法改进自图形算法与实战&#xff1a;6.图像运动专题&#xff08;5&#xff09;图像旋转-基于近邻插值的图像旋转 —— 进击的CV 原理…

UGUI的优点新UI系统

UGUI的优点新UI系统 第1章 新UI系统概述 UGUI的优点新UI系统&#xff0c;新的UI系统相较于旧的UI系统而言&#xff0c;是一个巨大的飞跃&#xff01;有过旧UI系统使用体验的开发者&#xff0c;大部分都对它没有任何好感&#xff0c;以至于在过去的很长一段时间里&#xff0c;大…

【探索HTML5第二弹05】响应式布局(中),一步一步响应式布局

前言 前天初步探究了一次响应式布局&#xff0c;虽然花了一天功夫&#xff0c;做出来的东西还是不行&#xff0c;在此我还是认为要做响应式布局设计应该先行&#xff0c;应该先制作3个以上的设计图出来&#xff0c;但是对于手机来说&#xff0c;图片流量也是个问题&#xff0c;…

通过使用CSS字体阴影效果解决hover图片时显示文字看不清的问题

1.前言 最近需要加入一个小功能&#xff0c;在鼠标越过图片时&#xff0c;提示其大小和分辨率&#xff0c;而不想用增加属性title来提醒&#xff0c;不够好看。然而发现如果文字是一种颜色&#xff0c;然后总有概率碰到那张图上浮一层的文字会看不到&#xff0c;所以加入文字字…

第4章:色彩空间类型转换

第四章&#xff1a;色彩空间类型转换one. 色彩空间基础知识&#xff1a;1. GRAY色彩空间&#xff1a;2. XYZ色彩空间3. YCrCb色彩空间3. HSV色彩空间4. HLS 色彩空间5. CIEL * a * b *色彩空间6. CIEL * u * v *色彩空间7. Bayer色彩空间two. 类型转换函数&#xff1a;three. 类…

【机器视觉学习笔记】双线性插值实现图片任意角度旋转(C++)

目录原理源码RotateImage_BilinearInterpolation主函数效果与最近邻插值比较原图最近邻插值效果&#xff08;局部&#xff09;双线性插值效果&#xff08;局部&#xff09;完整源码平台&#xff1a;Windows 10 20H2 Visual Studio 2015 OpenCV 4.5.3 原理 如图所示&#xff0…

第5章 - 几何变换

第五章-几何变换one. 缩放:two. 翻转&#xff1a;three. 仿射&#xff1a;1. 平移&#xff1a;2. 旋转&#xff1a;3. 更多复杂的仿射变换&#xff1a;four. 透视&#xff1a;five. 重映射&#xff1a;1. 映射参数的理解&#xff1a;2. 复制&#xff1a;3. 绕x轴旋转&#xff1…

安装设置Android Studio Win7安装

发一下牢骚和主题无关&#xff1a; 让人等待已久的Google I/O 2013 大会没有给我们带来Android5.0&#xff0c;也没有带来Adnroid4.3等等&#xff0c;但带来了Android Studio&#xff0c;虽说是预览版&#xff0c;又是基于Intellij IDEA&#xff0c; 但是也无不让开辟者们高兴。…

【树莓派学习笔记】一、烧录系统、(无屏幕)配置Wifi和SSH服务

目录系统镜像的准备格式化TF卡烧录镜像配置Wifi开启SSH服务第一次开机平台&#xff1a;树莓派3B 版本&#xff1a; 2021-05-07-raspios-buster-armhf 系统镜像的准备 树莓派资源里有许多资源&#xff0c;包括我们要用到的镜像。 格式化TF卡 将TF卡格式化为FAT32格式。 …