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)



uni-app实现 步骤条
夏夏的码农
uni-app
实现如图样式html部分代码如下投资期限与收益0?'active':'default'">募集开始1?'active':'default'">募集结束2?'active':'default'">产品成立3?'active':'default'">产品到期0?'active-step1':'step1'">1?'active-st

大前端-postcss安装使用指南
黑夜照亮前行的路
postcss
PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把

谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程
pigerr杨
Pythonpythonchromedrivers
ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装

虚拟 DOM 的优缺点有哪些
咕噜签名分发
前端javascript开发语言
虚拟DOM（VirtualDOM）技术作为现代前端开发中的重要组成部分，已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势，同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点，深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异，最小化实际DOM操作，从而减少页面重渲染时的性能消耗。这种优

3、JavaWeb-Ajax/Axios-前端工程化-Element
所谓远行Misnearch
#JavaWeb前端ajaxelementuijava前端框架
P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名

python转码
Desamond
python开发语言
转码在许多场景中都有应用，以下是一些常见的场景：网页开发：当用户在网页上输入文本时，可能需要将特殊字符（如空格、引号、特殊符号等）进行转码，以防止这些字符对URL或HTML代码产生干扰。文件名处理：在处理文件名时，可能需要将特殊字符进行转码，以避免文件名被错误地解析或显示。数据传输：在数据传输过程中，为了确保数据的完整性和正确性，可能需要将数据中的特殊字符进行转码。数据存储：在数据库或数据存储中，

Python dict字符串转json对象，小数精度丢失问题
朝如青丝 暮成雪
jsonpython
一前言JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式，dict是Python的一种数据格式。本篇介绍一个float数据转换时精度丢失的案例。二问题描述importjsontest_str1='{"π":3.1415926535897932384626433832795028841971}'test_str2='{"value":10.00000}'print

java实体中返回前端的double类型四舍五入（格式化）
婲落ヽ紅顏誶
java
根据业务，需要通过后端给前端返回部分double类型的数值，一般需要保留两位小数，使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f

Django forms组件
在飞行-米龙
Djangodjangopython后端
【一】引入【1】实现登陆验证功能（1）需求分析登陆验证需要前后端交互，采用form表单提交数据对数据进行校验用户名必须以英文大写字母开头密码必须大于三位数反馈给用户错误的信息除了反馈错误的信息还有保留原始输入内容（2）后端代码使用user_info_dict字典每次刷新存储存储前端发送的信息存储后端进行验证的信息defhome(request):#每次后刷新这个信息字典user_info_dict

UNDERSTANDING HTML WITH LARGE LANGUAGE MODELS
liferecords
LLM语言模型人工智能自然语言处理
UNDERSTANDINGHTMLWITHLARGELANGUAGEMODELS相关链接：arXiv关键字：大型语言模型、HTML理解、Web自动化、自然语言处理、机器学习摘要大型语言模型（LLMs）在各种自然语言任务上表现出色。然而，它们在HTML理解方面的能力——即解析网页的原始HTML，对于自动化基于Web的任务、爬取和浏览器辅助检索等应用——尚未被充分探索。我们为HTML理解模型（经过微调

Web前端Html的表单
任家伟
前端html
表单的关键字：form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读，不可修改，但是可以提交disabled=“disabled”禁用组件不可修改，不能提交type=“password”密码框type=“radio”单

Thinkphp - 详细实现网站系统登录功能，附带 Mysql 数据库设置、Web 前端展示界面、信息校验等（详细代码，即设计过程）
王佳斌
+Thinkphpmysql前端数据库
前言登录功能，是我们几乎开发每个系统都必须的模块。登录功能设计思路，主要包括几个方面。用户输入网址展示登录页面用户输入用户名，密码等点击登录进行信息校验校验通过之后，记录用户登录信息，跳转指定页面用户校验失败，提示失败信息页面目录具体功能实现为了快速搭建可用、美观的页面，我们采用一个比较成熟的前端框架Bootstrap。下面我们到Bootstrap的官网Bootsrap官网下载bootstrap。

javascript 日期转换为时间戳，时间戳转换为日期的函数
cdcdhj
javascript学习日记javascript开发语言ecmascript
日期转化为时间戳，主要用valueOf()来进行转化为毫秒时间戳，getTime()IOS系统无法解析转换，所以都有valueOf()letgetTimestampOrDate=function(timestamp){lettimeStamp='';constregex=/^\d{4}(-|\/)\d{2}(-|\/)\d{2}$/;constregex2=/^\d{4}(-|\/)\d{2}(-

COMP315 JavaScript Cloud Computing for E Commerce
zhuyu0206girl
javascript开发语言ecmascript
Assignment1:Javascript1IntroductionAcommontaskincloudcomputingisdatacleaning,whichistheprocessoftakinganinitialdatasetthatmaycontainerroneousorincompletedata,andremovingorfixingthoseelementsbeforeform

JSON与AJAX：网页交互的利器
入冉心
jsonajax前端
在现代Web开发中，JSON（JavaScriptObjectNotation）和AJAX（AsynchronousJavaScriptandXML）是两项不可或缺的技术。它们共同为网页提供了动态、实时的数据交互能力，为用户带来了更加流畅和丰富的体验。本文将详细介绍JSON和AJAX的概念、原理，并通过代码示例展示它们在实际开发中的应用。一、JSON：轻量级的数据交换格式JSON是一种轻量级的数据

程序员开发技术整理
laizhixue
学习前端框架
前端技术：vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术：webservice：soap架构：简单的通信协议，用于服务通信ORM框架：对象关系映射，如EF：对象实体模型，是ado.net中的应用技术soap服务通讯：xml通讯ado.net：OAuth2:登录授权认证：Token认证：JWT：jsonwebtokenJava后端技术：便捷工

【前端学习——js篇】7.函数缓存
笔下无竹墨下有鱼
前端学习前端学习javascript
具体见：https://github.com/febobo/web-interview7.函数缓存函数缓存，就是将函数运算过的结果进行缓存本质上就是用空间（缓存存储）换时间（计算过程）常用于缓存数据计算结果和缓存对象。其实现主要通过闭包、柯里化和高阶函数。下面主要介绍下柯里化：①柯里化柯里化（currying)是一种函数式编程的概念，指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的

javascript的数据类型及转换
田小田txt
一、JavaScript数据类型：共有string，number，boolean，object，function五种数据类型；其中Object，Date，Array为对象型；2个不包含任何值的数据类型：null，undefined。二、Typeof查看数据类型：typeof"John"//返回stringtypeof3.14//返回numbertypeofNaN//返回numbertypeoffa

html版本号 webpack_html-webpack-plugin详解
weixin_39994949
html版本号webpack
引言最近在react项目中初次用到了html-webapck-plugin插件，用到该插件的两个主要作用：为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口有了这种插件，那么在项目中遇到类似上面

HTML语言剖析
混沌破晓
HTML语言剖析Html简介-目录全写：HyperTextMark-upLanguage译名：超文本标识语言简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标签（tag）使文件达到预期的显示效果。由文字（字母，数字、标点符号）及标签组合而成。任何文字编辑器都可以，这里推荐用：Dreamweaver。1.Html特点：►描述性语言，结构语言，用于决定网页内容以什么样的形式显示；►通过标签

Websocket服务监听收发消息
beiback
Java服务器问题websocket网络协议网络
目录1.pom依赖坐标2.项目配置端口和项目包名2.创建处理器3.注册处理器4.前端页面1.pom依赖坐标org.springframework.bootspring-boot-starter-websocket2.项目配置端口和项目包名application.propertiesserver.port=8088//路径规范：为应用的所有servlet提供一个统一的前缀，使URL结构更加清晰和一致

Netty服务器结合WebSocke协议监听和接收数据
beiback
服务器问题Java服务器运维netty
目录1.pom依赖2.配置属性3.创建netty服务器4.建立监听和响应5.创建启动器6.前端static下页面7.前端js8.注意异常问题9.创建netty服务器--使用守护线程1.pom依赖io.nettynetty-all4.1.86.Final2.配置属性application.properties#启动端口server.port=8088server.servlet.context-pa

基于SSM+Vue企业销售培训系统 企业人才培训系统 企业课程培训管理系统 企业文化培训班系统Java
计算机程序老哥
作者主页：计算机毕业设计老哥有问题可以主页问我一、开发介绍1.1开发环境开发语言：Java数据库：MySQL系统架构：B/S后端：SSM(Spring+SpringMVC+Mybatis)前端：Vue工具：IDEA或者Eclipse，JDK1.8，Maven二、系统介绍2.1图片展示注册登录页面：登陆.png前端页面功能：首页、培训班、在线学习、企业文化、交流论坛、试卷列表、系统公告、留言反馈、个

CDH 启停使用HiveServer2
金刚_30bf
翻译：https://www.cloudera.com/documentation/enterprise/latest/topics/cdh_ig_hiveserver2_start_stop.html版本：5.14.2HiveServer2是HiveServer的改进版本，支持Kerberos身份验证和多客户端并发访问。您可以使用Beeline客户端访问HiveServer2。警告：如果以远程模

javascript实现SM2加密解密
人生在勤，不索何获
javascript前端jquery
前提JavaWeb环境前端代码window.sm2=function(t){functioni(e){if(r[e])returnr[e].exports;varn=r[e]={i:e,l:!1,exports:{}};returnt[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}varr={};returni.m=t,i.c=r,i.d=fu

Vue：为什么要使用v-cloak
刻刻帝的海角
vue.js前端javascript
Vue.js是一种流行的JavaScript框架，它使我们能够构建交互性强大的用户界面。在Vue.js中，v-cloak是一个指令，用于解决在页面加载时出现的闪烁问题。本文将介绍如何使用v-cloak及代码来优化Vue.js应用程序的渲染效果。引言当我们使用Vue.js构建应用程序时，有时会遇到一个问题：在页面加载时，由于Vue.js需要一定的时间来解析和渲染模板，会导致页面上显示出未经处理的Mu

HTML背景带视频的个人炫酷引导页源码
erthre
源码php
正文:一款简洁大气得个人团队引导HTML单页，非常不错，LOGO支持自行更改替换，可以拿来做为团队官网也可以个人，只是单页没有后台。程序:wwhtxs.lanzouq.com/if6oE0i26ohi图片:

JavaScript快速入门笔记之二（变量、常量、数据类型）
eshineLau
前端开发javascript笔记前端
JavaScript快速入门笔记之二（变量、常量、数据类型）1、变量何时使用变量：程序中的一切数据都要保存在变量中，反复使用如何使用变量：2种情况：赋值和取值赋值：2步：1.1创建变量：——声明——创建一个新的空变量语法：var变量名;强调：仅声明，未赋值的变量，默认值是undefined命名：1.不能以数字开头2.不能用保留字。3.一般采用驼峰命名1.2赋值：将数据保存到变量中语法：变量名=数据

vue生命周期
涡看你就不是好人呐
vue.jsjavascript前端
1.computed是在HTMLDOM加载后马上执行的，如赋值；2.methods则必须要有一定的触发条件才能执行，如点击事件；3.watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再wa

前端埋点解决方案
zhu_zhu_xia
前端
一、前言：基于神策数据的前端埋点解决方案JavaScript快速使用·神策分析使用手册[预览版]二、sdkgitlab下载地址https://github.com/sensorsdata/sa-sdk-javascript/releases或者npm安装npmisa-sdk-javascript三、入门3.1接入sdk以及配置(version1.17.2)，入口文件接入sdk以及添加配置(func

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.