公司最近人手极度空缺,领导一声令下,让我和另一个 Android 小伙去支援 Java 组开发。秉承着“一块砖”的精神,我完全服从领导安排。做什么都是做,就怕自己停滞不前。羽哥也安慰我说:“技不压身”。但赶鸭子上架做了一周之后,发现根本不行。这一周下来,我连自己做了什么、怎么做的、原理流程都是什么一点都不知道。这样不行,只会复制粘贴可不行,况且大多数时候,从哪复制粘贴到哪我都不清楚。 于是下决心先入个门吧。我们过去主要就是改一些前端页面,那我就先从前端知识开始吧。 HTML,就是你了。就从你先开始!
HTML 是一种标记语言,它是用来描述网页格式的。虽然它本身不能显示在浏览器中,但经过浏览器的解释和编译,在浏览器中就可以正确显示 HTML 的格式。
1 HTML 元素
HTML 文档是由一个个元素拼凑而成的,元素的构成分为三部分:
开始标签(opening tag)
元素内容
结束标签(closing tag)
1.1 元素语法
以开始标签起
以结束标签止
元素内容即开始标签与结束标签中的内容
某些 HTML 元素可具有空内容
空元素在开始标签中进行关闭
大多数元素都具有属性
1.2 元素实例及解析
下面看一个 HTML 实例:
这是第一个段落。
上面的实例用到了三个元素:
然后,看一下在浏览器中显示的效果:
GG,出现了中文乱码的问题。这种问题的解决方法在网上一搜一大把,我的解决方法是限定了一下编码格式:
这是第一个段落。
重新运行一下:
解决!
1.3 注意:
: 上面的元素解析中没有提到 !DOCTYPE ,因为它并不是元素的一部分,它只是一份声明,因为网络上有很多不同的文件,声明正确的 HTML 版本,让浏览器能够正确显示网页。 完整的网络声明类型:DOCTYPE 参考手册
别忘记结束元素标签 : 虽然即便不写结束标签,大多数浏览器也能够正确的显示内容,但还是不要依赖这种写法。
建议使用小写标签 : HTML 标签对大小写不敏感:
等同于
。但是万维网联盟(W3C)在 HTML 4 中推荐 使用小写,并且在未来 (X)HTML 版本中强制 使用小写。
2. HTML 属性
属性是 HTML 元素的附加信息 ,一般在元素的开始菜单 中进行描述,并且属性总是以名称/键值对 的形式出现。
2.1 属性实例
HEML 属性
这是一个链接
看代码说话,上面代码中定义了一个链接,HTML 中链接由
标签定义,链接地址写在 href
属性中,其中 href="http://www.baidu.com"
即为元素的属性。 然后属性始终在括号内,属性值一般用双引号标注,单引号也可以。但是如果属性值中有双引号存在,那么属性值就必须用单引号标注。 看一下浏览器中运行效果:
2.2 属性参考手册大全
HTML 标准属性参考手册
3. HTML 标题
标题是通过
-
标签进行定义的,
是最大的标题,
是最小的标题。
3.1 标题实例
HEML 标题
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
效果:
3.2 HTML 水平线
标签可以在 HTML 中创建水平线,可用于分割内容。 在代码中使用:
HEML 标题
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
hr 水平线:
段落1
段落2
段落3
运行效果:
3.3 HTML 注释
HTML 中的注释与 Java 有所不同,是这样使用注释的: ``
4. HTML 段落
HTML 可以将文档分割成若干段落,方便阅读。
4.1 使用段落
段落是通过标签
进行定义的,在之前的代码中使用过,就不演示了。
4.2 换行
如果你不想将一段长文在产生一个新段落的情况下进行换行,就使用 标签进行分割。
HEML 段落
演示换 行效果
效果:
4.3 注意:
在 HTML 代码中不能通过添加额外的空格或换行来改变输出的效果。 当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。
5. HTML 文本格式化
文本格式化部分没有什么好说,直接看代码:
HEML 文本格式化
文本加粗
文本斜体
电脑自动输出
上标 和 下标
效果:
代码释义很简单,就不讲了。
5.2 HTML 文本化标签
下面看一下常用的 HTML 文本化标签:
5.3 HTML 计算机输出标签
5.4 HTML 引文、引用及标签定义
6. HTML 链接
HTML 使用标签
来实现超链接。超链接可以是一个字、一组词甚至是一张图片。
6.1 使用
上文中已经使用过链接,这里就不具体展出了。只需要知道格式就可以: *链接文本*
6.2 target属性
使用 target 属性,可使被链接的文档在何处被打开:
HEML 链接
这是一个链接
上面的代码实现在新窗口中打开链接:
6.3 id 属性
id 属性可用于在一个 HTML 文档中创建标记。 具体实现:
在HTML文档中插入ID: 有用的提示部分
在HTML文档中创建一个链接到"有用的提示部分(id="tips")": 访问有用的提示部分
或者,从另一个页面创建一个链接到"有用的提示部分(id="tips")":
访问有用的提示部分
7. HTML 头部
7.1
元素
head 元素包含了所有的头部标签元素。在 head 元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
7.2
元素
title 元素定义了不同文档的标题,包含浏览器工具栏的标题、收藏夹的标题以及搜索结果页面的标题。
7.3
元素
base 元素定义了基本的链接地址,该标签作为文档中所有链接的默认目标。
7.4
元素
link 标签定义了文档与外部资源的关系,通常用于链接到样式表。
7.5
元素
style 元素定义了文档引用的样式文件的地址,也可在 style 中直接定义样式来渲染 HTML 文档。
7.6
元素
meta 元素描述了文档中的一些基本的元数据。这些元数据不显示在浏览器页面上,但会被浏览器解析。META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
7.7
元素
通常用于加载 script 文件。
8. HTML 图像
8.1 图像标签和源属性
图像由
标签定义,
是空标签,即没有闭合标签。然后要在页面上显示图像,还要使用源属性——src,即图像的 url 地址。 定义图像的代码:
HEML 链接

效果:
显示成功!
8.2 alt 属性
alt 属性用来为图像定义一串可替换的文本。在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。 使用也十分简单,就在 img 元素中添加即可:
HEML 链接

8.3 高度与宽度
可以看到,刚才显示的图像太大了,那么这里就可以通过设置图像的宽高来进行限定。 height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。
HEML 链接

效果:
9. HTML 表格
表格由 标签来定义,每个表格均有若干行(由 标签定义),每行又被分为若干格(由 标签定义)。 先看一个表格实例:
HEML 表格
第 1 行, 第 1 列
第 1 行, 第 2 列
第 2 行, 第 1 列
第 2 行, 第 2 列
效果:
9.1 边框
表格的边框由 border 属性定义:
HEML 表格
第 1 行, 第 1 列
第 1 行, 第 2 列
第 2 行, 第 1 列
第 2 行, 第 2 列
效果:
9.2 表头
表头由 标签定义:
HEML 表格
表头1
表头2
第 1 行, 第 1 列
第 1 行, 第 2 列
第 2 行, 第 1 列
第 2 行, 第 2 列
效果:
关于表格就介绍这么多,更多样式的还是要在项目中活学活用。下面是表格标签:
10. HTML 列表
HTML 列表分为有序列表和无序列表。
10.1 无序列表
无序列表使用
标签进行描述,每个列表项始于
标签,使用小黑点进行标记。
HEML 列表
效果:
10.2 有序列表
有序列表使用
标签进行描述,每个列表项始于
标签,使用数字进行标记。 在上面的代码中添加有序列表:
HEML 列表
无序列表
有序列表
香蕉
苹果
橘子
效果:
10.3 自定义列表
除此之外,HTML 还支持自定义列表。 自定义列表不仅仅是一列项目,而是项目及其注释的组合。 自定义列表以
标签开始。每个自定义列表项以
开始。每个自定义列表项的定义以
开始。
HEML 列表
无序列表
有序列表
香蕉
苹果
橘子
自定义列表
香蕉
- 芭蕉科芭蕉属植物,又指其果实。
苹果
- 美国的一家高科技公司。
橘子
- 是芸香科柑桔属的一种水果。
效果:
11. HTML 区块
大多数 HTML 元素都被定义为块级元素和内联元素。
11.1 区块元素
块级元素在浏览器中显示时,会以新行开始和结束。 实例:
,
,
,
元素
元素就是块级元素。它没有特定的含义,只是将 HTML 各元素组合起来。
元素另一个用途是替代
进行表格布局, 元素只显示表格化数据使用。
11.2 内联数据
内联数据显示时通常不会以新行开始。 实例:
, ,
,
元素
是内联元素,它也没有任何特定含义,可用作文本的容器。另外,与 css 一同使用时,
元素可用于为一些文本设置文本属性。
12. HTML 表单
表单使用
标签来设置,表单元素允许用户在表单中输入数据,如文本域、下拉列表、单选/复选框等。 多数情况下被用到的表单标签是输入标签
,输入类型由 type 类型属性定义,大多数被用到的输入类型如下。
12.1 文本域
文本域通过
标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。
12.2 密码
密码字段通过标签
来定义:
12.3 单选按钮
单选按钮通过
来设置: 是
12.4 复选按钮
复选按钮通过
来设置: 评论
12.5 按钮
按钮通过
来设置:
综合以上表单输入类型,来看一下最终在浏览器上的实现效果:
13. HTML iframe
Iframe 标记,又叫浮动帧标记,你可以用它将一个 HTML 文档嵌入在另一个 HTML 中显示。
13.1 使用
iframe 语法为:
看一下使用方法,我们以之前显示图像的 HTML 文档为例,将他显示在 iframe 文档中:
HEML iframe
效果:
13.2 宽高设置
可以看到,上面显示的 HTML 文档显示的不全,那么也可以像设置图像宽高一样,设置其宽高:
HEML iframe
效果:
这次显示效果好多了。
13.3 移除边框
如果你嫌显示边框很丑,那么你可以移除它。
frameborder="0"
效果:
13.4 显示目标链接
iframe 也可以显示一个目标链接的页面,但链接的属性必须使用 iframe 的属性。
HEML iframe
百度一下
上面代码结合了这几个 iframe 的示例,通过代码可以看出,点击百度一下 链接,会在 iframe 上面显示百度页面。看一下效果:
14. HTML 脚本
脚本可以使 HTML 页面具有更强的动态性和交互性。
14.1
标签
标签用于定义客户端脚本,比如 JavaScript。
元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。 JavaScript 最常用于图片操作、表单验证以及内容动态更新。
14.2
标签
标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。
元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。 只有在浏览器不支持脚本或者禁用脚本时,才会显示
元素中的内容。
15. HTML 字符实体
html 中的预留字符必须被替换为字符实体,一些在键盘上找不到的字符也可以用字符实体来替换。 在 HTML 中,某些实体是预留的,例如小于号(<) 和大于号(>),这是因为浏览器会误认为它们是标签。 HTML 中常用字符实体还有不间断空格( ),因为浏览器总是将多个空格删除,只留一个,所以如果想留下多个空格,就必须使用字符实体( )。 更多 HTML 字符实体,请查看HTML 实体参考手册。
16. 总结
HTML 的基础知识大致上已经捋了一遍了,当然,肯定不能全部都涉及到,一个是时间短,再一个是即便都看全,我也不能全记住。我只把大致的语法和控件以及用法记住就好了,更多的知识还是要活学活用。 这整个过程下来,让我对 HTML 有了更加具象的理解。之前一直听说 HTML 简单,学了以后发现,确实是不难,但用好它还是要下一番功夫的。HTML 的功能我感觉和 Markdown 语法类似,实现的效果也都差不多。是,我肯定我说的这句话在以后会被打脸,因为我才接触前端多点的知识啊。但我现在这是看到的冰山一角,所以我只能对这一角进行描述,等有天我把冰山的全貌都摸透,回过头来再嘲笑现在的自己吧~ 这一整个学习过程是在菜鸟教程上进行的,整个步骤和许多释义都是按照上面的理解进行记录的。但里面的各个例子都是我自己手敲了一遍。学的过程中,发现了鼎鼎有名的前端学习网站 W3school,两个教程的学习步骤和知识讲解都差不多,但有的地方 W3school 确实比菜鸟教程上面讲得细。但当时已经跟着菜鸟学了大半了,就没照着 W3school 上学。打算下一步学习 H5、CSS 和 Js 时,参照着 W3school 上面进行学习。 就到这吧。
17. 参考
http://www.runoob.com/
你可能感兴趣的:(前端入门 —— HTML 基础知识一勺烩)
Web 开发都需要学什么?
Duiz33237
前端 html5 css3 web
Web开发是指开发和构建用于互联网的网站和应用程序的过程。它涉及使用各种编程语言、框架和技术来创建功能丰富、用户友好的网站和应用程序。常见的web开发技术包括HTML、CSS和JavaScript。HTML用于创建网页的结构,CSS用于样式和布局,而JavaScript用于实现交互和动态效果。此外,还有许多其他的编程语言和框架,如Python、PHP、Ruby、React、Angular等,用于开
MySql数据库等级考试学习分享3(Day8)
weixin_53545579
学习 数据库 mysql
题目解析题目:以下关于局部变量的叙述中,错误的是()。选项:A、局部变量只能在BEGIN...END之间声明B、使用SET语句能够为局部变量赋值C、DECLARE能够在声明局部变量的同时指定默认值D、使用SELECTINTO能够将数据表中一列的所有值赋值给局部变量0基础知识点总结1.局部变量(LocalVariables)的定义与特性定义:局部变量是在存储过程、函数或触发器的BEGIN...END
GDPU unity游戏开发 一天速成
孑么
# 三维游戏开发 unity 游戏引擎 c# 动画 图形渲染 技术美术 游戏程序
目录复习提纲拿住一.游戏引擎入门二.引擎基础知识三.界面交互设计四.物理引擎五.光照材质地形系统六.音视频动画特效系统七.寻路系统小题简答题名词解释程序填空“我游戏都玩不明白,还让我做游戏o(≧口≦)o”还在为课程烦恼嘛,本文重点在于,一学期摸鱼必过指南。复习提纲拿住注:该栏目转载请写明出处。温馨提示:代码题gameObject类跟transform类是内置的,其它实例调用均需初始化操作。然后一定
如何使用Jsoup提取商品信息:实战指南
数据小爬虫@
python 爬虫 java
在使用Java进行Web爬虫开发时,Jsoup是一个非常强大的HTML解析库,可以帮助你轻松地提取网页中的数据。本文将详细介绍如何使用Jsoup提取商品信息,包括商品标题、价格、描述和图片链接等。一、环境准备(一)Java开发环境确保你的系统中已安装Java开发环境,推荐使用JDK11或更高版本。(二)安装所需库使用Maven管理项目依赖,主要包括以下库:Jsoup:用于解析HTML内容。在pom
前端高级CSS用法
二川bro
前端 前端 css
前端高级CSS用法在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交互和动态效果的关键技术之一。随着前端技术的不断发展,CSS的用法也日益丰富和高级。本文将深入探讨前端高级CSS的用法,并通过表格和流程图来直观展示。一、CSS高级选择器CSS选择器是选择HTML元素并应用样式的基础。高级选择器使得我们能够更加精确地选择元素,从而实现更复杂的样式效果。属性选择器:根据元
一览无遗 python 自定义装饰器使用及原理详解
1_bit
python flask python flask 开发语言 装饰器
注意:先行知识python,本篇文章所有代码均为实际运行,为原理和逻辑讲解一、装饰器装饰器是python中的一种语法糖,虽然我不想用语法糖这个词来表达,但这句话写在了开头,我也不到用别的更准确的词来形容他了。如果你刚接触编程不久,不理解语法糖,也没关系;在这里我说语法糖并不会影响到你接下来的理解,我只是用它在赘述,作为了一种形容词。首先我们要搞懂装饰器是什么东西,其次搞懂装饰器的基础知识点,最后逐
计算机视觉入门
109702008
人工智能 # 深度学习 计算机视觉 人工智能
计算机视觉(ComputerVision)是一门涉及使机器能够从图像或者多维数据中提取信息,解释、理解并对物体或场景进行处理的学科。以下是一个基本的计算机视觉入门学习路线,旨在为刚刚接触这一领域的学习者提供指导。1.基础知识储备数学基础:线性代数、概率论和数理统计、微积分、优化理论。编程语言:掌握至少一门编程语言,Python是目前在计算机视觉领域最流行的语言,其次是C++。2.计算机视觉基础数字
简易C语言Web服务器
mzg__
c语言 前端 服务器
概述:这个项目是一个用C语言实现的简易Web服务器,使用了套接字(sockets)和pthread。服务器能够处理基本的HTTP请求,提供静态HTML和图片文件。它采用多线程以同时处理多个客户端连接。主要特点:HTTP服务器:在指定的端口(这里是8080)监听传入的HTTP请求。多线程:利用pthread以同时处理多个客户端连接,提高服务器的响应性。文件处理:根据客户端请求,支持提供HTML和JP
2024年12月CCF-GESP编程能力等级认证C++编程四级真题解析
前网易架构师-高司机
c++ 开发语言 CCF-GESP
四级真题的难度:一、总体难度评价CCF-GESP编程能力等级认证C++四级真题的难度通常被认为相对较高。它不仅要求考生具备扎实的C++编程基础,还需要考生掌握一定的算法和数据结构知识,以及良好的问题解决能力。二、具体难度分析理论知识考察:单选题和判断题中,会涉及C++语言的理论基础知识,如数组的存储原理、函数的各种传参方式、指针、引用等。这些题目要求考生对C++语言有深入的理解。编程技能考察
《恐龙餐厅菜单页面代码说明文档》
欣然~
html5
一、整体概述此HTML文件构建了一个恐龙餐厅的菜单页面,用户能够浏览菜品、将菜品添加到购物车,并进行支付操作。页面运用HTML搭建结构,CSS进行样式设计,JavaScript实现交互功能。二、HTML结构1.文档头部()html恐龙餐厅菜单/*CSS样式代码*/:声明文档类型为HTML5。:指定文档语言为中文(中国大陆)。:设置字符编码为UTF-8,确保中文等字符能正确显示。:让页面在不同设备上
python-提示词对大模型推理有多重要?
给自己做加法
python python 语言模型
文章目录前言测试一个失败的提示词提示词内容knowledge内容提问的内容得到的回答说点啥能引导的提示词提示词内容knowledge内容提问的内容得到的回答说点啥结束语前言神级提示词一度成为AI圈的热搜,那么提示词对大模型推理到底有多重要?测试一个失败的提示词提示词内容基础知识:{knowledge};问题:{question};根据已知知识和基础知识回答问题knowledge内容{"商品名称":
基于html5QrCode实现的H5扫码功能(uni-app v2版本)
_虾仁不眨眼_
移动端H5 uni-app html5
1.安装(选择一种方式)使用npmHtml5Qrcodenpm链接npmihtml5-qrcode直接引入html5-qrcode.min.js文件(本例使用此方法)2.扫码组件代码(先引入Html5Qrcode资源)exportdefault{name:'Scan',model:{props:'value',event:'close'},props:{value:{type:Boolean,de
input限制只能输入正整数
_虾仁不眨眼_
javascript html5
要限制input元素只能输入正整数,可以使用以下几种方法:1.使用HTML5的type="number"属性这种方式可以限制输入框只接受数字输入,并且可以通过min和step属性设置最小值和步长。2.使用正则表达式进行输入验证使用@input事件监听输入框的输入事件,并在validateInput方法中使用正则表达式过滤掉非数字和非正整数的字符。//html//jsmethods:{validat
前端大屏触摸签名实现
风无雨
前端 前端
参考:JavaScript实现手写签名,可触屏手写,支持移动端与PC端双端保存_js手写签名-CSDN博客https://www.cnblogs.com/smileZAZ/p/17219400.html1.新建一个canvas元素获取canvas上下文,绘制初始矩形,设置高度宽度,初始绘制位置0,0//创建上下文constctx=canvas.getContext('2d')2.监听touchst
移动端Canvas实现手写签名
不知名靓仔
canvas
引言在移动应用开发中,手写签名功能的集成已经成为许多业务场景的标配,比如电子合同签署、医疗记录确认或是物流配送签收等。本文将详细阐述如何在移动端实现手写签名,包括技术选型、具体实现步骤以及优化建议,帮助开发者快速上手并构建高质量的手写签名体验。技术选型1.使用CanvasAPIHTML5的CanvasAPI提供了在网页上绘制图形的能力,包括路径、文本、图像等,非常适合用来捕捉和展示手写签名。在移动
最新微信小程序面试题集结
江湖二哥
微信小程序 前端 面试 小程序
1、微信小程序与H5的区别?第一条是运行环境的不同传统的HTML5的运行环境是浏览器,包括webview,而微信小程序的运行环境并非完整的浏览器,是微信开发团队基于浏览器内核完全重构的一个内置解析器,针对小程序专门做了优化,配合自己定义的开发语言标准,提升了小程序的性能。第二条是开发成本的不同只在微信中运行,所以不用再去顾虑浏览器兼容性,不用担心生产环境中出现不可预料的奇妙BuG第三条是获取系统级
使用yolov8+flask实现精美登录界面+图片视频摄像头检测系统
FL1623863129
深度学习 YOLO flask python
这个是使用flask实现好看登录界面和友好的检测界面实现yolov8推理和展示,代码仅仅有2个html文件和一个python文件,真正做到了用最简洁的代码实现复杂功能。测试通过环境:windowsx64anaconda3+python3.8ultralytics==8.3.81flask==1.1.2torch==2.3.0运行步骤:安装好环境执行pythonlogin.py后端实现代码:from
订单管理系统 大学生数据库大作业/数据库实践MYSQL
陌路物是人非
数据库 课程设计
订单管理系统从入门到入土下载Maven,Nodejs创建一个数据库sql_end,创建四个数据库表,并确保用户名为root用户密码为123456再IDEA中加载Springboot依赖(可以直接新建一个任意名称的文件夹,项目导入spring的框架),启动spring项目打开index.html输入用户名和密码,点击注册,再点击登录点击个人中心,点击修改用户信息,修改自己的余额点击逛店铺,选择一个商
python xpath定位元素方法_关于python中的xpath解析定位
weixin_39975366
python xpath定位元素方法
爬取的网站:http://jbk.39.net/chancegz/这里只针对个别属性值:#例如:'别名'下的span标签文本,‘发病部位'下的span标签文本以及‘挂号科室‘下的span标签文本#defdisease(url):text=get_html(url)tree=etree.HTML(text)bm=tree.xpath('//ul[@class="information_ul"]/li
ros如何编译python文件_(二)ROS入门——4.如何编写ROS的第一个程序hello_world
weixin_39935903
ros如何编译python文件
ROS机器人操作系统在机器人应用领域很流行,依托代码开源和模块间协作等特性,给机器人开发者带来了很大的方便。我们的机器人“miiboo”中的大部分程序也采用ROS进行开发,所以本文就重点对ROS基础知识进行详细的讲解,给不熟悉ROS的朋友起到一个抛砖引玉的作用。本章节主要内容:1.ROS是什么2.ROS系统整体架构3.在ubuntu16.04中安装ROSkinetic4.如何编写ROS的第一个程序
XPath简介——完整入门和详解
葡萄架子
网络协议 前端
XPath简介——完整入门和详解**XPath的用法场景****XPath的基本语法****1.树型结构概念****2.XPath基本路径语法****定位方式及详细语法讲解**示例HTML结构:**1.路径选择****基础语法:层级表示法****查询所有匹配的节点****2.位置选取语法****单个节点索引选择****结合多个位置过滤****3.属性条件过滤**属性查询示例:含动态匹配:**4.文
什么是遍历?
dengjuanshou7445
javascript ViewUI
jQuery遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。下图展示了一个家族树。通过jQuery遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对DOM进行遍历。图示解释:元素是的父元素,同时是其中所有内容的祖先。元素是元素的
html-to-image的使用及图片变形和无图问题修复
庸懒
前端
html-to-image的使用及图片变形和无图问题修复最近迭代的时候因为新增了一个需求,需要前端提供素材及样式给后端,后端同步渲染,但是因为部分样式问题后端无法实现所以决定前端将页面生成图片然后传递给后端使用,本文记录一下使用的过程及遇到的部分问题。技术调研现在将页面元素转换成图片的插件有很多,普遍使用的技术原理都是利用canvas或者SVG将页面元素转换成画布或者svg元素,然后再转成图片。这
canvas绘制和数字签名
前端
关键是要把存放绘制的信息放到一个二维数组中:绘制时最好不要用定时器进行定时绘制,因为会卡顿,最好使用requestAnimationFrame这个原生js的api方法,因为是以帧的间隔绘制,所以会看起来流畅Documenthtml,body{height:100%;margin:0;padding:0;}.container{width:100%;padding:20px0;display:fle
python flask 分页_Python的Flask框架中实现分页功能的教程
weixin_39959126
python flask 分页
BlogPosts的提交让我们从简单的开始。首页上必须有一张用户提交新的post的表单。首先我们定义一个单域表单对象(fileapp/forms.py):classPostForm(Form):post=TextField('post',validators=[Required()])下面,我们把这个表单添加到template中(fileapp/templates/index.html):{%ex
Python 实现海康机器人工业相机 MV-CS050-10GC 的实时显示视频流及拍照功能(实时显示视频流同时可以进行拍照)
恋上钢琴的虫
数码相机
参考链接:https://www.cnblogs.com/HanYork/p/17388506.htmlhttps://www.cnblogs.com/miracle-luna/p/16960556.html#5138211Flask搭建流媒体服务器:使用Flask搭建一个流媒体服务器_multipart/x-mixed-replace;boundary=frame-CSDN博客
MATLAB算法实战应用案例精讲-【深度学习】归一化
林聪木
matlab 算法 深度学习
目录为什么要做特征归一化/标准化?常用featurescaling方法计算方式上对比分析featurescaling需要还是不需要什么时候需要featurescaling?什么时候不需要FeatureScaling?归一化基础知识点1.什么是归一化2.为什么要归一化3.为什么归一化能提高求解最优解的速度4.归一化有哪些类型5.不同归一化的使用条件6.归一化和标准化的联系与区别层归一化综述提出背景概
Julia语言的学习路线
樟松
包罗万象 golang 开发语言 后端
Julia语言学习路线指南引言在编程语言层出不穷的今天,Julia作为一门新兴的高级编程语言,以其出色的性能和易用性逐渐获得了越来越多的关注。特别是在科学计算、数据分析和机器学习等领域,Julia的表现十分出色,成为研究人员和开发者的热门选择。本文将为希望学习Julia语言的读者提供一条详细的学习路线,包括基础知识、工具、库、项目和实践经验等,帮助大家有效地掌握这门语言。一、了解Julia语言在开
爬取电影标题、评论、评分(21-11-4)
穆桥
Python爬虫 XPath解析 MySQL数据库 电影信息 疾病数据
功能描述:1、爬取网页1中的电影名称、评分、简介到mysql数据库中。2、爬取网页2中的标题、时间、正文、采集时间到mysql数据库中。使用的技术:requests请求、xpath解析、mysqlxpath解析语法//子孙节点/直接子节点.选取当前节点…选取当前节点的父节点@选取属性通过Python的lxml库,利用XPath进行HTML的解析。scrapy封装了lxml也可以导入scrapy任务
给接口自动化测试框架增色,实现企业微信测试报告
编程简单学
软件测试 python python 单元测试 压力测试 postman 功能测试
作者在新项目中搭建了python+requests+unittest+HTMLTestRunner接口自动化测试框架,通过修改配置文件实现环境隔离,一份脚本即可在不同的环境执行接口测试用例。但是没有实现任何形式的消息通知,也没有集成到jenkins,原因很简单,因为还没做到很大,而且用户活跃不够,问题也相对较少,只在上线前后执行一次uat和prod环境。那这几天想完善一下消息通知功能,让它具备发送
PHP,安卓,UI,java,linux视频教程合集
cocos2d-x小菜
java UI PHP android linux
╔-----------------------------------╗┆
各表中的列名必须唯一。在表 'dbo.XXX' 中多次指定了列名 'XXX'。
bozch
.net .net mvc
在.net mvc5中,在执行某一操作的时候,出现了如下错误:
各表中的列名必须唯一。在表 'dbo.XXX' 中多次指定了列名 'XXX'。
经查询当前的操作与错误内容无关,经过对错误信息的排查发现,事故出现在数据库迁移上。
回想过去: 在迁移之前已经对数据库进行了添加字段操作,再次进行迁移插入XXX字段的时候,就会提示如上错误。
&
Java 对象大小的计算
e200702084
java
Java对象的大小
如何计算一个对象的大小呢?
 
Mybatis Spring
171815164
mybatis
ApplicationContext ac = new ClassPathXmlApplicationContext("applicationContext.xml");
CustomerService userService = (CustomerService) ac.getBean("customerService");
Customer cust
JVM 不稳定参数
g21121
jvm
-XX 参数被称为不稳定参数,之所以这么叫是因为此类参数的设置很容易引起JVM 性能上的差异,使JVM 存在极大的不稳定性。当然这是在非合理设置的前提下,如果此类参数设置合理讲大大提高JVM 的性能及稳定性。 可以说“不稳定参数”
用户自动登录网站
永夜-极光
用户
1.目标:实现用户登录后,再次登录就自动登录,无需用户名和密码
2.思路:将用户的信息保存为cookie
每次用户访问网站,通过filter拦截所有请求,在filter中读取所有的cookie,如果找到了保存登录信息的cookie,那么在cookie中读取登录信息,然后直接
centos7 安装后失去win7的引导记录
程序员是怎么炼成的
操作系统
1.使用root身份(必须)打开 /boot/grub2/grub.cfg 2.找到 ### BEGIN /etc/grub.d/30_os-prober ### 在后面添加 menuentry "Windows 7 (loader) (on /dev/sda1)" { 
Oracle 10g 官方中文安装帮助文档以及Oracle官方中文教程文档下载
aijuans
oracle
Oracle 10g 官方中文安装帮助文档下载:http://download.csdn.net/tag/Oracle%E4%B8%AD%E6%96%87API%EF%BC%8COracle%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3%EF%BC%8Coracle%E5%AD%A6%E4%B9%A0%E6%96%87%E6%A1%A3 Oracle 10g 官方中文教程
JavaEE开源快速开发平台G4Studio_V3.2发布了
無為子
AOP oracle mysql javaee G4Studio
我非常高兴地宣布,今天我们最新的JavaEE开源快速开发平台G4Studio_V3.2版本已经正式发布。大家可以通过如下地址下载。
访问G4Studio网站
http://www.g4it.org
G4Studio_V3.2版本变更日志
功能新增
(1).新增了系统右下角滑出提示窗口功能。
(2).新增了文件资源的Zip压缩和解压缩
Oracle常用的单行函数应用技巧总结
百合不是茶
日期函数 转换函数(核心) 数字函数 通用函数(核心) 字符函数
单行函数; 字符函数,数字函数,日期函数,转换函数(核心),通用函数(核心)
一:字符函数:
.UPPER(字符串) 将字符串转为大写
.LOWER (字符串) 将字符串转为小写
.INITCAP(字符串) 将首字母大写
.LENGTH (字符串) 字符串的长度
.REPLACE(字符串,'A','_') 将字符串字符A转换成_
Mockito异常测试实例
bijian1013
java 单元测试 mockito
Mockito异常测试实例:
package com.bijian.study;
import static org.mockito.Mockito.mock;
import static org.mockito.Mockito.when;
import org.junit.Assert;
import org.junit.Test;
import org.mockito.
GA与量子恒道统计
Bill_chen
JavaScript 浏览器 百度 Google 防火墙
前一阵子,统计**网址时,Google Analytics(GA) 和量子恒道统计(也称量子统计),数据有较大的偏差,仔细找相关资料研究了下,总结如下:
为何GA和量子网站统计(量子统计前身为雅虎统计)结果不同?
首先:没有一种网站统计工具能保证百分之百的准确出现该问题可能有以下几个原因:(1)不同的统计分析系统的算法机制不同;(2)统计代码放置的位置和前后
【Linux命令三】Top命令
bit1129
linux命令
Linux的Top命令类似于Windows的任务管理器,可以查看当前系统的运行情况,包括CPU、内存的使用情况等。如下是一个Top命令的执行结果:
top - 21:22:04 up 1 day, 23:49, 1 user, load average: 1.10, 1.66, 1.99
Tasks: 202 total, 4 running, 198 sl
spring四种依赖注入方式
白糖_
spring
平常的java开发中,程序员在某个类中需要依赖其它类的方法,则通常是new一个依赖类再调用类实例的方法,这种开发存在的问题是new的类实例不好统一管理,spring提出了依赖注入的思想,即依赖类不由程序员实例化,而是通过spring容器帮我们new指定实例并且将实例注入到需要该对象的类中。依赖注入的另一种说法是“控制反转”,通俗的理解是:平常我们new一个实例,这个实例的控制权是我
angular.injector
boyitech
AngularJS AngularJS API
angular.injector
描述: 创建一个injector对象, 调用injector对象的方法可以获得angular的service, 或者用来做依赖注入. 使用方法: angular.injector(modules, [strictDi]) 参数详解: Param Type Details mod
java-同步访问一个数组Integer[10],生产者不断地往数组放入整数1000,数组满时等待;消费者不断地将数组里面的数置零,数组空时等待
bylijinnan
Integer
public class PC {
/**
* 题目:生产者-消费者。
* 同步访问一个数组Integer[10],生产者不断地往数组放入整数1000,数组满时等待;消费者不断地将数组里面的数置零,数组空时等待。
*/
private static final Integer[] val=new Integer[10];
private static
使用Struts2.2.1配置
Chen.H
apache spring Web xml struts
Struts2.2.1 需要如下 jar包: commons-fileupload-1.2.1.jar commons-io-1.3.2.jar commons-logging-1.0.4.jar freemarker-2.3.16.jar javassist-3.7.ga.jar ognl-3.0.jar spring.jar
struts2-core-2.2.1.jar struts2-sp
[职业与教育]青春之歌
comsci
教育
每个人都有自己的青春之歌............但是我要说的却不是青春...
大家如果在自己的职业生涯没有给自己以后创业留一点点机会,仅仅凭学历和人脉关系,是难以在竞争激烈的市场中生存下去的....
&nbs
oracle连接(join)中使用using关键字
daizj
JOIN oracle sql using
在oracle连接(join)中使用using关键字
34. View the Exhibit and examine the structure of the ORDERS and ORDER_ITEMS tables.
Evaluate the following SQL statement:
SELECT oi.order_id, product_id, order_date
FRO
NIO示例
daysinsun
nio
NIO服务端代码:
public class NIOServer {
private Selector selector;
public void startServer(int port) throws IOException {
ServerSocketChannel serverChannel = ServerSocketChannel.open(
C语言学习homework1
dcj3sjt126com
c homework
0、 课堂练习做完
1、使用sizeof计算出你所知道的所有的类型占用的空间。
int x;
sizeof(x);
sizeof(int);
# include <stdio.h>
int main(void)
{
int x1;
char x2;
double x3;
float x4;
printf(&quo
select in order by , mysql排序
dcj3sjt126com
mysql
If i select like this:
SELECT id FROM users WHERE id IN(3,4,8,1);
This by default will select users in this order
1,3,4,8,
I would like to select them in the same order that i put IN() values so:
页面校验-新建项目
fanxiaolong
页面校验
$(document).ready(
function() {
var flag = true;
$('#changeform').submit(function() {
var projectScValNull = true;
var s ="";
var parent_id = $("#parent_id").v
Ehcache(02)——ehcache.xml简介
234390216
ehcache ehcache.xml 简介
ehcache.xml简介
ehcache.xml文件是用来定义Ehcache的配置信息的,更准确的来说它是定义CacheManager的配置信息的。根据之前我们在《Ehcache简介》一文中对CacheManager的介绍我们知道一切Ehcache的应用都是从CacheManager开始的。在不指定配置信
junit 4.11中三个新功能
jackyrong
java
junit 4.11中两个新增的功能,首先是注解中可以参数化,比如
import static org.junit.Assert.assertEquals;
import java.util.Arrays;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.junit.runn
国外程序员爱用苹果Mac电脑的10大理由
php教程分享
windows PHP unix Microsoft perl
Mac 在国外很受欢迎,尤其是在 设计/web开发/IT 人员圈子里。普通用户喜欢 Mac 可以理解,毕竟 Mac 设计美观,简单好用,没有病毒。那么为什么专业人士也对 Mac 情有独钟呢?从个人使用经验来看我想有下面几个原因:
1、Mac OS X 是基于 Unix 的
这一点太重要了,尤其是对开发人员,至少对于我来说很重要,这意味着Unix 下一堆好用的工具都可以随手捡到。如果你是个 wi
位运算、异或的实际应用
wenjinglian
位运算
一. 位操作基础,用一张表描述位操作符的应用规则并详细解释。
二. 常用位操作小技巧,有判断奇偶、交换两数、变换符号、求绝对值。
三. 位操作与空间压缩,针对筛素数进行空间压缩。
&n
weblogic部署项目出现的一些问题(持续补充中……)
Everyday都不同
weblogic部署失败
好吧,weblogic的问题确实……
问题一:
org.springframework.beans.factory.BeanDefinitionStoreException: Failed to read candidate component class: URL [zip:E:/weblogic/user_projects/domains/base_domain/serve
tomcat7性能调优(01)
toknowme
tomcat7
Tomcat优化: 1、最大连接数最大线程等设置
<Connector port="8082" protocol="HTTP/1.1"
useBodyEncodingForURI="t
PO VO DAO DTO BO TO概念与区别
xp9802
java DAO 设计模式 bean 领域模型
O/R Mapping 是 Object Relational Mapping(对象关系映射)的缩写。通俗点讲,就是将对象与关系数据库绑定,用对象来表示关系数据。在O/R Mapping的世界里,有两个基本的也是重要的东东需要了解,即VO,PO。
它们的关系应该是相互独立的,一个VO可以只是PO的部分,也可以是多个PO构成,同样也可以等同于一个PO(指的是他们的属性)。这样,PO独立出来,数据持