09 浮动
文档流将窗体自上而下分成一行一行，并在每行中按从左至右的挨次排放元素，即为文档流。 文档流是 HTML 页面的底层结构，HTML 页面创建的元素默认都在文档流中。 块级元素 块级元素在文档流中自上向下排列（垂直方向排列） 块级元素在文档流中默认的宽度是父元素的100% 块级元素在文档流中默认的高度被是所有子元素的高度总和 内联元素 内联元素在文档流中自左向右水平排列（水平方向排列） 内联元素的宽度和高度都由内容确定 值得注意的是: 如果在一行中不能容纳所有的元素，则会换到下一行，继续自左向右排列。 有三种状况将使得元素离开文档流而存在，分别是浮动、绝对定位、固定定位。 值得注意的是: 在 IE 浏览器中浮动元素也存在于文档流中。 浮动CSS 的 Float（浮动），会使元素脱离文档流，向左或向右移动。其他元素会被重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。 属性值 描述 none 默认值。元素不浮动。 left 元素向左浮动。 right 元素向右浮动。 设置元素浮动效果时，以下四种情况比较特殊: 子元素...
10 块级元素
大多数 HTML 元素被定义为块级元素或内联元素。 10. 块级元素块级元素在浏览器显示时，通常会以新行来开始（和结束）。 我们已经学习过的块级元素有: <h1>, <p>, <ul>, <table> 等。 值得注意的是: <p> 标签中不能包含任何块级元素。 <div> 元素<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。 <div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。 如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。 <div> 元素的另一个常见的用途是文档布局。 值得注意的是: <div> 取代了使用表格定义布局的老式方法。 内联元素内联元素在显示时通常不会以新行开始。 我们已经学习过的内联元素有: <td>, <a>, <img> 等。 值得注意的是: <a> 标签中不能包含 <a> ...
11 溢出
overflow 属性用于设置当元素中的内容溢出后的情况。 值得注意的是: 所谓溢出，是指子元素的大小（包括文本、元素或图片等）超出父元素的区域，会有一部分内容显示在父元素所在的区域外。 属性值 描述 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 上述两个值，要么设置溢出的内容默认显示在父元素的区域之外，要么设置溢出的内容隐藏不可见。这两种结果都是很好的效果。所以，在实际开发中，很少使用这两个值。 在 HTML 页面中定义一个 <div> 标签，设置 CSS 样式，并设置较多的文本内容，具体代码如下: 1234567891011121314151617181920212223242526272829<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> ...
drag-and-drop
允许用户在一个元素上点击并按住鼠标按钮，拖动它到别的位置，然后松开鼠标按钮将元素放到那儿。 在拖动操作过程中，被拖动元素会以半透明形式展现，并跟随鼠标指针移动。放置元素的位置可能会在不同的应用内。 源元素事件所谓源元素就是被拖动的元素。 事件名称 作用 触发次数 dragstart事件 开始拖动源元素时被触发 只被触发一次 drag事件 拖动的过程中，实时被触发 被触发多次 dragend事件 结束拖动源元素时被触发 只被触发一次 123456789101112131415161718192021<div id="d1"> <img id="img" src="/note_image/HTML/html5/Penguins.jpg" width="256"></div><script> // 获取HTML页面中的源元素<img> var img = document.getElementById("img&q...
baidu-map
如何使用HTML 页面 引入百度地图提供的JS文件 1<script src="http://api.map.baidu.com/api?v=2.0&ak=HbUVYMUg6PwbOnXkztdgSQlQ"></script> 定义容器元素<div></div> 1234567891011121314151617181920212223242526272829<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>百度地图如何使用</title> <style type="text/css"> body, html,#allmap { width: 100%; height: 100%; overflow: hidden; margin:0; fon...
html5-introduce
HTML5 简介HTML5 是 HTML 标准的下一个重要版本，用来替代 HTML 4.01，XHTML 1.0 以及 XHTML 1.1。HTML5 也是一种在万维网上构建和呈现内容的标准。 HTML5 是万维网联盟（W3C）和网页超文本技术工作小组（WHATWG）合作的产物。 HTML5 是近十年来 Web 开发标准最巨大的飞跃。HTML5 并非仅仅用来表示 Web 内容，它将 Web 带入一个成熟的应用平台，在 HTML5 平台上，视频、音频、图象、动画，以及同电脑的交互都被标准化。 HTML5 引入了许多新元素和属性帮助我们构建现代化的网站。下面是 HTML5 引入的主要特性: 新的语义化元素： 比如 <header>，<footer> 和 <section>。 表单 2.0： 改进了 HTML Web 表单，为 <input> 标签引入了一些新的属性。 持久的本地存储： 为了不通过第三方插件实现。 WebSocket： 用于 Web 应用程序的下一代双向通信技术。 服务器推送事件： HTML5 引入了从 Web 服务器到 ...
html5-form
Input 新类型 类型 描述 说明 email 邮箱类型 判断当前字符串中是否包含@符号 search 搜索类型 url 网址类型 判断当前字符串中是否包含http:// number 数字类型 tel 电话号码类型 只在移动端浏览器有效 range 范围类型 适用于应该包含某个范围内数值的输入字段 color 颜色类型 date 日期类型 按照 ISO 8601 编码的日期（包括年，月，日） month 月份类型 由 ISO 8601 编码的年和月组成的日期 week 星期类型 由 ISO 8601 编码的年和星期数组成的日期 下述示例代码使用了 HTML5 提供的表单 2.0 中的 input 类型： 1234567891011<form> Email:<input type="email"><br> 搜索:<input type="search"><br> URL地址:<input type="url&...
canvas
基础内容Canvas技术允许在HTML页面直接绘制图形 不再需要引入外部图片(图形),HTML页面性能有所提高。 可以实现一些比较复杂的图形绘制工作。 Canvas技术主要应用方向 Web应用方面主要实现图表类。 网页游戏方面 - 主要实现2D效果。 HTML5 提供有关图形方面的技术 Canvas - 主要以2D为主 WebGL - 主要以3D为主 SVG - 矢量图 Canvas的特点 绘制的图形与HTML页面之间是无关系的 通过Canvas绘制的图形不能使用DOM API 通过Canvas绘制的图形不能绑定事件 Canvas画布最终是以图片(png|jpg)形式出现 绘制图形默认的颜色为黑色 如何使用Canvas画布在HTML页面中定义<canvas>元素 设置<canvas>元素宽度和高度使用属性方式。 使用CSS样式方式或属性方式设置<canvas>元素的宽度和高度。 1234567891011121314151617<!-- 在HTML页面中,定义<canvas>元素 * 默认只定义<canv...
html5-svg
基础内容1. 什么是 SVGSVG 全称为 Scalable Vector Graphics，译为可缩放矢量图形,简称矢量图。是一种用来描述二维矢量图形的 XML 标记语言。 2. SVG与Flash的区别 SVG Flash 相同点 用于二维矢量图形 用于二维矢量图形 不同点 是一个开放的W3C标准，基于XML 封闭的基于二进制格式的 3. SVG与Canvas的区别 SVG Canvas 不依赖于分辨率 依赖于分辨率 使用DOM及事件处理器（DOM专门为SVG开放接口） 不能使用DOM及事件处理器 不能实现游戏开发 可以实现游戏开发 实现大型渲染区域的应用(例如百度地图) 是以图片(png 4. SVG的优势 不需要专门的编辑器,文本编辑器都可以 可被搜索、索引、脚本化及压缩 图像不失真(和分辨率无关) 值得注意的是： SVG技术并不是专属于HTML5的 SVG技术本身是一套独立的用于描述二维图形 HTML5版本之前,以图片形式进行引入 HTML5版本之后,允许在HTML页面直接使用SVG技术 可参考的资源： SVG 标准...
web-sockets
什么是 Web SocketsWeb Sockets 技术使得浏览器直接与服务器端的程序通过 socket 可以实时的推送或者获取信息的通讯方式成为可能。 在 HTML5 之前实现浏览器与服务器端实时通信的技术如下： 轮询：原理简单易懂，就是客户端通过一定的时间间隔以频繁请求的方式向服务器发送请求，来保持客户端和服务器端的数据同步。 Flash：Flash 通过自己的 Socket 实现完成数据交换，再利用 Flash 暴露出相应的接口为 JavaScript 调用，从而达到实时传输目的。 Web Sockets 的优势与劣势Web Sockets 的优势 Web Sockets 提供强大的、双向、低延迟和易于处理的错误。 它没有很多连接，比如：Comet 长轮询。 Web Sockets 的劣势 Web Sockets 是 HTML5 的新规范，并不是所有浏览器都支持。 无请求作用域。由于 Web Sockets 是一个 TCP 套接字，而不是一个 HTTP 请求，因此无法轻松使用请求作用域服务。 Web Sockets 的实现原理下图展示了如何使用 WebSocket...
