一本静哥
一本静哥

Html学习记录

HTML

  • (Hyper Text Markup Language) —— 超文本标记语言

  • HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

  • 开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。

  • HTML 文档由嵌套的 HTML 元素构成。

  • HTML 提示：使用小写属性

    • 属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
    • 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号

  • 可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

  • 当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

  • 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

    每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。如果需要使用其它的颜色，需要使用十六进制的颜色值。

  • 应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。

  • HTML5 之前的 HTML 版本是HTML 4.01

 与  之间的文本描述网页
 与  之间的文本是可见的页面内容

 与 
 之间的文本被显示为标题(head)

 与 
 之间的文本被显示为段落(paragraph)

HTML 标题

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
	<h1>This is a headingh1>

HTML 段落

HTML 段落是通过 <p> 标签进行定义的。
	<p>This is a paragraph.p>

HTML 链接

HTML 链接是通过 <a> 标签进行定义的。在 href 属性中指定链接的地址。
	<a href="http://www.w3school.com.cn">This is a linka>

HTML 图像

HTML 图像是通过 <img> 标签进行定义的。<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址,通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。。
定义图像的语法是：<img src="url" />如：
	<img src="w3school.jpg" width="104" height="142" />
替换文本属性（Alt）alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。<img src="boat.gif" alt="Big Boat">
背景图像：
    gif 和 jpg 文件均可用作 HTML 背景。
	如果图像小于页面，图像会进行重复。<body background="/i/eg_background.jpg">
文字与图片对齐：
	 align="bottom"；align="middle" ；align="top" bottom 对齐方式是默认的对齐方式。
    align ="left"带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
    align ="right"带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
创建图像映射：
img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。	
如：
    <img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

HTML 水平线

HTML 水平线通过<hr /> 标签在创建。
    <hr />

HTML 注释

HTML 注释

HTML 折行

HTML 折行（换行）是通过<br /> 标签定义的，它没有结束标签。<br>和<br/>功能一样，<br> 在所有浏览器中的显示都没有问题，但使用 <br /> 也是更长远的保障。
    <p>This is<br />a para<br />graph with line breaksp>
浏览器会自动地在段落的前后添加空行,使用空的段落标记 <p>p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！

HTML 短引用

HTML 通过<q> 用于短的引用浏览器通常会为 <q> 元素包围引号。
    <p>WWF 的目标是：<q>构建人与自然和谐共存的世界。q>p>

HTML长引用

HTML 通过<blockquote>用于长引用   
	<blockquote>
	这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
	blockquote>
使用 blockquote 元素的话，浏览器会插入换行缩进处理和外边距，而 q 元素不会有任何特殊的呈现

HTML长引用

HTML 通过<abbr>缩写或首字母缩略语，对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。
    <abbr title="World Health Organization">WHOabbr>

HTML 定义

HTML 通过<dfn>定义项目或缩写的定义
    1. 如果设置了 <dfn> 元素的 title 属性，则定义项目：
    <p>The <dfn title="World Health Organization">WHOdfn> was founded in 1948.p>
    2. 如果 <dfn> 元素包含具有标题的 <abbr> 元素，则 title 定义项目：
    <p>The<dfn><abbr title="World Health Organization">WHOabbr>dfn>
was founded in 1948.p>
    上两者结果：The WHO was founded in 1948.
    3.否则，<dfn> 文本内容即是项目，并且父元素包含定义。
    <p>The<dfn>WHOdfn> World Health Organization was founded in 1948p>
	The WHO World Health Organization was founded in 1948.
    如果您希望简而化之，请使用第一条，或使用 <abbr> 代替。

HTML地址

 HTML 通过<address>联系信息，此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。  
    <address>
	Written by Jon Doe.<br> 
	Visit us at:<br>
	Example.com<br>
	Box 564, Disneyland<br>
	USA
	address>

HTML著作标题

HTML 通过<cite>用于著作标题，浏览器通常会以斜体显示 <cite> 元素。
    <p><cite>The Screamcite> by Edward Munch. Painted in 1893.p>

HTML双向重写

HTML 通过<bdo>用于双向重写（bi-directional override）文字方向反转
	<bdo dir="rtl">Here is some Hebrew textbdo>

HTML链接

HTML 通过==标签在中创建链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。有两种使用== 标签的方式：1.通过使用 href 属性 - 创建指向另一个文档的链接2.通过使用 name 属性 - 创建文档内的书签

<a href="url">Link texta>
href 属性规定链接的目标。开始标签和结束标签之间的文字被作为超级链接来显示。
    target="_blank"可以定义在新窗口打开文档
name 属性规定锚（anchor）的名称。
1.您可以使用 name 属性创建 HTML 页面中的书签。
2.书签不会以任何特殊方式显示，它对读者是不可见的。
3.当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
4.命名锚的语法：
	<a name="label">锚（显示在页面上的文本）a>
提示：锚的名称可以是任何你喜欢的名字。
提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。
    首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

<a name="tips">基本的注意事项 - 有用的提示a>
然后，我们在同一个文档中创建指向该锚的链接：

<a href="#tips">有用的提示a>
您也可以在其他页面中创建指向该锚的链接：

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示a>
在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。
    注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"。
提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。
提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。


| 标签   | 描述                         |
| :----- | :--------------------------- |
|   | 定义图像。                   |
|   | 定义图像地图。               |
|  | 定义图像地图中的可点击区域。 |

HTML 表格

HTML 通过

创建表格每个表格由 table 标签开始。每个表格行由 tr 标签开始。每个表格数据由 td 标签开始。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table>
<h4>两行三列：h4>
<table border="1">
<tr>
  <td>100td>
  <td>200td>
  <td>300td>
tr>
<tr>
  <td>400td>
  <td>500td>
  <td>600td>
tr>
table>


没有边框: border=“0”
带有普通的边框：border=“1”
带有粗的边框：border=“8”
带有很粗的边框：border=“15”
表格中的空单元格:
在空单元格中添加一个空格占位符，就可以将边框显示出来。
<td> td>


表格的表头使用 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：
<tr>
<th>Headingth>
<th>Another Headingth>
tr>


带有标题的表格
<caption>我的标题caption>


横跨两列的单元格：
<th colspan="2">电话th>


横跨两行的单元格：
 <th rowspan="2">电话th>


单元格边距（cellpadding)：
cellpadding=“10”
单元格间距（cellspacing)
cellspacing=“10”
框架（frame）属性：
frame=“box”，框着
frame=“above”，上线
frame=“below”，下线
frame=“hsides”，上下线
frame=“vsides”，左右线
向表格添加背景颜色或者背景图像
<h4>背景颜色：h4>
<table border="1" 
bgcolor="red">
<tr>
  <td>Firsttd>
  <td>Rowtd>
tr>   
<tr>
  <td>Secondtd>
  <td>Rowtd>
tr>
table>

<h4>背景图像：h4>
<table border="1" 
background="/i/eg_bg_07.gif">
<tr>
  <td>Firsttd>
  <td>Rowtd>
tr>   
<tr>
  <td>Secondtd>
  <td>Rowtd>
tr>
table>



向表格单元添加背景颜色或者背景图片
<html>

<body>

<h4>单元背景：h4>  
<table border="1">
<tr>
  <td bgcolor="red">Firsttd>
  <td>Rowtd>
tr>   
<tr>
  <td 
  background="/i/eg_bg_07.gif">
  Secondtd>
  <td>Rowtd>
tr>
table>

body>
html>


属性(少用或者不用）:
    <h1 align="center"> 拥有居中排列的附加信息
    <body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
	<table border="1"> 拥有关于表格边框的附加信息。
	<p style="background-color:PowderBlue；font-size:30px;font-family:times;color:green">This text is 30 pixels highp>拥有字体，颜色，背景颜色等
        


在表格单元中排列内容：
<html>

<body>

<table width="400" border="1">
 <tr>
  <th align="left">消费项目....th>
  <th align="right">一月th>
  <th align="right">二月th>
 tr>
 <tr>
  <td align="left">衣服td>
  <td align="right">$241.10td>
  <td align="right">$50.20td>
 tr>
 <tr>
  <td align="left"

                    
                

        
你可能感兴趣的:(html5)

        

            

                
    
                    
  • 2025蛇年喜庆HTML5代码
                        学习&实践爱好者
HTML5与CSS3JavaScrip技术编程实践系列html5前端html
                        
    2025蛇年喜庆HTML5代码以下是一个简单的HTML5+CSS+JavaScript代码示例，用于庆祝2025年蛇年。先看效果图：源码如下：2025年蛇年快乐！body{font-family:'Arial',sans-serif;background-color:#0a0a23;/*深蓝色背景*/color:#ffffff;/*白色文字*/text-align:center;margin:0;
    
                    
    • 
                    
  • pdfjs转图片_PDF转图片，在线PDF转JPG/PNG
                        诡道荒行
pdfjs转图片
                        
    原理使用pdf.js预览图片，pdf.js将pdf通过canvas将每一页渲染出来，然后我们通过canvas的toDataURL方法保存为jpg或png格式。pdf.js是Mozilla开源的一个js库，无需任何本地支持就可以在浏览器上显示pdf文档。唯一的要求就是浏览器必须支持HTML5。依赖需要pdf.min.js和pdf.worker.min.js两个js文件全部代码实现pdfjsLib.G
    
                    
    • 
                    
  • pdfjs转图片_PDF转图片，PDF转JPG/PNG，完全由JS实现-阿里云开发者社区
                        陈紫璇
pdfjs转图片
                        
    原理使用pdf.js预览图片，pdf.js将pdf通过canvas将每一页渲染出来，然后我们通过canvas的toDataURL方法保存为jpg或png格式。pdf.js是Mozilla开源的一个js库，无需任何本地支持就可以在浏览器上显示pdf文档。唯一的要求就是浏览器必须支持HTML5。依赖需要pdf.min.js和pdf.worker.min.js两个js文件全部代码实现pdfjsLib.G
    
                    
    • 
                    
  • html5 h265播放器,PC端播放H265
                        健康和谐男哥
html5h265播放器
                        
    说明需要在PC端浏览器(Chrome)中播放直播视频，视频格式有H264/H265。有不少三方库可以实现。通过video.js(支持H264，不支持H265)videojs-contrib-hlsembedVideo.jsExampleEmbeddata-setup='{}'>参考地址：通过hls.js(支持H264，不支持H265)pcplaym3u8(hlsjs)video{width:600
    
                    
    • 
                    
  • html5 webgl stl,新闻|Babylon.js|Babylon.js教程|Babylon.js开发|Babylon.js制作|webgl|three.js|html53D可视化开发...
                        miao君
html5webglstl
                        
    4.0.0主要更新添加了对ammo.js的支持，作为物理插件(复合对象，电机，关节)(TrevorDev)Added在ammo.js物理插件中增加了对3D软体，2D布和1D绳索的软体的支持(JohnK)添加了AmmoJSPlugin场景文件加载器(MackeyK24)添加了对WebXR支持(TrevorDev)添加customAnimationFrameRequester以允许会话挂钩到引擎的渲染
    
                    
    • 
                    
  • 怎么创建一个能在线测试php的html5网页？
                        很酷的站长
编程记录html5专题php专题phphtml5开发语言
                        
    代码示例：一、搭建服务器环境首先，你需要在服务器上搭建PHP运行环境。如果你使用的是Linux服务器，可以使用Apache或Nginx作为Web服务器，并安装PHP解释器。对于Windows服务器，可以使用WAMP（Windows,Apache,MySQL,PHP）或XAMPP等集成环境。二、创建HTML表单页面创建一个HTML页面，包含一个表单，用户可以在表单中输入PHP代码，将该代码提交到服务
    
                    
    • 
                    
  • 一个简单的html5导航页面
                        很酷的站长
html5专题html5前端html
                        
    一个简单的HTML5导航页面的示例代码：html简单导航页面/*样式部分*/body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#f4f4f4;}nav{background-color:#333;overflow:hidden;}nava{float:left;display:block;color:whit
    
                    
    • 
                    
  • 一个简单的自适应html5导航模板
                        很酷的站长
html5专题csscss3前端
                        
    一个简单的HTML导航模板示例，它包含基本的导航栏结构，同时使用了CSS进行样式美化，让导航栏看起来更美观。另外，还添加了一些JavaScript代码，用于在移动端实现导航菜单的展开和收起功能。PHP网址导航模板body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#f4f4f4;}header{backgrou
    
                    
    • 
                    
  • 第5节课：HTML5 新标签——构建更智能的网页结构
                        学问小小谢
HTML学习html5前端学习
                        
    目录语义化标记的重要性新标签详解````````````实践：使用HTML5新标签构建网页结语随着HTML5的推出，网页开发者们获得了一套新的强大工具——语义标签。这些标签不仅帮助我们更好地组织内容，还使得网页更易于搜索引擎优化（SEO）和辅助技术访问。本节课将深入探讨HTML5中的新语义标签，包括、、、、和，并强调使用这些标签进行语义化标记的重要性。语义化标记的重要性在HTML5之前，我们通常使
    
                    
    • 
                    
  • 疯狂的 Web 应用开源项目
                        一个生命
Web开发Cookieweb开源项目应用
                        
    原文作者：陈皓原文链接：http://coolshell.cn/articles/5132.html#more-5132文章来源：Best“mustknow”opensourcestobuildthenewWeb。个人感觉这个收集贴收集成相当的全。学习HTML5编程和设计★HTML5Rocks:MajorFeatureGroups的学习HTML5的资源(HTML5演示,教程).源码很不错的HTML
    
                    
    • 
                    
  • Phaser引擎开发：Phaser基础入门_Phaser引擎概述v1
                        chenlz2007
游戏开发2html5前端html游戏ui
                        
    Phaser引擎概述Phaser是一个开源的HTML5游戏开发框架，广泛用于创建2D游戏。它基于Pixi.js，一个高性能的2D渲染引擎，旨在简化游戏开发过程，使开发者能够专注于游戏逻辑和创意。Phaser支持多种游戏类型，但特别适合用于开发动作游戏，因为它提供了丰富的功能和灵活的API来处理游戏中的动画、物理、输入等关键要素。什么是Phaser引擎？Phaser引擎是一个使用JavaScript
    
                    
    • 
                    
  • Phaser引擎开发：Phaser基础入门_Phaser引擎概述
                        chenlz2007
游戏开发2html5游戏音视频前端html
                        
    Phaser引擎概述什么是Phaser引擎Phaser是一个免费的、开源的、基于Web的2D游戏开发引擎，使用JavaScript和HTML5Canvas或WebGL技术。Phaser的目的是让游戏开发者能够轻松地创建高性能的2D游戏，适用于桌面和移动平台。Phaser支持多种游戏开发需求，包括精灵管理、物理引擎、动画、输入处理、音频和视频处理等。Phaser的历史Phaser由RichardDa
    
                    
    • 
                    
  • html,css,js的粒子效果
                        python算法(魔法师版)
htmlcssjavascript
                        
    这段代码实现了一个基于HTML5Canvas的高级粒子效果，用户可以通过鼠标与粒子进行交互。下面是对代码的详细解析：HTML部分使用声明文档类型。标签内包含了整个网页的内容。部分定义了网页的标题（"高级粒子效果"）和一些基本样式，如设置页面无边距、隐藏滚动条以及黑色背景。包含一个元素用于绘图。CSS部分设置body的边距为0，并隐藏溢出内容，同时设置背景颜色为黑色。canvas块级显示，确保其占据
    
                    
    • 
                    
  • Babylon.js WebGL与性能优化
                        天涯学馆
WebGL3D图形图像技术javascriptwebgl3dBabylon.jsThreejs
                        
    目录WebGL基础与Babylon.js底层理解性能监控与优化技巧WebGL基础与Babylon.js底层理解WebGL（WebGraphicsLibrary）是JavaScriptAPI，用于在网页上进行硬件加速的3D图形渲染。它是OpenGL的一个子集，由Web浏览器支持，无需插件。WebGL通过JavaScript与HTML5元素结合，使得开发者能够在浏览器中创建复杂的3D场景。Babylo
    
                    
    • 
                    
  • XML 语法
                        凉风细细
xml
                        
    XML的语法规则很简单，且很有逻辑。这些规则很容易学习，也很容易使用。XML声明XML声明文件的可选部分，如果存在需要放在文档的第一行，如下所示：以上实例包含XML版本（version="1.0"），甚至包含字符编码（encoding="utf-8"）。UTF-8也是HTML5,CSS,JavaScript,PHP,和SQL的默认编码。XML文档必须有根元素XML必须包含根元素，它是所有其他元素的
    
                    
    • 
                    
  • 使用HTML5 Canvas 实现呼吸粒子球动画效果的原理
                        软件工程师文艺
前端html5前端htmljavascript
                        
    在网页开发领域，动画效果能够极大地提升用户体验，让页面变得更加生动有趣。今天，我们深入剖析一个基于HTML5Canvas的3D粒子动画——呼吸粒子球。通过详细解读其代码实现，我们将全面了解如何运用HTML5的强大功能构建出如此迷人的视觉效果。效果展示：用HTML5Canvas和JavaScript实现粒子恒星脉动特效1，整体架构整个呼吸粒子球效果是HTML、CSS和JavaScript协同工作的成
    
                    
    • 
                    
  • 基于 Node.js 的天气查询系统实现(附源码）
                        Kasper0121
node.js
                        
    项目概述这是一个基于Node.js的全栈应用，前端使用原生JavaScript和CSS，后端使用Express框架，通过调用第三方天气API实现天气数据的获取和展示。主要功能默认显示多个主要城市的天气信息支持城市天气搜索响应式布局设计深色主题界面优雅的加载动画技术栈后端：Node.js+Express前端：HTML5+CSS3+JavaScriptHTTP客户端：AxiosAPI：天气API(v1
    
                    
    • 
                    
  • 探秘 commits-graph：优雅的Git提交图绘制工具
                        农爱宜

                        
    探秘commits-graph：优雅的Git提交图绘制工具去发现同类优质开源项目:https://gitcode.com/在软件开发中，Git不仅仅是一个版本控制系统，它还是我们代码历程的一种视觉表达。每次提交都如同历史的一笔，记录着开发者的心血和智慧。而今天，我们要向您推荐一个非常出色的开源项目——commits-graph，这是一个基于HTML5Canvas和jQuery的Git提交图形小部件
    
                    
    • 
                    
  • ssm基于HTML5的红酒信息分享系统
                        Q_2743785109
计算机毕业设计html5前端html
                        
    SSM基于HTML5的红酒信息分享系统是一个专注于红酒领域的综合性信息平台，旨在为红酒爱好者、从业者以及普通消费者提供一个便捷的交流与获取红酒相关信息的空间。一、系统背景与意义随着人们生活水平的提高和消费观念的转变，红酒作为一种高雅的饮品，越来越受到消费者的青睐。然而，红酒市场的信息不对称和消费者缺乏专业知识等问题限制了红酒文化的传播和消费者的购买决策。因此，开发一个基于SSM框架和HTML5技术
    
                    
    • 
                    
  • HTML＜center＞标签
                        新生派
html前端
                        
    HTML5不支持。标签在HTML4中用于使文本居中对齐。用什么来代替呢？例子居中对齐文本（使用CSS）：h1{text-align:center;}p{text-align:center;}div{text-align:center;}ThisisaheadingThisisaparagraph.Thisisadiv.
    
                    
    • 
                    
  • 【Springboot】——响应与分层解耦架构
                        Y小夜
架构springboot后端javaspring
                        
    博主现有专栏：C51单片机（STC89C516），c语言，c++，离散数学，算法设计与分析，数据结构，Python，Java基础，MySQL，linux，基于HTML5的网页设计及应用，Rust（官方文档重点总结），jQuery，前端vue.js，Javaweb开发，设计模式、Python机器学习、Springboot等主页链接：Y小夜-CSDN博客目录响应响应数据✨@ResponseBody✨G
    
                    
    • 
                    
  • uniapps使用HTML5的io模块拷贝文件目录
                        PABL01
前端html5uniappsqlite
                        
    最近在集成sqlite到uniapp的过程中，因为要将sqlite数据库预加载，所以需要使用HTML5的plus.io模块。使用过程中遇到了许多问题，比如文件路径总是解析不到等。尤其是应用私有文档目录’_doc’。根据官方文档：为了安全管理应用的资源目录，规范对文件系统的操作，5+API在系统应用目录的基础设计了应用沙盒目录，分为私有目录和公共目录两种类型，私有目录仅应用自身可以访问，公共目录在多
    
                    
    • 
                    
  • 圈子系统如何实现生成海报功能，前后端协同工作
                        
前端
                        
    圈子系统通常指的是社交平台或论坛中的一种功能模块，用于创建和管理兴趣小组或讨论群组。以下是对圈子系统的详细解释：一、前端实现前端主要负责海报的生成和展示。这通常通过HTML5的CanvasAPI或类似的图形库来实现。创建Canvas元素：在HTML中创建一个Canvas元素，用于绘制海报。获取Canvas上下文：使用getContext('2d')方法获取Canvas的2D绘图上下文，以便进行绘制
    
                    
    • 
                    
  • 通信协议—WebSocket
                        啥也学不会a
websocket网络协议网络c#服务器
                        
    一、WebSocket编程概念1.1什么是WebSocketWebSocket是一种全双工通信协议，允许在客户端（通常是浏览器）和服务器之间建立持久连接，以实现实时的双向通信。它是HTML5标准的一部分，相比传统的HTTP请求，WebSocket提供了更低的延迟和更高的性能，特别适合于需要实时更新数据的应用程序，如在线聊天、实时监控、游戏等1.2WebSocket的基本使用步骤1.2.1）服务器端
    
                    
    • 
                    
  • HTML＜!DOCTYPE＞声明
                        新生派
html前端javascript
                        
    例子TitleofthedocumentThecontentofthedocument......定义和用法所有HTML文档都必须以声明开始。声明不是HTML标签。它是向浏览器提供的有关预期文档类型的“信息”。在HTML5中，声明很简单：浏览器支持较旧的HTML文档在较旧的文档（HTML4或XHTML）中，声明更为复杂，因为声明必须引用DTD（文档类型定义）。HTML4.01：XHTML1.1：提
    
                    
    • 
                    
  • 用html制作粒子线条,html5 canvas跟随鼠标粒子线条动画特效
                        狗雄
用html制作粒子线条
                        
    特效描述：html5canvas跟随鼠标粒子线条动画特效，html5基于canvas制作鼠标移动粒子线条动画代码结构1.HTML代码//Oneofmyfirstexperiments,woop!:DvarSCREEN_WIDTH=window.innerWidth;varSCREEN_HEIGHT=window.innerHeight;varRADIUS=70;varRADIUS_SCALE=1;
    
                    
    • 
                    
  • 基于 HTML5 Canvas 制作一个精美的 2048 小游戏--day2
                        无限大.
前端代码实现2048html5前端html
                        
    为了使2048游戏的设计更加美观和用户友好，我们可以进行以下几项优化：改善颜色方案：使用更温馨的颜色组合。添加动画效果：为方块的移动和合并添加渐变效果。优化分数显示：在分数增加时使用动画效果。以下是改进后的代码示例：1.CSS样式（style.css）body{display:flex;justify-content:center;align-items:center;height:100vh;b
    
                    
    • 
                    
  • java3d酷眩贪吃蛇下载,100行JS实现HTML5的3D贪吃蛇游戏
                        weixin_39983554
java3d酷眩贪吃蛇下载
                        
    js1k.com收集了小于1k的javascript小例子，里面有很多很炫很酷的游戏和特效，今年规则又增加了新花样，传统的classic类型基础上又增加了WebGL类型，以及允许增加到2K的++类型，多次想尝试提交个小游戏但总无法写出让自己满意还能控制在这么小的字节范围。自己写不出来，站在巨人肩膀总是有机会吧，折腾了一番站在Hightopo的肩膀上搞了个3D贪吃蛇游戏，算了算JS代码还只有90来行
    
                    
    • 
                    
  • html5贪吃蛇特点,简易html5贪吃蛇
                        雪小梨
html5贪吃蛇特点
                        
    1.[图片]E6~0%QPA46ER843UQJ$0Z`H.jpg2.[文件]snake.htmlThesnakegamefunctionlog(msg){console.log(msg);}Yourbrowsercannotsupporthtml5.this.onkeydown=function(e){varcode=e.keyCode;if(code==37)changeMove(3);if(
    
                    
    • 
                    
  • Spring Boot入门(19)：超酷炫！Spring Boot + Thymeleaf 带你玩转 Web 页面开发！
                        喵手
Springbootspringboot前端后端
                        
    前言在Web开发中，不管是MVC框架还是前后端分离，都需要使用模板引擎来渲染生成页面。Thymeleaf是一款非常优秀的模板引擎，它以自然的方式处理模板，支持HTML5标签，同时兼容HTML4。本文将介绍如何使用SpringBoot框架，整合Thymeleaf模板引擎来开发Web页面。摘要本文将分为以下几个部分:新建SpringBoot项目配置Thymeleaf模板引擎编写HTML页面模板引擎使用
    
                    
    • 
                                
  • 安装数据库首次应用
                                    Array_06
javaoraclesql
                                    
    可是为什么再一次失败之后就变成直接跳过那个要求 
enter full pathname of java.exe的界面 
 
 
这个java.exe是你的Oracle 11g安装目录中例如：【F:\app\chen\product\11.2.0\dbhome_1\jdk\jre\bin】下的java.exe 。不是你的电脑安装的java jdk下的java.exe！ 
注意第一次，使用SQL D
    
                                
    • 
                                
  • Weblogic Server Console密码修改和遗忘解决方法
                                    bijian1013
Welogic
                                    
            在工作中一同事将Weblogic的console的密码忘记了，通过网上查询资料解决，实践整理了一下。 
一.修改Console密码 
        打开weblogic控制台，安全领域 --> myrealm -->&n
    
                                
    • 
                                
  • IllegalStateException: Cannot forward a response that is already committed
                                    Cwind
javaServlets
                                    
    对于初学者来说，一个常见的误解是：当调用 forward() 或者 sendRedirect() 时控制流将会自动跳出原函数。标题所示错误通常是基于此误解而引起的。   示例代码：   
protected void doPost() {
    if (someCondition) {
        sendRedirect();
    }
    forward(); // Thi
    
                                
    • 
                                
  • 基于流的装饰设计模式
                                    木zi_鸣
设计模式
                                    
    当想要对已有类的对象进行功能增强时，可以定义一个类，将已有对象传入，基于已有的功能，并提供加强功能。 
自定义的类成为装饰类 
 
模仿BufferedReader，对Reader进行包装，体现装饰设计模式 
 
装饰类通常会通过构造方法接受被装饰的对象，并基于被装饰的对象功能，提供更强的功能。 
装饰模式比继承灵活，避免继承臃肿，降低了类与类之间的关系 
 
装饰类因为增强已有对象，具备的功能该
    
                                
    • 
                                
  • Linux中的uniq命令
                                    被触发
linux
                                    
    Linux命令uniq的作用是过滤重复部分显示文件内容，这个命令读取输入文件，并比较相邻的行。在正常情 况下，第二个及以后更多个重复行将被删去，行比较是根据所用字符集的排序序列进行的。该命令加工后的结果写到输出文件中。输入文件和输出文件必须不同。如 果输入文件用“- ”表示，则从标准输入读取。 
AD： 
uniq [选项] 文件 
说明：这个命令读取输入文件，并比较相邻的行。在正常情况下，第二个
    
                                
    • 
                                
  • 正则表达式Pattern
                                    肆无忌惮_
Pattern
                                    
    正则表达式是符合一定规则的表达式，用来专门操作字符串，对字符创进行匹配，切割，替换，获取。 
  
例如，我们需要对QQ号码格式进行检验 
规则是长度6~12位  不能0开头  只能是数字，我们可以一位一位进行比较，利用parseLong进行判断，或者是用正则表达式来匹配[1-9][0-9]{4,14} 或者 [1-9]\d{4,14} 
&nbs
    
                                
    • 
                                
  • Oracle高级查询之OVER (PARTITION BY ..)
                                    知了ing
oraclesql
                                    
    一、rank()/dense_rank() over(partition by ...order by ...) 
 
现在客户有这样一个需求，查询每个部门工资最高的雇员的信息，相信有一定oracle应用知识的同学都能写出下面的SQL语句： 
 
 select e.ename, e.job, e.sal, e.deptno  
  from scott.emp e,  
       (se
    
                                
    • 
                                
  • Python调试
                                    矮蛋蛋
pythonpdb
                                    
    原文地址： 
http://blog.csdn.net/xuyuefei1988/article/details/19399137 
1、下面网上收罗的资料初学者应该够用了，但对比IBM的Python 代码调试技巧： 
 
IBM：包括 pdb 模块、利用 PyDev 和 Eclipse 集成进行调试、PyCharm 以及 Debug 日志进行调试： 
 
http://www.ibm.com/d
    
                                
    • 
                                
  • webservice传递自定义对象时函数为空，以及boolean不对应的问题
                                    alleni123
webservice
                                    
    今天在客户端调用方法 
NodeStatus status=iservice.getNodeStatus(). 
 
结果NodeStatus的属性都是null。 
 
进行debug之后，发现服务器端返回的确实是有值的对象。 
 
后来发现原来是因为在客户端，NodeStatus的setter全部被我删除了。 
本来是因为逻辑上不需要在客户端使用setter， 结果改了之后竟然不能获取带属性值的
    
                                
    • 
                                
  • java如何干掉指针，又如何巧妙的通过引用来操作指针————>说的就是java指针
                                    百合不是茶

                                    
    C语言的强大在于可以直接操作指针的地址，通过改变指针的地址指向来达到更改地址的目的,又是由于c语言的指针过于强大，初学者很难掌握， java的出现解决了c，c++中指针的问题 java将指针封装在底层，开发人员是不能够去操作指针的地址，但是可以通过引用来间接的操作： 
  
定义一个指针p来指向a的地址（&是地址符号）： 
        
    
                                
    • 
                                
  • Eclipse打不开，提示“An error has occurred.See the log file ***/.log”
                                    bijian1013
eclipse
                                    
    打开eclipse工作目录的\.metadata\.log文件，发现如下错误： 
 
!ENTRY org.eclipse.osgi 4 0 2012-09-10 09:28:57.139 
!MESSAGE Application error 
!STACK 1 
java.lang.NoClassDefFoundError: org/eclipse/core/resources/IContai
    
                                
    • 
                                
  • spring aop实例annotation方法实现
                                    bijian1013
javaspringAOPannotation
                                    
            在spring aop实例中我们通过配置xml文件来实现AOP，这里学习使用annotation来实现，使用annotation其实就是指明具体的aspect,pointcut和advice。1.申明一个切面(用一个类来实现)在这个切面里,包括了advice和pointcut 
AdviceMethods.jav
    
                                
    • 
                                
  • [Velocity一]Velocity语法基础入门
                                    bit1129
velocity
                                    
    用户和开发人员参考文档 
http://velocity.apache.org/engine/releases/velocity-1.7/developer-guide.html 
  注释 
1.行级注释## 
2.多行注释#*  *# 
  变量定义 
使用$开头的字符串是变量定义，例如$var1, $var2, 
  赋值 
使用#set为变量赋值，例
    
                                
    • 
                                
  • 【Kafka十一】关于Kafka的副本管理
                                    bit1129
kafka
                                    
    1. 关于request.required.acks 
  
request.required.acks控制者Producer写请求的什么时候可以确认写成功，默认是0， 
0表示即不进行确认即返回。 
1表示Leader写成功即返回，此时还没有进行写数据同步到其它Follower Partition中 
-1表示根据指定的最少Partition确认后才返回，这个在 
  
Th
    
                                
    • 
                                
  • lua统计nginx内部变量数据
                                    ronin47
lua nginx　 统计
                                    
    server {
    listen 80;
    server_name photo.domain.com;
    location /{set $str $uri;
        content_by_lua '
            local url = ngx.var.uri
            local res = ngx.location.capture(
    
                                
    • 
                                
  • java-11.二叉树中节点的最大距离
                                    bylijinnan
java
                                    
    
import java.util.ArrayList;
import java.util.List;


public class MaxLenInBinTree {

	/*
	 a.			1
	 		   /  \
	 		  2    3
	 		 / \  / \
	 		4   5 6  7
	 	max=4	pass "root"
	 
    
                                
    • 
                                
  • Netty源码学习-ReadTimeoutHandler
                                    bylijinnan
javanetty
                                    
     
ReadTimeoutHandler的实现思路： 
开启一个定时任务，如果在指定时间内没有接收到消息，则抛出ReadTimeoutException 
这个异常的捕获，在开发中，交给跟在ReadTimeoutHandler后面的ChannelHandler，例如 
 
 

private final ChannelHandler timeoutHandler =
	new ReadTim
    
                                
    • 
                                
  • jquery验证上传文件样式及大小(好用)
                                    cngolon
文件上传jquery验证
                                    
    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="jquery1.8/jquery-1.8.0.
    
                                
    • 
                                
  • 浏览器兼容【转】
                                    cuishikuan
css浏览器IE
                                    
    浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同 
 
问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。 
 
碰到频率:100% 
 
解决方案：CSS里    *{margin:0;padding:0;} 
 
备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设
    
                                
    • 
                                
  • Shell特殊变量：Shell $0, $#, $*, $@, $?, $$和命令行参数
                                    daizj
shell$#$?特殊变量
                                    
    前面已经讲到，变量名只能包含数字、字母和下划线，因为某些包含其他字符的变量有特殊含义，这样的变量被称为特殊变量。例如，$ 表示当前Shell进程的ID，即pid，看下面的代码：   
 
  $echo $$  
   
运行结果 
29949 
   特殊变量列表   变量 含义   $0 当前脚本的文件名   $n 传递给脚本或函数的参数。n 是一个数字，表示第几个参数。例如，第一个
    
                                
    • 
                                
  • 程序设计KISS 原则-------KEEP IT SIMPLE, STUPID!
                                    dcj3sjt126com
unix
                                    
    翻到一本书，讲到编程一般原则是kiss：Keep It Simple, Stupid.对这个原则深有体会，其实不仅编程如此，而且系统架构也是如此。 
 KEEP IT SIMPLE, STUPID! 编写只做一件事情，并且要做好的程序；编写可以在一起工作的程序，编写处理文本流的程序，因为这是通用的接口。这就是UNIX哲学.所有的哲学真 正的浓缩为一个铁一样的定律，高明的工程师的神圣的“KISS 原
    
                                
    • 
                                
  • android Activity间List传值
                                    dcj3sjt126com
Activity
                                    
    第一个Activity： 
import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import a
    
                                
    • 
                                
  • tomcat 设置java虚拟机内存
                                    eksliang
tomcat 内存设置
                                    
    转载请出自出处：http://eksliang.iteye.com/blog/2117772 
http://eksliang.iteye.com/ 
常见的内存溢出有以下两种: 
java.lang.OutOfMemoryError: PermGen space  
java.lang.OutOfMemoryError: Java heap space 
  
------------
    
                                
    • 
                                
  • Android 数据库事务处理
                                    gqdy365
android
                                    
    使用SQLiteDatabase的beginTransaction()方法可以开启一个事务，程序执行到endTransaction() 方法时会检查事务的标志是否为成功，如果程序执行到endTransaction()之前调用了setTransactionSuccessful() 方法设置事务的标志为成功则提交事务，如果没有调用setTransactionSuccessful() 方法则回滚事务。事
    
                                
    • 
                                
  • Java 打开浏览器
                                    hw1287789687
打开网址open浏览器open browser打开url打开浏览器
                                    
    使用java 语言如何打开浏览器呢? 
我们先研究下在cmd窗口中,如何打开网址 
使用IE 打开 
D:\software\bin>cmd /c start iexplore http://hw1287789687.iteye.com/blog/2153709 
使用火狐打开 
D:\software\bin>cmd /c start firefox http://hw1287789
    
                                
    • 
                                
  • ReplaceGoogleCDN：将 Google CDN 替换为国内的 Chrome 插件
                                    justjavac
chromeGooglegoogle apichrome插件
                                    
    Chrome Web Store 安装地址： https://chrome.google.com/webstore/detail/replace-google-cdn/kpampjmfiopfpkkepbllemkibefkiice 
 
 由于众所周知的原因，只需替换一个域名就可以继续使用Google提供的前端公共库了。 同样，通过script标记引用这些资源，让网站访问速度瞬间提速吧
    
                                
    • 
                                
  • 进程VS.线程
                                    m635674608
线程
                                    
    资料来源： 
http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/001397567993007df355a3394da48f0bf14960f0c78753f000 1、Apache最早就是采用多进程模式 2、IIS服务器默认采用多线程模式 3、多进程优缺点 优点： 
多进程模式最大
    
                                
    • 
                                
  • Linux下安装MemCached
                                    字符串
memcached
                                    
    前提准备：1. MemCached目前最新版本为：1.4.22，可以从官网下载到。2. MemCached依赖libevent，因此在安装MemCached之前需要先安装libevent。2.1 运行下面命令，查看系统是否已安装libevent。[root@SecurityCheck ~]# rpm -qa|grep libevent libevent-headers-1.4.13-4.el6.n
    
                                
    • 
                                
  • java设计模式之--jdk动态代理（实现aop编程）
                                    Supanccy2013
javaDAO设计模式AOP
                                    
        与静态代理类对照的是动态代理类，动态代理类的字节码在程序运行时由Java反射机制动态生成，无需程序员手工编写它的源代码。动态代理类不仅简化了编程工作，而且提高了软件系统的可扩展性，因为Java 反射机制可以生成任意类型的动态代理类。java.lang.reflect 包中的Proxy类和InvocationHandler 接口提供了生成动态代理类的能力。 
&
    
                                
    • 
                                
  • Spring 4.2新特性-对java8默认方法(default method)定义Bean的支持
                                    wiselyman
spring 4
                                    
    2.1 默认方法(default method) 
 
 java8引入了一个default medthod; 
 用来扩展已有的接口,在对已有接口的使用不产生任何影响的情况下,添加扩展 
 使用default关键字 
 Spring 4.2支持加载在默认方法里声明的bean 
  
2.2 
 
 将要被声明成bean的类 
  
public class DemoService {
    
    
                                
    •