DeDeDeFeng
DeDeDeFeng

【HTML】学习笔记

目录

一、网页的相关概念

浏览器内核

Web标准 

 HTML的基础骨架

 HTML标签分类

 单标签

双标签

HTML标签关系 

 HTML开发工具

 二：HTML标签

HTML标签的语义化

 为什么要有语义化标签

 排版标签

 标题标签

段落标签

水平线标签 

换行标签

div和span标签

 pre标签

文本格式化标签

 标签属性

HTML实体

​编辑 图像标签

标记属性

超链接标签 

 锚点定位

 功能链接

 注释标签

 列表标签

无序列表 ul (unordered list) 

 有序列表 ol (ordered list)

 自定义列表

 语义化容器元素

元素包含关系

iframe标签 

其他标签介绍

time  (提供给浏览器或搜索引擎阅读的时间)

q (一小段引用文本);   blockquote (大段引用的文本)

表格标签

表格的基本语法：

表头单元格

 表格属性

合并单元格

表单标签

表单域

input元素（输入框）

button元素（按钮元素）

label元素 （普通元素，通常配合单选和多选框使用）

select元素 （下拉列表选择框）

 textarea元素（文本域，多行文本框）

datalist元素（数据列表）

fieldset元素 （用于表单分组使用）

 表格标签总结：

一、网页的相关概念

浏览器内核

负责读取网页内容，整理讯息，计算网页的显示方式并显示网页

查看浏览器市场份额：http://tongji.baidu.com/data/browaer

浏览器 内核 备注
IE Trident IE、猎豹安全、360极速浏览器、百度浏览器
firefox Gecko 火狐浏览器内核
Safari Webkit 苹果浏览器内核
chrome、Opera Blink chrome、Opera浏览器内核。Blink其实是WebKit的分支。

*android手机使用Webkit内核（二次开发）

ios手机使用自家Webkit

wp7（window系统的手机）使用IE浏览器Trident内核。

Web标准 

由W3C组织（万维网联盟）和其他标准化组织制定的一系列标准的集合

构成：主要包括结构（Struture）、表现（Presentation）和行为（Behavior）三个方面

结构：用于对网页元素进行整理和分类  >>HTML

表现：用于设置网页元素的版式，颜色，大小等外观样式  >>CSS

行为：网页模型的定义及交互的编写  >>Javascript

二、HTML入门
HTML（英文 Hyper Text-Markup Language的缩写）中文译为“超文本标签(标记)语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

 作用：网页由网页元素组成，这些元素利用HTML标签描述出来，通过浏览器解析，显示给用户

超文本：

1.可以加入图片、声音、动画、多媒体等内容（超越文本限制）

2.可以从一个文件跳转到另一个文件，与世界各地主机的文本连接（超级链接文本）例：

 HTML的基础骨架

 HTML骨架标签总结

标签名 定义 说明
HTML标签 页面中最大的标签，我们称为根标签
文档的头部 注意在head标签中我们必须要设置的标签是title
文档的标题 让页面拥有一个属于自己的网页标题
文档的主体 元素包含文档的所有内容，页面内容基本是放到body里面的，p,h,a,b,u,i,,s,em,del,ins,strong,img等

例如：vscode编译器！+回车快速生成html骨架




    
    
    
    Document

文档声明，告诉浏览器，当前文档使用的是html标准是HTML5。不写声明文档，将导致浏览器进入怪异渲染模式。

 lang属性：language，全局属性，表示该元素内部使用的文字是哪一种自然语言书写而成的。

en：英文             zh-CN：中文              fr：法文

 

文档的元数据：附加信息；charset：指定网页内容编码。

HTML骨架的快速生成（vscode）

1.html:5   然后按下Tab键即可生成HTML骨架

2.！         然后按下Tab键即可生成HTML骨架

 HTML标签分类

在HTML标签中，带有“<>"符号的元素被成为HTML标签，如上面提到的、、都是HTML标签，所谓标签就是放在“<>”标签符中表示某个功能的编码命令，也称为HTML标签或者HTML元素。

 单标签

<标签名/>

单标签也称空标签，是指用一个标签符号即可完成的描述某个功能，例

双标签

<标签名>内容

该语法中 “<标签名>” 表示该标签的开始，一般称为 “开始标签(start tag)”，“” 表示该标签的作用结束，一般称为 “结束标签(end tag)”。和开始标签相比，结束标签只是在前面加了一个关闭符 “/” 。 比如： 我是body

 总结

元素（标签，标记）=起始标记（begin tag）+结束标记（end tag）+元素内容+元素属性

属性=属性名+属性值

属性的分类：1.局部属性：某些元素的特有的属性

                      2.全局属性：所有属性通用

HTML标签关系 

HTML标签的相互关系就分为两种：

嵌套关系（父子关系）

 并列关系（兄弟关系）

总结

如果两个标签之前的关系是嵌套关系，子元素最好缩进一个tab键的身位。

如果是并列关系，最好上下对齐。

 HTML开发工具

市面上前端普遍的开发工具有以下几种

Dreamweaver、sublime、Webstrom、HBuilder、Visual Studio Code(微软发布[免费/开源/跨平台]的现代化代码编辑器)

推荐大家去使用Vscode的，一个字牛，不仅运行代码速度快，插件多，而且我最喜欢的是因为它的轻量级。第二个推荐的就是Webstorm了，功能齐全，唯一不舒服的就是比不上Vscode的速度，代码运行起来有些臃肿，不过也算极好的了，当然写代码最重要的不是工具的好坏，找到适合你的工具才是最好的。
————————————————
版权声明：本文为CSDN博主「亦世凡华、」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_53123067/article/details/125560732

 二：HTML标签

HTML标签有很多，这里我们学习最为常用的，后面有些较少用的，我们可以去 MDN 查下手册就可以了。

HTML标签的语义化

所谓标签语义化，就是指标签的含义

1.每一个HTML元素都有具体的含义

a元素：超链接 、p元素：段落、 h1元素：一级标题

2.所有元素与展示效果无关

元素展示到页面的效果应该有css决定，因为浏览器带有默认的css样式

 为什么要有语义化标签

1. 方便代码阅读和维护。

2. 同时让浏览器或者网络爬虫可以很好的解析，从而更好分析其中的内容。

3. 使用语义化标签会具有更好的搜索引擎优化。

核心：合适的地方给一个最为合适的标签。

语义是否良好：当我们去掉CSS之后，网页结构依然井然有序，并且有良好的可读性。

遵循的原则：先确定语义的HTML，再选择合适的CSS        

 排版标签

排版标签主要和CSS搭配使用，显示网页结构的标签，是网页布局最常用的标签

 标题标签

单词缩写：head 头部，标题

为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即

、

、

、

、

和
，没有等后面的标题 





    
    
    
    Document


    
我是一级标题

    
我是二级标题

    
我是三级标题

    
我是四级标题

    
我是五级标题

    
我是六级标题

【HTML】学习笔记_第1张图片

 注意：h1标签因为重要，尽量少用，一般h1都是给logo使用

段落标签

单词缩写：paragraph 段落

在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是

我是段落

 p元素是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大下自动换行。


    
我是段落1

    
我是段落2

 【HTML】学习笔记_第2张图片

水平线标签 

单词缩写：horizontal 横线

在网页中常常看到一些水平线将段落与段落之间分开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片后实现，也可以简单的通过标记来完成，

就是创建横跨网页水平线的标记其基本格式如下：

 也是单标签

    
我是段落1

    

    
我是段落2

【HTML】学习笔记_第3张图片

换行标签

单词缩写：break 打断，换行

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行，如果希望某段文本强制换行显示，就需要使用换行标签。



    
我是段落1

    内容1 内容2 内容3
    内容1 

    内容2 

    内容3

【HTML】学习笔记_第4张图片

div和span标签

div和span两个标签是没有语义的，是我们网页布局主要的两个盒子

div就是 division的缩写， 分割，分区的意思 其实有很多用div来组合的网页

span 跨度，跨距，范围

语法格式如下：

我是div
  我是span

 pre标签

预格式化文本元素

空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格，而pre标签例外，在pre元素中的内容不会出现空白折叠pre元素内容出现的内容，会按照源代码格式显示到页面上。该元素通常用于在网页中显示一些代码，pre元素功能的本质：它有一个默认的css属性。显示代码时，通常外面套code元素，code元素表示代码区域。


  
    
      var i = 2;
      if(i){
        console.log(i);
      }
    
  

  
  

    var i = 2;
    if(i){
      console.log(i);
    }

 【HTML】学习笔记_第5张图片

文本格式化标签

在网页中，有时需要问文字设置粗体、斜体和下划线效果，这时就需要用到HTML中的文本格式化标签，是文字以特殊的方法显现。

标签 显示效果
和 文字以粗体的方式显示（html推荐使用strong）
和 文字以斜体的方式显示（html推荐使用em）
和 文字以加删除线的方式显示（html推荐使用del）
和 文字以加下划线的方式显示（html不赞成使用u）

 【HTML】学习笔记_第6张图片

 总结：

、、、 只有使用没有强调的意思，正印证了我们上文讲到的写有语义化的标签更加合适、、l、 语义更强烈。

 标签属性

使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签属性加以设置其基本语法格式如下：

<标签名 属性1='属性值1' 属性2='属性值2' ...> 内容 
例如

在上面的语法中

1.标签可以拥有多个属性，必须写在开始标签中，位于标签名的后面

2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开

3.任何标签的属性都有默认值，省略该属性则取默认值

采取 键值对 的格式 key = "value"的格式

HTML实体

 实体字符 (HTML Entity) 通常用于在页面中显示一些特殊字符。书写格式有两种，如下：

小于符号：<

大于符号：>

空格符号： 

版权符号：©

&符号：&

【HTML】学习笔记_第7张图片 图像标签

 单词缩写：image 图像

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像，就需要使用图像标签接下来将详细介绍图像标签以及和它相关的属性，其基本格式如下：

该语法中src属性用于指定图像文件的路径和文件名，它是img标签的必需属性：

标记属性

属性 属性值 描述
src URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素(XHTML不支持%页面百分比) 设置图像的宽度
height 像素(XHTML不支持%页面百分比) 设置图像的高度
border 数字 设置图像边框的宽度

 标签书写路径的写法

书写路径分为两种：绝对路径和相对路径

站外资源  (非当前网站的资源)  ：书写 绝对路径

站内资源  (当前网站的资源)      :  书写 相对路径（或绝对路径）

绝对路径的书写格式：

        协议名://主机名:端口号/路径 （schema://host:port/path）

协议名：http、https、file  

主机名：域名、IP地址 

端口号：协议是http，默认端口号80；协议是https，默认端口号443

相对路径的书写格式：

以./开头，./表示当前资源所在的目录；可以书写../表示返回上一级目录；相对路径:./可以省略.

下一级路径  /

上一级路径  ../

超链接标签 

单词缩写：anchor 的缩写，基本解释为：锚，铁锚的。

在HTML中创建超链接非常简单，只需要标签环绕需要被链接的对象即可，其基本语法格式如下：

 文本或图像

href(Hypertext Reference的缩写，意思是超文本引用)：

用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接功能。
target：

用于指定链接页面的打开方式其取值有 _self 和 _blank 两种，其中 _self 为默认值，_blank为在新窗口中的打开方式

 这里提一下一个问题，根据上文我们要想点开链接是从新窗口打开的，需要给 a 标签的 target 赋值为 _black，可是在我们日常项目开发中，可能一个网站都要有成百上千的 a 标签，要想每一个都以新窗口打开是不是太费事了？针对这个问题，我在这里讲一下 base 标签的用法。

base标签：可以整体设置链接的打开状态


    
    
    
    Document

如果又想设置有的标签是当前窗口打开，只需在相应的 a 标签设置 target = "_self" 即可。

 注意：

1. 外部链接 需要添加 https://www. ...

2. 内部链接 直接链接内部页面即可，比如 首页

3. 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为 "#"(即href='#')，表示该链接暂时为一个空链接。

4. 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

 锚点定位

通过创建锚点链接，用户能快速定位到目标内容。创建锚点链接分为两步：

1. 使用 “a href="#id名" 创建链接文本  （id属性：全局属性，表示元素在文档中的唯一编号）

2. 使用相应的id名标注跳转目标的位置


    个人生活
    
人生经历

    
我的人生经历

    
个人生活

    
我的个人生活

锚点定位一般用于网页文章含有大量内容时，方便用户查找自己想要了解的内容而提供的快捷锚点以上代码虽然格式如此，但内容太少看不到效果，vscode可以生成乱文用作测试，lorem*100 Tab或者 回车键 来看一看。

 【HTML】学习笔记_第8张图片

 功能链接

 点击后，触发某个功能（只做了解即可）

1. 执行JS代码，javascript:


  
    弹出：你好!

 【HTML】学习笔记_第9张图片

 2. 发送邮件，mailto:  （不过需要要求用户计算机上安装有邮件发送软件：exchange）


  
    点击给我发送邮件

【HTML】学习笔记_第10张图片

 3. 拨号 tel: （不过需要要求用户计算机上安装有拨号软件，或使用的是移动端访问）


  
    点击给我拨打电话

【HTML】学习笔记_第11张图片

 注释标签

 HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签，其基本格式如下：

注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到

 列表标签

 什么是列表？把....制成表，以表显示

容器里面装载着文字或图表的一种形式，叫列表。列表最大的特点就是 整齐、整洁、有序。

无序列表 ul (unordered list) 

无序列表的各个列表项之间没有顺序级别之分，是并列的。无序列表常用于制作菜单 或 新闻列表。其基本语法格式如下：


  xxx美女择偶条件：
  
    
    
  • 有责任心
    • 
    
  • 会家务
    • 
    
  • 会孝敬老人
    • 
    
  • 年薪30w
    •

注意：

1. 

    中只能嵌套
  • ，直接在
      标签中输入其他标签或者文字的做法是不被允许的。

      2. 

    • 与
      • 之间相当于一个容器，可以容纳所有元素。

      3.  无序列表会带有自己的样式属性，放下那个样式，一会让CSS来！

    • 标签

      去掉

    • 前面的项目符号（小圆点）

      语法：

      list-style : one;

      • 有序列表 ol (ordered list)

      有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

       【HTML】学习笔记_第12张图片

      
  把大象放进冰箱，总共分几步？
  
        
    
      1. 打开冰箱门
        2. 
    
      2. 把大象放进去
        3. 
    
      3. 把冰箱门关上
        4.

      【HTML】学习笔记_第13张图片

       自定义列表

       定义列表常用于对术语和名词进行解释和描述，定义列表的列表项前没有任何项目符号，其基本语法如下：

        
      
    
      名词1
      
    
      名词1解释1
      
    
      名词1解释2

      【HTML】学习笔记_第14张图片

      示例： 

        
      
    
      关注我们
      
    
      新浪微博
      
    
      官方微信
      
    
      联系我们

      【HTML】学习笔记_第15张图片

      注意：

      1.

      里面只能包含
      和

      2.

      和
      个数没有限制，经常是一个
      对应多个

       语义化容器元素

       容器元素：该元素代表一个块区域，内部用于放置其他元素，之前的文章有提到 div 和 span 标签这两者虽然是容器元素但没有语义，现在在学习其它容器元素但是含有语义：

      article：    通常用于表示整篇文章

      header:     通常用于表示页头（表示文章的头部）

      aside:       通常用于表示侧边栏（附加信息）

      section:    通常用于表示文章的章节

      footer：   通常表示页脚（表示文章的尾部）

      元素包含关系

      以前：快级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外；现在元素的包含关系由元素的内容类别决定。

       总结：

      1. 容器元素中可以包含任何元素

      2. a元素中几乎可以包含任何元素

      3. 某些元素有固定的子元素（ul>li, ol>li, dl>dt+dd）

      4. 标题元素和段落元素不能相互嵌套，并且不能包含容器元素

      iframe标签 

       iframe  (框架页) 可替换元素，通常用于在网页中嵌入另一个元素。显示的内容取决于元素的属性

        Document
  


  百度
  斗鱼
  淘宝

      这就有点像target中_self和_black一样，不过我们设置的iframe是让当前链接在我们设置的窗口打开，而不是当前页面打开。窗口可以自己设置，需要借用CSS样式 (后期也会单独讲)

      其他标签介绍

       abbr  (缩写词)

      
    CSS是用于为页面添加样式

      time  (提供给浏览器或搜索引擎阅读的时间)

      
    我学习了HTML

      q (一小段引用文本);   blockquote (大段引用的文本)

      
    最近热播的美剧《权力的游戏》中有一句非常经典的台词：在权力的斗争中，非胜即死，没有中间状态。
    
    
      
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus expedita, nemo itaque tempore maxime magni
        sit autem velit mollitia molestias aspernatur ducimus neque sunt id similique, labore eveniet nostrum
        accusantium.

      【HTML】学习笔记_第16张图片

       link 链接外部资源（CSS,图标）

      
  
  
  
  
  
  
  Document

      rel属性：relation,链接的资源和当前网页的关系;

      type属性：链接资源的MIME类型

      表格标签

      表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟运用表格就显得很重要，一个清爽简约的表格能够把繁琐的数据表现的很有条理。

      表格的基本语法：

       

         

      单元格内的文字

          ...

       

        ...

       1.

      是用于定义表格的标签

      2.

      标签用于定义表格中的行，必须嵌套在
      标签中，相当于表格的行

      3.

      标签中，相当于一行中的每一格子

       4.字母td指表格数据（table data），即数据单元格的内容

      表头单元格

      用于定义表格中的单元格，必须嵌套在
      标签表示HTML表格的表头部分（table head）

       

         

         

      和表格主体两大部分

      总结：

      1.

      用于定义表格的头部。内部必须拥有标签，位于第一行

      2.

      用于定义表格的主体，主要用于放数据本体。

      3.以上标签都是放在

      第一行表头单元格内的文字

          ...

       

       

      单元格内的文字

          ...

       

        ...

       表格属性

      属性名 属性值 描述
      align left 规定表格相对周围元素的对齐方式
      border 1或者“” 规定表格单元是否拥有边框，默认为“”表示没有边框
      cellpadding 像素值 规定单元边缘与其内容之间的空白，默认1像素
      cellspacing 像素值 规定单元格之间的空白，默认2像素
      width 像素值或者百分比 规定表格的宽度

      这些属性要写到表格标签table里面 

      可以将表格分割成表格头部
      标签中

      合并单元格

      合并单元格方式

      1.跨行合并：rowspan=“合并单元格的个数”

      2.跨列合并：colspan=“合并单元格的个数”

      写合并代码：

      1.跨行：最上侧单元格，写合并代码

      2.跨列：最左侧单元格，写合并代码

      表单标签

      表单元素有一系列元素，主要用于收集用户数据，接下来会一一列举常见的表单元素

      一个完整的表单通常由表单域、表单控件（表单元素）、和提示信息3个部分构成

      表单域

      是一个包含表单元素的区域

      在HTML标签中，标签用于定义表单域，以实现用户信息的手机和传递。

      会把它范围内的表单元素信息提交给服务器

       

        各种表单元素控件

      常用属性 

      属性 属性值 作用
      action url地址 用于指定接收并处理表单数据的服务器程序的地址
      method get/post 用于设置表单数据的提交方式，其取值为get或者post
      name 名称 用于指定表单的名称，以区分同一个页面中的多个表单域

      input元素（输入框）

      在英语单词中，input是输入的意思，而在表单元素中标签用于手机用户信息

       在标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多中形式（可以是文本，字段，复选框，掩码后的文本控件，单选按钮，按钮等）

      其语法基本格式如下：

      1.标签为单标签

      2.type属性设置不同的属性值用来指定不同的控件类型

      type属性的属性值及其描述如下：

      属性值 描述
      button 定义可点击按钮（多数情况用于通过javascript启动脚本）
      checkbox 定义复选框
      file 定义输入字段和“浏览”按钮，供文件上传
      hidden 定义隐藏的输入字段
      image 定义图像形式的提交按钮
      password 定义密码字段，该字段中的字符被掩码
      radio 定义单选按钮
      reset 定义重置按钮，重置按钮会清除表单中的所有数据
      submit 定义提交按钮，提交按钮会把表单数据发送到服务器
      text 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

      radio单选按钮

      name是表单元素名字，这里的性别单选按钮必须有相同的名字name，才可以实现多选1

      例如：

        性别:  男  女              人妖

      除type属性外，标签还有其他很多属性，其常用属性如下：

      属性 属性值 描述
      name 由用户自定义 定义input元素的名称
      value 由用户自定义 规定input元素的值
      checked checked 规定此input元素首次加载时应当被选中
      maxlength 正整数 规定输入字段中的字符的最大长度

      value:

      value用于用户选中后提交给后台的信息，必须要加

       总结：

      1.name和value是每个表单元素都有的属性值，只要给后台人员使用

      2.name表单元素的名字，要求单选按钮和复选框有相同的name值

      3.checked元素：用户第一次加载页面时，单选框或者多选框默认选中的那个选项，例如：checked=“checked”或者checked=“true”或者单写一个checked

      4.maxlength用于规定文本框最多输入文字（字母，字符）的数量

      5.新增：file元素

                   type=“file” 文件域，上传文件使用的

      button元素（按钮元素）

      type属性：reset、submit、button，默认值submit

      label元素 （普通元素，通常配合单选和多选框使用）

      显示关联——可以通过for属性，让label元素关联某一个表单元素，for属性书写表单元素id的值

      核心：

      语法：

      隐式关联——直接将 label 嵌套在单选或多选框外面

      
    请选择性别：

      【HTML】学习笔记_第17张图片

      select元素 （下拉列表选择框）

      select元素通常要和option(表示下拉列表的选项)元素配合使用

      语法：

      1.

      【HTML】学习笔记_第18张图片

      multiple标签：允许在下拉列表中进行多选

      
    请输入你喜欢的主播：

      【HTML】学习笔记_第19张图片

       textarea元素（文本域，多行文本框）

      
    
      请填写简介：

      【HTML】学习笔记_第20张图片

       cols=“每行中的字符数”  row=”显示的行数“，我们实际中用CSS来改变大小

      datalist元素（数据列表）

      该元素本身不会显示到页面上，通常用于和普通文本框配合使用， 标签规定了 元素可能的选项列表，用来在为 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。

      
  
      
      请输入你常用的浏览器：

      【HTML】学习笔记_第21张图片

      fieldset元素 （用于表单分组使用）

      通常我们开发的时候，比如登录框，我们会把账号信息和基本信息进行分组

      
  
      
    
      修改用户信息
      
    
      
      账号信息
      
      
        用户账号：
        
      
      
      
      
        用户密码：
        
      
      
    
      
    
      
      基本信息
      
      
        用户姓名：
        
      
      
      
      
        城市：

       【HTML】学习笔记_第22张图片

      设置表单状态

      在日常生活中我们可能会遇到一些根本无法点击的按钮，这就涉及到表单的状态了

      【HTML】学习笔记_第23张图片

       表格标签总结：

      
  
      
    
    
  
      
  
      
    
    
  
      
  
      
    
    
  
      
  
      
    
    
  
      
  
      
    
    
  
      
  
      
    
    
  
      
  
      
    
    
  
      
  
      
    
    游戏：
    
    阅读：
    
    电影：
    
    音乐：
    
    其他：
    
  
      
  
      
    
    性别：
    
    男
    
    女

      【HTML】学习笔记_第24张图片

      你可能感兴趣的:(html,前端)

      • 移动端城市区县二级联动选择功能实现包 good2know
        本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
      • day15｜前端框架学习和算法 universe_01 前端算法笔记
        T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的
      • SpringMVC的执行流程
        1、什么是MVCMVC是一种设计模式。MVC的原理图如下所示M-Model模型（完成业务逻辑：有javaBean构成，service+dao+entity）V-View视图（做界面的展示jsp，html……）C-Controller控制器（接收请求—>调用模型—>根据结果派发页面2、SpringMVC是什么SpringMVC是一个MVC的开源框架，SpringMVC=Struts2+Spring，
      • Selenium 特殊控件操作与 ActionChains 实践详解 小馋喵知识杂货铺 selenium测试工具
        1.下拉框单选操作(a)使用SeleniumSelect类（标准HTML标签）Selenium提供了内置的Select类用于操作标准下拉框，这种方式简单且直观。fromselenium.webdriver.support.uiimportSelect#定位下拉框dropdown=Select(driver.find_element("id","dropdown_id"))#通过以下三种方式选择单个
      • 微信公众号回调java_处理微信公众号消息回调 weixin_39607620 微信公众号回调java
        1、背景在上一节中，咱们知道如何接入微信公众号，可是以后公众号会与咱们进行交互，那么微信公众号如何通知到咱们本身的服务器呢？咱们知道咱们接入的时候提供的url是GET/mp/entry，那么公众号以后产生的事件将会以POST/mp/entry发送到咱们本身的服务器上。html2、代码实现，此处仍是使用weixin-java-mp这个框架实现一、引入weixin-java-mpcom.github.
      • 人工智能应用研究快讯 2021-11-30 峰谷皆平
        [HTML]ArtificialIntelligenceforSkinCancerDetection:ScopingReviewATakiddin,JSchneider,YYang,AAbd-Alrazaq...JournalofMedicalInternet...,2021ABSTACT:Background:Skincanceristhemostcommoncancertypeaffectin
      • 【Jupyter】个人开发常见命令 TIM老师 #Pycharm&VSCodepythonJupyter
        1.查看python版本importsysprint(sys.version)2.ipynb/py文件转换jupyternbconvert--topythonmy_file.ipynbipynb转换为mdjupyternbconvert--tomdmy_file.ipynbipynb转为htmljupyternbconvert--tohtmlmy_file.ipynbipython转换为pdfju
      • 用代码生成艺术字：设计个性化海报的秘密
        本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准
      • vue element 封装表单 影子信息 vuevue.jsjavascript前端
        背景：在前端系统开发中，系统页面涉及到的表单组件比较多，所以进行了简单的封装。封装的包括一些Form表单组件，如下：input输入框、select下拉框、等实现效果：理论知识：表单组件官方链接：点击跳转封装组件：封装组件的思路：不封装element组件，每一个input组件绑定一个form对象，例如官网。简单封装element组件，利用for循环生成form表单的每一项el-form-item。进
      • 前端面试每日 3+1 —— 第39天 浪子神剑
        今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss
      • GDP经济社会人文民生栅格数据下载网站汇总 疯狂学习GIS
          本文为“GIS数据获取整理”专栏（https://blog.csdn.net/zhebushibiaoshifu/category_10857546.html）中第八篇独立博客，因此本文全部标题均由“8”开头。本文对目前主要的GDP、社会与经济数据获取网站加以整理与介绍，若需其它GIS领域数据（如遥感影像数据、气象数据、土地土壤数据、农业数据等），大家可以点击上方专栏查看，也可以看这一篇汇总文
      • 【MySQL】MySQL数据库如何改名 武昌库里写JAVA 面试题汇总与解析springbootvue.jssqljava学习
        MySQL建库授权语句https://www.jianshu.com/p/2237a9649ceeMySQL数据库改名的三种方法https://www.cnblogs.com/gomysql/p/3584881.htmlMySQL安全修改数据库名几种方法https://blog.csdn.net/haiross/article/details/51282417MySQL重命名数据库https://
      • 前端数据库：IndexedDB从基础到高级使用指南
        文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.
      • 【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三） 笙囧同学 java前端状态模式
        核心功能设计用户管理系统用户管理是整个系统的基础，我设计了完整的用户生命周期管理：用户注册流程验证失败验证通过验证失败验证通过用户名已存在用户名可用失败成功用户访问注册页面填写注册信息前端表单验证显示错误提示提交到后端后端数据验证返回错误信息用户名唯一性检查提示用户名重复密码加密处理保存用户信息保存成功?显示系统错误注册成功跳转登录页面登录认证机制深度解析我实现了一套企业级的多层次安全认证机制：认
      • 从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战
        作者简介：笙囧同学，中科院计算机大模型方向硕士，全栈开发爱好者联系方式：[email protected]各大平台账号：笙囧同学座右铭：偷懒是人生进步的阶梯前言在AI技术飞速发展的今天，如何将前沿的大模型技术与实际应用相结合，一直是我们开发者关注的焦点。今天，笙囧同学将带大家从零开始，构建一个基于GigaChatAI的艺术创作平台，实现React前端+Django后端的完整全栈解决方案。这不仅仅是
      • 14.tornado操作之应用Websocket协议实现聊天室功能 孤寒者 Tornado框架从入门到实战websockettornado聊天室功能实现python
        目录：每篇前言：1.什么是WebSocket（1）定义（2）优点（3）和HTTP对比（4）适用场景2.WebSocket关键方法3.本tornado项目中使用WebSocket（1）准备一个聊天室的页面：第一步：编写视图：第二步：编写接口：（app.py中加入以下接口！）第三步：编写前端页面：测试接口——响应OK！（2）使用WebSocket：（3）聊天室的聊天功能的最终实现：第一步：战前准备第二
      • 为什么学习Web前端一定要掌握JavaScript？ web前端学习指南
        为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。
      • 小架构step系列25：错误码 秋千码途 架构java
        1概述一个系统中，可能产生各种各样的错误，对这些错误进行编码。当错误发生时，通过这个错误码就有可能快速判断是什么错误，不一定需要查看代码就可以进行处理，提高问题处理效率。有了统一的错误码，还可以标准化错误信息，方便把错误信息纳入文档管理和对错误信息进行国际化等。没有错误码的管理，开发人员就会按自己的理解处理这些错误。有些直接把堆栈直接反馈到前端页面上，使用看不懂这些信息体验很差，也暴露了堆栈信息有
      • Java朴实无华按天计划从入门到实战（强化速战版-66天） 岫珩 Java后端java开发语言学习Java时间安排学习计划
        致敬读者感谢阅读笑口常开生日快乐⬛早点睡觉博主相关博主信息博客首页专栏推荐活动信息文章目录Java朴实无华按天计划从入门到实战（强化速战版-66天）1.基础（18）1.1JavaSE核心（5天）1.2数据库与SQL（5天）1.3前端基础（8天）2.进阶（17天）2.1JavaWeb核心（5天）2.2Mybatis与Spring全家桶（6天）2.3中间件入门（4天）2.4实践项目（2天）3.高阶（1
      • 《跨域资源共享CORS的深层逻辑与前端实践精要》
        不同源头的资源交互已成为常态，而跨域资源共享（CORS）正是支撑这种交互的隐形架构。现代Web安全体系中平衡开放与防护的精妙设计。理解CORS的深层逻辑，不仅能解决实际开发中的跨域难题，更能触及网络安全与资源流通的核心矛盾，为前端工程师构建稳健的应用提供底层认知支撑。跨域资源共享的诞生，源于网络安全与应用发展的必然冲突。浏览器的同源策略，作为早期网络安全的基石，通过限制不同源文档的交互，有效阻挡了
      • 深入了解 Kubernetes（k8s）：从概念到实践
        目录一、k8s核心概念二、k8s的优势三、k8s架构组件控制平面组件节点组件四、k8s+docker运行前后端分离项目的例子1.准备前端项目2.准备后端项目3.创建k8s部署配置文件4.部署应用到k8s集群在当今云计算和容器化技术飞速发展的时代，Kubernetes（简称k8s）已成为容器编排领域的事实标准。无论是互联网巨头、传统企业还是初创公司，都在广泛采用k8s来管理和部署容器化应用。本文将带
      • 移动端适配rem方案 简单的码农
        1.rem+动态html的font-size1.rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的font-size尺寸。2.比如如下案例：设置一个盒子的宽度是2rem；设置不同的屏幕上html的font-size不同；image这样在开发中，我们只需要考虑两个问题：问题一：针对不同的屏幕，设置html不同的font-s
      • Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录 二倍速播放 前端vue.js
        1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于：搜索引擎优化(SEO)：初始HTML响应仅包含一个根div元素，实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎（如Google）能够执行部分JavaScript，但其抓取效率和稳定性不如直接获取完整HTML。非
      • redis反弹shell时kali无法接收回弹的解决方法 显哥无敌 shellredis
        无法接受回谈大概率是bash命令写的不对，那个crontab中间的星号个数是有意义的，不是随便加的，下面贴一下crontab的基本用法https://www.cnblogs.com/zhoading/p/11572630.html{minute}{hour}{day-of-month}{month}{day-of-week}{full-path-to-shell-script}如果是要cronta
      • native.js设置可缩放的webview并隐藏缩放控件 Nanayai
        需求明确:webview页面可以手指缩放,并且不要那个原生控件;实现思路:1.使用h5+封装好的方法:设置scalable属性,并在html中设置meta标签:user-scalable=yes或不设置,minimum-scale和maximum-scale需要注意不要都设为1:mui.openWindow({url:"someThing",id:"someThing",styles:{scala
      • 大厂都在用的前端缓存策略，你掌握了吗？ AI架构全栈开发实战笔记 前端缓存ai
        大厂都在用的前端缓存策略，你掌握了吗？关键词：前端缓存、HTTP缓存、ServiceWorker、CDN缓存、缓存策略、性能优化、浏览器缓存摘要：本文将深入探讨前端开发中常用的缓存策略，从浏览器缓存到ServiceWorker，从HTTP缓存头到CDN缓存，全面解析大厂都在使用的高效缓存技术。通过生动的比喻和实际代码示例，帮助开发者理解并掌握这些提升Web应用性能的关键技术。背景介绍目的和范围本文
      • Redis反弹Shell 波吉爱睡觉 web安全#未授权访问漏洞#SSRFredis网络安全web安全
        这里我来总结几种Redis反弹Shell的方法一、利用Redis写WebShell前提条件开了web服务器，并且知道路径，还需要有文件读写增删改查的权限条件比较苛刻，但是满足条件上传就会简单一点，我们直接将文件写入www目录下，完了使用工具连接即可。语句：redis:6379>configsetdir/var/www/html/redis:6379>configsetdbfilenameshell
      • 26. 什么是雪碧图，作用和原理了解吗 yqcoder 前端面试-CSScss前端html
        总结小图合成一张，使用background来使用，减少资源请求一、什么是雪碧图？雪碧图（CSSSprite）是一种前端优化技术，指的是将多个小图标合并成一张大图，通过CSS控制显示其中的某一部分。它常用于网站中图标、按钮等小图较多的场景。二、雪碧图的作用作用说明✅减少HTTP请求次数合并多个图片为一张图，减少请求资源数✅提升页面加载速度尤其在图片较多时效果明显✅避免图片加载闪烁鼠标悬停切换图片时不
      • H5UI微信小程序前端框架实战指南 ai
        本文还有配套的精品资源，点击获取简介：H5UI是一个为微信小程序开发设计的前端框架，基于H5技术，提供简洁高效的组件库。框架集成了丰富的UI元素，如按钮、表格、导航栏等，简化了界面布局和交互的实现。通过安装、引入、使用组件和事件绑定四个步骤，开发者可以轻松构建功能齐全的应用。了解性能优化等注意事项对于高效开发同样重要。1.微信小程序前端开发框架介绍微信小程序概述微信小程序是微信官方推出的一种无需下
      • Windows下Oracle安装图解 叫我老村长
        Windows下Oracle安装图解----oracle-win-64-11g详细安装步骤一、Oracle下载官方下地址http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.htmlwin32位操作系统下载地址：http://download.oracle.com/otn/nt/oracle11g
      • SQL的各种连接查询 xieke90 UNION ALLUNION外连接内连接JOIN
        一、内连接   概念：内连接就是使用比较运算符根据每个表共有的列的值匹配两个表中的行。                 内连接（join 或者inner join ）       SQL语法：       select * fron
      • java编程思想--复用类 百合不是茶 java继承代理组合final类
              复用类看着标题都不知道是什么,再加上java编程思想翻译的比价难懂,所以知道现在才看这本软件界的奇书   一:组合语法:就是将对象的引用放到新类中即可     代码:     package com.wj.reuse; /** * * @author Administrator 组
      • [开源与生态系统]国产CPU的生态系统 comsci cpu
              计算机要从娃娃抓起...而孩子最喜欢玩游戏....       要让国产CPU在国内市场形成自己的生态系统和产业链,国家和企业就不能够忘记游戏这个非常关键的环节....       投入一些资金和资源,人力和政策,让游
      • JVM内存区域划分Eden Space、Survivor Space、Tenured Gen，Perm Gen解释 商人shang jvm内存
        jvm区域总体分两类，heap区和非heap区。heap区又分：Eden Space（伊甸园）、Survivor Space(幸存者区)、Tenured Gen（老年代-养老区）。 非heap区又分：Code Cache(代码缓存区)、Perm Gen（永久代）、Jvm Stack(java虚拟机栈)、Local Method Statck(本地方法栈)。 HotSpot虚拟机GC算法采用分代收
      • 页面上调用 QQ oloz qq
        <A href="tencent://message/?uin=707321921&amp;Site=有事Q我&amp;Menu=yes">   <img style="border:0px;" src=http://wpa.qq.com/pa?p=1:707321921:1></a>
      • 一些问题 文强chu 问题
        1.eclipse 导出 doc  出现“The Javadoc command does not exist.” javadoc command 选择 jdk/bin/javadoc.exe 2.tomcate 配置 web 项目 ..... SQL:3.mysql  * 必须得放前面 否则  select&nbs
      • 生活没有安全感 小桔子 生活孤独安全感
               圈子好小，身边朋友没几个，交心的更是少之又少。在深圳，除了男朋友，没几个亲密的人。不知不觉男朋友成了唯一的依靠，毫不夸张的说，业余生活的全部。现在感情好，也很幸福的。但是说不准难免人心会变嘛，不发生什么大家都乐融融，发生什么很难处理。我想说如果不幸被分手(无论原因如何)，生活难免变化很大，在深圳，我没交心的朋友。明
      • php 基础语法 aichenglong php 基本语法
        1 .1 php变量必须以$开头 <?php $a=” b”; echo ?> 1 .2 php基本数据库类型 Integer  float/double Boolean string 1 .3 复合数据类型 数组array和对象 object 1 .4 特殊数据类型  null 资源类型(resource)    $co
      • mybatis tools 配置详解 AILIKES mybatis
        MyBatis Generator中文文档 MyBatis Generator中文文档地址： http://generator.sturgeon.mopaas.com/ 该中文文档由于尽可能和原文内容一致，所以有些地方如果不熟悉，看中文版的文档的也会有一定的障碍，所以本章根据该中文文档以及实际应用，使用通俗的语言来讲解详细的配置。 本文使用Markdown进行编辑，但是博客显示效
      • 继承与多态的探讨 百合不是茶 JAVA面向对象 继承 对象
        继承 extends   多态 继承是面向对象最经常使用的特征之一：继承语法是通过继承发、基类的域和方法 //继承就是从现有的类中生成一个新的类，这个新类拥有现有类的所有extends是使用继承的关键字：     在A类中定义属性和方法； class A{ //定义属性 int age； //定义方法 public void go
      • JS的undefined与null的实例 bijian1013 JavaScriptJavaScript
        <form name="theform" id="theform"> </form> <script language="javascript"> var a alert(typeof(b)); //这里提示undefined if(theform.datas
      • TDD实践（一） bijian1013 java敏捷TDD
        一.TDD概述         TDD：测试驱动开发，它的基本思想就是在开发功能代码之前，先编写测试代码。也就是说在明确要开发某个功能后，首先思考如何对这个功能进行测试，并完成测试代码的编写，然后编写相关的代码满足这些测试用例。然后循环进行添加其他功能，直到完全部功能的开发。     
      • [Maven学习笔记十]Maven Profile与资源文件过滤器 bit1129 maven
        什么是Maven Profile Maven Profile的含义是针对编译打包环境和编译打包目的配置定制，可以在不同的环境上选择相应的配置，例如DB信息，可以根据是为开发环境编译打包，还是为生产环境编译打包，动态的选择正确的DB配置信息   Profile的激活机制 1.Profile可以手工激活，比如在Intellij Idea的Maven Project视图中可以选择一个P
      • 【Hive八】Hive用户自定义生成表函数(UDTF) bit1129 hive
        1. 什么是UDTF   UDTF，是User Defined Table-Generating Functions，一眼看上去，貌似是用户自定义生成表函数，这个生成表不应该理解为生成了一个HQL Table， 貌似更应该理解为生成了类似关系表的二维行数据集   2. 如何实现UDTF 继承org.apache.hadoop.hive.ql.udf.generic
      • tfs restful api 加auth 2.0认计 ronin47
        　　目前思考如何给tfs的ngx-tfs api增加安全性。有如下两点： 　　一是基于客户端的ip设置。这个比较容易实现。 　　二是基于OAuth2.0认证，这个需要lua，实现起来相对于一来说，有些难度。 　　现在重点介绍第二种方法实现思路。 　　 前言：我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算，阅读下面的文档，实现自动化并获得收益。SeatGe
      • jdk环境变量配置 byalias javajdk
        进行java开发，首先要安装jdk，安装了jdk后还要进行环境变量配置： 1、下载jdk（http://java.sun.com/javase/downloads/index.jsp），我下载的版本是：jdk-7u79-windows-x64.exe 2、安装jdk-7u79-windows-x64.exe 3、配置环境变量：右击"计算机"-->&quo
      • 《代码大全》表驱动法-Table Driven Approach-2 bylijinnan java
        package com.ljn.base; import java.io.BufferedReader; import java.io.FileInputStream; import java.io.InputStreamReader; import java.util.ArrayList; import java.util.Collections; import java.uti
      • SQL 数值四舍五入 小数点后保留2位 chicony 四舍五入
        1.round() 函数是四舍五入用，第一个参数是我们要被操作的数据，第二个参数是设置我们四舍五入之后小数点后显示几位。 2.numeric 函数的2个参数，第一个表示数据长度，第二个参数表示小数点后位数。 例如： 　　select   cast(round(12.5,2)   as   numeric(5,2))  
      • c++运算符重载 CrazyMizzz C++
        一、加+，减-，乘*，除/ 的运算符重载 Rational operator*(const Rational &x) const{ return Rational(x.a * this->a); } 在这里只写乘法的，加减除的写法类似 二、<<输出,>>输入的运算符重载      &nb
      • hive DDL语法汇总 daizj hive修改列DDL修改表
        hive DDL语法汇总 １、对表重命名 hive> ALTER TABLE table_name RENAME TO new_table_name;   2、修改表备注 hive> ALTER TABLE table_name SET TBLPROPERTIES ('comment' = new_comm
      • jbox使用说明 dcj3sjt126com Web
        参考网址：http://www.kudystudio.com/jbox/jbox-demo.html jBox v2.3 beta [ 点击下载]  技术交流QQGroup：172543951 100521167 [2011-11-11] jBox v2.3 正式版 - [调整&修复] IE6下有iframe或页面有active、applet控件
      • UISegmentedControl 开发笔记 dcj3sjt126com
          //    typedef NS_ENUM(NSInteger, UISegmentedControlStyle) {     //        UISegmentedControlStylePlain,     // large plain   &
      • Slick生成表映射文件 ekian scala
        Scala添加SLICK进行数据库操作，需在sbt文件上添加slick-codegen包 "com.typesafe.slick" %% "slick-codegen" % slickVersion 因为我是连接SQL Server数据库，还需添加slick-extensions，jtds包 "com.typesa
      • ES-TEST gengzg test
        package com.MarkNum; import java.io.IOException; import java.util.Date; import java.util.HashMap; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.annotation
      • 为何外键不再推荐使用 hugh.wang mysqlDB
        表的关联，是一种逻辑关系，并不需要进行物理上的“硬关联”，而且你所期望的关联，其实只是其数据上存在一定的联系而已，而这种联系实际上是在设计之初就定义好的固有逻辑。 在业务代码中实现的时候，只要按照设计之初的这种固有关联逻辑来处理数据即可，并不需要在数据库层面进行“硬关联”，因为在数据库层面通过使用外键的方式进行“硬关联”，会带来很多额外的资源消耗来进行一致性和完整性校验，即使很多时候我们并不
      • 领域驱动设计 julyflame VODAO设计模式DTOpo
        概念： VO（View Object）：视图对象，用于展示层，它的作用是把某个指定页面（或组件）的所有数据封装起来。 DTO（Data Transfer Object）：数据传输对象，这个概念来源于J2EE的设计模式，原来的目的是为了EJB的分布式应用提供粗粒度的数据实体，以减少分布式调用的次数，从而提高分布式调用的性能和降低网络负载，但在这里，我泛指用于展示层与服务层之间的数据传输对
      • 单例设计模式 hm4123660 javaSingleton单例设计模式懒汉式饿汉式
               单例模式是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例类的特殊类。通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问，从而方便对实例个数的控制并节约系统源。如果希望在系统中某个类的对象只能存在一个，单例模式是最好的解决方案。      &nb
      • logback zhb8015 loglogback
        一、logback的介绍      Logback是由log4j创始人设计的又一个开源日志组件。logback当前分成三个模块：logback-core,logback- classic和logback-access。logback-core是其它两个模块的基础模块。logback-classic是log4j的一个 改良版本。此外logback-class
      • 整合Kafka到Spark Streaming——代码示例和挑战 Stark_Summer sparkstormzookeeperPARALLELISMprocessing
        作者Michael G. Noll是瑞士的一位工程师和研究员，效力于Verisign，是Verisign实验室的大规模数据分析基础设施（基础Hadoop）的技术主管。本文，Michael详细的演示了如何将Kafka整合到Spark Streaming中。 期间， Michael还提到了将Kafka整合到 Spark Streaming中的一些现状，非常值得阅读，虽然有一些信息在Spark 1.2版
      • spring-master-slave-commondao 王新春 DAOspringdataSourceslavemaster
        互联网的web项目，都有个特点：请求的并发量高，其中请求最耗时的db操作，又是系统优化的重中之重。 为此，往往搭建 db的 一主多从库的 数据库架构。作为web的DAO层，要保证针对主库进行写操作，对多个从库进行读操作。当然在一些请求中，为了避免主从复制的延迟导致的数据不一致性，部分的读操作也要到主库上。（这种需求一般通过业务垂直分开，比如下单业务的代码所部署的机器，读去应该也要从主库读取数