橙子!

【Web前端】一文带你吃透HTML(上篇)

前端学习路线小总结：

基础入门：
HTML CSS JavaScript
三大主流框架：
VUE REACT Angular
深入学习：
小程序 Node jQuery TypeScript 前端工程化

开始前端之旅吧!

一.HTML简介
- 1.什么是HTML？
- 2.HTML 标签
- 3.HTML 元素
- 4.HTML版本
- 5.Web 浏览器
- 6.HTML 网页结构
- 7.中文编码
- 8.编写第一个网页
二.HTML编辑器
三.HTML基础
- 1.HTML 标题
- 2.HTML 段落
- 3.HTML 链接
- 4.HTML 图像
四.HTML元素
- 1.HTML 元素语法
- 2.嵌套的 HTML 元素
- 3.HTML 空元素
五.HTML属性
六.HTML标题
- 1.HTML标题
- 2.HTML水平线
- 3.HTML 注释
七.HTML段落
- 1.HTML段落
- 2.HTML换行
八.HTML文本格式化
九.HTML链接
十.HTML头部
十一.HTML图像
十二.HTML表格
十三.HTML列表

接下来就开始我们的前端之旅吧~

一.HTML简介

万维网W3C标准中网页分为结构，表现和行为三部分，HTML用于描述页面的结构，CSS用于控制页面中的元素样式，JavaScript用于响应用户的操作。HTML，CSS和JavaScript组成了前端技术栈。

学习HTML就是学习标签的一个过程，难度指数低，重在反复练习，首先看看HTML文档的基本结构：


<html>
<head>
<meta charset="utf-8">
<title>小橙子前端教程title>
head>
<body>

<h1>标题h1>
<p>段落p>

body>
html>

1.什么是HTML？

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签。通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

2.HTML 标签

HTML标记标签又称为标签。

HTML 标签是由尖括号包围的关键词
HTML 标签通常是成对出现
标签对中的第一个标签是开始标签(开放标签)，第二个标签是结束标签(闭合标签)

<标签>内容标签>

所有 HTML 文档必须以声明开头，该声明并非一个 HTML 标签，它是一条“信息”，告知浏览器期望的文档类型。

3.HTML 元素

一个 HTML 元素包含了开始标签与结束标签。例如：

<h1>一级标题h1>

4.HTML版本

下面是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

5.Web 浏览器

要想学习Web前端，一定要先了解Web浏览器（如谷歌浏览器，Edge，Safari）。Web浏览器用于读取HTML文件，并将其作为网页显示。浏览器并不是直接显示HTML标签，而是负责网页的渲染和呈现，标签决定了如何展现HTML页面的内容给用户。例如：

6.HTML 网页结构

下面是HTML文档的基本结构，前面我们已经做了示例代码的展示：

7.中文编码

在一些浏览器直接输出中文会出现乱码的情况，当在浏览器输出中文乱码时，需要在头部将字符声明为 UTF-8 或 GBK。例如：

<meta charset="UTF-8">

8.编写第一个网页

前面介绍了HTML文档的一些基础信息，以及Web浏览器初识，接下来编写我们学习前端的第一个网页：

示例：使用记事本编写你的第一个网页！

<html>

<head>
    <title>这是我的第一个网页title>
head>

<body>
    
    <h1>望庐山瀑布h1>
    <h2>
        <font color=red>唐font> 李白
    h2>
    <p>日照香炉生紫烟，遥看瀑布挂前川。p>
    <p>飞流直下三千尺，疑是银河落九天。p>
body>

html>

新建一个文本文档，命名为index.html。编写代码，在默认浏览器中运行，查看显示效果！

二.HTML编辑器

这里推荐使用VsCode来编辑HTML代码！

vscode 是由微软开发的免费开源软件，它具有以下优势：

轻量级编辑器

丰富的插件系统

代码跟踪功能

三.HTML基础

1.HTML 标题

HTML 标题是通过

-

标签来定义的，例如：

    <h1>一级标题h1>
    <h2>二级标题h2>
    <h3>三级标题h3>

2.HTML 段落

HTML 段落是通过标签

来定义的，例如：

    <p>段落1p>
    <p>段落2p>
    <p>段落3p>

3.HTML 链接

HTML 链接是通过标签来定义的，例如：

<a href="https://www.baidu.com">百度一下a>

4.HTML 图像

HTML 图像是通过标签来定义的，例如：

<img src="/images/baidu.png" width="258" height="39" />

四.HTML元素

1.HTML 元素语法

HTML 元素以开始标签起始，以结束标签终止
元素的内容是开始标签与结束标签之间的内容，某些 HTML 元素具有空内容
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

2.嵌套的 HTML 元素

其实，大多数 HTML 元素可以嵌套使用，即HTML 元素可以包含其他 HTML 元素。所以，HTML 文档是由相互嵌套的 HTML 元素构成的，例如：


<html>

<body>
<p>段落1...p>
body>

html>

其中，对几个重要的标签做一个描述：

这个
元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签
以及一个结束标签
。元素内容是: 段落1…。
元素定义了 HTML 文档的主体。这个元素拥有一个开始标签以及一个结束标签。元素内容是另一个 HTML 元素（p 元素）。
元素定义了整个 HTML 文档。这个元素拥有一个开始标签，以及一个结束标签。元素内容是另一个 HTML 元素（body 元素）。

3.HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的，例如：

    <p>段落1p>
    <br>
    <p>段落2p>

其中，就是没有关闭标签的空元素（标签定义换行）。

在开始标签中添加斜杠，比如，是关闭空元素的正确方法。

五.HTML属性

属性是 HTML 元素提供的附加信息，属性值应该始终被包括在引号内，如果属性值本身就含有双引号，那么必须使用单引号包含属性值。

HTML 元素可以设置属性，属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”。

例如，HTML的链接标签中添加属性：

<a href="http://www.baidu.com">百度一下a>

HTML 链接由标签定义。链接的地址在 href 属性中指定。

六.HTML标题

1.HTML标题

标题是通过

标签进行定义的。

定义最大的标题。

定义最小的标题。浏览器会自动地在标题的前后添加空行，例如：

    <h1>一级标题h1>
    <h2>二级标题h2>
    <h3>三级标题h3>

标题用来正确的显示文章结构，通过不同的标题可以为文章建立索引，所以，标题是很重要的存在，所以，不要仅仅是为了生成粗体或大号的文本而使用标题。

2.HTML水平线

标签在 HTML 页面中创建水平线，例如：

    <p>段落1p>
    <hr>
    <p>段落2p>
    <hr>
    <p>段落3p>

3.HTML 注释

可以将注释插入 HTML 代码中，提高代码可读性，浏览器会忽略注释，也不会显示它们。

七.HTML段落

1.HTML段落

HTML可以将文档分为不同的段落。段落是通过

标签定义的，例如：

<p>段落1...p>
<p>段落2...p>

2.HTML换行

使用标签在不产生新的段落的情况下换行，例如：

<p>这是<br>换行的<br>演示p>

元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

八.HTML文本格式化

HTML 使用标签 (“bold”) 与 (“italic”) 对输出的文本进行格式, 如：粗体 or 斜体。也可使用标签替换加粗标签来使用, 替换标签使用。但是两者的含义不同，或者 标签有你要呈现的文本是重要的，所以要突出显示的意思。

标签	作用
	定义粗体文本
	定义着重文字
	定义斜体文字
	定义小号文字
…	…

文本格式化的标签及其作用：

标签作用

定义粗体文本

定义着重文字

定义斜体文字

定义小号文字

… …

详细的HTML标签参考标签参考手册哦

九.HTML链接

HTML 使用超级链接与网络上的另一个文档相连，点击链接可以从一张页面跳转到另一张页面。

HTML使用标签来设置超文本链接。

在标签中使用了href属性来描述链接的地址。

一个未访问过的链接显示为蓝色字体并带有下划线，访问过的链接显示为紫色并带有下划线，点击链接时，链接显示为红色并带有下划线。

例如，使用标签定义超文本链接：

<a href="url">链接文本a>

其中，可以定义属性实现相应的功能：

使用 target 属性，你可以定义被链接的文档在何处显示。

id 属性可用于创建一个 HTML 文档书签。

十.HTML头部

1.HTML 元素：

元素包含了所有的头部标签元素。在元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: , <style>, <meta>, <link>, <script>, <noscript> 和 <base>。</code></p> <hr> <p>2.HTML <code><title></code>元素：</p> <p><code><title></code> 标签定义了不同文档的标题。</p> <ul> <li class="task-list-item"> 定义了浏览器工具栏的标题</li> <li class="task-list-item"> 当网页添加到收藏夹时，显示在收藏夹中的标题</li> <li class="task-list-item"> 显示在搜索引擎结果页面的标题</li> </ul> <p>例如，下面的HTML文档代码：</p> <pre><code class="prism language-html"><span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>文档标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>文档内容......<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <hr> <p>3.HTML <code><base></code>元素：</p> <p><code><base></code> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接，例如：</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>base</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.baidu.com/images/<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> </code></pre> <hr> <p>4.HTML <code><link></code>元素<br> <code><link></code> 标签定义了文档与外部资源之间的关系，例如：</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>mystyle.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> </code></pre> <hr> <p>5.HTML <code><stytle></code>元素<br> <code><style></code> 标签定义了HTML文档的样式文件引用地址，例如：</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style language-css"> <span class="token selector">body</span> <span class="token punctuation">{</span><span class="token property">background-color</span><span class="token punctuation">:</span>yellow<span class="token punctuation">}</span> <span class="token selector">p</span> <span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span>blue<span class="token punctuation">}</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> </code></pre> <hr> <p>6.HTML <code><meta></code>元素<br> <code><meta></code>标签描述了一些基本的元数据。</p> <ul> <li class="task-list-item"> 标签提供了元数据。元数据也不显示在页面上，但会被浏览器解析。</li> <li class="task-list-item"> 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。</li> <li class="task-list-item"> 一般放置于 <code><head></code> 区域。</li> </ul> <hr> <p>7.HTML <code><script></code>元素<br> <code><script></code>标签用于加载脚本文件，如： JavaScript。</p> <hr> <h1>十一.HTML图像</h1> <p>在 HTML 中，图像由<code><img></code> 标签定义，<code><img></code> 是空标签。</p> <p>要在页面上显示图像，需要使用源属性（src），源属性的值是图像的 URL 地址，例如：</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>some_text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p><code>alt</code> 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，浏览器将显示这个替代性的文本而不是图像，例如：</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>boat.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>显示图像<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p>height（高度）与 width（宽度）属性用于设置图像的高度与宽度。默认单位是像素，例如：</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>baidu.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>百度<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <blockquote> <p><strong>注意</strong>：加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。</p> </blockquote> <hr> <h1>十二.HTML表格</h1> <p>表格由 <code><table></code> 标签来定义。每个表格均有若干行（由 <code><tr></code> 标签定义），每行被分割为若干单元格（由 <code><td></code> 标签定义）。字母 <code>td</code> 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等，例如：</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>你好<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>你好<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>你好<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>你好<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> </code></pre> <p>大多数情况我们需要给表格加上边框，也可以不使用边框。</p> <p>表格的表头使用 <code><th></code> 标签进行定义，大多数浏览器会把表头显示为粗体居中的文本。</p> <hr> <h1>十三.HTML列表</h1> <p>HTML 支持有序、无序和定义列表:</p> <ul> <li>无序列表使用 <code><ul></code> 标签定义，使用粗体圆点（典型的小黑圆圈）进行标记，每个列表项始于 <code><li></code> 标签，例如：</li> </ul> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>java<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>python<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <p><img src="http://img.e-com-net.com/image/info8/b0d48127950542abb065a761bc39a3db.jpg" alt="在这里插入图片描述" width="0" height="0"></p> <ul> <li>有序列表使用<code><ol></code> 标签定义，使用数字进行标记，每个列表项始于 <code><li></code> 标签，例如：</li> </ul> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>java<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>python<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> </code></pre> <p><img src="http://img.e-com-net.com/image/info8/2d91f0a115054daaa0f0d39e7cccd143.jpg" alt="在这里插入图片描述" width="0" height="0"></p> <ul> <li>自定义列表以 <code><dl></code> 标签开始，每个自定义列表项以 <code><dt></code> 开始。每个自定义列表项的定义以 <code><dd></code> 开始，自定义列表是项目和注释的组合，例如：</li> </ul> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dl</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>java<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>-诞生于1995年<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>python<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>-诞生于1991年<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dl</span><span class="token punctuation">></span></span> </code></pre> <p><img src="http://img.e-com-net.com/image/info8/ba829f8ff0904312959966f51b941868.jpg" alt="在这里插入图片描述" width="0" height="0"></p> <hr> </div> </div>�� </div> </div> </div>  <div id="SOHUCS" sid="1580525472117268480"></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">你可能感兴趣的:(JavaWeb基础教程系列,前端,html,html5)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1950232820773351424.htm" title="移动端城市区县二级联动选择功能实现包" target="_blank">移动端城市区县二级联动选择功能实现包</a> <span class="text-muted">good2know</span> <div>本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery</div> </li> <li><a href="/article/1950232190038110208.htm" title="day15｜前端框架学习和算法" target="_blank">day15｜前端框架学习和算法</a> <span class="text-muted">universe_01</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的</div> </li> <li><a href="/article/1950225381961297920.htm" title="SpringMVC的执行流程" target="_blank">SpringMVC的执行流程</a> <span class="text-muted"></span> <div>1、什么是MVCMVC是一种设计模式。MVC的原理图如下所示M-Model模型（完成业务逻辑：有javaBean构成，service+dao+entity）V-View视图（做界面的展示jsp，html……）C-Controller控制器（接收请求—>调用模型—>根据结果派发页面2、SpringMVC是什么SpringMVC是一个MVC的开源框架，SpringMVC=Struts2+Spring，</div> </li> <li><a href="/article/1950208989954371584.htm" title="Selenium 特殊控件操作与 ActionChains 实践详解" target="_blank">Selenium 特殊控件操作与 ActionChains 实践详解</a> <span class="text-muted">小馋喵知识杂货铺</span> <a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a> <div>1.下拉框单选操作(a)使用SeleniumSelect类（标准HTML标签）Selenium提供了内置的Select类用于操作标准下拉框，这种方式简单且直观。fromselenium.webdriver.support.uiimportSelect#定位下拉框dropdown=Select(driver.find_element("id","dropdown_id"))#通过以下三种方式选择单个</div> </li> <li><a href="/article/1950207097413103616.htm" title="微信公众号回调java_处理微信公众号消息回调" target="_blank">微信公众号回调java_处理微信公众号消息回调</a> <span class="text-muted">weixin_39607620</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E5%9B%9E%E8%B0%83java/1.htm">微信公众号回调java</a> <div>1、背景在上一节中，咱们知道如何接入微信公众号，可是以后公众号会与咱们进行交互，那么微信公众号如何通知到咱们本身的服务器呢？咱们知道咱们接入的时候提供的url是GET/mp/entry，那么公众号以后产生的事件将会以POST/mp/entry发送到咱们本身的服务器上。html2、代码实现，此处仍是使用weixin-java-mp这个框架实现一、引入weixin-java-mpcom.github.</div> </li> <li><a href="/article/1950201094361640960.htm" title="人工智能应用研究快讯 2021-11-30" target="_blank">人工智能应用研究快讯 2021-11-30</a> <span class="text-muted">峰谷皆平</span> <div>[HTML]ArtificialIntelligenceforSkinCancerDetection:ScopingReviewATakiddin,JSchneider,YYang,AAbd-Alrazaq...JournalofMedicalInternet...,2021ABSTACT:Background:Skincanceristhemostcommoncancertypeaffectin</div> </li> <li><a href="/article/1950195876991397888.htm" title="【Jupyter】个人开发常见命令" target="_blank">【Jupyter】个人开发常见命令</a> <span class="text-muted">TIM老师</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Pycharm/1.htm">Pycharm</a><a class="tag" taget="_blank" href="/search/%26amp%3B/1.htm">&</a><a class="tag" taget="_blank" href="/search/VSCode/1.htm">VSCode</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/Jupyter/1.htm">Jupyter</a> <div>1.查看python版本importsysprint(sys.version)2.ipynb/py文件转换jupyternbconvert--topythonmy_file.ipynbipynb转换为mdjupyternbconvert--tomdmy_file.ipynbipynb转为htmljupyternbconvert--tohtmlmy_file.ipynbipython转换为pdfju</div> </li> <li><a href="/article/1950194742100815872.htm" title="用代码生成艺术字：设计个性化海报的秘密" target="_blank">用代码生成艺术字：设计个性化海报的秘密</a> <span class="text-muted"></span> <div>本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准</div> </li> <li><a href="/article/1950191208873652224.htm" title="vue element 封装表单" target="_blank">vue element 封装表单</a> <span class="text-muted">影子信息</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>背景：在前端系统开发中，系统页面涉及到的表单组件比较多，所以进行了简单的封装。封装的包括一些Form表单组件，如下：input输入框、select下拉框、等实现效果：理论知识：表单组件官方链接：点击跳转封装组件：封装组件的思路：不封装element组件，每一个input组件绑定一个form对象，例如官网。简单封装element组件，利用for循环生成form表单的每一项el-form-item。进</div> </li> <li><a href="/article/1950191165710069760.htm" title="前端面试每日 3+1 —— 第39天" target="_blank">前端面试每日 3+1 —— 第39天</a> <span class="text-muted">浪子神剑</span> <div>今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss</div> </li> <li><a href="/article/1950187223672483840.htm" title="GDP经济社会人文民生栅格数据下载网站汇总" target="_blank">GDP经济社会人文民生栅格数据下载网站汇总</a> <span class="text-muted">疯狂学习GIS</span> <div> 本文为“GIS数据获取整理”专栏（https://blog.csdn.net/zhebushibiaoshifu/category_10857546.html）中第八篇独立博客，因此本文全部标题均由“8”开头。本文对目前主要的GDP、社会与经济数据获取网站加以整理与介绍，若需其它GIS领域数据（如遥感影像数据、气象数据、土地土壤数据、农业数据等），大家可以点击上方专栏查看，也可以看这一篇汇总文</div> </li> <li><a href="/article/1950180497007112192.htm" title="【MySQL】MySQL数据库如何改名" target="_blank">【MySQL】MySQL数据库如何改名</a> <span class="text-muted">武昌库里写JAVA</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>MySQL建库授权语句https://www.jianshu.com/p/2237a9649ceeMySQL数据库改名的三种方法https://www.cnblogs.com/gomysql/p/3584881.htmlMySQL安全修改数据库名几种方法https://blog.csdn.net/haiross/article/details/51282417MySQL重命名数据库https://</div> </li> <li><a href="/article/1950178477592342528.htm" title="前端数据库：IndexedDB从基础到高级使用指南" target="_blank">前端数据库：IndexedDB从基础到高级使用指南</a> <span class="text-muted"></span> <div>文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.</div> </li> <li><a href="/article/1950169524384886784.htm" title="【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三）" target="_blank">【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三）</a> <span class="text-muted">笙囧同学</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a> <div>核心功能设计用户管理系统用户管理是整个系统的基础，我设计了完整的用户生命周期管理：用户注册流程验证失败验证通过验证失败验证通过用户名已存在用户名可用失败成功用户访问注册页面填写注册信息前端表单验证显示错误提示提交到后端后端数据验证返回错误信息用户名唯一性检查提示用户名重复密码加密处理保存用户信息保存成功?显示系统错误注册成功跳转登录页面登录认证机制深度解析我实现了一套企业级的多层次安全认证机制：认</div> </li> <li><a href="/article/1950169526440095744.htm" title="从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战" target="_blank">从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战</a> <span class="text-muted"></span> <div>作者简介：笙囧同学，中科院计算机大模型方向硕士，全栈开发爱好者联系方式：3251736703@qq.com各大平台账号：笙囧同学座右铭：偷懒是人生进步的阶梯前言在AI技术飞速发展的今天，如何将前沿的大模型技术与实际应用相结合，一直是我们开发者关注的焦点。今天，笙囧同学将带大家从零开始，构建一个基于GigaChatAI的艺术创作平台，实现React前端+Django后端的完整全栈解决方案。这不仅仅是</div> </li> <li><a href="/article/1950164483057971200.htm" title="14.tornado操作之应用Websocket协议实现聊天室功能" target="_blank">14.tornado操作之应用Websocket协议实现聊天室功能</a> <span class="text-muted">孤寒者</span> <a class="tag" taget="_blank" href="/search/Tornado%E6%A1%86%E6%9E%B6%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E5%AE%9E%E6%88%98/1.htm">Tornado框架从入门到实战</a><a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/tornado/1.htm">tornado</a><a class="tag" taget="_blank" href="/search/%E8%81%8A%E5%A4%A9%E5%AE%A4%E5%8A%9F%E8%83%BD%E5%AE%9E%E7%8E%B0/1.htm">聊天室功能实现</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录：每篇前言：1.什么是WebSocket（1）定义（2）优点（3）和HTTP对比（4）适用场景2.WebSocket关键方法3.本tornado项目中使用WebSocket（1）准备一个聊天室的页面：第一步：编写视图：第二步：编写接口：（app.py中加入以下接口！）第三步：编写前端页面：测试接口——响应OK！（2）使用WebSocket：（3）聊天室的聊天功能的最终实现：第一步：战前准备第二</div> </li> <li><a href="/article/1950144218282389504.htm" title="为什么学习Web前端一定要掌握JavaScript？" target="_blank">为什么学习Web前端一定要掌握JavaScript？</a> <span class="text-muted">web前端学习指南</span> <div>为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。</div> </li> <li><a href="/article/1950143305194991616.htm" title="小架构step系列25：错误码" target="_blank">小架构step系列25：错误码</a> <span class="text-muted">秋千码途</span> <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>1概述一个系统中，可能产生各种各样的错误，对这些错误进行编码。当错误发生时，通过这个错误码就有可能快速判断是什么错误，不一定需要查看代码就可以进行处理，提高问题处理效率。有了统一的错误码，还可以标准化错误信息，方便把错误信息纳入文档管理和对错误信息进行国际化等。没有错误码的管理，开发人员就会按自己的理解处理这些错误。有些直接把堆栈直接反馈到前端页面上，使用看不懂这些信息体验很差，也暴露了堆栈信息有</div> </li> <li><a href="/article/1950140903616212992.htm" title="Java朴实无华按天计划从入门到实战（强化速战版-66天）" target="_blank">Java朴实无华按天计划从入门到实战（强化速战版-66天）</a> <span class="text-muted">岫珩</span> <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E6%97%B6%E9%97%B4%E5%AE%89%E6%8E%92/1.htm">时间安排</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%AE%A1%E5%88%92/1.htm">学习计划</a> <div>致敬读者感谢阅读笑口常开生日快乐⬛早点睡觉博主相关博主信息博客首页专栏推荐活动信息文章目录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</div> </li> <li><a href="/article/1950132204336115712.htm" title="《跨域资源共享CORS的深层逻辑与前端实践精要》" target="_blank">《跨域资源共享CORS的深层逻辑与前端实践精要》</a> <span class="text-muted"></span> <div>不同源头的资源交互已成为常态，而跨域资源共享（CORS）正是支撑这种交互的隐形架构。现代Web安全体系中平衡开放与防护的精妙设计。理解CORS的深层逻辑，不仅能解决实际开发中的跨域难题，更能触及网络安全与资源流通的核心矛盾，为前端工程师构建稳健的应用提供底层认知支撑。跨域资源共享的诞生，源于网络安全与应用发展的必然冲突。浏览器的同源策略，作为早期网络安全的基石，通过限制不同源文档的交互，有效阻挡了</div> </li> <li><a href="/article/1950131321980383232.htm" title="深入了解 Kubernetes（k8s）：从概念到实践" target="_blank">深入了解 Kubernetes（k8s）：从概念到实践</a> <span class="text-muted"></span> <div>目录一、k8s核心概念二、k8s的优势三、k8s架构组件控制平面组件节点组件四、k8s+docker运行前后端分离项目的例子1.准备前端项目2.准备后端项目3.创建k8s部署配置文件4.部署应用到k8s集群在当今云计算和容器化技术飞速发展的时代，Kubernetes（简称k8s）已成为容器编排领域的事实标准。无论是互联网巨头、传统企业还是初创公司，都在广泛采用k8s来管理和部署容器化应用。本文将带</div> </li> <li><a href="/article/1950130722157162496.htm" title="移动端适配rem方案" target="_blank">移动端适配rem方案</a> <span class="text-muted">简单的码农</span> <div>1.rem+动态html的font-size1.rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的font-size尺寸。2.比如如下案例：设置一个盒子的宽度是2rem；设置不同的屏幕上html的font-size不同；image这样在开发中，我们只需要考虑两个问题：问题一：针对不同的屏幕，设置html不同的font-s</div> </li> <li><a href="/article/1950130692448907264.htm" title="Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录" target="_blank">Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录</a> <span class="text-muted">二倍速播放</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于：搜索引擎优化(SEO)：初始HTML响应仅包含一个根div元素，实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎（如Google）能够执行部分JavaScript，但其抓取效率和稳定性不如直接获取完整HTML。非</div> </li> <li><a href="/article/1950127794931429376.htm" title="redis反弹shell时kali无法接收回弹的解决方法" target="_blank">redis反弹shell时kali无法接收回弹的解决方法</a> <span class="text-muted">显哥无敌</span> <a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>无法接受回谈大概率是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</div> </li> <li><a href="/article/1950121289456873472.htm" title="native.js设置可缩放的webview并隐藏缩放控件" target="_blank">native.js设置可缩放的webview并隐藏缩放控件</a> <span class="text-muted">Nanayai</span> <div>需求明确:webview页面可以手指缩放,并且不要那个原生控件;实现思路:1.使用h5+封装好的方法:设置scalable属性,并在html中设置meta标签:user-scalable=yes或不设置,minimum-scale和maximum-scale需要注意不要都设为1:mui.openWindow({url:"someThing",id:"someThing",styles:{scala</div> </li> <li><a href="/article/1950119224630374400.htm" title="大厂都在用的前端缓存策略，你掌握了吗？" target="_blank">大厂都在用的前端缓存策略，你掌握了吗？</a> <span class="text-muted">AI架构全栈开发实战笔记</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>大厂都在用的前端缓存策略，你掌握了吗？关键词：前端缓存、HTTP缓存、ServiceWorker、CDN缓存、缓存策略、性能优化、浏览器缓存摘要：本文将深入探讨前端开发中常用的缓存策略，从浏览器缓存到ServiceWorker，从HTTP缓存头到CDN缓存，全面解析大厂都在使用的高效缓存技术。通过生动的比喻和实际代码示例，帮助开发者理解并掌握这些提升Web应用性能的关键技术。背景介绍目的和范围本文</div> </li> <li><a href="/article/1950117078799282176.htm" title="Redis反弹Shell" target="_blank">Redis反弹Shell</a> <span class="text-muted">波吉爱睡觉</span> <a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%23%E6%9C%AA%E6%8E%88%E6%9D%83%E8%AE%BF%E9%97%AE%E6%BC%8F%E6%B4%9E/1.htm">#未授权访问漏洞</a><a class="tag" taget="_blank" href="/search/%23SSRF/1.htm">#SSRF</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a> <div>这里我来总结几种Redis反弹Shell的方法一、利用Redis写WebShell前提条件开了web服务器，并且知道路径，还需要有文件读写增删改查的权限条件比较苛刻，但是满足条件上传就会简单一点，我们直接将文件写入www目录下，完了使用工具连接即可。语句：redis:6379>configsetdir/var/www/html/redis:6379>configsetdbfilenameshell</div> </li> <li><a href="/article/1950115062781898752.htm" title="26. 什么是雪碧图，作用和原理了解吗" target="_blank">26. 什么是雪碧图，作用和原理了解吗</a> <span class="text-muted">yqcoder</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95-CSS/1.htm">前端面试-CSS</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>总结小图合成一张，使用background来使用，减少资源请求一、什么是雪碧图？雪碧图（CSSSprite）是一种前端优化技术，指的是将多个小图标合并成一张大图，通过CSS控制显示其中的某一部分。它常用于网站中图标、按钮等小图较多的场景。二、雪碧图的作用作用说明✅减少HTTP请求次数合并多个图片为一张图，减少请求资源数✅提升页面加载速度尤其在图片较多时效果明显✅避免图片加载闪烁鼠标悬停切换图片时不</div> </li> <li><a href="/article/1950112039502409728.htm" title="H5UI微信小程序前端框架实战指南" target="_blank">H5UI微信小程序前端框架实战指南</a> <span class="text-muted">ai</span> <div>本文还有配套的精品资源，点击获取简介：H5UI是一个为微信小程序开发设计的前端框架，基于H5技术，提供简洁高效的组件库。框架集成了丰富的UI元素，如按钮、表格、导航栏等，简化了界面布局和交互的实现。通过安装、引入、使用组件和事件绑定四个步骤，开发者可以轻松构建功能齐全的应用。了解性能优化等注意事项对于高效开发同样重要。1.微信小程序前端开发框架介绍微信小程序概述微信小程序是微信官方推出的一种无需下</div> </li> <li><a href="/article/1950108839089074176.htm" title="Windows下Oracle安装图解" target="_blank">Windows下Oracle安装图解</a> <span class="text-muted">叫我老村长</span> <div>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</div> </li> <li><a href="/article/31.htm" title="312个免费高速HTTP代理IP（能隐藏自己真实IP地址）" target="_blank">312个免费高速HTTP代理IP（能隐藏自己真实IP地址）</a> <span class="text-muted">yangshangchuan</span> <a class="tag" taget="_blank" href="/search/%E9%AB%98%E9%80%9F/1.htm">高速</a><a class="tag" taget="_blank" href="/search/%E5%85%8D%E8%B4%B9/1.htm">免费</a><a class="tag" taget="_blank" href="/search/superword/1.htm">superword</a><a class="tag" taget="_blank" href="/search/HTTP%E4%BB%A3%E7%90%86/1.htm">HTTP代理</a> <div> 124.88.67.20:843 190.36.223.93:8080 117.147.221.38:8123 122.228.92.103:3128 183.247.211.159:8123 124.88.67.35:81 112.18.51.167:8123 218.28.96.39:3128 49.94.160.198:3128 183.20</div> </li> <li><a href="/article/158.htm" title="pull解析和json编码" target="_blank">pull解析和json编码</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/pull%E8%A7%A3%E6%9E%90/1.htm">pull解析</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a> <div>n.json文件: [{name:java,lan:c++,age:17},{name:android,lan:java,age:8}] pull.xml文件 <?xml version="1.0" encoding="utf-8"?> <stu> <name>java</div> </li> <li><a href="/article/285.htm" title="[能源与矿产]石油与地球生态系统" target="_blank">[能源与矿产]石油与地球生态系统</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E8%83%BD%E6%BA%90/1.htm">能源</a> <div> 按照苏联的科学界的说法,石油并非是远古的生物残骸的演变产物,而是一种可以由某些特殊地质结构和物理条件生产出来的东西,也就是说,石油是可以自增长的.... 那么我们做一个猜想: 石油好像是地球的体液,我们地球具有自动产生石油的某种机制,只要我们不过量开采石油,并保护好</div> </li> <li><a href="/article/412.htm" title="类与对象浅谈" target="_blank">类与对象浅谈</a> <span class="text-muted">沐刃青蛟</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%9F%BA%E7%A1%80/1.htm">基础</a> <div> 类，字面理解，便是同一种事物的总称，比如人类，是对世界上所有人的一个总称。而对象，便是类的具体化，实例化，是一个具体事物，比如张飞这个人，就是人类的一个对象。但要注意的是：张飞这个人是对象，而不是张飞，张飞只是他这个人的名字，是他的属性而已。而一个类中包含了属性和方法这两兄弟，他们分别用来描述对象的行为和性质（感觉应该是</div> </li> <li><a href="/article/539.htm" title="新站开始被收录后，我们应该做什么？" target="_blank">新站开始被收录后，我们应该做什么？</a> <span class="text-muted">IT独行者</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/seo/1.htm">seo</a> <div>新站开始被收录后，我们应该做什么？百度终于开始收录自己的网站了，作为站长，你是不是觉得那一刻很有成就感呢，同时，你是不是又很茫然，不知道下一步该做什么了？至少我当初就是这样，在这里和大家一份分享一下新站收录后，我们要做哪些工作。至于如何让百度快速收录自己的网站，可以参考我之前的帖子《新站让百</div> </li> <li><a href="/article/666.htm" title="oracle 连接碰到的问题" target="_blank">oracle 连接碰到的问题</a> <span class="text-muted">文强chu</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>Unable to find a java Virtual Machine－－安装64位版Oracle11gR2后无法启动SQLDeveloper的解决方案作者：草根IT网来源：未知人气：813标签：导读：安装64位版Oracle11gR2后发现启动SQLDeveloper时弹出配置java.exe的路径，找到Oracle自带java.exe后产生的路径“C:\app\用户名\prod</div> </li> <li><a href="/article/793.htm" title="Swing中按ctrl键同时移动鼠标拖动组件（类中多借口共享同一数据）" target="_blank">Swing中按ctrl键同时移动鼠标拖动组件（类中多借口共享同一数据）</a> <span class="text-muted">小桔子</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%BB%A7%E6%89%BF/1.htm">继承</a><a class="tag" taget="_blank" href="/search/swing/1.htm">swing</a><a class="tag" taget="_blank" href="/search/%E6%8E%A5%E5%8F%A3/1.htm">接口</a><a class="tag" taget="_blank" href="/search/%E7%9B%91%E5%90%AC/1.htm">监听</a> <div> 都知道java中类只能单继承，但可以实现多个接口，但我发现实现多个接口之后，多个接口却不能共享同一个数据，应用开发中想实现：当用户按着ctrl键时，可以用鼠标点击拖动组件，比如说文本框。编写一个监听实现KeyListener,NouseListener,MouseMotionListener三个接口，重写方法。定义一个全局变量boolea</div> </li> <li><a href="/article/920.htm" title="linux常用的命令" target="_blank">linux常用的命令</a> <span class="text-muted">aichenglong</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/1.htm">常用命令</a> <div>1 startx切换到图形化界面 2 man命令:查看帮助信息 man 需要查看的命令,man命令提供了大量的帮助信息,一般可以分成4个部分 name:对命令的简单说明 synopsis:命令的使用格式说明 description:命令的详细说明信息 options:命令的各项说明 3 date:显示时间语法：date [OPTION]... [+FORMAT] </div> </li> <li><a href="/article/1047.htm" title="eclipse内存优化" target="_blank">eclipse内存优化</a> <span class="text-muted">AILIKES</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a> <div>一基本说明在JVM中，总体上分2块内存区,默认空余堆内存小于 40%时，JVM就会增大堆直到-Xmx的最大限制；空余堆内存大于70%时，JVM会减少堆直到-Xms的最小限制。 1)堆内存(Heap memory):堆是运行时数据区域，所有类实例和数组的内存均从此处分配,是Java代码可及的内存，是留给开发人</div> </li> <li><a href="/article/1174.htm" title="关键字的使用探讨" target="_blank">关键字的使用探讨</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E5%85%B3%E9%94%AE%E5%AD%97/1.htm">关键字</a> <div>//关键字的使用探讨/*访问关键词private 只能在本类中访问public 只能在本工程中访问protected 只能在包中和子类中访问默认的只能在包中访问*//*final 类方法变量 final 类不能被继承 final 方法不能被子类覆盖，但可以继承 final 变量只能有一次赋值，赋值后不能改变 final 不能用来修饰构造方法*///this()</div> </li> <li><a href="/article/1301.htm" title="JS中定义对象的几种方式" target="_blank">JS中定义对象的几种方式</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div> 1. 基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)： <html> <head> <title>基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)</title> </head> <script> var obj = new Object(); </div> </li> <li><a href="/article/1428.htm" title="表驱动法实例" target="_blank">表驱动法实例</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E9%A9%B1%E5%8A%A8%E6%B3%95/1.htm">表驱动法</a><a class="tag" taget="_blank" href="/search/TDD/1.htm">TDD</a> <div>获得月的天数是典型的直接访问驱动表方式的实例，下面我们来展示一下： MonthDaysTest.java package com.study.test; import org.junit.Assert; import org.junit.Test; import com.study.MonthDays; public class MonthDaysTest { @T</div> </li> <li><a href="/article/1555.htm" title="LInux启停重启常用服务器的脚本" target="_blank">LInux启停重启常用服务器的脚本</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>启动，停止和重启常用服务器的Bash脚本，对于每个服务器，需要根据实际的安装路径做相应的修改 #! /bin/bash Servers=(Apache2, Nginx, Resin, Tomcat, Couchbase, SVN, ActiveMQ, Mongo); Ops=(Start, Stop, Restart); currentDir=$(pwd); echo</div> </li> <li><a href="/article/1682.htm" title="【HBase六】REST操作HBase" target="_blank">【HBase六】REST操作HBase</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/hbase/1.htm">hbase</a> <div>HBase提供了REST风格的服务方便查看HBase集群的信息，以及执行增删改查操作 1. 启动和停止HBase REST 服务 1.1 启动REST服务前台启动（默认端口号8080） [hadoop@hadoop bin]$ ./hbase rest start 后台启动 hbase-daemon.sh start rest 启动时指定</div> </li> <li><a href="/article/1809.htm" title="大话zabbix 3.0设计假设" target="_blank">大话zabbix 3.0设计假设</a> <span class="text-muted">ronin47</span> <div>What’s new in Zabbix 2.0? 去年开始使用Zabbix的时候，是1.8.X的版本，今年Zabbix已经跨入了2.0的时代。看了2.0的release notes，和performance相关的有下面几个： :: Performance improvements::Trigger related da</div> </li> <li><a href="/article/1936.htm" title="http错误码大全" target="_blank">http错误码大全</a> <span class="text-muted">byalias</span> <a class="tag" taget="_blank" href="/search/http%E5%8D%8F%E8%AE%AE/1.htm">http协议</a><a class="tag" taget="_blank" href="/search/javaweb/1.htm">javaweb</a> <div>响应码由三位十进制数字组成，它们出现在由HTTP服务器发送的响应的第一行。响应码分五种类型，由它们的第一位数字表示： 1）1xx：信息，请求收到，继续处理 2）2xx：成功，行为被成功地接受、理解和采纳 3）3xx：重定向，为了完成请求，必须进一步执行的动作 4）4xx：客户端错误，请求包含语法错误或者请求无法实现 5）5xx：服务器错误，服务器不能实现一种明显无效的请求 </div> </li> <li><a href="/article/2063.htm" title="J2EE设计模式-Intercepting Filter" target="_blank">J2EE设计模式-Intercepting Filter</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>Intercepting Filter类似于职责链模式有两种实现其中一种是Filter之间没有联系，全部Filter都存放在FilterChain中，由FilterChain来有序或无序地把把所有Filter调用一遍。没有用到链表这种数据结构。示例如下： package com.ljn.filter.custom; import java.util.ArrayList;</div> </li> <li><a href="/article/2190.htm" title="修改jboss端口" target="_blank">修改jboss端口</a> <span class="text-muted">chicony</span> <a class="tag" taget="_blank" href="/search/jboss/1.htm">jboss</a> <div>修改jboss端口 %JBOSS_HOME%\server\{服务实例名}\conf\bindingservice.beans\META-INF\bindings-jboss-beans.xml 中找到  </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>

【Web前端】一文带你吃透HTML(上篇)

开始前端之旅吧!

一.HTML简介

1.什么是HTML？

2.HTML 标签

3.HTML 元素

4.HTML版本

5.Web 浏览器

6.HTML 网页结构

7.中文编码

8.编写第一个网页

二.HTML编辑器

三.HTML基础

1.HTML 标题

`-`
标签来定义的，例如：

`<h1>一级标题h1> <h2>二级标题h2> <h3>三级标题h3>`

2.HTML 段落

HTML 段落是通过标签
来定义的，例如：

`<p>段落1p> <p>段落2p> <p>段落3p>`

标签来定义的，例如：

`<h1>一级标题h1> <h2>二级标题h2> <h3>三级标题h3>`

2.HTML 段落

3.HTML 链接

4.HTML 图像

四.HTML元素

1.HTML 元素语法

2.嵌套的 HTML 元素

3.HTML 空元素

五.HTML属性

六.HTML标题

1.HTML标题

2.HTML水平线

3.HTML 注释

七.HTML段落

1.HTML段落

2.HTML换行

八.HTML文本格式化

九.HTML链接

十.HTML头部

【Web前端】一文带你吃透HTML(上篇)

开始前端之旅吧!

一.HTML简介

1.什么是HTML？

2.HTML 标签

3.HTML 元素

4.HTML版本

5.Web 浏览器

6.HTML 网页结构

7.中文编码

8.编写第一个网页

二.HTML编辑器

三.HTML基础

1.HTML 标题

- 标签来定义的，例如： <h1>一级标题h1> <h2>二级标题h2> <h3>三级标题h3> 2.HTML 段落 HTML 段落是通过标签 来定义的，例如： <p>段落1p> <p>段落2p> <p>段落3p>

标签来定义的，例如： <h1>一级标题h1> <h2>二级标题h2> <h3>三级标题h3>

2.HTML 段落

3.HTML 链接

4.HTML 图像

四.HTML元素

1.HTML 元素语法

2.嵌套的 HTML 元素

3.HTML 空元素

五.HTML属性

六.HTML标题

1.HTML标题

2.HTML水平线

3.HTML 注释

七.HTML段落

1.HTML段落

2.HTML换行

八.HTML文本格式化

九.HTML链接

十.HTML头部

`-`
标签来定义的，例如：

`<h1>一级标题h1> <h2>二级标题h2> <h3>三级标题h3>`

2.HTML 段落

HTML 段落是通过标签
来定义的，例如：

`<p>段落1p> <p>段落2p> <p>段落3p>`

标签来定义的，例如：

`<h1>一级标题h1> <h2>二级标题h2> <h3>三级标题h3>`