啵啵薯条

前端知识HTML&CSS

1. 前端开发介绍

1.1 认识前端开发

1.2 web标准

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 布局实现

1. 前端开发介绍

1.1 认识前端开发

前端开发，主要的职责就是将数据以好看的样式呈现出来。说白了，就是开发网页程序，如下图所示：

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

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

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

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

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

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

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

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

1.2 web标准

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

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

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

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

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

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

我们以后主要是做后端开发，但前端知识也需要了解，而且目前很多企业都需要全栈开发工程师，就是前后端都要会开发（后端为主）。那基于此呢，我们在预科课程中给大家讲一下前端的核心技术，主要有以下三部分：

第一部分：HTML & CSS
第二部分：JavaScript
第三部分：Ajax & Vue3基础

那今天我们就先来讲解第一部分 HTML & CSS。

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 操作

1. 新建文本文件，后缀名改为 .html，命名为：01-html快速入门.html 。

创建一个名为HTML的文件夹，然后找到课程素材中的 1.jpg 文件放到该目录下的img目录中。此时HTML文件夹中内容如下：

2. 编写HTML的基本骨架，定义标题

选中文件，鼠标右击，选择使用记事本打开文件，并且编写网页的标题

首先html有固定的基本结构

 <html>
     <head>
         <title>HTML 快速入门title>
     head>
     <body>
         
     body>
 html>

其中是根标签，和是子标签。

: 定义网页的头部，用来存放给浏览器看的信息，如：CSS样式、网页的标题。
: 定义网页的主体部分，存放给用户看的信息，也是网页的主体内容，如：文字、图片、视频、音频、表格等。

3. 在中编写HTML的核心内容

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

其中

标签是一个一级标题的标签。标签是一个图片标签，用来展示图片，而其中的 src 属性是用来指定要展示的图片。

4. 然后选中文件，鼠标右击，选择使用浏览器打开文件。

浏览器呈现效果如下:

2.1.2 总结

1). HTML页面的基础结构标签

 <html>
     <head>
         <title> title>
     head>
     <body>
        
     body>
 html>

中定义标题显示在浏览器的标题位置，<body>中定义的内容会呈现在浏览器的内容区域 2). HTML中的标签特点 <ul style="margin-left:.8em;"> <li> HTML标签不区分大小写，建议小写 </li> <li> HTML标签的属性值，采用单引号、双引号都可以，一般写双引号 </li> <li> HTML语法相对比较松散 (建议大家编写HTML标签的时候尽量严谨一些) </li> </ul> <h3 id="2.2%20%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7">2.2 开发工具</h3> 我们通过快速入门案例，发现由记事本文件开发html是非常不方便的，所以接下来我们需要学习一款前端专业的开发工具VS Code。 Visual Studio Code（简称 VS Code ）是 Microsoft 于2015年4月发布的一款代码编辑器。VS Code 对前端代码有非常强大的支持，同时也其他编程语言（例如：C++、Java、Python、PHP、Go等）。VS Code 提供了非常强大的插件库，大大提高了开发效率。 官网： Visual Studio Code - Code Editing. Redefined 详细安装教程：参考 资料/2. VsCode安装文档/VS Code安装文档.md <blockquote> 注意1 ：需要注意的是，我们作为一名开发者，不应该将软件软装在包含中文名的路径中。 注意2 ：由于安装了IDEA快捷键的插件，VSCode快键键与IDEA是一致的。 </blockquote> <h3 id="2.3%20%E5%9F%BA%E7%A1%80%E6%A0%87%E7%AD%BE%20%26%20%E6%A0%B7%E5%BC%8F">2.3 基础标签 & 样式</h3> 那我们在讲解HTML的常见基础标签及 CSS的基本样式时，我们就以新浪新闻页面为例，来进行讲解，这样大家不仅能够知道常见标签及样式的作用，还能够知道具体的应用场景。 新浪新闻的具体页面效果如下： 而对于这个新浪新闻的页面来说，核心内容分为两个部分，如下： <ul style="margin-left:.8em;"> <li> aaaaaaaaaaaaaaaaaaaa-标题部分 (绿色标注的部分) </li> <li> aaaaaaaaaaaaaaaaaaaa-正文部分 (黄色标注的部分) </li> </ul> <h4 id="2.3.1%20%E6%96%B0%E6%B5%AA%E6%96%B0%E9%97%BB-%E6%A0%87%E9%A2%98%E5%AE%9E%E7%8E%B0">2.3.1 新浪新闻-标题实现</h4> <h5 id="2.3.1.1%20%E6%A0%87%E9%A2%98%E6%8E%92%E7%89%88">2.3.1.1 标题排版</h5> <h6 id="2.3.1.1.1%20%E5%88%86%E6%9E%90">2.3.1.1.1 分析</h6> 1). 第一部分，是一张图片，需要用到HTML中的图片标签 <img> 来实现。 2). 第二部分，是一个标题，需要用到HTML中的标题标签 <h1> ... <h6>来实现。 3). 第三部分，有两条水平分割线，需要用到HTML中的 <hr> 标签来定义水平分割线。 <h6 id="2.3.1.1.2%20%E6%A0%87%E7%AD%BE">2.3.1.1.2 标签</h6> 1). 图片标签 img <pre class="has" style="text-align:left;"><code class="language-md-end-block"> A. 图片标签: <img> B. 常见属性: src: 指定图像的url (可以指定绝对路径 , 也可以指定相对路径) width: 图像的宽度 (像素 / 百分比 , 相对于父元素的百分比) height: 图像的高度 (像素 / 百分比 , 相对于父元素的百分比) 备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。 C. 路径书写方式: 绝对路径: 1. 绝对磁盘路径: C:\Users\Administrator\Desktop\HTML\img\logo.png <img src="C:\Users\Administrator\Desktop\HTML\img\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> 注意：一般图片的width、height只设置一个，图片会等比例缩放。 2). 标题标签 h 系列 <pre class="has" style="text-align:left;"><code class="language-md-end-block"> 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> 备注：而上述的 <hr> <img> 标签呢，其实都属于单标签，也就是说是不需要结束标签的。 <h6 id="2.3.1.1.2%20%E5%AE%9E%E7%8E%B0">2.3.1.1.2 实现</h6> 1). 打开VsCode，选择左侧最顶部的 "资源管理器"，然后选择打开文件夹，选择打开桌面的 HTML 文件夹 2). 将【2.课程素材\01.新浪新闻】中提供的 img(图片)、audio(音频)、video(视频) 三个文件夹（里面是图片、音视频素材），复制到 HTML 文件夹中。 3). 在VsCode中创建一个新的 html 文件，文件的后缀名设置为 .html 4). html 文件创建好之后，在其中输入！，然后直接回车，就可以生成 HTML 的基础结构标签 5). 编写标题排版的核心代码 <pre class="has" style="text-align:left;"><code class="language-md-end-block">  <!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>aaaaaaaaaaaaaaaaaaaa</title> </head> <body>  <img src="img/logo.png"> aaaaaaaaaaaaaaaaaaaa> 正文 <h1>aaaaaaaaaaaaaaaaaaaa</h1> <hr> aaaaaaaaaaaaaaaaaaaa <hr> </body> </html></code></pre> <h5 id="2.3.1.2%20%E6%A0%87%E9%A2%98%E6%A0%B7%E5%BC%8F">2.3.1.2 标题样式</h5> 新浪的标题部分的基本排版，我们已经完成了，然后大家会看到，我们编写的一级标题，默认字体颜色为纯黑色。而原始的页面的新闻标题字体，并不是纯黑色，而是灰黑色，那接下来，我们就要来设置这个字体的颜色。而要设置这个字体的颜色，我们就需要通过CSS样式来控制。 那在HTML的文件中，我们如何来编写CSS样式呢，此时就涉及到CSS的三种引入方式。 HTML&CSS网站：w3cschool官网 - 1000多本编程教程免费学 <h6 id="2.3.1.2.1%20CSS%E5%BC%95%E5%85%A5%E6%96%B9%E5%BC%8F">2.3.1.2.1 CSS引入方式</h6> 具体有3种引入方式，语法如下表格所示： <table> <thead> <tr> <th style="background-color:#d9f9cb;">名称</th> <th style="background-color:#d9f9cb;">语法描述</th> <th style="background-color:#d9f9cb;">示例</th> </tr> </thead> <tbody> <tr> <td style="border-color:#888888;">行内样式</td> <td style="border-color:#888888;">在标签内使用style属性，属性值是css属性键值对。</td> <td style="border-color:#888888;"><h1 style="xxx:xxx;">中国新闻网</h1></td> </tr> <tr> <td style="border-color:#888888;">内嵌样式</td> <td style="border-color:#888888;">定义<style>标签，在标签内部定义css样式。</td> <td style="border-color:#888888;"><style> h1 {...} </style></td> </tr> <tr> <td style="border-color:#888888;">外联样式</td> <td style="border-color:#888888;">定义<link>标签，通过href属性引入外部css文件</td> <td style="border-color:#888888;"><link rel="stylesheet" href="css/news.css"></td> </tr> </tbody> </table> 对于上述3种引入方式，企业开发的使用情况如下： <ol style="margin-left:.8em;"> <li> 行内样式会出现大量的代码冗余，不方便后期的维护，所以不常用（常配合JS使用）。 </li> <li> 内部样式，通过定义css选择器，让样式作用于当前页面的指定的标签上。（可以写在页面任何位置，但通常约定写在head标签中） </li> <li> 外部样式，html和css实现了完全的分离，企业开发常用方式。 </li> </ol> <h6 id="2.3.1.2.2%20%E9%A2%9C%E8%89%B2%E8%A1%A8%E7%A4%BA">2.3.1.2.2 颜色表示</h6> 在前端程序开发中，颜色的表示方式常见的有如下三种： <table> <thead> <tr> <th style="background-color:#d9f9cb;">表示方式</th> <th style="background-color:#d9f9cb;">属性值</th> <th style="background-color:#d9f9cb;">说明</th> <th style="background-color:#d9f9cb;">取值</th> </tr> </thead> <tbody> <tr> <td style="border-color:#888888;">关键字</td> <td style="border-color:#888888;">颜色英文单词</td> <td style="border-color:#888888;">red、green、blue</td> <td style="border-color:#888888;">red、green、blue...</td> </tr> <tr> <td style="border-color:#888888;">rgb表示法</td> <td style="border-color:#888888;">rgb(r, g, b)</td> <td style="border-color:#888888;">红绿蓝三原色，每项取值范围：0-255</td> <td style="border-color:#888888;">rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)</td> </tr> <tr> <td style="border-color:#888888;">rgba表示法</td> <td style="border-color:#888888;">rgba(r, g, b, a)</td> <td style="border-color:#888888;">红绿蓝三原色，a表示透明度，取值：0-1</td> <td style="border-color:#888888;">rgb(0,0,0,0.3)、rgb(255,255,255,0.5)</td> </tr> <tr> <td style="border-color:#888888;">十六进制表示法</td> <td style="border-color:#888888;">#rrggbb</td> <td style="border-color:#888888;">#开头，将数字转换成十六进制表示</td> <td style="border-color:#888888;">#000000、#ff0000、#cccccc，简写：#000、#ccc</td> </tr> </tbody> </table> <h6 id="2.3.1.2.3%20%E6%A0%87%E9%A2%98%E5%AD%97%E4%BD%93%E9%A2%9C%E8%89%B2">2.3.1.2.3 标题字体颜色</h6> <pre class="has" style="text-align:left;"><code class="language-md-end-block 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>aaaaaaaaaaaaaaaaaaaa</title>  <style> h1 { /* color: red; */ /* color: rgb(0, 0, 255); */ color: #4D4F53; } </style>   </head> <body> <img src="img/logo.png"> aaaaaaaaaaaaaaaaaaaa > 正文   <h1>aaaaaaaaaaaaaaaaaaaa</h1> <hr> aaaaaaaaaaaaaaaaaaaa <hr> </body> </html></code></pre> <h6 id="2.3.1.2.4%20CSS%E9%80%89%E6%8B%A9%E5%99%A8">2.3.1.2.4 CSS选择器</h6> 顾名思义：选择器是选取需设置样式的元素（标签），但是我们根据业务场景不同，选择的标签的需求也是多种多样的，所以选择器有很多种，因为我们是做后台开发的，所以对于css选择器，我们只学习最基本的3种。 选择器通用语法如下： <pre class="has" style="text-align:left;"><code class="language-md-end-block language-html"> 选择器名 { css样式名：css样式值; css样式名：css样式值; }</code></pre> 我们需要学习的3种选择器是元素选择器，class选择器，id选择器，语法以及作用如下： 1.元素（标签）选择器： <ul style="margin-left:.8em;"> <li> 选择器的名字必须是标签的名字 </li> <li> 作用：选择器中的样式会作用于所有同名的标签上 </li> </ul> <pre class="has" style="text-align:left;"><code class="language-md-end-block language-html"> 元素名称 { css样式名:css样式值； }</code></pre> 例子如下： <pre class="has" style="text-align:left;"><code class="language-md-end-block language-html"> h1{ color: red; }</code></pre> 2.类选择器： <ul style="margin-left:.8em;"> <li> 选择器的名字前面需要加上 . </li> <li> 作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个 </li> </ul> <pre class="has" style="text-align:left;"><code class="language-md-end-block language-html"> .class属性值 { css样式名:css样式值； }</code></pre> 例子如下： <pre class="has" style="text-align:left;"><code class="language-md-end-block language-html"> .title1{ color: green; } <h1 class="title1" >aaaaaaaaaaaaaaaaaaa</h1></code></pre> 3.id选择器: <ul style="margin-left:.8em;"> <li> 选择器的名字前面需要加上# </li> <li> 作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签（由于id是唯一的） </li> </ul> <pre class="has" style="text-align:left;"><code class="language-md-end-block language-html"> #id属性值 { css样式名:css样式值； }</code></pre> 例子如下： <pre class="has" style="text-align:left;"><code class="language-md-end-block language-html"> #t1 { color: blue; } <h1 id="t1" >aaaaaaaaaaaaaaaaa</h1></code></pre> <h6 id="2.3.1.2.5%20%E5%8F%91%E5%B8%83%E6%97%B6%E9%97%B4%E5%AD%97%E4%BD%93%E9%A2%9C%E8%89%B2">2.3.1.2.5 发布时间字体颜色</h6> <pre class="has" style="text-align:left;"><code class="language-md-end-block 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>aaa</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"> aaa > 正文 <h1>aaaaa</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 id="2.3.1.3%20%E6%96%B0%E5%8A%9F%E8%83%BD%E5%AE%8C%E5%96%84-%E8%B6%85%E9%93%BE%E6%8E%A5">2.3.1.3 新功能完善-超链接</h5> <ul style="margin-left:.8em;"> <li> 在新浪新闻的标题部分，当我们点击顶部的 "新浪政务"，浏览器将自动在当前窗口访问这个资源 </li> <li> 当我们点击新闻发布时间之后的 "aaa"，浏览器将会自动打开一个新的标签页，然后在新的标签页访问资源 </li> </ul> 那接下来，我们就来完善新闻标题部分的这个功能，那此时呢，我们就需要用到HTML中的超链接的标签。 <h6 id="2.3.1.3.1%20%E4%BB%8B%E7%BB%8D">2.3.1.3.1 介绍</h6> <ul style="margin-left:.8em;"> <li> 标签: <a href="..." target="...">央视网</a> </li> <li> 属性: <ul style="margin-left:0;"> <li> href: 指定资源访问的url </li> <li> target: 指定在何处打开资源链接 <ul style="margin-left:0;"> <li> _self: 默认值，在当前页面打开 </li> <li> _blank: 在空白页面打开 </li> </ul></li> </ul></li> </ul> <h6 id="2.3.1.3.2%20%E5%AE%9E%E7%8E%B0">2.3.1.3.2 实现</h6> <pre class="has" style="text-align:left;"><code class="language-md-end-block language-html"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>aaaaaaaaaaaaaaaaaaaa</title> <style> /* 1. 标签选择器 */ h1 { color: #4d4f53; } .time { font-size: 12px; color: #888; } a { text-decoration: none; color: #4d4f53; } </style> </head> <body> <img src="img/logo.png"> <a href="https://gov.sina.com.cn/" target="_self">新浪</a> > 正文 <h1 class="cls" id="hid">aaaaaaaaaaaaaaaaaaaa</h1> <hr> <span class="time">2023年07月23日 19:49</span> <a href="https://news.cctv.com/2023/07/23/ARTI0KLN7plgs92l02aD0hTe230723.shtml" target="_blank">aaaa</a> <hr> </body> </html></code></pre> 浏览器打开此页面，我们可以看到最终效果（超链接的字体，以及默认的下划线，通过css样式已经调整好了）： <h4 id="2.3.2%20%E6%96%B0%E6%B5%AA%E6%96%B0%E9%97%BB-%E6%AD%A3%E6%96%87%E5%AE%9E%E7%8E%B0">2.3.2 新浪新闻-正文实现</h4> <h5 id="2.3.2.1%20%E6%AD%A3%E6%96%87%E6%8E%92%E7%89%88">2.3.2.1 正文排版</h5> <h6 id="2.3.2.1.1%20%E5%88%86%E6%9E%90">2.3.2.1.1 分析</h6> 整个正文部分的排版，主要分为这么四个部分： 1). 视频 (当前这种新闻页面,可能也会存在音频) 2). 文字段落 3). 字体加粗 4). 图片 <h6 id="2.3.2.1.2%20%E6%A0%87%E7%AD%BE">2.3.2.1.2 标签</h6> 1). 视频、音频标签 <ul style="margin-left:.8em;"> <li> 视频标签: <video> <ul style="margin-left:0;"> <li> 属性: <ul style="margin-left:0;"> <li> src: 规定视频的url </li> <li> controls: 显示播放控件 </li> <li> width: 播放器的宽度 </li> <li> height: 播放器的高度 </li> </ul></li> </ul></li> <li> 音频标签: <audio> <ul style="margin-left:0;"> <li> 属性: <ul style="margin-left:0;"> <li> src: 规定音频的url </li> <li> controls: 显示播放控件 </li> </ul></li> </ul></li> </ul> 2). 段落标签 <ul style="margin-left:.8em;"> <li> 换行标签: <ul style="margin-left:0;"> <li> 注意: 在HTML页面中,我们在编辑器中通过回车实现的换行, 仅仅在文本编辑器中会看到换行效果, 浏览器是不会解析的, HTML中换行需要通过br标签 </li> </ul></li> </ul> <ul style="margin-left:.8em;"> <li> 段落标签: <ul style="margin-left:0;"> <li> 如: 这是一个段落 </li> </ul></li> </ul> 3). 文本格式标签 <table> <thead> <tr> <th style="background-color:#d9f9cb;">效果</th> <th style="background-color:#d9f9cb;">标签</th> <th style="background-color:#d9f9cb;">标签(强调)</th> </tr> </thead> <tbody> <tr> <td style="border-color:#888888;">加粗</td> <td style="border-color:#888888;">b</td> <td style="border-color:#888888;">strong</td> </tr> <tr> <td style="border-color:#888888;">倾斜</td> <td style="border-color:#888888;">i</td> <td style="border-color:#888888;">em</td> </tr> <tr> <td style="border-color:#888888;">下划线</td> <td style="border-color:#888888;">u</td> <td style="border-color:#888888;">ins</td> </tr> <tr> <td style="border-color:#888888;">删除线</td> <td style="border-color:#888888;">s</td> <td style="border-color:#888888;">del</td> </tr> </tbody> </table> 前面的标签 b、i、u、s 就仅仅是实现加粗、倾斜、下划线、删除线的效果，是没有强调语义的。而后面的strong、em、ins、del在实现加粗、倾斜、下划线、删除线的效果的同时，还带有强调语义。 <h6 id="2.3.2.1.3%20%E5%AE%9E%E7%8E%B0">2.3.2.1.3 实现</h6> <pre class="has" style="text-align:left;"><code class="language-md-end-block language-html"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>aaaaaaaaaaaaaaaaa</title> <style> /* 1. 标签选择器 */ h1 { color: #4d4f53; /* 字体颜色 */ } .time { font-size: 12px; /* 字体大小 */ color: #888; } a { text-decoration: none; /* 文本装饰 */ color: #4d4f53; } p { line-height: 30px; /* 行高 */ text-indent: 35px; /* 首行缩进 */ } .editor { text-align: right; /* 规定文本的水平对齐方式 */ } </style> </head> <body> <img src="img/logo.png"> <a href="https://gov.sina.com.cn/">新浪政务</a> > 正文 <h1 class="cls" id="hid">aaaaaaaaaaaaaaaaaa</h1> <hr> <span class="time">2023年07月23日 19:49</span> <a href="https://news.cctv.com/2023/07/23/ARTI0KLN7plgs92l02aD0hTe230723.shtml" target="_blank">aa网</a> <hr> <video src="video/news.mp4" controls width="930px"></video> <p> <strong>aaa消息</strong>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p> <img src="img/1.jpg"> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <img src="img/2.jpg"> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <img src="img/3.jpg"> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <img src="img/4.jpg"> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p class="editor">责任编辑：aaaaaaaa SN242</p> <p><strong>关键字:</strong> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> </body> </html></code></pre> 在上述的正文排版实现中，还用到了几个CSS属性： <ul style="margin-left:.8em;"> <li> text-indent: 设置段落的首行缩进 </li> <li> line-height: 设置行高 </li> <li> text-align: 设置对齐方式, 可取值为 left / center / right </li> </ul> <blockquote> 注意事项: <ul style="margin-left:.8em;"> <li> 在HTML页面中无论输入了多少个空格, 最多只会显示一个。可以使用空格占位符（；）来生成空格，如果需要多个空格，就使用多次占位符。 </li> <li> 那在HTML中，除了空格占位符以外，还有一些其他的占位符(了解, 只需要知道空格的占位符写法即可)，如下： </li> </ul> <table border="1"> <thead> <tr> <th style="background-color:#d9f9cb;text-align:left;">显示结果</th> <th style="background-color:#d9f9cb;text-align:left;">描述</th> <th style="background-color:#d9f9cb;text-align:left;">占位符</th> </tr> </thead> <tbody> <tr> <td style="border-color:#888888;text-align:left;"></td> <td style="border-color:#888888;text-align:left;">空格</td> <td style="border-color:#888888;text-align:left;">\ </td> </tr> <tr> <td style="border-color:#888888;text-align:left;"><</td> <td style="border-color:#888888;text-align:left;">小于号</td> <td style="border-color:#888888;text-align:left;">\<</td> </tr> <tr> <td style="border-color:#888888;text-align:left;">></td> <td style="border-color:#888888;text-align:left;">大于号</td> <td style="border-color:#888888;text-align:left;">\></td> </tr> <tr> <td style="border-color:#888888;text-align:left;">&</td> <td style="border-color:#888888;text-align:left;">和号</td> <td style="border-color:#888888;text-align:left;">\&</td> </tr> <tr> <td style="border-color:#888888;text-align:left;">"</td> <td style="border-color:#888888;text-align:left;">引号</td> <td style="border-color:#888888;text-align:left;">\"</td> </tr> <tr> <td style="border-color:#888888;text-align:left;">'</td> <td style="border-color:#888888;text-align:left;">撇号</td> <td style="border-color:#888888;text-align:left;">\'</td> </tr> </tbody> </table> </blockquote> <h5 id="2.3.2.2%20%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80">2.3.2.2 页面布局</h5> 目前，新闻页面的基本排版，我们都已经完成了，但是，大家会看到，无论是标题部分，还是正文部分，都是铺满了整个浏览器。而我们再来看看新浪新闻的原始页面，我们会看到新闻网页内容都是居中展示的，左边、右边都是一定的边距的。 那接下来呢，我们就需要按照这个效果，来完成页面布局。而要想完成这样一个页面布局，我们就需要介绍一下CSS中的盒子模型。 <h6 id="2.3.2.2.1%20%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B">2.3.2.2.1 盒子模型</h6> <ul style="margin-left:.8em;"> <li> 盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局 </li> <li> 盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin） </li> </ul> CSS盒子模型，其实和日常生活中的包装盒是非常类似的，就比如： 盒子的大小，其实就包括三个部分： border、padding、content，而margin外边距是不包括在盒子之内的。 <h6 id="2.3.2.2.2%20%E5%B8%83%E5%B1%80%E6%A0%87%E7%AD%BE">2.3.2.2.2 布局标签</h6> <ul style="margin-left:.8em;"> <li> 布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。 </li> <li> 标签：<div> </li> <li> 特点： <ul style="margin-left:0;"> <li> div标签： <ul style="margin-left:0;"> <li> 一行只显示一个（独占一行） </li> <li> 宽度默认是父元素的宽度，高度默认由内容撑开 </li> <li> 可以设置宽高（width、height） </li> </ul></li> <li> span标签： <ul style="margin-left:0;"> <li> 一行可以显示多个 </li> <li> 宽度和高度默认由内容撑开 </li> <li> 不可以设置宽高（width、height） </li> </ul></li> </ul></li> </ul> 测试： <pre class="has" style="text-align:left;"><code class="language-md-end-block 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 的宽度。可以设置宽高（width、height） 2). span一行会显示多个，用来组合行内元素，默认宽度为内容撑开的宽度。不可以设置宽高（width、height） <h6 id="2.3.2.2.3%20%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E4%BB%A3%E7%A0%81">2.3.2.2.3 盒子模型代码</h6> 代码如下: <pre class="has" style="text-align:left;"><code class="language-md-end-block 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> 代码编写好了, 可以通过浏览器打开该页面, 通过开发者工具,我们就可以看到盒子的大小, 以及盒子各个组成部分(内容、内边距、边框、外边距)： 我们也可以，通过浏览器的开发者工具，清晰的看到这个盒子，以及每一个部分的大小： <h6 id="2.3.2.2.3%20%E5%B8%83%E5%B1%80%E5%AE%9E%E7%8E%B0">2.3.2.2.3 布局实现</h6> 在实现新闻页面的布局时，我们需要做两部操作： <ul style="margin-left:.8em;"> <li> 第一步：需要将body中的新闻标题部分、正文部分使用一个 div 布局标签将其包裹起来，方便通过css设置内容占用的宽度，比如：60%。 </li> <li> 第二步：通过css为该div设置外边距，左右的外边距分别为：20%，上外边距靠边展示即可，为：0%，下边设置一部分外边距，比如100px。 </li> </ul> 具体的代码实现如下： <pre class="has" style="text-align:left;"><code class="language-md-end-block language-html"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>aaaaaaaaaaaaaaaaaaaa</title> <style> h1 { color: #4d4f53; /* 字体颜色 */ } .time { font-size: 12px; /* 字体大小 */ color: #888; } a { text-decoration: none; /* 文本装饰 */ color: #4d4f53; } p { line-height: 30px; /* 行高 */ text-indent: 35px; /* 首行缩进 */ } .editor { text-align: right; /* 规定文本的水平对齐方式 */ } #main { width: 60%; margin: 0 20% 100px 20%; } </style> </head> <body> <div id="main"> <img src="img/logo.png"> <a href="https://gov.sina.com.cn/">新浪政务</a> > 正文 <h1 class="cls" id="hid">aaaaaaaaaaaaaaaaaaaa</h1> <hr> <span class="time">2023年07月23日 19:49</span> <a href="https://news.cctv.com/2023/07/23/ARTI0KLN7plgs92l02aD0hTe230723.shtml" target="_blank">央视网</a> <hr> <video src="video/news.mp4" controls width="930px"></video> <p> <strong>央视网消息</strong>aaaaaaaaaaaaaaaaaaaa </p> <img src="img/1.jpg"> <p>aaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaa</p> <img src="img/2.jpg"> <p>aaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaa</p> <img src="img/3.jpg"> <p>aaaaaaaaaaaaaaaaaaaa</p> <img src="img/4.jpg"> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaa</p> <p class="editor">aaaaaaaaaaaaaaaaaaaaSN242</p> <strong>关键字:</strong> aaaaaaaaaaaaaaaaaaaa </div> </body> </html></code></pre> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1830539876588679168"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(前端,前端,html,css)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1902682115355504640.htm" title="常用的pdf技术有哪些？--笔记" target="_blank">常用的pdf技术有哪些？--笔记</a> 我不是彭于晏灬 <a class="tag" taget="_blank" href="/search/pdf/1.htm">pdf</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>常用的pdf技术有哪些？1.iTextPDF：iText是著名的开放项目，是用于生成PDF文档的一个java类库。通过iText不仅可以生成PDF或rtf的文档，而且可以将XML、Html文件转化为PDF文件。Openoffice：openoffice是开源软件且能在windows和linux平台下运行，可以灵活的将word或者Excel转化为PDF文档。JasperReport：是一个强大、灵活</div> </li> <li><a href="/article/1902676816485740544.htm" title="【VSCode】VSCode常用快捷键" target="_blank">【VSCode】VSCode常用快捷键</a> Ctrl Z. <a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a> <div>！+回车键快速创建html骨架Ctrl+/单行注释（取消）快捷键Alt+Shift+A块注释（取消）快捷键Ctrl+加号代码放大（适合浏览器）Ctrl+减号代码缩小（适合浏览器）Ctrl+Shift+K删除当前行Ctrl+H替换查询下一个/上一个：F3/Shift+F3选中所有出现在查询中的：Alt+EnterCtrl+D匹配当前选中的词汇或者行，再次选中-可操作Shift+Alt+F格式化代码F</div> </li> <li><a href="/article/1902674423505285120.htm" title="【VSCode】VSCode常用插件" target="_blank">【VSCode】VSCode常用插件</a> Ctrl Z. <a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a> <div>Chinese(Simplified)(简体中文)LanguagePackforVisualStudioCode：简体中文支持插件HTML/CSS/JavaScriptSnippets：支持HTML/CSS/JavaScript快速匹配输入HTMLSnippets：这个插件提供了一系列HTML代码片段，通过简单的缩写就可以快速生成常用的HTML结构。例如，输入!并按下Tab键，就可以快速生成一个完</div> </li> <li><a href="/article/1902664210089832448.htm" title="浏览器开发者工具深度调试指南：从入门到高阶技巧" target="_blank">浏览器开发者工具深度调试指南：从入门到高阶技巧</a> 109702008 <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</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/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>浏览器开发者工具（DevTools）是现代前端工程师的"瑞士军刀"，本文将系统解析其核心功能与实战技巧，助您掌握高效调试的终极奥义。一、基础操作与核心功能1.1工具启动方式快捷键：F12（Win/Linux）|Cmd+Opt+I（Mac）右键菜单：网页任意位置右键→检查（Inspect）移动端调试：启用设备模式（Ctrl+Shift+M）1.2核心面板全景图面板名称核心功能快捷键切换Element</div> </li> <li><a href="/article/1902659669063692288.htm" title="《React开发实践：掌握Redux与Hooks应用》——开启你的前端进阶之旅" target="_blank">《React开发实践：掌握Redux与Hooks应用》——开启你的前端进阶之旅</a> JJCTO袁龙 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>文章标题《React开发实践：掌握Redux与Hooks应用》——开启你的前端进阶之旅在前端开发的浪潮中，React.js已经成为开发者们不可或缺的利器。它以其高效、灵活的特性，成为构建现代Web应用的首选框架之一。然而，随着项目复杂度的增加，如何更好地管理状态、优化性能、提升代码可维护性，成为每个开发者必须面对的挑战。幸运的是，我最近出版的《React开发实践：掌握Redux与Hooks应用》这</div> </li> <li><a href="/article/1902659037737054208.htm" title="Webpack常见面试题总结" target="_blank">Webpack常见面试题总结</a> xiangzhihong8 <a class="tag" taget="_blank" href="/search/React/1.htm">React</a><a class="tag" taget="_blank" href="/search/Native/1.htm">Native</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><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> <div>一、谈谈你对Webpack的理解1.1背景Webpack的目标是实现前端项目的模块化，从而更高效地管理和维护项目中的每一个资源。在早期的前端项目中，我们通过文件划分的形式来实现模块化，也就是将每个功能及其相关状态数据各自单独放到不同的JS文件中。约定每个文件是一个独立的模块，然后再将这些js文件引入到页面，一个script标签对应一个模块，然后再调用模块化的成员。比如：但这种模块化开发的弊端也十分</div> </li> <li><a href="/article/1902656013656453120.htm" title="最完整的webpack Dll打包与采坑总结" target="_blank">最完整的webpack Dll打包与采坑总结</a> 仰望星空的代码 <a class="tag" taget="_blank" href="/search/Vue.js%E8%B8%A9%E5%9D%91%E8%AE%B0/1.htm">Vue.js踩坑记</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/dll%E6%89%93%E5%8C%85/1.htm">dll打包</a><a class="tag" taget="_blank" href="/search/%E6%89%93%E5%8C%85%E4%BC%98%E5%8C%96/1.htm">打包优化</a> <div>webpack已经成为前端主流的项目打包工具，对于前端开发必不可少。在前端项目依赖第三方库过多，项目比较大文件比较多时，webpack打包的速度也会被拖成蜗牛，是时候优化一下webapck的打包速度了。在优化打包速度方面有不少方法方式，其中一个比较重要的方式是DllPlugin。DllPlugin把第三方库打包成动态链接库（动态链接库：windows系统中库文件概念，这里是借用了这一概念。），Dl</div> </li> <li><a href="/article/1902654375545860096.htm" title="echarts柱状图区间滚动" target="_blank">echarts柱状图区间滚动</a> 没有天赋的搬砖者 <a class="tag" taget="_blank" href="/search/echarts/1.htm">echarts</a><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> <div>constxData=['00:00','01:00','02:00','03:00','04:00','05:00','06:00'];constbarData=[5,20,36,10,10,20];option={tooltip:{show:true,trigger:'axis',confine:true,formatter(item){consthtml=`${xData[item[0].d</div> </li> <li><a href="/article/1902653238423908352.htm" title="Java WebSocket与项目页面（通常是HTML + JavaScript）之间建立连接并传输数据" target="_blank">Java WebSocket与项目页面（通常是HTML + JavaScript）之间建立连接并传输数据</a> hh_fine <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>JavaWebSocket与项目页面（通常是HTML+JavaScript）之间建立连接并传输数据1.创建JavaWebSocket服务器：使用JavaWebSocketAPI创建一个WebSocket服务器端点。2.在HTML页面中使用JavaScript连接WebSocket：通过JavaScript的WebSocketAPI与JavaWebSocket服务器建立连接。3.双向数据传输：实现服</div> </li> <li><a href="/article/1902646431789936640.htm" title="前端开发：Webpack的使用总结" target="_blank">前端开发：Webpack的使用总结</a> 三掌柜666 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E6%B1%87%E6%80%BB/1.htm">web前端知识汇总</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><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> <div>前言在前端开发过程中，尤其是现在前端框架的频繁使用的当下，作为前端开发者想必对于Webpack并不陌生，尤其是在使用Vue框架做前端开发的时候，打包时候必用Webpack。还有就是在前端求职面试的时候，Webpack相关的知识点也是面试官必定考察的，那么本篇博文就来分享一下关于Webpack使用相关的知识点，记录下来，方便后期查阅使用。Webpack概念Webpack其实是一个前端资源加载/打包工</div> </li> <li><a href="/article/1902636857032765440.htm" title="什么时候用到jupyter notebook的NBConvert" target="_blank">什么时候用到jupyter notebook的NBConvert</a> 老光私享 <a class="tag" taget="_blank" href="/search/jupyter/1.htm">jupyter</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</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/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a> <div>JupyterNotebook的NBConvert功能是用来将JupyterNotebook文件转换为其他格式的工具。通常情况下，我们会用到NBConvert功能来将JupyterNotebook文件转换为HTML、LaTeX、PDF或其他文本格式。这样可以方便地将JupyterNotebook分享给他人，或者将其用于报告、文章、文档或其他写作目的。要使用NBConvert功能，需要在命令行中运行</div> </li> <li><a href="/article/1902636729777582080.htm" title="【css酷炫效果】纯CSS实现球形阴影效果" target="_blank">【css酷炫效果】纯CSS实现球形阴影效果</a> 冰夏之夜影 <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>【css酷炫效果】纯CSS实现球形阴影效果缘创作背景html结构css样式完整代码基础版进阶版(动态版)效果图想直接拿走的老板，链接放在这里：上传后更新缘创作随缘，不定时更新。创作背景刚看到csdn出活动了，赶时间，直接上代码，令人丧气的是：活动的领域有要求，不是发够就行，瞬间意志消沉。html结构css样式.button{background-image:url('a.gif');border-</div> </li> <li><a href="/article/1902636351883374592.htm" title="UNI-APP+VUE3+VITE+VSCode开发经验及填坑记录（持续更新ING）" target="_blank">UNI-APP+VUE3+VITE+VSCode开发经验及填坑记录（持续更新ING）</a> 集成显卡 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E5%AE%9E%E8%B7%B5/1.htm">项目实践</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a> <div>uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。快速开发模板unibest：最好的uniapp开发框架，由uniapp+Vue3+Ts+Vite5+UnoCss+VSCode(可选webstorm)+uni插件+wot-ui（</div> </li> <li><a href="/article/1902635596015267840.htm" title="sql与html" target="_blank">sql与html</a> 就很对 <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a> <div>sql与htmlsqlite3sqlsql_callbacksql_dicthtmlhtml01ser02sersql_workhtml_ser03.htmlwebser06ser012.html011.html013.html015.html03.html04.html05.html06.htmlsqlite3sql//sqlite3_open//sqlite3_exec//sqlite3_cl</div> </li> <li><a href="/article/1902625250974167040.htm" title="详细介绍 Jupyter nbconvert 工具及其用法：如何将 Notebook 转换为 Python 脚本" target="_blank">详细介绍 Jupyter nbconvert 工具及其用法：如何将 Notebook 转换为 Python 脚本</a> 源代码杀手 <a class="tag" taget="_blank" href="/search/python%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7/1.htm">python使用技巧</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/jupyter/1.htm">jupyter</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a> <div>nbconvert是Jupyter提供的一个非常强大的工具，允许用户将JupyterNotebook文件（.ipynb）转换成多种格式，包括Python脚本（.py）、HTML、PDF、LaTeX等。你可以通过命令行来运行nbconvert，也可以在JupyterNotebook中通过一些自定义的设置来实现转换。安装nbconvert通常情况下，nbconvert会随Jupyter一起安装，因此不</div> </li> <li><a href="/article/1902619196961910784.htm" title="【Spring AI】基于专属知识库的RAG智能问答小程序开发——代码逐行精讲：核心交互函数及RAG知识库构建" target="_blank">【Spring AI】基于专属知识库的RAG智能问答小程序开发——代码逐行精讲：核心交互函数及RAG知识库构建</a> un_fired <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</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/java/1.htm">java</a> <div>系列文章目录【SpringAI】基于专属知识库的RAG智能问答小程序开发——完整项目（含完整前端+后端代码）【SpringAI】基于专属知识库的RAG智能问答小程序开发——代码逐行精讲：核心ChatClient对象相关构造函数【SpringAI】基于专属知识库的RAG智能问答小程序开发——代码逐行精讲：核心交互函数及RAG知识库构建文章目录系列文章目录前言1.Service层知识库构建与检索函数详</div> </li> <li><a href="/article/1902613138394640384.htm" title="个人AI助手的未来：Yi AI开源系统助力快速搭建" target="_blank">个人AI助手的未来：Yi AI开源系统助力快速搭建</a> 耶耶Norsea <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E6%9D%82%E7%83%A9/1.htm">网络杂烩</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a> <div>摘要YiAI推出了一站式个人AI助手平台解决方案，助力用户快速搭建专属AI助手。该平台采用全套开源系统，涵盖前端应用、后台管理及小程序功能，并基于MIT协议开放使用。同时，平台集成了本地RAG方案，利用Milvus与Weaviate向量数据库支持本地部署，为用户提供高效、灵活的数据处理能力。关键词个人AI助手,快速搭建,开源系统,本地RAG,向量数据库一、YiAI开源系统概述1.1个人AI助手的发</div> </li> <li><a href="/article/1902611621285523456.htm" title="CSS3背景与渐变" target="_blank">CSS3背景与渐变</a> 天涯学馆 <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E5%89%8D%E7%AB%AF%26amp%3B%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%85%A8%E6%A0%88%E6%9E%B6%E6%9E%84/1.htm">大前端&移动端全栈架构</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><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>背景与渐变background-sizebackground-size属性用于设置背景图像的尺寸。您可以指定绝对或相对单位，或者使用关键词来控制背景图像在元素背景区域中的大小。.element{background-size:[length|percentage|cover|contain]|[length|percentage][length|percentage]|auto|inherit;}</div> </li> <li><a href="/article/1902610360431603712.htm" title="HTML：ul标签的作用" target="_blank">HTML：ul标签的作用</a> 凭君语未可 <a class="tag" taget="_blank" href="/search/Web%E5%BC%80%E5%8F%91/1.htm">Web开发</a><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>ul标签解释解释举例效果分析``标签支持的属性1.`type`举例：效果：分析2.`class`举例：效果：分析解释在HTML中，标签表示无序列表（UnorderedList）。它用于创建一个项目列表，其中列表项通常以圆形、方形或none的图标（也称为列表项标记）进行标记。每个列表项都是使用（listitem）标签创建的。举例123效果分析在上面的例子中，我们创建了一个包含三个项目的无序列表，这些</div> </li> <li><a href="/article/1902599516868112384.htm" title="2025React岗位前端面试题180道及其答案解析,看完稳了,万字长文,持续更新...." target="_blank">2025React岗位前端面试题180道及其答案解析,看完稳了,万字长文,持续更新....</a> 祈澈菇凉 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.什么是React？它的主要特点是什么？答案解析：React是一个用于构建用户界面的JavaScript库，主要用于构建单页应用。其主要特点包括：组件化：React应用由多个可重用的组件组成，便于管理和维护。虚拟DOM：React使用虚拟DOM提高性能，通过最小化实际DOM操作来优化渲染过程。单向数据流：数据在组件之间以单向流动的方式传递，简化了数据管理和调试。声明式编程：React允许开发者以</div> </li> <li><a href="/article/1902598381671346176.htm" title="Ubuntu 22.05编译OpenWrt 23.05实战" target="_blank">Ubuntu 22.05编译OpenWrt 23.05实战</a> 诺依阁 <a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</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/linux/1.htm">linux</a> <div>本篇文章原文地址:https://blog.nuoyis.net/posts/9990.html哔哩哔哩视频教程:https://www.bilibili.com/video/BV1rnsCe1ErV博主基本插件版本推荐编译配置:16核心20G内存150G硬盘用于存储数据包以及编译包等前情提要1.需要准备能访问到外网域名的加速器(自己斟酌)2.准备一个安装好的ubuntu虚拟机(或者直接使用海外服</div> </li> <li><a href="/article/1902594848398045184.htm" title="Python前端开发" target="_blank">Python前端开发</a> PITSU <a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>Python前端开发1.前端三剑客（HTML，CSS和JavaScript）1.1HTML1.1.1HTML简介HyperTextMark-upLanguage,指的是超文本标记语言；html是开发网页的语言；html中的标签大多数都是成对出现的,格式:1.1.2HTML结构第一行是文档声明部分HTML：分为页头，页身和页脚。标签大部分是成对出现1.1.3第一行文档声明部分HTML在vscode中</div> </li> <li><a href="/article/1902593208039305216.htm" title="初识HTML中的div块元素—零基础自学网页制作" target="_blank">初识HTML中的div块元素—零基础自学网页制作</a> 猿说前端 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/web%E5%BC%80%E5%8F%91/1.htm">web开发</a> <div>块元素基础属性讲解元素是个有故事的元素，这个元素很早就出现在html超文本标记语言中，它设计之初就是为了解决网页页面布局的需求。但是遗憾的是它出生后一直怀才不遇。在我还上初中的时候，智能手机还没有出现，更没有平板电脑等移动设备。上网是通过摆在桌子上的计算机来完成的。那时，大街小巷上有好多网吧。那时，马云刚刚辞去工作准备创业。那时，发送邮件的操作都会出现在计算机课程中。那时，对页面还没有现在的跨平台</div> </li> <li><a href="/article/1902581729210724352.htm" title="FastAPI测试策略：参数解析单元测试" target="_blank">FastAPI测试策略：参数解析单元测试</a> qcidyu <a class="tag" taget="_blank" href="/search/%E6%96%87%E7%AB%A0%E5%BD%92%E6%A1%A3/1.htm">文章归档</a><a class="tag" taget="_blank" href="/search/%E5%BC%82%E5%B8%B8%E4%BC%A0%E6%92%AD%E9%AA%8C%E8%AF%81/1.htm">异常传播验证</a><a class="tag" taget="_blank" href="/search/%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A5%E6%B5%8B%E8%AF%95/1.htm">依赖注入测试</a><a class="tag" taget="_blank" href="/search/%E8%AF%B7%E6%B1%82%E6%A8%A1%E6%8B%9F%E6%8A%80%E6%9C%AF/1.htm">请求模拟技术</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E8%A6%86%E7%9B%96%E7%8E%87%E4%BC%98%E5%8C%96/1.htm">测试覆盖率优化</a><a class="tag" taget="_blank" href="/search/Pydantic%E9%AA%8C%E8%AF%81%E6%B5%8B%E8%AF%95/1.htm">Pydantic验证测试</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95%E7%AD%96%E7%95%A5/1.htm">单元测试策略</a><a class="tag" taget="_blank" href="/search/%E5%8F%82%E6%95%B0%E8%A7%A3%E6%9E%90%E6%B5%8B%E8%AF%95/1.htm">参数解析测试</a> <div>扫描二维码关注或者微信搜一搜：编程智域前端至全栈交流与成长探索数千个预构建的AI应用，开启你的下一个伟大创意第一章：核心测试方法论1.1三层测试体系架构#第一层：模型级测试deftest_user_model_validation():withpytest.raises(ValidationError):User(age=-5)#第二层：依赖项测试deftest_auth_dependency()</div> </li> <li><a href="/article/1902578448728125440.htm" title="【前端网络深潜行者】信息化人员必备知识&面试宝典：TCP连接中断，客户端突然“玩失踪”怎么办？" target="_blank">【前端网络深潜行者】信息化人员必备知识&面试宝典：TCP连接中断，客户端突然“玩失踪”怎么办？</a> DTcode7 <a class="tag" taget="_blank" href="/search/IT%E4%BF%A1%E6%81%AF%E6%8A%80%E6%9C%AF%E7%9B%B8%E5%85%B3/1.htm">IT信息技术相关</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8C%96%E6%8A%80%E8%83%BD%E9%9D%A2%E8%AF%95%E5%AE%9D%E5%85%B8/1.htm">信息化技能面试宝典</a><a class="tag" taget="_blank" href="/search/HTML5/1.htm">HTML5</a><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/%E5%89%8D%E7%AB%AF%E4%B8%89%E5%A4%A7%E6%A0%B8%E5%BF%83/1.htm">前端三大核心</a><a class="tag" taget="_blank" href="/search/JS/1.htm">JS</a> <div>【前端网络深潜行者】信息化人员必备知识&面试宝典：TCP连接中断，客户端突然“玩失踪”怎么办？TCP的忠诚卫士：保活与重传保活机制（Keepalive）超时重传与超时前端策略：优雅的应对与重连案例一：心跳检测案例二：断线重连逻辑安全与性能考量实战经验之谈排错思路结语与探讨在网络通信的迷宫中，TCP/IP协议犹如稳固的桥梁，承载着数据的往来。然而，当客户端这个“信使”突然玩起了失踪”，我们如何确保这</div> </li> <li><a href="/article/1902577816931725312.htm" title="【微信小程序变通实现DeepSeek支持语音】" target="_blank">【微信小程序变通实现DeepSeek支持语音】</a> 技术与健康 <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/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>微信小程序实现录音转文字，并调用后端服务（Node.js）进行语音识别和，然后调用DeepSeek处理的完整实现。整体架构前端（微信小程序）：实现录音功能。将录音文件上传到后端。接收后端返回的语音识别结果，并显示在可编辑的文本框中。调用DeepSeek处理文本。后端（Node.js）：接收小程序上传的录音文件。调用腾讯云语音识别（ASR）服务，将语音转换为文字。返回识别结果给小程序。提供DeepS</div> </li> <li><a href="/article/1902573271463817216.htm" title="localStorage在上面位置？数据存放文件名是什么？" target="_blank">localStorage在上面位置？数据存放文件名是什么？</a> 2301_79698214 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>在上述代码中，数据并不是以传统文件的形式存放在某个具体的文件里，而是存储在浏览器的localStorage中。localStorage是HTML5新增的一个会话存储对象，它用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页后数据仍然存在。数据存储位置和文件名存储位置：localStorage是浏览器提供的一个存储机制，数据存储在浏览器的本地存储区域，不同的浏览器存储位置不同，例如：Chro</div> </li> <li><a href="/article/1902558531052171264.htm" title="微前端 qiankun vite vue3" target="_blank">微前端 qiankun vite vue3</a> 可缺不可滥 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%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>文章目录简介主应用qiankun-mainvue3vite子应用qiankun-app-vue2webpack5子应用qiankun-reactwebpack5子应用quankun-vue3vite遇到的问题简介主要介绍以qiankun框架为基础，vite搭建vue3项目为主应用，wepackvue2和webpackreact搭建的子应用，形成的一个微前端框架。主应用qiankun-mainvue</div> </li> <li><a href="/article/1902554494642745344.htm" title="NSSCTF_crypto_[HGAME 2022 week3]RSA attack 3" target="_blank">NSSCTF_crypto_[HGAME 2022 week3]RSA attack 3</a> 岁岁的O泡奶 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%AF%86%E7%A0%81%E5%AD%A6/1.htm">密码学</a><a class="tag" taget="_blank" href="/search/crypto/1.htm">crypto</a><a class="tag" taget="_blank" href="/search/NSSCTF/1.htm">NSSCTF</a><a class="tag" taget="_blank" href="/search/%E7%BB%B4%E7%BA%B3%E6%94%BB%E5%87%BB/1.htm">维纳攻击</a> <div>[HGAME2022week3]RSAattack3题目:太多了自己去看，提示:维纳攻击首先在做这题之前你得先懂得维纳攻击的原理https://www.cnblogs.com/wandervogel/p/16805992.htmlok啊看懂了维纳攻击的原理就来开始写脚本吧fromCrypto.Util.numberimportlong_to_bytesimportgmpy2#已知参数n=50741</div> </li> <li><a href="/article/1902553356019232768.htm" title="网页大屏适配使用css的scale方法缺点是两边会有留白；" target="_blank">网页大屏适配使用css的scale方法缺点是两边会有留白；</a> 无足鸟丶 <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>网页大屏适配使用css的scale方法缺点是两边会有留白；Document*{margin:0;padding:0;}html,body{width:100vw;height:100vh;background-color:blue;}#container{width:100%;height:100%;}.box{width:1920px;height:1080px;background-color</div> </li> <li><a href="/article/11.htm" title="VMware Workstation 11 或者 VMware Player 7安装MAC OS X 10.10 Yosemite" target="_blank">VMware Workstation 11 或者 VMware Player 7安装MAC OS X 10.10 Yosemite</a> iwindyforest <a class="tag" taget="_blank" href="/search/vmware/1.htm">vmware</a><a class="tag" taget="_blank" href="/search/mac+os/1.htm">mac os</a><a class="tag" taget="_blank" href="/search/10.10/1.htm">10.10</a><a class="tag" taget="_blank" href="/search/workstation/1.htm">workstation</a><a class="tag" taget="_blank" href="/search/player/1.htm">player</a> <div>最近尝试了下VMware下安装MacOS 系统，安装过程中发现网上可供参考的文章都是VMware Workstation 10以下， MacOS X 10.9以下的文章，只能提供大概的思路，但是实际安装起来由于版本问题，走了不少弯路，所以我尝试写以下总结，希望能给有兴趣安装OSX的人提供一点帮助。写在前面的话：其实安装好后发现，由于我的th</div> </li> <li><a href="/article/138.htm" title="关于《基于模型驱动的B/S在线开发平台》源代码开源的疑虑？" target="_blank">关于《基于模型驱动的B/S在线开发平台》源代码开源的疑虑？</a> deathwknight <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a> <div>本人从学习Java开发到现在已有10年整，从一个要自学 java买成javascript的小菜鸟，成长为只会java和javascript语言的老菜鸟（个人邮箱：deathwknight@163.com）一路走来，跌跌撞撞。用自己的三年多业余时间，瞎搞一个小东西（基于模型驱动的B/S在线开发平台，非MVC框架、非代码生成）。希望与大家一起分享，同时有许些疑虑，希望有人可以交流下平台</div> </li> <li><a href="/article/265.htm" title="如何把maven项目转成web项目" target="_blank">如何把maven项目转成web项目</a> Kai_Ge <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a><a class="tag" taget="_blank" href="/search/MyEclipse/1.htm">MyEclipse</a> <div>创建Web工程，使用eclipse ee创建maven web工程 1.右键项目,选择Project Facets,点击Convert to faceted from 2.更改Dynamic Web Module的Version为2.5.(3.0为Java7的,Tomcat6不支持). 如果提示错误,可能需要在Java Compiler设置Compiler compl</div> </li> <li><a href="/article/392.htm" title="主管？？？" target="_blank">主管？？？</a> Array_06 <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a> <div>转载：http://www.blogjava.net/fastzch/archive/2010/11/25/339054.html 很久以前跟同事参加的培训，同事整理得很详细，必须得转！前段时间，公司有组织中高阶主管及其培养干部进行了为期三天的管理训练培训。三天的课程下来，虽然内容较多，因对老师三天来的课程内容深有感触，故借着整理学习心得的机会，将三天来的培训课程做了一个</div> </li> <li><a href="/article/519.htm" title="python内置函数大全" target="_blank">python内置函数大全</a> 2002wmj <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>最近一直在看python的document，打算在基础方面重点看一下python的keyword、Build-in Function、Build-in Constants、Build-in Types、Build-in Exception这四个方面，其实在看的时候发现整个《The Python Standard Library》章节都是很不错的，其中描述了很多不错的主题。先把Build-in Fu</div> </li> <li><a href="/article/646.htm" title="JSP页面通过JQUERY合并行" target="_blank">JSP页面通过JQUERY合并行</a> 357029540 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a> <div>在写程序的过程中我们难免会遇到在页面上合并单元行的情况，如图所示如果对于会的同学可能很简单，但是对没有思路的同学来说还是比较麻烦的，提供一下用JQUERY实现的参考代码 function mergeCell(){ var trs = $("#table tr"); &nb</div> </li> <li><a href="/article/773.htm" title="Java基础" target="_blank">Java基础</a> 冰天百华 <a class="tag" taget="_blank" href="/search/java%E5%9F%BA%E7%A1%80/1.htm">java基础</a> <div>学习函数式编程 package base; import java.text.DecimalFormat; public class Main { public static void main(String[] args) { // Integer a = 4; // Double aa = (double)a / 100000; // Decimal</div> </li> <li><a href="/article/900.htm" title="unix时间戳相互转换" target="_blank">unix时间戳相互转换</a> adminjun <a class="tag" taget="_blank" href="/search/%E8%BD%AC%E6%8D%A2/1.htm">转换</a><a class="tag" taget="_blank" href="/search/unix/1.htm">unix</a><a class="tag" taget="_blank" href="/search/%E6%97%B6%E9%97%B4%E6%88%B3/1.htm">时间戳</a> <div>如何在不同编程语言中获取现在的Unix时间戳(Unix timestamp)？ Java time JavaScript Math.round(new Date().getTime()/1000) getTime()返回数值的单位是毫秒 Microsoft .NET / C# epoch = (DateTime.Now.ToUniversalTime().Ticks - 62135</div> </li> <li><a href="/article/1027.htm" title="作为一个合格程序员该做的事" target="_blank">作为一个合格程序员该做的事</a> aijuans <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a> <div>作为一个合格程序员每天该做的事 1、总结自己一天任务的完成情况最好的方式是写工作日志，把自己今天完成了什么事情，遇见了什么问题都记录下来，日后翻看好处多多 2、考虑自己明天应该做的主要工作把明天要做的事情列出来，并按照优先级排列，第二天应该把自己效率最高的时间分配给最重要的工作 3、考虑自己一天工作中失误的地方，并想出避免下一次再犯的方法出错不要紧，最重</div> </li> <li><a href="/article/1154.htm" title="由html5视频播放引发的总结" target="_blank">由html5视频播放引发的总结</a> ayaoxinchao <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E8%A7%86%E9%A2%91/1.htm">视频</a><a class="tag" taget="_blank" href="/search/video/1.htm">video</a> <div>前言项目中存在视频播放的功能，前期设计是以flash播放器播放视频的。但是现在由于需要兼容苹果的设备，必须采用html5的方式来播放视频。我就出于兴趣对html5播放视频做了简单的了解，不了解不知道，水真是很深。本文所记录的知识一些浅尝辄止的知识，说起来很惭愧。视频结构本该直接介绍html5的<video>的，但鉴于本人对视频</div> </li> <li><a href="/article/1281.htm" title="解决httpclient访问自签名https报javax.net.ssl.SSLHandshakeException: sun.security.validat" target="_blank">解决httpclient访问自签名https报javax.net.ssl.SSLHandshakeException: sun.security.validat</a> bewithme <a class="tag" taget="_blank" href="/search/httpclient/1.htm">httpclient</a> <div> 如果你构建了一个https协议的站点，而此站点的安全证书并不是合法的第三方证书颁发机构所签发，那么你用httpclient去访问此站点会报如下错误 javax.net.ssl.SSLHandshakeException: sun.security.validator.ValidatorException: PKIX path bu</div> </li> <li><a href="/article/1408.htm" title="Jedis连接池的入门级使用" target="_blank">Jedis连接池的入门级使用</a> bijian1013 <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/redis%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">redis数据库</a><a class="tag" taget="_blank" href="/search/jedis/1.htm">jedis</a> <div>Jedis连接池操作步骤如下： a.获取Jedis实例需要从JedisPool中获取； b.用完Jedis实例需要返还给JedisPool； c.如果Jedis在使用过程中出错，则也需要还给JedisPool； packag</div> </li> <li><a href="/article/1535.htm" title="变与不变" target="_blank">变与不变</a> bingyingao <a class="tag" taget="_blank" href="/search/%E4%B8%8D%E5%8F%98/1.htm">不变</a><a class="tag" taget="_blank" href="/search/%E5%8F%98/1.htm">变</a><a class="tag" taget="_blank" href="/search/%E4%BA%B2%E6%83%85%E6%B0%B8%E6%81%92/1.htm">亲情永恒</a> <div>变与不变周末骑车转到了五年前租住的小区，曾经最爱吃的西北面馆、江西水饺、手工拉面早已不在，各种店铺都换了好几茬，这些是变的。三年前还很流行的一款手机在今天看起来已经落后的不像样子。三年前还运行的好好的一家公司，今天也已经不复存在。一座座高楼拔地而起，</div> </li> <li><a href="/article/1662.htm" title="【Scala十】Scala核心四：集合框架之List" target="_blank">【Scala十】Scala核心四：集合框架之List</a> bit1129 <a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a> <div>Spark的RDD作为一个分布式不可变的数据集合，它提供的转换操作，很多是借鉴于Scala的集合框架提供的一些函数，因此，有必要对Scala的集合进行详细的了解 1. 泛型集合都是协变的，对于List而言，如果B是A的子类，那么List[B]也是List[A]的子类，即可以把List[B]的实例赋值给List[A]变量 2. 给变量赋值(注意val关键字，a，b</div> </li> <li><a href="/article/1789.htm" title="Nested Functions in C" target="_blank">Nested Functions in C</a> bookjovi <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/closure/1.htm">closure</a> <div> Nested Functions 又称closure，属于functional language中的概念，一直以为C中是不支持closure的，现在看来我错了，不过C标准中是不支持的，而GCC支持。既然GCC支持了closure，那么 lexical scoping自然也支持了，同时在C中label也是可以在nested functions中自由跳转的</div> </li> <li><a href="/article/1916.htm" title="Java-Collections Framework学习与总结-WeakHashMap" target="_blank">Java-Collections Framework学习与总结-WeakHashMap</a> BrokenDreams <a class="tag" taget="_blank" href="/search/Collections/1.htm">Collections</a> <div> 总结这个类之前，首先看一下Java引用的相关知识。Java的引用分为四种：强引用、软引用、弱引用和虚引用。强引用：就是常见的代码中的引用，如Object o = new Object();存在强引用的对象不会被垃圾收集</div> </li> <li><a href="/article/2043.htm" title="读《研磨设计模式》-代码笔记-解释器模式-Interpret" target="_blank">读《研磨设计模式》-代码笔记-解释器模式-Interpret</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/ package design.pattern; /* * 解释器（Interpreter）模式的意图是可以按照自己定义的组合规则集合来组合可执行对象 * * 代码示例实现XML里面1.读取单个元素的值 2.读取单个属性的值 * 多</div> </li> <li><a href="/article/2170.htm" title="After Effects操作&快捷键" target="_blank">After Effects操作&快捷键</a> cherishLC <a class="tag" taget="_blank" href="/search/After+Effects/1.htm">After Effects</a> <div>1、快捷键官方文档中文版：https://helpx.adobe.com/cn/after-effects/using/keyboard-shortcuts-reference.html 英文版：https://helpx.adobe.com/after-effects/using/keyboard-shortcuts-reference.html 2、常用快捷键</div> </li> <li><a href="/article/2297.htm" title="Maven 常用命令" target="_blank">Maven 常用命令</a> crabdave <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>Maven 常用命令 mvn archetype:generate mvn install mvn clean mvn clean complie mvn clean test mvn clean install mvn clean package mvn test mvn package mvn site mvn dependency:res</div> </li> <li><a href="/article/2424.htm" title="shell bad substitution" target="_blank">shell bad substitution</a> daizj <a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a> <div>#!/bin/sh /data/script/common/run_cmd.exp 192.168.13.168 "impala-shell -islave4 -q 'insert OVERWRITE table imeis.${tableName} select ${selectFields}, ds, fnv_hash(concat(cast(ds as string), im</div> </li> <li><a href="/article/2551.htm" title="Java SE 第二讲（原生数据类型 Primitive Data Type）" target="_blank">Java SE 第二讲（原生数据类型 Primitive Data Type）</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>Java SE 第二讲： 1. Windows: notepad, editplus, ultraedit, gvim Linux: vi, vim, gedit 2. Java 中的数据类型分为两大类： 1）原生数据类型（Primitive Data Type） 2）引用类型（对象类型）（R</div> </li> <li><a href="/article/2678.htm" title="CGridView中实现批量删除" target="_blank">CGridView中实现批量删除</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a> <div>1，CGridView中的columns添加 array( 'selectableRows' => 2, 'footer' => '<button type="button" onclick="GetCheckbox();" style=&</div> </li> <li><a href="/article/2805.htm" title="Java中泛型的各种使用" target="_blank">Java中泛型的各种使用</a> dyy_gusi <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> <div>Java中的泛型的使用：1.普通的泛型使用在使用类的时候后面的<>中的类型就是我们确定的类型。 public class MyClass1<T> {//此处定义的泛型是T private T var; public T getVar() { return var; } public void setVa</div> </li> <li><a href="/article/2932.htm" title="Web开发技术十年发展历程" target="_blank">Web开发技术十年发展历程</a> gcq511120594 <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a> <div>回顾web开发技术这十年发展历程： Ajax 03年的时候我上六年级，那时候网吧刚在小县城的角落萌生。传奇，大话西游第一代网游一时风靡。我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩，然后接下来的一个小时我一直在，注，册，账，号。彼时网吧用的512k的带宽，注册的时候，填了一堆信息，提交，页面跳转，嘣，”您填写的信息有误，请重填”。然后跳转回注册页面，以此循环。我现在时常想，如果当时a</div> </li> <li><a href="/article/3059.htm" title="openSession()与getCurrentSession()区别：" target="_blank">openSession()与getCurrentSession()区别：</a> hetongfei <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div>来自 http://blog.csdn.net/dy511/article/details/6166134 1.getCurrentSession创建的session会和绑定到当前线程,而openSession不会。 2. getCurrentSession创建的线程会在事务回滚或事物提交后自动关闭,而openSession必须手动关闭。这里getCurrentSession本地事务(本地</div> </li> <li><a href="/article/3186.htm" title="第一章安装Nginx+Lua开发环境" target="_blank">第一章安装Nginx+Lua开发环境</a> jinnianshilongnian <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/lua/1.htm">lua</a><a class="tag" taget="_blank" href="/search/openresty/1.htm">openresty</a> <div>首先我们选择使用OpenResty，其是由Nginx核心加很多第三方模块组成，其最大的亮点是默认集成了Lua开发环境，使得Nginx可以作为一个Web Server使用。借助于Nginx的事件驱动模型和非阻塞IO，可以实现高性能的Web应用程序。而且OpenResty提供了大量组件如Mysql、Redis、Memcached等等，使在Nginx上开发Web应用更方便更简单。目前在京东如实时价格、秒</div> </li> <li><a href="/article/3313.htm" title="HSQLDB In-Process方式访问内存数据库" target="_blank">HSQLDB In-Process方式访问内存数据库</a> liyonghui160com <div> HSQLDB一大特色就是能够在内存中建立数据库，当然它也能将这些内存数据库保存到文件中以便实现真正的持久化。先睹为快！下面是一个In-Process方式访问内存数据库的代码示例：下面代码需要引入hsqldb.jar包（hsqldb-2.2.8） import java.s</div> </li> <li><a href="/article/3440.htm" title="Java线程的5个使用技巧" target="_blank">Java线程的5个使用技巧</a> pda158 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>Java线程有哪些不太为人所知的技巧与用法？　　萝卜白菜各有所爱。像我就喜欢Java。学无止境，这也是我喜欢它的一个原因。日常工作中你所用到的工具，通常都有些你从来没有了解过的东西，比方说某个方法或者是一些有趣的用法。比如说线程。没错，就是线程。或者确切说是Thread这个类。当我们在构建高可扩展性系统的时候，通常会面临各种各样的并发编程的问题，不过我们现在所要讲的可能会略有不同。 </div> </li> <li><a href="/article/3567.htm" title="开发资源大整合：编程语言篇——JavaScript（1）" target="_blank">开发资源大整合：编程语言篇——JavaScript（1）</a> shoothao <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>概述：本系列的资源整合来自于github中各个领域的大牛，来收藏你感兴趣的东西吧。程序包管理器管理javascript库并提供对这些库的快速使用与打包的服务。 Bower - 用于web的程序包管理。 component - 用于客户端的程序包管理，构建更好的web应用程序。 spm - 全新的静态的文件包管</div> </li> <li><a href="/article/3694.htm" title="避免使用终结函数" target="_blank">避免使用终结函数</a> vahoa.ma <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/C%2B%2B/1.htm">C++</a> <div>终结函数（finalizer）通常是不可预测的，常常也是很危险的，一般情况下不是必要的。使用终结函数会导致不稳定的行为、更差的性能，以及带来移植性问题。不要把终结函数当做C++中的析构函数（destructors）的对应物。我自己总结了一下这一条的综合性结论是这样的： 1）在涉及使用资源，使用完毕后要释放资源的情形下，首先要用一个显示的方</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>

前端知识HTML&CSS

1. 前端开发介绍

1.1 认识前端开发

1.2 web标准

2. HTML & CSS

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

2.1 HTML快速入门

2.1.1 操作

标签是一个一级标题的标签。 标签是一个图片标签，用来展示图片，而其中的 src 属性是用来指定要展示的图片。 4. 然后选中文件，鼠标右击，选择使用浏览器打开文件。 浏览器呈现效果如下:

2.1.2 总结

标签是一个一级标题的标签。标签是一个图片标签，用来展示图片，而其中的 src 属性是用来指定要展示的图片。

4. 然后选中文件，鼠标右击，选择使用浏览器打开文件。

浏览器呈现效果如下: