HTML基础知识

HTML基础知识

  • HTML的概述及开发环境
    • 1.1.1 HTML的概述
    • 1.1.2 HTML的历史版本
    • 1.1.3 网页组成
    • 1.1.4 开发环境
  • HTML标签组织页面内容
    • 2.1.1 HTML标签名称与属性
        • 基础标签html、head和body
        • 控制标签
    • 2.1.2 实体标签元素分类
        • 块级元素
        • 内联元素
        • 常见的块元素
        • 常见的内联元素
    • 2.1.3 特殊字符与色彩
        • 特殊字符表
        • 十二进制颜色表
        • HTML度量单位
  • 简单的HTML标签
    • 3.1.1 实体标签元素分类
        • 文档结构元素
        • 标题标签与文本修饰标签
        • 超链接和target属性
          • 超链接
          • target属性
        • 列表标签
          • 无序列表
          • 有序列表
        • 图像标签
    • 3.1.2 表格及表单
        • 表格定义
        • 表单
          • 表单标签
          • 表单域
          • 表单域代码
          • 按钮控件

HTML的概述及开发环境

1.1.1 HTML的概述

HTML是超文本标记语言,英语名称为HyperText Markup Language,它是一种用于创建网页的标准标记语言。

可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。

超文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。

网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。

浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。

但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。

1.1.2 HTML的历史版本

  1. HTML 1.0:在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
  2. HTML 2.0:1995年1 1月作为RFC 1866发布,于2000年6月发布之后被宣布已经过时。
  3. HTML 3.2:1997年1月14日,W3C推荐标准。
  4. HTML 4.0:1997年12月18日,W3C推荐标准。
  5. HTML 4.01(微小改进):1999年12月24日,W3C推荐标准。
  6. HTML 5:HTML5是公认的下一代Web语言,极大地提升了Web在富媒体、富内容和富应用等方面的能力,被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。

1.1.3 网页组成

网页主要由文字、图像和超链接等元素构成。除了以上元素,网页中还可以包含音频、视频以及flash等。

除了首页之外,一个网站通常还包含多个子网页。网页与网页之间通过超链接互相访问。

网站由网页构成,网页有静态和动态之分

静态网页是指用户无论何时何地访问,网页都会显示固定的信息,除非网页源代码被重新修改上传。

动态网页显示的内容则会随着用户操作和时间的不同而变化。

1.1.4 开发环境

  1. 高效的网页编辑器——VS code
    Microsoft在2015年4月30日Build开发者大会上正式发布VS code项目:一个运用于Mac OS X、windows和Linux之上的,针对编写现代web和云应用的跨平台源代码编辑器。

    VS code集成了一款现代编辑器所应该具备的特性,包括语法高亮,可制定的热键绑定,括号匹配以及代码片段收集。

  2. 流行的网页设计器——HBuilder
    HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。 HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。

    它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。

  3. 网页文档快速修改工具EditPlusNotePad
    DW CS6非常适合初学者,但它启动速度较慢是网站开发人员所难以容忍的。网站开发人员经常使用EditPlus、NotePad和Sublime Text进行快速修改,因为它们比DW CS6有更快的启动速度,也都有高亮着色功能。

HTML标签组织页面内容

2.1.1 HTML标签名称与属性

基础标签html、head和body

标签是位于标签之后的,也被称为根标签,用来告诉浏览器这是一个HTML文档,标签标志着HTML文档的开始,则是标志着HTML文档的结束,在他们之间则是文档的头部和主体内容。

标签用于定义HTML文档的头部信息,也称为头部标签,紧跟在标签之后,主要用来封装其他位于文档头部的标签,比如、<mate>、<link>和<style></code>等,用来描述文档的标题、作者以及和其他文档的关系等。</p> <p><code><body>标签</code>用于定义HTML文档所要显示的内容。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<code><body></code>标签内,<code><body></code>标签中的信息才是最终显示给用户看的。</p> <p>一个HTML文档只能含有一对<code><body></code>标签,且<code><body></code>标签必须在<code><html></code>标签内,位于<code><head></code>头部标签之后,与<code><head></code>标签是并列关系。</p> <p>让HTML标签提供更多的信息,可以使用HTML标签的属性加以设置,其语法格式为<code><标签名 属性 1=“属性值 1 属性 2=“属性值 2”></code>网页元素<code></标签名></code></p> <p>整个HTML页面的代码结构如下:<br> <a href="http://img.e-com-net.com/image/info8/8a0ba93fdffb4d1588e1f5d07a90ee58.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8a0ba93fdffb4d1588e1f5d07a90ee58.jpg" alt="HTML基础知识_第1张图片" width="553" height="280" style="border:1px solid black;"></a></p> <h4>控制标签</h4> <p>HTML提供了<code><h1>、<h2>、<h3>、<h4>、<h5>和<h6></code>,从<code><h1></code>到<code><h6></code>是6个等级的标题标签,用法格式如下:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hn</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>对齐方式<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>标题内容<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>hn</span><span class="token punctuation">></span></span> </code></pre> <p>align属性设置对齐方式,其取值如下:</p> <ul> <li>left:设置标题文字左对齐(默认值);</li> <li>center:设置标题文字居中;</li> <li>right:设置标题文字右对齐。</li> </ul> <p><code><p></code>是HTML文档中最常见的标签,也称为段落标签</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>对齐方式<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>段落内容<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p><code><hr/></code>称为水平线,使段落与段落之间隔开,使文档结构清晰。</p> <p><code><br/></code>称为换行标签,将段落强制性换行。</p> <h2>2.1.2 实体标签元素分类</h2> <p>块元素又名块级元素(block element),和其对应的是内联元素(inline element),都是html规范中的概念。大多数HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时,通常会以新行来开始(和结束)。</p> <h4>块级元素</h4> <p>①总是在新行上开始;</p> <p>②高度,行高以及外边距和内边距都可控制;</p> <p>③宽度缺省是它的容器的100%,除非设定一个宽度。</p> <p>④它可以容纳内联元素和其他块元素</p> <h4>内联元素</h4> <p>①和其他元素都在一行上;</p> <p>②高,行高及外边距和内边距不可改变;</p> <p>③宽度就是它的文字或图片的宽度,不可改变</p> <p>④内联元素只能容纳文本或者其他内联元素</p> <h4>常见的块元素</h4> <p>◎ form - 交互表单<br> ◎ h1 - 大标题<br> ◎ h2 - 副标题<br> ◎ h3 - 3级标题<br> ◎ h4 - 4级标题<br> ◎ h5 - 5级标题<br> ◎ h6 - 6级标题<br> ◎ hr - 水平分隔线<br> ◎ ol - 排序表单<br> ◎ p - 段落<br> ◎ div - 常用块级容器</p> <h4>常见的内联元素</h4> <p>◎ br - 换行<br> ◎ i - 斜体<br> ◎ img - 图片<br> ◎ input - 输入框<br> ◎ strong - 粗体强调<br> ◎ sub - 下标<br> ◎ sup - 上标</p> <h2>2.1.3 特殊字符与色彩</h2> <h4>特殊字符表</h4> <p><a href="http://img.e-com-net.com/image/info8/9b63ca6fd14049a592cafe3c17bdacca.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9b63ca6fd14049a592cafe3c17bdacca.jpg" alt="HTML基础知识_第2张图片" width="650" height="443" style="border:1px solid black;"></a></p> <h4>十二进制颜色表</h4> <p><a href="http://img.e-com-net.com/image/info8/439c70351cd3423089e5736767133b8b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/439c70351cd3423089e5736767133b8b.jpg" alt="HTML基础知识_第3张图片" width="489" height="910" style="border:1px solid black;"></a></p> <h4>HTML度量单位</h4> <p>在HTML文档里,字体除了有颜色特性,还有大小特性。表格和图像等页面元素,也需要有度量大小的单位。HTML中,度量的主要单位如下:</p> <ul> <li>px:像素单位(计算机屏幕上的一个点),是绝对单位;</li> <li>%:百分比(相对当前屏幕尺寸的百分比),能适应屏幕大小;</li> <li>em:相对于当前字体尺寸的倍数,能方便地实现首先缩进2个汉字。</li> </ul> <h1>简单的HTML标签</h1> <h2>3.1.1 实体标签元素分类</h2> <h4>文档结构元素</h4> <p>段落标签<code><p></code>用于对网页内容提供块级格式。当浏览器解析<code><p></code>标签时,在新的段落之前插入一个空白行。<br> <code><br></code>标签,文本内容强行换行。<br> <code><hr></code>标签可以在页面中产生一条水平线,将文本区域内容分开。</p> <h4>标题标签与文本修饰标签</h4> <p><code><hn></code>标签(1≤n ≤ 6)称为标题标签。其中,<code><h4></code> 元素的内容与默认文本的大小基本相同, <code><h1>、<h2>和<h3></code>元素内容大于文本在网页中的默认尺寸,<code><h5>和<h6></code>元素的内容较小一些。<br> 文本修饰标签用于对文本样式进行设置。标签<code><font></code>可设置字体、字号和颜色;标签<code><strong></code>用于文本加粗;标签<code><sup></code>用于以上标的形式显示文本;标签<code><sub></code>用于以下标的形式显示文本;标签<code><i></code>用于实现斜体;标签<code><u></code>用于实现下划线。</p> <h4>超链接和target属性</h4> <h5>超链接</h5> <ul> <li>当浏览者点击链接时,可以直接转向对应的网页、图片、文件或邮箱等资源。当链接的文件类型为压缩文件时,出现文件下载。</li> <li>格式:<code>< a href=" " target=" "></code>链接内容<code></ a></code></li> <li>target用于指定链接页面的打开方式,取值如下多种:<br> 1、_self为默认值,表示当前窗口打开<br> 2、_blank表示新窗口打开</li> <li>常见的超链接有以下几种类型:<br> 文本链接、锚点链接、图像链接、图像热区链接、空链接和JavaScript链接。</li> <li>通过创建锚点链接,用户能够快速定位到目标内容。先使用<code><a name="锚点名"></code>创建锚点,然后使用<code>< a href="#锚点名"></code>链接至锚点。</li> <li>图片热区链接是指在同一个图片中不同的部分链接到不同的目标位置,比一般的图片链接更加灵活,在DW中易于设计和实现。</li> <li>空链接是尚未指派的链接:<code>< a href="#" ></code>链接内容<code></ a></code><br> JS链接指的是:<code>< a href="#" onclick="JS脚本或方法"></code>链接内容<code></ a></code></li> </ul> <h5>target属性</h5> <p>属性target有多种取值:</p> <ul> <li>_blank(在新窗口中打开被链接文档)</li> <li>_self(默认值,在相同的框架中打开被链接文档)</li> <li>_parent(在父框架集中打开被链接文档)</li> <li>_top(在整个窗口中打开被链接文档)</li> <li>frameName(在指定的框架中打开被链接文档)</li> </ul> <h4>列表标签</h4> <h5>无序列表</h5> <p>无序列表的各个列表项之间没有顺序级别之分,是并列的。语法格式如下:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>列表1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>列表2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>列表3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>列表4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <h5>有序列表</h5> <p>有序列表即有排列顺序的列表,其各个列表项按照一定的顺序排列定义。有序列表的语法格式如下:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>列表1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>列表2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>列表3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>列表4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> </code></pre> <h4>图像标签</h4> <ul> <li>在页面中,使用< img />标签向HTML文档中添加一幅图像。</li> <li>格式:<code>< img src="url" width=" " height=" " alt=" " title=" " /></code></li> <li>必填属性src,其值为图像文件路径。</li> <li>任选属性with和height,指定文件的宽度和高度。否则,按照图像的实际宽度和高度显示。</li> <li>任选属性title,其值是鼠标位于图像上时的提示文本。</li> <li>任选属性alt用于浏览器无法显示图像时,该属性值作为图像的替代文本,以便搜索引擎对页面进行索引。</li> </ul> <h2>3.1.2 表格及表单</h2> <h4>表格定义</h4> <p>创建表格的基本语法:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>row 1, cell 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>row 1, cell 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>row 2, cell 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>row 2, cell 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> </code></pre> <p><code><table></code>用于定义一个表格,主要属性如下:</p> <table> <thead> <tr> <th>属性名</th> <th>含义</th> </tr> </thead> <tbody> <tr> <td>border</td> <td>表示表格外边框的宽度</td> </tr> <tr> <td>height</td> <td>表示表格的高度</td> </tr> <tr> <td>align</td> <td>表示表格的显示位置:left居左显示;center居中显示;right居右显示</td> </tr> <tr> <td>cellspacing</td> <td>单元格之间的间距</td> </tr> <tr> <td>cellpadding</td> <td>单元格内容与边框的显示距离</td> </tr> <tr> <td>width</td> <td>表示表格的宽度</td> </tr> </tbody> </table> <p><code><caption></code>主要属性如下:</p> <table> <thead> <tr> <th>属性名</th> <th>含义</th> </tr> </thead> <tbody> <tr> <td>top</td> <td>表示标题放在表格的上部</td> </tr> <tr> <td>bottom</td> <td>表示标题放在表格的下部</td> </tr> <tr> <td>left</td> <td>表示标题放在表格的左部</td> </tr> <tr> <td>right</td> <td>表示标题放在表格的右部</td> </tr> </tbody> </table> <p><code><tr></code>主要属性如下:</p> <table> <thead> <tr> <th>属性名</th> <th>含义</th> </tr> </thead> <tbody> <tr> <td>bgcolor</td> <td>属性用来设置背景颜色</td> </tr> <tr> <td>align</td> <td>属性用来设置垂直方向对齐方式</td> </tr> <tr> <td>valign</td> <td>属性用来设置水平方向对齐方式</td> </tr> </tbody> </table> <p><code><td></code>和<code><th></code>都是单元格的标记,其必须嵌套在<code><tr></code>标记中,成对出现。<code><th></code>是表头标记,<code><th></code>中的文字会被默认加粗,而<code><td></code>不会,<code><td></code>是数据标记,表示该单元格的具体数据。两者的标记属性是一样的:</p> <table> <thead> <tr> <th>属性名</th> <th>含义</th> </tr> </thead> <tbody> <tr> <td>bgcolor</td> <td>属性用来设置背景颜色</td> </tr> <tr> <td>align</td> <td>属性用来设置垂直方向对齐方式</td> </tr> <tr> <td>valign</td> <td>属性用来设置水平方向对齐方式</td> </tr> <tr> <td>rowspan</td> <td>设置单元格所占行数</td> </tr> <tr> <td>colspan</td> <td>设置单元格所占列数</td> </tr> </tbody> </table> <h4>表单</h4> <p><a href="http://img.e-com-net.com/image/info8/195e971a1afa451bbecb883e4a62f978.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/195e971a1afa451bbecb883e4a62f978.jpg" alt="HTML基础知识_第4张图片" width="650" height="281" style="border:1px solid black;"></a></p> <ul> <li>Form表单是HTML的一个重要部分,负责采集和提交用户输入的信息。</li> <li>表单主要分为表单标签和表单控件。其中,表单控件又可细分为文本域和按钮控件。</li> <li>常见的表单域包括文本框、密码框、多行文本框、单选按钮、复选框、下拉选择框等。</li> <li>在表单域录入数据后,可通过表单的特殊控件来处理。submit提交按钮将数据传递给服务器端程序处理;button命令按钮将数据交给JS程序处理;reset按钮用于清空文本域数据。</li> </ul> <h5>表单标签</h5> <ul> <li>表单属性action用于指定表单处理程序。处理程序使用某种服务端脚本语言编写,如php、C#或Java等。不指定时,默认由当前页面处理。</li> <li>表单属性method用于指定表单提交方式,取值post或get。get提交方式将数据作为URL的一部分发送给服务器,URL由地址部分和数据部分构成,两种之间用问号“?”隔开,数据以“名称=值”的方式成对出现,且数据与数据之间通过“&”符号进行分割;post提交方式将数据隐藏在HTTP的数据流中进行传输;请求数据不会出现在地址栏中,安全性比get方式要高,并且对数据长度没有限制。</li> <li>表单属性onsubmit用于向服务器提交数据之前,执行其指定的JavaScript脚本程序,用以实现客户端数据的有效性验证。</li> <li>表单属性enctype用于指定表单数据类型。当表单包含文件域时,需要指定为multipart/form-data。否则,使用默认值</li> </ul> <h5>表单域</h5> <ul> <li>表单域多用于收集网站访问者的信息,它们位于与标签之间。</li> <li>表单域主要包括文本框、密码框、隐藏域、多行文本框、单选按钮、复选框、列表选择框和文件选择框等元素。</li> <li>表单域需要使用属性name (当元素不唯一时使用)或id(当元素唯一时使用),以便表单处理程序按名获取元素值。</li> <li>除多行文本框和列表选择框外,大部分表单域使用标签来创建,类型由type属性值决定。</li> <li>对于文本框等表单域,属性value用于设定默认值。</li> <li>当表单域个数较多时,可使用标签进行分组(内嵌标签呈现组标题)</li> </ul> <h5>表单域代码</h5> <pre><code class="prism language-html">文本框:<input type="text" id="un"…/> 密码框: <input type= "password" id="pwd"…/> 隐藏域: <input type= "hidden" id="hzd"…/> 多行文本框:<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>textarea<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>25<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> 文件选择框:<input type="file" id="filezd"…> 单选按钮:<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ah<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>01<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 优秀 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ah<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>02<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 良好 …… 复选框: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ah<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ah01<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 唱歌 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ah<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ah02<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 打球 …… 列表选择框:<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>city<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>se1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>北京<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>se2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>上海<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> …… <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> </code></pre> <p><mark>注意:<br> (1)为了保证一组单选按钮选择时互斥,必须指定相同的name属性值。<br> (2)单选按钮提交的值是value属性值。<br> (3)隐藏域实现数据的隐式提交<br> (4)文件选择框实现了文件的浏览选择方式。<br> (5)复选框并不要求name属性值相同,这不同于单选按钮。通常设置一组复选框具有相同的name值,只是为了方便形成数组来处理。<br> (6)复选和列表选择提交的值也是value属性值。<br> (7)对于单选和复选,使用属性checked=“checked” 用于指定该项默认被选中,也可以简写成checked;而列表选择的默认选中使用属性selected。</mark></p> <h5>按钮控件</h5> <p>表单的按钮有多种功能:可以用于提交表单,也可以用于清除或重置表单,还用于触发客户端脚本程序。按钮分为提交按钮、重置按钮、图片按钮和普通按钮。</p> <pre><code class="prism language-html">提交按钮 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>提交<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> 重置按钮 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>重置<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> 图像按钮<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>图片文件名<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> 普通按钮 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>提交<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>JS方法<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> </code></pre> <p><strong>下期预告:CSS样式基础知识,感谢你的观看</strong><br> <a href="http://img.e-com-net.com/image/info8/f23100de175d44198caa6a0a96a77360.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f23100de175d44198caa6a0a96a77360.jpg" alt="HTML基础知识_第5张图片" width="650" height="305" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/0c4f901aa0f249da9aa9c9f52d064a2a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0c4f901aa0f249da9aa9c9f52d064a2a.jpg" alt="HTML基础知识_第6张图片" width="454" height="174" style="border:1px solid black;"></a></p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1392027226769281024"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(html,html5,css3,css,web)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1943992776169418752.htm" title="Flask框架入门:快速搭建轻量级Python网页应用" target="_blank">Flask框架入门:快速搭建轻量级Python网页应用</a> <span class="text-muted">「已注销」</span> <a class="tag" taget="_blank" href="/search/python-AI/1.htm">python-AI</a><a class="tag" taget="_blank" href="/search/python%E5%9F%BA%E7%A1%80/1.htm">python基础</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%AB%99%E7%BD%91%E7%BB%9C/1.htm">网站网络</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>转载:Flask框架入门:快速搭建轻量级Python网页应用1.Flask基础Flask是一个使用Python编写的轻量级Web应用框架。它的设计目标是让Web开发变得快速简单,同时保持应用的灵活性。Flask依赖于两个外部库:Werkzeug和Jinja2,Werkzeug作为WSGI工具包处理Web服务的底层细节,Jinja2作为模板引擎渲染模板。安装Flask非常简单,可以使用pip安装命令</div> </li> <li><a href="/article/1943991891796226048.htm" title="Python Flask 框架入门:快速搭建 Web 应用的秘诀" target="_blank">Python Flask 框架入门:快速搭建 Web 应用的秘诀</a> <span class="text-muted">Python编程之道</span> <a class="tag" taget="_blank" href="/search/Python%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD%E4%B8%8E%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">Python人工智能与大数据</a><a class="tag" taget="_blank" href="/search/Python%E7%BC%96%E7%A8%8B%E4%B9%8B%E9%81%93/1.htm">Python编程之道</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>PythonFlask框架入门:快速搭建Web应用的秘诀关键词Flask、微框架、路由系统、Jinja2模板、请求处理、WSGI、Web开发摘要想快速用Python搭建一个灵活的Web应用?Flask作为“微框架”代表,凭借轻量、可扩展的特性,成为初学者和小型项目的首选。本文将从Flask的核心概念出发,结合生活化比喻、代码示例和实战案例,带你一步步掌握:如何用Flask搭建第一个Web应用?路由</div> </li> <li><a href="/article/1943987101301272576.htm" title="精通Canvas:15款时钟特效代码实现指南" target="_blank">精通Canvas:15款时钟特效代码实现指南</a> <span class="text-muted">烟幕缭绕</span> <div>本文还有配套的精品资源,点击获取简介:HTML5的Canvas是一个用于绘制矢量图形的API,通过JavaScript实现动态效果。本项目集合了15种不同的时钟特效代码,帮助开发者通过学习绘制圆形、线条、时间更新、旋转、颜色样式设置及动画效果等概念,深化对Canvas的理解和应用。项目中的CSS文件负责时钟的样式设定,而JS文件则包含实现各种特效的逻辑,通过不同的函数或类处理时间更新和动画绘制,提</div> </li> <li><a href="/article/1943983696184930304.htm" title="基于链家网的二手房数据采集清洗与可视化分析" target="_blank">基于链家网的二手房数据采集清洗与可视化分析</a> <span class="text-muted">Mint_Datazzh</span> <a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE/1.htm">项目</a><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E7%88%AC%E8%99%AB/1.htm">网络爬虫</a> <div>个人学习内容笔记,仅供参考。项目链接:https://gitee.com/rongwu651/lianjia原文链接:基于链家网的二手房数据采集清洗与可视化分析–笔墨云烟研究内容该课题的主要目的是通过将二手房网站上的存量与已销售房源,构建一个二手房市场行情情况与房源特点的可视化平台。该平台通过HTML架构和Echarts完成可视化的搭建。因此,该课题的主要研究内容就是如何利用相关技术设计并实现这样</div> </li> <li><a href="/article/1943975880120397824.htm" title="php SPOF" target="_blank">php SPOF</a> <span class="text-muted">贵哥的编程之路(热爱分享 为后来者)</span> <a class="tag" taget="_blank" href="/search/PHP%E8%AF%AD%E8%A8%80%E7%BB%8F%E5%85%B8%E7%A8%8B%E5%BA%8F100%E9%A2%98/1.htm">PHP语言经典程序100题</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>1.什么是单点故障(SPOF)?单点故障指的是系统中某个组件一旦失效,整个系统或服务就会不可用。常见的单点有:数据库、缓存、Web服务器、负载均衡、网络设备等。2.常见单点故障场景只有一台数据库服务器,宕机后所有业务不可用只有一台Redis缓存,挂掉后缓存全部失效只有一台Web服务器,挂掉后网站无法访问只有一个负载均衡节点,挂掉后流量无法分发只有一条网络链路,断开后所有服务失联3.消除单点故障的主</div> </li> <li><a href="/article/1943974618851241984.htm" title="Vue3+Vite+TS+Axios整合详细教程" target="_blank">Vue3+Vite+TS+Axios整合详细教程</a> <span class="text-muted">老马聊技术</span> <a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/Vite/1.htm">Vite</a><a class="tag" taget="_blank" href="/search/TS/1.htm">TS</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>1.Vite简介Vite是新一代的前端构建工具,在尤雨溪开发Vue3.0的时候诞生。类似于Webpack+Webpack-dev-server。其主要利用浏览器ESM特性导入组织代码,在服务器端按需编译返回,完全跳过了打包这个概念,服务器随起随用。生产中利用Rollup作为打包工具,号称下一代的前端构建工具。vite是一种新型的前端构建工具,能够显著的提升前端开发者的体验。它主要有俩部分组成:一个</div> </li> <li><a href="/article/1943968187112550400.htm" title="OpenWebUI(12)源码学习-后端constants.py常量定义文件" target="_blank">OpenWebUI(12)源码学习-后端constants.py常量定义文件</a> <span class="text-muted">青苔猿猿</span> <a class="tag" taget="_blank" href="/search/AI%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">AI大模型</a><a class="tag" taget="_blank" href="/search/openwebui/1.htm">openwebui</a><a class="tag" taget="_blank" href="/search/constants%E5%B8%B8%E9%87%8F%E5%AE%9A%E4%B9%89/1.htm">constants常量定义</a> <div>目录文件名:`constants.py`功能概述:主要功能点详解1.**MESSAGES枚举类**2.**WEBHOOK_MESSAGES枚举类**3.**ERROR_MESSAGES枚举类**✅默认错误模板✅认证与用户相关错误✅资源冲突与重复错误✅验证失败类错误✅权限限制类错误✅文件上传与格式错误✅模型与API错误✅请求频率与安全限制✅数据库与配置错误4.**TASKS枚举类**✅总结实际应用场</div> </li> <li><a href="/article/1943963776244051968.htm" title="入门html这篇文章就够了" target="_blank">入门html这篇文章就够了</a> <span class="text-muted">ξ流ぁ星ぷ132</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>HTML笔记文章目录HTML笔记html介绍什么是htmlhtml的作用HTML标签介绍常用标签标签and标签and标签u标签del删除线br标签用于换行pre标签,预处理标签span标签div标签sub标签andsup标签hr标签h1,h2...h6标签:HTML5中的语义标签:特殊字符img标签a标签第一种用法:超链接第二种用法:锚点video标签表格标签:form标签input标签selec</div> </li> <li><a href="/article/1943950163496202240.htm" title="JavaScript 基础09:Web APIs——日期对象、DOM节点" target="_blank">JavaScript 基础09:Web APIs——日期对象、DOM节点</a> <span class="text-muted">梦想当全栈</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>JavaScript基础09:WebAPIs——日期对象、DOM节点进一步学习DOM相关知识,实现可交互的网页特效能够插入、删除和替换元素节点。能够依据元素节点关系查找节点。一、日期对象掌握Date日期对象的使用,动态获取当前计算机的时间。ECMAScript中内置了获取系统时间的对象Date,使用Date时与之前学习的内置对象console和Math不同,它需要借助new关键字才能使用。1.实例</div> </li> <li><a href="/article/1943946255763828736.htm" title="《Java前端开发全栈指南:从Servlet到现代框架实战》" target="_blank">《Java前端开发全栈指南:从Servlet到现代框架实战》</a> <span class="text-muted"></span> <div>前言在当今Web开发领域,Java依然是后端开发的主力语言,而随着前后端分离架构的普及,Java开发者也需要掌握前端技术栈。本文将全面介绍JavaWeb前端开发的核心技术,包括传统Servlet/JSP体系、现代前端框架集成方案,以及全栈开发的最佳实践。通过本文,您将了解如何构建现代化的JavaWeb应用前端界面。一、JavaWeb前端技术演进1.1传统技术栈Servlet:JavaWeb基础,处</div> </li> <li><a href="/article/1943943105145270272.htm" title="JAVA 高频八股文 Day03" target="_blank">JAVA 高频八股文 Day03</a> <span class="text-muted">Conqueror675</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>12.TCP和Http的区别是什么TCP是传输层协议,负责建立可靠的点对点连接,确保数据有序、完整地传输(如铁路轨道);HTTP是应用层协议,基于TCP构建,定义了Web服务交互的报文格式和规则(如货运订单)。TCP关注数据如何可靠送达,通过三次握手建立连接、流量控制等机制保证传输;HTTP关注传输内容的意义,提供请求/响应语义(GET/POST等)和无状态通信。补充:说一下什么是三次握手四次挥手</div> </li> <li><a href="/article/1943932016164663296.htm" title="Vue3组件库实战: 打造高复用UI系统" target="_blank">Vue3组件库实战: 打造高复用UI系统</a> <span class="text-muted">武昌库里写JAVA</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/layui/1.htm">layui</a><a class="tag" taget="_blank" href="/search/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1/1.htm">毕业设计</a> <div>Vue3组件库实战:打造高复用UI系统介绍什么是Vue3组件库在前端开发中,UI组件库是非常重要的一部分。Vue3组件库是基于Vue.js3.x版本开发的一套可用于构建Web应用的UI组件集合,可以帮助开发者快速搭建页面并保证页面的一致性和美观性。目标关键词:Vue3组件库设计与构建设计原则组件库的设计需要遵循一定的原则,比如易用性、可维护性、扩展性等。在设计阶段需要考虑到不同场景的使用,并且保证</div> </li> <li><a href="/article/1943931763084554240.htm" title="自测魅族手机webview加载h5时ul嵌套li标签js失效问题记录" target="_blank">自测魅族手机webview加载h5时ul嵌套li标签js失效问题记录</a> <span class="text-muted">ZhDan91</span> <a class="tag" taget="_blank" href="/search/%E6%B7%B7%E5%90%88app/1.htm">混合app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a> <div>自测魅族手机ul嵌套li标签js失效问题:可采用div嵌套option实现样式:.hot_list{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;}.hot_listoption{text-align:center;width:30%;padding:.16rem.34rem;border:0.1remso</div> </li> <li><a href="/article/1943930249423155200.htm" title="GoView 强势入驻 GitCode:拖拽低代码,打造高颜值数据大屏" target="_blank">GoView 强势入驻 GitCode:拖拽低代码,打造高颜值数据大屏</a> <span class="text-muted">GitCode 代码君</span> <a class="tag" taget="_blank" href="/search/gitcode/1.htm">gitcode</a><a class="tag" taget="_blank" href="/search/%E4%BD%8E%E4%BB%A3%E7%A0%81/1.htm">低代码</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a> <div>信息可视化时代,数字大屏日益成为展示核心KPI、运营状态、监控预警的主流形式。然而,用传统方式开发一个定制化数字大屏需要解决多少问题?1.繁复的数据源集成,各种不同的协议和格式……2.让人晕头转向的可视化逻辑,调动艰难的样式、布局、动画,和往往难以统一的风格3.牵一发而动全身的代码结构,就想换个主题色结果开启的全局CSS大冒险……现在,一个开源项目即可搞定上述问题——拖拽式低代码数字可视化平台Go</div> </li> <li><a href="/article/1943929870320988160.htm" title="为Layui Table组件添加前端搜索功能" target="_blank">为Layui Table组件添加前端搜索功能</a> <span class="text-muted">caifox菜狐狸</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E4%B9%8B%E6%97%85%EF%BC%9A%E4%BB%8E%E6%96%B0%E6%89%8B%E5%88%B0%E4%B8%93%E5%AE%B6/1.htm">学习之旅:从新手到专家</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/layui/1.htm">layui</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/table/1.htm">table</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%90%9C%E7%B4%A2/1.htm">前端搜索</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E6%A0%BC%E6%90%9C%E7%B4%A2/1.htm">表格搜索</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>在现代Web开发中,数据展示和交互功能是构建高效、用户友好界面的关键要素之一。Layui作为一款广受欢迎的前端UI框架,以其简洁的代码、丰富的组件和强大的功能,为开发者提供了极大的便利。其中,Layui的Table组件更是以其强大的数据展示能力和灵活的配置选项,成为了许多项目中不可或缺的部分。然而,在实际应用中,仅仅展示数据往往是不够的。用户通常需要根据自己的需求快速查找特定信息,这就需要为表格添</div> </li> <li><a href="/article/1943926338326949888.htm" title="flutter知识点" target="_blank">flutter知识点</a> <span class="text-muted">ZhDan91</span> <a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a> <div>#时隔4年了#4年前用flutter开发海外项目和医疗项目。绘制界面的语法与html还是较类似的。把这些封印的记忆和技术回顾一下,最开始是开发Android出身的,所以开发起flutter来依旧是用的androidstudio开发工具。整理下用到的知识点:整理来源:flutter面试题——基础篇(1)-CSDN博客1、Dart是单线程的。在单线程中以消息循环来运行的。其中敖汉两个任务队列。一个是微</div> </li> <li><a href="/article/1943924321755918336.htm" title="Java中的Tomcat,开启Web应用腾飞【基础版】" target="_blank">Java中的Tomcat,开启Web应用腾飞【基础版】</a> <span class="text-muted"></span> <div>目录一、Tomcat初登场:揭开神秘面纱(一)啥是Tomcat(二)为啥要有Tomcat二、Tomcat的安装与启动:开启第一步(一)下载Tomcat(二)启动Tomcat三、Tomcat的目录结构:探秘内部布局(一)核心目录介绍(二)目录间的协同工作四、部署JavaWeb应用到Tomcat:让应用上线(一)打包Web应用为WAR文件(二)部署WAR文件到Tomcat五、Tomcat的配置优化:让</div> </li> <li><a href="/article/1943923817982259200.htm" title="Java Web 之 Session 详解" target="_blank">Java Web 之 Session 详解</a> <span class="text-muted">艾伦~耶格尔</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/session/1.htm">session</a> <div>在JavaWeb开发中,Session就像网站的专属记忆管家,为每个用户保管着重要的信息和状态,确保用户在网站的旅程顺畅无阻。场景一:想象你去一家大型超市购物,推着购物车挑选商品。这个购物车就如同Session,它记录了你的购物信息,方便你在结账时一次性结算。场景二:你在玩一个在线游戏,登录账号后,你的游戏进度、等级、装备等信息都会被保存在Session中,即使你中途关闭游戏,下次登录时依然可以继</div> </li> <li><a href="/article/1943920918606704640.htm" title="Spring WebFlux 响应式编程原理与实战指南" target="_blank">Spring WebFlux 响应式编程原理与实战指南</a> <span class="text-muted"></span> <div>SpringWebFlux响应式编程原理与实战指南一、技术背景与应用场景随着微服务与高并发的迅速发展,传统的阻塞式编程模型在处理大量并发请求时容易导致线程资源耗尽、响应延迟增高。SpringWebFlux基于ReactiveStreams规范,通过非阻塞、背压机制,实现高吞吐、低延迟的Web服务。典型应用场景包括:实时数据推送:WebSocket或Server-SentEvents场景。高并发AP</div> </li> <li><a href="/article/1943920035919622144.htm" title="2025年渗透测试面试题总结-2025年HW(护网面试) 43(题目+回答)" target="_blank">2025年渗透测试面试题总结-2025年HW(护网面试) 43(题目+回答)</a> <span class="text-muted">独行soc</span> <a class="tag" taget="_blank" href="/search/2025%E5%B9%B4%E6%8A%A4%E7%BD%91/1.htm">2025年护网</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E7%A7%91%E6%8A%80/1.htm">科技</a><a class="tag" taget="_blank" href="/search/%E6%B8%97%E9%80%8F%E6%B5%8B%E8%AF%95/1.htm">渗透测试</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/%E6%8A%A4%E7%BD%91/1.htm">护网</a> <div>安全领域各种资源,学习文档,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具,欢迎关注。目录2025年HW(护网面试)431.自我介绍与职业规划2.Webshell源码级检测方案3.2025年新型Web漏洞TOP54.渗透中的高价值攻击点5.智能Fuzz平台架构设计6.堆栈溢出攻防演进7.插桩技术实战应用8.二进制安全能力矩阵9.C语言内存管理精要10.Pyth</div> </li> <li><a href="/article/1943919909612351488.htm" title="Vue.js 过渡 & 动画" target="_blank">Vue.js 过渡 & 动画</a> <span class="text-muted">lsx202406</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Vue.js过渡&动画引言在Web开发中,过渡与动画是提升用户体验的关键元素。Vue.js作为一款流行的前端框架,提供了强大的过渡与动画功能,使得开发者能够轻松实现丰富的交互效果。本文将深入探讨Vue.js中的过渡与动画,包括其原理、应用场景以及实现方法。一、Vue.js过渡原理Vue.js过渡是利用CSS3的transition属性实现的。当Vue.js侦测到数据变化时,会自动触发过渡效果。过渡</div> </li> <li><a href="/article/1943919026744913920.htm" title="JavaScript之DOM操作与事件处理详解" target="_blank">JavaScript之DOM操作与事件处理详解</a> <span class="text-muted">AA-代码批发V哥</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>JavaScript之DOM操作与事件处理详解一、DOM基础:理解文档对象模型二、DOM元素的获取与访问2.1基础获取方法2.2集合的区别与注意事项三、DOM元素的创建与修改3.1创建与插入元素3.2修改元素属性与样式3.2.1属性操作3.2.2样式操作3.3元素内容的修改四、DOM元素的删除与替换4.1删除元素4.2替换元素五、事件处理:实现页面交互5.1事件绑定的三种方式5.1.1HTML属性</div> </li> <li><a href="/article/1943917011268595712.htm" title="Javaweb学习之Vue模板语法(三)" target="_blank">Javaweb学习之Vue模板语法(三)</a> <span class="text-muted">不要数手指啦</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>目录学习资料前情回顾本期介绍(vue模板语法)文本插值Vue的Attribute绑定使用JavaScript表达式综合实例代码:学习资料Vue.js-渐进式JavaScript框架|Vue.js(vuejs.org)前情回顾项目的创建大家可以看这篇文章Vue学习之项目的创建-CSDN博客本期介绍(vue模板语法)首先,找到我们编写代码的地方找到自己项目的src文件夹,打开之后点击component</div> </li> <li><a href="/article/1943914995217657856.htm" title="swagger【个人笔记】" target="_blank">swagger【个人笔记】</a> <span class="text-muted">撰卢</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>文章目录swagger导入mave坐标在配置类(WebMvcConfiguration)中加入knife4j相关配置设置静态资源映射,主要是让拦截器放行swagger常用注解@Api(tags="\[描述这个类的作用]")@ApiModel(description="\[描述这个类的作用]")@ApiModelProPerty("描述这个类的作用")@ApiOperation("\[描述方法的作用</div> </li> <li><a href="/article/1943914742187880448.htm" title="Vue3 tailwindcss" target="_blank">Vue3 tailwindcss</a> <span class="text-muted"></span> <div>1、安装tailwindcsspnpmi-Dtailwindcsspostcssautoprefixer#yarnadd-Dtailwindcsspostcssautoprefixer#npmi-Dtailwindcsspostcssautoprefixer2、创建TailwindCSS配置文件npxtailwindcssinit-ptailwind.config.js/**@type{impor</div> </li> <li><a href="/article/1943914615645728768.htm" title="Tomcat:Java Web应用的幕后英雄" target="_blank">Tomcat:Java Web应用的幕后英雄</a> <span class="text-muted">互联网动态分析</span> <a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a> <div>在当今数字化浪潮中,Java作为一门成熟且广泛应用的编程语言,支撑着无数企业级应用和互联网服务的稳定运行。而在JavaWeb开发领域,Tomcat无疑是一个举足轻重的存在,它宛如一位默默耕耘的幕后英雄,为众多Web应用提供了可靠的运行环境。Tomcat的起源与发展Tomcat的故事始于1999年,当时SunMicrosystems(后被Oracle收购)与Apache软件基金会合作,旨在为Java</div> </li> <li><a href="/article/1943914107526770688.htm" title="Vue框架之模板语法全面解析" target="_blank">Vue框架之模板语法全面解析</a> <span class="text-muted">AA-代码批发V哥</span> <a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>Vue框架之模板语法全面解析一、模板语法的核心思想二、插值表达式:数据渲染的基础2.1基本用法:渲染文本2.2纯HTML渲染:`v-html`指令2.3一次性插值:`v-once`指令三、指令系统:控制DOM的行为3.1条件渲染:`v-if`与`v-show`3.1.1`v-if`:动态创建/销毁元素3.1.2`v-else`与`v-else-if`:条件分支3.1.3`v-show`:动态显示/</div> </li> <li><a href="/article/1943913603195269120.htm" title="【个人笔记】负载均衡" target="_blank">【个人笔记】负载均衡</a> <span class="text-muted">撰卢</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1/1.htm">负载均衡</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>文章目录nginx反向代理的好处负载均衡负载均很的配置方式均衡负载的方式nginx反向代理的好处提高访问速度进行负载均衡保证后端服务安全负载均衡负载均衡,就是把大量的请求按照我们指定的方式均衡的分配给集群中的每台服务器负载均很的配置方式upstreamwebservers{server192.168.100.128:8080server192.168.100.129:8080}server{lis</div> </li> <li><a href="/article/1943908312143687680.htm" title="第47章 Python uWSGI 安装配置教程" target="_blank">第47章 Python uWSGI 安装配置教程</a> <span class="text-muted">你得不到的念想</span> <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>本文主要介绍如何部署简单的WSGI应用和常见的Web框架。以Ubuntu/Debian为例,先install依赖包:apt-getinstallbuild-essentialpython-devPythoninstalluWSGI1、通过pip命令:pipinstalluwsgi2、downloadinstall脚本:curlhttp://uwsgi.it/install|bash-sdefaul</div> </li> <li><a href="/article/1943906923720011776.htm" title="Python selenium 库" target="_blank">Python selenium 库</a> <span class="text-muted">AI老李</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>关键要点PythonSelenium库用于自动化Web浏览器,适合测试和爬虫,中文教程资源丰富。推荐菜鸟教程、CSDN博客和Selenium-Python中文文档,涵盖基础到进阶。学习需注意浏览器驱动匹配和动态加载处理,可能需显式等待。资源推荐以下是适合初学者和中级学习者的中文教程:菜鸟教程:提供全面的Selenium教程,包括安装和示例,详见Selenium教程。Selenium-Python中</div> </li> <li><a href="/article/41.htm" title="html页面js获取参数值" target="_blank">html页面js获取参数值</a> <span class="text-muted">0624chenhong</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>1.js获取参数值js function GetQueryString(name) {      var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");      var r = windo</div> </li> <li><a href="/article/168.htm" title="MongoDB 在多线程高并发下的问题" target="_blank">MongoDB 在多线程高并发下的问题</a> <span class="text-muted">BigCat2013</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/DB/1.htm">DB</a><a class="tag" taget="_blank" href="/search/%E9%AB%98%E5%B9%B6%E5%8F%91/1.htm">高并发</a><a class="tag" taget="_blank" href="/search/%E9%87%8D%E5%A4%8D%E6%95%B0%E6%8D%AE/1.htm">重复数据</a> <div>最近项目用到 MongoDB , 主要是一些读取数据及改状态位的操作. 因为是结合了最近流行的 Storm进行大数据的分析处理,并将分析结果插入Vertica数据库,所以在多线程高并发的情境下, 会发现 Vertica 数据库中有部分重复的数据. 这到底是什么原因导致的呢?笔者开始也是一筹莫 展,重复去看 MongoDB 的 API , 终于有了新发现 : com.mongodb.DB 这个类有</div> </li> <li><a href="/article/295.htm" title="c++ 用类模版实现链表(c++语言程序设计第四版示例代码)" target="_blank">c++ 用类模版实现链表(c++语言程序设计第四版示例代码)</a> <span class="text-muted">CrazyMizzz</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a> <div>#include<iostream> #include<cassert> using namespace std; template<class T> class Node { private: Node<T> * next; public: T data; </div> </li> <li><a href="/article/422.htm" title="最近情况" target="_blank">最近情况</a> <span class="text-muted">麦田的设计者</span> <a class="tag" taget="_blank" href="/search/%E6%84%9F%E6%85%A8/1.htm">感慨</a><a class="tag" taget="_blank" href="/search/%E8%80%83%E8%AF%95/1.htm">考试</a><a class="tag" taget="_blank" href="/search/%E7%94%9F%E6%B4%BB/1.htm">生活</a> <div>   在五月黄梅天的岁月里,一年两次的软考又要开始了。到目前为止,我已经考了多达三次的软考,最后的结果就是通过了初级考试(程序员)。人啊,就是不满足,考了初级就希望考中级,于是,这学期我就报考了中级,明天就要考试。感觉机会不大,期待奇迹发生吧。这个学期忙于练车,写项目,反正最后是一团糟。后天还要考试科目二。这个星期真的是很艰难的一周,希望能快点度过。   </div> </li> <li><a href="/article/549.htm" title="linux系统中用pkill踢出在线登录用户" target="_blank">linux系统中用pkill踢出在线登录用户</a> <span class="text-muted">被触发</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>由于linux服务器允许多用户登录,公司很多人知道密码,工作造成一定的障碍所以需要有时踢出指定的用户 1/#who   查出当前有那些终端登录(用 w 命令更详细) # who root     pts/0        2010-10-28 09:36 (192</div> </li> <li><a href="/article/676.htm" title="仿QQ聊天第二版" target="_blank">仿QQ聊天第二版</a> <span class="text-muted">肆无忌惮_</span> <a class="tag" taget="_blank" href="/search/qq/1.htm">qq</a> <div>在第一版之上的改进内容:  第一版链接: http://479001499.iteye.com/admin/blogs/2100893   用map存起来号码对应的聊天窗口对象,解决私聊的时候所有消息发到一个窗口的问题. 增加ViewInfo类,这个是信息预览的窗口,如果是自己的信息,则可以进行编辑.   信息修改后上传至服务器再告诉所有用户,自己的窗口</div> </li> <li><a href="/article/803.htm" title="java读取配置文件" target="_blank">java读取配置文件</a> <span class="text-muted">知了ing</span> <div>1,java读取.properties配置文件 InputStream in; try { in = test.class.getClassLoader().getResourceAsStream("config/ipnetOracle.properties");//配置文件的路径 Properties p = new Properties()</div> </li> <li><a href="/article/930.htm" title="__attribute__ 你知多少?" target="_blank">__attribute__ 你知多少?</a> <span class="text-muted">矮蛋蛋</span> <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/gcc/1.htm">gcc</a> <div>原文地址: http://www.cnblogs.com/astwish/p/3460618.html GNU C 的一大特色就是__attribute__ 机制。__attribute__ 可以设置函数属性(Function Attribute )、变量属性(Variable Attribute )和类型属性(Type Attribute )。 __attribute__ 书写特征是:</div> </li> <li><a href="/article/1057.htm" title="jsoup使用笔记" target="_blank">jsoup使用笔记</a> <span class="text-muted">alleni123</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/JSoup/1.htm">JSoup</a> <div><dependency> <groupId>org.jsoup</groupId> <artifactId>jsoup</artifactId> <version>1.7.3</version> </dependency> 2014/08/28 今天遇到这种形式, </div> </li> <li><a href="/article/1184.htm" title="JAVA中的集合 Collectio 和Map的简单使用及方法" target="_blank">JAVA中的集合 Collectio 和Map的简单使用及方法</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/list/1.htm">list</a><a class="tag" taget="_blank" href="/search/map/1.htm">map</a><a class="tag" taget="_blank" href="/search/set/1.htm">set</a> <div>         List ,set ,map的使用方法和区别 java容器类类库的用途是保存对象,并将其分为两个概念:     Collection集合:一个独立的序列,这些序列都服从一条或多条规则;List必须按顺序保存元素  ,set不能重复元素;Queue按照排队规则来确定对象产生的顺序(通常与他们被插入的</div> </li> <li><a href="/article/1311.htm" title="杀LINUX的JOB进程" target="_blank">杀LINUX的JOB进程</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/unix/1.htm">unix</a> <div>今天发现数据库一个JOB一直在执行,都执行了好几个小时还在执行,所以想办法给删除掉   系统环境:    ORACLE 10G    Linux操作系统   操作步骤如下: 第一步.查询出来那个job在运行,找个对应的SID字段 select * from dba_jobs_running--找到job对应的sid &n</div> </li> <li><a href="/article/1438.htm" title="Spring AOP详解" target="_blank">Spring AOP详解</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/AOP/1.htm">AOP</a> <div>        最近项目中遇到了以下几点需求,仔细思考之后,觉得采用AOP来解决。一方面是为了以更加灵活的方式来解决问题,另一方面是借此机会深入学习Spring AOP相关的内容。例如,以下需求不用AOP肯定也能解决,至于是否牵强附会,仁者见仁智者见智。 1.对部分函数的调用进行日志记录,用于观察特定问题在运行过程中的函数调用</div> </li> <li><a href="/article/1565.htm" title="[Gson六]Gson类型适配器(TypeAdapter)" target="_blank">[Gson六]Gson类型适配器(TypeAdapter)</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/Adapter/1.htm">Adapter</a> <div>TypeAdapter的使用动机  Gson在序列化和反序列化时,默认情况下,是按照POJO类的字段属性名和JSON串键进行一一映射匹配,然后把JSON串的键对应的值转换成POJO相同字段对应的值,反之亦然,在这个过程中有一个JSON串Key对应的Value和对象之间如何转换(序列化/反序列化)的问题。   以Date为例,在序列化和反序列化时,Gson默认使用java.</div> </li> <li><a href="/article/1692.htm" title="【spark八十七】给定Driver Program, 如何判断哪些代码在Driver运行,哪些代码在Worker上执行" target="_blank">【spark八十七】给定Driver Program, 如何判断哪些代码在Driver运行,哪些代码在Worker上执行</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/driver/1.htm">driver</a> <div>Driver Program是用户编写的提交给Spark集群执行的application,它包含两部分 作为驱动: Driver与Master、Worker协作完成application进程的启动、DAG划分、计算任务封装、计算任务分发到各个计算节点(Worker)、计算资源的分配等。 计算逻辑本身,当计算任务在Worker执行时,执行计算逻辑完成application的计算任务 </div> </li> <li><a href="/article/1819.htm" title="nginx 经验总结" target="_blank">nginx 经验总结</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/nginx+%E6%80%BB%E7%BB%93/1.htm">nginx 总结</a> <div>   深感nginx的强大,只学了皮毛,把学下的记录。    获取Header 信息,一般是以$http_XX(XX是小写)            获取body,通过接口,再展开,根据K取V    获取uri,以$arg_XX      &n</div> </li> <li><a href="/article/1946.htm" title="轩辕互动-1.求三个整数中第二大的数2.整型数组的平衡点" target="_blank">轩辕互动-1.求三个整数中第二大的数2.整型数组的平衡点</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84/1.htm">数组</a> <div> import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class ExoWeb { public static void main(String[] args) { ExoWeb ew=new ExoWeb(); System.out.pri</div> </li> <li><a href="/article/2073.htm" title="Netty源码学习-Java-NIO-Reactor" target="_blank">Netty源码学习-Java-NIO-Reactor</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div>Netty里面采用了NIO-based Reactor Pattern 了解这个模式对学习Netty非常有帮助 参考以下两篇文章: http://jeewanthad.blogspot.com/2013/02/reactor-pattern-explained-part-1.html http://gee.cs.oswego.edu/dl/cpjslides/nio.pdf </div> </li> <li><a href="/article/2200.htm" title="AOP通俗理解" target="_blank">AOP通俗理解</a> <span class="text-muted">cngolon</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/AOP/1.htm">AOP</a> <div>1.我所知道的aop     初看aop,上来就是一大堆术语,而且还有个拉风的名字,面向切面编程,都说是OOP的一种有益补充等等。一下子让你不知所措,心想着:怪不得很多人都和 我说aop多难多难。当我看进去以后,我才发现:它就是一些java基础上的朴实无华的应用,包括ioc,包括许许多多这样的名词,都是万变不离其宗而 已。 2.为什么用aop&nb</div> </li> <li><a href="/article/2327.htm" title="cursor variable 实例" target="_blank">cursor variable 实例</a> <span class="text-muted">ctrain</span> <a class="tag" taget="_blank" href="/search/variable/1.htm">variable</a> <div> create or replace procedure proc_test01 as type emp_row is record( empno emp.empno%type, ename emp.ename%type, job emp.job%type, mgr emp.mgr%type, hiberdate emp.hiredate%type, sal emp.sal%t</div> </li> <li><a href="/article/2454.htm" title="shell报bash: service: command not found解决方法" target="_blank">shell报bash: service: command not found解决方法</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/service/1.htm">service</a><a class="tag" taget="_blank" href="/search/jps/1.htm">jps</a> <div>今天在执行一个脚本时,本来是想在脚本中启动hdfs和hive等程序,可以在执行到service hive-server start等启动服务的命令时会报错,最终解决方法记录一下:   脚本报错如下: ./olap_quick_intall.sh: line 57: service: command not found ./olap_quick_intall.sh: line 59</div> </li> <li><a href="/article/2581.htm" title="40个迹象表明你还是PHP菜鸟" target="_blank">40个迹象表明你还是PHP菜鸟</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a><a class="tag" taget="_blank" href="/search/oop/1.htm">oop</a> <div>你是PHP菜鸟,如果你:1. 不会利用如phpDoc 这样的工具来恰当地注释你的代码2. 对优秀的集成开发环境如Zend Studio 或Eclipse PDT 视而不见3. 从未用过任何形式的版本控制系统,如Subclipse4. 不采用某种编码与命名标准 ,以及通用约定,不能在项目开发周期里贯彻落实5. 不使用统一开发方式6. 不转换(或)也不验证某些输入或SQL查询串(译注:参考PHP相关函</div> </li> <li><a href="/article/2708.htm" title="Android逐帧动画的实现" target="_blank">Android逐帧动画的实现</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>一、代码实现: private ImageView iv; private AnimationDrawable ad; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout</div> </li> <li><a href="/article/2835.htm" title="java远程调用linux的命令或者脚本" target="_blank">java远程调用linux的命令或者脚本</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/ganymed-ssh2/1.htm">ganymed-ssh2</a> <div>转载请出自出处: http://eksliang.iteye.com/blog/2105862        Java通过SSH2协议执行远程Shell脚本(ganymed-ssh2-build210.jar)   使用步骤如下: 1.导包 官网下载: http://www.ganymed.ethz.ch/ssh2/ ma</div> </li> <li><a href="/article/2962.htm" title="adb端口被占用问题" target="_blank">adb端口被占用问题</a> <span class="text-muted">gqdy365</span> <a class="tag" taget="_blank" href="/search/adb/1.htm">adb</a> <div>最近重新安装的电脑,配置了新环境,老是出现: adb server is out of date. killing... ADB server didn't ACK * failed to start daemon * 百度了一下,说是端口被占用,我开个eclipse,然后打开cmd,就提示这个,很烦人。 一个比较彻底的解决办法就是修改</div> </li> <li><a href="/article/3089.htm" title="ASP.NET使用FileUpload上传文件" target="_blank">ASP.NET使用FileUpload上传文件</a> <span class="text-muted">hvt</span> <a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/hovertree/1.htm">hovertree</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/webform/1.htm">webform</a> <div>前台代码: <asp:FileUpload ID="fuKeleyi" runat="server" /> <asp:Button ID="BtnUp" runat="server" onclick="BtnUp_Click" Text="上 传" /></div> </li> <li><a href="/article/3216.htm" title="代码之谜(四)- 浮点数(从惊讶到思考)" target="_blank">代码之谜(四)- 浮点数(从惊讶到思考)</a> <span class="text-muted">justjavac</span> <a class="tag" taget="_blank" href="/search/%E6%B5%AE%E7%82%B9%E6%95%B0/1.htm">浮点数</a><a class="tag" taget="_blank" href="/search/%E7%B2%BE%E5%BA%A6/1.htm">精度</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E4%B9%8B%E8%B0%9C/1.htm">代码之谜</a><a class="tag" taget="_blank" href="/search/IEEE/1.htm">IEEE</a> <div>在『代码之谜』系列的前几篇文章中,很多次出现了浮点数。 浮点数在很多编程语言中被称为简单数据类型,其实,浮点数比起那些复杂数据类型(比如字符串)来说, 一点都不简单。 单单是说明 IEEE浮点数 就可以写一本书了,我将用几篇博文来简单的说说我所理解的浮点数,算是抛砖引玉吧。 一次面试 记得多年前我招聘 Java 程序员时的一次关于浮点数、二分法、编码的面试, 多年以后,他已经称为了一名很出色的</div> </li> <li><a href="/article/3343.htm" title="数据结构随记_1" target="_blank">数据结构随记_1</a> <span class="text-muted">lx.asymmetric</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>第一章   1.数据结构包括数据的 逻辑结构、数据的物理/存储结构和数据的逻辑关系这三个方面的内容。 2.数据的存储结构可用四种基本的存储方法表示,它们分别是 顺序存储、链式存储 、索引存储 和 散列存储。 3.数据运算最常用的有五种,分别是  查找/检索、排序、插入、删除、修改。 4.算法主要有以下五个特性:  输入、输出、可行性、确定性和有穷性。 5.算法分析的</div> </li> <li><a href="/article/3470.htm" title="linux的会话和进程组" target="_blank">linux的会话和进程组</a> <span class="text-muted">网络接口</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>会话: 一个或多个进程组。起于用户登录,终止于用户退出。此期间所有进程都属于这个会话期。会话首进程:调用setsid创建会话的进程1.规定组长进程不能调用setsid,因为调用setsid后,调用进程会成为新的进程组的组长进程.如何保证? 先调用fork,然后终止父进程,此时由于子进程的进程组ID为父进程的进程组ID,而子进程的ID是重新分配的,所以保证子进程不会是进程组长,从而子进程可以调用se</div> </li> <li><a href="/article/3597.htm" title="二维数组 元素的连续求解" target="_blank">二维数组 元素的连续求解</a> <span class="text-muted">1140566087</span> <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/ACM/1.htm">ACM</a> <div>import java.util.HashMap; public class Title { public static void main(String[] args){ f(); } // 二位数组的应用 //12、二维数组中,哪一行或哪一列的连续存放的0的个数最多,是几个0。注意,是“连续”。 public static void f(){ </div> </li> <li><a href="/article/3724.htm" title="也谈什么时候Java比C++快" target="_blank">也谈什么时候Java比C++快</a> <span class="text-muted">windshome</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a> <div>  刚打开iteye就看到这个标题“Java什么时候比C++快”,觉得很好笑。   你要比,就比同等水平的基础上的相比,笨蛋写得C代码和C++代码,去和高手写的Java代码比效率,有什么意义呢?   我是写密码算法的,深刻知道算法C和C++实现和Java实现之间的效率差,甚至也比对过C代码和汇编代码的效率差,计算机是个死的东西,再怎么优化,Java也就是和C</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类:</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>