べ微熏の斜陽べ
べ微熏の斜陽べ

HTML 块级元素、行内元素、行内块元素详解

块级元素 和行内元素

1、 基本概念

在HTML5之前，HTML元素被分为两类：块级元素(block-level elements)和行内元素(inline-level elements)，或称为内联元素。

不过，因为这是一种表现特征，在HTML5时，在标准流中通过CSS属性display指定。（注释：表现特征，例如文字颜色，背景色等等和HTML的内容、JS的行为形成对比。以前，也许通过元素的类别决定元素的这种表现特征，不过现在可以通过CSS display属性进行控制。）

1、行内元素是那些只占用定义元素的标签所限定的空间的元素，而不是打破内容流。
2、块级元素占用其父元素(容器)的整个水平空间，以及与其内容高度相等的垂直空间，因此创建了一个“块”。

区别一：行内元素不从新行开始，只占用必要宽度；块级元素总是从新行开始，并占用其父元素的可用的全部宽度。

区别二： 块级元素可能包含行内元素，有时也包含其他块级元素，行内元素只能包含数据和其他行内元素。a元素例外，它可以包含块级元素，例如div。

2、行内元素和块级元素案例演示

行内元素
<div>
  The following span is an <span class="highlight">inline elementspan>; its
  background has been colored to display both the beginning and end of the
  inline element's influence.
div>

.highlight {
  background-color: #ee3;
}

在这个案例中，

块级元素包含一些文本。在那段文本中包含了一个元素，它是行内元素。因为是行内元素，所以段落正确渲染为单一的，未被打破的一段文本流。

在这里插入图片描述

块级元素

将元素修改为块级元素，例如段落元素

，代码如下所示

<div>
  The following paragraph is a
  <p class="highlight">block-level element;p>
  its background has been colored to display both the beginning and end of the
  block-level element's influence.
div>

.highlight {
  background-color: #ee3;
}

可以看到差异，

元素完全地改变了文本的布局，将其分割为三部分：

元素前的文本，

元素本身包含的文本，

元素后的文本。

HTML 块级元素、行内元素、行内块元素详解_第1张图片

3、改变元素的等级

你可以通过CSS display属性改变一个元素的视觉表现，例如，通过把display的值从”inline“修改为”block"， 你可以指示浏览器以为块盒（block box）而不是行内盒（inline box）的方式渲染元素，反之亦然。然而，修改元素的display属性，例如把display属性值从“inline”修改为“block”或者从“block”修改为“inline"，并不会改变元素的类别和内容模型。例如，即使把span元素的display属性修改为”block“，它仍然属于行内元素并且不能内嵌div元素。内容模型概念接下来会介绍。

块级元素、行内元素、行内块元素的特点

1、块级元素（block）

块级元素，顾名思义，该元素呈现“块”状，所谓块状就是元素显示为矩形区域，主要用于网页布局和网页结构的搭建。它有自己的宽度和高度，也就是可自定义 width 和 height。除此之外，块级元素比较霸道，它独自占据一行高度（float浮动除外），一般可以作为其他容器使用，可容纳块级元素和行内元素。以下元素均为块级元素：

<address>  	// 定义地址 
<caption>  // 定义表格标题  
<div>     	// 定义文档中的分区或节 
<dl>    	// 定义列表 
<dt>     	// 定义列表中的项目 
<dd>      	// 定义列表中定义条目
<form>  	// 创建 HTML 表单 
<h1>    	// 定义最大的标题
<h2>    	// 定义副标题
<h3>    	// 定义标题
<h4>     	// 定义标题
<h5>     	// 定义标题
<h6>     	// 定义最小的标题
<hr>     	// 创建一条水平线
<li>     	// 标签定义列表项目
<ol>     	// 定义有序列表
<ul>    	//定义无序列表
<p>     	// 标签定义段落
<table>    //标签定义 HTML 表格
<tbody>    //定义标签表格主体（正文）
<td>    	//表格中的标准单元格
<tfoot>    //定义表格的页脚（脚注或表注）
<th>    	//定义表头单元格
<thead>    // 标签定义表格的表头
<tr>     	// 定义表格中的行

块级元素代表性的就是 div，其他入p、header等等都可以用 div 来实现，不过为了方便解读代码，一般会使用特定的语义化标签，使代码可读性强

块级元素具有以下特点：

  • 每个块级元素都是独自占一行；
  • 高度，宽度，行高，外边距（margin）以及内边距（padding）都可以控制；
  • 元素的宽度如果不设置的话，默认为父元素的宽度（父元素宽度100%）；
  • 多个块状元素标签写在一起，默认排列方式为从上至下；

2、行内元素（inline）

行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。行内元素常用于控制页面中文本的样式。以下元素均为行内元素：

<a>     	// 标签可定义锚  
<acronym>   // 定义只取首字母缩写 
<b>     	// 字体加粗   
<br>     	// 换行  
<em>     	// 定义为强调的内容
<i>     	// 斜体文本效果
<kbd>     	// 定义键盘文本
<label>     // 标签为 input 元素定义标注（标记）
<q>     	// 定义短的引用
<select>	// 创建单选或多选菜单
<span>     	// 组合文档中的行内元素
<strong> 	// 加粗
<sub>     	// 定义下标文本
<sup>     	// 定义上标文本
<textarea>  // 多行的文本输入控件

行内元素具有以下特点：

  • 不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会自动换行，其宽度随元素的内容而变化；
  • 高宽、行高无效，对外边距（margin）和内边距（padding）仅设置左右方向有效，上下无效；
  • 设置行高有效，等同于给父级元素设置行高；
  • 元素的宽度就是它包含的文字或图片的宽度，不可改变；
  • 行内元素中不能放块级元素，a 链接里面不能再放链接；

行内元素最常使用的就是 span，其他的只在特定功能下使用。与之间只能包含文本和各种文本的修饰标签，如加粗标签、倾斜标签等，中还可以嵌套多层。

3、行内块元素（inline-block）

行内块级元素，它既具有块级元素的特点，也有行内元素的特点，它可以自由设置元素宽度和高度，也可以在一行中放置多个行内块级元素。比如：input、img就是行内块级元素，它可设置高宽以及一行多个。以下元素为行内块元素：

<button>  	// 普通按钮
<input>   	// 创建表单元素
<textarea>  // 创建表单文本域
<img>		// 插入图片

行内块元素的特点：

  • 高度、行高、外边距以及内边距都可以控制；
  • 默认宽度就是它本身内容的宽度，不独占一行，但是之间会有空白缝隙，设置它上一级的 font-size 为 0，才会消除间隙；

元素显示模式转换

1、转换为块级元素

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <style>
    body *{
      border: red 2px solid;
      background-color: #00f8ff;
    }
    a{
      display: block;
    }
    div
  style>
head>
<body>
<a href="">a标签a>
<div>div标签div>
body>
html>

效果如下：
HTML 块级元素、行内元素、行内块元素详解_第2张图片

2、转换为行内元素：

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <style>
    body *{
      border: red 2px solid;
      background-color: #00f8ff;
    }
    div{
      display: inline;
    }
    div
  style>
head>
<body>
<a href="">a标签a>
<div>div标签div>
body>
html>

效果如下：
HTML 块级元素、行内元素、行内块元素详解_第3张图片

3、转换为行内块元素：

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <style>
    body *{
      border: red 2px solid;
      background-color: #00f8ff;
    }
    div{
      display: inline-block;
    }
  style>
head>
<body>
<a href="">a标签a>
<span>span标签span>
body>
html>

效果如下：
HTML 块级元素、行内元素、行内块元素详解_第4张图片

总结

不管块级元素还是行内元素，区别:一是排列方式，二是宽高边距设置，三是默认宽度。

  1. 块级元素会独占一行，而行内元素和行内块元素则会在一行内显示；
  2. 块级元素和行内块元素可设置 width、height 属性，而行内元素设置无效；
  3. 块级元素的 width 默认为 100%，而行内元素则是根据其自身的内容或子元素来决定其宽度；

而行内块级元素又同时拥有块级元素和行内元素的特点。

你可能感兴趣的:(html,前端)

  • 开发浏览器插件太难？试试 crxjs，效率飙升的秘密武器！ 前端chrome
    浏览器插件开发一直以来都是前端开发者的一块重要阵地。它能让我们通过扩展浏览器功能，为用户提供便捷的工具和更流畅的使用体验。然而，许多开发者在尝试插件开发时，却常常因为复杂的API、缺乏现代开发工具支持以及传统工具链无法实现热重载而望而却步。每次修改代码都需要重新打包、加载插件，甚至重启浏览器，不仅耗时，还容易打断开发思路。如果你也有类似的困扰，那么crxjs能成为你的终极解决方案。什么是crxjs
  • webpack多页面打包的一次尝试
    初始化cd项目名webpackinit创建第二页面与其头文件touchpage2.htmltouchsrc/page2.js修改page2.jsconsole.log("success")修改webpack.config.js添加page2.html至plugins项，添加src/page2.js至entry项最终模板:constpath=require('path');constHtmlWebp
  • AI前端技术赋能智慧交通：从实时路况到智能导航 前端
    在现代社会，日益严重的交通拥堵和出行效率低下已成为许多城市面临的重大挑战。传统的交通管理模式难以应对海量交通数据和复杂的交通状况，而AI写代码工具的出现为解决这些问题提供了新的途径。特别是AI前端技术，它在处理和可视化交通数据，构建智能交通应用方面扮演着至关重要的角色，为建设智慧交通系统提供了强有力的支撑。AI前端在交通管理中的应用：数据驱动，智能决策AI前端技术在交通管理中的应用主要体现在以下几
  • nodejs创建ws服务器，前端浏览器用websocket接收信息和发送信息给服务端 cdcdhj nodejs服务器前端websocket
    首页是用nodejs建立服务器端//wsserver.jsconstWebSocket=require('ws');constwss=newWebSocket.Server({port:8080});wss.on('connection',functionconnection(ws){ws.on('error',console.error);//接收客户端发送过来的信息ws.on('message
  • 玩转前端正则表达式 正则表达式前端后端
    文章首发本人博客，由于格式和图片解析问题，可以前往阅读原文JavaScript中的正则是Perl的大子集，但Perl内部的一些表达式却没有继承正则表达式是用于匹配字符串中字符组合的模式(可参考MDN教程)扫码关注公粽号，查看更多优质文章一个例子使用正则将一个数字以科学计数法进行表示，如：//10000000=>10,000,000现在用一个正则来解决conststr='10000000'const
  • 免费的SSL证书在哪里申请？——七大免费申请平台 sslhttphttps
    免费的SSL证书可以从多个可靠的平台申请，以下是几个推荐的选择：JoySSL特点：提供永久免费的SSL证书服务，拥有自主品牌SSL证书，服务响应快速，并提供全程技术支持。适用对象：适合希望快速、自动化部署且能提供安全有效的数据保护服务的网站。申请网址：https://www.joyssl.com/certificate/select/free.html?nid=7注册码：填写(230907)享受免
  • [前端] node版本升级后续 平坑2 -npm版本问题 前端node.jsnpm版本
    最近又遇到了一个前端工程node版本升级的后续问题。一个同事在拉取了最新的master分支，安装依赖后，运行项目时有一个文件缺失，无法编译成功。定位问题：我本地重新拉取了master分支，安装依赖，运行项目可以正常启动，排除项目文件问题。在同事的电脑上重新开了一个文件夹，拉取master分支，执行安装(npminstall)，发现第一行跳了提醒(Thisversionofnpmiscompatib
  • 什么是虚拟DOM？
    古老的渲染方式（innerHTML）在虚拟DOM出现之前，我们创建页面UI最常用的方式就是innerHTML，但是它有一个很大的问题，就是会导致很多不必要的性能开销。看下面这段代码，这是个很经典的渲染服务器返回的列表数据到HTML中：constdataList=[{label:'Lorem,ipsum.',value:112.7},{label:'Praesentium,facere.',valu
  • 一篇文章引出的N个面试题
    太久没看面试题了，看之前的输入一个URL，回车之后到页面渲染的那些事，又来复习一波，把其中的碰到过的一些面试题提取出来，面向面试学习。1.如何减少DNS的解析时间启动DNS预解析；浏览器在解析HTML时，遇到配置了预解析的，会发起一个异步的DNS查询，等到资源请求时，就不用再等待DNS解析。2.HTTP和HTTPS的区别安全性：HTTP是明文传输协议，数据在传输过程中不经过加密处理，容易被窃听和篡
  • 2024前端面试经验分享 前端面试
    一、简历1、整理步骤把自己过去做过的有亮点的事情整理一遍。项目经历，通过star法则来做，不赘述，网上很多人讲。需要突出的亮点见下面。2、前端开发常见突出亮点：性能优化代码优化组件封装框架原理项目推进、协调能力技术难点的解决能力技术方案设计能力前端工程化的推进3、管理相关亮点如何制定代码规范，以及review如何提升团队人员的水平如何制定流程为团队提效4、注意点遵循star法则；尽量简洁，减少面试
  • Vue3中通过加密串进行后端验证并实现登录跳转教程 ecmascript-6
    在Vue3中进行登录并通过加密串进行后端验证，一般步骤是：用户输入用户名和密码，前端将其加密后发送给后端进行验证，后端验证通过后，返回身份验证信息（如令牌），前端接收验证结果并实现登录跳转。主要步骤：用户输入信息并加密用户输入的密码可以通过加密算法（如SHA256,AES等）进行加密，确保数据的安全性。发送请求到后端前端将加密后的数据发送到后端进行验证，通常使用POST请求。后端验证加密数据后端解
  • mac新手开发基础配置（前端版） macos前端vscode插件
    brewhttps://www.cnblogs.com/hanease/p/15962094.html方法四fnmhttps://www.jianshu.com/p/0843d55e044evscodehttps://blog.csdn.net/weixin_46474921/article/details/132841711有几点需要配置下：1.语言切换成中文2.文件设置自动保存3.取消预览模式
  • 基于jQuery / 原生JS两种方式流畅实现半屏悬浮窗 池泽123 jsjQueryjavascriptjquery前端
    本篇分别用jQuery和原生两种方式实现悬浮窗功能和样式的切换，兼容IE完成样式示例使用技术栈：jquery、javaScript、HTML/CSS一、基础版面悬浮窗可以有很多样式，但基础结构可以大致分为触发按钮、遮罩层、内容三部分。触发按钮通常设置在屏幕边缘，我这里举例一个右下的位置展示；联系我们/*悬浮窗触发按钮样式*/.Suspended_window_box{width:150px;hei
  • 前端-从入门到入土
    前端学习路线基础部分（HTML+CSS+JS入门）快速了解，能够进行简单的页面布局，交互JS部分，可以写一些小demo来熟悉常见的API推荐教程：https://www.bilibili.com/video/BV1BT4y1W7Aw/?spm_id_from=333....框架部分这里推荐Vue框架，相对React会更容易上手，并且中文文档也相对友好推荐教程：https://www.bilibil
  • JavaScript 与 TypeScript 的详细对比
    JavaScript是当前Web开发的主要编程语言，也是现代前端开发的基石。尽管它灵活而强大，但在大型项目中，JavaScript的动态类型系统和无类型检查常常带来代码管理上的问题。为了解决这些问题，微软在2012年推出了TypeScript，这是一种JavaScript的超集，增加了静态类型检查、接口、类和其他现代化的编程特性。本文将深入对比JavaScript和TypeScript，分析两者在
  • 深入 JavaScript：前端开发的核心语言
    JavaScript是一种广泛应用于前端开发的编程语言，最早由Netscape公司在1995年推出。作为一种轻量、解释性和多范式的编程语言，JavaScript支持事件驱动、面向对象和函数式编程。它不仅是网页交互的核心技术之一，还随着Node.js的出现，逐渐渗透到了后端开发。本文将带你了解JavaScript的核心概念、特点及常见应用场景，帮助你掌握这门现代化的编程语言。一、JavaScript
  • Vue.js：轻量高效的前端框架
    Vue.js是一个用于构建用户界面的渐进式JavaScript框架，因其轻量、灵活和易上手的特性备受欢迎。Vue.js不仅适合小型项目的快速开发，也可用于构建复杂的单页面应用（SPA）。本文将介绍Vue.js的核心特性、项目结构、常用功能及其在现代前端开发中的应用场景。一、Vue.js简介Vue.js（简称Vue）由尤雨溪于2014年推出，是一个专注于视图层的JavaScript框架。它采用渐进式
  • vue表单案例练习：vue表单创建一行数据及删除数据的实现与理解
    ==如何使用Vue：基本结构:1、引入Vue的核心JS文件2、准备Dom结构3、实例化组件通过el属性，挂载元素，绑定id为app的html元素通过data属性，定义数据，可以在html代码段中显示的数据4、获取数据数据绑定最常见的形式就是使用“Mustache”语法(双大括号)的文本插值==@[TOC]目标两个例子:1.表单数据一行的创建+删除(彻底删除/隐藏双实现)代码+注释==特色:1:内容
  • Svelte 5震撼发布，前端开发的新变革！ 前端程序员
    title:Svelte5震撼发布，前端开发的新变革！博主小程序体验|博主公众号分享亲爱的前端小伙伴们，大家好！Svelte5正式发布啦！这可是新一代的前端框架哦。就在10月22日，这个备受期待的版本终于和我们见面了。它带来了好多超棒的更新呢。首先，它是完全重写的框架哦。这意味着什么呢？就是它让应用变得更快啦，体积更小了，而且更加可靠。我们写出来的代码也会更加一致，更符合我们的习惯。比如在代码结构
  • 【9.1】Golang后端开发系列--Gin快速入门指南 不知名美食探索家 Golang系统性学习golanggin开发语言
    文章目录一、引言二、Gin框架概述（一）什么是Gin（二）为什么选择Gin三、安装Gin框架（一）安装Go语言环境（二）使用GoModules安装Gin四、路由基础（一）基本路由定义（二）路由参数（三）查询参数五、请求处理和响应（一）处理JSON数据（二）处理表单数据六、中间件的使用️（一）内置中间件（二）中间件的执行顺序七、模板渲染（一）使用HTML模板（二）模板语法和数据传递八、错误处理❌（一
  • unplugin-dist-zip-pack：前端构建产物打包神器，开发者的得力助手
    作为一名前端开发者，在项目开发过程中，我们常常需要对构建产物进行高效的打包管理。最近，我发现了一个超级好用的插件——unplugin-dist-zip-pack，它简直是我们开发者的福音。一、强大的功能特性unplugin-dist-zip-pack能够将构建产物完美打包，并且支持众多主流的构建工具，包括Webpack、Vue-CLI、Vite、Rollup、esbuild、Astro、Nuxt和
  • AJAX是如何凭一己之力提高前端程序员的工资水平的？ 前端程序员ajax
    作者：阿达西链接：juejin.cn/post/7395396352183009290emmm，今天无意间听到一个比较奇怪的信息，就是在很早之前，前端工程师只是一个切图崽，而且工资也不是很高。说白了，就是没含金量的工作。因为那时候的Web应用相对简单，主要关注于页面的静态内容和基本的交互。所以前端开发的工作主要集中在HTML、CSS和基础的JavaScript上。但是自从AJAX出现后，前端程序员
  • cat命令详解 猫咪-9527 计算机操作系统Linux指令
    ️专栏：https://blog.csdn.net/2301_81831423/category_12872319.html主页：猫咪-9527-CSDN博客“欲穷千里目，更上一层楼。会当凌绝顶，一览众山小。”cat是Linux/Unix中的一个非常常用的命令，主要用于连接文件并显示文件内容。它的名称来源于concatenate（连接），不仅可以查看文件内容，还能将多个文件合并为一个文件，或用作其
  • ls指令详讲 猫咪-9527 计算机操作系统linux
    ️专栏：https://blog.csdn.net/2301_81831423/category_12872319.html主页：猫咪-9527-CSDN博客“欲穷千里目，更上一层楼。会当凌绝顶，一览众山小。”目录基本语法常用选项详解1.基本选项2.组合选项文件类型表示高级选项常见用法示例常用别名ls是Linux/Unix系统中一个非常常用的命令，用于列出指定目录中的文件和子目录。它可以提供文件的
  • 如何启动一个静态的前端工程的服务
    使用场景在前端开发过程中，可能会要对发布到生产的包做验证或者要本地运行一个开源的包的实例，这时候就需要在本地启动一个前端服务，一般有以下两种方式运行方式Live-Server通过VsCode去安装插件LiveServer，然后打开静态工程，点击右下角的LiveServer按钮即可运行工程优点：使用简单，方便快捷缺点：不支持自定义配置，如工程里面需要代理请求，则无法实现express使用expres
  • Javascript(turfjs)等值线图绘制 前端空间计算mapbox
    使用气象、环境类空间数据绘制等值线通常是由NCL、Python来做，在一些场景中：你只是想在WEB端做一些简单的绘制你的后端只有Node.js环境你纯粹是个前端工程师你也许需要使用纯Javascript来做这件事。本文尝试根据空间中的一组散点来绘制等值线图（或色斑图）。1.准备工作turfjs，空间分析（geospatialanalysis）工具包，支持在浏览器和Node.js环境中运行，空间数据
  • 如何用JavaScript判断前端应用运行环境（移动平台还是桌面环境）
    在多模态模型的架构上，ChatGPT的绘图能力主要依赖以下几个核心组件：跨模态编码器（Cross-ModalEncoder）：跨模态编码器的作用是将文本和图像的特征进行对齐。GPT可以将用户输入的文本描述转换为文本特征表示，然后利用跨模态编码器将这些特征映射到图像特征空间。这种方式确保模型能够理解描述性语言中不同细节是如何与图像特征对应的。
  • 腾讯新闻中心首页改版啦 javascripthtml
    本人博客：http://www.xiabingbao.com正式地址：http://www.xiabingbao.com/post/news/2016/05/16/qq-news-revision.html腾讯新闻中心的首页改版啦，欢迎访问【http://news.qq.com】。我是负责这次改版的前端开发工程师，今天也从前端的角度分析一下改版的过程和效果。我们先来看看改版前后的首屏效果：从对比图
  • 后端：撑起互联网世界的基石 后端
    在互联网的广袤世界中，后端如同沉稳的基石，默默支撑着前端的绚烂繁华，是网站、应用和服务的核心，是连接用户与数据的关键桥梁。后端是数据的守护者，负责处理和保护海量的数据，确保数据的安全性、完整性和可靠性，让用户放心使用互联网服务。为提供流畅的用户体验，后端开发者需不断优化系统性能，通过优化数据库查询、缓存技术等手段，提高系统的响应速度和稳定性。随着业务增长，后端系统必须具备良好的可扩展性，开发者要设
  • 后端开发技术 后端
    在当今数字化和互联网化的时代背景下，后端开发技术作为连接前端和用户的重要桥梁，正以前所未有的速度发展和演进。后端开发的核心技术通常包括主流服务器端语言如Java、Python、Node.js等；关系型或非关系型数据库如MySQL、MongoDB等；容器编排工具如Docker、Kubernetes等。以Python为例，其简洁明了的语法受众多开发者青睐，适合快速原型开发和敏捷项目交付。随着云计算的普
  • 解读Servlet原理篇二---GenericServlet与HttpServlet 周凡杨 javaHttpServlet源理GenericService源码
    在上一篇《解读Servlet原理篇一》中提到，要实现javax.servlet.Servlet接口（即写自己的Servlet应用），你可以写一个继承自javax.servlet.GenericServletr的generic Servlet ，也可以写一个继承自java.servlet.http.HttpServlet的HTTP Servlet（这就是为什么我们自定义的Servlet通常是exte
  • MySQL性能优化 bijian1013 数据库mysql
            性能优化是通过某些有效的方法来提高MySQL的运行速度，减少占用的磁盘空间。性能优化包含很多方面，例如优化查询速度，优化更新速度和优化MySQL服务器等。本文介绍方法的主要有：         a.优化查询         b.优化数据库结构  
  • ThreadPool定时重试 dai_lm javaThreadPoolthreadtimertimertask
    项目需要当某事件触发时，执行http请求任务，失败时需要有重试机制，并根据失败次数的增加，重试间隔也相应增加，任务可能并发。 由于是耗时任务，首先考虑的就是用线程来实现，并且为了节约资源，因而选择线程池。 为了解决不定间隔的重试，选择Timer和TimerTask来完成 package threadpool; public class ThreadPoolTest {
  • Oracle 查看数据库的连接情况 周凡杨 sqloracle 连接
    首先要说的是，不同版本数据库提供的系统表会有不同，你可以根据数据字典查看该版本数据库所提供的表。 select * from dict where table_name like '%SESSION%'; 就可以查出一些表，然后根据这些表就可以获得会话信息 select sid,serial#,status,username,schemaname,osuser,terminal,ma
  • 类的继承 朱辉辉33 java
    类的继承可以提高代码的重用行，减少冗余代码；还能提高代码的扩展性。Java继承的关键字是extends 格式:public class 类名（子类）extends 类名（父类）{ } 子类可以继承到父类所有的属性和普通方法，但不能继承构造方法。且子类可以直接使用父类的public和 protected属性，但要使用private属性仍需通过调用。 子类的方法可以重写，但必须和父类的返回值类
  • android 悬浮窗特效 肆无忌惮_ android
    最近在开发项目的时候需要做一个悬浮层的动画，类似于支付宝掉钱动画。但是区别在于，需求是浮出一个窗口，之后边缩放边位移至屏幕右下角标签处。效果图如下：   一开始考虑用自定义View来做。后来发现开线程让其移动很卡，ListView+动画也没法精确定位到目标点。   后来想利用Dialog的dismiss动画来完成。   自定义一个Dialog后，在styl
  • hadoop伪分布式搭建 林鹤霄 hadoop
    要修改4个文件    1: vim hadoop-env.sh  第九行    2: vim core-site.xml            <configuration>     &n
  • gdb调试命令 aigo gdb
    原文：http://blog.csdn.net/hanchaoman/article/details/5517362   一、GDB常用命令简介   r run 运行.程序还没有运行前使用 c             cuntinue 
  • Socket编程的HelloWorld实例 alleni123 socket
    public class Client { public static void main(String[] args) { Client c=new Client(); c.receiveMessage(); } public void receiveMessage(){ Socket s=null; BufferedRea
  • 线程同步和异步 百合不是茶 线程同步异步
    多线程和同步 : 如进程、线程同步，可理解为进程或线程A和B一块配合，A执行到一定程度时要依靠B的某个结果，于是停下来，示意B运行；B依言执行，再将结果给A；A再继续操作。 所谓同步，就是在发出一个功能调用时，在没有得到结果之前，该调用就不返回，同时其它线程也不能调用这个方法   多线程和异步:多线程可以做不同的事情,涉及到线程通知     &
  • JSP中文乱码分析 bijian1013 javajsp中文乱码
            在JSP的开发过程中，经常出现中文乱码的问题。         首先了解一下Java中文问题的由来：         Java的内核和class文件是基于unicode的，这使Java程序具有良好的跨平台性，但也带来了一些中文乱码问题的麻烦。原因主要有两方面，
  • js实现页面跳转重定向的几种方式 bijian1013 JavaScript重定向
            js实现页面跳转重定向有如下几种方式： 一.window.location.href <script language="javascript"type="text/javascript"> window.location.href="http://www.baidu.c
  • 【Struts2三】Struts2 Action转发类型 bit1129 struts2
     在【Struts2一】 Struts Hello World http://bit1129.iteye.com/blog/2109365中配置了一个简单的Action，配置如下   <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configurat
  • 【HBase十一】Java API操作HBase bit1129 hbase
    Admin类的主要方法注释：   1. 创建表 /** * Creates a new table. Synchronous operation. * * @param desc table descriptor for table * @throws IllegalArgumentException if the table name is res
  • nginx gzip ronin47 nginx gzip
    Nginx GZip 压缩 Nginx GZip 模块文档详见：http://wiki.nginx.org/HttpGzipModule 常用配置片段如下： gzip on; gzip_comp_level 2; # 压缩比例，比例越大，压缩时间越长。默认是1 gzip_types text/css text/javascript; # 哪些文件可以被压缩 gzip_disable &q
  • java-7.微软亚院之编程判断俩个链表是否相交 给出俩个单向链表的头指针，比如 h1 ， h2 ，判断这俩个链表是否相交 bylijinnan java
    public class LinkListTest { /** * we deal with two main missions: * * A. * 1.we create two joined-List(both have no loop) * 2.whether list1 and list2 join * 3.print the join
  • Spring源码学习-JdbcTemplate batchUpdate批量操作 bylijinnan javaspring
    Spring JdbcTemplate的batch操作最后还是利用了JDBC提供的方法，Spring只是做了一下改造和封装 JDBC的batch操作： String sql = "INSERT INTO CUSTOMER " + "(CUST_ID, NAME, AGE) VALUES (?, ?, ?)";
  • [JWFD开源工作流]大规模拓扑矩阵存储结构最新进展 comsci 工作流
        生成和创建类已经完成,构造一个100万个元素的矩阵模型,存储空间只有11M大,请大家参考我在博客园上面的文档"构造下一代工作流存储结构的尝试",更加相信的设计和代码将陆续推出.........     竞争对手的能力也很强.......,我相信..你们一定能够先于我们推出大规模拓扑扫描和分析系统的....
  • base64编码和url编码 cuityang base64url
    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter; import java.io.StringWriter; import java.io.UnsupportedEncodingException;
  • web应用集群Session保持 dalan_123 session
    关于使用 memcached 或redis 存储 session ，以及使用 terracotta 服务器共享。建议使用 redis，不仅仅因为它可以将缓存的内容持久化，还因为它支持的单个对象比较大，而且数据类型丰富，不只是缓存 session，还可以做其他用途，一举几得啊。1、使用 filter 方法存储这种方法比较推荐，因为它的服务器使用范围比较多，不仅限于tomcat ，而且实现的原理比较简
  • Yii 框架里数据库操作详解-[增加、查询、更新、删除的方法 'AR模式'] dcj3sjt126com 数据库
        public function getMinLimit () {        $sql = "...";        $result = yii::app()->db->createCo
  • solr StatsComponent（聚合统计） eksliang solr聚合查询solr stats
    StatsComponent 转载请出自出处：http://eksliang.iteye.com/blog/2169134 http://eksliang.iteye.com/ 一、概述        Solr可以利用StatsComponent 实现数据库的聚合统计查询，也就是min、max、avg、count、sum的功能   二、参数
  • 百度一道面试题 greemranqq 位运算百度面试寻找奇数算法bitmap 算法
    那天看朋友提了一个百度面试的题目：怎么找出{1,1,2,3,3,4,4,4,5,5,5,5}  找出出现次数为奇数的数字.   我这里复制的是原话，当然顺序是不一定的，很多拿到题目第一反应就是用map,当然可以解决，但是效率不高。   还有人觉得应该用算法xxx,我是没想到用啥算法好...！   还有觉得应该先排序...   还有觉
  • Spring之在开发中使用SpringJDBC ihuning spring
      在实际开发中使用SpringJDBC有两种方式：   1. 在Dao中添加属性JdbcTemplate并用Spring注入；     JdbcTemplate类被设计成为线程安全的，所以可以在IOC 容器中声明它的单个实例，并将这个实例注入到所有的 DAO 实例中。JdbcTemplate也利用了Java 1.5 的特定(自动装箱，泛型，可变长度
  • JSON API 1.0 核心开发者自述 | 你所不知道的那些技术细节 justjavac json
    2013年5月，Yehuda Katz 完成了JSON API(英文，中文) 技术规范的初稿。事情就发生在 RailsConf 之后，在那次会议上他和 Steve Klabnik 就 JSON 雏形的技术细节相聊甚欢。在沟通单一 Rails 服务器库—— ActiveModel::Serializers 和单一 JavaScript 客户端库——&
  • 网站项目建设流程概述 macroli 工作
    一.概念 网站项目管理就是根据特定的规范、在预算范围内、按时完成的网站开发任务。 二.需求分析 项目立项 　　我们接到客户的业务咨询，经过双方不断的接洽和了解，并通过基本的可行性讨论够，初步达成制作协议，这时就需要将项目立项。较好的做法是成立一个专门的项目小组，小组成员包括：项目经理，网页设计，程序员，测试员，编辑/文档等必须人员。项目实行项目经理制。 客户的需求说明书 　　第一步是需
  • AngularJs 三目运算 表达式判断 qiaolevip 每天进步一点点学习永无止境众观千象AngularJS
    事件回顾：由于需要修改同一个模板，里面包含2个不同的内容，第一个里面使用的时间差和第二个里面名称不一样，其他过滤器，内容都大同小异。希望杜绝If这样比较傻的来判断if-show or not，继续追究其源码。 var b = "{{", a = "}}"; this.startSymbol = function(a) {
  • Spark算子：统计RDD分区中的元素及数量 superlxw1234 sparkspark算子Spark RDD分区元素
    关键字：Spark算子、Spark RDD分区、Spark RDD分区元素数量     Spark RDD是被分区的，在生成RDD时候，一般可以指定分区的数量，如果不指定分区数量，当RDD从集合创建时候，则默认为该程序所分配到的资源的CPU核数，如果是从HDFS文件创建，默认为文件的Block数。   可以利用RDD的mapPartitionsWithInd
  • Spring 3.2.x将于2016年12月31日停止支持 wiselyman Spring 3
                  Spring 团队公布在2016年12月31日停止对Spring Framework 3.2.x（包含tomcat 6.x）的支持。在此之前spring团队将持续发布3.2.x的维护版本。          请大家及时准备及时升级到Spring
  • fis纯前端解决方案fis-pure zccst JavaScript
    作者：zccst FIS通过插件扩展可以完美的支持模块化的前端开发方案，我们通过FIS的二次封装能力，封装了一个功能完备的纯前端模块化方案pure。 1，fis-pure的安装 $ fis install -g fis-pure $ pure -v 0.1.4 2，下载demo到本地 git clone https://github.com/hefangshi/f
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他