【HTML】HTML基础知识详解【2万字+代码实例+显示效果】

大家好，我是花无缺，一个风一样的男子，热爱各种开发技术，感谢各位大佬的阅读 !
CSDN博客地址：https://blog.csdn.net/huawuque404
欢迎点赞收藏⭐ 留言加关注✅!
本文由 huawuque404 原创
每一个不曾起舞的日子都是对生命的辜负✨

欢迎来到HTML专栏，这里是专栏第一篇文章，同时也是我加入CSDN的第一篇文章，历时多天，制作精良，希望能够帮助到大家的学习！如有不周之处，请不吝赐教！

前言
一、前端三大核心技术简介
- HTML
- CSS
- JavaScript
二、HTML是什么？
- HTML标签
- HTML属性
- HTML版本
- HTML编辑器
- - 1.记事本
  - 2.VS code
  - 3.Sublime Text
  - 4.Adobe Dreamweaver
  - 5.JetBrains WebStorm
  - 使用VS code构建HTML页面
三、HTML实例
- 实例1
- 实例2
四、HTML具体知识
- SEO
- SEO三大标签
- - title：网页标题标签
  - description：网页描述标签
  - keywords：网页关键词标签
  - ico网页图标设置
- HTML注释
- 标签组成和关系
- - 组成
  - 标签关系
- 标题和段落
- - 标题标签
  - 段落
- 换行和水平线
- - 换行标签
  - 水平线标签
- 文本格式化标签
- 图像
- - 图像的基本使用
  - 图像地图
  - 图片属性
  - - src属性
    - alt属性
    - title属性
    - width和height属性
- 路径
- - 绝对路径
  - 相对路径
  - - 同级目录
    - 下级目录
    - 上级目录
- 音频标签
- 视频标签
- 超链接
- 列表
- - 无序列表
  - 有序列表
  - 自定义列表
- 表格
- - 使用
  - 表格标题和表头单元
  - 结构标签
  - 合并单元格
- 表单
- - 应用场景
  - from标签
  - input标签
  - 按钮-input
  - 按钮-button
  - select下拉菜单标签
  - textarea文本域标签
  - datalist标签
  - label标签
- 语义化标签
- - 没有语义的布局标签
  - 有语义的布局标签
- 字符实体
总结

前言

互联网技术的学习是一条看不到头的路，需要用一生去热爱，持之以恒的学习。
而目前互联网公司的两大招聘岗位则有前端工程师和后端工程师，前端便是在浏览器中人们所能看到的网页，网页的内容就是使用前端技术构建的，而网页背后的数据与网页的逻辑运行则是依靠后端技术的支撑。这就是对前端与后端最基本的认知。无论是前端还是后端的学习都是不容易的，甚至可以说是特别困难，因为两门技术栈涉及的知识面广，技术体系大，技术内容繁多，导致他们的学习都是很困难的。当然了，不管有多么困难，只要有一颗勇敢的心，热爱技术的心，再加上持之以恒的心就一定会慢慢攻克。接下来，我将会持续给大家呈现上自己的技术笔记和大家一起交流学习！

一、前端三大核心技术简介

HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。

HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素（如），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。

HTML可以嵌入如JavaScript的脚本语言，它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表（CSS）来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟（W3C）鼓励人们使用CSS替代一些用于表现的HTML元素。

CSS

层叠样式表（英语：Cascading Style Sheets，缩写：CSS；又称串样式列表、级联样式表、串接样式表、阶层式样式表）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发中。

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

JavaScript

简称JS
JavaScript（通常缩写为JS）是一门基于原型和头等函数的多范式高级解释型编程语言，它支持面向对象程序设计、指令式编程和函数式编程。它提供方法来操控文本、数组、日期以及正则表达式等。不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。它由ECMA（欧洲电脑制造商协会）通过ECMAScript实现语言的标准化。目前，它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、Firefox、Safari和Opera）所支持。

JavaScript与Java在名字和语法上都很相似，但这两门编程语言从设计之初就有很大不同。JavaScript在语言设计上主要受到了Self（一种基于原型的编程语言）和Scheme（一门函数式编程语言）的影响，在语法结构上它和C语言很相似（如if条件语句、switch语句、while循环和do-while循环等）。

对于客户端来说，JavaScript通常被实现为一门解释语言，但如今它已经可以被即时编译（JIT）。随着HTML5和CSS3语言标准的推行，它还可以用于游戏、桌面和移动应用程序的开发，以及在服务器端网络环境运行（如Node.js）。

一个完美的网页效果需要这三个技术相互配合，相辅相成

二、HTML是什么？

Hyper Text Markup Language 超文本标记语言

HTML是用来描述网页的语言，它是网页的结构，一个网页必须要有HTML作为结构支撑，这样浏览器才可以呈现出具有结构的标准的网页结构

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用一套标准化的标记标签来描述网页
HTML很容易学习

HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML标签通常也称为HTML元素

HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如和

也有单独的标签,比如
，这个标签的作用是换行

标签对中的第一个标签是开始标签，第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

HTML属性

属性是HTML元素提供的附加信息

HTML 元素可以设置属性

属性可以在元素中添加附加信息

属性放在开始标签中

属性总是以名称/值对的形式出现，比如：name=“value”。

例如：

DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>huawuque404title> head> <body> <a href="https://blog.csdn.net/huawuque404">我的博客a> body> html>

浏览器显示效果：

HTML版本

从1991年第一版HTML发布后HTML不断在更新，现在主流的HTML的版本是HTML5，HTML5不仅新增了很多特性，同时也兼容历史版本

版本发行时间

HTML 1991

HTML+ 1993

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 1.0 2000

HTML5 2012

XHTML5 2013

HTML编辑器

1.记事本

大神用的，普通人看看就好

2.VS code

官网：https://code.visualstudio.com/
是一个由微软开发的，同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器，编辑器可以安装拓展程序，提高了开发和工作的效率，结合拓展程序几乎支持所有主流的编程语言，
它免费且体积小，深受开发者的喜爱

3.Sublime Text

官网：http://www.sublimetext.com/
Sublime Text 是一个文本编辑器（收费软件，可以无限期试用），同时也是一个先进的代码编辑器。

4.Adobe Dreamweaver

官网：https://www.adobe.com/cn/products/dreamweaver.html
Adobe Dreamweaver，简称“DW”。DW是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对 HTML、CSS、JavaScript等内容的支持，设计师和程序员可以在几乎任何地方快速制作和进行网站建设。

5.JetBrains WebStorm

官网：https://www.jetbrains.com/zh-cn/webstorm/
WebStorm 是JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。

使用VS code构建HTML页面

vscode安装及配置教程：安装配置教程
按照上面的教程根据自己的需要对vscode进行配置即可使用vscode尽情的写前端了

三、HTML实例

实例1

下面是一段HTML代码

DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>花无缺title> head> <body> <h1>我的第一个标题h1> <h2>我的第二个标题h2> 我的第一个段落。p> body> html>

在浏览器的显示效果：

声明为 HTML5 文档
元素是 HTML 页面的根元素
元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8。
元素描述了文档的标题 <body> 元素包含了可见的页面内容 <h1> 元素定义一个大标题 元素定义一个段落 注：在浏览器的页面上使用键盘上的 F12 按键进入开发者模式，就可以看到组成标签。 HTML、CSS以及JavaScript的代码要在<code>web浏览器</code>中运行，才可以看到效果 常用的web浏览器：谷歌浏览器Google Chrome、微软浏览器Microsoft Edge（原IE浏览器）、火狐浏览器Firefox、欧朋浏览器Opera、苹果safari浏览器 作者用的是谷歌和Edge，这里我推荐谷歌浏览器，响应速度很快，但是谷歌浏览器也有个小毛病就是国内用户不可以登录谷歌账户，就无法随时同步浏览器的浏览记录和书签等个人信息，换设备使用会有一定麻烦 <h2>实例2</h2> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>实例2</title> </head> <body> <h4>下面是html实例演示</h4> <p> 这是一个段落。<br> 学习 HTML 最好的方式就是边学边做实验。<br> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <a href="https://blog.csdn.net/huawuque404" target="_blank">这是一个超链接,点击就可以跳转到目标网页</a>  <img src="https://img-blog.csdnimg.cn/920771cb50e842dd89d0f181f30c0e9a.png"> </p> </body> </html> </code></pre> 浏览器显示效果： <a href="http://img.e-com-net.com/image/info8/63f50461c70442eea922b1e9b91505f9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/63f50461c70442eea922b1e9b91505f9.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第6张图片" width="650" height="777" style="border:1px solid black;"></a> <hr> <h1>四、HTML具体知识</h1> <h2>SEO</h2> SEO(Search Engine Optimization):搜索引擎优化 作用:让网站在搜索引擎上的排名靠前 提示SEO的常见方法: <ol> <li>竞价排名</li> <li>将网页制作成html后缀</li> <li>标签语义化(在合适的地方使用合适的标签)</li> <li>…</li> </ol> <h2>SEO三大标签</h2> <h3>title：网页标题标签</h3> 例如： <pre><code class="prism language-html"><title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title> </code></pre> <h3>description：网页描述标签</h3> 例如： <pre><code class="prism language-html"><meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"> </code></pre> <h3>keywords：网页关键词标签</h3> 例如： <pre><code class="prism language-html"><meta name="Keywords" content="网上购物，网上商城，家电，手机，电脑，服装，居家，母婴，美妆，个护，食品，生鲜，京东"> </code></pre> <h3>ico网页图标设置</h3> ico图标即浏览器标签栏上显示的图像 <a href="http://img.e-com-net.com/image/info8/e4d987cf7bad41798e7e0470df5a79b6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e4d987cf7bad41798e7e0470df5a79b6.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第7张图片" width="500" height="218" style="border:1px solid black;"></a> 例如： <pre><code class="prism language-html"><link rel="shortcut icon" href="ico图标路径" type="image/x-icon"> </code></pre> <h2>HTML注释</h2> 注释的格式：<code></code> 例如： <pre><code class="prism language-html"><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>huawuque404</title> </head> <body> <p>这是一个帅哥</p>  <p>这是一个美女</p> </body> </html> </code></pre> 浏览器显示效果： <a href="http://img.e-com-net.com/image/info8/57d4ac40df0c41bb9638bcce6687678f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/57d4ac40df0c41bb9638bcce6687678f.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第8张图片" width="500" height="241" style="border:1px solid black;"></a> 注释的作用： 为代码添加的具有理解性、描述性的信息，主要用来帮助前端开发人员理解代码 <code>浏览器执行代码时会忽略所有的注释</code> <h2>标签组成和关系</h2> <h3>组成</h3> HTML标签的结构图 <a href="http://img.e-com-net.com/image/info8/6bca2c9fa6cc43f28a74fc9ce67e6b00.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6bca2c9fa6cc43f28a74fc9ce67e6b00.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第9张图片" width="650" height="228" style="border:1px solid black;"></a> 结构说明： <ol> <li>标签由< > / 英文单词或字母组成，并且把标签中<>包括起来的英文单词或字母称为标签名</li> <li>常见的标签由两部分组成，即双标签，前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容，如</li> <li>少数标签只由一个部分组成，即单标签，自成一体，无法包裹内容，如 </li> </ol> <h3>标签关系</h3> <ul> <li>父子关系(嵌套关系)</li> </ul> <pre><code class="prism language-html"><head> <title></title> </head> </code></pre> <ul> <li>兄弟关系(并列关系)</li> </ul> <pre><code class="prism language-html"><head></head> <body></body> </code></pre> <h2>标题和段落</h2> <h3>标题标签</h3> <pre><code class="prism language-html"><h1>1级标题</h1> <h2>2级标题</h2> <h3>3级标题</h3> <h4>4级标题</h4> <h5>5级标题</h5> <h6>6级标题</h6> </code></pre> 例如： <pre><code class="prism language-html"><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>huawuque404</title> </head> <body> <h1>1级标题</h1> <h2>2级标题</h2> <h3>3级标题</h3> <h4>4级标题</h4> <h5>5级标题</h5> <h6>6级标题</h6> </body> </html> </code></pre> 浏览器显示效果： <a href="http://img.e-com-net.com/image/info8/233c56164a054767a16f310e77d311e8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/233c56164a054767a16f310e77d311e8.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第10张图片" width="500" height="561" style="border:1px solid black;"></a> 特点： <ul> <li>文字都有加粗</li> <li>文字都有变大，并且从h1到h6文字逐渐减小</li> <li>独占一行，自动换行</li> </ul> 注意： 请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。 搜索引擎使用标题为您的网页的结构和内容编制索引。 因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。 应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。 <h3>段落</h3> HTML段落可以把HTML文档分割成若干段落 <pre><code class="prism language-html"><p>段落内容</p> </code></pre> 例如： <pre><code class="prism language-html"><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>huawuque404</title> </head> <body> <p>这是第一段，前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。</p> <p>这是第二段，前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。 </p> <p>这是第三段，前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5，Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。</p> </body> </html> </code></pre> 浏览器显示效果： <a href="http://img.e-com-net.com/image/info8/49b78ce3aff44896868694596efdab07.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/49b78ce3aff44896868694596efdab07.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第11张图片" width="650" height="344" style="border:1px solid black;"></a> 特点： <ul> <li>不同段落之间存在间隙</li> <li>浏览器会自动地在段落的前后添加空行</li> <li>段落最后一行独占一行</li> </ul> <h2>换行和水平线</h2> <h3>换行标签</h3> 如果希望在不产生一个新段落的情况下进行换行（新行），可以使用 标签，换行标签是单标签 <pre><code class="prism language-html"><br> </code></pre> 让文字强制换行 <pre><code class="prism language-html"><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>huawuque404</title> </head> <body> <p> 这是一句话这是一句话  这句话之后会换行<br> 这是一句话这是一句话这是一句话 </p> </body> </html> </code></pre> 浏览器显示效果 <a href="http://img.e-com-net.com/image/info8/7e2a023f50c2452f9a0ec244d7a39fcf.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7e2a023f50c2452f9a0ec244d7a39fcf.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第12张图片" width="500" height="208" style="border:1px solid black;"></a> <code>注：为使页面更加简洁，下面内容的代码举例我会只保留<body>里面的内容,省略<html>等标签</code> <h3>水平线标签</h3> 水平线标签是单标签 <pre><code class="prism language-html"><hr> </code></pre> 在网页上显示一条水平线 例如： <pre><code class="prism language-html"><body> <p>这是第一个段落</p> <hr> <p>这是第二个段落</p> <hr> </body> </code></pre> 浏览器显示效果： <a href="http://img.e-com-net.com/image/info8/8b367c665fb1493d87f5435719df52a3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8b367c665fb1493d87f5435719df52a3.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第13张图片" width="500" height="297" style="border:1px solid black;"></a> <h2>文本格式化标签</h2> HTML可定义很多供格式化输出的元素，比如粗体和斜体，文本格式化标签可以使标签内的文本产生不同的文字效果 <table> <thead> <tr> <th>标签</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td><code></code></td> <td>加粗</td> </tr> <tr> <td><code></code></td> <td>下划线</td> </tr> <tr> <td><code></code></td> <td>倾斜</td> </tr> <tr> <td><code><s></s></code></td> <td>删除线</td> </tr> <tr> <td><code></code></td> <td>加粗</td> </tr> <tr> <td><code><ins></ins></code></td> <td>下划线</td> </tr> <tr> <td><code></code></td> <td>倾斜</td> </tr> <tr> <td><code><del></del></code></td> <td>删除</td> </tr> </tbody> </table> 推荐使用后四个文本格式化标签，因为它们更具有语义性 <blockquote> 术语解释： “语义” 语言所蕴含的意义就是语义(semantic)。简单的说，符号是语言的载体。符号本身没有任何意义，只有被赋予含义的符号才能够被使用，这时候语言就转化为了信息，而语言的含义就是语义。语义可以简单地看作是数据所对应的现实世界中的事物所代表的概念的含义，以及这些含义之间的关系，是数据在某个领域上的解释和逻辑表示。 </blockquote> 例如： <pre><code class="prism language-html"><body> <p>  <b>定义粗体文本</b><br> <em>定义斜体文字</em><br> <i>定义斜体字</i><br> <small>定义小号字</small><br> <big>定义大号字</big><br> <strong>定义加重语气</strong><br><br> 花无缺<sub>定义下标字</sub><br><br> 花无缺<sup>定义上标字</sup><br><br> <ins>定义下划线</ins><br> <del>定义删除字</del><br> <s>与del同效果</s><br> <strike>与del同效果</strike><br> <u>下划线</u> </p> </body> </code></pre> 浏览器显示效果： <a href="http://img.e-com-net.com/image/info8/0229a73cdc94451f8dc046cf6d1ff407.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0229a73cdc94451f8dc046cf6d1ff407.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第14张图片" width="500" height="678" style="border:1px solid black;"></a> 此外HTML中还提供了计算机输出标签 和 引用标签 计算机输出标签： <table> <thead> <tr> <th>标签</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td><code><code></code></code></td> <td>定义计算机代码</td> </tr> <tr> <td><code><samp></samp></code></td> <td>定义键盘码</td> </tr> <tr> <td><code><tt></tt></code></td> <td>定义打字机代码</td> </tr> <tr> <td><code><var></var></code></td> <td>定义变量</td> </tr> <tr> <td><code><pre></pre></code></td> <td>定义预格式文本</td> </tr> </tbody> </table> 例如： <pre><code class="prism language-html"><body> <p> <code> Hello World! </code><br> <samp>shift</samp><br> <tt>打字机代码</tt><br> <var>定义变量</var><br> <pre> pre标签内的格式不会改变花无缺花无缺花无缺 </pre> </p> </body> </code></pre> 浏览器显示效果： <a href="http://img.e-com-net.com/image/info8/c5e7b4203af34f299d844cf8b8aa21b9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c5e7b4203af34f299d844cf8b8aa21b9.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第15张图片" width="500" height="521" style="border:1px solid black;"></a> 引用标签： <table> <thead> <tr> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td><code><abbr></abbr></code></td> <td>定义缩写</td> </tr> <tr> <td><code><acronym></acronym></code></td> <td>定义首字母缩写</td> </tr> <tr> <td><code><address></address></code></td> <td>定义地址</td> </tr> <tr> <td><code><bdo></bdo></code></td> <td>定义文字方向</td> </tr> <tr> <td><code><blockqute></blockqute></code></td> <td>定义长的引用</td> </tr> <tr> <td><code><q></q></code></td> <td>定义短的引用</td> </tr> <tr> <td><code><cite></cite></code></td> <td>定义引用、印证</td> </tr> <tr> <td><code><dfn></dfn></code></td> <td>定义一个定义项目</td> </tr> </tbody> </table> 例如： <pre><code class="prism language-html"><body> The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.<br> <address> Written by <a href="huawuque404@163.com">huawuque404</a>.<br> Visit us at:<br> Example.com<br> fand 564, jack<br> CHINA </address> <p> 如果你的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)； </p> <bdo dir="rtl"> Here is some Hebrew text </bdo> <br> <blockquote>长的引用</blockquote> <q>短引用</q><br> <cite>引用,印证</cite><br> <dfn>定义一个定义项目</dfn> </body> </code></pre> 浏览器显示效果： <a href="http://img.e-com-net.com/image/info8/6ad824e558464e21b99bbab3bcb95200.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6ad824e558464e21b99bbab3bcb95200.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第16张图片" width="650" height="447" style="border:1px solid black;"></a> <h2>图像</h2> <h3>图像的基本使用</h3> <pre><code class="prism language-html"><img src = "图片路径" alt = "无法加载图片时显示的文字信息"> </code></pre> 代码中src和alt为标签属性，src和alt为属性名，“”中的内容为属性值 img标签如果要展示图片效果，则利用标签属性进行设置 例如： <pre><code class="prism language-html"><body> <img src="https://wx1.sinaimg.cn/mw2000/006xNq9cgy1h66kfz733aj30j609i3yz.jpg" alt="这是帅气的作者本人"> </body> </code></pre> 浏览器显示效果： <a href="http://img.e-com-net.com/image/info8/afbd0ac7f32741d3bd5a72ef2b53382c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/afbd0ac7f32741d3bd5a72ef2b53382c.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第17张图片" width="650" height="400" style="border:1px solid black;"></a> 如果图片由于网络不稳定等原因无法加载出图片，则就会在对应位置显示alt属性中的文字 例如以上例子，当无法加载图片时浏览器的显示效果为： <a href="http://img.e-com-net.com/image/info8/2718241beb87419986025bef993019b4.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2718241beb87419986025bef993019b4.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第18张图片" width="500" height="179" style="border:1px solid black;"></a> 注意： <ul> <li>标签的属性在开始标签的内部</li> <li>标签上可以同时存在多个标签</li> <li>属性之间用空格隔开</li> <li>属性没有顺序要求</li> </ul> <h3>图像地图</h3> HTML图像地图<map>标签和<area> <map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。 <map>中的 usemap 属性可引用中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。 area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。 <area> 标签定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）。 <area> 元素始终嵌套在 <map> 标签内部。 注释： <img> 标签中的 usemap 属性与 <map> 元素中的 name 相关联，以创建图像与映射之间的关系。 例如： <pre><code class="prism language-html"><body> <p>点击太阳或其他行星，注意变化：</p> <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map> </body> </code></pre> <h3>图片属性</h3> <h4>src属性</h4> 属性值：图片的文件路径 <h4>alt属性</h4> 属性值：图片的替换文本 作用：当图片无法正常加载显示时，替代图片显示出文字 <h4>title属性</h4> 属性值：提示文本 作用：当鼠标悬停在图片上时，显示出文字 注意：title属性不仅仅用于图片标签，还可以用于其他标签 <h4>width和height属性</h4> 属性值：图片的宽度和高度（数字） 注意： <ul> <li>如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）</li> <li>如果同时设置了width和height两个，则图片可能会根据设置产生变形</li> </ul> <h2>路径</h2> 路径就是文件的位置 比如某个本地计算机的D盘的哪个文件的路径 <code>C:\Users\huawuque404\Desktop\前端code\picture\cat.jpg</code> 或者在某个网络服务器的某个文件的路径 <code>https://img-blog.csdnimg.cn/803b27ae38ed495d8d28859c68b4c3e5.png</code> 而路径又分为<code>绝对路径</code>和<code>相对路径</code> <h3>绝对路径</h3> 目录下的绝对位置，可直接到达目标位置，通常从根目录开始的路径 例如： 1.根目录开头：<code>C:\Users\huawuque404\Desktop\前端code\picture\cat.jpg</code> 2.完整的网络地址：<code>https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png</code> <h3>相对路径</h3> 从当前文件出发的文件路径，可分为同级、下级，上级目录来理解和区分 我们以一个图片文件为例 <h4>同级目录</h4> 当前文件和目标文件在同一目录(文件夹)中 使用路径的代码： <pre><code class="prism language-html"><img src = "目标图片.jpg"> </code></pre> 或 <pre><code class="prism language-html"><img src = "./目标图片.jpg"> </code></pre> ./ 表示当前目录(文件) <h4>下级目录</h4> 目标文件在当前目录的下一级目录(子文件)中，则要进入到下一级目录中 使用路径的代码： <pre><code class="prism language-html"><img src = "目标图片所在的文件夹/目标图片.jpg"> </code></pre> <h4>上级目录</h4> 目标文件在当前目录的上一级目录(父文件)中，则要返回到上一级目录 使用路径的代码： <pre><code class="prism language-html"><img src = "../目标图片所在的文件夹/目标图片.jpg"> </code></pre> 返回一次上层目录使用一次 …/ 例入目标文件在当前文件的上三层目录，则要在使用路径前加三个…/ <code>../../../目标文件所在的文件夹/目标文件</code> <h2>音频标签</h2> <pre><code class="prism language-html"><audio src = "音频文件路径" controls></audio> </code></pre> 属性： <table> <thead> <tr> <th>属性</th> <th>功能</th> </tr> </thead> <tbody> <tr> <td>src</td> <td>音频路径</td> </tr> <tr> <td>controls</td> <td>显示播放的控件</td> </tr> <tr> <td>autoplay</td> <td>自动播放(部分浏览器不支持)</td> </tr> <tr> <td>loop</td> <td>循环播放</td> </tr> </tbody> </table> 注意：目前HTML只支持三种音频格式：mp3、wav、ogg 例如： <pre><code class="prism language-html"><body> <audio src="http://m701.music.126.net/20220915004706/ddd5d1e6f42f43cbb095d307e3ea971b/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/14096503516/68d0/e4dd/0407/77ef28fb12e677f5b79754c73f73cbd7.mp3" controls> </audio> </body> </code></pre> 浏览器显示效果： <a href="http://img.e-com-net.com/image/info8/f6a059b62c6647f7905819461b14176d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f6a059b62c6647f7905819461b14176d.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第19张图片" width="500" height="230" style="border:1px solid black;"></a> <h2>视频标签</h2> <pre><code class="prism language-html"><video src = "视频文件路径" controls></video> </code></pre> 属性： <table> <thead> <tr> <th>属性</th> <th>功能</th> </tr> </thead> <tbody> <tr> <td>src</td> <td>视频路径</td> </tr> <tr> <td>controls</td> <td>显示播放的控件</td> </tr> <tr> <td>autoplay</td> <td>自动播放(谷歌浏览器中需配合muted实现静音播放)</td> </tr> <tr> <td>loop</td> <td>循环播放</td> </tr> </tbody> </table> 注意：HTML目前只支持三种视频格式：mp4、webm、ogg 例如： <pre><code class="prism language-html"><body> <video src="https://f.video.weibocdn.com/u0/PMKZle78gx07Z4EAHw3S010412046cfg0E020.mp4?label=mp4_1080p&template=1920x1080.25.0&media_id=4811757949222933&tp=8x8A3El:YTkl0eM8&us=0&ori=1&bf=2&ot=h&ps=3lckmu&uid=3ZoTIp&ab=,8143-g0,8013-g0,3601-g29,7598-g0&Expires=1663178348&ssig=gopQw3ve0G&KID=unistore,video" controls> </video> </body> </code></pre> 浏览器显示效果： <a href="http://img.e-com-net.com/image/info8/56c6cb60c3914b94960d5bce1b59ccf6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/56c6cb60c3914b94960d5bce1b59ccf6.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第20张图片" width="650" height="365" style="border:1px solid black;"></a> <h2>超链接</h2> 又称a标签、锚链接 点击之后，从当前页面跳转到另一个页面 <pre><code class="prism language-html"><a href = "跳转的网页地址">超链接</a> </code></pre> 例如： <pre><code class="prism language-html"><a href="https://www.baidu.com">跳转到百度</a> </code></pre> 如果不设置跳转，则可以把链接路径设置为#(空链接) 属性：target <table> <thead> <tr> <th>取值</th> <th>效果</th> </tr> </thead> <tbody> <tr> <td>_self</td> <td>默认值，在当前窗口中跳转(覆盖原网页)</td> </tr> <tr> <td>_blank</td> <td>在新窗口中跳转(保留原网页)</td> </tr> </tbody> </table> 例如： <pre><code class="prism language-html"><body> <a href="https://blog.csdn.net/huawuque404" target="_blank">一个超链接</a> </body> </code></pre> 浏览器显示效果： <a href="http://img.e-com-net.com/image/info8/8fb6a081fd624e8a8224576c69afbc71.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8fb6a081fd624e8a8224576c69afbc71.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第21张图片" width="500" height="182" style="border:1px solid black;"></a> <h2>列表</h2> <h3>无序列表</h3> 在网页中表示一组无顺序之分的列表 标签组成： <table> <thead> <tr> <th>标签名</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>ul</td> <td>表示无序列表的整体，用于包裹li标签</td> </tr> <tr> <td>li</td> <td>表示无序标签的每一项，用于包含每一行的内容</td> </tr> </tbody> </table> 列表的每一项前默认显示圆点标识 注意： <ul> <li>ul标签中只允许包含li标签</li> <li>li标签可以包含任何内容</li> </ul> <h3>有序列表</h3> 在网页中表示一组有顺序之分的列表 标签组成： <table> <thead> <tr> <th>标签名</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>ol</td> <td>表示有序列表的整体，用于包裹li标签</td> </tr> <tr> <td>li</td> <td>表示有序标签的每一项，用于包含每一行的内容</td> </tr> </tbody> </table> 列表的每一项前默认显示序号标识 注意： <ul> <li>ol标签中只允许包含li标签</li> <li>li标签可以包含任何内容</li> </ul> <h3>自定义列表</h3> <table> <thead> <tr> <th>标签名</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>dl</td> <td>表示自定义列表的整体，用于包裹dt/dd标签</td> </tr> <tr> <td>dt</td> <td>表示自定义列表的主题</td> </tr> <tr> <td>dd</td> <td>表示自定义列表的针对主题的每一项内容</td> </tr> </tbody> </table> dd前会默认显示缩进效果 注意： <ul> <li>dl标签中只允许包含dt/dd标签</li> <li>dt/dd标签可以包含任意内容</li> </ul> 例如： <pre><code class="prism language-html"><body> <ul> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> </ul> <ol> <li>无序列表</li> <li>无序列表</li> <li>无序列表</li> </ol> <dl>自定义列表的整体 <dt>自定义列表的主题1 <dd>自定义列表</dd> <dd>自定义列表</dd> <dd>自定义列表</dd> </dt> <dt>自定义列表的主题2 <dd>自定义列表</dd> <dd>自定义列表</dd> <dd>自定义列表</dd> </dt> </dl> </body> </code></pre> 浏览器显示效果： <a href="http://img.e-com-net.com/image/info8/85e432ef769c4d5aa3b3ba8d570be516.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/85e432ef769c4d5aa3b3ba8d570be516.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第22张图片" width="500" height="668" style="border:1px solid black;"></a> <h2>表格</h2> <h3>使用</h3> 在网页中以行+列的单元格的方式整齐展示数据 标签： <table> <thead> <tr> <th>标签名</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>table</td> <td>表格整体，可用于包裹多个tr</td> </tr> <tr> <td>tr</td> <td>表格每行，可用于包裹td</td> </tr> <tr> <td>td</td> <td>表格单元格，可用于包裹内容</td> </tr> </tbody> </table> 标签的嵌套关系：table>tr>td 属性： <table> <thead> <tr> <th>属性名</th> <th>属性值</th> <th>效果</th> </tr> </thead> <tbody> <tr> <td>border</td> <td>数字</td> <td>边框宽度</td> </tr> <tr> <td>width</td> <td>数字</td> <td>表格宽度</td> </tr> <tr> <td>height</td> <td>数字</td> <td>表格高度</td> </tr> </tbody> </table> 注意：实际开发时针对于样式效果推荐使用CSS设置 <blockquote> 术语解释: “CSS” 级联样式表 Cascading Style Sheet </blockquote> 例如： <pre><code class="prism language-html"><body> <table border="5">  <tr> <td>第一行</td> <td>单元格1</td> <td>单元格2</td> </tr>  <tr> <td>第二行</td> <td>单元格1</td> <td>单元格2</td> </tr> </table> </body> </code></pre> 浏览器显示效果： <a href="http://img.e-com-net.com/image/info8/e73ba0483e364e7188966e17d28797cf.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e73ba0483e364e7188966e17d28797cf.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第23张图片" width="500" height="250" style="border:1px solid black;"></a> <h3>表格标题和表头单元</h3> 在表格中表示整体大标题和一列小标题 标签： <table> <thead> <tr> <th>标签名</th> <th>名称</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>caption</td> <td>表格大标题</td> <td>表示表格整体大标题，默认在表格整体顶部居中位置显示</td> </tr> <tr> <td>th</td> <td>表头单元格</td> <td>表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示</td> </tr> </tbody> </table> 注意： <ul> <li>caption标签书写在table标签内部</li> <li>th标签书写在tr标签内部(用于替换td标签)</li> </ul> 例如： <pre><code class="prism language-html"><body> <table border="2"> <caption>工资表</caption> <tr> <th>员工</th> <th>工资</th> </tr> <tr> <td>花无缺</td> <td>花有缺</td> </tr> <tr> <td>50k</td> <td>60k</td> </tr> </table> </body> </code></pre> 浏览器显示效果： <a href="http://img.e-com-net.com/image/info8/8b43d88706314b9f95f0d08bea8f3247.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8b43d88706314b9f95f0d08bea8f3247.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第24张图片" width="500" height="304" style="border:1px solid black;"></a> <h3>结构标签</h3> 让表格的内容结构分组，突出表格的不同部分，使语义更清晰，利于浏览器的解析与开发人员的维护 <table> <thead> <tr> <th>标签</th> <th>名称</th> </tr> </thead> <tbody> <tr> <td>thead</td> <td>表格头部</td> </tr> <tr> <td>tbody</td> <td>表格主体</td> </tr> <tr> <td>tfoot</td> <td>表格底部</td> </tr> </tbody> </table> 注意： <ul> <li>表格结构标签内部用于包裹tr标签</li> <li>表格的结构标签可以省略</li> </ul> 例如： <pre><code class="prism language-html"><body> <table border="1"> <thead> <tr> <th>月份</th> <th>入账</th> </tr> </thead> <tbody> <tr> <td>一月</td> <td>200</td> </tr> <tr> <td>五月</td> <td>80</td> </tr> </tbody> <tfoot> <tr> <td>三月</td> <td>180</td> </tr> </tfoot> </table> </body> </code></pre> 浏览器显示效果： <a href="http://img.e-com-net.com/image/info8/1b4968f3587a4457a838c330f297faa9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1b4968f3587a4457a838c330f297faa9.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第25张图片" width="500" height="318" style="border:1px solid black;"></a> <h3>合并单元格</h3> 将水平或垂直的多个单元格合并成一个单元格 合并单元格步骤： <ol> <li>明确合并哪几个单元格</li> <li>通过左上原则，确定保留谁，删除谁</li> </ol> <ul> <li>上下合并->只保留最上的，删除其他</li> <li>左右合并->只保留最左的，删除其他</li> </ul> <ol start="3"> <li>给保留的单元格进行设置：跨行合并或跨列合并</li> </ol> <table> <thead> <tr> <th>属性名</th> <th>属性值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>rowspan</td> <td>合并单元格的个数</td> <td>跨行合并，将多行的单元格垂直合并</td> </tr> <tr> <td>colspan</td> <td>合并单元格的个数</td> <td>跨列合并，将多列的单元格水平合并</td> </tr> </tbody> </table> 注意： 同一个结构标签中的单元格才能合并，部门跨结构合并(不能跨thead，tbody，tfoot) 例如： <pre><code class="prism language-html"><body> <table border="1"> <thead> <tr> <th colspan="3">嘿嘿</th> </tr> </thead> <tbody> <tr> <td>一月</td> <td>200</td> <td>14点</td> </tr> <tr> <td>五月</td> <td>80</td> <td>4点</td> </tr> </tbody> <tfoot> <tr> <td>三月</td> <td>180</td> <td>5点</td> </tr> </tfoot> </table> <br> <table border="1"> <thead> <tr> <th>月份</th> <th>入账</th> <th>时间</th> <th rowspan="3">性别</th> </tr> </thead> <tbody> <tr> <td>一月</td> <td>200</td> <td>14点</td> </tr> <tr> <td>五月</td> <td>80</td> <td>4点</td> </tr> </tbody> <tfoot> <tr> <td>三月</td> <td>180</td> <td>5点</td> </tr> </tfoot> </table> </body> </code></pre> 浏览器显示效果： <a href="http://img.e-com-net.com/image/info8/e177f38560ea49d8b3301dd4e4dc342b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e177f38560ea49d8b3301dd4e4dc342b.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第26张图片" width="500" height="516" style="border:1px solid black;"></a> <h2>表单</h2> HTML表单用于搜集不同类型的用户输入 HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。 <h3>应用场景</h3> 登录、注册、搜索、评论 <h3>from标签</h3> from标签用来定义HTML表单 例如： <pre><code class="prism language-html"><body> <form action=""> 用户名: <input type="text" name="用户名"><br> 密码: <input type="text" name="密码"> </form> </body> </code></pre> 浏览器显示效果： <a href="http://img.e-com-net.com/image/info8/100efa8e0b7345879e9b6954d794f830.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/100efa8e0b7345879e9b6954d794f830.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第27张图片" width="500" height="216" style="border:1px solid black;"></a> form标签结合input标签可以产生各种作用的表单 <h3>input标签</h3> input标签可以根据 type 属性值的不同，展示不同的效果 type属性 <table> <thead> <tr> <th>标签名</th> <th>type属性值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>input</td> <td>text</td> <td>文本框，用于输入单行文本</td> </tr> <tr> <td>input</td> <td>password</td> <td>密码框，用于输入密码</td> </tr> <tr> <td>input</td> <td>radio</td> <td>单选框，用于多选一</td> </tr> <tr> <td>input</td> <td>checkbox</td> <td>多选框，用于多选多</td> </tr> <tr> <td>input</td> <td>file</td> <td>文件选择，用于上传文件</td> </tr> <tr> <td>input</td> <td>submit</td> <td>提交按钮，用于提交</td> </tr> <tr> <td>input</td> <td>reset</td> <td>重置按钮，用于重置</td> </tr> <tr> <td>input</td> <td>button</td> <td>普通按钮，默认无功能，之后配合js添加功能</td> </tr> <tr> <td>input</td> <td>placeholder</td> <td>占位符，提示用户输入内容</td> </tr> <tr> <td>input</td> <td>name</td> <td>分组，有相同属性的单选框为一组，一组同时只能有一个被选中</td> </tr> <tr> <td>input</td> <td>checked</td> <td>默认选中</td> </tr> <tr> <td>input</td> <td>multiple</td> <td>多文件选择</td> </tr> </tbody> </table> <h3>按钮-input</h3> 在网页中显示不同功能的按钮表单控件 属性： <table> <thead> <tr> <th>标签名</th> <th>type属性值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>input</td> <td>submit</td> <td>提交按钮，点击之后提交数据给后端服务器</td> </tr> <tr> <td>input</td> <td>reset</td> <td>重置按钮，点击之后恢复表单默认值</td> </tr> <tr> <td>input</td> <td>button</td> <td>普通按钮，默认无功能，之后配合js添加功能</td> </tr> </tbody> </table> 注意： <ul> <li>如果需要实现以上按钮功能，需要配合form标签使用</li> <li>form使用方法：用form标签把表单标签一起包裹起来即可</li> <li>按钮更改字体使用value属性</li> </ul> <h3>按钮-button</h3> 在网页中显示用户点击的按钮 type属性值 <table> <thead> <tr> <th>标签名</th> <th>type属性值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>button</td> <td>submit</td> <td>提交按钮，点击之后提交数据给后端服务器</td> </tr> <tr> <td>button</td> <td>reset</td> <td>重置按钮，点击之后恢复表单默认值</td> </tr> <tr> <td>button</td> <td>button</td> <td>普通按钮，默认无功能，之后配合js添加功能</td> </tr> </tbody> </table> 注意： <ul> <li>谷歌浏览器中button默认是提交按钮</li> <li>button标签是双标签，更便于包裹其他内容：文字、图片等</li> </ul> 例如： <pre><code class="prism language-html"><body> <form action=""> 用户名: <input type="text" name="用户名" placeholder="请输入你的用户名"><br> 密码: <input type="password" name="密码" placeholder="请输入你的密码"> </form>  <form action=""> 上传文件:<input type="file" name="file"><br> 文件多选：<input type="file" name="file" multiple><br> <input type="reset"> </form>  <form action=""> <input type="radio" checked>男 <input type="radio">女 </form>  <form action=""> <input type="checkbox">初中 <input type="checkbox">高中 <input type="checkbox" checked>大学<br> <input type="submit"> </form> <form action=""> <input type="button">按钮 <button>按钮</button> </form> </body> </code></pre> 浏览器显示效果： <a href="http://img.e-com-net.com/image/info8/da810e689166457091fe603e1d3b8f52.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/da810e689166457091fe603e1d3b8f52.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第28张图片" width="500" height="454" style="border:1px solid black;"></a> Action 属性 action 属性定义在提交表单时执行的动作 向服务器提交表单的通常做法是使用提交按钮。 通常，表单会被提交到 web 服务器上的网页。 如果省略 action 属性，则 action 会被设置为当前页面。 Name 属性 如果要正确地被提交，每个输入字段必须设置一个 name 属性。 <h3>select下拉菜单标签</h3> 标签组成： <ul> <li>select标签：下拉菜单的整体</li> <li>option标签：下拉菜单的每一项</li> </ul> 常见属性： selected：下拉菜单的默认选中 例如： <pre><code class="prism language-html"><body> <form action=""> <select name="" id=""> <option value="hh">贵阳</option> <option value="hh">昆明</option> <option value="hh">深圳</option> </select> </form> </body> </code></pre> 浏览器显示效果： <a href="http://img.e-com-net.com/image/info8/c133d2dc991d4478a1247d9e31698854.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c133d2dc991d4478a1247d9e31698854.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第29张图片" width="500" height="270" style="border:1px solid black;"></a> <h3>textarea文本域标签</h3> 在网页中提供可输入多行文本的表单控件 常见属性： <ul> <li>cols：规定了文本域可见的宽度</li> <li>rows：规定了文本域可见的行数</li> </ul> 注意： <ul> <li>右下角可以拖拽改变大小</li> <li>实际开发时针对样式效果使用CSS设置</li> </ul> 例如： <pre><code class="prism language-html"><body> <textarea rows="10" cols="30"> 我是一个文本框。 </textarea> </body> </code></pre> 浏览器显示效果： <a href="http://img.e-com-net.com/image/info8/044a521b5d034147beca8a1bb1fe1c53.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/044a521b5d034147beca8a1bb1fe1c53.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第30张图片" width="500" height="394" style="border:1px solid black;"></a> <h3>datalist标签</h3> datalist 元素为 input 元素规定预定义选项列表。 用户会在他们输入数据时看到预定义选项的下拉列表。 input 元素的 list 属性必须引用 datalist 元素的 id 属性。 例如： <pre><code class="prism language-html"><body> <form action=""> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form> <body> </code></pre> 浏览器显示效果： <a href="http://img.e-com-net.com/image/info8/463e2a455fec490095223f5ea80ee304.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/463e2a455fec490095223f5ea80ee304.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第31张图片" width="500" height="490" style="border:1px solid black;"></a> <h3>label标签</h3> <label> 标签为 input 元素定义标注（标记）。 label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 <label> 标签的 for 属性应当与相关元素的 id 属性相同。 常用于绑定内容与表单标签的关系 使用方法1： <ol> <li>使用label标签把内容（如：文本）包裹起来</li> <li>在表单标签上添加id属性</li> <li>在label标签的for属性中设置对应的id属性值</li> </ol> 使用方法2： <ol> <li>直接使用label标签把内容（如文本）和表单标签一起包裹起来</li> <li>需要把label标签的for属性删除即可</li> </ol> 例如： <pre><code class="prism language-html"><body> <p>点击其中一个文本标签选中选项：</p> <form action=""> <label for="male">花无缺是帅哥</label> <input type="radio" name="sex" id="male" value="male"><br> <label for="female">花无缺是大帅哥</label> <input type="radio" name="sex" id="female" value="female"><br><br> <input type="submit" value="提交"> </form> </body> </code></pre> 浏览器显示效果： <a href="http://img.e-com-net.com/image/info8/c89f6a1e483a400190c9febd4244e225.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c89f6a1e483a400190c9febd4244e225.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第32张图片" width="500" height="342" style="border:1px solid black;"></a> <h2>语义化标签</h2> <h3>没有语义的布局标签</h3> div标签：一行只显示一个（独占一行） span标签：一行可以显示多个 <h3>有语义的布局标签</h3> 在HTML5中，推出的一些有语义的局部标签供开发者使用 标签： <table> <thead> <tr> <th>标签名</th> <th>语义</th> </tr> </thead> <tbody> <tr> <td>header</td> <td>网页头部</td> </tr> <tr> <td>nav</td> <td>网页导航</td> </tr> <tr> <td>footer</td> <td>网页底部</td> </tr> <tr> <td>aside</td> <td>网页侧边栏</td> </tr> <tr> <td>section</td> <td>网页区块</td> </tr> <tr> <td>artcie</td> <td>网页文章</td> </tr> </tbody> </table> 注意： 以上标签显示特点和div一致，但是比div多了不同的语义 <h2>字符实体</h2> 在 HTML 中，某些字符是预留的。 在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities） 结构：&英文 常用字符实体 <table> <thead> <tr> <th>显示结果</th> <th>描述</th> <th>实体名称</th> </tr> </thead> <tbody> <tr> <td></td> <td>空格</td> <td> </td> </tr> <tr> <td><</td> <td>小于号</td> <td><</td> </tr> <tr> <td>></td> <td>大于号</td> <td>></td> </tr> <tr> <td>&</td> <td>和号</td> <td>&</td> </tr> <tr> <td>"</td> <td>引号</td> <td>"</td> </tr> <tr> <td>’</td> <td>撇号</td> <td>'</td> </tr> <tr> <td>¢</td> <td>分(cent)</td> <td>¢</td> </tr> <tr> <td>￡</td> <td>镑(pound)</td> <td>£</td> </tr> <tr> <td>€</td> <td>欧元(euro)</td> <td>€</td> </tr> <tr> <td>￥</td> <td>元(yen)</td> <td>¥</td> </tr> <tr> <td>§</td> <td>小节</td> <td>§</td> </tr> <tr> <td>©</td> <td>版权</td> <td>©</td> </tr> </tbody> </table> <h1>总结</h1> 哇塞，历时多天，终于肝完了这份2万字的HTML笔记！笔记包含了HTML的大部分知识点！第一次在CSDN上发布博客，过程还是挺艰难的，反复修改，查阅各种资料，力求完美，每一个知识点都有对应的代码示例，对新手非常的友好！看在我这么认真的份上，各位读者大大给个三连好吗？谢谢！ 点赞 收藏⭐ 留言 加关注✅ ！！！ <a href="http://img.e-com-net.com/image/info8/44e1a912f800416d95f983ecec429654.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/44e1a912f800416d95f983ecec429654.gif" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第33张图片" width="299" height="299" style="border:1px solid black;"></a> 咱们下次见！我会继续更新好文分享给大家！ <a href="http://img.e-com-net.com/image/info8/07486b993d76490a89193dd45d7d5238.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/07486b993d76490a89193dd45d7d5238.jpg" alt="【HTML】HTML基础知识详解【2万字+代码实例+显示效果】_第34张图片" width="399" height="493" style="border:1px solid black;"></a> </div> </div>�� </div> </div> </div>  <div id="SOHUCS" sid="1591396191306883072"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(#,HTML,前端,html,学习,css,javascript)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835514464028422144.htm" title="情绪觉察日记第37天" target="_blank">情绪觉察日记第37天</a> 露露_e800 <div>今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得</div> </li> <li><a href="/article/1835513803861749760.htm" title="机器学习与深度学习间关系与区别" target="_blank">机器学习与深度学习间关系与区别</a> ℒℴѵℯ心·动ꦿ໊ོ꫞ <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入</div> </li> <li><a href="/article/1835513701143244800.htm" title="铭刻于星（四十二）" target="_blank">铭刻于星（四十二）</a> 随风至 <div>69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但</div> </li> <li><a href="/article/1835513424734416896.htm" title="UI学习——cell的复用和自定义cell" target="_blank">UI学习——cell的复用和自定义cell</a> Magnetic_h <a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添</div> </li> <li><a href="/article/1835511542284644352.htm" title="学点心理知识，呵护孩子健康" target="_blank">学点心理知识，呵护孩子健康</a> 静候花开_7090 <div>昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果</div> </li> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> igotyback <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> igotyback <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> 某公司摸鱼前端 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835508131032035328.htm" title="ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值）" target="_blank">ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值）</a> 研学随笔 <a class="tag" taget="_blank" href="/search/arcgis/1.htm">arcgis</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==</div> </li> <li><a href="/article/1835507248395284480.htm" title="【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数" target="_blank">【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数</a> 广龙宇 <a class="tag" taget="_blank" href="/search/%E4%B8%80%E8%B5%B7%E5%AD%A6Rust/1.htm">一起学Rust</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Rust%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">Rust设计模式</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分</div> </li> <li><a href="/article/1835506996258893824.htm" title="回溯 Leetcode 332 重新安排行程" target="_blank">回溯 Leetcode 332 重新安排行程</a> mmaerd <a class="tag" taget="_blank" href="/search/Leetcode%E5%88%B7%E9%A2%98%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/1.htm">Leetcode刷题学习记录</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a> <div>重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB</div> </li> <li><a href="/article/1835506869838376960.htm" title="Python数据分析与可视化实战指南" target="_blank">Python数据分析与可视化实战指南</a> William数据分析 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE/1.htm">数据</a> <div>在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学</div> </li> <li><a href="/article/1835504817905168384.htm" title="2019-12-22-22:30" target="_blank">2019-12-22-22:30</a> 涓涓1016 <div>今天是冬至，写下我的日更，是因为这两天的学习真的是能量的满满，让我看到了自己，未来另外一种可能性，也让我看到了这两年这几年的过程中我所接受那些痛苦的来源。一切的根源和痛苦都来自于人生，家庭，而你的原生家庭，你的爸爸和妈妈，是因为你这个灵魂在那一刻选择他们作为你的爸爸和妈妈来的，所以你得接受他，你得接纳他，他就是因为他的存在而给你的学习和成长带来这些痛苦，那其实是你必然要经历的这个过程，当你去接纳的</div> </li> <li><a href="/article/1835502704827396096.htm" title="将cmd中命令输出保存为txt文本文件" target="_blank">将cmd中命令输出保存为txt文本文件</a> 落难Coder <a class="tag" taget="_blank" href="/search/Windows/1.htm">Windows</a><a class="tag" taget="_blank" href="/search/cmd/1.htm">cmd</a><a class="tag" taget="_blank" href="/search/window/1.htm">window</a> <div>最近深度学习本地的训练中我们常常要在命令行中运行自己的代码，无可厚非，我们有必要保存我们的炼丹结果，但是复制命令行输出到txt是非常麻烦的，其实Windows下的命令行为我们提供了相应的操作。其基本的调用格式就是：运行指令>输出到的文件名称或者具体保存路径测试下，我打开cmd并且ping一下百度：pingwww.baidu.com>./data.txt看下相同目录下data.txt的输出：如果你再</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> 彩云飘过 <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> STU学生网页设计 <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835497792265613312.htm" title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a> 加密社 <a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a> <div>加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件</div> </li> <li><a href="/article/1835496402042580992.htm" title="GitHub上克隆项目" target="_blank">GitHub上克隆项目</a> bigbig猩猩 <a class="tag" taget="_blank" href="/search/github/1.htm">github</a> <div>从GitHub上克隆项目是一个简单且直接的过程，它允许你将远程仓库中的项目复制到你的本地计算机上，以便进行进一步的开发、测试或学习。以下是一个详细的步骤指南，帮助你从GitHub上克隆项目。一、准备工作1.安装Git在克隆GitHub项目之前，你需要在你的计算机上安装Git工具。Git是一个开源的分布式版本控制系统，用于跟踪和管理代码变更。你可以从Git的官方网站（https://git-scm.</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835495644123459584.htm" title="Day1笔记-Python简介&标识符和关键字&输入输出" target="_blank">Day1笔记-Python简介&标识符和关键字&输入输出</a> ~在杰难逃~ <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a> <div>大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程</div> </li> <li><a href="/article/1835494131535802368.htm" title="人工智能时代，程序员如何保持核心竞争力？" target="_blank">人工智能时代，程序员如何保持核心竞争力？</a> jmoych <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>随着AIGC（如chatgpt、midjourney、claude等）大语言模型接二连三的涌现，AI辅助编程工具日益普及，程序员的工作方式正在发生深刻变革。有人担心AI可能取代部分编程工作，也有人认为AI是提高效率的得力助手。面对这一趋势,程序员应该如何应对?是专注于某个领域深耕细作，还是广泛学习以适应快速变化的技术环境?又或者，我们是否应该将重点转向AI无法轻易替代的软技能？让我们一起探讨程序员</div> </li> <li><a href="/article/1835493267907637248.htm" title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a> dmengmeng <div>需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p</div> </li> <li><a href="/article/1835492740536823808.htm" title="node.js学习" target="_blank">node.js学习</a> 小猿L <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div> </li> <li><a href="/article/1835492372952215552.htm" title="阶段总结反思" target="_blank">阶段总结反思</a> 轻争 <div>马上就要进入10月份了，今天做一下前段时间的总结和反思。前段时间，日更、英语、健身、护肤坚持的比较好。阅读、书法坚持的不好。1.中间被迫停更半个多月，其余时间一直在坚持日更挑战。偶尔也有不想写的时候，就做一下摘抄。因为阅读（输入）没跟上来，所以写作（输出）质量有待进一步加强。2.英语做到了一周至少学习5天，每次不少于30分钟，但是小班课没有跟上更新速度，下一步要争取利用零碎时间补听小班课。3.减肥</div> </li> <li><a href="/article/1835489587498151936.htm" title="ARM驱动学习之基础小知识" target="_blank">ARM驱动学习之基础小知识</a> JT灬新一 <a class="tag" taget="_blank" href="/search/ARM/1.htm">ARM</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F/1.htm">嵌入式</a><a class="tag" taget="_blank" href="/search/arm%E5%BC%80%E5%8F%91/1.htm">arm开发</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>ARM驱动学习之基础小知识•sch原理图工程师工作内容–方案–元器件选型–采购（能不能买到，价格）–原理图（涉及到稳定性）•layout画板工程师–layout（封装、布局，布线，log）（涉及到稳定性）–焊接的一部分工作（调试阶段板子的焊接）•驱动工程师–驱动，原理图，layout三部分的交集容易发生矛盾•PCB研发流程介绍–方案，原理图(网表)–layout工程师（gerber文件）–PCB板</div> </li> <li><a href="/article/1835489588169240576.htm" title="ARM驱动学习之5 LEDS驱动" target="_blank">ARM驱动学习之5 LEDS驱动</a> JT灬新一 <a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F/1.htm">嵌入式</a><a class="tag" taget="_blank" href="/search/C/1.htm">C</a><a class="tag" taget="_blank" href="/search/%E5%BA%95%E5%B1%82/1.htm">底层</a><a class="tag" taget="_blank" href="/search/arm%E5%BC%80%E5%8F%91/1.htm">arm开发</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a> <div>ARM驱动学习之5LEDS驱动知识点：•linuxGPIO申请函数和赋值函数–gpio_request–gpio_set_value•三星平台配置GPIO函数–s3c_gpio_cfgpin•GPIO配置输出模式的宏变量–S3C_GPIO_OUTPUT注意点：DRIVER_NAME和DEVICE_NAME匹配。实现步骤：1.加入需要的头文件：//Linux平台的gpio头文件#include//三</div> </li> <li><a href="/article/1835489586684456960.htm" title="ARM驱动学习之4小结" target="_blank">ARM驱动学习之4小结</a> JT灬新一 <a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F/1.htm">嵌入式</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/arm%E5%BC%80%E5%8F%91/1.htm">arm开发</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>ARM驱动学习之4小结#include#include#include#include#include#defineDEVICE_NAME"hello_ctl123"MODULE_LICENSE("DualBSD/GPL");MODULE_AUTHOR("TOPEET");staticlonghello_ioctl(structfile*file,unsignedintcmd,unsignedlo</div> </li> <li><a href="/article/1835489566702792704.htm" title="展现思维导图魅力，不断挖掘人生宝藏" target="_blank">展现思维导图魅力，不断挖掘人生宝藏</a> 思维导图讲师Mandy <div>第13期最强思维导图训练营已经结束一周了，但是我依旧是感觉所有学员还在努力的学习，这些学员中有教师、学生、白领、公务员、宝妈等等，只要你努力，只要你想改变自己，任何行业，任何岗位都可以参与进来，28天足以让你见成效，在这28天中，我们的学员不仅仅是收获了一枚毕业证，最重要的是让自己的思维方式得到升级，今天的你为自己投资，明天的你就会感谢你今天的付出，我们来听一听来自13期最强思维导图训练营优秀学员</div> </li> <li><a href="/article/1835488930972135424.htm" title="2019-3-23晨间日记" target="_blank">2019-3-23晨间日记</a> 红红火火小耳朵 <div>今天是什么日子起床：7点40就寝：23点半天气：有太阳，不过一会儿出来一会儿进去特别清爽的凉意，还蛮舒服的心情：小激动要给女朋友过生日啦纪念日：田田女士过生日任务清单昨日完成的任务，最重要的三件事：1.英语一对一2.运动计划3.认真护肤习惯养成：调整状态周目标·完成进度英语七天打卡（5/7）轻课阅读（87/180）音标课（25/30）读书（福尔摩斯一章）学习·信息·阅读#英语课#Cookingte</div> </li> <li><a href="/article/92.htm" title="log4j对象改变日志级别" target="_blank">log4j对象改变日志级别</a> 3213213333332132 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/log4j/1.htm">log4j</a><a class="tag" taget="_blank" href="/search/level/1.htm">level</a><a class="tag" taget="_blank" href="/search/log4j%E5%AF%B9%E8%B1%A1%E5%90%8D%E7%A7%B0/1.htm">log4j对象名称</a><a class="tag" taget="_blank" href="/search/%E6%97%A5%E5%BF%97%E7%BA%A7%E5%88%AB/1.htm">日志级别</a> <div>log4j对象改变日志级别可批量的改变所有级别，或是根据条件改变日志级别。 log4j配置文件： log4j.rootLogger=ERROR,FILE,CONSOLE,EXECPTION #log4j.appender.FILE=org.apache.log4j.RollingFileAppender log4j.appender.FILE=org.apache.l</div> </li> <li><a href="/article/219.htm" title="elk+redis 搭建nginx日志分析平台" target="_blank">elk+redis 搭建nginx日志分析平台</a> ronin47 <a class="tag" taget="_blank" href="/search/elasticsearch/1.htm">elasticsearch</a><a class="tag" taget="_blank" href="/search/kibana/1.htm">kibana</a><a class="tag" taget="_blank" href="/search/logstash/1.htm">logstash</a> <div> elk+redis 搭建nginx日志分析平台 logstash,elasticsearch,kibana 怎么进行nginx的日志分析呢？首先，架构方面，nginx是有日志文件的，它的每个请求的状态等都有日志文件进行记录。其次，需要有个队列，redis的l</div> </li> <li><a href="/article/346.htm" title="Yii2设置时区" target="_blank">Yii2设置时区</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/timezone/1.htm">timezone</a><a class="tag" taget="_blank" href="/search/yii2/1.htm">yii2</a> <div>时区这东西，在开发的时候，你说重要吧，也还好，毕竟没它也能正常运行，你说不重要吧，那就纠结了。特别是linux系统，都TMD差上几小时，你能不痛苦吗？win还好一点。有一些常规方法，是大家目前都在采用的1、php.ini中的设置，这个就不谈了，2、程序中公用文件里设置，date_default_timezone_set一下时区3、或者。。。自己写时间处理函数，在遇到时间的时候，用这个函数处理（比较</div> </li> <li><a href="/article/473.htm" title="js实现前台动态添加文本框，后台获取文本框内容" target="_blank">js实现前台动态添加文本框，后台获取文本框内容</a> 171815164 <a class="tag" taget="_blank" href="/search/%E6%96%87%E6%9C%AC%E6%A1%86/1.htm">文本框</a> <div> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w</div> </li> <li><a href="/article/600.htm" title="持续集成工具" target="_blank">持续集成工具</a> g21121 <a class="tag" taget="_blank" href="/search/%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90/1.htm">持续集成</a> <div> 持续集成是什么？我们为什么需要持续集成？持续集成带来的好处是什么？什么样的项目需要持续集成？... 持续集成(Continuous integration ,简称CI)，所谓集成可以理解为将互相依赖的工程或模块合并成一个能单独运行</div> </li> <li><a href="/article/727.htm" title="数据结构哈希表(hash)总结" target="_blank">数据结构哈希表(hash)总结</a> 永夜-极光 <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>1.什么是hash 来源于百度百科: Hash，一般翻译做“散列”，也有直接音译为“哈希”的，就是把任意长度的输入，通过散列算法，变换成固定长度的输出，该输出就是散列值。这种转换是一种压缩映射，也就是，散列值的空间通常远小于输入的空间，不同的输入可能会散列成相同的输出，所以不可能从散列值来唯一的确定输入值。简单的说就是一种将任意长度的消息压缩到某一固定长度的消息摘要的函数。 </div> </li> <li><a href="/article/854.htm" title="乱七八糟" target="_blank">乱七八糟</a> 程序员是怎么炼成的 <div>eclipse中的jvm字节码查看插件地址： http://andrei.gmxhome.de/eclipse/ 安装该地址的outline 插件后重启，打开window下的view下的bytecode视图 http://andrei.gmxhome.de/eclipse/ jvm博客： http://yunshen0909.iteye.com/blog/2</div> </li> <li><a href="/article/981.htm" title="职场人伤害了“上司” 怎样弥补" target="_blank">职场人伤害了“上司” 怎样弥补</a> aijuans <a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA/1.htm">职场</a> <div> 由于工作中的失误，或者平时不注意自己的言行“伤害”、“得罪”了自己的上司，怎么办呢？　　在职业生涯中这种问题尽量不要发生。下面提供了一些解决问题的建议：　　一、利用一些轻松的场合表示对他的尊重　　即使是开明的上司也很注重自己的权威，都希望得到下属的尊重，所以当你与上司冲突后，最好让不愉快成为过去，你不妨在一些轻松的场合，比如会餐、联谊活动等，向上司问个好，敬下酒，表示你对对方的尊重，</div> </li> <li><a href="/article/1108.htm" title="深入浅出url编码" target="_blank">深入浅出url编码</a> antonyup_2006 <a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a><a class="tag" taget="_blank" href="/search/weblogic/1.htm">weblogic</a><a class="tag" taget="_blank" href="/search/IE/1.htm">IE</a> <div>出处：http://blog.csdn.net/yzhz 杨争 http://blog.csdn.net/yzhz/archive/2007/07/03/1676796.aspx 一、问题：编码问题是JAVA初学者在web开发过程中经常会遇到问题，网上也有大量相关的</div> </li> <li><a href="/article/1235.htm" title="建表后创建表的约束关系和增加表的字段" target="_blank">建表后创建表的约束关系和增加表的字段</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/%E6%A0%87%E7%9A%84%E7%BA%A6%E6%9D%9F%E5%85%B3%E7%B3%BB/1.htm">标的约束关系</a><a class="tag" taget="_blank" href="/search/%E5%A2%9E%E5%8A%A0%E8%A1%A8%E7%9A%84%E5%AD%97%E6%AE%B5/1.htm">增加表的字段</a> <div> 下面所有的操作都是在表建立后操作的,主要目的就是熟悉sql的约束,约束语句的万能公式 1,增加字段(student表中增加姓名字段) alter table 增加字段的表名 add 增加的字段名增加字段的数据类型 alter table student add name varchar2(10); &nb</div> </li> <li><a href="/article/1362.htm" title="Uploadify 3.2 参数属性、事件、方法函数详解" target="_blank">Uploadify 3.2 参数属性、事件、方法函数详解</a> bijian1013 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/uploadify/1.htm">uploadify</a> <div>一.属性属性名称默认值说明 auto true 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传。 buttonClass ” 按钮样式 buttonCursor ‘hand’ 鼠标指针悬停在按钮上的样子 buttonImage null 浏览按钮的图片的路</div> </li> <li><a href="/article/1489.htm" title="精通Oracle10编程SQL(16)使用LOB对象" target="_blank">精通Oracle10编程SQL(16)使用LOB对象</a> bijian1013 <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a> <div>/* *使用LOB对象 */ --LOB(Large Object)是专门用于处理大对象的一种数据类型，其所存放的数据长度可以达到4G字节 --CLOB/NCLOB用于存储大批量字符数据，BLOB用于存储大批量二进制数据，而BFILE则存储着指向OS文件的指针 /* *综合实例 */ --建立表空间 --#指定区尺寸为128k,如不指定，区尺寸默认为64k CR</div> </li> <li><a href="/article/1616.htm" title="【Resin一】Resin服务器部署web应用" target="_blank">【Resin一】Resin服务器部署web应用</a> bit1129 <a class="tag" taget="_blank" href="/search/resin/1.htm">resin</a> <div>工作中，在Resin服务器上部署web应用，通常有如下三种方式：配置多个web-app 配置多个http id 为每个应用配置一个propeties、xml以及sh脚本文件配置多个web-app 在resin.xml中,可以为一个host配置多个web-app <cluster id="app&q</div> </li> <li><a href="/article/1743.htm" title="red5简介及基础知识" target="_blank">red5简介及基础知识</a> 白糖_ <a class="tag" taget="_blank" href="/search/%E5%9F%BA%E7%A1%80/1.htm">基础</a> <div> 简介 Red5的主要功能和Macromedia公司的FMS类似，提供基于Flash的流媒体服务的一款基于Java的开源流媒体服务器。它由Java语言编写，使用RTMP作为流媒体传输协议，这与FMS完全兼容。它具有流化FLV、MP3文件，实时录制客户端流为FLV文件，共享对象，实时视频播放、Remoting等功能。用Red5替换FMS后,客户端不用更改可正</div> </li> <li><a href="/article/1870.htm" title="angular.fromJson" target="_blank">angular.fromJson</a> boyitech <a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/AngularJS+%E5%AE%98%E6%96%B9API/1.htm">AngularJS 官方API</a><a class="tag" taget="_blank" href="/search/AngularJS+API/1.htm">AngularJS API</a> <div>angular.fromJson 描述: 把Json字符串转为对象使用方法: angular.fromJson(json); 参数详解: Param Type Details json string JSON 字符串返回值: 对象, 数组, 字符串或者是一个数字示例: <!DOCTYPE HTML> <h</div> </li> <li><a href="/article/1997.htm" title="java-颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I" target="_blank">java-颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class ReverseWords { /** * 题目：颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I.词以空格分隔。 * 要求： * 1.实现速度最快,移动最少 * 2.不能使用String的方法如split,indexOf等等。 * 解答：两次翻转。 */ publ</div> </li> <li><a href="/article/2124.htm" title="web实时通讯" target="_blank">web实时通讯</a> Chen.H <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/socket/1.htm">socket</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a> <div>关于web实时通讯，做一些监控软件。由web服务器组件从消息服务器订阅实时数据，并建立消息服务器到所述web服务器之间的连接，web浏览器利用从所述web服务器下载到web页面的客户端代理与web服务器组件之间的socket连接，建立web浏览器与web服务器之间的持久连接；利用所述客户端代理与web浏览器页面之间的信息交互实现页面本地更新，建立一条从消息服务器到web浏览器页面之间的消息通路</div> </li> <li><a href="/article/2251.htm" title="[基因与生物]远古生物的基因可以嫁接到现代生物基因组中吗?" target="_blank">[基因与生物]远古生物的基因可以嫁接到现代生物基因组中吗?</a> comsci <a class="tag" taget="_blank" href="/search/%E7%94%9F%E7%89%A9/1.htm">生物</a> <div> 大家仅仅把我说的事情当作一个IT行业的笑话来听吧..没有其它更多的意思如果我们把大自然看成是一位伟大的程序员,专门为地球上的生态系统编制基因代码,并创造出各种不同的生物来,那么6500万年前的程序员开发的代码,是否兼容现代派的程序员的代码和架构呢? </div> </li> <li><a href="/article/2378.htm" title="oracle 外部表" target="_blank">oracle 外部表</a> daizj <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E5%A4%96%E9%83%A8%E8%A1%A8/1.htm">外部表</a><a class="tag" taget="_blank" href="/search/external+tables/1.htm">external tables</a> <div> oracle外部表是只允许只读访问，不能进行DML操作，不能创建索引，可以对外部表进行的查询，连接，排序，创建视图和创建同义词操作。 you can select, join, or sort external table data. You can also create views and synonyms for external tables. Ho</div> </li> <li><a href="/article/2505.htm" title="aop相关的概念及配置" target="_blank">aop相关的概念及配置</a> daysinsun <a class="tag" taget="_blank" href="/search/AOP/1.htm">AOP</a> <div>切面(Aspect): 通常在目标方法执行前后需要执行的方法（如事务、日志、权限），这些方法我们封装到一个类里面，这个类就叫切面。连接点（joinpoint） spring里面的连接点指需要切入的方法，通常这个joinpoint可以作为一个参数传入到切面的方法里面（非常有用的一个东西）。通知（Advice）通知就是切面里面方法的具体实现，分为前置、后置、最终、异常环</div> </li> <li><a href="/article/2632.htm" title="初一上学期难记忆单词背诵第二课" target="_blank">初一上学期难记忆单词背诵第二课</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/english/1.htm">english</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a> <div>middle 中间的，中级的 well 喔，那么；好吧 phone 电话，电话机 policeman 警察 ask 问 take 拿到；带到 address 地址 glad 高兴的，乐意的 why 为什么 China 中国 family 家庭 grandmother (外)祖母 grandfather (外)祖父 wife 妻子 husband 丈夫 da</div> </li> <li><a href="/article/2759.htm" title="Linux日志分析常用命令" target="_blank">Linux日志分析常用命令</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/log/1.htm">log</a> <div>1.查看文件内容 cat -n 显示行号 2.分页显示 more Enter 显示下一行空格显示下一页 F 显示下一屏 B 显示上一屏 less /get 查询"get"字符串并高亮显示 3.显示文件尾 tail -f 不退出持续显示 -n 显示文件最后n行 4.显示头文件 head -n 显示文件开始n行 5.内容排序 sort -n 按照</div> </li> <li><a href="/article/2886.htm" title="JSONP 原理分析" target="_blank">JSONP 原理分析</a> fantasy2005 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jsonp/1.htm">jsonp</a><a class="tag" taget="_blank" href="/search/jsonp+%E8%B7%A8%E5%9F%9F/1.htm">jsonp 跨域</a> <div>转自 http://www.nowamagic.net/librarys/veda/detail/224 JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的</div> </li> <li><a href="/article/3013.htm" title="使用connect by进行级联查询" target="_blank">使用connect by进行级联查询</a> 234390216 <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E8%AF%A2/1.htm">查询</a><a class="tag" taget="_blank" href="/search/%E7%88%B6%E5%AD%90/1.htm">父子</a><a class="tag" taget="_blank" href="/search/Connect+by/1.htm">Connect by</a><a class="tag" taget="_blank" href="/search/%E7%BA%A7%E8%81%94/1.htm">级联</a> <div>使用connect by进行级联查询 connect by可以用于级联查询，常用于对具有树状结构的记录查询某一节点的所有子孙节点或所有祖辈节点。来看一个示例，现假设我们拥有一个菜单表t_menu，其中只有三个字段：</div> </li> <li><a href="/article/3140.htm" title="一个不错的能将HTML表格导出为excel,pdf等的jquery插件" target="_blank">一个不错的能将HTML表格导出为excel,pdf等的jquery插件</a> jackyrong <a class="tag" taget="_blank" href="/search/jquery%E6%8F%92%E4%BB%B6/1.htm">jquery插件</a> <div>发现一个老外写的不错的jquery插件，可以实现将HTML 表格导出为excel,pdf等格式，地址在： https://github.com/kayalshri/ 下面看个例子，实现导出表格到excel,pdf <html> <head> <title>Export html table to excel an</div> </li> <li><a href="/article/3267.htm" title="UI设计中我们为什么需要设计动效" target="_blank">UI设计中我们为什么需要设计动效</a> lampcy <a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/UI%E8%AE%BE%E8%AE%A1/1.htm">UI设计</a> <div>关于Unity3D中的Shader的知识首先先解释下Unity3D的Shader，Unity里面的Shaders是使用一种叫ShaderLab的语言编写的，它同微软的FX文件或者NVIDIA的CgFX有些类似。传统意义上的vertex shader和pixel shader还是使用标准的Cg/HLSL 编程语言编写的。因此Unity文档里面的Shader，都是指用ShaderLab编写的代码，</div> </li> <li><a href="/article/3394.htm" title="如何禁止页面缓存" target="_blank">如何禁止页面缓存</a> nannan408 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a> <div>禁止页面使用缓存~ ------------------------------------------------ jsp:页面no cache： response.setHeader("Pragma","No-cache"); response.setHeader("Cache-Control","no-cach</div> </li> <li><a href="/article/3521.htm" title="以代码的方式管理quartz定时任务的暂停、重启、删除、添加等" target="_blank">以代码的方式管理quartz定时任务的暂停、重启、删除、添加等</a> Everyday都不同 <a class="tag" taget="_blank" href="/search/%E5%AE%9A%E6%97%B6%E4%BB%BB%E5%8A%A1%E7%AE%A1%E7%90%86/1.htm">定时任务管理</a><a class="tag" taget="_blank" href="/search/spring-quartz/1.htm">spring-quartz</a> <div> 【前言】在项目的管理功能中，对定时任务的管理有时会很常见。因为我们不能指望只在配置文件中配置好定时任务就行了，因为如果要控制定时任务的 “暂停” 呢？暂停之后又要在某个时间点 “重启” 该定时任务呢？或者说直接 “删除” 该定时任务呢？要改变某定时任务的触发时间呢？ “添加” 一个定时任务对于系统的使用者而言，是不太现实的，因为一个定时任务的处理逻辑他是不</div> </li> <li><a href="/article/3648.htm" title="EXT实例" target="_blank">EXT实例</a> tntxia <a class="tag" taget="_blank" href="/search/ext/1.htm">ext</a> <div> （1）增加一个按钮 JSP: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); Stri</div> </li> <li><a href="/article/3775.htm" title="数学学习在计算机研究领域的作用和重要性" target="_blank">数学学习在计算机研究领域的作用和重要性</a> xjnine <a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a> <div>最近一直有师弟师妹和朋友问我数学和研究的关系，研一要去学什么数学课。毕竟在清华，衡量一个研究生最重要的指标之一就是paper,而没有数学，是肯定上不了世界顶级的期刊和会议的，这在计算机学界尤其重要！你会发现，不论哪个领域有价值的东西，都一定离不开数学！在这样一个信息时代，当google已经让世界没有秘密的时候，一种卓越的数学思维，绝对可以成为你的核心竞争力. 无奈本人实在见地</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>

版本	发行时间
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013