alonghuang
alonghuang

HTML详细教程

1、HTML 语言简介

1.1、概述

HTML 是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载 HTML 代码，然后渲染出网页。

HTML 的全名是超文本标记语言（HyperText Markup Language），上个世纪 90 年代由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）发明。它的最大特点就是支持超链接，可以跳转到其他网页，从而构成了整个互联网。1999 年，HTML 4.0.1 发布，成为广泛接受的 HTML 标准。2014 年，HTML 5 发布，这是目前正在使用的版本。

浏览器的网页开发，涉及三种技术：HTML、CSS 和 JavaScript。HTML 语言定义网页的结构和内容，CSS 样式表定义网页的样式，JavaScript 语言定义网页于用户的互动行为。

下面就是一个简单网页的 HTML 源码。



  
    
    网页标题
  
  
    
Hello World

说明：上面这段代码，可以保存成文件 hello.html。浏览器打开这个本地文件，就能看到文字“Hello World”

1.2、网页的基本概念
1.2.1、标签

HTML 代码由许许多多不同的标签（tag）构成。

网页标题

上面代码中，</code>和<code>就是一对标签。

标签用来告诉浏览器，如何处理这段代码。标签的内容就是浏览器要渲染的、展示在网页上的内容。

标签放在一对尖括号里面（比如</code>），大多数标签都是成对出现的，分成开始标签和结束标签，结束标签名之前加斜杠（比如<code>）。但是。也有一些标签不是成对使用的，而是只有开始标签，没有结束标签，比如标签。

上面代码中，标签就没有结束标签。
这种单独使用的标签，通常是因为标签本身就足够完成功能了，不需要标签之间的内容。时机引用中，它们主要用来提示浏览器，做一些特别处理。

标签可以嵌套。

Hello World

上面代码中，

标签内部包含了一个

标签。

嵌套时，必须保证正确的闭合顺序，不能跨层嵌套，否则会出现意想不到的渲染结果。

Hello World

上面代码就是错误的嵌套，闭合顺序不正确。

标签名是大小写不敏感，比如</code>和<code><TITLE></code>是同一个标签。不过，一般习惯都是使用小写。</p> <p>另外，HTML 语言忽略缩进和换行。也就是说，小面的写法与一行的写法效果是一样的。</p> <pre><code><title> 网页标题

进一步说，整个网页的 HTML 代码完全可以写成一行，浏览器照样解析，结果完全一样。有时，正式发布网页之前，开发者会把源码压缩成一行，以减少传输的字节数。网页内容的缩进和换行，主要靠 CSS 样式来实现。

1.2.2、元素

浏览器渲染网页的时候，会把 HTML 源码解析成一个标签树，每个标签都是一个节点（node），成为网页元素（element）。所以，“标签”和“元素”基本上是同义词，只是使用的场合不一样：标签是源码角度来看，元素是从编程角度来看，比如

标签对应网页的p元素。

嵌套的标签就构成了网页元素的层级关系。

hello world

上面代码中，div元素内部包含了一个p元素。上层元素又称为“父元素”，下层元素又称为“子元素”，即div是p的父元素，p是div的子元素。

所有元素可以分成两大类：块级元素（block）和行内元素（inline）。块级元素默认占据一个独立的区域，在网页上会自动另起一行，占据 100% 的宽度。

hello


world

上面代码中，span元素是行内元素，因此浏览器会将两行内容放在一行显示。

1.2.3、属性

属性（attribute）是标签的额外信息，使用空格与标签名和其他属性分隔。

上面代码中，标签有两个属性：src 和 width。

属性可以用等号指定属性值，比如上例的 demo.jpg 就是 src 的属性值。属性值一般放在双引号里面，这不是必须的，但推荐总是使用双引号。

注意，属性名是大小写不敏感的，onclick 和 onClick 是同一个属性。

HTML 提供了大量属性，用来定制标签的行为。

1.3、网页的基本标签

符合语法标准的网页，应该满足下面的基本结构。

不管多么复杂的网页，都是从上面这个基本结构衍生出来的。

注意，HTML 代码的缩进和换行，对于浏览器不产生作用。所以上面的代码完全可以写成一行，渲染结果不变。上面这样分行写，只是为了提高可读性。

下面介绍，这个基本结构的主要标签，它们构成网页的骨架。

网页的第一个标签通常是，表示文档类型，告诉浏览器如何解析网页。

一般来说，只要像下面这样，简单声明 doctype 为 html 即可。浏览器就会按照 HTML5 的规则处理网页。

有时，该标签采用完全大写的形式，以便于区别正常的 HTML 标签。因为 本质上不是标签，更像是一个处理指令。

html 标签

标签是网页的顶层容器，也称为根元素（root element），其他元素都是它的子元素。一个网页只能有一个标签。

该标签的 lang 属性，表示网页内容默认的语言。

上面代码表示，网页的语言是英语

head 标签

标签是一个容器标签，用于放置网页的元信息。它的内容不会出现在网页上，而是为网页渲染做准备。

是的第一个子元素。如果网页不包含，浏览器会自动创建一个。

的子元素一般有下面七个。

  • ：设置网页的元数据
  • ：链接外部样式表
  • </code>： 设置网页标题</li> <li><code><style></code>：放置内嵌的样式表</li> <li><code><script></code>：引入脚本</li> <li><code><noscript></code>：浏览器不支持脚本时，所要显示的内容</li> <li><code><base></code>：设置网页内部相对 URL 的计算基准。</li> </ul> <p><strong>meta 标签</strong></p> <p><code><meta></code>标签用于设置或说明网页的元数据，必须放在<code><head></code>里面。一个<code><meta></code>标签就是一项元数据，网页可以有多个<code><meta></code></p> <p>一般来说，网页至少应该具有以下两个<code><meta></code>标签，而且必须在<code><head></code>的最前面。</p> <pre><code><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document
    1. charset 属性

    有一个 charset 属性，指定网页的编码方式，该属性非常重要。如果设置得不正确，浏览器可能无法正确解码，就会出现乱码。

    上面代码声明，网页为 utf-8 编码。虽然可以使用其他得编码方式，但几乎总是应该采用 UTF-8。注意，声明得编码方式，应该与网页实际得编码方式一致，即声明了 utf-8，网页就应该使用 UTF-8 编码保存。

    1. name 属性，content 属性

    的 name 属性表示元数据的名字，content 属性表示元数据的值。

    上面代码包含了三个元数据：description 是网页内容的描述，keywords 是网页内容的关键字，author 是网页作者。

    1. http-equiv 属性，content 属性

    http-equiv 属性用来覆盖 HTTP 回应的头信息字段，content 属性是该字段的内容。

    上面代码可以覆盖 HTTP 回应的 Content-Security-Policy 字段。

    title 标签

    </code>标签用于指定页面的标题，会显示在浏览器窗口的标题栏。</p> <pre><code><head> <title>网页标题

    搜索引擎根据这个标签，显示每个网页的标题。它对于网页在搜索引擎的排序，有很大的影响，应该精心安排，反应网页的主题。

    </code>标签的内部，不能再放置其他标签，只能放置无格式的纯文本。</p> <p><strong>body 标签</strong></p> <p><code><body></code>标签是一个容器标签，用于放置网页的主体内容。浏览器显示的页面内容，都是放置在它的内部。它是<code><html></code>的第二个子元素，紧跟在<code><head></code>后面。</p> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>网页标题

    hello world

    1.4、空格和换行

    HTML 语言有自己的空格处理规则。标签内容的头部和尾部的空格，一律忽略不计。

     hello world

    上面代码中，hello 前面的空格和 world 后面的空格，浏览器一律忽略不计。

    标签内容里面的多个连续空格（包含制表符\t），会被浏览器合并成一个。

    hello       world

    上面代码中，hello 与 world 之间有多个连续空格，浏览器会将它们合并成一个。网页渲染的结果是，hello 与 world 之间只有一个空格。

    浏览器还会将文本里面的换行符（\n）和回车符（\r），替换成空格。

    hello



 world

    上面代码中，hello 与 world 之间有多个换行，浏览器会将它们替换成空格，然后再将多个空格合并成一个。网页渲染的结果是，hello 与 world 之间有一个空格。

    这意味着，HTML 源码里面的换行，不会产生换行效果。

    1.5、注释

    HTML 代码可以包含注释，浏览器会自动忽略注释以 结尾，下面就是一个注释的例子。

    注释可以是多行的，并且内部的 HTML 都不再生效了。

    上面代码是一个注释的区块，内部的代码都是无效的，浏览器不会解析，更不会渲染它们。

    注释有助于理解代码的含义，复杂的代码块前面最好加上注释。

    2、URL 简介

    2.1、概述

    URL 是“统一资源定位符”（Uniform Resource Locator）的首字母缩写，中文译为“网址”，表示各种资源的互联网地址。下面就是一个典型的 URL。

    https://www.example.com/path/index.html

    所谓资源，可以简单理解成各种可以通过互联网访问的文件，比如网页、图像、音频、视频、JavaScript 脚本等等。只有知道了它们的 URL，才可能再互联网上获取它们。

    只要资源可以互联网访问，它就必然有对应的 URL。一个 URL 对应一个资源，但是同一个资源可能对应多个 URL。

    URL 是互联网的基础。互联网之所以“互联”，就是因为网页可以通过“链接”（link），包含其他 URL。用户只要点击，就可以从一个 URL 跳转到另一个 URL，前往不同的网站。

    2.2、网址的组成部分

    URL 由多个部分组成。为了讲解，下面是一个比较复杂的 URL。

    https://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#anchor

    我们看看，这个 URL 的各个部分

    2.2.1、协议

    协议（scheme）是浏览器请求服务器资源的方法，上例是 https://的部分，表示使用 HTTPS 协议。

    互联网支持多种协议，必须指明网址使用哪一种协议，默认是 HTTP 协议。也就是说，如果省略协议，直接再浏览器地址输入 www.example.com，那么浏览器默认会访问 http://www.example.com。HTTPS 是 HTTP 的加密版本，出于安全考虑，越来越多的网站使用这个协议。

    HTTP 和 HTTPS 的协议名称后面，紧跟着一个冒号和两个斜杠（/）。其他协议不一定如此，邮件地址协议 mailta: 的协议名后面只有一个冒号，比如 mailto:[email protected]。

    2.2.2、主机

    主机（host）是资源所在的网站名或服务器的名字，又称为域名。上例的主机是 www.example.com。

    有些主机没有域名，只有 IP 地址，比如 192.168.31.3。这种情况常常出现在局域网。

    2.2.3、端口

    用一个域名下面可能同时包含多个网站，它们之间通过端口（port）区分。“端口”就是一个整数，可以简单理解成，访问者告诉服务器，想要访问哪一个网站。默认端口是 80，如果省略了这个参数，服务器就会返回 80 端口的网站。端口紧跟在域名后面，两者之间使用冒号分隔，比如 www.example.com:80。

    2.2.4、路径

    路径（path）是资源在网站的位置。比如，/path/index.html 这个路径，指向网站的 /path 子目录下面的网页文件 index.html。

    互联网的早期，路径是真实存在的物理位置。现在由于服务器可以模拟这些位置，所以路径只是虚拟位置。

    路径可能只包含目录，不包含文件名，比如 /foo/，甚至结尾的斜杠都可以省略。这时，服务器通常会默认跳转到该目录里面的 index.html 文件（即等同于请求 /foo/index.html），但也可能有其他的处理（比如列出目录里面的所有文件），这取决于服务器的设置。一般来说，访问www.example.com这个网址，很可能返回的是网页文件 www.example.com/index.html。

    2.2.5、查询参数

    查询参数（parameter）是提供给服务器的额外信息。参数的位置是在路径后面，两者之间使用 ? 分隔，上例是 ?key1=value1&key2=value2。

    查询阐述可以有一组或多组。每组参数都是键值对（key-value pair）的形式，同时具有键名（key）和键值（value），它们之间使用等号（=）连接。比如，key1=value 就是一个键值对，key1 是键名，value1 是键值。

    多个参数之间使用 & 连接，比如 key1 = value&key2=value2。

    2.2.6、锚点

    锚点（anchor）是网页内部的定位点，使用 # 加上锚点名称，放在网址的最后，比如 #anchor。浏览器加载页面以后，会自动滚动到锚点所在的位置。

    锚点名称通过网页元素的 id 属性命名。

    2.3、URL 字符

    URL 的各个组成部分，只能使用以下这些字符。

    • 26 个英文字母（包括大写和小写）
    • 10 个阿拉伯数字
    • 连词号（-）
    • 句点（.）
    • 下划线（-）

    此外，还有 18 个字符属于 URL 的保留字符，只能在给定的位置出现。比如，查询参数的开头是问号（?），也就是说，问号只能出现查询参数的开头，出现在其他位置就是非法的，会导致网址解析错误。网址的其他部分如果要使用这些保留字符，必须使用它们的转义形式。

    URL 字符转义的方法是，在这些字符的十六进制 ASCII 码前面加上百分号（%）。下面是这 18 个字符及其转义形式。

    • !: %21
    • #: %23
    • $: %24
    • &: %26
    • ': %27
    • (: %28
    • ): %29
    • *: %2A
    • +: %2B
    • ,: %2C
    • /: %2F
    • :: %3A
    • ;: %3B
    • =: %3D
    • ?: %3F
    • @: %40
    • [: %5B
    • ]: %5D

    举例来说，有一个网页的 URL 是 foo?bar.html，即文件里面包含一个问好，那么需要写成 foo%3Fbar.html。

    URL 的合法字符，其实也可以采用这种转义方法，但是不建议使用。比如，字母 a 的十六进制 ASCII 码是 61，转义形式后就是 %61。因此，www.apple.com 又可以写成 www.%61pple.com，浏览器一样识别。

    值得注意的是，空格的转义形式是 %20。对于那些包含空格的文件名，这个转义是必须的。

    既不属于合法字符、也不属于保留字符的其他字符（比如汉字），理论上不需要手动转义，可以直接写在 URL 里面，比如 www.example.com/中国.html，浏览器会自动将它们转义，发给服务器。转义方法是使用这些字符的十六进制 UTF-8 编码，每两位算作一组，然后每组头部添加百分号（%）。

    举例来说，汉字中的 UTF-8 十六进制编码是 e4b8ad，每两个字符一组，URL 转义后就为 %e4%b8%ad。也就是说，URL 里面凡是有汉字 中的地方，都要写成 %e4%b8%ad。因此，访问 www.example.com/中国.html 这个网址，需要写成下面的样子。

    www.example.com/%e4%b8%ad%e5%9b%bd.html

    上面代码中，中的转义形式是 %e4%b8%ad，国是 %e5%9b%bd。

    2.4、绝对 URL 和相对 URL

    URL 分成两种：绝对 URL 和 相对 URL。

    绝对 URL 指的是，只靠 URL 本身就能确定资源的位置。这意味着，URL 必须带有资源的完整信息，包含协议、主机、路径等部分。前面的例子都是绝对 URL。

    相对 URL 指的是，URL 不包含资源位置的全部信息，必须结合当前网页的位置，才能定位资源。比如，当前网页的 URL 是 https://www.example.com/path/index.html，该网页上面有一个资源，URL 指向 a.html，这个就是相对 URL。因为只知道 a.html 与当前网址在同一个子目录下面，从而得到绝对 URL https://www.example.com/path/a.html。

    相对 URL 如果以斜杠（/）开头，就表示网站的根目录。否则，必须以当前目录为起点，推算资源的位置。比如，相对 URL /foo/bar.html表示网站根目录的子目录 foo，foo/bar.html 表示在当前目录的 foo 子目录。

    URL 还可以使用两个特殊简写，表示特定位置。

    • .：表示当前目录，比如 ./a.html（当前目录下的 a.html 文件）
    • ..：表示上级目录，比如 ../a.html（上级目录下的 a.html 文件）

    这两种简写可以多个连用，比如 …/…/ 表示上两级目录。

    绝对 URL 也可以使用这两个简写，比如 www.example.com/./index.hml 等同于 www.example.com/index.html，这时.相当于根目录的当前目录，即根目录本身。

    2.5、base

    标签指定网页内部的所有相对 URL 的计算基准。整张网页只能有一个 标签，而且只能放在 里面。它是单独使用的标签，没有闭合标签，下面是一个例子。

    标签的 href 属性给出计算的基准网址，target 属性给出如何打开链接。以知计算基准是 https://www.example.com/files/，那么相对 URL foo.html，就可以转成绝对 URL https://www.example.com/files/foo.html。

    注意， 标签必须至少具有 href 属性或 target 属性之一。

    一旦设置了 ，就对整个网页都有效。如果要改变某个链接的行为，只能用绝对链接替代相对链接。尤其需要注意锚点，这时锚点也是针对 计算的，而不是针对当前网页的 URL。

    3、网页元素的属性

    3.1、简介

    网页元素的属性（attribute）可以定制元素的行为，不同的属性会导致元素有不同的行为。元素属性的写法是 HTML 标签内部的“键值对”。

    上面代码中，标签内部的键值对 lang=“en”，就称为 html 元素的属性。属性名为 lang，属性值为 en。

    属性名与标签名一样，不区分大小写，lang 和 LANG 是同一个属性。

    属性名与属性值之间，通过等号 = 连接。属性值可以放在单引号或双引号之中，建议统一使用双引号。某些属性值可以不使用引号，但是建议不要这样写。

    有些属性是布尔属性，即属性值是一个布尔值，只有“打开”和“关闭”两种情况。这时属性值可以省略，只要添加了属性名，就表示打开该属性。

    上面代码中，required 就是 标签的布尔属性。如果加上这个属性，就表示打开，没有就是关闭。

    3.2、全局属性

    全局属性（global attributes）是所有元素都可以使用的属性。也就是说，你可以把下面的属性，加在任意一个网页元素上面，不过有些属性对某些元素可能不产生意义。

    下面是一些常见的全局属性。

    • id
    • class
    • title
    • tabindex
    • accesskey
    • style
    • hidden
    • lang,dir
    • contenteditable
    • spellcheck
    • data-属性
    • 事件处理属性
    3.2.1、id

    id 属性是元素在网页内的唯一标识符。比如，网页可能包含多个

    标签，id 属性可以指定每个

    标签的唯一标识符。

    上面代码中，三个

    标签具有不同的 id 属性，因此可以区分。

    id 属性的值必须是全局唯一的，同一个页面不能有两个相同的 id 属性。另外，id 属性的值不得包含空格。

    id 属性的值还可以在最前面加上 #，放到 URL 中作为锚点，定位到该元素在网页内部的位置。比如，用户访问网址 https://foo.com/index.html#bar 的时候，浏览器会自动将页面滚动到 bar 的位置，让用户第一眼就看到这部分内容。

    3.2.2、class

    class 属性用来对网页元素进行分类。如果不同元素的 class 属性值相同，就表示它们是一类的。

    上面代码中，第一个

    和 第三个

    是一类，因为它们的 class 属性相同。

    元素可以同时具有多个 class，它们之间使用空格分隔。

    上面的 p 元素同时具有 p1、p2、p3 三个 class。

    3.2.3、title

    title 属性用来为元素添加附加说明。大多数浏览器中，鼠标悬浮在元素上面时，会将 title 属性值作为浮动提示，显示出来。

    
  
    本站内容使用创意共享许可证，可以自由使用。

    上面代码中，title 属性解释了这一块内容的目的。鼠标悬停在上面时，浏览器会显示一个浮动提示。一旦鼠标移开，提示就会消失。

    3.2.4、tabindex

    网页通常使用鼠标操作，但是某些情况下，用户可能希望使用键盘，或者只有键盘可以用。因此，浏览器允许使用 Tab 键，遍历网页元素。也就是说，只要不停按下 Tab 键，网页的焦点就会从一个元素转移到另一个元素，选定焦点元素以后，就可以进行下一步操作，比如按下回车键访问某个链接，或者直接在某个输入框输入文字。

    这里有提个问题，按下 Tab 键的时候，浏览器怎么知道跳到哪一个元素。HTML 提供了 tabindex 属性，解决这个问题。它的名字的含义，就是 Tab 的顺序（index）。

    tabindex 属性的值是一个整数，表示用户按下 Tab 键的时候，网页焦点转移的顺序。不同的属性值有不同的含义。

    • 负整数：该元素可以获取焦点（比如使用 JavaScript 的 focus() 方法），但不参与 Tab 键对网页元素的遍历。这个值通常是 -1。
    • 0：该元素参与 Tab 键的遍历，顺序由浏览器指定，通常是按照其在网页里面出现的位置。
    • 正整数：网页元素按照从小到大的顺序，参与 Tab 键的遍历。如果多个元素的 tabindex 属性相同，则按照在网页源码里面出现的顺序遍历。
    这段文字可以获得焦点。

    上面代码中，

    标签的 tabindex 为 0，意味着该元素可以获得焦点，并且也可以被 Tab 键遍历，顺序由其在源码里面的位置决定。

    一般来说，tabindex 属性最好都设成 0，按照自然顺序进行遍历，这样比较符合用户的预期，除非网页由特殊布局。如果网页所有元素都没有设置 tabindex，那么只有那些默认可以遍历的元素（比如链接、输入框等）才能参与 Tab 键的遍历，顺序由其在源码的位置决定。因此实际上，只有那些无法获得焦点的元素（比如、

    ）需要参与遍历，才有必要设置 tabindex 属性。

    3.2.5、accesskey

    accesskey 属性指定网页元素获得焦点的快捷键，该属性的值必须是单个的可打印字符。只要按下快捷键，该元素就会得到焦点。

    上面代码中，

    上面代码会产生一个按钮，上面的文字就是“点击”。

    button 内部不仅放置文字，还可以放置图像，这可以形成图像按钮。

    button 具有以下属性。

    • autofocus：布尔属性，表示网页加载时，焦点就在这个按钮。网页里面只能有一个元素，具有这个属性。
    • disabled：布尔属性，表示按钮不可用，会导致按钮变灰，不可点击。
    • name：按钮的名称（与 value 属性配合使用），将以 name=value 的形式，随表单一起提交到服务器。
    • value：按钮的值（与 name 属性配合使用），将以 name=value 的形式，随表单一起提交到服务器。
    • type：按钮的类型，可能的值有三种：submit （点击后将数据提交给服务器）， reset （将所有控件的值重 置为初始值）， button （没有默认行为，由脚本指定按钮的行为）。
    • form：指定按钮关联的 form 表单，值为 form 的 id 属性。如果省略该属性，默认关联按钮所在父表 单。
    • formaction：数据提交到服务器的目标 URL，会覆盖 form 元素的 action 属性。
    • formenctype：数据提交到服务器的编码方式，会覆盖 form 元素的 enctype 属性。可能的值有三 种： application/x-www-form-urlencoded （默认值）， multipart/form-data （只用于文件上传）， text/plain。
    • formmethod：数据提交到服务器使用的 HTTP 方法，会覆盖 form 元素的 method 属性，可能的值 为 post 或 get
    • formnovalidate：布尔属性，数据提交到服务器时关闭本地验证，会覆盖 form 元素的 novalidate 属性。
    • formtarget：数据提交到服务器后，展示服务器返回数据的窗口，会覆盖 form 元素的 target 属性。可能的 值有 _self （当前窗口）， _blank （新的空窗口）、 _parent （父窗口）、 _top （顶层窗口）。
    9.6、select 标签

    select 标签用于生成一个下拉菜单

    上面代码中， select 生成一个下拉菜单，菜单标题是“—请选择一项—”，最右侧有一个下拉箭头。点击下拉箭头， 会显示三个菜单项，供用户点击选择。

    下拉菜单的菜单项由 option 标签给出，每个 option 代表可以选择的一个值。选中的 option 的 value 属性，就是 select 控件发送的服务器的值。

    option 有一个布尔属性 selected ，一旦设置，就表示该项是默认选中的菜单项。

    上面代码中，第二项 Second Value 是默认选中的。页面加载的时候，会直接显示在下拉菜单上。

    select 有如下属性。

    • autofocus ：布尔属性，页面加载时是否自动获得焦点。
    • disabled ：布尔属性，是否禁用当前控件。
    • form ：关联表单的 id 属性。
    • multiple ：布尔属性，是否可以选择多个菜单项。默认情况下，只能选择一项。一旦设置，多数浏览器会显示一个滚动列表框。用户可能需要按住 Shift 或其他功能键，选中多项。
    • name ：控件名。
    • required ：布尔属性，是否为必填控件。
    • size ：设置了 multiple 属性时，页面显示时一次可见的行数，其他行需要滚动查看。
    9.7、option, optgroup 标签

    option 标签用在 select、optgroup、datalist 里面，表示一个菜单项，参见 select 的示例。

    它有如下属性。

    • disabled：布尔属性，是否禁用该项
    • label：该项的说明。如果省略，则等于该项的文本内容
    • selected：布尔属性，是否为默认值。显然，一组菜单中，只能有一个菜单项设置该属性
    • value：该项提交到服务器的值。如果省略，则等于该项的文本内容

    上面代码中，select 是一个下拉菜单，它的内部使用 optgroup 将菜单项分成两组。每组有自己的标题，会加粗显示，但是用户无法选中。

    它的属性如下。

    • disabled：布尔设置，是否禁用该组。一旦设置，该组所有的菜单项都不可选。
    • label：菜单项的标题
    9.8、datalist 标签

    datalist 标签是一个容器标签，用于为指定控件提供一组相关数据，通常用于生成输入提示。它的内部使用 option,生成每个菜单项。

    上面代码中，input 生成一个文本输入框，用户可以输入文本。input 的 list 属性指定关联的 datalist 的 id 属性。

    datalist 的数据列表用于输入建议，用户点击输入框的时候，会显示一个下拉菜单，里面是建议的输入项。并且还会自动匹配用户已经输入的字符，缩小可选的范围，比如用户输入“香”，则只会显示“香草”这一项。

    9.9、textarea 标签

    textarea 是一个块级元素，用来生成多行的文本框。

    上面代码会生成一个长度为 5 行，宽度为 33 个字符的文本框。

    该标签有如下属性。

    • autofocus：布尔属性，是否自动获得焦点
    • cols：文本框的宽度，单位为字符，默认值为 20
    • disabled：布尔属性，是否禁用该控件
    • form：关联表单的 id 属性
    • maxlength：允许输入的最大字符数。如果未指定此值，用户可以输入无限数量的字符
    • minlength：允许输入的最小字符数
    • name：控件的名称
    • placeholder：输入为空时显示的提示文本
    • readonly：布尔属性，控件是否为只读
    • required：布尔属性，控件是否为必填
    • rows：文本框的高度，单位为行
    • spellcheck：是否打开浏览器的拼写检查。可能的值有 true（打开），default（由父元素或网页设置决定），false（关闭）。
    • wrap：输入的文本是否自动换行。可能的值有 hard（浏览器自动插入换行符 CR + LF，使得每行不超过控件的宽度），soft（输入内容超过宽度时自动换行，但不会加入新的换行符，并且浏览器保证所有换行符都是 CR + LR，这是默认值），off（关闭自动换行，单行长度超过宽度时，会出现水平滚动条）。
    9.10、output 标签

    output 标签是一个行内元素，用于显示用户操作的结果。

     +
 =
20

    该标签有如下属性。

    • for：关联控件的 id 属性，表示为该控件的操作结果
    • form：关联表单的 id 属性
    • name：控件的名称
    9.11、progress 标签

    progress 标签是一个行内元素，表示任务的完成进度。浏览器通常会将显示为进度条。

    70%

    该标签有如下属性。

    • max：进度条的最大值，应该是一个大于 0 的浮点数。默认值为 1。
    • value：进度条的当前值。它必须是 0 和 max 属性之间的一个有效浮点数。如果省略了 max 属性，该值则必须在 0 和 1 之间。如果省略了 value 属性，则进度条会出现滚动，表明正在进行中，无法知道完成的进度。
    9.12、mater 标签

    meter 标签是一个行内元素，表示指示器，用来显示已知范围内的一个值，很适合用于任务的当前进度、磁盘已用控件、充电量等带有比例性质的场合。浏览器通常会将其显示为一个不会滚动的指示条。

    烤箱的当前温度是350度。

    上面代码会显示一个指示条，左侧表示 200，右侧表示 500，当前位置停留在 350。

    注意，meter 元素的子元素，正常情况下不会显示。只有在浏览器不支持 meter 时才会显示。

    该标签有如下属性。

    • min：范围的下限，必须小于 max 属性。如果省略，则默认为 0。
    • max：范围的上限，必须大于 min 属性。如果省略，则默认为 1。
    • value：当前值，必须在 min 属性和 max 属性之间。如果省略，则默认为 0。
    • low：表示“低端”的上限门槛值，必须大于 min 属性，小于 high 属性和 max 属性。如果省略，则等于 min 属性。
    • high：表示“高端”的下限门槛值，必须小于 max 属性，大于 low 属性和 min 属性。如果省略，则等于 max 属性。
    • optimum：指定最佳值，必须在 min 属性和 max 属性之间。它应该与 low 属性和 high 属性一起使用，表示最佳范围。如果 optimum 小于 low 属性，则表示“低端”是最佳范围；如果大于 high 属性，则表示“高端”是最佳范围；如果在 low 和 high 之间，则表示“中间地带”是最佳范围。如果省略，则等于 min 和 max 的中间值。
    • form：关联表单的 id 属性。

    Chrome 浏览器使用三种颜色，表示指示条所处的位置。较好情况时，当前位置为绿色；一般情况时，当前位置为黄色；较差情况时，当前位置为红色。

    
  at 50/100

    上面代码中，指示条可以分成三段：0 ～ 32，33 ～ 65，66 ～ 100。由于 optimum 属性是 80 ，因此 66 ～ 100 是较好情况， 33 ～ 65 是一般情况， 0 ～ 32 是较差情况。浏览器因此会根据 value 属性，将当前位置显示为不同颜色，小于 33 时显示红色，大于 65 时显示绿色，两者之间显示黄色。

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

  • 移动端城市区县二级联动选择功能实现包 good2know
    本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
  • day15｜前端框架学习和算法 universe_01 前端算法笔记
    T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的
  • SpringMVC的执行流程
    1、什么是MVCMVC是一种设计模式。MVC的原理图如下所示M-Model模型（完成业务逻辑：有javaBean构成，service+dao+entity）V-View视图（做界面的展示jsp，html……）C-Controller控制器（接收请求—>调用模型—>根据结果派发页面2、SpringMVC是什么SpringMVC是一个MVC的开源框架，SpringMVC=Struts2+Spring，
  • Selenium 特殊控件操作与 ActionChains 实践详解 小馋喵知识杂货铺 selenium测试工具
    1.下拉框单选操作(a)使用SeleniumSelect类（标准HTML标签）Selenium提供了内置的Select类用于操作标准下拉框，这种方式简单且直观。fromselenium.webdriver.support.uiimportSelect#定位下拉框dropdown=Select(driver.find_element("id","dropdown_id"))#通过以下三种方式选择单个
  • 微信公众号回调java_处理微信公众号消息回调 weixin_39607620 微信公众号回调java
    1、背景在上一节中，咱们知道如何接入微信公众号，可是以后公众号会与咱们进行交互，那么微信公众号如何通知到咱们本身的服务器呢？咱们知道咱们接入的时候提供的url是GET/mp/entry，那么公众号以后产生的事件将会以POST/mp/entry发送到咱们本身的服务器上。html2、代码实现，此处仍是使用weixin-java-mp这个框架实现一、引入weixin-java-mpcom.github.
  • 人工智能应用研究快讯 2021-11-30 峰谷皆平
    [HTML]ArtificialIntelligenceforSkinCancerDetection:ScopingReviewATakiddin,JSchneider,YYang,AAbd-Alrazaq...JournalofMedicalInternet...,2021ABSTACT:Background:Skincanceristhemostcommoncancertypeaffectin
  • 【Jupyter】个人开发常见命令 TIM老师 #Pycharm&VSCodepythonJupyter
    1.查看python版本importsysprint(sys.version)2.ipynb/py文件转换jupyternbconvert--topythonmy_file.ipynbipynb转换为mdjupyternbconvert--tomdmy_file.ipynbipynb转为htmljupyternbconvert--tohtmlmy_file.ipynbipython转换为pdfju
  • 用代码生成艺术字：设计个性化海报的秘密
    本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准
  • vue element 封装表单 影子信息 vuevue.jsjavascript前端
    背景：在前端系统开发中，系统页面涉及到的表单组件比较多，所以进行了简单的封装。封装的包括一些Form表单组件，如下：input输入框、select下拉框、等实现效果：理论知识：表单组件官方链接：点击跳转封装组件：封装组件的思路：不封装element组件，每一个input组件绑定一个form对象，例如官网。简单封装element组件，利用for循环生成form表单的每一项el-form-item。进
  • 前端面试每日 3+1 —— 第39天 浪子神剑
    今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss
  • GDP经济社会人文民生栅格数据下载网站汇总 疯狂学习GIS
      本文为“GIS数据获取整理”专栏（https://blog.csdn.net/zhebushibiaoshifu/category_10857546.html）中第八篇独立博客，因此本文全部标题均由“8”开头。本文对目前主要的GDP、社会与经济数据获取网站加以整理与介绍，若需其它GIS领域数据（如遥感影像数据、气象数据、土地土壤数据、农业数据等），大家可以点击上方专栏查看，也可以看这一篇汇总文
  • 【MySQL】MySQL数据库如何改名 武昌库里写JAVA 面试题汇总与解析springbootvue.jssqljava学习
    MySQL建库授权语句https://www.jianshu.com/p/2237a9649ceeMySQL数据库改名的三种方法https://www.cnblogs.com/gomysql/p/3584881.htmlMySQL安全修改数据库名几种方法https://blog.csdn.net/haiross/article/details/51282417MySQL重命名数据库https://
  • 前端数据库：IndexedDB从基础到高级使用指南
    文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.
  • 【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三） 笙囧同学 java前端状态模式
    核心功能设计用户管理系统用户管理是整个系统的基础，我设计了完整的用户生命周期管理：用户注册流程验证失败验证通过验证失败验证通过用户名已存在用户名可用失败成功用户访问注册页面填写注册信息前端表单验证显示错误提示提交到后端后端数据验证返回错误信息用户名唯一性检查提示用户名重复密码加密处理保存用户信息保存成功?显示系统错误注册成功跳转登录页面登录认证机制深度解析我实现了一套企业级的多层次安全认证机制：认
  • 从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战
    作者简介：笙囧同学，中科院计算机大模型方向硕士，全栈开发爱好者联系方式：[email protected]各大平台账号：笙囧同学座右铭：偷懒是人生进步的阶梯前言在AI技术飞速发展的今天，如何将前沿的大模型技术与实际应用相结合，一直是我们开发者关注的焦点。今天，笙囧同学将带大家从零开始，构建一个基于GigaChatAI的艺术创作平台，实现React前端+Django后端的完整全栈解决方案。这不仅仅是
  • 14.tornado操作之应用Websocket协议实现聊天室功能 孤寒者 Tornado框架从入门到实战websockettornado聊天室功能实现python
    目录：每篇前言：1.什么是WebSocket（1）定义（2）优点（3）和HTTP对比（4）适用场景2.WebSocket关键方法3.本tornado项目中使用WebSocket（1）准备一个聊天室的页面：第一步：编写视图：第二步：编写接口：（app.py中加入以下接口！）第三步：编写前端页面：测试接口——响应OK！（2）使用WebSocket：（3）聊天室的聊天功能的最终实现：第一步：战前准备第二
  • 为什么学习Web前端一定要掌握JavaScript？ web前端学习指南
    为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。
  • 小架构step系列25：错误码 秋千码途 架构java
    1概述一个系统中，可能产生各种各样的错误，对这些错误进行编码。当错误发生时，通过这个错误码就有可能快速判断是什么错误，不一定需要查看代码就可以进行处理，提高问题处理效率。有了统一的错误码，还可以标准化错误信息，方便把错误信息纳入文档管理和对错误信息进行国际化等。没有错误码的管理，开发人员就会按自己的理解处理这些错误。有些直接把堆栈直接反馈到前端页面上，使用看不懂这些信息体验很差，也暴露了堆栈信息有
  • Java朴实无华按天计划从入门到实战（强化速战版-66天） 岫珩 Java后端java开发语言学习Java时间安排学习计划
    致敬读者感谢阅读笑口常开生日快乐⬛早点睡觉博主相关博主信息博客首页专栏推荐活动信息文章目录Java朴实无华按天计划从入门到实战（强化速战版-66天）1.基础（18）1.1JavaSE核心（5天）1.2数据库与SQL（5天）1.3前端基础（8天）2.进阶（17天）2.1JavaWeb核心（5天）2.2Mybatis与Spring全家桶（6天）2.3中间件入门（4天）2.4实践项目（2天）3.高阶（1
  • 《跨域资源共享CORS的深层逻辑与前端实践精要》
    不同源头的资源交互已成为常态，而跨域资源共享（CORS）正是支撑这种交互的隐形架构。现代Web安全体系中平衡开放与防护的精妙设计。理解CORS的深层逻辑，不仅能解决实际开发中的跨域难题，更能触及网络安全与资源流通的核心矛盾，为前端工程师构建稳健的应用提供底层认知支撑。跨域资源共享的诞生，源于网络安全与应用发展的必然冲突。浏览器的同源策略，作为早期网络安全的基石，通过限制不同源文档的交互，有效阻挡了
  • 深入了解 Kubernetes（k8s）：从概念到实践
    目录一、k8s核心概念二、k8s的优势三、k8s架构组件控制平面组件节点组件四、k8s+docker运行前后端分离项目的例子1.准备前端项目2.准备后端项目3.创建k8s部署配置文件4.部署应用到k8s集群在当今云计算和容器化技术飞速发展的时代，Kubernetes（简称k8s）已成为容器编排领域的事实标准。无论是互联网巨头、传统企业还是初创公司，都在广泛采用k8s来管理和部署容器化应用。本文将带
  • 移动端适配rem方案 简单的码农
    1.rem+动态html的font-size1.rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的font-size尺寸。2.比如如下案例：设置一个盒子的宽度是2rem；设置不同的屏幕上html的font-size不同；image这样在开发中，我们只需要考虑两个问题：问题一：针对不同的屏幕，设置html不同的font-s
  • Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录 二倍速播放 前端vue.js
    1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于：搜索引擎优化(SEO)：初始HTML响应仅包含一个根div元素，实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎（如Google）能够执行部分JavaScript，但其抓取效率和稳定性不如直接获取完整HTML。非
  • redis反弹shell时kali无法接收回弹的解决方法 显哥无敌 shellredis
    无法接受回谈大概率是bash命令写的不对，那个crontab中间的星号个数是有意义的，不是随便加的，下面贴一下crontab的基本用法https://www.cnblogs.com/zhoading/p/11572630.html{minute}{hour}{day-of-month}{month}{day-of-week}{full-path-to-shell-script}如果是要cronta
  • native.js设置可缩放的webview并隐藏缩放控件 Nanayai
    需求明确:webview页面可以手指缩放,并且不要那个原生控件;实现思路:1.使用h5+封装好的方法:设置scalable属性,并在html中设置meta标签:user-scalable=yes或不设置,minimum-scale和maximum-scale需要注意不要都设为1:mui.openWindow({url:"someThing",id:"someThing",styles:{scala
  • 大厂都在用的前端缓存策略，你掌握了吗？ AI架构全栈开发实战笔记 前端缓存ai
    大厂都在用的前端缓存策略，你掌握了吗？关键词：前端缓存、HTTP缓存、ServiceWorker、CDN缓存、缓存策略、性能优化、浏览器缓存摘要：本文将深入探讨前端开发中常用的缓存策略，从浏览器缓存到ServiceWorker，从HTTP缓存头到CDN缓存，全面解析大厂都在使用的高效缓存技术。通过生动的比喻和实际代码示例，帮助开发者理解并掌握这些提升Web应用性能的关键技术。背景介绍目的和范围本文
  • Redis反弹Shell 波吉爱睡觉 web安全#未授权访问漏洞#SSRFredis网络安全web安全
    这里我来总结几种Redis反弹Shell的方法一、利用Redis写WebShell前提条件开了web服务器，并且知道路径，还需要有文件读写增删改查的权限条件比较苛刻，但是满足条件上传就会简单一点，我们直接将文件写入www目录下，完了使用工具连接即可。语句：redis:6379>configsetdir/var/www/html/redis:6379>configsetdbfilenameshell
  • 26. 什么是雪碧图，作用和原理了解吗 yqcoder 前端面试-CSScss前端html
    总结小图合成一张，使用background来使用，减少资源请求一、什么是雪碧图？雪碧图（CSSSprite）是一种前端优化技术，指的是将多个小图标合并成一张大图，通过CSS控制显示其中的某一部分。它常用于网站中图标、按钮等小图较多的场景。二、雪碧图的作用作用说明✅减少HTTP请求次数合并多个图片为一张图，减少请求资源数✅提升页面加载速度尤其在图片较多时效果明显✅避免图片加载闪烁鼠标悬停切换图片时不
  • H5UI微信小程序前端框架实战指南 ai
    本文还有配套的精品资源，点击获取简介：H5UI是一个为微信小程序开发设计的前端框架，基于H5技术，提供简洁高效的组件库。框架集成了丰富的UI元素，如按钮、表格、导航栏等，简化了界面布局和交互的实现。通过安装、引入、使用组件和事件绑定四个步骤，开发者可以轻松构建功能齐全的应用。了解性能优化等注意事项对于高效开发同样重要。1.微信小程序前端开发框架介绍微信小程序概述微信小程序是微信官方推出的一种无需下
  • Windows下Oracle安装图解 叫我老村长
    Windows下Oracle安装图解----oracle-win-64-11g详细安装步骤一、Oracle下载官方下地址http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.htmlwin32位操作系统下载地址：http://download.oracle.com/otn/nt/oracle11g
  • 辗转相处求最大公约数 沐刃青蛟 C++漏洞
    无言面对”江东父老“了，接触编程一年了，今天发现还不会辗转相除法求最大公约数。惭愧惭愧！   为此，总结一下以方便日后忘了好查找。   1.输入要比较的两个数a,b   忽略：2.比较大小（因为后面要的是大的数对小的数做%操作）   3.辗转相除（用循环不停的取余，如a%b,直至b=0）   4.最后的a为两数的最大公约数 &
  • F5负载均衡会话保持技术及原理技术白皮书 bijian1013 F5负载均衡
    一.什么是会话保持？        在大多数电子商务的应用系统或者需要进行用户身份认证的在线系统中，一个客户与服务器经常经过好几次的交互过程才能完成一笔交易或者是一个请求的完成。由于这几次交互过程是密切相关的，服务器在进行这些交互过程的某一个交互步骤时，往往需要了解上一次交互过程的处理结果，或者上几步的交互过程结果，服务器进行下
  • Object.equals方法：重载还是覆盖 Cwind javagenericsoverrideoverload
    本文译自StackOverflow上对此问题的讨论。 原问题链接   在阅读Joshua Bloch的《Effective Java（第二版）》第8条“覆盖equals时请遵守通用约定”时对如下论述有疑问： “不要将equals声明中的Object对象替换为其他的类型。程序员编写出下面这样的equals方法并不鲜见，这会使程序员花上数个小时都搞不清它为什么不能正常工作：” pu
  • 初始线程 15700786134
          暑假学习的第一课是讲线程，任务是是界面上的一条线运动起来。            既然是在界面上，那必定得先有一个界面，所以第一步就是，自己的类继承JAVA中的JFrame，在新建的类中写一个界面，代码如下： public class ShapeFr
  • Linux的tcpdump 被触发 tcpdump
    用简单的话来定义tcpdump，就是：dump the traffic on a network，根据使用者的定义对网络上的数据包进行截获的包分析工具。 tcpdump可以将网络中传送的数据包的“头”完全截获下来提供分析。它支 持针对网络层、协议、主机、网络或端口的过滤，并提供and、or、not等逻辑语句来帮助你去掉无用的信息。 实用命令实例 默认启动 tcpdump 普通情况下，直
  • 安卓程序listview优化后还是卡顿 肆无忌惮_ ListView
    最近用eclipse开发一个安卓app，listview使用baseadapter，里面有一个ImageView和两个TextView。使用了Holder内部类进行优化了还是很卡顿。后来发现是图片资源的问题。把一张分辨率高的图片放在了drawable-mdpi文件夹下，当我在每个item中显示，他都要进行缩放，导致很卡顿。解决办法是把这个高分辨率图片放到drawable-xxhdpi下。 &nb
  • 扩展easyUI tab控件，添加加载遮罩效果 知了ing jquery
    (function () { $.extend($.fn.tabs.methods, { //显示遮罩 loading: function (jq, msg) { return jq.each(function () { var panel = $(this).tabs(&
  • gradle上传jar到nexus 矮蛋蛋 gradle
    原文地址： https://docs.gradle.org/current/userguide/maven_plugin.html configurations {     deployerJars } dependencies {     deployerJars "org.apache.maven.wagon
  • 千万条数据外网导入数据库的解决方案。 alleni123 sqlmysql
    从某网上爬了数千万的数据，存在文本中。 然后要导入mysql数据库。 悲剧的是数据库和我存数据的服务器不在一个内网里面。。 ping了一下， 19ms的延迟。 于是下面的代码是没用的。 ps = con.prepareStatement(sql); ps.setString(1, info.getYear())............; ps.exec
  • JAVA IO InputStreamReader和OutputStreamReader 百合不是茶 JAVA.io操作 字符流
    这是第三篇关于java.io的文章了，从开始对io的不了解-->熟悉--->模糊，是这几天来对文件操作中最大的感受，本来自己认为的熟悉了的，刚刚在回想起前面学的好像又不是很清晰了，模糊对我现在或许是最好的鼓励 我会更加的去学 加油！： JAVA的API提供了另外一种数据保存途径，使用字符流来保存的，字符流只能保存字符形式的流   字节流和字符的难点：a,怎么将读到的数据
  • MO、MT解读 bijian1013 GSM
    MO= Mobile originate，上行，即用户上发给SP的信息。MT= Mobile Terminate，下行，即SP端下发给用户的信息； 上行:mo提交短信到短信中心下行:mt短信中心向特定的用户转发短信，你的短信是这样的，你所提交的短信，投递的地址是短信中心。短信中心收到你的短信后，存储转发，转发的时候就会根据你填写的接收方号码寻找路由，下发。在彩信领域是一样的道理。下行业务：由SP
  • 五个JavaScript基础问题 bijian1013 JavaScriptcallapplythisHoisting
    下面是五个关于前端相关的基础问题，但却很能体现JavaScript的基本功底。 问题1：Scope作用范围 考虑下面的代码：  (function() { var a = b = 5; })(); console.log(b); 什么会被打印在控制台上？  回答：         上面的代码会打印 5。 &nbs
  • 【Thrift二】Thrift Hello World bit1129 Hello world
    本篇，不考虑细节问题和为什么，先照葫芦画瓢写一个Thrift版本的Hello World，了解Thrift RPC服务开发的基本流程   1. 在Intellij中创建一个Maven模块，加入对Thrift的依赖，同时还要加上slf4j依赖，如果不加slf4j依赖，在后面启动Thrift Server时会报错 <dependency>
  • 【Avro一】Avro入门 bit1129 入门
    本文的目的主要是总结下基于Avro Schema代码生成，然后进行序列化和反序列化开发的基本流程。需要指出的是，Avro并不要求一定得根据Schema文件生成代码，这对于动态类型语言很有用。   1. 添加Maven依赖   <?xml version="1.0" encoding="UTF-8"?> <proj
  • 安装nginx+ngx_lua支持WAF防护功能 ronin47
    需要的软件:LuaJIT-2.0.0.tar.gz                   nginx-1.4.4.tar.gz          &nb
  • java-5.查找最小的K个元素-使用最大堆 bylijinnan java
    import java.util.Arrays; import java.util.Random; public class MinKElement { /** * 5.最小的K个元素 * I would like to use MaxHeap. * using QuickSort is also OK */ public static void
  • TCP的TIME-WAIT bylijinnan socket
    原文连接： http://vincent.bernat.im/en/blog/2014-tcp-time-wait-state-linux.html 以下为对原文的阅读笔记 说明： 主动关闭的一方称为local end，被动关闭的一方称为remote end 本地IP、本地端口、远端IP、远端端口这一“四元组”称为quadruplet，也称为socket 1、TIME_WA
  • jquery ajax 序列化表单 coder_xpf Jquery ajax 序列化
       checkbox 如果不设定值，默认选中值为on；设定值之后，选中则为设定的值   <input type="checkbox" name="favor" id="favor" checked="checked"/> $("#favor&quo
  • Apache集群乱码和最高并发控制 cuisuqiang apachetomcat并发集群乱码
    都知道如果使用Http访问，那么在Connector中增加URIEncoding即可，其实使用AJP时也一样，增加useBodyEncodingForURI和URIEncoding即可。 最大连接数也是一样的，增加maxThreads属性即可，如下，配置如下： <Connector maxThreads="300" port="8019" prot
  • websocket dalan_123 websocket
    一、低延迟的客户端-服务器 和 服务器-客户端的连接 很多时候所谓的http的请求、响应的模式，都是客户端加载一个网页，直到用户在进行下一次点击的时候，什么都不会发生。并且所有的http的通信都是客户端控制的，这时候就需要用户的互动或定期轮训的，以便从服务器端加载新的数据。   通常采用的技术比如推送和comet（使用http长连接、无需安装浏览器安装插件的两种方式：基于ajax的长
  • 菜鸟分析网络执法官 dcj3sjt126com 网络
      最近在论坛上看到很多贴子在讨论网络执法官的问题。菜鸟我正好知道这回事情.人道"人之患好为人师" 手里忍不住,就写点东西吧. 我也很忙.又没有MM,又没有MONEY....晕倒有点跑题. OK,闲话少说,切如正题. 要了解网络执法官的原理. 就要先了解局域网的通信的原理. 前面我们看到了.在以太网上传输的都是具有以太网头的数据包. 
  • Android相对布局属性全集 dcj3sjt126com android
    RelativeLayout布局android:layout_marginTop="25dip" //顶部距离android:gravity="left" //空间布局位置android:layout_marginLeft="15dip //距离左边距 // 相对于给定ID控件android:layout_above 将该控件的底部置于给定ID的
  • Tomcat内存设置详解 eksliang jvmtomcattomcat内存设置
    Java内存溢出详解   一、常见的Java内存溢出有以下三种：   1. java.lang.OutOfMemoryError: Java heap space ----JVM Heap（堆）溢出JVM在启动的时候会自动设置JVM Heap的值，其初始空间(即-Xms)是物理内存的1/64，最大空间(-Xmx)不可超过物理内存。 可以利用JVM提
  • Java6 JVM参数选项 greatwqs javaHotSpotjvmjvm参数JVM Options
    Java 6 JVM参数选项大全（中文版）   作者：Ken Wu Email: [email protected] 转载本文档请注明原文链接 http://kenwublog.com/docs/java6-jvm-options-chinese-edition.htm！   本文是基于最新的SUN官方文档Java SE 6 Hotspot VM Opt
  • weblogic创建JMC i5land weblogicjms
    进入 weblogic控制太 1.创建持久化存储 --Services--Persistant Stores--new--Create FileStores--name随便起--target默认--Directory写入在本机建立的文件夹的路径--ok 2.创建JMS服务器 --Services--Messaging--JMS Servers--new--name随便起--Pers
  • 基于 DHT 网络的磁力链接和BT种子的搜索引擎架构 justjavac DHT
    上周开发了一个磁力链接和 BT 种子的搜索引擎 {Magnet & Torrent}，本文简单介绍一下主要的系统功能和用到的技术。 系统包括几个独立的部分： 使用 Python 的 Scrapy 框架开发的网络爬虫，用来爬取磁力链接和种子； 使用 PHP CI 框架开发的简易网站； 搜索引擎目前直接使用的 MySQL，将来可以考虑使
  • sql添加、删除表中的列 macroli sql
    添加没有默认值：alter table Test add BazaarType char(1) 有默认值的添加列：alter table Test add BazaarType char(1) default(0) 删除没有默认值的列：alter table Test drop COLUMN BazaarType 删除有默认值的列：先删除约束（默认值）alter table Test DRO
  • PHP中二维数组的排序方法 abc123456789cba 排序二维数组PHP
    <?php/*** @package     BugFree* @version     $Id: FunctionsMain.inc.php,v 1.32 2005/09/24 11:38:37 wwccss Exp $*** Sort an two-dimension array by some level
  • hive优化之------控制hive任务中的map数和reduce数 superlxw1234 hivehive优化
    一、    控制hive任务中的map数: 1.    通常情况下，作业会通过input的目录产生一个或者多个map任务。 主要的决定因素有： input的文件总个数，input的文件大小，集群设置的文件块大小(目前为128M, 可在hive中通过set dfs.block.size;命令查看到，该参数不能自定义修改)；2. 
  • Spring Boot 1.2.4 发布 wiselyman spring boot
    Spring Boot 1.2.4已于6.4日发布，repo.spring.io and Maven Central可以下载(推荐使用maven或者gradle构建下载)。   这是一个维护版本，包含了一些修复small number of fixes,建议所有的用户升级。   Spring Boot 1.3的第一个里程碑版本将在几天后发布，包含许多
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他