、、等,以更好地描述文档的结构。 HTML(HTML 4.01): 较早的HTML版本使用传统的结构元素,如和,并没有像HTML5那样引入一系列新的语义元素。 XHTML: XHTML更强调文档的结构和规范,要求使用小写字母,元素必须正确嵌套和闭合。 (3)语法要求: HTML5: HTML5的语法较为宽松,浏览器在解析时有一定的容错性,对于不严格的代码也能够正常工作。 HTML(HTML 4.01): HTML 4.01的语法相对宽松,但没有HTML5那么宽容。 XHTML: XHTML对语法要求更为严格,必须遵循 XML 规范,标签必须闭合,属性必须使用引号括起来,大小写也必须一致。 如:XHTML syntax: ;HTML syntax: (4)DTD: DTD(Document Type Definition)是一种用于定义XML或HTML文档结构的规范。在HTML和XHTML中,使用不同的DTD来定义文档结构。以下是它们之间的主要区别: HTML DTD: HTML 4.01 XHTML DTD: HTML5 总体而言,HTML5是HTML标准的最新版本,引入了更多功能和语义元素,而XHTML是对HTML更为严格的规范。在实际开发中,HTML5已经成为主流标准,而XHTML的应用逐渐减少。 2.HTML的PHASE ELEMENTS :用于表示文本中的粗体文本,但不强调语义。 This is bold text. :用于表示强调的文本,通常以斜体显示。 This is emphasized text. :用于表示文本中的斜体文本,但不强调语义。 This is italic text. :用于表示文本中的突出显示或标记。 Search for important information. :用于表示文本中的小号字体文本。 This is small text. :用于表示强调的文本,通常以粗体显示。具有更强的语义重要性。 This is strong text. :用于表示文本中的下标。 H2O :用于表示文本中的上标。 x2 3.HTML的LISTS (1)无序列表 (Unordered List): 无序列表用于表示一组项目,项目之间没有顺序关系。通常使用圆点、方块或其他符号作为项目标记。 使用元素来定义无序列表,而每个列表项使用元素表示。 Item 1 Item 2 Item 3 (2)有序列表 (Ordered List): 有序列表用于表示一组项目,并给项目指定了顺序。项目通常用数字或字母标记。 使用元素来定义有序列表,每个列表项仍然使用元素。 First item Second item Third item (3)描述列表 (Description List): 描述列表用于表示一组术语及其相应的描述。每个术语都由(描述术语)标记,而相应的描述则由(描述内容)标记。 使用元素来定义描述列表。 Term 1 Description for Term 1 Term 2 Description for Term 2 4.特殊符号 © © < < > > & & 5.和 (1) 元素: 是一个块级元素,用于在 HTML 文档中创建一个分割或者容器。它通常用于组织和布局页面的内容,可以包含其他块级或内联元素。 本身并没有特定的语义,它是一个通用的容器元素,主要用于样式和布局的目的。开发者可以使用 CSS 来样式化和定位 元素。 Paragraph 1 Paragraph 2 (2) 元素: 是用于创建超链接(链接)的元素。它可以将文本、图像或其他元素转变为可点击的链接,通过指定 href 属性来定义链接的目标 URL。 当用户点击链接时,浏览器会导航到目标页面或执行指定的操作。除了 href, 还可以包含其他属性,例如 target(指定链接如何在浏览器中打开)。 Visit Example.com 6.table表格 是 HTML 中用于创建表格的元素。表格是一种用于组织和显示数据的结构,通常包含行和列,每个单元格中可以放置文本、图像或其他 HTML 元素。 基本的 结构通常包含以下元素: :定义整个表格。 (table row):定义表格中的行。 (table data):定义表格中的数据单元格。 (table header):定义表格的表头单元格。通常放在表格的第一行或第一列,用于标识列或行的内容。浏览器通常会将 中的文本加粗显示,并将文本居中对齐。 、 和 :分别定义表格的头部、主体和尾部。这些元素有助于更好地组织和样式化表格的不同部分。 例如: Row 1, Cell 1 Row 1, Cell 2 Row 2, Cell 1 Row 2, Cell 2 7.使用 CSS 样式化表格: (obsolete表示是在HTML中的) (1)align (obsolete): HTML Attribute: 用于设置整个表格在页面中的水平对齐方式。 CSS Property: 使用 CSS 的 width 和 margin 属性来实现表格在页面中的居中对齐。 (2)bgcolor (obsolete): HTML Attribute: 用于设置整个表格的背景颜色。 CSS Property: 使用 CSS 的 background-color 属性来设置背景颜色。 (3)cellpadding (obsolete): HTML Attribute: 用于设置单元格内容与单元格边框之间的空白。 CSS Property: 使用 CSS 的 padding 属性来设置单元格内边距。 (4)cellspacing (obsolete): HTML Attribute: 用于设置单元格之间的空白,即单元格边框之间的距离。 CSS Property: 使用 CSS 的 border-spacing 或 border-collapse 属性来设置单元格之间的空白。 (5)border (obsolete): HTML Attribute: 用于设置表格的边框宽度。 CSS Property: 使用 CSS 的 border 属性来设置表格边框。 (6)background-image: CSS Property: 用于设置元素的背景图像。 8.CSS 伪类(pseudo-class) 用于选择文档中特定位置或类型的元素。 (1):first-of-type: 目的: 选择指定类型的第一个元素。 示例: 选择页面中每个段落的第一个 元素。 p span:first-of-type { color: red; } (2):first-child: 目的: 选择某个元素的第一个子元素。这是 CSS2 中的选择器。 示例: 选择页面中每个段落的第一个子元素。 p:first-child { font-weight: bold; } (3):last-of-type: 目的: 选择指定类型的最后一个元素。 示例: 选择页面中每个段落的最后一个 元素。 p span:last-of-type { text-decoration: underline; } (4):last-child: 目的: 选择某个元素的最后一个子元素。 示例: 选择页面中每个段落的最后一个子元素。 p:last-child { color: blue; } (5):nth-of-type(n): 目的: 选择指定类型的第 n 个元素,其中 n 是一个整数、odd(奇数)或 even(偶数)。 示例: 选择每个段落中的第三个 元素。 p em:nth-of-type(3) { font-style: italic; } 示例: 选择每个段落中的奇数位置的 元素。 p strong:nth-of-type(odd) { font-weight: 700; } 示例: 选择每个段落中的偶数位置的 元素。 p strong:nth-of-type(even) { font-weight: 400; } 9.层叠样式表(Cascading Style Sheets,CSS)的四种不同类型: (1)Inline Styles(内联样式): 意义: 内联样式是直接在HTML元素中使用style属性指定的样式。这样的样式直接应用于单个元素,优先级较高,会覆盖其他样式。 style="Declaration Property:Declaration Value;" 示例: This is a paragraph with inline styles. (2)Embedded Styles(嵌入样式): 意义: 嵌入样式是通过在HTML文档的头部使用 Title1 Title2 paragraph (3)External Styles(外部样式): 意义: 外部样式是将样式定义在一个独立的外部CSS文件中,然后通过链接(元素)引入到HTML文档中。这样的样式可以在多个文档中共享。 p { color: red; font-size: 20px; } This is a paragraph with external styles. (4)Imported Styles(导入样式): 意义: 导入样式是通过@import规则将一个外部CSS文件导入到另一个CSS文件中。这使得样式表的结构更加模块化和可维护。 /* imported-styles.css */ p { text-decoration: underline; } /* main-styles.css */ @import url('imported-styles.css'); 在CSS中,这些不同类型的样式表遵循一定的优先级规则,称为层叠规则。 内联样式优先级最高,其次是嵌入样式、外部样式和导入样式。 9.CSS 中的样式规则(rule)由两个主要部分组成:选择器(Selector)和声明块(Declaration)。 Selector{Declaration Property:Declaration Value} (1)Selector(选择器): 选择器指定了哪些 HTML 元素将应用这条样式规则。它可以是元素的名称、类、ID,也可以是元素的组合,以及其他选择器类型。 p { color: blue; font-size: 16px; } 在这个例子中,p 就是选择器,表示这个样式规则将应用于所有段落元素。 (2)Declaration(声明块): 声明块包含在大括号 {} 内,里面包含了一个或多个样式声明。每个声明都由一个属性(property)和一个值(value)组成,用冒号 : 分隔。多个声明之间使用分号 ; 分隔。 例如,下面是一条规则的声明块: p { color: blue; /* 声明1:颜色属性 */ font-size: 16px; /* 声明2:字体大小属性 */ } 10.CSS properties for configuring text: CSS 属性,用于配置文本的样式和外观。 (1)font-weight(字重): 作用: 用于配置文本的粗细或加粗程度。 值: 可以使用数字值(如 400、700)表示字重,也可以使用关键词(如 normal、bold)。 p { font-weight: bold; } (2)font-style(字体样式): 作用: 用于配置文本的斜体样式。 值: 可以使用关键词(如 normal、italic)。 em { font-style: italic; } (3)font-size(字体大小): 作用: 用于配置文本的大小。 值: 可以使用像素值、百分比、相对长度单位(如 em、rem)等。 h1 { font-size: 24px; } (4)font-family(字体族): 作用: 用于配置文本的字体族,即字体的类型。 值: 可以指定一个具体的字体名称,也可以使用通用字体族,如 serif、sans-serif。 body { font-family: 'Helvetica', Arial, sans-serif; } 11.CSS SELECTORS CSS 中不同类型的选择器: (1)HTML Element Selector(HTML 元素选择器): 描述: HTML 元素选择器是用于选择特定类型的 HTML 元素的选择器。它以 HTML 元素的名称作为选择器,将样式规则应用于相应类型的所有元素。 示例: 以下规则将应用于所有 元素。 p { color: blue; font-size: 16px; } (2)Class Selector(类选择器): 描述: 类选择器用于选择具有相同类名的元素。类选择器以点 . 开头,后面跟着类名。一个页面上可以有多个元素共享同一个类,并且一个元素可以拥有多个类。 示例: 以下规则将应用于所有具有类名为 "highlight" 的元素。 .highlight { background-color: yellow; color: black; } [1]class 选择器用于描述一组元素的样式,class 选择器有别于 id 选择器,class 可以在多个元素中使用。 [2]class 选择器在 HTML 中以 class 属性表示, 在 CSS 中,类选择器以一个点"."号显示。 [3]类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。 [4]也可以指定特定的 HTML 元素使用 class。 (3)ID Selector(ID 选择器): 描述: ID 选择器用于选择具有唯一标识符(ID)的单个元素。ID 在整个页面中必须是唯一的,因此一个样式规则将只应用于页面中的一个元素。 示例: 以下规则将应用于具有 ID 为 "header" 的元素。 #header { font-size: 24px; text-align: center; } [1]id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 [2]HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以 # 来定义。 [3]id属性不要以数字开头,数字开头的 ID 在 Mozilla/Firefox 浏览器中不起作用。 [4]id属性只能在每个 HTML 文档中出现一次。 12.CSS 中的上下文选择器(Contextual Selector) CSS 中的上下文选择器(Contextual Selector)是一种通过元素在文档中的嵌套结构来选择元素的方法。上下文选择器使用空格分隔不同级别的选择器,表示只选择满足某个条件并且处于特定上下文中的元素。以下是几种常见的上下文选择器: (1)Descendant Selector(后代选择器): 描述: 选择某个元素的所有后代元素,无论它们有多深嵌套。 语法: 使用空格分隔两个选择器。 示例: 选择所有 元素,无论它们位于文档的哪个层次结构。 ul li { list-style-type: square; } (2)Child Selector(子元素选择器):> 描述: 选择某个元素的直接子元素,不包括孙子元素及更深层次的后代。 语法: 使用 > 符号分隔两个选择器。 示例: 选择所有 元素,但只在它们是某个 元素的直接子元素时应用样式。 ul > li { font-weight: bold; } (3)Adjacent Sibling Selector(相邻兄弟选择器):+ 描述: 选择某个元素的相邻兄弟元素,即它们具有相同的父元素并且在父元素中是相邻的。 语法: 使用 + 符号分隔两个选择器。 示例: 选择所有 元素后面紧跟的相邻的 元素。 h2 + p { color: red; } (4)General Sibling Selector(通用兄弟选择器):~ 描述: 选择某个元素之后的所有兄弟元素,它们具有相同的父元素。 语法: 使用 ~ 符号分隔两个选择器。 示例: 选择所有 元素后面的所有相邻兄弟 元素。 h2 ~ p { font-style: italic; } 13.SPAN元素 的主要目的是用于配置一小部分文本,使其具有特殊的格式或样式。这个元素通常是内联元素,意味着它不会在文本中另起一行,而是与其他文本元素一起在同一行显示。它可以包裹文本、图像或其他内联元素,使得可以对这部分内容进行定制化样式或添加脚本。 元素是内联元素,它不会在其上方或下方创建额外的空白空间。这意味着当你在文本中使用 时,它不会导致换行,也不会在其周围创建额外的空间。它会像普通文本一样与其他元素并排显示,只是可能具有通过样式或其他属性配置的特殊外观或行为。 例子: Embedded CSS: HTML: Your needs are important to us at Acme Web Design. We will work with you to build your Web site. 14.CSS中的BLOCK/INLINE元素: 在CSS中,block 和 inline 是两种常见的元素显示类型,它们在边框的表现上有一些区别。 (1)Block Elements(块级元素): 特点: 块级元素通常会在页面中单独占据一行,从而在其前后创建新的行。它们会尽可能地占满其父容器的宽度。 示例: 常见的块级元素包括 、、 到 、、、 等。 边框表现: 对于块级元素,默认情况下,边框会包围整个元素,从左边到右边,上边到下边。 (3)Inline Elements(内联元素): 特点: 内联元素不会在页面中创建新的行,它们会在同一行内显示,并尽可能占据其内容所需的空间。 示例: 常见的内联元素包括 、、、、 等。 边框表现: 对于内联元素,默认情况下,边框会包围元素的内容,而不会占据整个水平空间。上下边界会被边框包裹,但左右边界不会。 This is a block-level element. This is an inline element. 在这个例子中, 是一个块级元素,它的边框将占据整个父容器的宽度。而 是一个内联元素,其边框将包围其内容而不会占据整个水平空间。 (4)display修改: 需要注意的是,可以通过样式调整元素的 display 属性来改变元素的显示类型,例如,将块级元素变为内联元素或将内联元素变为块级元素。这可以通过设置 display: block; 或 display: inline; 等来实现。 15.CSS Border property CSS 中的 border 属性用于设置元素的边框样式、宽度和颜色。border 属性是一个复合属性,可以通过以下子属性进行详细设置: [1]border-width: 设置边框的宽度。 可以使用像素值、百分比、em 等作为单位。 示例:border-width: 2px; [2]border-style: 设置边框的样式,如实线、虚线、点线等。 可以取值为 solid、dashed、dotted 等。 示例:border-style: solid; [3]border-color: 设置边框的颜色。 可以使用颜色名称、十六进制值、RGB 值等表示。 示例:border-color: #333; /* 作为复合属性设置 */ border: 2px solid #333; /* 分开设置子属性 */ border-width: 2px; border-style: solid; border-color: #333; [4]还有一些更特定的属性,用于设置边框的四个方向(上、右、下、左): border-top、border-right、border-bottom、border-left: 分别用于设置元素的上、右、下、左边框的样式、宽度和颜色。 16.The Box Model CSS 中的盒子模型(Box Model),这是一个用于描述页面元素在布局时所占空间的概念。以下是对每个部分的解释: (1)Content(内容): 描述: 指的是元素内部包含的文本、图像或其他页面元素的实际内容。内容的大小由元素的宽度(width)和高度(height)属性决定。 示例: 对于一个 元素,其内容就是 标签包裹的文本或其他元素。 (2)Padding(内边距): 描述: 内边距是指元素内容区域与元素边框之间的空间。它是元素内容与边框之间的距离,可以用来增加元素内部内容与边框之间的间隔。 padding-bottom padding-left padding-right padding-top 示例: 如果一个 元素设置了 padding: 10px;,那么它的内容就会被包裹在距离边框 10 像素的内边距内。 [1]一个值: 如果只提供一个值,它会应用于所有四个方向的内边距。 示例:padding: 15px; 表示所有方向的内边距都为 15 像素。 [2]两个值: 第一个值配置上下内边距,第二个值配置左右内边距。 示例:padding: 10px 20px; 表示上下内边距为 10 像素,左右内边距为 20 像素。 [3]三个值: 第一个值配置上内边距,第二个值配置左右内边距,第三个值配置下内边距。 示例:padding: 10px 20px 15px; 表示上内边距为 10 像素,左右内边距为 20 像素,下内边距为 15 像素。 [4]四个值: 分别按照顺时针顺序配置上、右、下、左的内边距。 示例:padding: 10px 20px 15px 25px; 表示上内边距为 10 像素,右内边距为 20 像素,下内边距为 15 像素,左内边距为 25 像素。 (3)Border(边框): 描述: 边框是围绕在元素内容和内边距外部的边界线。它定义了元素的可见边界,并可以有不同的样式、宽度和颜色。 示例: 通过设置 border: 2px solid #333;,一个元素将有一个2像素宽的实线边框,颜色为深灰色。 (4)Margin(外边距): 描述: 外边距是元素边框之外的空间,它定义了元素与相邻元素之间的距离。外边距可以用来控制元素之间的间隔。 示例: 如果一个 元素设置了 margin: 15px;,那么它的外边距将在其边框外围增加 15 像素的间隔,用于与其他元素之间的空隙。 17.Types of Graphics (1)GIF (Graphics Interchange Format): 特点: 支持透明度,允许图像中的某些部分是透明的。 支持简单的动画,可以创建循环播放的图像序列。 无损压缩,但对颜色深度有一定限制(最多支持256种颜色)。 (2)JPG or JPEG (Joint Photographic Experts Group): 特点: 适用于照片和真实场景图像,支持高颜色深度。 有损压缩,但可以调整压缩比例,平衡图像质量和文件大小。 不支持透明度,不适用于包含透明背景的图像。 JPG的渐进式JPEG–类似于交错显示 (3)PNG (Portable Network Graphics): 特点: 支持透明度,可以创建包含半透明效果的图像。 无损压缩,保持图像质量,适用于图标和图形。 支持更高的颜色深度,不会导致颜色丢失。 选择使用哪种图形格式取决于图像的特性和在网页上的使用场景。例如,对于需要透明背景的图标,PNG 可能是更好的选择。对于摄影或照片,JPG 可能更适合,而 GIF 则适用于需要动画或简单图形的情况。 18.HTML Image Element (1)src: 描述: 指定图像文件的 URL(Uniform Resource Locator)。 示例: (2)alt: 描述: 提供图像的替代文本,用于在图像无法显示时显示。也对辅助技术(如屏幕阅读器)提供了有用的信息。 示例: (3)width: 描述: 设置图像的宽度,可以使用像素值或百分比。 示例: (4)height: 描述: 设置图像的高度,可以使用像素值或百分比。 示例: (5)title: 描述: 提供关于图像的额外信息,通常在用户将鼠标悬停在图像上时显示。 示例: (6)loading: 描述: 指定图像的加载行为,可以设置为 "lazy"(延迟加载)或 "eager"(立即加载)。 示例: (7)srcset: 描述: 提供一组可选的图像资源和其对应的显示宽度,浏览器会根据显示设备的特性和屏幕大小选择适当的图像。 示例: (8)decoding: 描述: 指定图像的解码行为,可以设置为 "async"(异步解码)或 "sync"(同步解码)。 示例: (9)img link图像链接: [1]描述: 指的是在网页上创建一个图像,使其成为一个可点击的超链接,当用户点击图像时会导航到其他页面或执行其他操作。 实现方式: 使用 HTML 锚元素 包含 HTML 图像元素 。例如: [2]浏览器会自动为图像链接添加边框: 描述: 指的是在一些浏览器中,默认情况下,将图像超链接周围添加一个边框,以突显该区域是一个可点击的链接。 问题: 有时,设计或布局需求可能要求消除这个默认的边框。 实现方式: 通过使用 CSS 样式来配置图像元素,将其边框样式设置为 "none",以消除默认的边框效果。在页面的 CSS 样式中添加以下规则: img { border-style: none; } (10)Thumbnail Image缩略图: 配置为链接到该图像的较大版本的小图像。 (11)Choosing Names for Image Files命名图片文件: 1使用所有小写字母; 2不要使用标点符号和空格; 3不要更改文件扩展名(应为.gif、.jpg、.jpeg或.png); 4保持文件名简短但具有描述性。 19.HTML5 Figure and Figcaption Elements (1) 元素: 描述: 元素用于包裹一个独立的内容块,通常是图像、照片、图表、代码片段等。它表示文档中的一个独立单元,可以包含与文本内容相关的媒体。 This is an example image. (2) 元素: 描述: 元素用于为 元素提供标题或说明文字。它是 的子元素,用于描述包裹的内容。 This is an example image. 在示例中, 包含了一个图像,并通过 提供了对图像的说明。这样的结构更好地表达了图像和说明之间的关系,而不仅仅是简单地将图像放置在页面上。 20.HTML5 Progress Element 元素是 HTML5 中引入的用于表示任务进度的元素。它提供了一种在页面上显示任务完成度或操作进度的标准方法。 元素通常用于表示文件上传、下载、表单提交等涉及时间较长的操作的进度。 以下是 元素的基本结构和属性: 50% (1)value 属性: 表示当前任务完成的进度值。它的取值应该在 0 到 max 之间。在上面的例子中,value 设置为 50 表示任务完成了一半。 (2)max 属性: 表示进度的最大值,即任务完成的总量。在上面的例子中,max 设置为 100,表示任务的总量为 100。 21.CSS background-image Property background-image 是 CSS 中用于设置元素背景图像的属性。允许指定一个图像文件,该图像将被用作元素的背景。 (1)使用相对路径设置背景图像: .example { background-image: url('relative-path/image.jpg'); } (2)使用绝对路径或完整的 URL 设置背景图像: .example { background-image: url('https://example.com/full-path/image.jpg'); } (3)使用线性渐变作为背景图像: .example { background-image: linear-gradient(to right, #ff0000, #00ff00); } (4)使用多个背景图像: .example { background-image: url('image1.jpg'), url('image2.jpg'); } (5)设置背景图像的大小和位置: .example { background-image: url('image.jpg'); background-size: cover; /* 或 contain 或具体的尺寸值 */ background-position: center; /* 或具体的位置值 */ } (6)使用 none 移除背景图像: .example { background-image: none; } (7)repeat: 默认情况下,当设置了背景图像后,它会在元素的背景区域中重复平铺。如果背景图像的尺寸小于元素的背景区域,浏览器会在水平和垂直方向上平铺图像,使整个背景区域都被覆盖。这种默认的平铺行为是为了填充整个背景区域,确保图像充满整个元素。如果不想让背景图像平铺,可以使用其他 CSS 属性来控制平铺行为,比如 background-repeat 属性。例如,可以将 background-repeat 设置为 no-repeat,这样就可以阻止背景图像的平铺效果: .example { background-image: url('image.jpg'); background-repeat: no-repeat; } 上述 CSS 规则中的 background-repeat: no-repeat; 将阻止背景图像在水平和垂直方向上的平铺,使其只显示一次,不进行重复。 repeat-x: 当使用 background-repeat: repeat-x; 时,背景图像仅在水平方向上进行平铺,而在垂直方向上不进行平铺。这意味着图像会在水平方向上重复,但不会在垂直方向上重复。 repeat-y: 当使用 background-repeat: repeat-y; 时,背景图像仅在垂直方向上进行平铺,而在水平方向上不进行平铺。这意味着图像会在垂直方向上重复,但不会在水平方向上重复。 22.图像映射(Image Map) 是一种在网页上将多个可点击区域链接到不同目标的技术。通过图像映射,可以在同一张图像上定义多个区域,每个区域都可以关联到不同的链接或执行不同的操作。 图像映射主要使用 元素和 元素来实现。以下是图像映射的基本结构: html Copy code Image Map Example 上述代码的解释: 元素用于显示图像,并通过 usemap 属性关联到一个图像映射,其中的值是 元素的 name 属性。 元素用于定义图像映射,通过 name 属性指定一个名称。 元素用于定义图像映射的区域。它有几个属性,其中: [1]shape 属性定义了区域的形状,可以是 "rect"(矩形)、"circle"(圆形)、"poly"(多边形)等。 [2]coords 属性定义了区域的坐标,具体取决于形状。 对于矩形,坐标是左上角和右下角的 x、y 坐标;(4个值) 对于圆形,坐标是圆心和半径; 对于多边形,坐标是多个点的 x、y 坐标。 [3]href 属性定义了区域点击后的目标链接。 [4]alt 属性提供了区域的替代文本,类似于 元素的 alt 属性。 这个例子中,图像被分成三个区域,每个区域都是可点击的,点击后会导航到不同的链接。这是一种常见的用法,特别适用于需要在一个图像上定义多个交互区域的场景。 23.Favorites Icon简称为 Favicon(即网页图标) 是一种显示在浏览器标签页、书签栏以及浏览器地址栏左侧的小图标。Favicon 是网站的标志性图标,用于在用户浏览网页时标识特定网站。 以下是 Favorites Icon 的一些特点和相关信息: (1)图标格式: 通常以 ICO 格式为主,但也支持其他格式如 PNG、GIF 等。ICO 格式是最常见的,因为它允许在一个文件中包含多个尺寸和颜色深度的图标。 (2)尺寸: Favicons 通常包含多个尺寸的图标,以适应不同的显示环境。典型的尺寸包括 16x16、32x32、48x48 等。 (3)设置方式: 在网站的根目录下放置一个名为 favicon.ico 或其他支持格式(如 favicon.png)的文件,浏览器会自动检测并加载它。 (4)用途: Favicons 主要用于标识网站,提高用户在浏览器中快速识别网站的能力。它们还可以在浏览器标签页中显示,帮助用户轻松切换和识别不同的打开页面。 (5)示例 HTML 代码,用于在网页中添加 Favicon: html Copy code My Website 24.CSS Sprites CSS Sprites 是一种将多个小图标或图像合并成一个单一图像文件的技术。这个单一的图像文件通常称为雪碧图(Sprite),而通过 CSS 的背景图像和定位属性,可以选择性地显示其中的某一部分。 使用 CSS Sprites 的主要目的是减少页面加载时间,因为通过减少 HTTP 请求的数量,可以提高网页的性能。每次加载一个图像都需要一个独立的 HTTP 请求,而通过将多个图像合并成一个,可以减少请求次数,提高页面加载速度。 以下是一个简单的使用 CSS Sprites 的示例: 原始图像文件: 三个小图标分别是 icon1.png、icon2.png、icon3.png。 合并成雪碧图: 这三个图标被合并成一个雪碧图文件 sprites.png。 CSS 代码: 使用 CSS 的 background 和 background-position 属性将雪碧图中的特定区域显示在页面上。 .icon1 { width: 32px; height: 32px; background: url('sprites.png') 0 0; } .icon2 { width: 32px; height: 32px; background: url('sprites.png') -32px 0; } .icon3 { width: 32px; height: 32px; background: url('sprites.png') -64px 0; } 在上述代码中,每个图标都通过设置不同的 background-position 来显示雪碧图中的不同区域。这样,通过加载一个雪碧图文件,就能同时显示多个图标,减少了页面对图像资源的请求次数。 CSS Sprites 是一种优化前端性能的常见技术,但在使用时需要注意维护和更新雪碧图文件,以及确保不同图标之间的样式不会相互影响。 25.CSS3 Rounded Corners CSS3 圆角(Rounded Corners)是 CSS3 中引入的一项功能,用于通过简单的 CSS 属性设置元素的边框为圆角形状,而不是传统的直角形状。 使用 CSS3 圆角可以为元素的边框添加圆角效果,使得页面元素看起来更加美观和现代化。以下是设置圆角的基本属性: /* 设置所有四个角都为相同的圆角半径 */ .example { border-radius: 10px; } /* 设置每个角的不同圆角半径 */ .example { border-top-left-radius: 5px; border-top-right-radius: 10px; border-bottom-right-radius: 20px; border-bottom-left-radius: 15px; } 上述代码中的 border-radius 属性用于设置元素的四个角都具有相同的圆角半径。另外,也可以使用分别设置每个角的属性。 这些属性的值可以是具体的长度值(像素、百分比等),也可以是相对值,如 em 或 rem。通过调整这些值,可以根据设计需求创建不同的圆角效果。 这样的 CSS3 圆角特性可以应用于各种元素,如 、、 等,为它们的边框添加圆角效果。 只有4个值,边界半径的四个值分别配置每个角按左上、右上、右下、左下顺序排列。 26.CSS3 SHADOW (1)box-shadow Property box-shadow 是 CSS3 中的属性,用于在元素周围创建阴影效果。通过使用 box-shadow,你可以为元素添加立体感,使其看起来浮在其他元素之上。 box-shadow 属性的语法如下: box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color]; 水平偏移(horizontal offset): 阴影相对于元素的水平偏移量。可以为正值(向右偏移)或负值(向左偏移)。 垂直偏移(vertical offset): 阴影相对于元素的垂直偏移量。可以为正值(向下偏移)或负值(向上偏移)。 模糊半径(blur radius): 控制阴影的模糊程度。值越大,阴影越模糊。可以为零。 扩展半径(spread radius): 控制阴影的尺寸。正值会使阴影扩大,负值会使阴影缩小。默认为零。 颜色(color): 阴影的颜色。可以使用颜色关键字、十六进制、RGB、RGBA 等表示。 /* 创建一个水平向右、垂直向下的阴影,模糊半径为5px,颜色为灰色 */ .example { box-shadow: 5px 5px 5px #888888; } 上述代码为一个元素添加了一个向右下方投影的阴影效果。 水平偏移为正值: 阴影向右偏移。 水平偏移为负值: 阴影向左偏移。 垂直偏移为正值: 阴影向下偏移。 垂直偏移为负值: 阴影向上偏移。 box-shadow 属性常用于创建卡片效果、按钮阴影等,以提高用户界面的立体感。它是一个强大而灵活的样式属性,可以根据设计需求进行调整。 (2)text-shadow Property(属性同box) text-shadow 是 CSS3 中的属性,用于在文本周围创建阴影效果。与 box-shadow 类似,text-shadow 允许为文本添加阴影,从而使文本在页面上看起来更加突出或立体。 text-shadow 属性的语法如下: text-shadow: [horizontal offset] [vertical offset] [blur radius] [color]; 27.CSS3 opacity Property、Rgba Color、CSS3 Gradients (1)opacity 是 CSS3 中的属性,用于控制元素的不透明度。通过设置 opacity,你可以使元素变得半透明,从完全透明(值为 0)到完全不透明(值为 1)。 opacity 属性的值是一个介于 0(完全透明)和 1(完全不透明)之间的数字,也可以是一个百分比值。以下是基本的语法: /* 将元素的不透明度设置为 0.5,即50%的透明度 */ .example { opacity: 0.5; } opacity 属性影响元素及其所有子元素的透明度。如果只想让元素自身半透明而保持子元素不受影响,可以考虑使用 RGBA 颜色,其中的 A 表示 alpha 通道,表示透明度。例如: /* 使用 RGBA 颜色实现元素自身半透明,但子元素不受影响 */ .example { background-color: rgba(255, 0, 0, 0.5); /* 红色,透明度为 0.5 */ } 在上述例子中,rgba(255, 0, 0, 0.5) 表示红色,透明度为 0.5,即半透明的红色。这样只会影响元素自身的透明度,而不会影响子元素。 (2)RGBA 是 CSS 中表示颜色的一种方式,它包含了红、绿、蓝三个颜色通道,以及一个表示透明度的 alpha 通道。RGBA 表示颜色的语法为: rgba(red, green, blue, alpha); red (红色通道): 表示红色的值,取值范围是 0 到 255 或百分比值,0 表示没有红色,255 或 100% 表示纯红色。 green (绿色通道): 表示绿色的值,取值范围同样是 0 到 255 或百分比值。 blue (蓝色通道): 表示蓝色的值,取值范围同样是 0 到 255 或百分比值。 alpha (透明度通道): 表示颜色的透明度,取值范围是 0 到 1,其中 0 表示完全透明,1 表示完全不透明。 /* 完全不透明的红色 */ color: rgba(255, 0, 0, 1); /* 半透明的绿色 */ background-color: rgba(0, 255, 0, 0.5); /* 50% 红色,25% 绿色,75% 蓝色,完全不透明 */ border: 2px solid rgba(50%, 25%, 75%, 1); 这些例子演示了如何使用 RGBA 表示颜色,其中 alpha 通道用于控制颜色的透明度。RGBA 常用于需要设置半透明颜色的地方,例如实现元素的半透明效果。 (3)CSS3 渐变(Gradients)是一种用于创建平滑过渡效果的技术,通过在元素的背景或边框中应用渐变,可以实现从一种颜色到另一种颜色的平滑过渡。 在 CSS3 中,有两种主要类型的渐变: [1]线性渐变(Linear Gradients): 通过定义一个方向,颜色会沿着这个方向发生线性变化。可以从一个颜色到另一个颜色,也可以定义多个颜色点。 /* 从上到下的线性渐变,从红色到蓝色 */ linear-gradient(to bottom, red, blue); [2]径向渐变(Radial Gradients): 通过定义一个中心点和一个或多个颜色环,颜色会向外辐射形成圆形渐变。可以从一个颜色到另一个颜色,也可以定义多个颜色环。 /* 从内到外的径向渐变,从黄色到绿色 */ radial-gradient(yellow, green); 28.Normal Flow "Normal Flow" 是 CSS 中用于描述文档中元素默认布局的术语。在正常流中,HTML 文档中的元素按照其在文档中出现的顺序,从上到下,从左到右进行布局。 在正常流中,块级元素独占一行,从上到下垂直排列,每个块级元素从左到右水平布局。行内元素则在一行中水平排列,从左到右。这种默认的布局方式可以通过 CSS 的样式进行调整,但在没有其他样式干扰的情况下,元素会按照正常流的规则进行排列。 正常流中的元素的布局不会重叠,而是按照文档流的顺序一个接一个地排列。如果屏幕的宽度不足以容纳元素,块级元素会被压缩到适应屏幕,而行内元素则会换行显示。 通过调整元素的 display、position、float 等属性,可以改变元素在正常流中的布局特性。例如,将元素设置为 position: absolute; 就可以使其脱离正常流,不再占用文档流中的位置。 29.相对定位(Relative Positioning) (1)是 CSS 中的一种定位方式,它允许你相对于元素在正常流中的位置进行微调。使用相对定位时,元素仍然占据正常流中的位置,但可以通过 top、right、bottom 和 left 属性相对于其正常位置进行移动。 (2)相对定位的基本语法如下: position: relative; top: value; right: value; bottom: value; left: value; position: relative; 声明了相对定位。 top、right、bottom、left 属性控制了元素相对于其正常位置的偏移量。这些值可以是正数、负数或百分比。 (3)示例: .relative-box { position: relative; top: 10px; left: 20px; } 上述示例将 .relative-box 元素相对于其在正常流中的位置(top)向下移动了 10 像素,向左移动了 20 像素。 (4)相对定位的特点: 元素仍占据正常流中的位置: 相对定位不会使元素脱离正常文档流,它仍然占据其在正常流中的位置,只是视觉上的位置发生了变化。 (5)相对于自身移动: 元素的位置是相对于其自身在正常流中的位置进行调整的。其他元素不受影响。 相对定位通常用于微调元素的位置,使其相对于正常流中的位置产生一些视觉上的偏移。 30.绝对定位(Absolute Positioning) (1)是 CSS 中的一种定位方式,允许将元素相对于其最近的已定位(非 static)的祖先元素或文档的边界框进行定位。使用绝对定位时,元素不再占据正常流中的位置,而是脱离正常文档流,可以自由移动到指定位置。 (2)绝对定位的基本语法如下: position: absolute; top: value; right: value; bottom: value; left: value; position: absolute; 声明了绝对定位。 top、right、bottom、left 属性控制了元素相对于其定位父元素或文档的边界框的位置。这些值可以是正数、负数或百分比。 (3)示例: .absolute-box { position: absolute; top: 50px; left: 100px; } 上述示例将 .absolute-box 元素从其正常流中的位置脱离,绝对定位到距离其定位父元素(如果有)或文档左上角 100 像素的水平位置和 50 像素的垂直位置。 (4)绝对定位的特点: [1]脱离正常文档流: 绝对定位的元素不再占据正常流中的位置,不影响其他元素的布局。 [2]相对于定位父元素或文档进行定位: 元素的位置是相对于其最近的已定位(非 static)的祖先元素或文档的边界框进行调整的。 [3]如果没有定位父元素: 如果没有已定位的祖先元素,元素的位置将相对于文档的边界框。 绝对定位通常用于创建浮动效果、弹出层、菜单等需要脱离正常文档流并精确控制位置的情境。 31.float Property (1)float 是 CSS 中的属性,用于控制元素在其包含块内的浮动方式。使用 float 属性,你可以使元素向左或向右浮动,让其脱离正常流,从而实现元素的横向排列。 (2)float 属性的基本语法如下: float: value; 其中 value 可以是以下值之一: left: 元素向左浮动。 right: 元素向右浮动。 none(默认): 元素不浮动,恢复到正常流中。 (3)示例: .float-left { float: left; } .float-right { float: right; } 上述示例中,.float-left 类将元素向左浮动,而.float-right 类将元素向右浮动。 (4)float 的特点: [1]浮动的元素脱离正常文档流: 浮动的元素不再占据正常流中的位置,可以浮动到其包含块的左边或右边。 [2]浮动元素会影响周围的元素: 正常流中的元素会围绕浮动元素的边缘,适用于浮动元素左边或右边的空间。 [3]清除浮动: 由于浮动可能导致包含块的高度塌陷,需要使用 clear 属性清除浮动,以确保包含块包含浮动元素。 32.clear Property (1)clear 是 CSS 中的属性,用于指定一个元素不能放在浮动元素的左边或右边,从而清除浮动。当使用浮动布局时,浮动的元素可能会导致其后续的元素不按预期布局,因此可以使用 clear 来解决这个问题。 (2)clear 属性的基本语法如下: clear: value; 其中 value 可以是以下值之一: none(默认): 元素可以出现在浮动元素的两侧。 left: 元素不允许出现在浮动元素的左侧。 right: 元素不允许出现在浮动元素的右侧。 both: 元素不允许出现在浮动元素的任何一侧,即清除浮动。 (3)示例: .clear-left { clear: left; } .clear-right { clear: right; } .clear-both { clear: both; } 上述示例中,.clear-left 类将元素清除左侧浮动,.clear-right 类将元素清除右侧浮动,.clear-both 类将元素清除左右两侧的浮动。 clear 的主要用途是处理浮动元素可能导致的父元素高度塌陷(高度坍塌)的问题,确保后续元素能够按照预期的布局。 (4)clear 属性主要用于清除浮动(float)的影响。当元素被设置为浮动时,它会脱离正常文档流,可能导致其后续的元素不按照预期进行布局。在这种情况下,使用 clear 属性可以控制元素在浮动元素的左侧、右侧或两侧的行为,确保后续元素布局正常。 如果没有浮动元素,clear 的应用通常不会产生明显的效果,因为在正常文档流中,元素默认就是按照文档流的规则布局的,不会受到浮动元素的影响。 33.overflow Property overflow 是 CSS 属性,用于控制元素内容溢出容器时的表现方式。当元素的内容超过容器的尺寸时,可以使用 overflow 属性来定义如何处理这种溢出情况。 overflow 属性有以下几个可能的值: (1)visible(默认值): 内容会溢出容器,并且会显示在容器的边界之外。这是默认值。 overflow: visible; (2)hidden: 内容会被裁剪,超出容器的部分将被隐藏。 overflow: hidden; (3)scroll: 如果内容溢出容器,会显示滚动条,用户可以通过滚动条来查看被隐藏的内容。 overflow: scroll; (4)auto: 如果内容溢出容器,会显示滚动条,但只有在实际需要时才会出现滚动条。如果内容未溢出,不会显示滚动条。 overflow: auto; (5)inherit: 继承父元素的 overflow 属性。 overflow: inherit; 34.Display Property display 是 CSS 属性之一,用于指定元素的显示类型(display type)。它决定了元素在页面中的渲染方式,即元素是块级元素、行内元素还是其他特殊类型的元素。以下是一些常见的 display 属性的值: (1)block(块级元素): 元素呈现为块级元素,会在页面中独占一行,并在前后都有换行。 display: block; (2)inline(行内元素): 元素呈现为行内元素,会在页面中按照文本流水布局,不会独占一行。 display: inline; (3)inline-block(行内块级元素): 元素呈现为行内块级元素,保持行内元素的特性,但可以设置宽度和高度等块级元素的属性。 display: inline-block; (4)none(隐藏): 元素不会在页面中显示,即完全隐藏。 display: none; (5)flex(弹性盒子): 元素将会生成一个弹性容器,子元素可以使用弹性布局进行排列。 display: flex; (6)grid(网格布局): 元素将会生成一个网格容器,子元素可以使用网格布局进行排列。 display: grid; (7)table(表格元素): 元素呈现为表格元素,类似于 、、 等。 display: table; 这只是一些 display 属性的常见值,实际上还有其他一些值和一些复杂的概念,如 inline-table、list-item、run-in 等。选择合适的 display 属性值有助于实现所需的布局和样式效果。 35.Vertical Navigation 在无序列表中配置超链接,通常用于垂直导航。 Home Menu Directions Contact CSS removes the list marker and underline: #leftcolumn ul { list-style-type: none; }(除去点) #leftcolumn a { text-decoration: none; }(除去链接下划线) 36.Horizontal Navigation 在无序列表中配置超链接,通常用于水平导航。 Home Menu Directions Contact CSS removes the list marker, removes the underline, adds padding, and configures the list items for inline display. #nav ul { list-style-type: none;} #nav a { text-decoration: none; padding-right: 10px; } #nav li { display: inline; }(在一行中显示) 37.CSS伪类pseudo-classes超链接上 CSS 伪类(Pseudo-classes)与锚元素(anchor element,通常用 标签表示)相关的一些状态。这些状态可以通过伪类来选择和样式化。以下是每个伪类的解释: (1):link(默认状态): :link 伪类用于选择尚未被访问的链接(超链接)。它表示超链接的默认状态,即用户尚未点击或访问链接。 a:link { /* 样式规则适用于未访问的链接 */ } (2):visited(已访问状态): :visited 伪类用于选择已经被访问过的链接。浏览器会追踪用户访问过的链接,从而在下一次访问页面时,通过 :visited 可以选择并样式化这些链接。 a:visited { /* 样式规则适用于已访问的链接 */ } (3):focus(焦点状态): :focus 伪类用于选择当前获得焦点的元素。在超链接上,当用户使用键盘导航时,或者通过点击链接使其获得焦点时,:focus 触发。 a:focus { /* 样式规则适用于获得焦点的链接 */ } (4):hover(悬停状态): :hover 伪类用于选择用户悬停在元素上的状态。在超链接上,当用户将鼠标悬停在链接上时,:hover 触发,可以用于添加一些视觉效果。 a:hover { /* 样式规则适用于悬停在链接上的状态 */ } (5):active(激活状态): :active 伪类用于选择正在被用户点击的元素。在超链接上,当用户点击链接但尚未释放鼠标按钮时,:active 触发。通常用于添加点击效果。 a:active { /* 样式规则适用于点击链接的状态 */ } 38.HTML5 Structural Elements HTML5 引入了一些新的结构性元素,以更好地描述文档的结构和内容。以下是一些 HTML5 结构性元素: : 用于表示页面或区块的页眉。通常包含标题、标志或导航。 39.FORM表单 是 HTML 中的一个元素,用于创建包含交互性控件的表单。表单允许用户输入数据,然后将该数据提交到服务器进行处理。表单是用户与网站进行交互的重要方式之一,它可以用于登录、搜索、用户注册等场景。 元素包含了一系列的表单元素,例如文本框、复选框、单选按钮、下拉列表等,以及用于提交和重置表单的按钮。表单的结构通常如下: Username: Password: 在这个例子中: action 属性定义了表单提交的目标 URL,即数据将被发送到该 URL。 method 属性定义了提交表单时使用的 HTTP 方法,通常是 "get" 或 "post"。 表单内包含了两个文本框(username 和 password),以及一个提交按钮和一个重置按钮。 用户可以在文本框中输入信息,然后点击提交按钮,表单的数据将被发送到服务器上定义的目标 URL。服务器接收到数据后,可以进行相应的处理,例如验证用户身份、保存数据到数据库等。 (1): 含义: 元素用于创建表单,是包含表单元素的容器。 标签类型: 容器标签。 用途: 用于包裹表单中的各种输入元素,定义用户输入数据的区域。 [1]action 属性: 含义: action 属性用于指定处理表单数据的服务器端程序或脚本的 URL。 用途: 当用户提交表单时,浏览器会将表单数据发送到 action 属性指定的 URL,从而实现数据的处理和响应。 [2]method 属性: 含义: method 属性用于指定提交表单时使用的 HTTP 方法。 取值: get(默认值):将表单数据附加在 URL 的查询字符串中,适用于较短、不敏感的数据。 post:将表单数据作为 HTTP 请求的实体体传递,适用于较长、敏感的数据,更安全。 [3]name 属性: 含义: name 属性用于标识表单元素,便于在 JavaScript 或服务器端程序中引用。 用途: 在处理表单数据时,可以通过表单的 name 属性来访问和处理表单中的各个元素。 [4]id 属性: 含义: id 属性用于为表单元素指定唯一的标识符。 用途: 在页面的其他地方,特别是在 CSS 和 JavaScript 中,可以使用 id 属性来引用和操作整个表单元素。 (2): 含义: 元素用于配置各种表单元素,如文本框、单选按钮、复选框和按钮。 标签类型: 独立标签。 用途: 根据 type 属性的不同值,可以创建不同类型的表单元素。 [1]INPUT TEXT BOX type="text": 含义: 指定输入框的类型为文本输入框,用于接受单行文本信息。 用途: 允许用户输入普通文本,如姓名、用户名等。 name 属性: 含义: 用于标识输入框,以便在提交表单时能够识别和处理该输入框的值。 用途: 在服务器端处理表单数据时,通过表单元素的 name 属性来引用输入框的值。 id 属性: 含义: 为输入框指定唯一标识符,方便在页面的其他地方引用和操作。 用途: 通过 JavaScript 或 CSS 可以通过 id 属性来操纵该输入框。 size 属性: 含义: 指定输入框的可见宽度,以字符为单位。 用途: 控制输入框在页面上显示的宽度,但并不限制用户输入的字符数。 maxlength 属性: 含义: 指定输入框可接受的最大字符数。 用途: 限制用户在输入框中输入的字符数,超过该数值的字符将被截断。 value 属性: 含义: 为输入框设置默认值。 用途: 提供一个初始值,用户可以在需要时修改该值。 [2]input Submit Button 元素可以用于创建提交按钮,用于提交表单信息。以下是与提交按钮相关的常用属性: type(类型): 描述:指定输入框的类型。 值:submit表示提交按钮。 用法: name(名称): 描述:定义提交按钮的名称,用于标识表单数据在提交时的字段名。在实际使用中,有时可以用来标识不同的提交按钮。 用法: id(标识): 描述:为提交按钮指定一个唯一的标识符,通常用于通过JavaScript或CSS选择特定的按钮。 用法: value(值): 描述:设置提交按钮上显示的文本,即按钮的标签文本。 用法: 当用户点击提交按钮时,触发了与表单相关联的标签上的action属性指定的服务器端脚本或程序。同时,表单中的数据(每个表单元素的name=value对)会被发送到Web服务器,以便进行处理和响应。这使得用户能够将表单中的信息提交到服务器,例如进行用户注册、搜索查询等操作。 [3]input Reset Button 元素可以用于创建重置按钮,用于重置表单中的所有字段到它们的初始值。以下是与重置按钮相关的常用属性: type(类型): 描述:指定输入框的类型。 值:reset表示重置按钮。 用法: name(名称): 描述:定义重置按钮的名称,用于标识表单数据在提交时的字段名。在实际使用中,有时可以用来标识不同的重置按钮。 用法: id(标识): 描述:为重置按钮指定一个唯一的标识符,通常用于通过JavaScript或CSS选择特定的按钮。 用法: value(值): 描述:设置重置按钮上显示的文本,即按钮的标签文本。 用法: 当用户点击重置按钮时,表单中的所有字段将被重置为它们最初加载时的值。这对于用户想要重新填写表单或取消之前的更改非常有用。值得注意的是,这并不会影响通过JavaScript或其他客户端脚本动态更改的字段值,仅仅是重置到HTML中初始定义的值。 [4]input Password box 元素可以用于创建密码框,该框允许用户输入文本信息,但输入的内容将被隐藏。以下是与密码框相关的常用属性: type(类型): 描述:指定输入框的类型。 值:password表示密码框。 用法: name(名称): 描述:定义密码框的名称,用于标识表单数据在提交时的字段名。 用法: id(标识): 描述:为密码框指定一个唯一的标识符,通常用于通过JavaScript或CSS选择特定的密码框。 用法: size(大小): 描述:指定密码框的可见宽度,以字符数为单位。这个属性已经不推荐使用,通常使用CSS来控制输入框的样式。 用法: maxlength(最大长度): 描述:限制用户在密码框中输入的字符数的最大数量。 用法: value(值): 描述:设置密码框的初始值。由于安全原因,密码框的初始值通常为空,因此很少使用这个属性。 用法: 密码框的主要特点是输入的文本内容会被掩码或隐藏,以增加安全性,防止密码被轻易窥视。这对于用户输入敏感信息,如登录密码等场景非常重要。 [5]input Check box 元素可以用于创建复选框,允许用户从一组预定项中选择一个或多个。以下是与复选框相关的常用属性: type(类型): 描述:指定输入框的类型。 值:checkbox表示复选框。 用法: name(名称): 描述:定义复选框的名称,用于标识表单数据在提交时的字段名。当多个复选框共享相同的name属性时,它们被视为同一组,并且用户可以选择其中的多个选项。 用法: id(标识): 描述:为复选框指定一个唯一的标识符,通常用于通过JavaScript或CSS选择特定的复选框。 用法: checked(选中状态): 描述:用于指定复选框是否初始时就被选中。 值:checked表示初始时选中,没有该属性或值为空表示初始时不选中。 用法: value(值): 描述:设置复选框的值。当表单被提交时,如果复选框被选中,其name和value将被包含在表单数据中,以便在服务器端进行处理。 用法: 复选框允许用户选择多个选项,通常用于表达一组相关的选择。通过设置name属性,多个复选框可以被组合在一起,以形成一个选项组。设置checked属性可以让某个复选框在初始时就被选中。 [6]input Radio Button 元素可以用于创建单选按钮,允许用户从一组预定项中选择一个。以下是与单选按钮相关的常用属性: type(类型): 描述:指定输入框的类型。 值:radio表示单选按钮。 用法: name(名称): 描述:定义单选按钮的名称,用于标识表单数据在提交时的字段名。当多个单选按钮共享相同的name属性时,它们被视为同一组,用户只能在组内选择一个选项。 用法: id(标识): 描述:为单选按钮指定一个唯一的标识符,通常用于通过JavaScript或CSS选择特定的单选按钮。 用法: checked(选中状态): 描述:用于指定单选按钮是否初始时就被选中。 值:checked表示初始时选中,没有该属性或值为空表示初始时不选中。 用法: value(值): 描述:设置单选按钮的值。当表单被提交时,被选中的单选按钮的name和value将被包含在表单数据中,以便在服务器端进行处理。 用法: 单选按钮通常用于提供用户在一组互斥的选项中选择一个的功能。设置相同的name属性将它们关联到同一组。用户只能选择同一组中的一个单选按钮。设置checked属性可以使某个单选按钮在初始时就被选中。 [7]input Hidden form data 元素可以用于创建隐藏的表单字段,该字段不会在页面上显示,但可以在客户端和服务器端脚本中访问。以下是与隐藏表单字段相关的常用属性: type(类型): 描述:指定输入框的类型。 值:hidden表示隐藏字段。 用法: name(名称): 描述:定义隐藏字段的名称,用于标识表单数据在提交时的字段名。 用法: id(标识): 描述:为隐藏字段指定一个唯一的标识符,通常用于通过JavaScript或CSS选择特定的隐藏字段。 用法: 隐藏字段通常用于在表单中包含一些不需要用户输入的数据,但这些数据需要在提交表单时传递到服务器。由于隐藏字段不可见,用户无法直接修改它们。这使得隐藏字段成为在不影响用户界面的情况下传递信息的一种有效方式。例如,它们可能用于存储会话标识、跟踪用户行为或其他需要在页面之间保持状态的信息。 [8]Input Image Button 元素可以使用type="image"来创建图像提交按钮。这是一种通过图像作为提交按钮的方式。以下是与图像提交按钮相关的常用属性: type(类型): 描述:指定输入框的类型。 值:image表示图像提交按钮。 用法: name(名称): 描述:定义图像提交按钮的名称,用于标识表单数据在提交时的字段名。 用法: id(标识): 描述:为图像提交按钮指定一个唯一的标识符,通常用于通过JavaScript或CSS选择特定的按钮。 用法: src(源): 描述:指定用作提交按钮的图像的URL。点击图像时,将触发表单的提交动作。 用法: 图像提交按钮允许用户通过单击图像来提交表单,而不是使用常规的提交按钮。当用户点击图像时,表单的action属性指定的服务器端脚本或程序会被触发,并且表单数据将被发送到服务器。这种方式常常用于创建自定义外观的提交按钮,以提供更好的用户体验。 [9]HTML5: Email Text Box HTML5 中的电子邮件文本框(Email Text Box)是通过 元素实现的,用于接受电子邮件地址格式的文本信息。以下是常见属性的中文解释: type="email"(类型为 "email"): 指定输入框用于输入电子邮件地址。这不仅提供了一个标准的文本框,还帮助浏览器验证输入是否符合电子邮件地址的格式。 name(名称): 用于标识表单中输入字段的名称,以便在提交表单时将其与后端处理程序关联起来。 id(标识符): 提供一个唯一的标识符,通常用于通过 CSS 或 JavaScript 引用该元素。 size(大小): 指定输入框的可见字符数,用于控制输入框的宽度。 maxlength(最大长度): 指定输入框允许输入的最大字符数。 value(值): 提供输入框的初始值,可以是预先填充的电子邮件地址。 placeholder(占位符): 提供一个在输入框为空时显示的灰色文本,用于提示用户应该输入的内容。这是可选的。 required(必填): 如果设置为 required,则表示用户必须在提交表单之前输入有效的电子邮件地址。浏览器将在用户尝试提交空值时显示相应的错误消息。 [10]HTML5: URL TEXT BOX HTML5 中的 URL 文本框通过 元素实现,用于接受 URL 格式的文本信息。以下是常见属性的中文解释: type="url"(类型为 "url"): 指定输入框用于输入 URL 地址。这不仅提供了一个标准的文本框,还帮助浏览器验证输入是否符合 URL 的格式。 name(名称): 用于标识表单中输入字段的名称,以便在提交表单时将其与后端处理程序关联起来。 id(标识符): 提供一个唯一的标识符,通常用于通过 CSS 或 JavaScript 引用该元素。 size(大小): 指定输入框的可见字符数,用于控制输入框的宽度。 maxlength(最大长度): 指定输入框允许输入的最大字符数。 value(值): 提供输入框的初始值,可以是预先填充的 URL 地址。 placeholder(占位符): 提供一个在输入框为空时显示的灰色文本,用于提示用户应该输入的内容。这是可选的。 required(必填): 如果设置为 required,则表示用户必须在提交表单之前输入有效的 URL 地址。浏览器将在用户尝试提交空值时显示相应的错误消息。 [11]HTML5: TELEPHONE NUMBER TEXT BOX HTML5 中的电话号码文本框通过 元素实现,用于接受电话号码格式的文本信息。以下是常见属性的中文解释: type="tel"(类型为 "tel"): 指定输入框用于输入电话号码。这不仅提供了一个标准的文本框,还帮助浏览器验证输入是否符合电话号码的格式。 name(名称): 用于标识表单中输入字段的名称,以便在提交表单时将其与后端处理程序关联起来。 id(标识符): 提供一个唯一的标识符,通常用于通过 CSS 或 JavaScript 引用该元素。 size(大小): 指定输入框的可见字符数,用于控制输入框的宽度。 maxlength(最大长度): 指定输入框允许输入的最大字符数。 value(值): 提供输入框的初始值,可以是预先填充的电话号码。 placeholder(占位符): 提供一个在输入框为空时显示的灰色文本,用于提示用户应该输入的内容。这是可选的。 required(必填): 如果设置为 required,则表示用户必须在提交表单之前输入有效的电话号码。浏览器将在用户尝试提交空值时显示相应的错误消息。 [12]HTML5: SEARCH TEXT BOX: HTML5 中的搜索文本框通过 元素实现,用于接受搜索词汇。以下是常见属性的中文解释: type="search"(类型为 "search"): 指定输入框用于输入搜索词汇。这不仅提供了一个标准的文本框,还可能启用浏览器的搜索特性,以提供更丰富的搜索体验。 name(名称): 用于标识表单中输入字段的名称,以便在提交表单时将其与后端处理程序关联起来。 id(标识符): 提供一个唯一的标识符,通常用于通过 CSS 或 JavaScript 引用该元素。 size(大小): 指定输入框的可见字符数,用于控制输入框的宽度。 maxlength(最大长度): 指定输入框允许输入的最大字符数。 value(值): 提供输入框的初始值,可以是预先填充的搜索词汇。 placeholder(占位符): 提供一个在输入框为空时显示的灰色文本,用于提示用户应该输入的内容。这是可选的。 required(必填): 如果设置为 required,则表示用户必须在提交表单之前输入有效的搜索词汇。浏览器将在用户尝试提交空值时显示相应的错误消息。 [13]HTML5: Datalist Control(input list=" ") HTML5 中的 元素是一个用于定义输入域(如 元素)的预定义选项列表的容器。以下是 控件的中文解释: 元素: 元素是 HTML5 中引入的,用于为用户提供一组可选的选项,以辅助输入框的输入。 作用: 用于创建一个包含预定义选项的列表,供用户在输入时选择。这样,用户可以从提供的选项中选择,而不必完全手动输入。 结构: 元素通常包含一个或多个 元素,每个 元素代表一个预定义的选项。 与输入框结合使用: 通过将 元素与 元素的 list 属性关联,可以使输入框与 中的选项关联起来。用户在输入时将会看到匹配的选项。 下面是一个简单的示例: Choose a browser: 在这个例子中,用户可以在输入框中键入,并根据预定义的浏览器选项进行选择。这提供了一种更方便的方式,用户可以选择而不必记住所有可能的选项。 [14]HTML5: Slider Control(input type="range") HTML5 中的滑块控件(Slider Control)是 元素的一种类型,用于允许用户通过拖动滑块来选择数值。以下是滑块控件的中文解释: 元素的 type="range": 通过将 元素的 type 属性设置为 "range",创建了一个滑块控件。 作用: 滑块控件允许用户在给定的范围内选择数值。用户可以通过拖动滑块的滑块块来选择一个值。 属性: 滑块控件可以使用 min 和 max 属性来定义数值范围,使用 value 属性来设置默认值。其他常见属性包括 step(步长)和 list(关联 )等。 下面是一个简单的滑块控件的例子: 音量: 在这个例子中,滑块控件用于选择音量值,范围从 0 到 100,初始值为 50,步长为 5。用户可以通过拖动滑块来选择不同的音量值。 滑块控件是 HTML5 中提供的一种交互式输入方式,适用于需要用户在给定范围内选择数值的场景,例如音量调节、亮度控制等。 [15]HTML5: SPINNER CONTROL(input type="number") HTML5 中的微调控件(Spinner Control)通常通过 元素的 type="number" 结合 min、max 和 step 属性来实现,用于允许用户通过增减按钮或手动输入来选择数字值。以下是微调控件的中文解释: 元素的 type="number": 通过将 元素的 type 属性设置为 "number",可以创建一个微调控件。 作用: 微调控件允许用户在给定的数值范围内选择数字。用户可以通过点击微调控件旁边的增减按钮或手动输入数值来进行选择。 属性: 微调控件通常使用 min 和 max 属性来定义数值范围,使用 value 属性来设置默认值。另外,step 属性定义了每次增减的步长。 下面是一个简单的微调控件的例子: 数量: 在这个例子中,微调控件用于选择数量,范围从 1 到 10,初始值为 1,步长为 1。用户可以通过点击增减按钮或手动输入数值来进行选择。 微调控件提供了一种方便的方式,让用户在数值范围内进行选择,适用于需要精确数值输入的场景,例如购物车中商品数量的选择。 [16]HTML5: Calendar Control(input type="date") HTML5 中的日期选择器(Calendar Control)通常通过 元素的 type="date" 来实现,用于允许用户选择日期。以下是日期选择器的中文解释: 元素的 type="date": 通过将 元素的 type 属性设置为 "date",可以创建一个日期选择器。 作用: 日期选择器允许用户从弹出的日历中选择一个日期,提供了一种直观的方式来输入日期信息。 属性: 日期选择器通常包括 min 和 max 属性,用于限定可选择的日期范围,以及 value 属性,用于设置默认日期。 下面是一个简单的日期选择器的例子: 生日: 在这个例子中,日期选择器用于选择生日日期,限定可选择的范围为当前日期到 2023 年底,初始值为 2000 年 1 月 1 日。 日期选择器提供了一种方便的方式,让用户选择日期,适用于需要涉及日期的表单输入场景,例如生日、预定日期等。用户可以通过点击输入框旁边的日历图标或在输入框中手动输入日期。 (3): 含义: 元素用于配置具有滚动条的文本框,允许用户输入多行文本。 标签类型: 容器标签。 用途: 创建用于输入大段文本的区域。 (4)Select List : 含义: 元素用于配置下拉列表框,用户可以从中选择一个或多个选项。 标签类型: 容器标签。 用途: 创建一个下拉列表框。 元素用于创建下拉列表框,也被称为选择框、下拉列表、下拉框或选项框。它允许用户从一组预定的选项中选择一个或多个。以下是与下拉列表框相关的常用属性: name(名称): 描述:定义下拉列表框的名称,用于标识表单数据在提交时的字段名。 用法: id(标识): 描述:为下拉列表框指定一个唯一的标识符,通常用于通过JavaScript或CSS选择特定的下拉列表框。 用法: size(可见行数): 描述:指定下拉列表框的可见行数。这不会限制用户选择的数量,只是决定了在未展开列表时可见的选项行数。 用法: multiple(多选): 描述:用于指定是否允许多选。如果设置了该属性,用户可以按住Ctrl键(在Windows系统中)或Command键(在Mac系统中)同时选择多个选项。 值:multiple表示允许多选,没有该属性或值为空表示单选。 用法: 元素通常与元素一起使用,定义了下拉列表框中的各个选项。用户可以通过点击下拉列表框并选择一个选项,或者按住Ctrl/Command键选择多个选项。 (5)Options in a Select List : 含义: 元素用于配置下拉列表框中的选项。 标签类型: 容器标签。 用途: 在 元素中定义每个选项。 Volvo Saab 元素用于定义元素中的选项,即下拉列表框中的每一个可选择的项。以下是与元素相关的常用属性: value(值): 描述:定义选项的值。当用户选择某个选项时,该值将作为表单数据的一部分提交到服务器。如果未设置value属性,浏览器会默认使用选项的文本内容作为值。 用法:Option Text selected(选中状态): 描述:用于指定该选项是否初始时就被选中。如果设置了该属性,该选项将在页面加载时就被默认选中。 值:selected表示初始时选中,没有该属性或值为空表示初始时不选中。 用法:Option Text Apple Orange Banana 在这个示例中,"Apple"被设置为初始时选中的选项,而"Orange"和"Banana"是可选的选项。用户可以从下拉列表中选择一个选项,然后将该选项的value提交到服务器。 40.textarea Scrolling Text Box 是 HTML 中的一个表单元素,用于创建多行文本框,允许用户输入多行文本信息。它通常用于接受用户的较大段落文字,例如评论、说明或其他需要多行输入的文本。 以下是 的基本用法和属性: rows 属性: 指定文本框的行数,表示文本框可显示的行数。 cols 属性: 指定文本框的列数,表示文本框可显示的列数。 name 属性: 用于标识文本框,以便在提交表单时能够识别和处理该输入框的值。 id 属性: 用于为元素指定一个唯一的标识符 在这个例子中, 创建了一个包含 4 行和 50 列的文本框,用户可以在其中输入多行文本。由于 是一个容器元素,它可以包含默认文本,用户可以在提交表单时将其中的文本数据一同提交。 Default text goes here. 在 中使用 id 属性的例子: 在这个例子中, 元素的 id 属性被设置为 "myTextarea"。通过这个 id,可以在 JavaScript 或 CSS 中选择和操作这个特定的 元素。例如,可以使用以下 JavaScript 代码来获取该 元素的值: var textareaValue = document.getElementById("myTextarea").value; 41.BUTTON ELEMENT 元素是一个容器标签,用于创建按钮。它可以包含文本、图像和媒体等内容。当用户点击按钮时,按钮的功能取决于type属性的值。以下是与元素相关的常用属性: type(类型): 描述:指定按钮的类型。 值: submit:创建提交按钮,点击后会提交包含该按钮的表单。 reset:创建重置按钮,点击后会重置包含该按钮的表单。 button:创建普通按钮,点击后不会触发表单的提交或重置动作。 用法: name(名称): 描述:定义按钮的名称,用于标识表单数据在提交时的字段名。 用法:Click me id(标识): 描述:为按钮指定一个唯一的标识符,通常用于通过JavaScript或CSS选择特定的按钮。 用法:Reset alt(替代文本): 描述:为按钮指定替代文本,通常用于图像按钮,表示图像的替代文本。 用法:Submit value(值): 描述:设置按钮的值。在type="submit"时,该值将作为表单提交时的按钮值;在type="reset"时,该值用于显示在按钮上;在type="button"时,该值用于表示按钮的内容。 用法:Submit 元素允许更灵活的按钮内容和样式,可以包含文本、图像等。根据type属性的不同值,按钮的行为会有所不同。例如,type="submit"的按钮会触发表单的提交,而type="button"的按钮只是执行JavaScript或其他客户端脚本而不会触发表单提交。 42.Accessibility & Forms (1) Element: 描述: 元素用于为表单控件(如输入框、复选框、单选按钮等)提供标签。这不仅有助于提高可访问性,还改善了用户体验。 示例: Username: 格式 1: 在这个格式中, 元素嵌套在 元素内部,标签文本包含在 标签中。 Email: 在这个例子中,标签文本 "Email:" 直接与电子邮件输入字段相关联。这个格式简洁易读,因为标签文本与表单控件放置在一起。 格式 2: 在这个格式中, 元素有一个 for 属性,该属性与关联表单控件的 id 属性匹配。 Email: 在这个例子中, 的 for 属性指定了它与哪个表单控件关联。输入字段的 id 属性与标签的 for 属性匹配。这个格式在标签和表单控件之间提供了更清晰的分离,这有助于样式和脚本。 这两种格式实现了相同的效果:将标签与表单控件关联起来。选择使用哪种格式取决于个人喜好和 HTML 结构或样式的特定要求。 (2) Element: 描述: 元素用于将相关的表单元素进行分组,并提供一个可选的标题()来描述该组的内容。它有助于提高表单的结构和可读性。 示例: Personal Information (3) Element: 描述: 元素用于为元素提供一个标题,以描述包含在中的相关表单元素的内容。 示例: Account Information (4)tabindex Attribute: 描述: tabindex属性用于指定元素在通过键盘导航时的顺序。通过设置tabindex,可以定义用户通过Tab键访问页面上的元素的顺序。 示例: 如这个例子: tabindex 属性被设置为 "1"。这意味着当用户按下 Tab 键在页面上导航时,具有 id 为 "CustEmail" 的这个文本输入字段 () 将首先接收焦点,因为它在页面上的元素中具有最低的 tabindex 值。随后的元素将按照它们的 tabindex 值的升序接收焦点。如果多个元素有相同的 tabindex 值,则它们按照它们在 HTML 中出现的顺序接收焦点。 (5)accesskey Attribute: 描述: accesskey属性用于为元素分配一个键盘快捷键。通过按下与accesskey相关的键和浏览器定义的修饰键,用户可以直接访问具有accesskey属性的元素。 示例: Home Submit 如这个例子: 这意味着用户可以按下键盘上的 "Alt" 键(在大多数浏览器中)加上 "E" 键的组合,以将焦点移动到具有 accesskey 属性的这个文本输入字段 ()。在 Windows 系统上,用户可以按下 "Alt" + "E" 组合来实现这个效果。 这些元素和属性有助于增强表单的可访问性、结构性和用户体验。 和提供可读性更好的标签,帮助组织相关的表单元素,而tabindex和accesskey提供了键盘导航的控制。 43.Server-Side Processing 服务端处理(Server-Side Processing)指的是在 Web 开发中,Web 浏览器向 Web 服务器请求网页及其相关文件的过程。整个过程可以分为以下几个步骤: (1)浏览器请求: 您的 Web 浏览器向 Web 服务器发出请求,请求特定的网页或其他资源文件(例如图像、样式表、脚本等)。 (2)服务器响应: Web 服务器接收到浏览器的请求后,会根据请求的内容和路径定位相关的文件。一旦找到这些文件,服务器会将它们打包成响应(Response)并发送回浏览器。 (3)浏览器渲染: 您的 Web 浏览器接收到来自服务器的响应后,开始解析和渲染这些文件。这包括解析 HTML、应用样式表(CSS)、执行脚本(JavaScript)等操作。 (4)显示页面: 最终,浏览器根据解析和渲染的结果,将请求的网页显示在用户的屏幕上。这包括网页的文本、图像、交互元素等。 整个过程中,服务端处理主要涉及到 Web 服务器端的操作,它负责响应浏览器的请求、定位文件、执行服务器端的逻辑(如果有的话),并将所需的资源发送回浏览器。客户端(浏览器)负责接收并渲染来自服务器的响应,最终呈现给用户。这种分布式的处理方式使得 Web 应用能够动态地响应用户的请求,并提供丰富的交互和内容。 44.Server-Side Scripting Server-Side Scripting(服务器端脚本)是一种技术,其中服务器端的脚本嵌入到以诸如以下文件扩展名保存的 Web 页面文档中: .php(PHP) .asp(Active Server Pages) .cfm(Adobe ColdFusion) .jsp(Sun JavaServer Pages) .aspx(ASP.Net) 服务器端脚本的作用是在服务端执行,而不是在用户的浏览器中执行。这些脚本通常嵌入到 HTML 页面中,可以用于生成动态内容、处理用户输入、访问数据库等。每种扩展名都关联着一种特定的服务器端脚本语言。 服务器端脚本的一般工作流程如下: (1)用户请求页面: 用户在浏览器中请求一个包含服务器端脚本的页面。 (2)服务器执行脚本: 服务器端脚本由服务器直接执行,或者由服务器上的扩展模块执行。脚本可以包含业务逻辑、数据库访问、文件操作等。 (3)生成动态内容: 脚本生成动态内容,可以是 HTML、XML、JSON 等格式,具体内容取决于脚本的逻辑。 (4)发送响应: 生成的动态内容作为响应发送回用户的浏览器。 (5)浏览器渲染: 用户的浏览器接收到响应后,渲染显示页面。用户看到的内容是由服务器端脚本动态生成的,可以根据用户请求和其他条件进行调整。 这种方式使得 Web 开发者能够创建更动态、交互性强的网页,同时通过服务器端脚本处理业务逻辑,访问数据库等。 Sending information to a Server-side Script 发送信息到服务器端脚本 元素:定义了一个 HTML 表单,用户可以在其中输入信息并提交给服务器端脚本进行处理。 method="post":指定了表单提交时使用的 HTTP 请求方法为 POST。POST 方法将表单数据包含在请求的正文中,适用于传输较大量的数据,且相对于 GET 方法更安全。 action="http://webdevbasics.net/scripts/demo.php":指定了表单数据在提交时将被发送到的服务器端脚本的 URL 地址。在这个例子中,数据将被发送到名为 "demo.php" 的服务器端脚本,该脚本位于 "http://webdevbasics.net/scripts/" 目录下。 这段 HTML 代码定义了一个使用 POST 方法提交的表单,用户在该表单中输入的信息将被发送到指定的服务器端脚本 "demo.php" 进行处理。这通常是用户通过填写表单来与服务器进行交互的基本形式,服务器端脚本可以处理这些数据并执行相应的操作,例如存储到数据库、生成动态内容等。 45.Steps in Utilizing Server-Side Processing 利用服务器端处理的过程涉及以下几个步骤: (1)Web 页面调用: 这个过程开始于用户与网页进行交互,通常是通过提交表单或点击超链接。 表单可能包含用户输入的数据,而超链接可能携带参数或表示所需的操作。 (2)服务器端脚本执行: Web 服务器接收到用户的请求,识别与表单或超链接中指定操作相关的服务器端脚本。 服务器执行服务器端脚本,该脚本通常用一种服务器端脚本语言编写,例如 PHP、ASP、ColdFusion、JSP 等。 (3)访问资源: 一旦执行了服务器端脚本,它可以访问各种资源,如数据库、文件或其他进程。 (4)Web 服务器返回网页: 服务器端脚本根据执行结果生成相应的信息或数据。 Web 服务器将包含所请求信息或操作确认的网页返回给用户。 这个过程允许通过表单提交或超链接点击等方式触发服务器端处理,服务器端脚本可以执行各种操作,包括访问数据库、处理文件、生成动态内容等。 最终,用户会收到包含所请求信息的网页或操作成功的确认。 46.CGI:Common Gateway Interface CGI(Common Gateway Interface)是一种用于 Web 服务器与应用程序之间进行通信的协议。它允许 Web 服务器将用户的请求传递给应用程序,然后接收应用程序提供的信息并将其发送回用户。 具体而言,CGI 充当了 Web 服务器和应用程序之间的桥梁,它定义了一种标准的方式,使得 Web 服务器能够与外部应用程序进行交互。当用户在浏览器中请求一个特定的网页或资源时,Web 服务器可以使用 CGI 将请求传递给一个独立的应用程序或脚本,这个应用程序会处理请求并生成相应的响应。 CGI 协议使用环境变量和标准输入/输出来传递信息。例如,用户提交一个包含表单数据的 HTML 表单,Web 服务器可以使用 CGI 将这些数据传递给一个处理脚本,脚本再生成相应的 HTML 页面,最后由 Web 服务器将这个页面返回给用户。 总体而言,CGI 是一种早期的 Web 技术,虽然在今天被更先进的技术(如服务器端脚本和应用程序框架)所取代,但仍然在某些环境中被使用。 47.JavaScript基础 (1)JavaScript最初由Netscape公司的Brendan Eich(布兰登﹒艾奇)设计,最初命名为LiveScript,是一种动态、弱类型、基于原型的语言。 (2)JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。被广泛应用于各种客户端Web程序尤其是HTML开发中,能给HTML网页添加动态功能,响应用户各种操作。 (3)JavaScript具有如下特点: 1.简单性(小程序、无须编译、解释性、弱数据类型) 2.安全性( Browser无法访问本地硬盘数据/写入到数据库) 3.动态性(JS可以直接对用户提交的信息作出回应) 4.跨平台性(支持JS的Browser) (4)基本语法: 或 注:引用文件后,此时在< script >标记之间的所有JS语句都被忽略,不会执行。 (5)放置: JavaScript代码放置有4种情形: [1]头部; 注:JS脚本插入在头部时,JavaScript通常需要定义为函数格式,格式: function 函数名(参数1,参数2,…,参数n){函数体语句;}。 调用head中定义的JavaScript函数 head标记内定义的JavaScript函数 [2]主体; 主体部分JavaScript 48.Javascript程序 JavaScript程序由语句、函数、对象、方法、属性等构成,程序结构包括顺序、分支和循环三种基本结构。 (1)语句和语句块 JavaScript语句是发送给浏览器的命令,这些命令的作用是告诉浏览器要做的事情。 例如:alert(“这是告警消息框!”); JavaScript语句可以分批组合起来形成语句块,语句块以左花括号“{”开始,以右花括号“}”束。 例如:{var s=0;document.write(“S的值=”+s);} (2)代码 JavaScript代码是由若干条语句或语句块构成的执行体。 (3)消息对话框(不需要加对象声明) [1]警告框alert (message) 告警消息框使用实例 49.Javascript标识符与变量 (1)标识符 [1]必须使用字母或者下划线开始。 [2]必须使用英文字母、数字、下划线组成,不能出现空格或制表符。 [3]不能使用JavaScript关键字与JavaScript保留字。 [4]不能使用JavaScript语言内部的单词,比如Infinity,NaN,undefined等。 [5]大小写敏感,如name和Name是不同的两个标识符。 (2)关键字 JavaScript的关键字(语句执行属于关键字) break case catch continue default delete do else finally for function if in instanceof new return switch this throw try typeof var void while with (3)保留字(数据类型属于保留字) JavaScript的保留字 abstract boolean byte char class const debugger double enum export extends final float goto implements import int interface long native package private protected public short static super synchronized throws transient volatile (4)数据类型 JavaScript中的数据类型可分为字符型、数值型、布尔型、Null、Undefined和对象六种类型。 数据类型之间可以通过函数进行转换。 Nnumber(value):把值转换成数字(整型或浮点数) String(value):把值转换成字符串 Boolean(value):把值转换成Boolean类型 [1]字符型 字符型数据又称为字符串,由若干个字符组成,并且用单引号或双引号封装起来,如“你好!”、‘你好!’、“学习‘语言’”。 在使用字符串的过程中,需要注意单引号、双引号必须成对使用相互包含,但不能交叉。 [2]数值型 分为整型、浮点型、内部常量以及特殊值。 整型数值即整数,例如100、-3500、0等都是整数。 整数表示方法有十进制表示、八进制和十六进制的方式表示。 使用0打头的整数是八进制整数,如017,-035等都是合法的八进制整数。(负号也OK) 使用0x后0X打头的整数是十六进制整数,如0x16,0X3A89等都是合法的十六进制整数。 浮点数,例如3.53、-534.87等都是浮点型数值。浮点数还可以采用科学计数法进行表示,如3.5E15表示3.5×1015。 [3]内部常量 Math.E(自然对数的底数e)、Math.PI等。 [4]特殊值 Infinity(∞)、NaN-Not a Number。 //输出全是10进制数,在JavaScript中,整数直接表示时,默认是十进制的 [5]布尔型 Boolean(布尔型)是一种只含有true和false这两个值的数据类型,通常来说,布尔型数据表示“真”或“假”。 JavaScript中,通常采用true和false表示布尔型数据,但也可将他们转换为其他类型的数据,例如可将值为true的布尔型数据转换为整数1,而将值为false的布尔型数据转换为整数0。 [6]NULL null,表示空,不是0,0是有值的。 [7]Undefined 变量创建后未赋值(数字:NaN;字符串:Undefined;Boolean:false) 。 [8]Object 也是JS的重要组成部分,如date、window、document等,在后面介绍。 (5)变量 变量:可以保存执行时变化的值的名字,称为“变量”,变量是存储信息的容器。 格式: var 变量名 [=初值][,变量名[=初值] …] ; var作用:声明或创建变量,变量命名要“见名知意”。 具有良好编程习惯的程序员应该“先声明变量再使用” 例如: var area = 0; var area=0,y=2,str1=“欢迎你学习JS”; area = 3.14*radius*radius; var status = true; var a,b,c; name="张华"; //向未声明的变量赋值 (6)转义字符 如果在字符串中涉及到一些特殊字符如“\”、“"”、“'”等,这些字符无法直接使用,需要采用转义字符的方式。 转义字符 代表含义 转义字符 代表含义 \b 退格符 \t 水平制表符 \f 换页符 \' 单引号 \n 换行符 \" 双引号 \r 回车符 \\ 反斜线 例如:alert("姓名:王二\n班级:11计算机1班\r专业:计科系"); 50.Javascript运算符和表达式 JavaScript运算符主要有:算术运算符、关系运算符、逻辑运算符、赋值运算符、自增自减运算符、逗号运算符和位运算符等。 根据操作数的个数,将运算符分为一元运算符、二元运算符和三元运算符。 由操作数(变量、常量、函数调用等)和运算符结合在一起构成的式子称为“表达式”,最简单的表达式可以是常量名称。 对应的表达式包括:算术表达式、关系表达式、逻辑表达式、赋值表达式、自增、自减表达式、逗号表达式、条件表达式、位表达式。 (1)算术运算符和表达式 算术运算符 运算符 描述 例子(假定a = 2) 结果 + 加 b = a+2 b = 4 - 减 b = a -1 b = 1 * 乘 b = a * 2 b = 4 / 除 b = a / 2 b = 1 % 取模 b = a%2 b = 0 ++ 自增 b = a++(后置,先使用再运算) b = 2 -- 自减 b = - -a(前置,先运算再使用) b = 1 (2)关系运算符和表达式 运算符 > < >= <= != == === !== 名称 大于 小于 大于或等于 小于或等于 不等于 等于 恒等于 不恒等于 表达式 6>5 6<5 6>=5 6<=5 6!=5 6==5 5==="5" 5!=="5" 结果 true false true false true false false true 判断内容 数值 数值 数值 数值 数值 数值 数值与类型 数值与类型 =与==的区别:=是赋值运算符,==是等于运算符 ===与!==:===恒等于,不仅判断数值,而且判断类型 (3)关系运算符和表达式 相等性判断的特殊情况一览表 表达式 值 表达式 值 表达式 值 null== undefined true "NaN" == NaN false false == 0 true null == 0 false NaN != NaN true true == 1 true undefined == 0 false NaN == NaN false true == 2 false 5 == NaN false "5" == 5 true (4)逻辑运算符和表达式 逻辑运算符 a b !a(非) a||b或 a&&b与 true true false true true true false false true false false true true true false false false true false false (5)赋值运算符和表达式 运算符 = += -= *= /= %= 名称 赋值 加法赋值 减法赋值 乘法赋值 除法赋值 模赋值(求余赋值) 表达式 i=6 i+=5 i-=5 i*=5 i/=5 i%=5 示例 var i=6; i+=5; i-=5; i*=5; i/=5; i%=5; i的结果 6 11 1 30 1.2 1 等价于 i=i+5; i=i-5; i=i*5; i=i/5; i=i%5; 位移 a=4 <<= >>= >>>= 表达式 a<<=1 a>>=1 a>>>=1 a结果 a=8 a=2 a=2 (6)位运算符和表达式 位运算符:&-按位与;~ -按位非;|-按位或;^-按位异或 其中位运算~, NOT 实质上是对数字求负,然后减 1。 (7)条件运算符和表达式 条件运算符是一个3元运算符,也就是该运算涉及3个操作数。 变量=布尔表达式 ? 真值表达式 : 假值表达式 var variable = boolean_expression ? true_value : false_value; (8)其它运算符和表达式 [1]逗号运算符(,) var x=1 , y=2 , z=3; x=y+z , y=x+z; [2]新建对象运算符(new) var str1=new String();var stu=new Array(); [3]删除运算符(delete) 删除运算符是一个一元运算符,用于删除一个对象的属性或某个数组的元素。delete array[30],delete object.height [4]类型运算符(typeof) typeof(300),typeof("Welcome to You!") 51.Javascript程序控制结构 JavaScript程序设计分为两种:面向过程和面向对象的程序设计。每种方式都是对数据结构和算法的描述。 程序控制结构:顺序结构、分支结构和循环结构。 (1)顺序结构 顺序结构使用实例 (2)分支结构 [1]if 语句(单条件单分支):在一个指定的条件成立时执行代码。 [2]if...else 语句(单条件双分支):在指定的条件成立时执行代码,当条件不成立时执行另外的代码。 [3]if...else if....else 语句(多条件多分支):使用这个语句可以选择执行若干块代码中的一个。 [4]switch 语句(单条件多分支):使用这个语句可以选择执行若干块代码中的一个。 (3)循环结构 [1]FOR [2]WHILE [3]DO-WHILE [4]FOR-IN 该循环用来对数组或对象的属性进行操作的。 [5]循环的嵌套 [6]break/contiune break作用:立即结束循环并转到循环后续语句执行。 continue作用:结束本次循环,其后的语句本次不再执行,开始下一次的循环。 52.Javascript函数 函数需要先定义后使用,JavaScript函数一般定义在HTML文件的头部head标记或外部JS文件中,而函数的调用可以在HTML文件的主体body标记中任何位置。 常用系统内部函数又称为内部函数(内部方法),与任何对象无关,可以直接使用。 (1)常用系统函数 [1]返回字符串表达式中的值:eval(字符串表达式) 返回值:表达式的值或“undefined”。 [2]返回字符的编码:escape(字符串) escape 函数将参数字符串中的特定字符(ISO-Latin-1 字符集)进行编码,并返回一个编码后的字符串。它可以对空格、标点符号及其他非ASCII字母表的字符进行编码,除了以下字符:“* @ - _ + . / ”。 [3]返回字符串ASCII码:unescape (string) [4]返回实数:parseFloat(string); [5]返回不同进制的数:parseInt(numbestring , radix); 字符串以“0x”开始-16进制;以“0“开始--8进制;其他--10进制。 [6]判断是否为数值 :isNaN(testValue); NaN:not a Number (注意大小写) (2)自定义函数 function 函数名(参数1, 参数2, ... 参数N) {函数体;} 语法说明: 可以没有参数,但括号必须保留、以及包含在大括号内的由若干条语句构成的函数体。 不能在其他语句或其自身中嵌套function语句,也就是说,每个函数声明都是独立的。 函数名(参数),形参是用来接收函数调用者传递过来的实参。 调用实参与形参要一一对应,主要表现在类型、顺序、数量、内容要一致。 由于js是弱类型脚本语言,函数的参数没有类型检查和类型限制,要求编程者自查。 每一个函数体内都内置地存在着一个对象arguments,它是一个类似数组的对象,通过它可以查看函数当前有几个传递来的参数(并非定义的形式参数),各个参数的值是什么。 return语句返回计算结果 53.JAVASCRIPT常用对象 JavaScript的对象类型(分为4类): (1)本地对象(native object),本身提供的类型,如Math等,这种对象无需具体定义,直接就可以通过名称引用它们的属性和方法,如Math.Random(); [1]Math Math 对象提供多种算术常量和函数,执行普通的算术任务。可以直接通过“Math”名来使用它提供的属性和方法。 var area=Math.PI*radius*radius ;//计算圆的面积 var r= Math.random(); //生成介于 0.0 - 1.0之随机数 var s3=sqrt(10); //10的平方根,值小于0,则返回 NaN。其他函数: Math.max(x,y):返回 x 和 y 中的最高值。 var max=Math.max(100,200,300);//max=300 Math.min(x,y):返回 x 和 y 中的最低值。 var min=Math.min(1,45,67);//min=1 Math.pow(x,y):返回 x 的 y 次幂(xy)。 ceil():对数进行上舍入。 Var x=Math.ceil(10.5);//x=11 floor():对数进行下舍入。Var x=Math.floor(10.5);//x=10 round():把数四舍五入为最接近的整数。 var x=Math.round(10.5); //x=10, var y=Math.round(-10.5);//y=-10 exp() :返回 e 的指数。 var x=Math.exp(1);//x=2.718 log():返回数的自然对数(底为e)。 pow(x,y) :返回 x 的 y 次幂。 产生某一区间数据方法:[m,n] var num=Math.round(Math.random()*(n-m)+m) [2]NUMBER (1)按指定进制将数值转换为字符串 toString(radix) 如: var x=10; var s=x.toString(2) ; //s=1010 var s1=x.toString(8); //s1=12 (2)将Nmber四舍五入为指定小数点的数字 toFixed(n) : 固定小数点的位数 如: var x=10.24523; var y=x.toFixed(2); //y=10.25 (2)内建对象(built-in object),如Array, String等。这些对象独立于宿主环境,在JavaScript程序中由程序员定义具体对象,并可以通过对象名来使用; [1]ARRAY 数组对象用来在单独的变量名中存储一系列的值。通过声明一个数组,将相关的数据存入数组,使用循环等结构对数组中的每个元素进行操作(使用循环体的语句体)。 定义数组并直接初始化数组元素//var 弱变量 var course = new Array ("C++程序设计","HTML开发基础","数据库原理","计算机网络"); var course = ["C++程序设计","HTML开发基础","数据库原理","计算机网络"]; 先定义数组,后初始化数组元素 var course = new Array(); course[0] = "C++程序设计";//圆括号,还无定义数组 course[1] = "HTML开发基础";//方括号直接赋数组 course[2] = "数据库原理"; course[3] = "计算机网络"; 数组下标可以用变量替代,但变更的取值范围必须符合数组下标的边界,否则返回undefined 。(越界返回undefined) 可以用再赋值的方式来修改数组对应位置的元素。 length:数组对象长度; join(separator):把数组各个项用某个字符(串)连接起来,但并不修改原来的数组,默认用逗号分隔。 例如: var cn=course.join('-'); //短横线作为分隔符 Cn的值为“Java程序设计-HTML开发基础-数据库原理-计算机网络”。 pop():删除并返回数组的最后一个元素。 例如var cn=course.pop(); 则变量cn获得的值是“计算机网络”。 push(newelement1,.,newelementX):可向数组的末尾添加一个或多个元素,并返回新的长度。 例如:var length=course.push("软件工程","人工智能"); 则变量length获得的值6。 shift():用于把数组的第一个元素从其中删除,并返回第一个元素的值。 var ss=course1.shift(); unshift(newelement1,newelement2,....,newelementX): 向数组的开头添加一个或更多元素,并返回新的长度。 var s= course2.unshift(“大学语文”);//s=5 其它方法:sort()、reverse()、toString()等。 [2]DATE JavaScript 脚本内置了核心对象Date,该对象可以表示从毫秒到年的所有时间和日期,并提供了一系列操作时间和日期的方法。 生成日期对象 var MyDate = new Date(); var MyDate = new Date(milliseconds); var MyDate = new Date(string); var MyDate = new Date(year,month,day,hours,minutes,seconds,milliseconds); 应用举例 var birthday = new Date(“December 17, 1991 03:24:00”); birthday = new Date(1991,11,17); 提取日期字段方法: 方法名 说明 getDate() 从Date对象返回一个月中的某一天(1~31)。 getDay() 从Date对象返回一周中的某一天(0~6)。//一周第一天(0)为周日 getMonth() 从Date对象返回月份(0~11)。//注意月份加一操作 getFullYear() 从Date对象以四位数字返回年份。 getHours() 返回Date对象的小时(0~23)。 getMinutes() 返回Date对象的分钟(0~ 59)。 getSeconds() 返回Date对象的秒数(0~ 59)。 getMilliseconds() 返回Date对象的毫秒(0~999)。 getTime() 返回至今的毫秒数。 日期转换与调整: 将日期转化为字符串较 today.toString():把Date对象转换为字符串 today.toLocaleString():转换为本地时间串 today.toDateString();//日期部分转为字符串 today.toTimeString();//时间部分转为字符串 调整日期对象的日期和时间 var today = new Date(); today.setDate(today.getDate()+5); //将日期调整到5天以后,如果碰到跨年月,自动调整,setDate不会改动计算机的时钟 today.setFullYear(2007,10,1); //调整today对象到2007-10-1,月和日期参数可以省略 [3]STRING 1)两种不同的定义字符串对象的方式 var s1 = "Welcome to you!"; var s2 = new String("Welcome to you!"); 2) 获取字符串的长度 每个字符串都有一个length属性来说明该字符串的字符个数,例如: var s1 = "Welcome to you!"; var len = s1.length; // s1.length返回15,也就是s1所指向的字符串中有15个字符 3) charAt():获取字符串中指定位置的字符 该方法可以获得一个字符串指定位置上的字符。 s1=“welcome to you”;var ch = s1. charAt(3); 4) indexOf(searchvalue,fromindex):字串查找。 子字符串,搜索起始位置,方向:从前向后搜索,找到返回具体位置数值,未找到返回-1。 5)lastIndexOf(searchvalue,fromindex):字串查找。 子字符串,搜索起始位置,方向:从后向前搜索,找到返回具体位置数值,未找到返回-1。 6) split():字符串的分割 split() 方法用于把一个字符串分割成字符串数组。默认按字符分割。 7)其他函数 字符串的显示风格 big() :变大些 ; small():变小些 ; fontsize():字体大小; fontcolor():字体颜色; bold() :变粗些 ;italics():斜体; sub():下标 ;up():下标 大小写转换 toLowerCase():把字符串转换为小写 toUpperCase():把字符串转换为大写 [4]BOOLEAN Boolean对象 var bo=new boolean(value); var bo1=boolean(value); 参数为下列情况时返回true 1、true、”true”、”false”、”dfaf a”(!字符串返回true) 参数为下列情况时返回flase 0、null、false、NaN、””、空 (3)宿主对象(host object)是被浏览器支持的, 目的是为了能和被浏览的文档乃至浏览器环境交互,如document, window 和 frames等; (4)自定义对象,是程序员基于需要自己定义的对象类型。 54.HTML DOM (1)DOM(Document Object Model)模型 整个文档是一个文档节点; 每个 HTML 标签是一个元素节点; 包含在 HTML 元素中的文本是文本节点; 每一个 HTML 属性是一个属性节点; 注释属于注释节点。 HTML文档来主要节点: 元素节点 (Element Node ), ,、、、和等标签都是元素节点。 文本节点(Text Node),文本节点包含在元素节点内,如h1、p、li等节点就可以包含一些文本节点。 属性节点(Attribute Node),属性节点总是被包含在元素节点当中,可以通过元素节点对象调用getAttribute( )方法来获取属性节点。 (2)DOM节点访问 [1]通过getElementById( )方法访问节点 var s=document.getElementById(id); 语法: document.getElementById(id) 参数: id必选项,为字符串(String) 返回值:对象或null(无符合条件的对象) 例如: var userName=document.getElementById("userName").value; 注意: 最好为需要交互的元素设定一个唯一的id,以便查找; getElementById()返回的是一个页面元素的引用. 元素ID引用时,必须加引号,如“userName”,否则易引起语法错误,缺少对象。 [2]通过getElementsByName ( )方法访问节点 var s=document.getElementByName(name); 语法: document.getElementsByName(name) 参数: name :必选项为字符串(String) 返回值:数组对象; 如果无符合条件的对象,则返回空数组 例如: var userNameInput=document.getElementsByName("userName"); var userName=userNameInput[0].value; 使用该方法需要注意: 该方法返回一个数组,引用元素必须通过下标进行; 如果返回一个长度为0的数组,没有元素;可以通过对象的length属性来判断。 [3]通过getElementsByTagName ( )方法访问节点 var s=document.getElementByTagName(tagname); 语法: document.getElementsByTagName(tagname) 参数: tagname:必选项为字符串(String) 返回值:数组对象; 如果无符合条件的对象,则返回空数组 [4]通过form元素访问节点 var loginform = document.myform;//myform为form对象的名称 var username1=loginform.elements[0];//通过elements属性来访问用户名输入框 var username2=loginform.username;//通过name属性来访问用户名输入框 获得当前页面所有的Form对象 语法: document.forms 参数: 无 返回值:数组对象; 如果无符合条件的对象(Form对象),则返回空数组 例如:var loginform=document.forms[0]; var username=loginform.elements[0]; var password=loginform.elements[1]; 55.BOM 客户端浏览器这些预定义的对象统称为浏览器对象,它们按照某种层次组织起来的模型统称为浏览器对象模型(BOM-Browser Object Model)。浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。 (1)WINDOW对象 window对象位于浏览器对象模型的顶层,是document、frame、location等其他对象的父类。window对象的常用方法如下表。 方法名 说明 open(url,name,features,replace) 打开新的浏览器窗口或查找一个已命名的窗口。 prompt(“提示信息”,默认值) 显示可提示用户输入的对话框。 blur() 把键盘焦点从顶层窗口移开。 close() 关闭浏览器窗口。 focus() 把键盘焦点给予一个窗口。 setInterval(code,interval) 按照指定的周期(以毫秒计)来调用函数或计算表达式。 setTimeout(code,delay) 在指定的毫秒数后调用函数或计算表达式。 clearInterval(intervalID) 取消由setInterval()设置的timeout。 clearTimeout(timeoutID) 取消由setTimeout()方法设置的timeout。 (2)NAVIGATOR对象 navigator对象用于获取用户浏览器的相关信息。 属性名 说明 appName 返回浏览器的名称。 appVersion 返回浏览器的平台和版本信息。 platform 返回运行浏览器的操作系统平台。 systemLanguage 返回操作系统使用的默认语言。 userAgent 返回由客户机发送服务器的user-agent头部的值。 appCodeName 返回浏览器的代码名。 appName 返回浏览器的名称。 appVersion 返回浏览器的平台和版本信息。 (3)HISTORY对象 history对象表示窗口的浏览历史,并由window对象的history属性引用该窗口的history对象。 方法名 说明 forward() 加载history列表中的下一个 URL。 back() 加载history列表中的前一个 URL。 go(number|URL) 加载history列表中的某个具体页面。URL参数指定要访问的URL,number参数指定要访问的URL在history的URL列表中的位置。 在实际开发中,如下使用history方法: history.back() //与单击浏览器后退按钮执行的操作一样 history.go(-2) //与单击两次浏览器后退按钮执行的操作一样 history.forward() //等价于点击浏览器前进按钮或调用history.go(1)。 (4)LOCATION对象 location对象用来表示浏览器窗口中加载的当前文档的URL,该对象的属性说明了URL中的各个部分 。 56.JAVASCRIPT事件处理 (1)事件类型 [1]鼠标单击:例如单击button、选中checkbox和radio等元素;鼠标进入、悬浮或退出页面的某个热点:例如鼠标停在一个图片上方或者进入table的范围; [2]键盘按键:当按下按键或释放按键时; [3]HTML事件:例如页面body被加载时;在表单中选取输入框或改变输入框中文本的内容:例如选中或修改了文本框中的内容; [4]突变事件:主要指文档底层元素发生改变时触发的事件,如DomSubtreeModified(DOM子树修改)。 (2)事件句柄 事件句柄是事件发生要进行的操作。onload属性就是我们所说的事件句柄,也称为事件属性。 基本语法 : <标记 事件句柄=“JavaScript代码”…>标记> 如: … 格式: onload =“show();” /*load */ (3)事件处理 事件处理程序在JavaScript中动态指定(分配): <事件主角-对象>.<事件>=<事件处理程序>; obj.οnclick=function(){disp();} (4)事件处理程序的返回值 在JavaScript中通常事件处理程序不需要有返回值,这时浏览器会按默认方式进行处理;很多情况下需要使用返回值,来判断事件处理程序是否正确进行处理。 返回值类型:boolean布尔型值 浏览器根据返回值的类型决定下一步如何操作。当返回值为true,进行默认操作; 当返回值为 false,阻止浏览器的下一步操作。 基本语法:事件句柄=“return 函数名(参数);" 你可能感兴趣的:(前端,html,JavaScript,前端,html,css,javascript) Long类型前后端数据不一致 igotyback 前端 响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题,尤其是当后端使用Java的Long类型(64位)与前端JavaScript的Number类型(最大安全整数为2^53-1,即16位)进行数据交互时,很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问 swagger访问路径 igotyback swagger Swagger2.x版本访问地址:http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口,通常为8080。{context-path}是你的应用上下文路径,如果应用部署在根路径下,则为空。Swagger3.x版本对于Swagger3.x版本(也称为OpenAPI3)访问地址:http://{ip html 中如何使用 uniapp 的部分方法 某公司摸鱼前端 htmluni-app前端 示例代码:Documentconsole.log(window);效果展示:好了,现在就可以uni.使用相关的方法了 四章-32-点要素的聚合 彩云飘过 本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记,使用的openlayers5.3.xapi。源码见1032.html,对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters. DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业 ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业:【HTML5网页期末作业(1000套)】程序员有趣的告白方式:【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链 加密社引言在Solidity合约开发过程中,事件(Events)是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更,还能够让外部系统(如前端应用)监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时,该事件会被记录在区块链的交易收据中。具体而言,事件 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景 ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业,Web大学生网页HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端 Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript:做与用户的交互行为文章目录前端学习路线 webpack图片等资源的处理 dmengmeng 需要的loaderfile-loader(让我们可以引入这些资源文件)url-loader(其实是file-loader的二次封装)img-loader(处理图片所需要的)在没有使用任何处理图片的loader之前,比如说css中用到了背景图片,那么最后打包会报错的,因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以,打开网页能准确看到图片。{test:/\.(p node.js学习 小猿L node.jsnode.js学习vim node.js学习实操及笔记温故node.js,node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础,三大框架vuereactangular离不开node.jsnode.js是什么官网:node.js是一个开源的、跨平台的运行JavaScript的运行 springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言 这段时间抽空给女朋友搭建一个个人博客,想着记录一下建站的过程,就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站,或者用cms系统,三四个小时就可以做出一个前后台都有的网站,而且想做成啥样也都行。但是就是要从新做,自己做的意义不一样,更何况,俺就是专门干这个的,嘿嘿嘿要做一个网站,而且从零开始,首先呢就是技术选型了,经过一番思量决定选择-SpringBoot做后端,前端使用Vue做一 JavaScript 中,深拷贝(Deep Copy)和浅拷贝(Shallow Copy) 跳房子的前端 前端面试javascript开发语言ecmascript 在JavaScript中,深拷贝(DeepCopy)和浅拷贝(ShallowCopy)是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释,包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝(ShallowCopy)概念定义:浅拷贝是指创建一个新的对象或数组,其中包含了原对象或数组的基本数据类型的值和对引用数 博客网站制作教程 2401_85194651 javamaven 首先就是技术框架:后端:Java+SpringBoot数据库:MySQL前端:Vue.js数据库连接:JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java 00. 这里整理了最全的爬虫框架(Java + Python) 有一只柴犬 爬虫系列爬虫javapython 目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2 详解:如何设计出健壮的秒杀系统? 夜空_2cd3 作者:Yrion博客园:cnblogs.com/wyq178/p/11261711.html前言:秒杀系统相信很多人见过,比如京东或者淘宝的秒杀,小米手机的秒杀。那么秒杀系统的后台是如何实现的呢?我们如何设计一个秒杀系统呢?对于秒杀系统应该考虑哪些问题?如何设计出健壮的秒杀系统?本期我们就来探讨一下这个问题:image目录一:****秒杀系统应该考虑的问题二:****秒杀系统的设计和技术方案三:* JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言 在JavaScript中,Map和WeakMap都是用于存储键值对的数据结构,但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序,并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对:set(key,value):将一个键值对添加到Map中。如果键已经存在,则更新其对应的值。get(key):获取指定键的值。如果键 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记 最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了,所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态:sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器:安装Apache:sudoyuminstallhttpd启动Apache:sudosystemctl 补充元象二面 Redstone Monstrosity 前端面试 1.请尽可能详细地说明,防抖和节流的区别,应用场景?你的回答中不要写出示例代码。防抖(Debounce)和节流(Throttle)是两种常用的前端性能优化技术,它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明:防抖和节流的定义防抖:在一段时间内,多次执行变为只执行最后一次。防抖的原理是,当事件被触发后,设置一个延迟定时器。如果在这个延迟时间内事件再次被触发,则重 微信小程序开发注意事项 jun778895 微信小程序小程序 微信小程序开发是一个融合了前端开发、用户体验设计、后端服务(可选)以及微信小程序平台特性的综合性项目。这里,我将详细介绍一个典型的小程序开发项目的全过程,包括项目规划、设计、开发、测试及部署上线等各个环节,并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序,旨在为学生提供一站式校园生活服务,包括课程表查询、图书馆座位预约、食堂 切换淘宝最新npm镜像源是 hai40587 npm前端node.js 切换淘宝最新npm镜像源是一个相对简单的过程,但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新,镜像源的具体地址可能会发生变化,因此,我将基于当前可获取的信息,提供一个通用的切换步骤,并附上最新的镜像地址(截至回答时)。一、了解npm镜像源npm(NodePackageManager)是JavaScript的包管理器,用于安装、更新和管理项目依赖。由于npm官方仓库 字节二面 Redstone Monstrosity 前端面试 1.假设你是正在面试前端开发工程师的候选人,面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中,我获得了宝贵的实践经验和深刻的行业洞察,以下是我的主要收获和感悟:一、专业技能提升框架应用熟练度:通过实际项目,我深入掌握了React、Vue等前端框架的使用,不仅提升了编码效率,还学会了如何根据项目需求选择合适的框架。问题解决能力:在实习期间,我遇到了许多预料之外的技术难题。通过查阅文 斟一小组鸡血视频 和自己一起成长 http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa 前端代码上传文件 余生逆风飞翔 前端javascript开发语言 点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i Dockerfile命令详解之 FROM 清风怎不知意 容器化java前端javascript 许多同学不知道Dockerfile应该如何写,不清楚Dockerfile中的指令分别有什么意义,能达到什么样的目的,接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是,按照惯例,它们应该是大写的,以便更容易地将它们与参数区分开来。(引用 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端 一、引言在当今数字化时代,人们使用各种不同的设备访问互联网,包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验,响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术,在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性(一)概念响应式设计是一种网页设计方法,旨在 【C语言】- 自定义类型:结构体、枚举、联合 Cavalier_01 C语言 【C语言】:操作符(https://mp.csdn.net/editor/html/115218055)数据类型(https://mp.csdn.net/editor/html/115219664)自定义类型:结构体、枚举、联合(https://mp.csdn.net/editor/html/115373785)变量、常量(https://mp.csdn.net/editor/html/11523 uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app 第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢?比如说上面gif图中的这些人物对象,有一些已被该用户添加为关心,那么当用户下一次进入该页面时,这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大,只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先,整体的思路是利用动态类名对不同的元素进行选择。 高性能javascript--算法和流程控制 海淀萌狗 -for,while和do-while性能相当-避免使用for-in循环,==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组,还可以遍历对象。原因:for-in每次迭代操作会同时搜索实例或者原型属性,for-in循环的每次迭代都会产生更多开销,因此要比其他循环类型慢,一般速度为其他类型循环的1/7。因此,除非明确需要迭代一个属性数量未知的对象,否则应避免使用for-i html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游 html+css网页设计旅游网站首页1个页面网页作品代码简单,可使用任意HTML辑软件(如:Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作)。获取源码1,访问该网站https://download.csdn.net/download/qq_42431718/897527112,点击 spring mvc @RequestBody String类型参数 zoyation spring-mvcspringmvc 通过如下配置:text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时,默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ 矩阵求逆(JAVA)利用伴随矩阵 qiuwanchi 利用伴随矩阵求逆矩阵 package gaodai.matrix; import gaodai.determinant.DeterminantCalculation; import java.util.ArrayList; import java.util.List; import java.util.Scanner; /** * 矩阵求逆(利用伴随矩阵) * @author 邱万迟 单例(Singleton)模式 aoyouzi 单例模式Singleton 3.1 概述 如果要保证系统里一个类最多只能存在一个实例时,我们就需要单例模式。这种情况在我们应用中经常碰到,例如缓存池,数据库连接池,线程池,一些应用服务实例等。在多线程环境中,为了保证实例的唯一性其实并不简单,这章将和读者一起探讨如何实现单例模式。 3.2 [开源与自主研发]就算可以轻易获得外部技术支持,自己也必须研发 comsci 开源 现在国内有大量的信息技术产品,都是通过盗版,免费下载,开源,附送等方式从国外的开发者那里获得的。。。。。。 虽然这种情况带来了国内信息产业的短暂繁荣,也促进了电子商务和互联网产业的快速发展,但是实际上,我们应该清醒的看到,这些产业的核心力量是被国外的 页面有两个frame,怎样点击一个的链接改变另一个的内容 Array_06 UIXHTML <a src="地址" targets="这里写你要操作的Frame的名字" />搜索 然后你点击连接以后你的新页面就会显示在你设置的Frame名字的框那里 targerts="",就是你要填写目标的显示页面位置 ===================== 例如: <frame src=& Struts2实现单个/多个文件上传和下载 oloz 文件上传struts struts2单文件上传: 步骤01:jsp页面 <!--在进行文件上传时,表单提交方式一定要是post的方式,因为文件上传时二进制文件可能会很大,还有就是enctype属性,这个属性一定要写成multipart/form-data,不然就会以二进制文本上传到服务器端--> <form action="fileUplo 推荐10个在线logo设计网站 362217990 logo 在线设计Logo网站。 1、http://flickr.nosv.org(这个太简单) 2、http://www.logomaker.com/?source=1.5770.1 3、http://www.simwebsol.com/ImageTool 4、http://www.logogenerator.com/logo.php?nal=1&tpl_catlist[]=2 5、ht jsp上传文件 香水浓 jspfileupload 1. jsp上传 Notice: 1. form表单 method 属性必须设置为 POST 方法 ,不能使用 GET 方法 2. form表单 enctype 属性需要设置为 multipart/form-data 3. form表单 action 属性需要设置为提交到后台处理文件上传的jsp文件地址或者servlet地址。例如 uploadFile.jsp 程序文件用来处理上传的文 我的架构经验系列文章 - 前端架构 agevs JavaScriptWeb框架UIjQuer 框架层面:近几年前端发展很快,前端之所以叫前端因为前端是已经可以独立成为一种职业了,js也不再是十年前的玩具了,以前富客户端RIA的应用可能会用flash/flex或是silverlight,现在可以使用js来完成大部分的功能,因此js作为一门前端的支撑语言也不仅仅是进行的简单的编码,越来越多框架性的东西出现了。越来越多的开发模式转变为后端只是吐json的数据源,而前端做所有UI的事情。MVCMV android ksoap2 中把XML(DataSet) 当做参数传递 aijuans android 我的android app中需要发送webservice ,于是我使用了 ksop2 进行发送,在测试过程中不是很顺利,不能正常工作.我的web service 请求格式如下 [html] view plain copy <Envelope xmlns="http://schemas. 使用Spring进行统一日志管理 + 统一异常管理 baalwolf spring 统一日志和异常管理配置好后,SSH项目中,代码以往散落的log.info() 和 try..catch..finally 再也不见踪影! 统一日志异常实现类: [java] view plain copy package com.pilelot.web.util; impor Android SDK 国内镜像 BigBird2012 android sdk 一、镜像地址: 1、东软信息学院的 Android SDK 镜像,比配置代理下载快多了。 配置地址, http://mirrors.neusoft.edu.cn/configurations.we#android 2、北京化工大学的: IPV4:ubuntu.buct.edu.cn IPV4:ubuntu.buct.cn IPV6:ubuntu.buct6.edu.cn HTML无害化和Sanitize模块 bijian1013 JavaScriptAngularJSLinkySanitize 一.ng-bind-html、ng-bind-html-unsafe AngularJS非常注重安全方面的问题,它会尽一切可能把大多数攻击手段最小化。其中一个攻击手段是向你的web页面里注入不安全的HTML,然后利用它触发跨站攻击或者注入攻击。 考虑这样一个例子,假设我们有一个变量存 [Maven学习笔记二]Maven命令 bit1129 maven mvn compile compile编译命令将src/main/java和src/main/resources中的代码和配置文件编译到target/classes中,不会对src/test/java中的测试类进行编译 MVN编译使用 maven-resources-plugin:2.6:resources maven-compiler-plugin:2.5.1:compile &nbs 【Java命令二】jhat bit1129 Java命令 jhat用于分析使用jmap dump的文件,,可以将堆中的对象以html的形式显示出来,包括对象的数量,大小等等,并支持对象查询语言。 jhat默认开启监听端口7000的HTTP服务,jhat是Java Heap Analysis Tool的缩写 1. 用法: [hadoop@hadoop bin]$ jhat -help Usage: jhat [-stack <bool&g JBoss 5.1.0 GA:Error installing to Instantiated: name=AttachmentStore state=Desc ronin47 进到类似目录 server/default/conf/bootstrap,打开文件 profile.xml找到: Xml代码<bean name="AttachmentStore" class="org.jboss.system.server.profileservice.repository.AbstractAtta 写给初学者的6条网页设计安全配色指南 brotherlamp UIui自学ui视频ui教程ui资料 网页设计中最基本的原则之一是,不管你花多长时间创造一个华丽的设计,其最终的角色都是这场秀中真正的明星——内容的衬托 我仍然清楚地记得我最早的一次美术课,那时我还是一个小小的、对凡事都充满渴望的孩子,我摆放出一大堆漂亮的彩色颜料。我仍然记得当我第一次看到原色与另一种颜色混合变成第二种颜色时的那种兴奋,并且我想,既然两种颜色能创造出一种全新的美丽色彩,那所有颜色 有一个数组,每次从中间随机取一个,然后放回去,当所有的元素都被取过,返回总共的取的次数。写一个函数实现。复杂度是什么。 bylijinnan java算法面试 import java.util.Random; import java.util.Set; import java.util.TreeSet; /** * http://weibo.com/1915548291/z7HtOF4sx * #面试题#有一个数组,每次从中间随机取一个,然后放回去,当所有的元素都被取过,返回总共的取的次数。 * 写一个函数实现。复杂度是什么 struts2获得request、session、application方式 chiangfai application 1、与Servlet API解耦的访问方式。 a.Struts2对HttpServletRequest、HttpSession、ServletContext进行了封装,构造了三个Map对象来替代这三种对象要获取这三个Map对象,使用ActionContext类。 -----> package pro.action; import java.util.Map; imp 改变python的默认语言设置 chenchao051 python import sys sys.getdefaultencoding() 可以测试出默认语言,要改变的话,需要在python lib的site-packages文件夹下新建: sitecustomize.py, 这个文件比较特殊,会在python启动时来加载,所以就可以在里面写上: import sys sys.setdefaultencoding('utf-8') &n mysql导入数据load data infile用法 daizj mysql导入数据 我们常常导入数据!mysql有一个高效导入方法,那就是load data infile 下面来看案例说明 基本语法: load data [low_priority] [local] infile 'file_name txt' [replace | ignore] into table tbl_name [fields [terminated by't'] [OPTI phpexcel导入excel表到数据库简单入门示例 dcj3sjt126com PHPExcel 跟导出相对应的,同一个数据表,也是将phpexcel类放在class目录下,将Excel表格中的内容读取出来放到数据库中 <?php error_reporting(E_ALL); set_time_limit(0); ?> <html> <head> <meta http-equiv="Content-Type" 22岁到72岁的男人对女人的要求 dcj3sjt126com 22岁男人对女人的要求是:一,美丽,二,性感,三,有份具品味的职业,四,极有耐性,善解人意,五,该聪明的时候聪明,六,作小鸟依人状时尽量自然,七,怎样穿都好看,八,懂得适当地撒娇,九,虽作惊喜反应,但看起来自然,十,上了床就是个无条件荡妇。 32岁的男人对女人的要求,略作修定,是:一,入得厨房,进得睡房,二,不必服侍皇太后,三,不介意浪漫蜡烛配盒饭,四,听多过说,五,不再傻笑,六,懂得独 Spring和HIbernate对DDM设计的支持 e200702084 DAO设计模式springHibernate领域模型 A:数据访问对象 DAO和资源库在领域驱动设计中都很重要。DAO是关系型数据库和应用之间的契约。它封装了Web应用中的数据库CRUD操作细节。另一方面,资源库是一个独立的抽象,它与DAO进行交互,并提供到领域模型的“业务接口”。 资源库使用领域的通用语言,处理所有必要的DAO,并使用领域理解的语言提供对领域模型的数据访问服务。 NoSql 数据库的特性比较 geeksun NoSQL Redis 是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库,并提供多种语言的API。目前由VMware主持开发工作。 1. 数据模型 作为Key-value型数据库,Redis也提供了键(Key)和值(Value)的映射关系。除了常规的数值或字符串,Redis的键值还可以是以下形式之一: Lists (列表) Sets 使用 Nginx Upload Module 实现上传文件功能 hongtoushizi nginx 转载自: http://www.tuicool.com/wx/aUrAzm 普通网站在实现文件上传功能的时候,一般是使用Python,Java等后端程序实现,比较麻烦。Nginx有一个Upload模块,可以非常简单的实现文件上传功能。此模块的原理是先把用户上传的文件保存到临时文件,然后在交由后台页面处理,并且把文件的原名,上传后的名称,文件类型,文件大小set到页面。下 spring-boot-web-ui及thymeleaf基本使用 jishiweili springthymeleaf 视图控制层代码demo如下: @Controller @RequestMapping("/") public class MessageController { private final MessageRepository messageRepository; @Autowired public MessageController(Mes 数据源架构模式之活动记录 home198979 PHP架构活动记录数据映射 hello!架构 一、概念 活动记录(Active Record):一个对象,它包装数据库表或视图中某一行,封装数据库访问,并在这些数据上增加了领域逻辑。 对象既有数据又有行为。活动记录使用直截了当的方法,把数据访问逻辑置于领域对象中。 二、实现简单活动记录 活动记录在php许多框架中都有应用,如cakephp。 <?php /** * 行数据入口类 * Linux Shell脚本之自动修改IP pda158 linuxcentosDebian脚本 作为一名 Linux SA,日常运维中很多地方都会用到脚本,而服务器的ip一般采用静态ip或者MAC绑定,当然后者比较操作起来相对繁琐,而前者我们可以设置主机名、ip信息、网关等配置。修改成特定的主机名在维护和管理方面也比较方便。如下脚本用途为:修改ip和主机名等相关信息,可以根据实际需求修改,举一反三! #!/bin/sh #auto Change ip netmask ga 开发环境搭建 独浮云 eclipsejdktomcat 最近在开发过程中,经常出现MyEclipse内存溢出等错误,需要重启的情况,好麻烦。对于一般的JAVA+TOMCAT项目开发,其实没有必要使用重量级的MyEclipse,使用eclipse就足够了。尤其是开发机器硬件配置一般的人。 &n 操作日期和时间的工具类 vipbooks 工具类 大家好啊,好久没有来这里发文章了,今天来逛逛,分享一篇刚写不久的操作日期和时间的工具类,希望对大家有所帮助。 /* * @(#)DataFormatUtils.java 2010-10-10 * * Copyright 2010 BianJing,All rights reserved. */ package test; impor 按字母分类: ABCDEFGHIJKLMNOPQRSTUVWXYZ其他