一本静哥
一本静哥

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)

        

            

                
    
                    
  • 震惊！DOM变化监控神器MutationObserver，前端开发必知的隐藏武器！
                        coding随想
JavaScript前端javascripthtml5
                        
    一、什么是MutationObserver？如果你是一个前端开发者，一定会遇到这样的场景：页面动态加载内容后，某些操作失效了。比如，你写了一个监听按钮点击的代码，但按钮是通过AJAX动态加载的，你的代码根本无法触发。这个时候，你就需要一个“监控哨兵”——MutationObserver，它能实时监听DOM树的变化，帮你捕获那些“暗中作祟”的节点变动。MutationObserver是HTML5引入
    
                    
    • 
                    
  • 11. HTML 中 DOCTYPE 的作用
                        yqcoder
前端面试-CSShtml前端
                        
    总结H5的声明HTML5的DOCTYPE声明HTML5中的声明用于告诉浏览器当前文档使用的是HTML5的文档类型。它必须是文档中的第一行内容（在任何HTML标签之前），以确保浏览器能够正确地解析和渲染页面。DOCTYPE的作用触发标准模式：DOCTYPE声明的主要作用是让浏览器以标准模式（StandardsMode）来解析和渲染页面，而不是以兼容模式（QuirksMode）。兼容性：在没有DOCT
    
                    
    • 
                    
  • 前端面试题
                        大大。
前端vue.jsjavascript
                        
    HTML5的新特性和CSS3的新特性引入了一系列语义化标签使文档结构更加清晰(header,nav,aside,article,footer,section)，多媒体支持video,audio，Canvas绘图div上下居中对齐的几种方式第一种：flex布局display:flex;justify-content:center;/*水平居中/align-items:center;/垂直居中/第二种
    
                    
    • 
                    
  • html5效果案例,10个优秀HTML5网站案例赏析
                        

                        
    随着Adobe的弃Flash转投HTML5，HTML5又开始吸引着大众的目光。与现在使用的HTML标记语言相比，HTML5有更多的标签和属性，使用更为灵活，功能更为强大。现在已经有很多前沿的HTML5网站开始使用HTML5，本文收集整理出了10个非常优秀的HTML5网站。那么，什么才是优秀的HTML5网站？因为HTML5还没有成为国际标准，旧的浏览器还无法支持HTML5，所以优秀的HTML5网站示
    
                    
    • 
                    
  • HTML5
                        Darling02zjh
html5前端html
                        
    HTML:和其他的语言一样也有基础的框架和快捷键。命名规则：后缀名是“.html”每个项目最上面都有是H5的声明，处于标签之前骨架：html标签：定义HTML文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其他元素要包裹在这个标签里面，标签限定了文档的开始点和结束点。...其他元素head标签：head标签用于文档的头部，文档的头部描述文档的各种属性和信息，包括文档的标题，在we
    
                    
    • 
                    
  • HTML5+JavaScript动画基础 完整版 中文pdf扫描版
                        不一样的女孩6

                        
    《HTML5+JavaScript动画基础》包括了基础知识、基础动画、高级动画、3D动画和其他技术5大部分，分别介绍了动画的基本概念、动画的JavaScript基础、动画中的三角学、渲染技术、速度向量和加速度、边界与摩擦力、用户交互：移动物体、缓动与弹动、碰撞检测、坐标旋转与斜面反弹、撞球物理、粒子与万有引力、正向运动学：让事物行走、反向运动学：拖曳与伸出、三维基础、三维线条与填充、背面剔除与三维
    
                    
    • 
                    
  • HTML5元素相关补充
                        QZ_orz_freedom
html5前端html
                        
    一.元素是HTML5的文档类型声明，它告诉浏览器当前页面是使用HTML5规范编写的，HTML5是最新的HTML版本，拥有更多的功能和优化，因此推荐在新的Web页面中使用它。在HTML文档中，声明通常是文档的第一行文档元数据元素描述指定用于一个文档中包含的所有相对URL的根URL。一份中只能有一个该元素。包含文档相关的配置信息（元数据），包括文档的标题、脚本和样式表等。指定当前文档与外部资源的关系。
    
                    
    • 
                    
  • HTML5：中如何触发按钮点击事件
                        Dy大叔
前端开发记录HTML5html
                        
    在HTML5中，可以通过多种方式触发按钮点击事件，包括使用JavaScript原生方法、使用jQuery库和使用HTML表单和提交按钮，根据项目需求和技术栈选择合适的方法来实现按钮点击事件的触发。使用JavaScript原生方法在HTML5中，可以使用JavaScript的addEventListener方法为按钮添加点击事件，需要在HTML文件中创建一个按钮元素，并为其设置一个唯一的ID，在Ja
    
                    
    • 
                    
  • HTML5 新特性：MutationObserver 详解
                        索西引擎
#JavaScriptjavascript
                        
    一、概念与背景MutationObserver是HTML5引入的一个强大的JavaScriptAPI，它用于异步观察DOM树的变化。在MutationObserver出现之前，开发者若要监测DOM变化，常采用轮询（如使用setInterval不断检查DOM状态）或依赖DOM事件（如DOMNodeInserted、DOMNodeRemoved等）的方式。但轮询效率低下，频繁检查会消耗大量资源；而旧的
    
                    
    • 
                    
  • 【高中数学之函数】四种幂函数图线（二次、三次、开方、开立方）
                        土门子拉马努金
高中数学之函数高中数学函数
                        
    【图像】【代码】UNASSIGNED.centerlize{margin:0auto;border:0pxsolidred;width:1200px;height:600px;}如果看到这段文字说您的浏览器尚不支持HTML5Canvas，请更换浏览器再试.retval.max){retval.max=y;retval.max_x=cds[i].x;}if(yarr.length){index=in
    
                    
    • 
                    
  • 【QT进阶】Qt http编程之websocket的简单介绍
                        不吃~香菜
QT进阶qt开发语言websocket
                        
    往期回顾【QT进阶】Qthttp编程之用户登录注册功能实现-CSDN博客【QT进阶】Qthttp编程之json解析的简单介绍-CSDN博客【QT进阶】Qthttp编程之nlohmannjson库使用的简单介绍-CSDN博客【QT进阶】Qthttp编程之websocket的简单介绍一、什么是websocket1、简介websocket是HTML5中新增的一个协议，这个协议的出现，让客户端和服务器之前
    
                    
    • 
                    
  • 【HTML】＜script＞元素中的 defer 和 async 属性详解
                        

                        
    文章目录元素中的defer和async属性详解基本概念传统脚本加载defer属性async属性对比表格使用场景建议注意事项示例在HTML5中，元素有两个控制脚本加载和执行行为的属性：defer和async。这两个属性可以帮助开发者优化页面加载性能，特别是在处理外部脚本时。基本概念传统脚本加载没有使用任何属性的元素会阻塞HTML解析：浏览器遇到这个脚本时会暂停HTML解析下载并执行脚本执行完成后才继
    
                    
    • 
                    
  • 像素风格超级玛丽HTML游戏
                        

                        
    像素风格超级玛丽HTML游戏创建一个像素风格的HTML5小游戏，模仿超级玛丽的经典玩法。游戏包含移动、跳跃、收集金币、躲避敌人和到达终点等核心机制。设计思路使用纯HTML5Canvas实现游戏渲染像素风格美术设计(16x16像素元素)实现物理引擎(重力、碰撞检测)键盘控制移动和跳跃添加经典超级玛丽元素(砖块、水管、蘑菇敌人)下面是完整的实现代码：像素超级玛丽*{margin:0;padding:0
    
                    
    • 
                    
  • 像素风格坦克大战游戏
                        代码改变世界10086
游戏像素游戏游戏csscss3
                        
    像素风格坦克大战游戏下面我将实现一个基于HTML5Canvas的像素风格坦克大战游戏，玩法类似经典的FC坦克大战。设计思路使用像素风格渲染游戏元素玩家控制坦克移动和射击敌方AI坦克自动移动和攻击可破坏的砖墙和不可破坏的钢墙基地保护机制计分系统和生命值显示实现代码像素坦克大战*{margin:0;padding:0;box-sizing:border-box;font-family:'PressSt
    
                    
    • 
                    
  • canvas使用
                        CDwenhuohuo
canva可画
                        
    是HTML5引入的一个新标签，它首次出现在2004年的Safari浏览器中，由Apple提出，并在后来的HTML5标准中被正式采纳。IE8及以下❌不支持Canvas的基本用法-WebAPI|MDNvue3import{onMounted}from'vue';onMounted(()=>{constcanvas=document.getElementById('myCanvas');constctx
    
                    
    • 
                    
  • 通过Deepseek找工作
                        速易达网络
人工智能
                        
    推送的结果如下，对应的AI提示词在底部：计算机方向远程工作职位汇总整合全球远程技术岗位|支持全地域远程办公|涵盖开发、安全、云计算等方向覆盖方向：8+个技术领域薪资范围：¥10K-¥40K/月工作模式：100%远程远程技术职位列表职位名称技能要求经验要求薪资待遇工作模式WordPress开发工程师PHP,HTML5/CSS3,WordPress二次开发,SEO优化3年+1.4-1.6万/月全球远程
    
                    
    • 
                    
  • HTML制作一个介绍自己家乡的网站——贵州贵阳，排版整洁，内容丰富，主题鲜明
                        软件技术NINI
旅游htmlcss
                        
    一、‍网站题目旅游，当地特色，历史文化，特色小吃等网站的设计与制作。二、✍️网站描述‍静态网站的编写主要是用HTMLDIV+CSS等来完成页面的排版设计‍,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，
    
                    
    • 
                    
  • HTML5和SVG篝火动画实战：月亮下的野营炊烟效果
                        申增浩

                        
    本文还有配套的精品资源，点击获取简介：HTML5是网页标记语言的最新标准，支持更加动态和丰富的用户体验。本项目源码展示了如何使用HTML5的SVG来绘制篝火和炊烟动画，通过CSS3动画、JavaScript交互、Canvas与SVG的选择以及Web动画性能优化，实现了一个月亮下的篝火和野营炊烟效果。项目还考虑了响应式设计和数据结构的使用，为开发者提供了一个学习Web前端开发的实践案例。1.HTML
    
                    
    • 
                    
  • 技术大牛谈HTML 5设计原理
                        Bluestar
Web开发htmlxhtml浏览器文档javascript工作
                        
    本篇文章是JeremyKeith在Fronteers2010上的主题演讲，主要跟大家谈谈HTML5的设计。主要分两个方面，一方面就是HTML5；另一方面就是80/20。JeremyKeith在Fronteers2010上的主题演讲下载PPT(PDF)http://adactio.com/extras/slides/designofhtml5.pdf观看视频http://fronteers.nl/c
    
                    
    • 
                    
  • html结构解析
                        ca_rry
前端html
                        
    ：声明为HTML5文档：根元素，指定页面语言为中文：设置字符编码，确保中文正常显示：实现响应式设计，使页面在移动设备上正确显示：设置浏览器标签页标题：内嵌CSS样式，用于定义页面元素的显示效果：页面主容器，用于统一管理页面内容的布局：页面主标题，应用了自定义标题样式：示例图片，添加了悬停缩放效果：表单容器，包含输入框、下拉选择器和提交按钮：特性列表，使用自定义列表样式
    
                    
    • 
                    
  • JS执行机制
                        1024k纯金

                        
    首先我们来看几个问题：1.JS是单线程的么？2.JS有异步么？3.JS单线程怎么实现的的异步1.JS是单线程的么？这个问题毫无悬念，肯定是单线程的。js刚开始就是作为浏览器脚本语言推出的，试想如果是多线程:那么一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？这样就复杂化了，HTML5提出WebWorker标准，允许JavaScript脚本创建多个线程，但
    
                    
    • 
                    
  • 网页视频进度条禁止拖动----解决
                        

                        
    点击键盘F12键，进入开发者模式发现标志,html5播放器，属于原生支持最方便实现加速的在开发者模式中找到Console调式窗口，输入以下代码可以设置视频播放速度/*playvideotwiceasfast*/document.querySelector('video').defaultPlaybackRate=1.0;//默认一倍速播放document.querySelector('video'
    
                    
    • 
                    
  • HTML5+CSS3小实例：流星划过天际的动画效果
                        艾恩小灰灰

                        
    实例：流星划过天际的动画效果技术栈：HTML+CSS效果：源码：【html】流星划过天际的动画效果【css】*{/*初始化*/margin:0;padding:0;}body{/*100%窗口高度*/height:100vh;/*溢出隐藏*/overflow:hidden;}.container{/*绝对定位*/position:absolute;top:0;left:0;width:100%;h
    
                    
    • 
                    
  • ios 集成H5+SDK
                        梦迪达达

                        
    突然接受一个H5+很茫然，打开官方文档更是无法言语，技术人员已经明确提出开发文档停止更新，那么我们只能综合文档以及前辈们的实战来解决了HTML5+SDK一共三种集成方式，“独立应用”、“Widget”和“WebView”1、独立应用集成方式:使用独立应用方式，开发者需要将HTML5+SDK生成的首页面设置为当前View的subView。HTML5+SDK将对应用进行管理。2、Widget集成方式:
    
                    
    • 
                    
  • webkitSpeechRecognitionHTML5语音识别文字（直接运行）
                        AIGC创想家
html5语音识别前端
                        
    前端想要实现语音转文字，其实不需要任何云服务，浏览器自带的api就能搞定。下面是已经封装好的代码，复制之后可以在控制台只接运行。classSpeechRecognitionManager{??tempTranscript=''??isRecording=false;??timeoutid=0;??exitKeywors=['stop','exit','quit','退出','停止识别','说完了'
    
                    
    • 
                    
  • webView显示网页的时候，右半部分有白色一片空白区域
                        

                        
    这时需要设置他的滚动条wv_showHTML.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY)WebView中android:scrollbarSize="0dip"加上这句就好了引用于：http://www.17jquery.com/html_html5/38376/和http://bbs.csdn.net/topics/350001955
    
                    
    • 
                    
  • Vue3 - 实现一个雨水滴落的动画效果
                        程序员的成长之路
Vue3html5javascriptvue
                        
    在Vue3中实现一个雨水滴落的动画效果，可以使用HTML5的元素和JavaScript来绘制和控制动画。以下是一个实现雨水滴落效果的示例：创建一个Vue3项目首先，确保你已经创建了一个Vue3项目。如果还没有，可以使用VueCLI来创建：vuecreaterain-animationcdrain-animation添加Canvas组件创建一个新的Vue组件来包含我们的元素和动画逻辑。创建一个名为R
    
                    
    • 
                    
  • 数字图像处理（三：图像如果当作矩阵，那加减乘除处理了矩阵，那图像咋变）：从LED冬奥会、奥运会及春晚等等大屏，到手机小屏，快来挖一挖里面都有什么
                        

                        
    数字图像处理（三）一、（准备工作：咋玩，用什么玩具）图像以矩阵形式存储，那矩阵一变、图像立刻跟着变？1.Python+JupyterNotebook/Lab+库(NumPy,OpenCV,Matplotlib,scikit-image)2.MATLAB+ImageProcessingToolbox3.JavaScript+HTML5Canvas+浏览器4.专业的图像处理软件(带脚本/插件功能)二、
    
                    
    • 
                    
  • 2025前端面试题全攻略：高频考点解析与实战指南
                        

                        
    助力金三银四跳槽季，覆盖90%大厂核心考点，技术进阶+面试技巧双提升一、HTML/CSS核心篇1.语义化与布局实战问题1：如何用HTML5语义化标签优化新闻详情页？答案要点：使用包裹主体内容，划分章节标记发布时间，+处理图文SEO优势：提升关键内容权重，增强可访问性问题2：实现等间距三栏布局（中间自适应）.container{display:flex;gap:20px;/*关键：替代margin方
    
                    
    • 
                    
  • HTML5如何创建容器
                        paid槮
html5前端html
                        
    为了让网页的布局更加美观，HTML提供了容器的概念，即在网页中占用一块区域,在此区域内可以添加多种标签,且这些标签只会在该区域内显示，使得标签有了各自的容器，能在各自的区域内显示内容。标签在HTML中使用标签来建立一个容器。其使用形式如下!其他标签被标签所包含的标签都隶属于同一个容器,当使用标签设置属性样式(即style通用样式)时整个容器都会显示此样式。示例代码:我是标题1我纻蜞居是腭绠纩定标题
    
                    
    • 
                                
  • 安装数据库首次应用
                                    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 {
    
    
                                
    •