老牛源码

【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！

1. 前端开发介绍
2. HTML & CSS
- 2.1 HTML快速入门
- - 2.1.1 操作
  - 2.1.2 总结
- 2.2 开发工具
- 2.3 基础标签 & 样式
- - 2.3.1 新浪新闻-标题实现
  - - 2.3.1.1 标题排版
    - - 2.3.1.1.1 分析
      - 2.3.1.1.2 标签
      - 2.3.1.1.2 实现
    - 2.3.1.2 标题样式
    - - 2.3.1.2.1 CSS引入方式
      - 2.3.1.2.2 颜色表示
      - 2.3.1.2.3 标题字体颜色
      - 2.3.1.2.4 CSS选择器
      - 2.3.1.2.5 发布时间字体颜色
    - 2.3.1.3 超链接
    - - 2.3.1.3.1 介绍
      - 2.3.1.3.2 实现
  - 2.3.2 新浪新闻-正文实现
  - - 2.3.2.1 正文排版
    - - 2.3.2.1.1 分析
      - 2.3.2.1.2 标签
      - 2.3.2.1.3 实现
    - 2.3.2.2 页面布局
    - - 2.3.2.2.1 盒子模型
      - 2.3.2.2.2 布局标签
      - 2.3.2.2.3 盒子模型代码
      - 2.3.2.2.3 布局实现
- 2.4 表格标签
- 2.5 表单标签
- - 2.5.1 表单
  - - 2.5.1.1 介绍
    - 2.5.1.2 演示
    - 2.5.1.3 注意事项
  - 2.5.2 表单项
  - - 2.5.2.1 介绍
    - 2.5.2.2 演示
3. 文档查阅
- 3.1 HTML文档查阅
- 3.2 CSS文档查阅

1. 前端开发介绍

我们介绍Web网站工作流程的时候提到，前端开发，主要的职责就是将数据以好看的样式呈现出来。说白了，就是开发网页程序，如下图所示：

那在讲解web前端开发之前，我们先需要对web前端开发有一个整体的认知。主要明确一下三个问题：

1). 网页有哪些部分组成 ?

文字、图片、音频、视频、超链接、表格等等。

2). 我们看到的网页，背后的本质是什么 ?

程序员写的前端代码 (备注：在前后端分离的开发模式中，)

3). 前端的代码是如何转换成用户眼中的网页的 ?

通过浏览器转化（解析和渲染）成用户看到的网页

浏览器中对代码进行解析和渲染的部分，称为 浏览器内核

而市面上的浏览器非常多，比如：IE、火狐Firefox、苹果safari、欧朋、谷歌Chrome、QQ浏览器、360浏览器等等。而且我们电脑上安装的浏览器可能都不止一个，有很多。

但是呢，需要大家注意的是，不同的浏览器，内核不同，对于相同的前端代码解析的效果也会存在差异。那这就会造成一个问题，同一段前端程序，不同浏览器展示出来的效果是不一样的，这个用户体验就很差了。而我们想达到的效果则是，即使用户使用的是不同的浏览器，解析同一段前端代码，最终展示出来的效果都是相同的。

要想达成这样一个目标，我们就需要定义一个统一的标准，然后让各大浏览器厂商都参照这个标准来实现即可。而这套标准呢，其实早都已经定义好了，那就是我们接下来，要介绍的web标准。

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。由三个组成部分：

HTML：负责网页的结构（页面元素和内容）。
CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
JavaScript：负责网页的行为（交互效果）。

当然了，随着技术的发展，我们为了更加快速的开发，现在也出现了很多前端开发的高级技术。例如：vue、elementui、Axios等等。

那这些内容呢，也是我们前端三天课程中要讲解的内容。前端的3天课程安排如下：

HTML & CSS
JavaScript & Vue
Ajax & Axios & ElementUI & Nginx

2. HTML & CSS

1). 什么是HTML ?

**HTML: **HyperText Markup Language，超文本标记语言。

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。

标记语言：由标签构成的语言

HTML标签都是预定义好的。例如：使用
标签展示标题，使用展示超链接，使用展示图片，

HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

下面展示的是一段html代码经过浏览器解析，呈现的效果如右图所示：

2). 什么是CSS ?

CSS: Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。

下面展示的是一段 html代码及 CSS样式经过浏览器解析，呈现的效果如右图所示：

2.1 HTML快速入门

2.1.1 操作

第一步:创建一个名为HTML的文件夹，然后找到课程资料中的 1.jpg 文件放到该目录下，此时HTML文件夹中内容如下：

第二步：创建一个文本文件，然后修改文件名为hello.html,注意文件的后缀是.html,如下图所示：

第三步：选中文件，鼠标右击，选择使用记事本打开文件，并且编写前端代码

首先html有固定的基本结构

<html>
	<head>
		<title>HTML 快速入门title>
	head>
	<body>
		<h1>Hello HTMLh1>
		<img src="1.jpg"/>
	body>
html>

其中是根标签，和是子标签，中的字标签是用来定义网页的标题的，里面定义的内容会显示在浏览器网页的标题位置。 而 <body> 中编写的内容，就网页中显示的核心内容。 第四步：然后选中文件，鼠标右击，选择使用浏览器打开文件，浏览器呈现效果如下: <a href="http://img.e-com-net.com/image/info8/60fa5605e7994adba19bc6485b25e618.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/60fa5605e7994adba19bc6485b25e618.jpg" alt="【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！_第5张图片" width="650" height="336" style="border:1px solid black;"></a> <h4>2.1.2 总结</h4> 1). HTML页面的基础结构标签 <pre><code class="prism language-html"><html> <head> <title> </title> </head> <body> </body> </html> </code></pre> <title>中定义标题显示在浏览器的标题位置，<body>中定义的内容会呈现在浏览器的内容区域 2). HTML中的标签特点 <ul> <li>HTML标签不区分大小写</li> <li>HTML标签的属性值，采用单引号、双引号都可以</li> <li>HTML语法相对比较松散 (建议大家编写HTML标签的时候尽量严谨一些)</li> </ul> <h3>2.2 开发工具</h3> <ul> <li> 我们通过快速入门案例，发现由记事本文件开发html是非常不方便的，所以接下来我们需要学习一款前端专业的开发工具VS Code。 </li> <li> Visual Studio Code（简称 VS Code ）是 Microsoft 于2015年4月发布的一款代码编辑器。VS Code 对前端代码有非常强大的支持，同时也其他编程语言（例如：C++、Java、Python、PHP、Go等）。VS Code 提供了非常强大的插件库，大大提高了开发效率。 </li> <li> 官网： https://code.visualstudio.com </li> <li> 详细安装教程：参考 资料/VSCode安装/安装文档/VS Code安装文档.md </li> </ul> <blockquote> 注意：需要注意的是，我们作为一名开发者，不应该将软件软装在包含中文名的路径中。 </blockquote> <h3>2.3 基础标签 & 样式</h3> 那我们在讲解HTML的常见基础标签及 CSS的基本样式时，我们就以新浪新闻页面为例，来进行讲解，这样大家不仅能够知道常见标签及样式的作用，还能够知道具体的应用场景。 新浪新闻的具体页面效果如下： <a href="http://img.e-com-net.com/image/info8/ce26e21accca401fa0e8c5735e5e84d8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ce26e21accca401fa0e8c5735e5e84d8.jpg" alt="【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！_第6张图片" width="650" height="681" style="border:1px solid black;"></a> 原始页面网址：https://news.sina.com.cn/gov/xlxw/2023-03-03/doc-imyipzuy7321600.shtml 而对于这个新浪新闻的页面来说，核心内容分为两个部分，如下： <ul> <li>新浪新闻-标题部分</li> <li>新浪新闻-正文部分</li> </ul> <a href="http://img.e-com-net.com/image/info8/f5216cf6a4234bb0b3a0c0052bc424f6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f5216cf6a4234bb0b3a0c0052bc424f6.jpg" alt="【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！_第7张图片" width="650" height="364" style="border:1px solid black;"></a> <h4>2.3.1 新浪新闻-标题实现</h4> <h5>2.3.1.1 标题排版</h5> <h6>2.3.1.1.1 分析</h6> <a href="http://img.e-com-net.com/image/info8/633e93a9c19647c49a2e94b8415aa9f3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/633e93a9c19647c49a2e94b8415aa9f3.jpg" alt="【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！_第8张图片" width="650" height="184" style="border:1px solid black;"></a> 1). 第一部分，是一张图片，需要用到HTML中的图片标签<img> 来实现。 2). 第二部分，是一个标题，需要用到HTML中的标题标签 <h1> … <h6>来实现。 3). 第三部分，有两条水平分割线，需要用到HTML中的 <hr> 标签来定义水平分割线。 <h6>2.3.1.1.2 标签</h6> 1). 图片标签 img <pre><code class="prism language-html">A. 图片标签: <img> B. 常见属性: src: 指定图像的url (可以指定绝对路径 , 也可以指定相对路径) width: 图像的宽度 (像素 / 百分比 , 相对于父元素的百分比) height: 图像的高度 (像素 / 百分比 , 相对于父元素的百分比) 备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。 C. 路径书写方式: 绝对路径: 1. 绝对磁盘路径: C:\Users\Administrator\Desktop\HTML\img\news_logo.png <img src="C:\Users\Administrator\Desktop\HTML\img\news_logo.png"> 2. 绝对网络路径: https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"> 相对路径: ./ : 当前目录 , ./ 可以省略的 ../: 上一级目录 </code></pre> 2). 标题标签 h 系列 <pre><code class="prism language-html">A. 标题标签: <h1> - <h6> <h1>111111111111</h1> <h2>111111111111</h2> <h3>111111111111</h3> <h4>111111111111</h4> <h5>111111111111</h5> <h6>111111111111</h6> B. 效果 : h1为一级标题，字体也是最大的； h6为六级标题，字体是最小的。 </code></pre> 3). 水平分页线标签 <hr> <h6>2.3.1.1.2 实现</h6> 1). 打开VsCode，选择左侧最底部的 “资源管理器”，然后选择打开文件夹，选择打开桌面的 HTML 文件夹 2). 将资料中提供的图片、音频、视频文件夹的这三个文件夹（里面是图片、音视频素材），复制到 HTML 文件夹中。 <a href="http://img.e-com-net.com/image/info8/1c78d9798d5a4d899561c99aaa8a1293.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1c78d9798d5a4d899561c99aaa8a1293.jpg" alt="【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！_第9张图片" width="601" height="148" style="border:1px solid black;"></a> 3). 在VsCode中创建一个新的 html 文件，文件的后缀名设置为 .html <a href="http://img.e-com-net.com/image/info8/62922ac574ad4d18a6ab8b98257ca8c5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/62922ac574ad4d18a6ab8b98257ca8c5.jpg" alt="【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！_第10张图片" width="650" height="193" style="border:1px solid black;"></a> 4). html 文件创建好之后，在其中输入！，然后直接回车，就可以生成 HTML 的基础结构标签 5). 编写标题排版的核心代码 <pre><code class="prism language-html"> <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>焦点访谈：中国底气新思想夯实大国粮仓</title> </head> <body>  <img src="img/news_logo.png"> 新浪政务 > 正文 <h1>焦点访谈：中国底气新思想夯实大国粮仓</h1> <hr> 2023年03月02日 21:50 央视网 <hr> </body> </html> </code></pre> <h5>2.3.1.2 标题样式</h5> 新浪新闻的标题部分的基本排版，我们已经完成了，然后大家会看到，我们编写的一级标题，默认字体颜色为纯黑色。而原始的新浪新闻页面的新闻标题字体，并不是纯黑色，而是灰黑色，那接下来，我们就要来设置这个字体的颜色。而要设置这个字体的颜色，我们就需要通过CSS样式来控制。 那在HTML的文件中，我们如何来编写CSS样式呢，此时就涉及到CSS的三种引入方式。 <h6>2.3.1.2.1 CSS引入方式</h6> 具体有3种引入方式，语法如下表格所示： <table> <thead> <tr> <th>名称</th> <th>语法描述</th> <th>示例</th> </tr> </thead> <tbody> <tr> <td>行内样式</td> <td>在标签内使用style属性，属性值是css属性键值对</td> <td><h1 style=“xxx:xxx;”>中国新闻网</h1></td> </tr> <tr> <td>内嵌样式</td> <td>定义<style>标签，在标签内部定义css样式</td> <td><style> h1 {…} </style></td> </tr> <tr> <td>外联样式</td> <td>定义<link>标签，通过href属性引入外部css文件</td> <td><link rel=“stylesheet” href=“css/news.css”></td> </tr> </tbody> </table> 对于上述3种引入方式，企业开发的使用情况如下： <ol> <li>内联样式会出现大量的代码冗余，不方便后期的维护，所以不常用。</li> <li>内部样式，通过定义css选择器，让样式作用于当前页面的指定的标签上。</li> <li>外部样式，html和css实现了完全的分离，企业开发常用方式。</li> </ol> <h6>2.3.1.2.2 颜色表示</h6> 在前端程序开发中，颜色的表示方式常见的有如下三种： <table> <thead> <tr> <th>表示方式</th> <th>表示含义</th> <th>取值</th> </tr> </thead> <tbody> <tr> <td>关键字</td> <td>预定义的颜色名</td> <td>red、green、blue…</td> </tr> <tr> <td>rgb表示法</td> <td>红绿蓝三原色，每项取值范围：0-255</td> <td>rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)</td> </tr> <tr> <td>十六进制表示法</td> <td>#开头，将数字转换成十六进制表示</td> <td>#000000、#ff0000、#cccccc，简写：#000、#ccc</td> </tr> </tbody> </table> <h6>2.3.1.2.3 标题字体颜色</h6> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>焦点访谈：中国底气新思想夯实大国粮仓</title>  <style> h1 { /* color: red; */ /* color: rgb(0, 0, 255); */ color: #4D4F53; } </style>   </head> <body> <img src="img/news_logo.png"> 新浪政务 > 正文   <h1>焦点访谈：中国底气新思想夯实大国粮仓</h1> <hr> 2023年03月02日 21:50 央视网 <hr> </body> </html> </code></pre> 备注: 要想拾取某一个网页中的颜色，我们可以借助于浏览器的拾色器插件来完成。【拾色器插件的安装，参照资料中提供的文档即可】 <h6>2.3.1.2.4 CSS选择器</h6> 顾名思义：选择器是选取需设置样式的元素（标签），但是我们根据业务场景不同，选择的标签的需求也是多种多样的，所以选择器有很多种，因为我们是做后台开发的，所以对于css选择器，我们只学习最基本的3种。 选择器通用语法如下： <pre><code class="prism language-css">选择器名 { css样式名：css样式值; css样式名：css样式值; } </code></pre> 我们需要学习的3种选择器是元素选择器，id选择器，class选择器，语法以及作用如下： 1.元素（标签）选择器： <ul> <li>选择器的名字必须是标签的名字</li> <li>作用：选择器中的样式会作用于所有同名的标签上</li> </ul> <pre><code>元素名称 { css样式名:css样式值； } </code></pre> 例子如下： <pre><code class="prism language-css"> div{ color: red; } </code></pre> 2.id选择器: <ul> <li>选择器的名字前面需要加上#</li> <li>作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签（由于id是唯一的）</li> </ul> <pre><code>#id属性值 { css样式名:css样式值； } </code></pre> 例子如下： <pre><code class="prism language-css">#did { color: blue; } </code></pre> 3.类选择器： <ul> <li>选择器的名字前面需要加上 .</li> <li>作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个</li> </ul> <pre><code>.class属性值 { css样式名:css样式值； } </code></pre> 例子如下： <pre><code class="prism language-css">.cls{ color: green; } </code></pre> <h6>2.3.1.2.5 发布时间字体颜色</h6> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>焦点访谈：中国底气新思想夯实大国粮仓</title> <style> h1 { color: #4D4F53; } /* 元素选择器 */ /* span { color: red; } */ /* 类选择器 */ /* .cls { color: green; } */ /* ID选择器 */ #time { color: #968D92; font-size: 13px; /* 设置字体大小 */ } </style> </head> <body> <img src="img/news_logo.png"> 新浪政务 > 正文 <h1>焦点访谈：中国底气新思想夯实大国粮仓</h1> <hr> <span class="cls" id="time">2023年03月02日 21:50</span> <span class="cls">央视网</span> <hr> </body> </html> </code></pre> 上述我们还使用了一个css的属性 font-size , 用来设置字体的大小。但是需要注意，在设置字体的大小时，单位px不能省略，否则不生效。 <h5>2.3.1.3 超链接</h5> <ul> <li> 在新浪新闻的标题部分，当我们点击顶部的 “新浪政务”，浏览器将自动在当前窗口访问新浪政务首页这个资源（http://gov.sina.com.cn/） </li> <li> 当我们点击新闻发布时间之后的 “央视网”，浏览器将会自动打开一个新的标签页，然后在新的标签页中访问央视网中的该新闻资源（https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml） </li> </ul> <a href="http://img.e-com-net.com/image/info8/7969d1499d324b92b7ef55213d355572.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7969d1499d324b92b7ef55213d355572.jpg" alt="【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！_第11张图片" width="650" height="364" style="border:1px solid black;"></a> 那接下来，我们就来完善新闻标题部分的这个功能，那此时呢，我们就需要用到HTML中的超链接的标签。 <h6>2.3.1.3.1 介绍</h6> <ul> <li>标签: <a href=“…” target=“…”>央视网</li> <li>属性: <ul> <li>href: 指定资源访问的url</li> <li>target: 指定在何处打开资源链接 <ul> <li>_self: 默认值，在当前页面打开</li> <li>_blank: 在空白页面打开</li> </ul> </li> </ul> </li> </ul> <h6>2.3.1.3.2 实现</h6> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>焦点访谈：中国底气新思想夯实大国粮仓</title> <style> h1 { color: #4D4F53; } #time { color: #968D92; font-size: 13px; /* 设置字体大小 */ } a { color: black; text-decoration: none; /* 设置文本为一个标准的文本 , 去除掉超链接下面默认的下划线 */ } </style> </head> <body> <img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a> > 正文 <h1>焦点访谈：中国底气新思想夯实大国粮仓</h1> <hr> <span id="time">2023年03月02日 21:50</span> <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a> </span> <hr> </body> </html> </code></pre> 浏览器打开此页面，我们可以看到最终效果（超链接的字体，以及默认的下划线，通过css样式已经调整好了）： <a href="http://img.e-com-net.com/image/info8/36aa488b3cc2462488f242c58a143c4c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/36aa488b3cc2462488f242c58a143c4c.jpg" alt="【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！_第12张图片" width="650" height="181" style="border:1px solid black;"></a> <h4>2.3.2 新浪新闻-正文实现</h4> <h5>2.3.2.1 正文排版</h5> <h6>2.3.2.1.1 分析</h6> <a href="http://img.e-com-net.com/image/info8/1ef6229dd4d4450e9b2554c6910c0a89.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1ef6229dd4d4450e9b2554c6910c0a89.jpg" alt="【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！_第13张图片" width="650" height="364" style="border:1px solid black;"></a> 整个正文部分的排版，主要分为这么四个部分： 1). 视频 (当前这种新闻页面,可能也会存在音频) 2). 文字段落 3). 字体加粗 4). 图片 <h6>2.3.2.1.2 标签</h6> 1). 视频、音频标签 <ul> <li> 视频标签: <video> <ul> <li>属性: <ul> <li>src: 规定视频的url</li> <li>controls: 显示播放控件</li> <li>width: 播放器的宽度</li> <li>height: 播放器的高度</li> </ul> </li> </ul> </li> <li> 音频标签: <audio> <ul> <li>属性: <ul> <li>src: 规定音频的url</li> <li>controls: 显示播放控件</li> </ul> </li> </ul> </li> </ul> 2). 段落标签 <ul> <li>换行标签: <ul> <li>注意: 在HTML页面中,我们在编辑器中通过回车实现的换行, 仅仅在文本编辑器中会看到换行效果, 浏览器是不会解析的, HTML中换行需要通过br标签</li> </ul> </li> </ul> <ul> <li>段落标签: <ul> <li>如: 这是一个段落 </li> </ul> </li> </ul> 3). 文本格式标签 <table> <thead> <tr> <th>效果</th> <th>标签</th> <th>标签(强调)</th> </tr> </thead> <tbody> <tr> <td>加粗</td> <td>b</td> <td>strong</td> </tr> <tr> <td>倾斜</td> <td>i</td> <td>em</td> </tr> <tr> <td>下划线</td> <td>u</td> <td>ins</td> </tr> <tr> <td>删除线</td> <td>s</td> <td>del</td> </tr> </tbody> </table> 前面的标签 b、i、u、s 就仅仅是实现加粗、倾斜、下划线、删除线的效果，是没有强调语义的。而后面的strong、em、ins、del在实现加粗、倾斜、下划线、删除线的效果的同时，还带有强调语义。 <h6>2.3.2.1.3 实现</h6> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>焦点访谈：中国底气新思想夯实大国粮仓</title> <style> h1 { color: #4D4F53; } #time { color: #968D92; font-size: 13px; /* 设置字体大小 */ } a { color: black; text-decoration: none; /* 设置文本为一个标准的文本 */ } p { text-indent: 35px; /* 设置首行缩进 */ line-height: 40px; /* 设置行高 */ } #plast { text-align: right; /* 对齐方式 */ } </style> </head> <body>  <img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a> > 正文 <h1>焦点访谈：中国底气新思想夯实大国粮仓</h1> <hr> <span id="time">2023年03月02日 21:50</span> <span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a></span> <hr>   <video src="video/1.mp4" controls width="950px"></video>   <p> <strong>央视网消息</strong> （焦点访谈）：.............，重农抓粮一系列政策举措有力有效，我国粮食产量站稳1.3万亿斤台阶，实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中，为保障经济社会发展提供了坚实支撑，为应对各种风险挑战赢得了主动。连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢？ </p> <p> 人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。 </p> <img src="img/1.jpg"> <p> 今年，我国启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。2015年以来，我国粮食产量连续8年稳定在1.3万亿斤以上，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。 </p> <img src="img/2.jpg"> <p> 中国式现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产的发展，意味着我们要立足国内，解决14亿多人吃饭的问题。仓廪实，天下安。保障粮食安全是一个永恒的课题，任何时候都不能放松。我们就一定能够牢牢守住粮食安全这一“国之大者”，把中国人的饭碗牢牢端在自己手中，夯实中国式现代化基础。 </p> <p id="plast"> 责任编辑：王树淼 SN242 </p> </body> </html> </code></pre> 在上述的正文排版实现中，还用到了几个CSS属性： <ul> <li>text-indent: 设置段落的首行缩进</li> <li>line-height: 设置行高</li> <li>text-align: 设置对齐方式, 可取值为 left / center / right</li> </ul> <blockquote> 注意事项: <ul> <li> 在HTML页面中无论输入了多少个空格, 最多只会显示一个。可以使用空格占位符（；）来生成空格，如果需要多个空格，就使用多次占位符。 </li> <li> 那在HTML中，除了空格占位符以外，还有一些其他的占位符(了解, 只需要知道空格的占位符写法即可)，如下： <ul> <li> <table> <thead> <tr> <th align="left">显示结果</th> <th align="left">描述</th> <th align="left">占位符</th> </tr> </thead> <tbody> <tr> <td align="left"></td> <td align="left">空格</td> <td align="left"> </td> </tr> <tr> <td align="left"><</td> <td align="left">小于号</td> <td align="left"><</td> </tr> <tr> <td align="left">></td> <td align="left">大于号</td> <td align="left">></td> </tr> <tr> <td align="left">&</td> <td align="left">和号</td> <td align="left">&</td> </tr> <tr> <td align="left">"</td> <td align="left">引号</td> <td align="left">"</td> </tr> <tr> <td align="left">’</td> <td align="left">撇号</td> <td align="left">'</td> </tr> </tbody> </table></li> </ul> </li> </ul> </blockquote> <h5>2.3.2.2 页面布局</h5> 目前，新闻页面的基本排版，我们都已经完成了，但是，大家会看到，无论是标题部分，还是正文部分，都是铺满了整个浏览器。而我们再来看看新浪新闻的原始页面，我们会看到新闻网页内容都是居中展示的，左边、右边都是一定的边距的。 <a href="http://img.e-com-net.com/image/info8/f528aaa18dae4dadbd398e4f5c0ac0d4.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f528aaa18dae4dadbd398e4f5c0ac0d4.jpg" alt="【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！_第14张图片" width="650" height="364" style="border:1px solid black;"></a> 那接下来呢，我们就需要按照这个效果，来完成页面布局。而要想完成这样一个页面布局，我们就需要介绍一下CSS中的盒子模型。 <h6>2.3.2.2.1 盒子模型</h6> <ul> <li> 盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局 </li> <li> 盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin） </li> </ul> <a href="http://img.e-com-net.com/image/info8/3205e380b36b4064be78baa675a9af42.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3205e380b36b4064be78baa675a9af42.jpg" alt="【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！_第15张图片" width="632" height="390" style="border:1px solid black;"></a> CSS盒子模型，其实和日常生活中的包装盒是非常类似的，就比如： <a href="http://img.e-com-net.com/image/info8/92f2c8076ec540ae951ce01dc004ed2a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/92f2c8076ec540ae951ce01dc004ed2a.jpg" alt="【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！_第16张图片" width="650" height="406" style="border:1px solid black;"></a> 盒子的大小，其实就包括三个部分： border、padding、content，而margin外边距是不包括在盒子之内的。 <h6>2.3.2.2.2 布局标签</h6> <ul> <li> 布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。 </li> <li> 标签： <div> </div> </li> <li> 特点： <ul> <li> div标签： <ul> <li> 一行只显示一个（独占一行） </li> <li> 宽度默认是父元素的宽度，高度默认由内容撑开 </li> <li> 可以设置宽高（width、height） </li> </ul> </li> <li> span标签： <ul> <li> 一行可以显示多个 </li> <li> 宽度和高度默认由内容撑开 </li> <li> 不可以设置宽高（width、height） </li> </ul> </li> </ul> </li> </ul> 测试： <pre><code class="prism language-html"><body> <div> A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div> <div> A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div> <span> A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </span> <span> A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </span> </body> </code></pre> 浏览器打开后的效果: 1). div会独占一行，默认宽度为父元素 body 的宽度 <a href="http://img.e-com-net.com/image/info8/7d69a877840340ca87e5905ebab68091.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7d69a877840340ca87e5905ebab68091.jpg" alt="【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！_第17张图片" width="650" height="137" style="border:1px solid black;"></a> 2). span一行会显示多个，用来组合行内元素，默认宽度为内容撑开的宽度 <a href="http://img.e-com-net.com/image/info8/12dda88c21cd469d93288839dc7d21a9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/12dda88c21cd469d93288839dc7d21a9.jpg" alt="【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！_第18张图片" width="650" height="163" style="border:1px solid black;"></a> <h6>2.3.2.2.3 盒子模型代码</h6> 代码如下: <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型</title> <style> div { width: 200px; /* 宽度 */ height: 200px; /* 高度 */ box-sizing: border-box; /* 指定width height为盒子的高宽 */ background-color: aquamarine; /* 背景色 */ padding: 20px 20px 20px 20px; /* 内边距, 上右下左 , 边距都一行, 可以简写: padding: 20px;*/ border: 10px solid red; /* 边框, 宽度线条类型颜色 */ margin: 30px 30px 30px 30px; /* 外边距, 上右下左 , 边距都一行, 可以简写: margin: 30px; */ } </style> </head> <body> <div> A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div> </body> </html> </code></pre> 代码编写好了, 可以通过浏览器打开该页面, 通过开发者工具,我们就可以看到盒子的大小, 以及盒子各个组成部分(内容、内边距、边框、外边距)： <a href="http://img.e-com-net.com/image/info8/77a5f33dcd564b46801ec3abb8c198c3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/77a5f33dcd564b46801ec3abb8c198c3.jpg" alt="【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！_第19张图片" width="650" height="323" style="border:1px solid black;"></a> 我们也可以，通过浏览器的开发者工具，清晰的看到这个盒子，以及每一个部分的大小： <a href="http://img.e-com-net.com/image/info8/8862a093f46545d2b1451ddc39b55082.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8862a093f46545d2b1451ddc39b55082.jpg" alt="【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！_第20张图片" width="650" height="252" style="border:1px solid black;"></a> <h6>2.3.2.2.3 布局实现</h6> 在实现新闻页面的布局时，我们需要做两部操作： <ul> <li>第一步：需要将body中的新闻标题部分、正文部分使用一个 div 布局标签将其包裹起来，方便通过css设置内容占用的宽度，比如：65%。</li> <li>第二步：通过css为该div设置外边距，左右的外边距分别为：17.5%，上下外边距靠边展示即可，为：0%。</li> </ul> 具体的代码实现如下： <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>焦点访谈：中国底气新思想夯实大国粮仓</title> <style> h1 { color: #4D4F53; } #time { color: #968D92; font-size: 13px; /* 设置字体大小 */ } a { color: black; text-decoration: none; /* 设置文本为一个标准的文本 */ } p { text-indent: 35px; /* 设置首行缩进 */ line-height: 40px; /* 设置行高 */ } #plast { text-align: right; /* 对齐方式 */ } #center { width: 65%; /* margin: 0% 17.5% 0% 17.5% ; */ /* 外边距, 上右下左 */ margin: 0 auto; } </style> </head> <body> <div id="center">  <img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a> > 正文 <h1>焦点访谈：中国底气新思想夯实大国粮仓</h1> <hr> <span id="time">2023年03月02日 21:50</span> <span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a></span> <hr>   <video src="video/1.mp4" controls width="950px"></video>   <p> <strong>央视网消息</strong> （焦点访谈）：.......，重农抓粮一系列政策举措有力有效，我国粮食产量站稳1.3万亿斤台阶，实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中，为保障经济社会发展提供了坚实支撑，为应对各种风险挑战赢得了主动。连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢？ </p> <p> 人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。 </p> <img src="img/1.jpg"> <p> 今年，我国启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。2015年以来，我国粮食产量连续8年稳定在1.3万亿斤以上，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。 </p> <img src="img/2.jpg"> <p> 中国式现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产的发展，意味着我们要立足国内，解决14亿多人吃饭的问题。仓廪实，天下安。保障粮食安全是一个永恒的课题，任何时候都不能放松。........，亿万中国人民辛勤耕耘、不懈奋斗，我们就一定能够牢牢守住粮食安全这一“国之大者”，把中国人的饭碗牢牢端在自己手中，夯实中国式现代化基础。 </p> <p id="plast"> 责任编辑：王树淼 SN242 </p> </div> </body> </html> </code></pre> 浏览器打开此页面，最终效果如下： <a href="http://img.e-com-net.com/image/info8/3aeeee13507a4b17b7b1c0bcecf53f82.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3aeeee13507a4b17b7b1c0bcecf53f82.jpg" alt="【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！_第21张图片" width="650" height="349" style="border:1px solid black;"></a> <h3>2.4 表格标签</h3> **场景：**在网页中以表格（行、列）形式整齐展示数据，我们在一些管理类的系统中，会看到数据通常都是以表格的形式呈现出来的，比如：班级表、学生表、课程表、成绩表等等。 <a href="http://img.e-com-net.com/image/info8/835333b3e7ca4f118b47c7b490c354c0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/835333b3e7ca4f118b47c7b490c354c0.jpg" alt="【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！_第22张图片" width="650" height="281" style="border:1px solid black;"></a> 标签： <ul> <li> <table> : 用于定义整个表格, 可以包裹多个 <tr>，常用属性如下： <ul> <li>border：规定表格边框的宽度</li> <li>width：规定表格的宽度</li> <li>cellspacing: 规定单元之间的空间</li> </ul> </li> <li> <tr> : 表格的行，可以包裹多个 <td> </li> <li> <td> : 表格单元格(普通)，可以包裹内容 , 如果是表头单元格，可以替换为 <th> </li> </ul> 演示： 代码如下： <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML-表格</title> <style> td { text-align: center; /* 单元格内容居中展示 */ } </style> </head> <body> <table border="1px" cellspacing="0" width="600px"> <tr> <th>序号</th> <th>品牌Logo</th> <th>品牌名称</th> <th>企业名称</th> </tr> <tr> <td>1</td> <td> <img src="img/huawei.jpg" width="100px"> </td> <td>华为</td> <td>华为技术有限公司</td> </tr> <tr> <td>2</td> <td> <img src="img/alibaba.jpg" width="100px"> </td> <td>阿里</td> <td>阿里巴巴集团控股有限公司</td> </tr> </table> </body> </html> </code></pre> 打开浏览器，效果如下图所示： <a href="http://img.e-com-net.com/image/info8/fe008894f78e4a78ac1788b516845520.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fe008894f78e4a78ac1788b516845520.jpg" alt="【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！_第23张图片" width="650" height="190" style="border:1px solid black;"></a> 整合表格使用 table 标签包裹 , 其中的每一行数据都是一个 tr , 每一行中的每一个单元格都是一个 td , 而如果是表头单元格, 可以使用 th (具有加粗居中展示的效果)。 <h3>2.5 表单标签</h3> <h4>2.5.1 表单</h4> <h5>2.5.1.1 介绍</h5> 那表单呢,在我们日常的上网的过程中,基本上每天都会遇到。比如，我们经常在访问网站时，出现的登录页面、注册页面、个人信息提交页面，其实都是一个一个的表单。当我们在这些表单中录入数据之后，一点击 “提交”，就会将表单中我们填写的数据采集到，并提交，那其实这个数据呢，一般会提交到服务端，最终保存在数据库中（后面的课程中会讲到）。 <a href="http://img.e-com-net.com/image/info8/1cf0f43b90e24f6996dafdb985627f25.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1cf0f43b90e24f6996dafdb985627f25.jpg" alt="【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！_第24张图片" width="441" height="332" style="border:1px solid black;"></a> <a href="http://img.e-com-net.com/image/info8/53c708d1fd6e4e88a0f583d3c1e46afd.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/53c708d1fd6e4e88a0f583d3c1e46afd.jpg" alt="【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！_第25张图片" width="541" height="584" style="border:1px solid black;"></a> 那其实，上述的整个窗口是一个表单，而表单是一项一项的，这个我们称为表单项或表单元素。 <ul> <li> 表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。 </li> <li> 表单标签: <form> </li> <li> 表单属性: <ul> <li>action: 规定表单提交时，向何处发送表单数据，表单提交的URL。</li> <li>method: 规定用于发送表单数据的方式，常见为： GET、POST。 <ul> <li>GET：表单数据是拼接在url后面的，如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。</li> <li>POST：表单数据是在请求体（消息体）中携带的，大小没有限制。</li> </ul> </li> </ul> </li> <li> 表单项标签: 不同类型的input元素、下拉列表、文本域等。 <ul> <li>input: 定义表单项，通过type属性控制输入形式</li> <li>select: 定义下拉列表</li> <li>textarea: 定义文本域</li> </ul> </li> </ul> <h5>2.5.1.2 演示</h5> 1). GET方式提交的表单 <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML-表单</title> </head> <body>  <form action="" method="get"> 用户名: <input type="text" name="username"> 年龄: <input type="text" name="age"> <input type="submit" value="提交"> </form> </body> </html> </code></pre> 表单编写完毕之后，通过浏览器打开此表单，然后再表单项中录入值之后，点击提交，我们会看到表单的数据在url后面提交到服务端，格式为：?username=Tom&age=12。 <a href="http://img.e-com-net.com/image/info8/56a840ae84814b66a085c08d08e979fa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/56a840ae84814b66a085c08d08e979fa.jpg" alt="【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！_第26张图片" width="650" height="323" style="border:1px solid black;"></a> 2). POST方式提交表单 将上述的表单提交方式由get，改为post <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML-表单</title> </head> <body>  <form action="" method="post"> 用户名: <input type="text" name="username"> 年龄: <input type="text" name="age"> <input type="submit" value="提交"> </form> </body> </html> </code></pre> 表单编写完毕之后，通过浏览器打开此表单，然后再表单项中录入值之后，点击提交，我们会看到表单的数据在url后面提交到服务端，格式为：?username=Tom&age=12。 <a href="http://img.e-com-net.com/image/info8/a65bcba7d74f45d791754a11b1154d21.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a65bcba7d74f45d791754a11b1154d21.jpg" alt="【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！_第27张图片" width="650" height="280" style="border:1px solid black;"></a> <h5>2.5.1.3 注意事项</h5> 表单中的所有表单项，要想能够正常的采集数据，在提交的时候能提交到服务端，表单项必须指定name属性。否则，无法提交该表单项。 <pre><code class="prism language-html">用户名: <input type="text" name="username"> </code></pre> <h4>2.5.2 表单项</h4> <h5>2.5.2.1 介绍</h5> 在一个表单中，可以存在很多的表单项，而虽然表单项的形式各式各样，但是表单项的标签其实就只有三个，分别是： <ul> <li> <input>: 表单项 , 通过type属性控制输入形式。 <table> <thead> <tr> <th>type取值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>text</td> <td>默认值，定义单行的输入字段</td> </tr> <tr> <td>password</td> <td>定义密码字段</td> </tr> <tr> <td>radio</td> <td>定义单选按钮</td> </tr> <tr> <td>checkbox</td> <td>定义复选框</td> </tr> <tr> <td>file</td> <td>定义文件上传按钮</td> </tr> <tr> <td>date/time/datetime-local</td> <td>定义日期/时间/日期时间</td> </tr> <tr> <td>number</td> <td>定义数字输入框</td> </tr> <tr> <td>email</td> <td>定义邮件输入框</td> </tr> <tr> <td>hidden</td> <td>定义隐藏域</td> </tr> <tr> <td>submit / reset / button</td> <td>定义提交按钮 / 重置按钮 / 可点击按钮</td> </tr> </tbody> </table></li> <li> <select>: 定义下拉列表, <option> 定义列表项 </li> <li> <textarea>: 文本域 </li> </ul> <h5>2.5.2.2 演示</h5> 创建一个新的表单项的html文件，具体内容如下： <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML-表单项标签</title> </head> <body>  <form action="" method="post"> 姓名: <input type="text" name="name"> <br><br> 密码: <input type="password" name="password"> <br><br> 性别: <input type="radio" name="gender" value="1"> 男 <label><input type="radio" name="gender" value="2"> 女 </label> <br><br> 爱好: <label><input type="checkbox" name="hobby" value="java"> java </label> <label><input type="checkbox" name="hobby" value="game"> game </label> <label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br> 图像: <input type="file" name="image"> <br><br> 生日: <input type="date" name="birthday"> <br><br> 时间: <input type="time" name="time"> <br><br> 日期时间: <input type="datetime-local" name="datetime"> <br><br> 邮箱: <input type="email" name="email"> <br><br> 年龄: <input type="number" name="age"> <br><br> 学历: <select name="degree"> <option value="">----------- 请选择 -----------</option> <option value="1">大专</option> <option value="2">本科</option> <option value="3">硕士</option> <option value="4">博士</option> </select> <br><br> 描述: <textarea name="description" cols="30" rows="10"></textarea> <br><br> <input type="hidden" name="id" value="1">  <input type="button" value="按钮"> <input type="reset" value="重置"> <input type="submit" value="提交"> <br> </form> </body> </html> </code></pre> 通过浏览器打开上述的表单项html文件，最终展示出的表单信息如下： <a href="http://img.e-com-net.com/image/info8/c94af0f596614e589d04d327fb7ad1a6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c94af0f596614e589d04d327fb7ad1a6.jpg" alt="【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！_第28张图片" width="650" height="578" style="border:1px solid black;"></a> 而对于input type=“hidden”，是一个隐藏域，在表单中并不会显示出来，但是在提交表单的时候，是会提交到服务端的。接下来，我们就点击提交按钮，来提交当前表单，看看提交的数据： <a href="http://img.e-com-net.com/image/info8/61a71fff15f545669ee29dd48d021803.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/61a71fff15f545669ee29dd48d021803.jpg" alt="【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！_第29张图片" width="650" height="297" style="border:1px solid black;"></a> <h2>3. 文档查阅</h2> 文档地址: https://www.w3school.com.cn/index.html <h3>3.1 HTML文档查阅</h3> 以video标签为例: <h3>3.2 CSS文档查阅</h3> 以padding属性为例: </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1743068385912045568"></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">你可能感兴趣的:(#,15天学会JavaWeb开发,Java教程,前端,html,css)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1904155673868955648.htm" title="关于 vue2 vue3 响应式数据，及如何清空、重置对象" target="_blank">关于 vue2 vue3 响应式数据，及如何清空、重置对象</a> xixixin_ <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>在一个项目中，后台用的vue3，前端用的是uniappvue2，项目几乎是并行开发，然后在一个vue2数据清空的方法里直接写了一个this.form={}的代码，结果页面出现残留数据让我进一步了解了vue2响应式系统，以及vue3的proxy特性vue2响应式vue2的响应式系统是基于getter和setter工作的。在数据对象初始化的时候，vue会通过object.defineProperty将</div> </li> <li><a href="/article/1904145521602260992.htm" title="SvelteKit 最新中文文档教程（9）—— 部署静态站点与单页应用" target="_blank">SvelteKit 最新中文文档教程（9）—— 部署静态站点与单页应用</a> <div>前言Svelte，一个语法简洁、入门容易，面向未来的前端框架。从Svelte诞生之初，就备受开发者的喜爱，根据统计，从2019年到2024年，连续6年一直是开发者最感兴趣的前端框架No.1：Svelte以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级Web项目。为了帮助大家学习Svelte，我同时搭建了Svelte最新的中文文档站点。如果需要进阶学习，也可以入手我</div> </li> <li><a href="/article/1904145205175578624.htm" title="html大学生网站开发实践作业：传统文化网页设计题材【绒花6页】HTML+CSS+JavaScript (1)" target="_blank">html大学生网站开发实践作业：传统文化网页设计题材【绒花6页】HTML+CSS+JavaScript (1)</a> @码出未来-web网页设计 <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> <div>精彩专栏推荐文末获取联系✍️作者简介:一个热爱把逻辑思维转变为代码的技术博主作者主页:【主页——获取更多优质源码】web前端期末大作业：【毕设项目精品实战案例(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】超炫酷的Echarts大屏可视化源码：【Echarts大屏展示大数据平台可视化(150套)】HTML+CSS+JS实例代码：【️HTML+CSS+JS实例代码</div> </li> <li><a href="/article/1904144826442510336.htm" title="Python 学习笔记1 - 认识Python" target="_blank">Python 学习笔记1 - 认识Python</a> Scora_liu <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>一、什么是Python1989年圣诞节期间，荷兰数学和计算机科学研究学会的GuidovanRossum（吉多.范罗苏姆）决心开发一个新的解释程序，作为ABC语言的替代品。这门ABC语言的替代语言被取名为Python,命名来自Guido爱看的的电视剧MontyPython'sFlyingCircus（蟒蛇马戏团）。二、什么是Python（⭐⭐）Python是一门解释型语言。计算机不能识别任何除了机器</div> </li> <li><a href="/article/1904143313787744256.htm" title="3.19刷题" target="_blank">3.19刷题</a> 山遥路源 <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95%E5%88%B7%E9%A2%98/1.htm">算法刷题</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a> <div>P6443[COCI2010/2011#1]TIMSKO-洛谷#includeusingnamespacestd;intmain(){intn,m,k,maxp=0;cin>>m>>n>>k;for(inti=0;iusingnamespacestd;chara[15][15];intmain(){intr,c,k;cin>>r>>c;for(inti=0;i>a[i][j];}}cin>>k;i</div> </li> <li><a href="/article/1904143314328809472.htm" title="3.21刷题" target="_blank">3.21刷题</a> 山遥路源 <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95%E5%88%B7%E9%A2%98/1.htm">算法刷题</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a> <div>P6723[COCI2015/2016#5]ZAMKA-洛谷#includeusingnamespacestd;intweisum(intn){intsum=0;while(n){sum+=n%10;n/=10;}returnsum;}intmain(){intl,d,x,minn=10000,maxm=0;cin>>l>>d>>x;for(inti=l;imaxm)maxm=i;}}coutus</div> </li> <li><a href="/article/1904143187438530560.htm" title="3.15刷题" target="_blank">3.15刷题</a> 山遥路源 <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95%E5%88%B7%E9%A2%98/1.htm">算法刷题</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a> <div>P6337[COCI2007/2008#2]CRNE-洛谷#includeusingnamespacestd;intmain(){intn;cin>>n;//横加竖最大。n/2,n/2+1if(n%2==0){coutusingnamespacestd;chara[25][25];intmain(){intr,c;stringmins="zz",t;cin>>r>>c;for(inti=1;i>a</div> </li> <li><a href="/article/1904141544844226560.htm" title="前端框架入门：Vue 基础" target="_blank">前端框架入门：Vue 基础</a> 风亦辰739 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91%E5%85%A8%E6%A0%88%E6%8C%87%E5%8D%97/1.htm">前后端开发全栈指南</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Vue.js是一款流行的前端框架，专注于构建用户界面。它采用响应式数据绑定和组件化开发，易于上手且功能强大。Vue3版本引入了CompositionAPI，提升了开发效率。一、Vue.js基础1.Vue介绍Vue是一个渐进式JavaScript框架，可用于：构建单页应用（SPA）。组件化开发，提高代码复用性。结合Vuex（状态管理）和VueRouter（路由）开发大型应用。2.Vue模板语法Vue</div> </li> <li><a href="/article/1904128679642984448.htm" title="【html5期末大作业】基于HTML仿QQ音乐官网网站" target="_blank">【html5期末大作业】基于HTML仿QQ音乐官网网站</a> IT-司马青衫 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a> <div>精彩专栏推荐文末获取联系✍️作者简介:一个热爱把逻辑思维转变为代码的技术博主作者主页:【主页——获取更多优质源码】web前端期末大作业：【毕设项目精品实战案例(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】超炫酷的Echarts大屏可视化源码：【Echarts大屏展示大数据平台可视化(150套)】HTML+CSS+JS实例代码：【️HTML+CSS+JS实例代码</div> </li> <li><a href="/article/1904124387813027840.htm" title="微信小程序和uni-app的区别" target="_blank">微信小程序和uni-app的区别</a> cccv工程师 <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/notepad%2B%2B/1.htm">notepad++</a> <div>开发语言和框架：Uni-app：Uni-app使用Vue.js框架进行开发，利用Vue的语法和生命周期函数，开发者可以使用熟悉的前端技术栈。微信小程序：微信小程序使用自己的框架，基于WXML（类似于HTML）和WXSS（样式语言）进行开发，需要学习微信小程序独有的语法和组件。平台支持：Uni-app：Uni-app是一个跨平台开发框架，可以将一套代码编译成多个平台的应用，包括微信小程序、H5、Ap</div> </li> <li><a href="/article/1904123504991727616.htm" title="前端高级 CSS 用法实战指南" target="_blank">前端高级 CSS 用法实战指南</a> Real Man★ <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>前端高级CSS用法实战指南CSS的高级用法能显著提升开发效率、优化页面性能并实现复杂的视觉效果。以下是现代CSS的核心高级技巧和实战案例，涵盖布局、动画、优化等方向：一、现代布局系统CSSGrid复杂布局场景：实现不规则网格（如杂志排版、仪表盘）。示例：定义网格模板与区域命名：css.container{display:grid;grid-template-columns:200px1fr300p</div> </li> <li><a href="/article/1904114674908065792.htm" title="深度学习：让机器学会“思考”的魔法" target="_blank">深度学习：让机器学会“思考”的魔法</a> AI极客Jayden　 <a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a> <div>文章目录引言：从“鹦鹉学舌”到“举一反三”一、深度学习是什么？1.定义：机器的“大脑”2.核心思想：从数据中“悟”出规律二、深度学习的“大脑”结构：神经网络1.神经元：深度学习的基本单元2.神经网络：多层“神经元”的组合3.深度：为什么需要多层？三、深度学习如何“学习”？1.训练过程：从“笨拙”到“熟练”2.损失函数：衡量“错误”的尺子3.反向传播：从错误中“反思”四、深度学习的“超能力”1.图像</div> </li> <li><a href="/article/1904104836870238208.htm" title="基于Python+Django的可视化学习系统设计与实现（毕业设计源码+技术文档+系统部署）" target="_blank">基于Python+Django的可视化学习系统设计与实现（毕业设计源码+技术文档+系统部署）</a> 逐梦设计 <a class="tag" taget="_blank" href="/search/Python%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1%E5%AE%9E%E6%88%98%E6%A1%88%E4%BE%8B/1.htm">Python毕业设计实战案例</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1/1.htm">毕业设计</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81/1.htm">源码</a> <div>博主简介作者简介：Java领域优质创作者、CSDN博客专家、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、多年校企合作经验，被多个学校常年聘为校外企业导师，指导学生毕业设计并参与学生毕业答辩指导，有较为丰富的相关经验。期待与各位高校教师、企业讲师以及同行交流合作主要内容：Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能与大数据、</div> </li> <li><a href="/article/1904104710571356160.htm" title="【前端构建】使用Docker打包多个前端项目到一个Nginx镜像，并给conf文件动态传递参数" target="_blank">【前端构建】使用Docker打包多个前端项目到一个Nginx镜像，并给conf文件动态传递参数</a> Zacks_xdc <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a> <div>提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录背景正文DockerFileNginx配置模板接收变量并替换Shell脚本将Nginx配置模板替换成配置文件使用构建镜像运行容器总结背景公司给一些客户要部署三个前端项目。最初，每个前端项目都以独立的镜像形式交付并部署。然而，随着客户数量的增加，每个客户都提出了一些自定义需求，后端也进行了对应改造。这导致了部署过程变得复杂且繁琐</div> </li> <li><a href="/article/1904099291195043840.htm" title="代码随想录算法训练营第四十一天 | hot65/100| 33.搜索旋转排序数组、153.寻找旋转排序数组中的最小值、155.最小栈、394.字符串解码" target="_blank">代码随想录算法训练营第四十一天 | hot65/100| 33.搜索旋转排序数组、153.寻找旋转排序数组中的最小值、155.最小栈、394.字符串解码</a> boguboji <a class="tag" taget="_blank" href="/search/%E5%88%B7%E9%A2%98/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/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>33.搜索旋转排序数组思路是：数组可能有两种情况2345671和6712345将数组一分为二，其中一定有一个是有序的，每次判断前半部分是有序的还是后半部分是有序的，每次只在有序的那部分里找。无序那部分不管（没找到会重新一分为二，继续在有序的一半里找，迟早会找到）注意点：这道题重点是记住边界条件（哪些是小于等于小于大于等于大于）有小于等于/大于等于的情况是因为，如果出现[2,1]中找1的情况，需要有</div> </li> <li><a href="/article/1904098911585366016.htm" title="代码随想录算法训练营第十天 | 栈与队列part01| 232.用栈实现队列、225. 用队列实现栈、 20. 有效的括号、1047. 删除字符串中的所有相邻重复项" target="_blank">代码随想录算法训练营第十天 | 栈与队列part01| 232.用栈实现队列、225. 用队列实现栈、 20. 有效的括号、1047. 删除字符串中的所有相邻重复项</a> boguboji <a class="tag" taget="_blank" href="/search/%E5%88%B7%E9%A2%98/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/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>232.用栈实现队列栈与队列的基本知识：Stackstack=newStackq=newLinkedListstack=newStack显然是存储整数类型，如果要存储字符，应该用Dequedeque=newLinkedListstack=newStack<>();还有我写for(inti=0;i<s.length()-1;i++)应该是for(inti=0;i<s.length();i++)注意不</div> </li> <li><a href="/article/1904098785139683328.htm" title="代码随想录算法训练营第二十三天 | 回溯算法part02| 39. 组合总和、40.组合总和II、131.分割回文串" target="_blank">代码随想录算法训练营第二十三天 | 回溯算法part02| 39. 组合总和、40.组合总和II、131.分割回文串</a> boguboji <a class="tag" taget="_blank" href="/search/%E5%88%B7%E9%A2%98/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/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>39.组合总和这道题和前面组合问题的区别是，取的元素可以重复，也就是遍历的时候，同一个元素可以一直取。所以for循环里，逐个添加元素，判断和大于目标时break（否则会一直加）还是新建二维数组放结果，一维数组放path。输入参数为放结果数组、path、提供的数组、目标值、目前总和sum、startIndex提前把提供的数组排序，用Arrays.sort()这样sum超过target就break递归</div> </li> <li><a href="/article/1904094627313545216.htm" title="前端简单数据存储：跳过后端数据库的一种高效策略，应对一些不需要后端访问数据库的简单操作：静态 Markdown 文件存储" target="_blank">前端简单数据存储：跳过后端数据库的一种高效策略，应对一些不需要后端访问数据库的简单操作：静态 Markdown 文件存储</a> 【D＇accumulation】 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</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/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>问题提出：在一些应用场景中，有些数据并不重要，也不需要频繁地进行动态增删改查，比如品牌历史、产品介绍等说明性内容。为此，我选择在前端直接存储这些静态数据，跳过后端数据库调用。本文将分享如何利用Vue工程中直接存放Markdown文件与内嵌数据，将数据管理与业务逻辑解耦，从而实现快速开发、便于维护和灵活更新的目的。静态Markdown文件存储方法案例：原理：将Markdown文件（如brandHis</div> </li> <li><a href="/article/1904087440449138688.htm" title="【开源宝藏】30天学会CSS - DAY6 第六课流光文字动画" target="_blank">【开源宝藏】30天学会CSS - DAY6 第六课流光文字动画</a> hikktn <a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E5%AE%9D%E8%97%8F/1.htm">开源宝藏</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</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> <div>第0步：项目结构lighting-text/├─index.html└─style.cssindex.html：包含列表，其中每个放一个字母或符号。style.css：设置背景、文字样式，以及关键帧动画（lighting）让文字逐个闪光。第1步：编写HTML结构在index.html中，核心就是一个无序列表，每个对应一个字母/符号：CSSAnimationDESAFIO♡CSS代码要点每个都是一个</div> </li> <li><a href="/article/1904081769238425600.htm" title="leetcode:15.三数之和" target="_blank">leetcode:15.三数之和</a> uncle_ll <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E7%BB%83%E4%B9%A0-Leetcode/1.htm">编程练习-Leetcode</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/%E4%B8%89%E6%95%B0%E4%B9%8B%E5%92%8C/1.htm">三数之和</a><a class="tag" taget="_blank" href="/search/%E5%8F%8C%E6%8C%87%E9%92%88/1.htm">双指针</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95%E8%AE%AD%E7%BB%83%E8%90%A5/1.htm">算法训练营</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84/1.htm">数组</a> <div>15.三数之和来源：力扣（LeetCode）链接:https://leetcode.cn/problems/3sum给你一个包含n个整数的数组nums，判断nums中是否存在三个元素a，b，c，使得a+b+c=0？请你找出所有和为0且不重复的三元组。注意：答案中不可以包含重复的三元组。示例1：输入：nums=[-1,0,1,2,-1,-4]输出：[[-1,-1,2],[-1,0,1]]示例2：输入</div> </li> <li><a href="/article/1904079499855720448.htm" title="LeetCode第104题_二叉树的最大深度" target="_blank">LeetCode第104题_二叉树的最大深度</a> @蓝莓果粒茶 <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</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><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a> <div>LeetCode第104题：二叉树的最大深度题目描述给定一个二叉树，找出其最大深度。二叉树的深度为根节点到最远叶子节点的最长路径上的节点数。说明:叶子节点是指没有子节点的节点。难度简单问题链接https://leetcode.cn/problems/maximum-depth-of-binary-tree/示例示例1：输入：root=[3,9,20,null,null,15,7]输出：3示例2：输</div> </li> <li><a href="/article/1904071684101566464.htm" title="oracle12c 监控表状态，类似触发器，获取表名称乱码问题" target="_blank">oracle12c 监控表状态，类似触发器，获取表名称乱码问题</a> YiWait <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>1、类似触发器原理，实时监听2、解决获取表名称乱码问题进入调试模式查看源码里面这个类，oracletableName的编码模式：主体代码如下：搞了两天终于发现问题所在，tablename开始出来是???这种乱码。确定是字符集编码的问题，在网上找了类似问题。需要引入oracle的语言包。@Slf4jpublicclassMyTest{publicstaticvoidmain(String[]args</div> </li> <li><a href="/article/1904066766007496704.htm" title="优选算法训练篇07--力扣LCR179.查找总价格为目标值的两个商品" target="_blank">优选算法训练篇07--力扣LCR179.查找总价格为目标值的两个商品</a> 大胆飞猪 <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95%E8%AE%AD%E7%BB%83%E7%AF%87/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/leetcode/1.htm">leetcode</a> <div>目录1.题目链接：LCR179.查找总价格为目标值的两个商品2.题目描述：3.解法一(暴力解法，会超时)：4.解法二(双指针-对撞指针):1.题目链接：LCR179.查找总价格为目标值的两个商品2.题目描述：购物车内的商品价格按照升序记录于数组price。请在购物车中找到两个商品的价格总和刚好是target。若存在多种情况，返回任一结果即可。示例1：输入：price=[3,9,12,15],tar</div> </li> <li><a href="/article/1904065757348687872.htm" title="LeetCode215. 数组中的第K个最大元素" target="_blank">LeetCode215. 数组中的第K个最大元素</a> techpupil <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%BF%AB%E9%80%9F%E9%80%89%E6%8B%A9/1.htm">快速选择</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a> <div>给定整数数组nums和整数k，请返回数组中第k个最大的元素。请注意，你需要找的是数组排序后的第k个最大的元素，而不是第k个不同的元素。你必须设计并实现时间复杂度为O(n)的算法解决此问题。示例1:输入:[3,2,1,5,6,4],k=2输出:5示例2:输入:[3,2,3,1,2,4,5,5,6],k=4输出:4分析：本题我们能想到最简单的方法就是直接给数组排序，然后取第第N-k个元素，但题目要求是</div> </li> <li><a href="/article/1904059329728802816.htm" title="前端vscode中好用的scss插件推荐" target="_blank">前端vscode中好用的scss插件推荐</a> 熊宝王 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/scss/1.htm">scss</a> <div>一、LiveSassCompilerLiveSassCompiler是VisualStudioCode(VSCode)中非常流行的一个插件，用于将Sass/SCSS文件实时编译为标准的CSS文件。Sass（SyntacticallyAwesomeStyleSheets）是一种CSS预处理器，提供了变量、嵌套、混合（Mixins）、继承等强大功能，而LiveSassCompiler插件可以帮助开发者</div> </li> <li><a href="/article/1904059330253090816.htm" title="Nginx多台服务器负载均衡" target="_blank">Nginx多台服务器负载均衡</a> PS测 <a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1/1.htm">负载均衡</a> <div>一操作步骤:1.服务器IP45.114.124.215//主服务器(安装Nginx)45.114.124.99//从服务器(安装Nginx或Apache都可以)2.保证2台服务器网络互通3.在2台服务器上设置不同页面方便验证3.1在主服务器添加一个可以访问的站点3.2在次服务器添加一个站点,端口必须是主服务器在nginx指定给次服务器的端口4.在主服务器45.114.124.215安装Nginx，</div> </li> <li><a href="/article/1904057810648363008.htm" title="Windows 使用管理命令动态的修改保留端口范围" target="_blank">Windows 使用管理命令动态的修改保留端口范围</a> hamish-wu <a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a> <div>window会占用一些常用端口问题背景这个问题的背景分为两部分：Windows中有一个「TCP动态端口范围」，处在这个范围内的端口，有时候会被一些服务占用。在WindowsVista（或WindowsServer2008）之前，动态端口范围是1025到5000；在WindowsVista（或WindowsServer2008）之后，新的默认起始端口为49152，新的默认结束端口为65535。如果安</div> </li> <li><a href="/article/1904056675216715776.htm" title="mongodb与爬虫的关系" target="_blank">mongodb与爬虫的关系</a> getapi <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>MongoDB与爬虫之间的关系主要体现在数据存储和管理的层面。爬虫（WebCrawler或Spider）是一种自动化工具，用于从互联网上抓取网页内容或特定数据。而MongoDB是一个NoSQL数据库，常被用来存储和管理爬虫抓取到的数据。以下是它们之间关系的具体分析：1.爬虫的数据存储需求爬虫在运行过程中会抓取大量的非结构化或半结构化数据（例如HTML页面、JSON数据、图片链接等）。这些数据通常具</div> </li> <li><a href="/article/1904052889639251968.htm" title="字节跳动离职后，转行学起了AI大模型！该说不说，真的香！！" target="_blank">字节跳动离职后，转行学起了AI大模型！该说不说，真的香！！</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/AI%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">AI大模型</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">语言模型</a><a class="tag" taget="_blank" href="/search/agi/1.htm">agi</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a><a class="tag" taget="_blank" href="/search/LLM/1.htm">LLM</a><a class="tag" taget="_blank" href="/search/%E8%BD%AC%E8%A1%8C/1.htm">转行</a> <div>个人自我介绍鄙人出生于南方小乡镇，为了走出小镇，在当地够拼够努力，不是自夸，确确实实也算得上“别人家的小孩”，至少在学习这件事情少，没有要家里人操过心。高考特别顺利，一个老牌985，具体哪个学校就不说了，不想给母校丢脸。毕业后，也算是“风光”地进入了字节跳动。做的是运维测试。在职期间刚入职的时候真的信心满满⛽️，但才3天就感受到了互联网头部公司的强度不是一般的大。明面上的早十晚八工作制完全不存在，</div> </li> <li><a href="/article/1904050998373052416.htm" title="SpringSecurity——如何获取当前登录用户的信息" target="_blank">SpringSecurity——如何获取当前登录用户的信息</a> 代码代码快快显灵 <a class="tag" taget="_blank" href="/search/springsecurity/1.htm">springsecurity</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/SpringSecurity/1.htm">SpringSecurity</a> <div>目录1.直接注入Principal2.直接注入Authentication3.注入UsernamePasswordAuthenticationToken4.通过SecurityContextHolder获取5.使用自定义工具方法总结如何获取更多的用户信息自定义用户实体类如何忽略某些字段（不返回前端）以及规范日期格式登录成功后的处理：在SpringSecurity中，当前登录用户的信息实际上都存储在</div> </li> <li><a href="/article/119.htm" title="Spring中@Value注解，需要注意的地方" target="_blank">Spring中@Value注解，需要注意的地方</a> 无量 <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/bean/1.htm">bean</a><a class="tag" taget="_blank" href="/search/%40Value/1.htm">@Value</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>Spring 3以后,支持@Value注解的方式获取properties文件中的配置值，简化了读取配置文件的复杂操作 1、在applicationContext.xml文件(或引用文件中)中配置properties文件 <bean id="appProperty" class="org.springframework.beans.fac</div> </li> <li><a href="/article/246.htm" title="mongoDB 分片" target="_blank">mongoDB 分片</a> 开窍的石头 <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div> mongoDB的分片。要mongos查询数据时候先查询configsvr看数据在那台shard上，configsvr上边放的是metar信息，指的是那条数据在那个片上。由此可以看出mongo在做分片的时候咱们至少要有一个configsvr,和两个以上的shard（片）信息。第一步启动两台以上的mongo服务 &nb</div> </li> <li><a href="/article/373.htm" title="OVER(PARTITION BY)函数用法" target="_blank">OVER(PARTITION BY)函数用法</a> 0624chenhong <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>这篇写得很好，引自 http://www.cnblogs.com/lanzi/archive/2010/10/26/1861338.html OVER(PARTITION BY)函数用法 2010年10月26日 OVER(PARTITION BY)函数介绍开窗函数 &nb</div> </li> <li><a href="/article/500.htm" title="Android开发中，ADB server didn't ACK 解决方法" target="_blank">Android开发中，ADB server didn't ACK 解决方法</a> 一炮送你回车库 <a class="tag" taget="_blank" href="/search/Android%E5%BC%80%E5%8F%91/1.htm">Android开发</a> <div>首先通知：凡是安装360、豌豆荚、腾讯管家的全部卸载，然后再尝试。一直没搞明白这个问题咋出现的，但今天看到一个方法，搞定了！原来是豌豆荚占用了 5037 端口导致。参见原文章：一个豌豆荚引发的血案——关于ADB server didn't ACK的问题简单来讲，首先将Windows任务进程中的豌豆荚干掉，如果还是不行，再继续按下列步骤排查。 &nb</div> </li> <li><a href="/article/627.htm" title="canvas中的像素绘制问题" target="_blank">canvas中的像素绘制问题</a> 换个号韩国红果果 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/canvas/1.htm">canvas</a> <div>pixl的绘制，1.如果绘制点正处于相邻像素交叉线，绘制x像素的线宽，则从交叉线分别向前向后绘制x/2个像素，如果x/2是整数，则刚好填满x个像素，如果是小数，则先把整数格填满，再去绘制剩下的小数部分，绘制时，是将小数部分的颜色用来除以一个像素的宽度，颜色会变淡。所以要用整数坐标来画的话（即绘制点正处于相邻像素交叉线时），线宽必须是2的整数倍。否则会出现不饱满的像素。 2.如果绘制点为一个像素的</div> </li> <li><a href="/article/754.htm" title="编码乱码问题" target="_blank">编码乱码问题</a> 灵静志远 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A0%81/1.htm">编码</a> <div>1、JVM中单个字符占用的字节长度跟编码方式有关，而默认编码方式又跟平台是一一对应的或说平台决定了默认字符编码方式；2、对于单个字符：ISO-8859-1单字节编码，GBK双字节编码，UTF-8三字节编码；因此中文平台(中文平台默认字符集编码GBK)下一个中文字符占2个字节，而英文平台(英文平台默认字符集编码Cp1252(类似于ISO-8859-1))。 3、getBytes()、getByte</div> </li> <li><a href="/article/881.htm" title="java 求几个月后的日期" target="_blank">java 求几个月后的日期</a> darkranger <a class="tag" taget="_blank" href="/search/calendar/1.htm">calendar</a><a class="tag" taget="_blank" href="/search/getinstance/1.htm">getinstance</a> <div>Date plandate = planDate.toDate(); SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd"); Calendar cal = Calendar.getInstance(); cal.setTime(plandate); // 取得三个月后时间 cal.add(Calendar.M</div> </li> <li><a href="/article/1008.htm" title="数据库设计的三大范式（通俗易懂）" target="_blank">数据库设计的三大范式（通俗易懂）</a> aijuans <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93%E5%A4%8D%E4%B9%A0/1.htm">数据库复习</a> <div>关系数据库中的关系必须满足一定的要求。满足不同程度要求的为不同范式。数据库的设计范式是数据库设计所需要满足的规范。只有理解数据库的设计范式，才能设计出高效率、优雅的数据库，否则可能会设计出错误的数据库. 目前，主要有六种范式：第一范式、第二范式、第三范式、BC范式、第四范式和第五范式。满足最低要求的叫第一范式，简称1NF。在第一范式基础上进一步满足一些要求的为第二范式，简称2NF。其余依此类推。</div> </li> <li><a href="/article/1135.htm" title="想学工作流怎么入手" target="_blank">想学工作流怎么入手</a> atongyeye <a class="tag" taget="_blank" href="/search/jbpm/1.htm">jbpm</a> <div>工作流在工作中变得越来越重要，很多朋友想学工作流却不知如何入手。很多朋友习惯性的这看一点，那了解一点，既不系统，也容易半途而废。好比学武功，最好的办法是有一本武功秘籍。研究明白，则犹如打通任督二脉。系统学习工作流，很重要的一本书《JBPM工作流开发指南》。本人苦苦学习两个月，基本上可以解决大部分流程问题。整理一下学习思路，有兴趣的朋友可以参考下。 1 首先要</div> </li> <li><a href="/article/1262.htm" title="Context和SQLiteOpenHelper创建数据库" target="_blank">Context和SQLiteOpenHelper创建数据库</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/Context%E5%88%9B%E5%BB%BA%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">Context创建数据库</a> <div> 一直以为安卓数据库的创建就是使用SQLiteOpenHelper创建,但是最近在android的一本书上看到了Context也可以创建数据库,下面我们一起分析这两种方式创建数据库的方式和区别,重点在SQLiteOpenHelper 一:SQLiteOpenHelper创建数据库: 1,SQLi</div> </li> <li><a href="/article/1389.htm" title="浅谈group by和distinct" target="_blank">浅谈group by和distinct</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/group+by/1.htm">group by</a><a class="tag" taget="_blank" href="/search/distinct/1.htm">distinct</a> <div> group by和distinct只了去重意义一样，但是group by应用范围更广泛些，如分组汇总或者从聚合函数里筛选数据等。譬如：统计每id数并且只显示数大于3 select id ,count(id) from ta</div> </li> <li><a href="/article/1516.htm" title="vi opertion" target="_blank">vi opertion</a> 征客丶 <a class="tag" taget="_blank" href="/search/mac/1.htm">mac</a><a class="tag" taget="_blank" href="/search/opration/1.htm">opration</a><a class="tag" taget="_blank" href="/search/vi/1.htm">vi</a> <div>进入 command mode （命令行模式）按 esc 键再按 shift + 冒号注：以下命令中带 $ 【在命令行模式下进行】，不带 $ 【在非命令行模式下进行】一、文件操作 1.1、强制退出不保存 $ q! 1.2、保存 $ w 1.3、保存并退出 $ wq 1.4、刷新或重新加载已打开的文件 $ e 二、光标移动 2.1、跳到指定行数字</div> </li> <li><a href="/article/1643.htm" title="【Spark十四】深入Spark RDD第三部分RDD基本API" target="_blank">【Spark十四】深入Spark RDD第三部分RDD基本API</a> bit1129 <a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a> <div> 对于K/V类型的RDD,如下操作是什么含义？ val rdd = sc.parallelize(List(("A",3),("C",6),("A",1),("B",5)) rdd.reduceByKey(_+_).collect reduceByKey在这里的操作，是把</div> </li> <li><a href="/article/1770.htm" title="java类加载机制" target="_blank">java类加载机制</a> BlueSkator <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%99%9A%E6%8B%9F%E6%9C%BA/1.htm">虚拟机</a> <div>java类加载机制 1.java类加载器的树状结构引导类加载器 ^ | 扩展类加载器 ^ | 系统类加载器 java使用代理模式来完成类加载，java的类加载器也有类似于继承的关系，引导类是最顶层的加载器，它是所有类的根加载器，它负责加载java核心库。当一个类加载器接到装载类到虚拟机的请求时，通常会代理给父类加载器，若已经是根加载器了，就自己完成加载。虚拟机区分一个Cla</div> </li> <li><a href="/article/1897.htm" title="动态添加文本框" target="_blank">动态添加文本框</a> BreakingBad <a class="tag" taget="_blank" href="/search/%E6%96%87%E6%9C%AC%E6%A1%86/1.htm">文本框</a> <div> <script> var num=1; function AddInput() { var str=""; str+="<input </div> </li> <li><a href="/article/2024.htm" title="读《研磨设计模式》-代码笔记-单例模式" target="_blank">读《研磨设计模式》-代码笔记-单例模式</a> bylijinnan <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> <div>声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ public class Singleton { } /* * 懒汉模式。注意，getInstance如果在多线程环境中调用，需要加上synchronized，否则存在线程不安全问题 */ class LazySingleton</div> </li> <li><a href="/article/2151.htm" title="iOS应用打包发布常见问题" target="_blank">iOS应用打包发布常见问题</a> chenhbc <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/iOS%E5%8F%91%E5%B8%83/1.htm">iOS发布</a><a class="tag" taget="_blank" href="/search/iOS%E4%B8%8A%E4%BC%A0/1.htm">iOS上传</a><a class="tag" taget="_blank" href="/search/iOS%E6%89%93%E5%8C%85/1.htm">iOS打包</a> <div>这个月公司安排我一个人做iOS客户端开发，由于急着用，我先发布一个版本，由于第一次发布iOS应用，期间出了不少问题，记录于此。 1、使用Application Loader 发布时报错：Communication error.please use diagnostic mode to check connectivity.you need to have outbound acc</div> </li> <li><a href="/article/2278.htm" title="工作流复杂拓扑结构处理新思路" target="_blank">工作流复杂拓扑结构处理新思路</a> comsci <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%B7%A5%E4%BD%9C/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/%E4%BC%81%E4%B8%9A%E5%BA%94%E7%94%A8/1.htm">企业应用</a><a class="tag" taget="_blank" href="/search/OO/1.htm">OO</a> <div> 我们走的设计路线和国外的产品不太一样，不一样在哪里呢？国外的流程的设计思路是通过事先定义一整套规则(类似XPDL)来约束和控制流程图的复杂度(我对国外的产品了解不够多，仅仅是在有限的了解程度上面提出这样的看法)，从而避免在流程引擎中处理这些复杂的图的问题，而我们却没有通过事先定义这样的复杂的规则来约束和降低用户自定义流程图的灵活性，这样一来，在引擎和流程流转控制这一个层面就会遇到很</div> </li> <li><a href="/article/2405.htm" title="oracle 11g新特性Flashback data archive" target="_blank">oracle 11g新特性Flashback data archive</a> daizj <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>1. 什么是flashback data archive Flashback data archive是oracle 11g中引入的一个新特性。Flashback archive是一个新的数据库对象，用于存储一个或多表的历史数据。Flashback archive是一个逻辑对象，概念上类似于表空间。实际上flashback archive可以看作是存储一个或多个表的所有事务变化的逻辑空间。 </div> </li> <li><a href="/article/2532.htm" title="多叉树:2-3-4树" target="_blank">多叉树:2-3-4树</a> dieslrae <a class="tag" taget="_blank" href="/search/%E6%A0%91/1.htm">树</a> <div> 平衡树多叉树,每个节点最多有4个子节点和3个数据项,2,3,4的含义是指一个节点可能含有的子节点的个数,效率比红黑树稍差.一般不允许出现重复关键字值.2-3-4树有以下特征: 1、有一个数据项的节点总是有2个子节点(称为2-节点) 2、有两个数据项的节点总是有3个子节点(称为3-节</div> </li> <li><a href="/article/2659.htm" title="C语言学习七动态分配 malloc的使用" target="_blank">C语言学习七动态分配 malloc的使用</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/language/1.htm">language</a><a class="tag" taget="_blank" href="/search/malloc/1.htm">malloc</a> <div>/* 2013年3月15日15:16:24 malloc 就memory(内存) allocate(分配)的缩写本程序没有实际含义，只是理解使用 */ # include <stdio.h> # include <malloc.h> int main(void) { int i = 5; //分配了4个字节静态分配 int * p </div> </li> <li><a href="/article/2786.htm" title="Objective-C编码规范[译]" target="_blank">Objective-C编码规范[译]</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83/1.htm">代码规范</a> <div> 原文链接 : The official raywenderlich.com Objective-C style guide 原文作者 : raywenderlich.com Team 译文出自 : raywenderlich.com Objective-C编码规范译者 : Sam Lau </div> </li> <li><a href="/article/2913.htm" title="0.性能优化-目录" target="_blank">0.性能优化-目录</a> frank1234 <a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a> <div>从今天开始笔者陆续发表一些性能测试相关的文章，主要是对自己前段时间学习的总结，由于水平有限，性能测试领域很深，本人理解的也比较浅，欢迎各位大咖批评指正。主要内容包括：一、性能测试指标吞吐量、TPS、响应时间、负载、可扩展性、PV、思考时间 http://frank1234.iteye.com/blog/2180305 二、性能测试策略生产环境相同基准测试预热等 htt</div> </li> <li><a href="/article/3040.htm" title="Java父类取得子类传递的泛型参数Class类型" target="_blank">Java父类取得子类传递的泛型参数Class类型</a> happyqing <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%B3%9B%E5%9E%8B/1.htm">泛型</a><a class="tag" taget="_blank" href="/search/%E7%88%B6%E7%B1%BB/1.htm">父类</a><a class="tag" taget="_blank" href="/search/%E5%AD%90%E7%B1%BB/1.htm">子类</a><a class="tag" taget="_blank" href="/search/Class/1.htm">Class</a> <div> import java.lang.reflect.ParameterizedType; import java.lang.reflect.Type; import org.junit.Test; abstract class BaseDao<T> { public void getType() { //Class<E> clazz =</div> </li> <li><a href="/article/3167.htm" title="跟我学SpringMVC目录汇总贴、PDF下载、源码下载" target="_blank">跟我学SpringMVC目录汇总贴、PDF下载、源码下载</a> jinnianshilongnian <a class="tag" taget="_blank" href="/search/springMVC/1.htm">springMVC</a> <div> ----广告-------------------------------------------------------------- 网站核心商详页开发掌握Java技术，掌握并发/异步工具使用，熟悉spring、ibatis框架；掌握数据库技术，表设计和索引优化，分库分表/读写分离；了解缓存技术，熟练使用如Redis/Memcached等主流技术；了解Ngin</div> </li> <li><a href="/article/3294.htm" title="the HTTP rewrite module requires the PCRE library" target="_blank">the HTTP rewrite module requires the PCRE library</a> 流浪鱼 <a class="tag" taget="_blank" href="/search/rewrite/1.htm">rewrite</a> <div>./configure: error: the HTTP rewrite module requires the PCRE library. 模块依赖性Nginx需要依赖下面3个包 1. gzip 模块需要 zlib 库 ( 下载: http://www.zlib.net/ ) 2. rewrite 模块需要 pcre 库 ( 下载: http://www.pcre.org/ ) 3. s</div> </li> <li><a href="/article/3421.htm" title="第12章 Ajax（中）" target="_blank">第12章 Ajax（中）</a> onestopweb <a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/</div> </li> <li><a href="/article/3548.htm" title="Optimize query with Query Stripping in Web Intelligence" target="_blank">Optimize query with Query Stripping in Web Intelligence</a> blueoxygen <a class="tag" taget="_blank" href="/search/BO/1.htm">BO</a> <div>http://wiki.sdn.sap.com/wiki/display/BOBJ/Optimize+query+with+Query+Stripping+in+Web+Intelligence and a very straightfoward video http://www.sdn.sap.com/irj/scn/events?rid=/library/uuid/40ec3a0c-936</div> </li> <li><a href="/article/3675.htm" title="Java开发者写SQL时常犯的10个错误" target="_blank">Java开发者写SQL时常犯的10个错误</a> tomcat_oracle <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a> <div>1、不用PreparedStatements 　　有意思的是，在JDBC出现了许多年后的今天，这个错误依然出现在博客、论坛和邮件列表中，即便要记住和理解它是一件很简单的事。开发者不使用PreparedStatements的原因可能有如下几个：　　他们对PreparedStatements不了解　　他们认为使用PreparedStatements太慢了　　他们认为写Prepar</div> </li> <li><a href="/article/3802.htm" title="世纪互联与结盟有感" target="_blank">世纪互联与结盟有感</a> 阿尔萨斯 <div> 10月10日，世纪互联与（Foxcon）签约成立合资公司，有感。全球电子制造业巨头（全球500强企业）与世纪互联共同看好IDC、云计算等业务在中国的增长空间，双方迅速果断出手，在资本层面上达成合作，此举体现了全球电子制造业巨头对世纪互联IDC业务的欣赏与信任，另一方面反映出世纪互联目前良好的运营状况与广阔的发展前景。众所周知，精于电子产品制造（世界第一），对于世纪互联而言，能够与结盟</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>

【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！

目录

1. 前端开发介绍

2. HTML & CSS

标签展示标题，使用展示超链接，使用展示图片，展示视频。

2.1 HTML快速入门

2.1.1 操作

标签展示标题，使用展示超链接，使用展示图片，