web前端开发入门之HTML完整版

HTML

图片标签

引用图片

第一种情况：互联网图片，直接使用互联网图片地址

第二种情况，引用本地磁盘中某一个文件夹的图片

• 页面文件和图片文件是同级关系，可以省去路径，直接用图片名称
• 页面文件和图片所在文件夹是同级关系，首先写入图片所在文件夹名称，再用/表示进入文件夹内，找图片文件
• 页面所在文件夹和图片是同级关系，先返回所在文件夹上一级，…/

图片标签属性

1. alt=“千锋教育” 图片加载失败时显示
2. title属性：
   • 定义的内容不占据页面空间
   • 默认隐藏，只有鼠标划入时显示

超链接

href的值是目标页面的地址和图片src属性类似，标签对的内容就是显示在页面的内容

显示在页面中的文本

target="self"表示链接的目标在当前窗口中打开，_blank表示在空白页面打开

文本修饰

• 加粗的文本

  加粗的文本

  b标签仅仅是为了加粗显示文本，strong标签语义化更强，表示该文本比较重要

• 倾斜的文本

  倾斜的文本

• 删除线文本HTML5不支持

  删除线文本

• 下划线文本

• ^{上角标文本}

  _{下角标文本}

列表

有序列表（order list)

<ol type="" start="">
  <li>列表项内容li>
ol>

type值：A,a英文字母的顺序，I,i罗马数字的顺序，1阿拉伯数字的顺序

start取值为起始数字序号

无序列表(unorder list)

<ul type="">
    <li>...li>
ul>

type:

• disc:实心圆点
• circle：空心圆点
• none：无
• square：实心正方形

自定义列表

<dl>
    <dt>dt>
    <dd>dd>
    <dd>dd>
dl>

dt或dd标签不能脱离dl单独使用

快速生成

• 标签名{标签文本内容}+tab或者回车键
• 标签${标题文$本内容}*标签重复次数
• 父标签名>子标签名{子标签文本}*子标签重复次数

表格

基础

<table>
    <tr>
        <td>td>
        <th>加粗的文本th>
    tr>
table>

tr表示一行，td表示一个单元格，一个普通的表格里每个tr里的td个数是相等的

th标签内部文本加粗并居中显示

表格属性

• border:定义线条粗细。
  cellspacing:定义单元格之间的距离。
  cellpadding:定义单元格边框和文本之间的距离

  想让单元格之间的距离，或者单元格与文本之间的距离变大，调整两个间距的属性值即可

  表格行属性

  • align（水平对齐方式）
  :
  • left:左侧对齐
  • center：居中对齐
  • right：右侧对齐
  valign（垂直对齐方式）：

  • top：顶部对齐
  • middle：居中对齐
  • bottom：底部对齐
  bgcolor：修饰表格背景颜色。
  bordercolor：修饰表格边框颜色。

  单元格属性

  • rowspan:跨行 行合并

  表示单元格纵向需要占据4个单元格的空间

  colspan:跨列 列合并

  表格标题和结构分组

  表格标题一般习惯放在第一个tr标签之前

  <table>
      <caption>标题caption>
      <tr>tr>
  table>
  

  thead标签里面放置对应的表格头部tr行内容，tbody标签也是table标签的子标签与thead标签同级,会把table中所有未分组的tr放在一个tbody里面，tfoot标签里面放置对应的表格脚部tr行内容，一个表格只允许使用一个thead和一个tfoot,但是允许使用多个tbody

  <table>
      <thead>thead>
      <tbody>
          <tr>
             <td>内容td>
             <td>内容td>
             <td>内容td>
          tr>
          <tr>
             <td>内容td>
             <td>内容td>
             <td>内容td>
          tr>
          <tr>
             <td>内容td>
             <td>内容td>
             <td>内容td>
          tr>
      tbody>
      <tfoot>tfoot>
  table>
  

  l列分组标签是colgroup,列分组常用于定义表格一整列单元格的颜色，含义为多少列分成一组，如需划分多组，则需要使用多个colgroup

  颜色值和长度单位

  表示颜色值方法：

  • 颜色名称：使用表示颜色的英文单词来定义颜色值

    • 必须使用140个标准的英文名称
    • 中文汉字不能作为颜色值

  • 十六进制值：指使用#RRGGBB的形式来定义颜色值

    RR（红色） GG（绿色）BB（蓝色）00-FF之间 色彩强度

    例如：#0000FF被显示为蓝色

    • #号不要丢掉
    • 字母全部小写
    • 所有浏览器支持

  • RGB值：指使用RGB（red,green,blue)的形式来定义颜色值 （0-255中的整数）

    • 不区分大小写
    • 括号里的数字和逗号前后可以有空格
    • 所有浏览器都支持

  长度单位：

  • 绝对长度单位：固定的，用这些单位表示的长度会显示为设置的尺寸。

    px（像素）

  • 相对单位长度：指相对于一个长度计算出来的长度，一般用来适配不同的设备

    百分比（%）

  块级元素和内联元素

  HTML元素—显示值— block块/inline内联

  块级元素：

  • 分块元素：div（标签里面包含分块的内容）
  • 标题元素h1-h6
  • 段落元素

  • 列表元素

    • 表格元素

  内联元素：

  • 链接元素：

  • 文本修饰元素：
  • 折行元素：

  • 图片元素：
  • 范围元素：

  表单

  文本框和密码框

  单行文本框：

  type="text"或type="password"密码框，默认text单行普通文本框

  多行文本框

  允许用户输入多行文本，文本触达右侧边界后会自动折行，文本超出底部边界后会产生滚动条，可以滚动鼠标查看完整信息。

  可以设置显示区域的宽度和高度。cols用来指定一个文本区的可见宽度

  取值按钮类型

  单选和多选

  设置inpt标签type属性值，radio表示单选,checkbox表示多选

  • 单选框控件必须成组使用才有意义，每组至少需要两个单选框
  • 组是通过name属性来建立的，凡是name值相同的就是一组
  • 同组的单选框，只有一个会处在选中状态，其他的会自动呈现为未选中状态

  单选框复选框默认选中效果，定义checked属性实现，只要不为空，任何字符都可以，一般checked

  下拉菜单

  <select multiple size=“2>
    <option selected>option>
    <option>option>
    <option>option>
    <option>option>
    <option>option>
select>

  selected默认被选中的选项,multiple让下拉菜单可以选择多个值，size属性可以定义控件的默认可见行数

  选择文件

  表单label标签

  <form>
    <label for="username">label>
    <input type="text" id=“username>
    <br>
    您的手机号:<input type="text" value="155****0000" readonly>
    <input type="radio" disabled>
form>

  label可以帮助我们点击屏幕上难以点击的区域,for用来定义与label关联的表单控件

  readonly只读控件 disabled禁用：禁用的表单控件值不会被收集和发送给后端，无法选中

  表单分组

  带有边框和标题的表单：

  <fieldset>
    <legend>标题legend>
fieldset>

  边框的作用是为了将相关字段进行视觉上的区块划分，在分组标签中添加其他控件，需要放置到legend标签的后面

  表单按钮

  value=“ ”给按钮起名字

  • 提交按钮：点击确认提交信息同时发送表单数据给后台的功能

    点击按钮时：

    • 页面刷新了：数据提交给后台服务器，后台服务器将数据保存到数据库中，这里的服务器会给网页的表单提供一个访问地址

      值为服务器地址

    • 输入框的内容消失了

      也可以保留：给form定义一个target属性（可以是_blank也可以是__self)

    • 浏览器地址栏里多了一个问号

  • 重置按钮：清除输入框内容

  • 普通按钮：

  • 图像按钮：用图片替代了提交按钮的外观

  ​

  • 双标签button按钮：

  ​ 加上type="button"变成普通按钮，提交表单功能消失

  表单的数据采集和表单提交

  给输入框定义name属性，name的值帮助我们存储用户输入的内容，显示在地址栏。form的action属性里填服务器地址，数据提交给服务器。

  如果数据存在敏感信息，不应该显示在地址栏里，解决方法是给form标签里定义method属性（有get和post两个值）。

  • get是默认值，浏览器会把收集好的表单数据，加到服务器地址后面，提交给服务器。
  • post值不但能够收集表单的数据，而且不会在地址栏里暴露隐私数据。

  其他实用标签

  ---

  表示水平线，作用是在网页上画出一条水平分隔线。

  ---

  • width/size:分别控制水平线的宽度和高度。默认水平线的宽度是横跨整个屏幕，搞得为2px。
  • noshade:用来去掉水平线阴影。
  • color：用于定义水平线的颜色。
  • align：用来调整水平线水平对齐方式。默认水平居中对齐。

  双标签，表示预格式化的文本，文本将完全按照HTML源代码中格式显示。
 
  
双标签，定义一个图像映射，点击图片不同区域实现链接页面的跳转。
 
  
<map name="">
  <area href="" shape="" coords="">
map>
 
  
name与img标签的usemap属性相关联,
 
  
area单标签，定义图片上的热点区域，通过area标签可以设置热点区域的位置、大小及形状。
 
  
 
   
href属性用来定义热点区域链接的目标地址。
 
   
shape用来定义区域的形状。default:所有区域 rect：矩形 circle：圆形 poly：多边形
 
   
coords属性用来定义可点击区域的坐标
 
  
 
  
iframe
 
  
双标签，用来在一个网页中显示另一个网页。
 
  
<iframe src="页面路径" width="数字" height="数字" frameborder="0" scrolling="yes">iframe>
 
  
 
   
 
src:用于引入其他网站页面
 
 
   
 
width：用以控制引入页面的宽度。
 
 
   
 
height：用以控制引入页面的高度。
 
 
   
 
frameborder:默认引入页面带有边框，通常情况下将该属性值设为0来取消边框
 
 
   
 
scrolling：用以控制是否显示框架的滚动条
 
yes:始终显示 滚动条 no：从不显示滚动条 auto：在需要的情况下出现滚动条
 
 
  
 
  
a链接的地址可以是互联网的网站地址，也可以是自己制作的本地页面地址，这些页面都可以在iframe中显示
 
  
<a href="http://www.baidu.com" target="iframe_a">百度a>
<iframe name="iframe_a">iframe>
 
  
SVG
 
  
SVG是一种基于XML语法的图像格式，即可缩放矢量图。它本身是文本文件，体积较小，且不管放大多少倍都不会失真。可以通过html来绘制SVG图片。标签是SVG图片的一个容器。
 
  
 
  
其中width、height分别指画布的宽度、高度。
 
  
SVG预定义形状元素
 
  
绘制矩形
 
  
 
  
 
   
 
width:定义矩形宽度
 
 
   
 
height：定义矩形高度
 
 
   
 
fill：定义矩形填充颜色
 
 
   
 
stroke-width:定义矩形边框宽度
 
 
   
 
stroke：定义矩形边框颜色
 
 
   
 
fill-opacity：定义填充颜色的不透明度，合法值范围0到1，透明度值越小，透明度越高
 
 
   
 
stroke-opacity：定义描边颜色的不透明度，合法值范围0到1
 
 
   
 
opacity：整个元素的不透明度，范围0到1
 
 
  
 
  
绘制圆角矩形
 
  
 
  
如果两个值相等，就是一个圆形的角，如果两个值不相等，就是一个椭圆形的角。
 
  
绘制圆形
 
  
 
  
 
   
cx：定义圆形中心x坐标
 
   
cy：定义圆形中心y坐标
 
   
r：定义圆形半径
 
  
 
  
绘制椭圆形
 
  
 
  
 
   
cx：定义椭圆中心x坐标
 
   
cy：定义椭圆中心y坐标
 
   
rx：定义水平半径
 
   
ry：定义垂直半径
 
  
 
  
绘制线条
 
  
 
  
由两个点的坐标连成。坐标起点是画布的左上角。
 
  
绘制多边形
 
  
 
  
 
   
points：定义每个点的坐标，坐标之间用空格隔开。
 
  
 
  
绘制多线条
 
  
 
  
绘制路径
 
  
应用路径可以绘制任意形状的图形。
 
  
 
  
 
   
d:用来定义绘制路径的命令。如： 
    
 
     
M命令（moveto）：d="M150 0"表示从（150,0）这个点开始绘制
 
     
L命令（lineto）：用来绘制一条直线,表示从上个结束点到x75,y200这个点绘制一条直线
 
     
q命令：用来绘制二次贝塞尔曲线。q 150 -300 300 0 表示控制点坐标是（150，-300），终点坐标是（300,0）
 
    
 
 
  
 
  
g标签
 
  
SVG中可以使用g标签将多个绘图元素包裹起来，在g标签上定义公共属性。
 
  
<g>
   <path />
   <circle />
   <text> text>
g>
 
  
SVG描边属性
 
  
<path stroke /> //笔画属性
<path stroke-width />  //笔画宽度属性
<path stroke-linecap />  //笔画笔帽属性
<path stroke-dasharray />  //虚线笔画属性
 
  
模糊和阴影效果
 
  
filter过滤器
 
  
<defs>
  <filter id>
      <feGaussianBlur stdDeviation="" />
  filter>
defs>
 
  
feGaussianBlur通过stdDeviation属性定义模糊数量，值是数字，值越大模糊程度越高
 
  
<filter>
   <feOffset dx="" dy="" in="" />
    <feBlend in="SourceGraphic"/>
filter>
 
  
 
   
dx,dy表示阴影在x,y轴上的偏移量
 
   
in表示阴影图像的来源：黑色SourceAlpha 原始图像SourceGraphic
 
  
 
  
feBlend在原始图像上混合阴影图像。
 
  
线性渐变和径向渐变
 
  
线性渐变
 
  
<defs>
   <linearGradient x1="" y1="" x2="" y2="">
      <stop offset="10%" stop-color="" />
   linearGradient>
defs>
 
  
y1=y2 x1≠x2 水平渐变
 
  
x1=x2 y1≠y2 垂直渐变
 
  
x1≠x2 y1≠y2 角度渐变
 
  
线性渐变的颜色范围可以由两种或多种颜色组成，stop定义颜色，offset属性用于定义渐变颜色的开始和结束位置，stop-color定义渐变颜色
 
  
径向渐变
 
  
<defs>
   <radialGradient id="" cx="" cy="" r="" fx="" fy="" >
       <stop offset="10%" stop-color="" />
   radialGradient>
defs>
 
  
id属性定义渐变唯一名称，cx,cy,r定义最外面的圆，fx,fy定义最里面的圆
 
  

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    

                        
                        

                            
 
                        
                        
                        

                            

                        
                        
                        

                            

                        
                    
                
            
        
    
    

        
你可能感兴趣的:(web前端开发,前端,html,javascript)
        

            

                

                    
Long类型前后端数据不一致
                        igotyback
前端
                        
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
                    
                    
swagger访问路径
                        igotyback
swagger
                        
Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
                    
                    
html 中如何使用 uniapp 的部分方法
                        某公司摸鱼前端
htmluni-app前端
                        
示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
                    
                    
四章-32-点要素的聚合
                        彩云飘过

                        
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
                    
                    
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理
                        STU学生网页设计
网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
                        
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
                    
                    
【加密社】Solidity 中的事件机制及其应用
                        加密社
闲侃区块链智能合约区块链
                        
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
                    
                    
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript
                        二挡起步
web前端期末大作业javascripthtmlcss旅游风景
                        
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
                    
                    
HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动
                        二挡起步
web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
                        
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
                    
                    
node.js学习
                        小猿L
node.jsnode.js学习vim
                        
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
                    
                    
springboot+vue项目实战一-创建SpringBoot简单项目
                        苹果酱0567
面试题汇总与解析springboot后端java中间件开发语言
                        
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
                    
                    
JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）
                        跳房子的前端
前端面试javascript开发语言ecmascript
                        
在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
                    
                    
博客网站制作教程
                        2401_85194651
javamaven
                        
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
                    
                    
00. 这里整理了最全的爬虫框架（Java + Python）
                        有一只柴犬
爬虫系列爬虫javapython
                        
目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
                    
                    
详解：如何设计出健壮的秒杀系统？
                        夜空_2cd3

                        
作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
                    
                    
JavaScript `Map` 和 `WeakMap`详细解释
                        跳房子的前端
JavaScript原生方法javascript前端开发语言
                        
在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
                    
                    
最简单将静态网页挂载到服务器上(不用nginx)
                        全能全知者
服务器nginx运维前端html笔记
                        
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
                    
                    
补充元象二面
                        Redstone Monstrosity
前端面试
                        
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
                    
                    
微信小程序开发注意事项
                        jun778895
微信小程序小程序
                        
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
                    
                    
切换淘宝最新npm镜像源是
                        hai40587
npm前端node.js
                        
切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
                    
                    
字节二面
                        Redstone Monstrosity
前端面试
                        
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
                    
                    
斟一小组鸡血视频
                        和自己一起成长

                        
http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
                    
                    
前端代码上传文件
                        余生逆风飞翔
前端javascript开发语言
                        
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
                    
                    
Dockerfile命令详解之 FROM
                        清风怎不知意
容器化java前端javascript
                        
许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
                    
                    
《HTML 与 CSS—— 响应式设计》
                        陈在天box
htmlcss前端
                        
一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
                    
                    
【C语言】- 自定义类型：结构体、枚举、联合
                        Cavalier_01
C语言
                        
【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523
                    
                    
uniapp实现动态标记效果详细步骤【前端开发】
                        2401_85123349
uni-app
                        
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
                    
                    
高性能javascript--算法和流程控制
                        海淀萌狗

                        
-for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
                    
                    
html+css网页设计 旅游网站首页1个页面
                        html+css+js网页设计
htmlcss旅游
                        
html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
                    
                    
spring mvc @RequestBody String类型参数
                        zoyation
spring-mvcspringmvc
                        
通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
                    
                    
ubuntu安装opencv最快的方法
                        Derek重名了

                        
最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html
                    
                                
jdk tomcat 环境变量配置
                                    Array_06
javajdktomcat
                                    
Win7 下如何配置java环境变量 
 
1。准备jdk包，win7系统，tomcat安装包（均上网下载即可） 
2。进行对jdk的安装，尽量为默认路径（但要记住啊！！以防以后配置用。。。） 
3。分别配置高级环境变量。 
   电脑-->右击属性-->高级环境变量-->环境变量。 
 
 
分别配置 : 
 
path   
 &nbs
                                
                                
Spring调SDK包报java.lang.NoSuchFieldError错误
                                    bijian1013
javaspring
                                    
        在工作中调另一个系统的SDK包，出现如下java.lang.NoSuchFieldError错误。 
org.springframework.web.util.NestedServletException: Handler processing failed; nested exception is java.l
                                
                                
LeetCode[位运算] - #136 数组中的单一数
                                    Cwind
java题解位运算LeetCodeAlgorithm
                                    
原题链接：#136 Single Number 
要求： 
给定一个整型数组，其中除了一个元素之外，每个元素都出现两次。找出这个元素 
注意：算法的时间复杂度应为O(n)，最好不使用额外的内存空间 
难度：中等 
分析： 
题目限定了线性的时间复杂度，同时不使用额外的空间，即要求只遍历数组一遍得出结果。由于异或运算 n XOR n = 0, n XOR 0 = n，故将数组中的每个元素进
                                
                                
qq登陆界面开发
                                    15700786134
qq
                                    
今天我们来开发一个qq登陆界面，首先写一个界面程序，一个界面首先是一个Frame对象，即是一个窗体。然后在这个窗体上放置其他组件。代码如下： 
public class First {         public void initul(){        jf=ne
                                
                                
Linux的程序包管理器RPM
                                    被触发
linux
                                    
在早期我们使用源代码的方式来安装软件时，都需要先把源程序代码编译成可执行的二进制安装程序，然后进行安装。这就意味着每次安装软件都需要经过预处理-->编译-->汇编-->链接-->生成安装文件--> 安装，这个复杂而艰辛的过程。为简化安装步骤，便于广大用户的安装部署程序，程序提供商就在特定的系统上面编译好相关程序的安装文件并进行打包，提供给大家下载，我们只需要根据自己的
                                
                                
socket通信遇到EOFException
                                    肆无忌惮_
EOFException
                                    
java.io.EOFException 
at java.io.ObjectInputStream$PeekInputStream.readFully(ObjectInputStream.java:2281) 
at java.io.ObjectInputStream$BlockDataInputStream.readShort(ObjectInputStream.java:
                                
                                
基于spring的web项目定时操作
                                    知了ing
javaWeb
                                    
废话不多说，直接上代码，很简单 配置一下项目启动就行 
1，web.xml 
 

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="h
                                
                                
树形结构的数据库表Schema设计
                                    矮蛋蛋
schema
                                    
原文地址： 
http://blog.csdn.net/MONKEY_D_MENG/article/details/6647488 
 
 
    程序设计过程中，我们常常用树形结构来表征某些数据的关联关系，如企业上下级部门、栏目结构、商品分类等等，通常而言，这些树状结构需要借助于数据库完成持久化。然而目前的各种基于关系的数据库，都是以二维表的形式记录存储数据信息，
                                
                                
maven将jar包和源码一起打包到本地仓库
                                    alleni123
maven
                                    
http://stackoverflow.com/questions/4031987/how-to-upload-sources-to-local-maven-repository 
 
 
 
<project>
  ...
  <build>
    <plugins>
      <plugin>
        <groupI
                                
                                
java IO操作 与 File 获取文件或文件夹的大小，可读，等属性！！！
                                    百合不是茶

                                    
类 File 
File是指文件和目录路径名的抽象表示形式。 
1，何为文件： 
标准文件（txt doc mp3...） 
目录文件（文件夹） 
虚拟内存文件 
  
2，File类中有可以创建文件的 createNewFile（）方法,在创建新文件的时候需要try{} catch(）{}因为可能会抛出异常；也有可以判断文件是否是一个标准文件的方法isFile();这些防抖都
                                
                                
Spring注入有继承关系的类（2）
                                    bijian1013
javaspring
                                    
被注入类的父类有相应的属性，Spring可以直接注入相应的属性，如下所例：1.AClass类 
package com.bijian.spring.test4;

public class AClass {

    private String a;
    private String b;
   
    public String getA() {
        retu
                                
                                
30岁转型期你能否成为成功人士
                                    bijian1013
成长励志
                                    
        很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人
                                
                                
【Velocity四】Velocity与Java互操作
                                    bit1129
velocity
                                    
Velocity出现的目的用于简化基于MVC的web应用开发，用于替代JSP标签技术，那么Velocity如何访问Java代码.本篇继续以Velocity三http://bit1129.iteye.com/blog/2106142中的例子为基础， 
     POJO 
   
package com.tom.servlets;

public
                                
                                
【Hive十一】Hive数据倾斜优化
                                    bit1129
hive
                                    
什么是Hive数据倾斜问题 
  
 
 操作：join,group by,count distinct 
 现象：任务进度长时间维持在99%（或100%），查看任务监控页面，发现只有少量（1个或几个）reduce子任务未完成；查看未完成的子任务，可以看到本地读写数据量积累非常大，通常超过10GB可以认定为发生数据倾斜。 
 原因：key分布不均匀 
 倾斜度衡量：平均记录数超过50w且
                                
                                
在nginx中集成lua脚本：添加自定义Http头，封IP等
                                    ronin47
nginx lua csrf
                                    
Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com 
Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 
location /{
                                
                                
java-3.求子数组的最大和
                                    bylijinnan
java
                                    
package beautyOfCoding;


public class MaxSubArraySum {

	/**
	 * 3.求子数组的最大和
题目描述：
输入一个整形数组，数组里有正数也有负数。
数组中连续的一个或多个整数组成一个子数组，每个子数组都有一个和。
求所有子数组的和的最大值。要求时间复杂度为O(n)。
例如输入的数组为1, -2, 3, 10, -4,
                                
                                
Netty源码学习-FileRegion
                                    bylijinnan
javanetty
                                    
今天看org.jboss.netty.example.http.file.HttpStaticFileServerHandler.java 
可以直接往channel里面写入一个FileRegion对象，而不需要相应的encoder： 
 


		//pipeline（没有诸如“FileRegionEncoder”的handler）：
		public ChannelPipeline ge
                                
                                
使用ZeroClipboard解决跨浏览器复制到剪贴板的问题
                                    cngolon
跨浏览器复制到粘贴板Zero Clipboard
                                    
Zero Clipboard的实现原理 
Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。 
Zero Clipboard的安装方法 
首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js 
                                
                                
单例模式
                                    cuishikuan
单例模式
                                    
第一种（懒汉，线程不安全）： 
public class Singleton {   2     private static Singleton instance;   3     pri
                                
                                
spring+websocket的使用
                                    dalan_123

                                    
一、spring配置文件 
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"    xmlns:xsi="http://www.w3.or
                                
                                
细节问题：ZEROFILL的用法范围。
                                    dcj3sjt126com
mysql
                                    
   1、zerofill把月份中的一位数字比如1，2，3等加前导0 
 
      
mysql> CREATE TABLE t1 (year YEAR(4), month INT(2) UNSIGNED ZEROFILL,    -> day
                                
                                
Android开发10——Activity的跳转与传值
                                    dcj3sjt126com
Android开发
                                    
Activity跳转与传值，主要是通过Intent类，Intent的作用是激活组件和附带数据。 
  
一、Activity跳转 
方法一Intent intent = new Intent(A.this, B.class); startActivity(intent) 
  
方法二Intent intent = new Intent();intent.setCla
                                
                                
jdbc 得到表结构、主键
                                    eksliang
jdbc 得到表结构、主键
                                    
转自博客：http://blog.csdn.net/ocean1010/article/details/7266042 
假设有个con DatabaseMetaData dbmd = con.getMetaData(); rs = dbmd.getColumns(con.getCatalog(), schema, tableName, null); rs.getSt
                                
                                
Android 应用程序开关GPS
                                    gqdy365
android
                                    
要在应用程序中操作GPS开关需要权限： 
 

<uses-permission android:name="android.permission.WRITE_SECURE_SETTINGS" />
 
但在配置文件中添加此权限之后会报错，无法再eclipse里面正常编译，怎么办？ 
1、方法一：将项目放到Android源码中编译； 
2、方法二：网上有人说cl
                                
                                
Windows上调试MapReduce
                                    zhiquanliu
mapreduce
                                    
1.下载hadoop2x-eclipse-plugin https://github.com/winghc/hadoop2x-eclipse-plugin.git 把 hadoop2.6.0-eclipse-plugin.jar 放到eclipse plugin 目录中。 2.下载 hadoop2.6_x64_.zip http://dl.iteye.com/topics/download/d2b
                                
                                
如何看待一些知名博客推广软文的行为？
                                    justjavac
博客
                                    
本文来自我在知乎上的一个回答：http://www.zhihu.com/question/23431810/answer/24588621 
互联网上的两种典型心态： 
 
  当初求种像条狗，如今撸完嫌人丑  
  当初搜贴像条犬，如今读完嫌人软  
 
你为啥感觉不舒服呢？ 
难道非得要作者把自己的劳动成果免费给你用，你才舒服？ 
就如同 Google 关闭了 Gooled Reader，那是
                                
                                
sql优化总结
                                    macroli
sql
                                    
为了是自己对sql优化有更好的原则性，在这里做一下总结，个人原则如有不对请多多指教。谢谢！ 
  
要知道一个简单的sql语句执行效率，就要有查看方式，一遍更好的进行优化。 
  
一、简单的统计语句执行时间 
declare @d datetime ---定义一个datetime的变量set @d=getdate() ---获取查询语句开始前的时间select user_id
                                
                                
Linux Oracle中常遇到的一些问题及命令总结
                                    超声波
oraclelinux
                                    
1.linux更改主机名 
  
(1)#hostname oracledb　　　　临时修改主机名 
(2) vi /etc/sysconfig/network 　　修改hostname 
(3) vi /etc/hosts　　　　　　　　修改IP对应的主机名 
  
2.linux重启oracle实例及监听的各种方法 
（注意操作的顺序应该是先监听，后数据库实例） 
&nbs
                                
                                
hive函数大全及使用示例
                                    superlxw1234
hadoophive函数
                                    
  
具体说明及示例参 见附件文档。  
  
  
文档目录： 
  
目录 
一、关系运算： 4 
1. 等值比较: = 4 
2. 不等值比较: <> 4 
3. 小于比较: < 4 
4. 小于等于比较: <= 4 
5. 大于比较: > 5 
6. 大于等于比较: >= 5 
7. 空值判断: IS NULL 5
                                
                                
Spring 4.2新特性-使用@Order调整配置类加载顺序
                                    wiselyman
spring 4
                                    
4.1 @Order 
 
 Spring 4.2 利用@Order控制配置类的加载顺序 
  
4.2 演示 
 
 两个演示bean 
 
package com.wisely.spring4_2.order;

public class Demo1Service {

}

 
package com.wisely.spring4_2.order;

public class
                                
                
            
        
    


    

        

            按字母分类：
            ABCDEFGHIJKLMNOPQRSTUVWXYZ其他
        
    


    

        

            首页 -
            关于我们 -
            站内搜索 -
            Sitemap -
            侵权投诉
        
        
版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.