老牛源码

【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/1943990125864218624.htm" title="JavaScript 树形菜单总结" target="_blank">JavaScript 树形菜单总结</a> Auscy <a class="tag" taget="_blank" href="/search/microsoft/1.htm">microsoft</a> <div>树形菜单是前端开发中常见的交互组件，用于展示具有层级关系的数据（如文件目录、分类列表、组织架构等）。以下从核心概念、实现方式、常见功能及优化方向等方面进行总结。一、核心概念层级结构：数据以父子嵌套形式存在，如{id:1,children:[{id:2}]}。节点：树形结构的基本单元，包含自身信息及子节点（若有）。展开/折叠：子节点的显示与隐藏切换，是树形菜单的核心交互。递归渲染：因数据层级不固定，</div> </li> <li><a href="/article/1943988865945628672.htm" title="Leetcode 148. 排序链表" target="_blank">Leetcode 148. 排序链表</a> <div>文章目录前引题目代码（首刷看题解）代码（8.9二刷部分看解析）代码（9.15三刷部分看解析）前引综合性比较强的一道题，要求时间复杂度必须O(logn)才能通过，最适合链表的排序算法就是归并。这里采用自顶向下的方法步骤：找到链表中点（双指针）对两个子链表排序(递归，直到只有一个结点，记得将子链表最后指向nullptr）归并（引入dummy结点）题目Leetcode148.排序链表代码（首刷看题解）c</div> </li> <li><a href="/article/1943987856808669184.htm" title="前端项目架构设计要领" target="_blank">前端项目架构设计要领</a> <div>1.架构设计的核心目标在设计前端项目架构时，核心目标是模块化、可维护、可扩展、可测试，以及开发效率的最大化。这些目标可以通过以下几个方面来实现：组件化：将UI功能封装为可复用的组件。模块化：将业务逻辑分解为独立的模块或服务。自动化构建与部署：实现自动化构建、测试和部署流程，减少人为操作的错误。代码规范化与检查：确保团队协作时，代码风格和质量一致。2.项目目录结构设计一个清晰合理的目录结构对大型项目</div> </li> <li><a href="/article/1943987101301272576.htm" title="精通Canvas：15款时钟特效代码实现指南" target="_blank">精通Canvas：15款时钟特效代码实现指南</a> 烟幕缭绕 <div>本文还有配套的精品资源，点击获取简介：HTML5的Canvas是一个用于绘制矢量图形的API，通过JavaScript实现动态效果。本项目集合了15种不同的时钟特效代码，帮助开发者通过学习绘制圆形、线条、时间更新、旋转、颜色样式设置及动画效果等概念，深化对Canvas的理解和应用。项目中的CSS文件负责时钟的样式设定，而JS文件则包含实现各种特效的逻辑，通过不同的函数或类处理时间更新和动画绘制，提</div> </li> <li><a href="/article/1943983696184930304.htm" title="基于链家网的二手房数据采集清洗与可视化分析" target="_blank">基于链家网的二手房数据采集清洗与可视化分析</a> Mint_Datazzh <a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE/1.htm">项目</a><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E7%88%AC%E8%99%AB/1.htm">网络爬虫</a> <div>个人学习内容笔记，仅供参考。项目链接：https://gitee.com/rongwu651/lianjia原文链接：基于链家网的二手房数据采集清洗与可视化分析–笔墨云烟研究内容该课题的主要目的是通过将二手房网站上的存量与已销售房源，构建一个二手房市场行情情况与房源特点的可视化平台。该平台通过HTML架构和Echarts完成可视化的搭建。因此，该课题的主要研究内容就是如何利用相关技术设计并实现这样</div> </li> <li><a href="/article/1943983063352537088.htm" title="算法学习笔记：15.二分查找 ——从原理到实战，涵盖 LeetCode 与考研 408 例题" target="_blank">算法学习笔记：15.二分查找 ——从原理到实战，涵盖 LeetCode 与考研 408 例题</a> 呆呆企鹅仔 <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95%E5%AD%A6%E4%B9%A0/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/%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/%E8%80%83%E7%A0%94/1.htm">考研</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%88%86%E6%9F%A5%E6%89%BE/1.htm">二分查找</a> <div>在计算机科学的查找算法中，二分查找以其高效性占据着重要地位。它利用数据的有序性，通过不断缩小查找范围，将原本需要线性时间的查找过程优化为对数时间，成为处理大规模有序数据查找问题的首选算法。二分查找的基本概念二分查找（BinarySearch），又称折半查找，是一种在有序数据集合中查找特定元素的高效算法。其核心原理是：通过不断将查找范围减半，快速定位目标元素。与线性查找逐个遍历元素不同，二分查找依赖</div> </li> <li><a href="/article/1943982937041072128.htm" title="2025代码块种类以及作用" target="_blank">2025代码块种类以及作用</a> 2501_92758067 <a class="tag" taget="_blank" href="/search/intellij-idea/1.htm">intellij-idea</a><a class="tag" taget="_blank" href="/search/phpstorm/1.htm">phpstorm</a><a class="tag" taget="_blank" href="/search/idea/1.htm">idea</a><a class="tag" taget="_blank" href="/search/jupyter/1.htm">jupyter</a> <div>https://www.bilibili.com/opus/1088624478422827030https://www.bilibili.com/opus/1088624529930977287https://t.bilibili.com/1088633635294150662https://www.bilibili.com/opus/1088633635294150662https://t.b</div> </li> <li><a href="/article/1943979785097113600.htm" title="【前端】jQuery数组合并去重方法总结" target="_blank">【前端】jQuery数组合并去重方法总结</a> <div>在jQuery中合并多个数组并去重，推荐使用原生JavaScript的Set对象（高效简单）或$.unique()（仅适用于DOM元素，不适用于普通数组）。以下是完整解决方案：方法1：使用ES6Set（推荐）//定义多个数组constarr1=[1,2,3];constarr2=[2,3,4];constarr3=[3,4,5];//合并数组并用Set去重constmergedArray=[...</div> </li> <li><a href="/article/1943974618851241984.htm" title="Vue3+Vite+TS+Axios整合详细教程" target="_blank">Vue3+Vite+TS+Axios整合详细教程</a> 老马聊技术 <a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/Vite/1.htm">Vite</a><a class="tag" taget="_blank" href="/search/TS/1.htm">TS</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>1.Vite简介Vite是新一代的前端构建工具，在尤雨溪开发Vue3.0的时候诞生。类似于Webpack+Webpack-dev-server。其主要利用浏览器ESM特性导入组织代码，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。生产中利用Rollup作为打包工具，号称下一代的前端构建工具。vite是一种新型的前端构建工具，能够显著的提升前端开发者的体验。它主要有俩部分组成：一个</div> </li> <li><a href="/article/1943971211121848320.htm" title="前端 NPM 包的依赖可视化分析工具推荐" target="_blank">前端 NPM 包的依赖可视化分析工具推荐</a> 前端视界 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E8%89%BA%E5%8C%A0%E9%A6%86/1.htm">前端艺匠馆</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/arcgis/1.htm">arcgis</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>前端NPM包的依赖可视化分析工具推荐关键词：NPM、依赖管理、可视化分析、前端工程、包管理、依赖冲突、性能优化摘要：本文将深入探讨前端开发中NPM包依赖可视化分析的重要性，介绍5款主流工具的使用方法和特点，并通过实际案例展示如何利用这些工具优化项目依赖结构、解决版本冲突问题以及提升构建性能。文章将帮助开发者更好地理解和掌控项目依赖关系，提高开发效率和项目可维护性。背景介绍目的和范围本文旨在为前端开</div> </li> <li><a href="/article/1943969574231797760.htm" title="npm 切换 node 版本和npm的源" target="_blank">npm 切换 node 版本和npm的源</a> 爱敲代码的小冰 <a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>在开发过程中，不同项目可能需要不同版本的Node.js，同时于由XX原因，我们需要切换npm的源。这时如果需要切换node版本或者npm的源，我们可以使用以下方法。使用nvm切换Node版本1、安装npminstallnvm-g2、使用#列出所有可用版本nvmlist-remote#安装指定版本nvminstall16.15.1#使用指定版本nvmuse16.15.1#查看当前使用的版本nvmcu</div> </li> <li><a href="/article/1943963776244051968.htm" title="入门html这篇文章就够了" target="_blank">入门html这篇文章就够了</a> ξ流ぁ星ぷ132 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>HTML笔记文章目录HTML笔记html介绍什么是htmlhtml的作用HTML标签介绍常用标签标签and标签and标签u标签del删除线br标签用于换行pre标签，预处理标签span标签div标签sub标签andsup标签hr标签h1,h2...h6标签：HTML5中的语义标签：特殊字符img标签a标签第一种用法：超链接第二种用法：锚点video标签表格标签：form标签input标签selec</div> </li> <li><a href="/article/1943961378016522240.htm" title="从《哪吒 2》看个人IP的破局之道|创客匠人" target="_blank">从《哪吒 2》看个人IP的破局之道|创客匠人</a> <div>《哪吒2》以破竹之势登顶中国影史票房榜，不到9天票房突破62亿，观众自发为其“冲百亿”的热情，揭示了一个朴素却深刻的商业逻辑：IP的真正生命力，不在于短暂曝光，而在于用户愿意用行动投票的长期信任。这种逻辑，同样适用于2025年个人IP的增长突围。流量失效的真相：用户体验断层终结增长如今的IP运营者常陷入一个误区：疯狂追逐流量，却留不住用户。短视频投流成本翻倍，内容越做越多粉丝却不涨，好不容易成交的</div> </li> <li><a href="/article/1943961125532004352.htm" title="数字孪生技术为UI前端注入新活力：实现产品设计的沉浸式体验" target="_blank">数字孪生技术为UI前端注入新活力：实现产品设计的沉浸式体验</a> ui设计前端开发老司机 <a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a> <div>hello宝子们...我们是艾斯视觉擅长ui设计、前端开发、数字孪生、大数据、三维建模、三维动画10年+经验!希望我的分享能帮助到您!如需帮助可以评论关注私信我们一起探讨!致敬感谢感恩!一、引言：从“平面交互”到“沉浸体验”的UI革命当用户在电商APP中翻看3D家具模型却无法感知其与自家客厅的匹配度，当设计师在2D屏幕上绘制汽车内饰却难以预判实际乘坐体验——传统UI设计的“平面化、静态化、割裂感”</div> </li> <li><a href="/article/1943960369345130496.htm" title="Java三年经验程序员技术栈全景指南：从前端到架构，对标阿里美团全栈要求" target="_blank">Java三年经验程序员技术栈全景指南：从前端到架构，对标阿里美团全栈要求</a> 可曾去过倒悬山 <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/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>Java三年经验程序员技术栈全景指南：从前端到架构，对标阿里美团全栈要求三年经验是Java程序员的分水岭，技术栈深度决定你成为“业务码农”还是“架构师候选人”。本文整合阿里、美团、滴滴等大厂招聘要求，为你绘制可落地的进阶路线。一、Java核心：从语法糖到JVM底层三年经验与初级的核心差异在于系统级理解，大厂面试常考以下能力：JVM与性能调优内存模型（堆外内存、元空间）、GC算法（G1/ZGC适用场</div> </li> <li><a href="/article/1943958981944864768.htm" title="传统检测响应慢？陌讯多模态引擎提速90+FPS实战" target="_blank">传统检测响应慢？陌讯多模态引擎提速90+FPS实战</a> 2501_92473147 <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E8%A7%86%E8%A7%89/1.htm">计算机视觉</a><a class="tag" taget="_blank" href="/search/%E7%9B%AE%E6%A0%87%E6%A3%80%E6%B5%8B/1.htm">目标检测</a> <div>开篇痛点：实时目标检测在安防监控中的核心挑战在安防监控领域，实时目标检测是保障公共安全的关键技术。然而，传统算法如YOLOv5或开源框架MMDetection常面临两大痛点：误报率高（复杂光照或遮挡场景下检测不稳定）和响应延迟（高分辨率视频流处理FPS低于30）。实测数据显示，城市交通监控系统误报率达15%，导致安保资源浪费；客户反馈表明，延迟超100ms时，目标跟踪可能失效。这些问题源于算法泛化</div> </li> <li><a href="/article/1943946255763828736.htm" title="《Java前端开发全栈指南：从Servlet到现代框架实战》" target="_blank">《Java前端开发全栈指南：从Servlet到现代框架实战》</a> <div>前言在当今Web开发领域，Java依然是后端开发的主力语言，而随着前后端分离架构的普及，Java开发者也需要掌握前端技术栈。本文将全面介绍JavaWeb前端开发的核心技术，包括传统Servlet/JSP体系、现代前端框架集成方案，以及全栈开发的最佳实践。通过本文，您将了解如何构建现代化的JavaWeb应用前端界面。一、JavaWeb前端技术演进1.1传统技术栈Servlet：JavaWeb基础，处</div> </li> <li><a href="/article/1943932016164663296.htm" title="Vue3组件库实战: 打造高复用UI系统" target="_blank">Vue3组件库实战: 打造高复用UI系统</a> 武昌库里写JAVA <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/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/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/layui/1.htm">layui</a><a class="tag" taget="_blank" href="/search/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1/1.htm">毕业设计</a> <div>Vue3组件库实战:打造高复用UI系统介绍什么是Vue3组件库在前端开发中，UI组件库是非常重要的一部分。Vue3组件库是基于Vue.js3.x版本开发的一套可用于构建Web应用的UI组件集合，可以帮助开发者快速搭建页面并保证页面的一致性和美观性。目标关键词：Vue3组件库设计与构建设计原则组件库的设计需要遵循一定的原则，比如易用性、可维护性、扩展性等。在设计阶段需要考虑到不同场景的使用，并且保证</div> </li> <li><a href="/article/1943930502771699712.htm" title="Flutter基础（前端教程⑥-按钮切换）" target="_blank">Flutter基础（前端教程⑥-按钮切换）</a> aaiier <a class="tag" taget="_blank" href="/search/Flutter/1.htm">Flutter</a><a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</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>1.假设你已有的两个表单组件（示例）//手机号注册表单（示例）classPhoneRegisterFormextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnColumn(children:[TextField(decoration:InputDecoration(labelText:'手机号')),Text</div> </li> <li><a href="/article/1943930421968433152.htm" title="苦练Python第9天：if-else分支九剑" target="_blank">苦练Python第9天：if-else分支九剑</a> <a class="tag" taget="_blank" href="/search/python%E5%90%8E%E7%AB%AF%E5%89%8D%E7%AB%AF%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">python后端前端人工智能</a> <div>苦练Python第9天：if-else分支九剑前言大家好，我是倔强青铜三。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！欢迎来到100天Python挑战第9天！今天我们不练循环，改磨“分支剑法”——ifelse三式：单分支、双分支、多分支，以及嵌套和三元运算符，全部实战演练，让</div> </li> <li><a href="/article/1943930420689170432.htm" title="苦练Python第8天：while 循环之妙用" target="_blank">苦练Python第8天：while 循环之妙用</a> <a class="tag" taget="_blank" href="/search/python%E5%90%8E%E7%AB%AF%E5%89%8D%E7%AB%AF%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">python后端前端人工智能</a> <div>苦练Python第8天：while循环之妙用原文链接：https://dev.to/therahul_gupta/day-9100-while-loops-with-real-world-examples-528f作者：RahulGupta译者：倔强青铜三前言大家好，我是倔强青铜三。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众</div> </li> <li><a href="/article/1943930249423155200.htm" title="GoView 强势入驻 GitCode：拖拽低代码，打造高颜值数据大屏" target="_blank">GoView 强势入驻 GitCode：拖拽低代码，打造高颜值数据大屏</a> GitCode 代码君 <a class="tag" taget="_blank" href="/search/gitcode/1.htm">gitcode</a><a class="tag" taget="_blank" href="/search/%E4%BD%8E%E4%BB%A3%E7%A0%81/1.htm">低代码</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a> <div>信息可视化时代，数字大屏日益成为展示核心KPI、运营状态、监控预警的主流形式。然而，用传统方式开发一个定制化数字大屏需要解决多少问题？1.繁复的数据源集成，各种不同的协议和格式……2.让人晕头转向的可视化逻辑，调动艰难的样式、布局、动画，和往往难以统一的风格3.牵一发而动全身的代码结构，就想换个主题色结果开启的全局CSS大冒险……现在，一个开源项目即可搞定上述问题——拖拽式低代码数字可视化平台Go</div> </li> <li><a href="/article/1943930167651004416.htm" title="苦练Python第5天：字符串从入门到格式化" target="_blank">苦练Python第5天：字符串从入门到格式化</a> <a class="tag" taget="_blank" href="/search/python%E5%90%8E%E7%AB%AF%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD%E5%89%8D%E7%AB%AF/1.htm">python后端人工智能前端</a> <div>苦练Python第5天：字符串从入门到格式化原文链接：https://dev.to/therahul_gupta/day-5100-working-with-strings-basics-to-formatting-2kkn作者：RahulGupta译者：倔强青铜三前言大家好，我是倔强青铜三。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我</div> </li> <li><a href="/article/1943929869243052032.htm" title="Android 15.0 根据app包名授予app监听系统通知权限" target="_blank">Android 15.0 根据app包名授予app监听系统通知权限</a> 安卓兼职framework应用工程师 <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/15.0/1.htm">15.0</a><a class="tag" taget="_blank" href="/search/Rom%E5%AE%9A%E5%88%B6%E5%8C%96%E7%B3%BB%E5%88%97%E8%AE%B2%E8%A7%A3/1.htm">Rom定制化系列讲解</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/rom/1.htm">rom</a><a class="tag" taget="_blank" href="/search/framework/1.htm">framework</a><a class="tag" taget="_blank" href="/search/%E7%9B%91%E5%90%AC%E7%B3%BB%E7%BB%9F/1.htm">监听系统</a><a class="tag" taget="_blank" href="/search/%E9%80%9A%E7%9F%A5%E6%9D%83%E9%99%90/1.htm">通知权限</a> <div>1.概述在15.0的系统rom产品定制化开发中，在一些产品rom定制化开发中，系统内置的第三方app需要开启系统通知权限，然后可以在app中，监听系统所有通知，来做个通知中心的功能，所以需要授权获取系统通知的权限，然后来顺利的监听系统通知。来做系统通知的功能，接下来来实现这个功能2.根据app包名授予app监听系统通知权限的核心类packages/apps/Settings/src/com/and</div> </li> <li><a href="/article/1943929870320988160.htm" title="为Layui Table组件添加前端搜索功能" target="_blank">为Layui Table组件添加前端搜索功能</a> caifox菜狐狸 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E4%B9%8B%E6%97%85%EF%BC%9A%E4%BB%8E%E6%96%B0%E6%89%8B%E5%88%B0%E4%B8%93%E5%AE%B6/1.htm">学习之旅：从新手到专家</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/layui/1.htm">layui</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/table/1.htm">table</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%90%9C%E7%B4%A2/1.htm">前端搜索</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E6%A0%BC%E6%90%9C%E7%B4%A2/1.htm">表格搜索</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>在现代Web开发中，数据展示和交互功能是构建高效、用户友好界面的关键要素之一。Layui作为一款广受欢迎的前端UI框架，以其简洁的代码、丰富的组件和强大的功能，为开发者提供了极大的便利。其中，Layui的Table组件更是以其强大的数据展示能力和灵活的配置选项，成为了许多项目中不可或缺的部分。然而，在实际应用中，仅仅展示数据往往是不够的。用户通常需要根据自己的需求快速查找特定信息，这就需要为表格添</div> </li> <li><a href="/article/1943926338326949888.htm" title="flutter知识点" target="_blank">flutter知识点</a> ZhDan91 <a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a> <div>#时隔4年了#4年前用flutter开发海外项目和医疗项目。绘制界面的语法与html还是较类似的。把这些封印的记忆和技术回顾一下，最开始是开发Android出身的，所以开发起flutter来依旧是用的androidstudio开发工具。整理下用到的知识点：整理来源：flutter面试题——基础篇（1）-CSDN博客1、Dart是单线程的。在单线程中以消息循环来运行的。其中敖汉两个任务队列。一个是微</div> </li> <li><a href="/article/1943924322934517760.htm" title="什么是RFM模型" target="_blank">什么是RFM模型</a> 走过冬季 <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">学习笔记</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a> <div>RFM模型是客户价值分析中一种经典且实用的量化模型，它通过三个关键维度评估用户价值，帮助企业识别最有价值的客户群体。名称RFM由三个核心指标的英文首字母组成：R（Recency）-最近一次消费时间定义：用户上一次发生交易行为距今的时间长度（如多少天前）。意义：衡量用户的活跃度和流失风险。R值越小（最近有消费），说明用户越活跃，流失风险越低；R值越大（很久没消费），用户流失风险越高。母婴场景示例：一</div> </li> <li><a href="/article/1943924322171154432.htm" title="数据分析常用指标名词解释及计算公式" target="_blank">数据分析常用指标名词解释及计算公式</a> 走过冬季 <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">学习笔记</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a> <div>数据分析中有大量常用指标，它们帮助我们量化业务表现、用户行为、产品健康度等。下面是一些核心指标的名词解释及计算方式，按常见类别分类：一、流量与用户规模指标页面浏览量名词解释：用户访问网站或应用时，每次加载或刷新一个页面就算一次PV。它衡量的是页面被打开的总次数。计算方式：PV=∑(所有页面被加载的次数)(通常由埋点或日志直接统计)独立访客数名词解释：在特定时间范围内（如一天、一周、一月），访问网站</div> </li> <li><a href="/article/1943923817982259200.htm" title="Java Web 之 Session 详解" target="_blank">Java Web 之 Session 详解</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%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/session/1.htm">session</a> <div>在JavaWeb开发中，Session就像网站的专属记忆管家，为每个用户保管着重要的信息和状态，确保用户在网站的旅程顺畅无阻。场景一：想象你去一家大型超市购物，推着购物车挑选商品。这个购物车就如同Session，它记录了你的购物信息，方便你在结账时一次性结算。场景二：你在玩一个在线游戏，登录账号后，你的游戏进度、等级、装备等信息都会被保存在Session中，即使你中途关闭游戏，下次登录时依然可以继</div> </li> <li><a href="/article/1943919909612351488.htm" title="Vue.js 过渡 & 动画" target="_blank">Vue.js 过渡 & 动画</a> lsx202406 <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Vue.js过渡&动画引言在Web开发中，过渡与动画是提升用户体验的关键元素。Vue.js作为一款流行的前端框架，提供了强大的过渡与动画功能，使得开发者能够轻松实现丰富的交互效果。本文将深入探讨Vue.js中的过渡与动画，包括其原理、应用场景以及实现方法。一、Vue.js过渡原理Vue.js过渡是利用CSS3的transition属性实现的。当Vue.js侦测到数据变化时，会自动触发过渡效果。过渡</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 操作

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