MRLEE712

web前端学习1-45集

web前端1-45集

==第一集== 课程划分
- 1.HTML+CSS系列教程1之拨云见日
- 2.HTML+CSS系列教程2之溯本求源
- 3.HTML+CSS系列教程3之风声水起
- 4.HTML+CSS系列教程4之巧夺天工
- 如何学好web前端
==第二集== 拨云见日
- 1. 什么是HTML、CSS：
- 2. 代码跟网站的关系：
- 3.写到哪里：
- 4.怎样创建一个.html文件：
- 作业
==第三集== 宇宙第一编译器VS Code
- 1.学习编辑器基本使用：（操作方面）
- 练习
==第四集== 续上集
- 2.多光标操作：
- 3.搜索图标：
- 4.Chrome浏览器（谷歌浏览器）：
- 练习：
==第五集== 深入了解网站开发
- 1.UI设计师：
- 2.web前端开发工程师（H5开发）：
- 3.web后端开发工程师：
- 练习
==第六集== web前端三大核心技术
- 1.html：
- 2.css：
- 3.JavaScript：
- 4.操作方面
==第七集== HTML基础结构与属性
- 1.超文本：
- 2.标记（标签)：
- 3.创建标签快捷键操作：
- 4.*[HTML5标签含义之元素周期表](https://www.juanzan.com/cha/html5/)*
- 练习
==第八集== ***HTML初始代码***
- 1.初始代码快捷创建方式：
- 2.手写初始代码：基本结构：
- 练习
==第九集== HTML注释
- 1.写法：
- 2.意义：
- 3.快捷添加注释与删除注释：
- 练习
==第十集== HTML语义化
- 1.好处
- 2.具体操作：
==第十一集== 标题与段落
- 1.h标签：
- 2.p标签：
- 练习
==第十二集== 文本修饰标签
- 1.常见文本修饰标签
- - 1.1 ````:表示强调，会对文本进行加粗
  - 1.2````:表示强调，会使文本斜体
  - 1.3``_{``、``^{``:下标文本、上标文本(都是双标签)}}
  - 1.4``、``:删除文本、插入文本
==第十三集== 图片标签与图片属性
- 1. ````:图片(单标签)
- 2.````属性：
- 3.Tip
- 练习
==第十四集== 引入文件的地址途径
- 1.相对路径
- 例子
- 2.绝对路径(暂时不用)
==第十五集== 跳转链接
- 1.````标签（双标签）
- - 标签属性含义
  - - 1.1href属性：链接的地址
    - 1.2target属性：可以改变链接打开的方式
- 2. ````标签（单标签）
- 练习（重要）
==第十六集== 跳转锚点
- 1.实现方案一
- 2.实现方案二
- 练习
==第十七集== 特殊符号
==第十八集无序列表==
- 1.列表标签
- 2.列表标签的type属性：
- 练习（重要）
==第十九集== 有序列表（不重要）
==第二十集== 定义列表
- 1.三个标签：
练习
==第二十一集== 嵌套列表
- 1.例子
- 练习
==第二十二集== 表格标签
- 1.基本
- 2.语义化标签：````
==第二十三集==表格属性
- 1.属性
- 练习
==第二十四集==表单标签
- 1.````
- 2.````
==第二十五集==表单标签
- 1.````:多行文本框
- 2.```` ````:下拉菜单
- 3.````：辅助表单
- 4.常见属性
- 练习（重要）
==第二十六集==表格表单组合
==第二十七集==``
``与`` ``
==第28集== css基础语法
- 1.格式
- 2.单位
- 3.基本样式
- 4.针对以上注释
- 5.css注释
==第29集== 内联样式与内部样式
- css样式引入方式
- - 1.内联（行内、行间）样式
  - 2.内部样式[代码可以复用]
==第30集== 外部样式
==第31集== css中的颜色表示法
- 1.单词表示法（局限色种）
- 2.十六进制表示法
- 3.RGB三原色表示法
- 4.(提取网页中的颜色)
- 练习
==第32集== css背景样式（赶进度）
- background-colour：背景颜色
- background-image：背景图
- background-repeat：背景图片的平铺方式
- background-position：背景图片的位置
- background-attachment：背景图随滚动条的移动方式
==第33集==练习
==第34集== css边框样式
==第35集==练习
==第36集== css文字样式
- 1.font-family:字体类型
- 2.中文字体的英文名称
- 3.衬线体与非衬线体
==第37集==续
- 1.fond-size:字体大小
- 2.fond-weigth:字体粗细
- 3.fond-style:字体样式
- 4.color：字体颜色
- 练习
==第38集== css段落样式
- 1,text-decoration:文本装饰
- 2.text-transform:文本大小写（针对英文段落）
- 4.text-align:文本对齐方式
==第40集== 续
- 5.line-height:定义行高
==第41集==续
- 6.letter-spacing：定义字间距
- 7.word-spacing:定义词间距（针对英文）
- 8.强制折行：（针对英文）
==第42集==（综合针对练习）（重要）
==第43集== css复合样式
==第44集== css选择器
- 1.ID选择器
==第45集== 续
- 2.CLASS选择器
- 小技巧（检查样式是否生效）

计划任务

第一集课程划分

1.HTML+CSS系列教程1之拨云见日

HTML：
CSS：
切图流程
PC企业站布局
PC游戏站布局

2.HTML+CSS系列教程2之溯本求源

扩展HTML
扩展css
HTML5新语法
兼容与hack

3.HTML+CSS系列教程3之风声水起

弹性布局
网格布局
移动端布局
响应式布局 Bootstrap

4.HTML+CSS系列教程4之巧夺天工

预编译css
postcss
css架构
高级功能
css与js交互

如何学好web前端

感兴趣
够努力

第二集拨云见日

1. 什么是HTML、CSS：

两种编程语言、一般配合使用，是网站开发的两种基础语言（做网站的编程语言）。

2. 代码跟网站的关系：

浏览器对代码进行解析，然后就呈现出这样一个网站，网站是解析之后的代码。
查看网页源代码，淘宝对应的原始代码。前面一部分是HTML，后面一部分是css。
写代码、运行
（浏览器把代码解析之后的样子就是我们看到的网站，如何看到网站的原始代码呢？通过鼠标右键查看网页源代码）

3.写到哪里：

一个网站是由N多个网页组成的，
电视剧，40集，每一集都是MP4文件
每一个网页都是一个.html文件

4.怎样创建一个.html文件：

在指定目录下，点击右键，创建文本文档，把整体重新命个名，比如“01-demo.html”

作业

百度百科:HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 [1]
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。 [1]
百度百科:层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 [2]

第三集宇宙第一编译器VS Code

全称Visual Studio Code,来自微软，是一个开源的、基于Electron的轻量代码编译器。
下载后是一个.exe文件
在最左侧拓展搜索关键词下载插件，安装语言包，显示中文。
再安装两个插件：open in browser、view in borwser,能够在编辑器中运行网页。

1.学习编辑器基本使用：（操作方面）

保存：ctrl+s
创建文件，创建文件夹
全选：ctrl+a
剪切：ctrl+x
复制：ctrl+c
粘贴：ctrl+v
撤销：ctrl+z 前进：ctrl+y
自动折行：文件->首选项->设置->搜索word->word
wrap->on
从头选中一行：shift+end
从尾部选中一行：shift+home
快速复制一行：shift+alt+↓
快速移动一行：alt+↑/↓
向后缩进：tab
向前缩进：tab+shift

练习

熟练使用vs code 基础操作

第四集续上集

2.多光标操作：

点一下光标，按一下alt键，（控制多光标移动）ctrl+D:选择相同元素的下一个

3.搜索图标：

文件多的时候使用方便

4.Chrome浏览器（谷歌浏览器）：

市场份额最多，对代码支持最好。
安装方式

练习：

了解五大浏览器

第五集深入了解网站开发

需要团队的配合，各个岗位不可缺失：

1.UI设计师：

给开发人员一个图片

2.web前端开发工程师（H5开发）：

把设计稿转成代码、数据库里数据显示到页面、写html.css。
html：负责结构
css：负责样式（美化）
（F12开发工具挑出Chrome开发工具，可以把样式去掉（删除），（未经css的html））

3.web后端开发工程师：

把数据存储起来（例如把购物数据存储起来）

练习

了解前端另一项技：JavaScrip，与HTML、css之间的关系

第六集 web前端三大核心技术

1.html：

结构

2.css：

样式

3.JavaScript：

行为
（与用户交互。例如输入。。。后，自动显示多种选项）（做法：打开Chrome浏览器，选择设置，在设置中找到高级设置，内容项目，关闭JS，则网页不能交互）

4.操作方面

在part1创建文件，

中间加文字就可以输入到界面

，右键找运行。
ctrl+鼠标滚轮：就可以放大缩小文字
Ctrl+0：就可以回归初始大小。
写好结构就可以给他加样式，就是css的作用。
加颜色；斜体： div{color:red;font-style:italic;},返回刷新就可以得到红色的文字、斜体的文字
（演示JS：加一个行为）

第七集 HTML基础结构与属性

超文本标记语言（HyperText Markup Language),标准通用语言下的一个应用。是网页制作必备的编程语言。

1.超文本：

文本内容+非文本内容（音频视频）

2.标记（标签)：

<单词>
标记也叫标签：

写法分成两种：
单标签：

双标签：

3.创建标签快捷键操作：

先写单词，然后按下tab键，就会自动完成标签创建。
会自动区分生成单标签或双标签
结构生成举例：

hello world

标签是可以上下排列也可以组合嵌套

4.HTML5标签含义之元素周期表

标签属性：来修饰标签的，设置当前标签的一些功能
<标签属性 =“值” 属性2=‘’值2‘’>（只要通过空格把它隔开就行）一个标签可以加很多个属性

练习

练习书写基本结构和属性

第八集 HTML初始代码

每一个html文件都需要添加初始代码，初始代码就是无论你些什么样的网页，这些代码都是要有的，这就是初始代码。（每个html文件都有的代码，因为要符合html文件的规范写法）

1.初始代码快捷创建方式：

！+Tab键

2.手写初始代码：基本结构：

   文档声明：告诉浏览器这是一个html文件
<html lang="en">  html文件的最外层标签：包裹着所有html标签代码   lang-"en"表示是一个英文网站 lang-"zh-CN"表示是一个中文网站
<head>
    <meta charset="UTF-8"> 元信息：是编写网页中的一些赋值信息  charset="UTF-8"国际编码，让网页不出现乱码的情况（或许可以添加多个meta的这种代码吧，但添加的内容不确定）
    <title>Documenttitle>设置网页的标题
head>
<body>
        显示网页内容区域
body>
html>

练习

手写初始代码和快速创建初始代码

第九集 HTML注释

注释的代码，只有在文件中看得到，但是浏览器显示不出来

1.写法：

2.意义：

    1.把暂时不用的代码注释起来，方便以后使用
    2.提示当时代码的意义

3.快捷添加注释与删除注释：

ctrl+/
shift+alt+a

练习

手写注释和快捷键添加删除注释

第十集 HTML语义化

指的是，根据网页中内容的结构，选择合适的HTML标签进行编写。

1.好处

在没有css的情况下，页面也能呈现出很好的内容结构。
有利于SEO，让搜索引擎爬虫更好的理解网页。
方便其他设备解析（如屏幕阅读器、盲人阅读器）
便于团队开发和维护

2.具体操作：

网页标题，chrome，书签，点开显示书签栏，把他拖到书签栏，就添加了一个书签，先显示出来，切到其他网页，再点击刚刚的书签，就显示提取相关的信息
常用标签的使用↓

第十一集标题与段落

（在body中添加）

1.h标签：

用来表示网页内容区域的标题（区别）

2.p标签：

用来表示段落

标题 ——>双标签 :...
在一个网页中，h1标题最重要，并且一个html文件中，只能存在一个h1，其他的可以出现多次。
(h5.h6不经常使用)
先创建初始结构:

   文档声明：告诉浏览器这是一个html文件
<html lang="en">  html文件的最外层标签：包裹着所有html标签代码   lang-"en"表示是一个英文网站 lang-"zh-CN"表示是一个中文网站
    <head>
        <meta charset="UTF-8"> 元信息：是编写网页中的一些赋值信息  charset="UTF-8"国际编码，让网页不出现乱码的情况
        <title>Documenttitle>设置网页的标题
    head>
    <body>
        显示网页内容区域
    body>
html>

一段一段的文字就用p标签，
段落——>双标签：,p标签内就是一独单一段的内容。
（查看原文件可以搜索）
（右键检查就可以看到内容标签和结构）

练习

做一个带有标题和段落的个人简介

解：在初始代码的body中分行输入h标签和p标签即可
手写(熟能生巧)

第十二集文本修饰标签

1.常见文本修饰标签

1.1 :表示强调，会对文本进行加粗

: 是一个双标签，写法：

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <p> <strong>这是一段需要强调的文本strong> <em>这是一段需要强调的文本em> p> body> html>

点击右键运行，文本就加粗了。

1.2:表示强调，会使文本斜体

strong、em 区别

写法和展示不同

strong强调性更强，en更弱

1.3、:下标文本、上标文本(都是双标签)

下标：
上标：

例子
上标：数字的平方,勾股定理a ² + b ² = c ²
下标：水分子H ₂o

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <p> ...... p> <p> a <sup>2sup> + b<sup>2sup> = c<sup>2sup> H<sub>2sub>o p> body> html>

写好刷新网页

1.4、:删除文本、插入文本

（一般配合使用）
场景:

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <p> <strong>这是一段需要强调的文本strong> <em>这是一段需要强调的文本em> p> <p> 促销：原价<del>300del>，现价<ins>100ins> p> body> html>

展示效果：

第十三集图片标签与图片属性

1. :图片(单标签)

: src
alt
title
width、height

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> body> html>

2.属性：

src:引入图片的地址（查看图片地址,在新窗口中查看图片，把图片地址考一下，放到src当中（src附属的引号）保存，预览）

alt：当图片出现问题的时候，可以显示一段友好的提示文字，提示图片的内容之类；如果图片没有问题，则该文字不会显示。

title:提示信息（光标放到到图片上就会提示图片信息）

widyh、height:控制图片大小（像素）（设置图片大小也可以用css）

3.Tip

（如果不在html中加上宽高，当网速很慢时，网页内容会移动，用户体验感很差。
调网速方法：chrome浏览器，Network选项，Online选项，选择网络）

练习

在文章中添加图片

第十四集引入文件的地址途径

1.相对路径

（相对于某一个文件来进行引入的）
.在路径中表示当前路径
··在路径中表示上一级路径

例子

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <img src="./dog.jpg" alt="">相对路径的引用方法 body> html>

刷新

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <img src="./img/dog.jpg">添加了当前文件所处文件夹img body> html>

刷新

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <img src="./img/animal/dog.jpg">又加了一个同级的文件animal body> html>

刷新

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <img src="../img/animal/dog.jpg">..就是跳到了外面的一层 body> html>

2.绝对路径(暂时不用)

在任何一个html文件中都可以引用到。
绝对路径盘符可以不用写，系统自动找到。

第十五集跳转链接

1.标签（双标签）

重要属性：href 、 target

标签属性含义

1.1href属性：链接的地址

可以是文字链接，也可以是图片链接

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <a href="http://www.baidu.com">访问百度a>打开网页就会出现一个访问百度字样的链接 body> html>

1.2target属性：可以改变链接打开的方式

默认情况下，在当前页面打开_self 新窗口打开_blank

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body>访问百度a>这样就会在顶部新出现一个网页，非常方便（新窗口打开） body> html>

2. 标签（单标签）

用来改变链接的默认行为的(让所有的链接跳转方式默认统一为一种方式)

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> <base target="-blank">这样就全部都默认以blank方式打开 head> <body> <a href="http://www.baidu.com"> body> html>

练习（重要）

创建一个文件夹，链接的综合练习

第十六集跳转锚点

利用a标签做到的。
在body里面：
#号HTML

1.实现方案一

#号 + id属性
HTML超文本标记语言

“#”后跟着的是要跳转到的标签身上的id值

对应id值是自定义的

2.实现方案二

#号 + name属性

在你要跳的内容上再写一个a

可以用这玩意做那个返回到顶部

练习

操作

第十七集特殊符号

输入法无法输入的字符，注册商标符、版权符、解析不出多个空格。html提供了专门代码。

特殊字符:
&+字符
解决冲突，左右尖括号，添加多个空格
（可以查阅文献了解）

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <p> <html> 展示出来的效果是一个html标签 hello world 网页中只能出现一个空格，解析出来是被忽略掉的空格 hello world 这就是两个空格，复制几个就有几个空格 p> body> html>

第十八集无序列表

、
:列表的最外层容器、列表项
注:ui和li必须是组合出现的，它们之间是不能有其他标签的

1.列表标签

无序列表->
符合嵌套规范

之间不允许有其他标签

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <ul> <li>第一项li> <li>第二项li> ul> 正确的写法 body> html>

2.列表标签的type属性：

改变前面标记的样式（一般都是用css去控制）

这样写（只改变这一个标签）
改变样式查文档链接

练习（重要）

创建无序列表
一行例子：

文本

第十九集有序列表（不重要）

、
:列表的最外层容器、列表项
注：有序列表用的非常少，经常用的是无序列表，无序列表可以去替代有序列表。

第二十集定义列表

1.三个标签：

:定义列表

:定义专业术语或名词

:对名词进行解释和描述

列表项需要添加标题和对标题进行描述的内容时用定义列表

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <dl> <dt>HTMLdt> <dd>超文本标记语言dd>这两行样就产生列表的第一项，两行为一组。。。 <dl> body> html>

练习

创建定义列表

第二十一集嵌套列表

列表之间可以互相嵌套形成多层级列表

1.例子

<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>Documenttitle> head> <body> <ul> <li> 辽宁省 <ul> <li>大连li> <li>沈阳li> <li>丹东li> ul> li> ul> body> 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>Documenttitle> head> <body> <dl> <dt>美国dt> <dd>洛杉矶dd> <dd>芝加哥dd> dl> body> html>

练习

第二十二集表格标签

1.基本

:表格的最外层容器
:定义表格行
(tBody是可以出现多次的，但tHead、tFood只能出现一次 )
第二十三集表格属性
1.属性
border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
rowspan:合并行
colspan:合并列
align:左右对齐方式：left、center、right
valign:上下对齐方式:top、middle、bottom
练习
创建表格
第二十四集表单标签
1.
表单的最外层容器
2.
（单标签）标签用于搜索用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框。【单选框通过name变成一组】

第二十五集表单标签
1.</code>:多行文本框</h2> <p><a href="http://img.e-com-net.com/image/info8/4366f8a60ebf4785b97b686539a66cd6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4366f8a60ebf4785b97b686539a66cd6.jpg" alt="web前端学习1-45集_第8张图片" width="650" height="543" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/f73b6a11647a453e804bef729f568620.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f73b6a11647a453e804bef729f568620.jpg" alt="web前端学习1-45集_第9张图片" width="627" height="636" style="border:1px solid black;"></a></p> <ul> <li>通过改变行列改变大小<br> cols(行)<br> rows(列)</li> </ul> <h2>2.<code><select></code> <code><option></code>:下拉菜单</h2> <ol> <li></li> </ol> <pre><code class="prism language-html"><span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>北京<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>上海<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>深圳<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/29c89eb368d84291a7dddb07a10423ae.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/29c89eb368d84291a7dddb07a10423ae.jpg" alt="web前端学习1-45集_第10张图片" width="650" height="776" style="border:1px solid black;"></a></p> <p><a href="http://img.e-com-net.com/image/info8/d742d6b5eebf407c8b2d09a100db771d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d742d6b5eebf407c8b2d09a100db771d.jpg" alt="web前端学习1-45集_第11张图片" width="155" height="169" style="border:1px solid black;"></a><br> 2.加上“请选择”<br> <a href="http://img.e-com-net.com/image/info8/29ffd96e3a9448bd8d88d0c7ee894375.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/29ffd96e3a9448bd8d88d0c7ee894375.jpg" alt="web前端学习1-45集_第12张图片" width="650" height="387" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/f15b9547313943f4b126e943d15a85b6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f15b9547313943f4b126e943d15a85b6.jpg" alt="web前端学习1-45集_第13张图片" width="650" height="776" style="border:1px solid black;"></a><br> 禁止选择“请选择”：<br> <a href="http://img.e-com-net.com/image/info8/0ff8bdcb6db04a4d81bea501f6551637.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0ff8bdcb6db04a4d81bea501f6551637.jpg" alt="web前端学习1-45集_第14张图片" width="650" height="387" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/1eae019abf774c8f8bb04c7b5f1963d2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1eae019abf774c8f8bb04c7b5f1963d2.jpg" alt="web前端学习1-45集_第15张图片" width="650" height="776" style="border:1px solid black;"></a></p> <p>3.加上size属性</p> <p><a href="http://img.e-com-net.com/image/info8/fd8597124dcc4ac59ff2e128404f497f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fd8597124dcc4ac59ff2e128404f497f.jpg" alt="web前端学习1-45集_第16张图片" width="650" height="387" style="border:1px solid black;"></a><a href="http://img.e-com-net.com/image/info8/150f15e547d640b08038a2c51564dd48.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/150f15e547d640b08038a2c51564dd48.jpg" alt="web前端学习1-45集_第17张图片" width="650" height="776" style="border:1px solid black;"></a><br> 4.多选属性<br> <a href="http://img.e-com-net.com/image/info8/f520445c8d8b42e9aec2bcd7e5add994.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f520445c8d8b42e9aec2bcd7e5add994.jpg" alt="web前端学习1-45集_第18张图片" width="650" height="387" style="border:1px solid black;"></a><a href="http://img.e-com-net.com/image/info8/3fcfecb878ec4e548d23133b26eb58c5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3fcfecb878ec4e548d23133b26eb58c5.jpg" alt="web前端学习1-45集_第19张图片" width="650" height="776" style="border:1px solid black;"></a></p> <ul> <li>与单选属性另一区别（使文件也可以多选）<a href="http://img.e-com-net.com/image/info8/fe0106dd7d4544d48192dae621222ca2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fe0106dd7d4544d48192dae621222ca2.jpg" alt="web前端学习1-45集_第20张图片" width="650" height="387" style="border:1px solid black;"></a></li> </ul> <p><a href="http://img.e-com-net.com/image/info8/41009335597c44279245ecee63784ff4.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/41009335597c44279245ecee63784ff4.jpg" alt="web前端学习1-45集_第21张图片" width="650" height="408" style="border:1px solid black;"></a></p> <h2>3.<code><label></code>：辅助表单</h2> <p>使选中范围更大：<br> <a href="http://img.e-com-net.com/image/info8/d50aacad848347ae8c23823483bd4cfc.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d50aacad848347ae8c23823483bd4cfc.jpg" alt="web前端学习1-45集_第22张图片" width="650" height="320" style="border:1px solid black;"></a><br> 添加了label标签就能使点击文字也显示选中选项（能点击范围更大）<br> <a href="http://img.e-com-net.com/image/info8/68b44c9eee264c4eba659c43b826dcee.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/68b44c9eee264c4eba659c43b826dcee.jpg" alt="web前端学习1-45集_第23张图片" width="650" height="776" style="border:1px solid black;"></a></p> <h2>4.常见属性</h2> <ul> <li>checked、disabled、name、for…</li> </ul> <h2>练习（重要）</h2> <p><a href="http://img.e-com-net.com/image/info8/e005d66627ce4d5ab0aa303ef26b4137.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e005d66627ce4d5ab0aa303ef26b4137.jpg" alt="web前端学习1-45集_第24张图片" width="317" height="382" style="border:1px solid black;"></a></p> <h1><mark>第二十六集</mark>表格表单组合</h1> <p>表格表单可以相互组合形成数据展示效果</p> <p><a href="http://img.e-com-net.com/image/info8/2099d7a9363840af834c14a3ed08e145.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2099d7a9363840af834c14a3ed08e145.jpg" alt="web前端学习1-45集_第25张图片" width="650" height="427" style="border:1px solid black;"></a></p> <h1><mark>第二十七集</mark><code><div></code>与<code><span></code></h1> <dl> <code><div></code>（块） <dd> 全称division，“分割、分区”的意思，该标签用来划分一个区域1，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。html中的大多数标签都可以嵌套在该标签中，该标签中还可以嵌套多层该标签，用来将网页分成独立的、不同部分，用来实现网页的规划和布局。 </dd> <code><span></code>（内联 ) <dd> 用来修饰文字的，div和span都是没有任何默认样式的，需要配合css。 </dd> </dl> <p>未添加css：</p> <p><a href="http://img.e-com-net.com/image/info8/2c20ee7251fd4344b206014be7b2134e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2c20ee7251fd4344b206014be7b2134e.jpg" alt="web前端学习1-45集_第26张图片" width="650" height="343" style="border:1px solid black;"></a></p> <p>添加了css：<br> <a href="http://img.e-com-net.com/image/info8/cf3cbe91880644c69760d54224f59529.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/cf3cbe91880644c69760d54224f59529.jpg" alt="web前端学习1-45集_第27张图片" width="650" height="340" style="border:1px solid black;"></a></p> <h1><mark>第28集</mark> css基础语法</h1> <h2>1.格式</h2> <p>选择器{属性1：值1；属性2：值2}</p> <ul> <li>写在哪</li> </ul> <p><a href="http://img.e-com-net.com/image/info8/75b6427a9cf345ecbdd4ffd8e466d637.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/75b6427a9cf345ecbdd4ffd8e466d637.jpg" alt="web前端学习1-45集_第28张图片" width="650" height="391" style="border:1px solid black;"></a></p> <ul> <li>举例</li> <li><a href="http://img.e-com-net.com/image/info8/b8e02c158c544c5fb8a048fe789ba61f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b8e02c158c544c5fb8a048fe789ba61f.jpg" alt="web前端学习1-45集_第29张图片" width="650" height="377" style="border:1px solid black;"></a></li> </ul> <p><a href="http://img.e-com-net.com/image/info8/d2c997d8cd384836adc0da0f0dbb0339.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d2c997d8cd384836adc0da0f0dbb0339.jpg" alt="web前端学习1-45集_第30张图片" width="650" height="776" style="border:1px solid black;"></a></p> <h2>2.单位</h2> <ol> <li> <p>px（像素pixel）<br> （横向的像素*纵向的像素=屏幕分辨率）</p> </li> <li> <p>%（百分比）<br> 表示一个相对单位，会跟他的父容器大小<br> 按照外容器大小的百分比来</p> </li> </ol> <ul> <li>举例<a href="http://img.e-com-net.com/image/info8/185093cb8e7643fca72a6cc16a63dd93.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/185093cb8e7643fca72a6cc16a63dd93.jpg" alt="web前端学习1-45集_第31张图片" width="650" height="406" style="border:1px solid black;"></a></li> </ul> <h2>3.基本样式</h2> <p>width宽<br> heigth高<br> background-color背景颜色</p> <h2>4.针对以上注释</h2> <p>css中的div标签对应所有html中div标签<br> 同理，span对应所有span标签<br> <a href="http://img.e-com-net.com/image/info8/99b2392ead6b43028683678f1090d6f0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/99b2392ead6b43028683678f1090d6f0.jpg" alt="web前端学习1-45集_第32张图片" width="650" height="406" style="border:1px solid black;"></a></p> <h2>5.css注释</h2> <p><code>/*css注释内容*/</code></p> <ol> <li>快捷键shift、alt+A（提供一组注释符）</li> <li>快捷键ctrl+/（对当前行注释、对选择内容所在行注释）</li> </ol> <h1><mark>第29集</mark> 内联样式与内部样式</h1> <h2>css样式引入方式</h2> <h3>1.内联（行内、行间）样式</h3> <ul> <li>通过style属性<br> （在html标签上添加style属性来实现的）<br> <a href="http://img.e-com-net.com/image/info8/eca82a5aa2d84e1a88061d41ccaf602f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/eca82a5aa2d84e1a88061d41ccaf602f.jpg" alt="web前端学习1-45集_第33张图片" width="650" height="406" style="border:1px solid black;"></a></li> </ul> <h3>2.内部样式[代码可以复用]</h3> <ul> <li>通过style标签<br> （在<code><style></code>标签内添加样式）<br> ![在这里插入图片描述](https://img-blog.csdnimg.cn/6d28aa09a9ec4a2a93da44d15d77f554.png</li> </ul> <dl> 注：内部样式的优点，可以复用代码 <dd> 例如： <br> <a href="http://img.e-com-net.com/image/info8/eb1afb43b40a4ddfb1e6cbd341d0d3e9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/eb1afb43b40a4ddfb1e6cbd341d0d3e9.jpg" alt="web前端学习1-45集_第34张图片" width="650" height="406" style="border:1px solid black;"></a> </dd> </dl> <h1><mark>第30集</mark> 外部样式</h1> <p>引入一个单独的css文件，文件的后缀名，name.css<br> 有两种写法：<br> <code><link></code>标签(当前页面与一个外部资源的映射关系)</p> <ul> <li>rel属性指定资源跟页面的关系</li> <li>href属性资源的地址<br> <a href="http://img.e-com-net.com/image/info8/473a8f4f82214cdaa6072331aeec45c1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/473a8f4f82214cdaa6072331aeec45c1.jpg" alt="web前端学习1-45集_第35张图片" width="650" height="406" style="border:1px solid black;"></a><br> （以下方式不建议使用）<br> <a href="http://img.e-com-net.com/image/info8/44d4cb4999654850be7e8279bb161aab.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/44d4cb4999654850be7e8279bb161aab.jpg" alt="web前端学习1-45集_第36张图片" width="650" height="406" style="border:1px solid black;"></a></li> </ul> <h1><mark>第31集</mark> css中的颜色表示法</h1> <h2>1.单词表示法（局限色种）</h2> <p>red、green</p> <h2>2.十六进制表示法</h2> <p>0123456789abcdef(共十六个)<br> #000000(最小)<br> <a href="http://img.e-com-net.com/image/info8/9d601d7edb1045c3b1f9c5b1ea054cd6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9d601d7edb1045c3b1f9c5b1ea054cd6.jpg" alt="web前端学习1-45集_第37张图片" width="650" height="406" style="border:1px solid black;"></a></p> <p>#ffffff（最大）<br> <a href="http://img.e-com-net.com/image/info8/d447e368374a41198fa85abc9e97fdaa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d447e368374a41198fa85abc9e97fdaa.jpg" alt="web前端学习1-45集_第38张图片" width="650" height="406" style="border:1px solid black;"></a></p> <h2>3.RGB三原色表示法</h2> <p>（RGB红绿蓝）</p> <ul> <li>写法：rgb（255,255,255）；（这个是白色）</li> <li>取值范围0~255</li> </ul> <h2>4.(提取网页中的颜色)</h2> <p>工具：1.FeHelper(Chrome Extension)<br> 下载地址<br> （必须在网络环境下）<br> 2.ps（photoshop）</p> <h2>练习</h2> <p><a href="http://img.e-com-net.com/image/info8/37576dc838ce43e5bfb24983e0b7c396.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/37576dc838ce43e5bfb24983e0b7c396.jpg" alt="在这里插入图片描述" width="650" height="48"></a></p> <h1><mark>第32集</mark> css背景样式（赶进度）</h1> <h2>background-colour：背景颜色</h2> <h2>background-image：背景图</h2> <p>url(背景地址)<br> 默认：会水平垂直都<strong>铺满</strong><a href="http://img.e-com-net.com/image/info8/73781b5daf4c47bf895a7806f4a111aa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/73781b5daf4c47bf895a7806f4a111aa.jpg" alt="在这里插入图片描述" width="650" height="50"></a></p> <h2>background-repeat：背景图片的平铺方式</h2> <p>repeat-x<a href="http://img.e-com-net.com/image/info8/7a346070352f4c2d8533a82c9e90d05b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7a346070352f4c2d8533a82c9e90d05b.jpg" alt="在这里插入图片描述" width="650" height="72"></a></p> <p>repeat-y<a href="http://img.e-com-net.com/image/info8/2d3dbdf080d94e20b0b85e58ab538455.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2d3dbdf080d94e20b0b85e58ab538455.jpg" alt="在这里插入图片描述" width="537" height="70"></a></p> <p>repeat(x,y都进行平铺，默认值)<br> no-repeat:都不平铺</p> <h2>background-position：背景图片的位置</h2> <p>x y<a href="http://img.e-com-net.com/image/info8/62dde89f16414920b5ad06d559b74ff4.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/62dde89f16414920b5ad06d559b74ff4.jpg" alt="web前端学习1-45集_第39张图片" width="650" height="123" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/11eed61970504c6388f9c3eee623f362.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/11eed61970504c6388f9c3eee623f362.jpg" alt="web前端学习1-45集_第40张图片" width="322" height="295" style="border:1px solid black;"></a><br> x y:number 单词<br> x:left.center.right<br> y:top.center.bottom</p> <p><a href="http://img.e-com-net.com/image/info8/5211c943a98e42499cacc24f8d606571.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5211c943a98e42499cacc24f8d606571.jpg" alt="在这里插入图片描述" width="548" height="79"></a><br> <a href="http://img.e-com-net.com/image/info8/541dc97ae9f44e499f10c1a75c365c4f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/541dc97ae9f44e499f10c1a75c365c4f.jpg" alt="web前端学习1-45集_第41张图片" width="307" height="302" style="border:1px solid black;"></a></p> <h2>background-attachment：背景图随滚动条的移动方式</h2> <ol> <li> <p>scroll:默认值（背景位置按照当前元素偏移）<a href="http://img.e-com-net.com/image/info8/3acf6ab5ffd64498b57b76ba3b8bd332.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3acf6ab5ffd64498b57b76ba3b8bd332.jpg" alt="web前端学习1-45集_第42张图片" width="573" height="156" style="border:1px solid black;"></a><br> 背景图跟随容器移动。</p> </li> <li> <p>fixed:（背景位置按照浏览器偏移）<br> <a href="http://img.e-com-net.com/image/info8/906e26c7f1ce415cb1cca951c702fcce.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/906e26c7f1ce415cb1cca951c702fcce.jpg" alt="web前端学习1-45集_第43张图片" width="592" height="153" style="border:1px solid black;"></a><br> 背景图不跟随容器移动</p> </li> </ol> <h1><mark>第33集</mark>练习</h1> <p>利用滚动条移动方式实现网页视觉差<br> <a href="http://img.e-com-net.com/image/info8/8b4ed50d01cb49858e84afa23636da49.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8b4ed50d01cb49858e84afa23636da49.jpg" alt="web前端学习1-45集_第44张图片" width="650" height="258" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/e27f9df87c5c487fb3ed47b55de3c675.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e27f9df87c5c487fb3ed47b55de3c675.jpg" alt="web前端学习1-45集_第45张图片" width="650" height="181" style="border:1px solid black;"></a></p> <p><a href="http://img.e-com-net.com/image/info8/0d5a0881ad0e4f2198fc297bfe689e7b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0d5a0881ad0e4f2198fc297bfe689e7b.jpg" alt="web前端学习1-45集_第46张图片" width="650" height="147" style="border:1px solid black;"></a></p> <h1><mark>第34集</mark> css边框样式</h1> <dl> border-style:边框样式 <dd> solid:实线 <br> dashed:虚线 <br> dotted:点线 </dd> border-width:边框大小 <dd> px··· </dd> border-color:边框颜色 <dd> red #f00··· </dd> </dl> <p><a href="http://img.e-com-net.com/image/info8/e4b65e22d25a4c32bd1b3fa9c06d29aa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e4b65e22d25a4c32bd1b3fa9c06d29aa.jpg" alt="web前端学习1-45集_第47张图片" width="650" height="174" style="border:1px solid black;"></a></p> <p><a href="http://img.e-com-net.com/image/info8/5ca119fbce7c4396a4f47d5c380bd78b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5ca119fbce7c4396a4f47d5c380bd78b.jpg" alt="web前端学习1-45集_第48张图片" width="650" height="139" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/ab4660316d0a43878cedceb69740f230.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ab4660316d0a43878cedceb69740f230.jpg" alt="web前端学习1-45集_第49张图片" width="291" height="282" style="border:1px solid black;"></a></p> <ul> <li>针对某一条边单独设置<br> border-left-style:中间是方向left、right、top、bottom</li> </ul> <p><a href="http://img.e-com-net.com/image/info8/f3c82f5a97094e83a4bcbc6dae29778a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f3c82f5a97094e83a4bcbc6dae29778a.jpg" alt="web前端学习1-45集_第50张图片" width="650" height="180" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/4cd0c8317f7141bca0c211ce78fe6490.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4cd0c8317f7141bca0c211ce78fe6490.jpg" alt="web前端学习1-45集_第51张图片" width="449" height="330" style="border:1px solid black;"></a></p> <h1><mark>第35集</mark>练习</h1> <p>利用边框实现三角形<br> <a href="http://img.e-com-net.com/image/info8/7b9ae5b1092443a98b3e6d687f7697ac.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7b9ae5b1092443a98b3e6d687f7697ac.jpg" alt="web前端学习1-45集_第52张图片" width="650" height="341" style="border:1px solid black;"></a></p> <p><a href="http://img.e-com-net.com/image/info8/ab56d03d76154ece9f73f539bf01ff35.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ab56d03d76154ece9f73f539bf01ff35.jpg" alt="web前端学习1-45集_第53张图片" width="411" height="347" style="border:1px solid black;"></a></p> <p><a href="http://img.e-com-net.com/image/info8/9f1e9635ad714674abe6a04a6430c27e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9f1e9635ad714674abe6a04a6430c27e.jpg" alt="web前端学习1-45集_第54张图片" width="650" height="436" style="border:1px solid black;"></a></p> <p><a href="http://img.e-com-net.com/image/info8/250780017973473fbe2584ef3ca36e9f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/250780017973473fbe2584ef3ca36e9f.jpg" alt="在这里插入图片描述" width="138" height="96"></a></p> <h1><mark>第36集</mark> css文字样式</h1> <h2>1.font-family:字体类型</h2> <p>: 英文字体：Arial，‘Times New Roman’<br> 中文字体：微软雅黑，宋体<br> <a href="http://img.e-com-net.com/image/info8/f4341b5c72764826b72a3ca0ec713236.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f4341b5c72764826b72a3ca0ec713236.jpg" alt="web前端学习1-45集_第55张图片" width="607" height="270" style="border:1px solid black;"></a></p> <p><a href="http://img.e-com-net.com/image/info8/53db4b44e9984c4fa0c5ad3e3aaa4673.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/53db4b44e9984c4fa0c5ad3e3aaa4673.jpg" alt="web前端学习1-45集_第56张图片" width="252" height="259" style="border:1px solid black;"></a></p> <h2>2.中文字体的英文名称</h2> <p>: 微软雅黑：‘Microsoft YaHei’<br> 宋体:SimSun</p> <p><a href="http://img.e-com-net.com/image/info8/ec0a51a026d440cabfe946db4f02a02e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ec0a51a026d440cabfe946db4f02a02e.jpg" alt="web前端学习1-45集_第57张图片" width="650" height="276" style="border:1px solid black;"></a></p> <h2>3.衬线体与非衬线体</h2> <p><a href="http://img.e-com-net.com/image/info8/b0ce0493cefd40419338b4b001dc9036.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b0ce0493cefd40419338b4b001dc9036.jpg" alt="web前端学习1-45集_第58张图片" width="650" height="187" style="border:1px solid black;"></a><br> 有菱角和比较平滑的区别</p> <dl> 注意事项 <dd> 设置多字体方式 <br> 引号的问题 </dd> </dl> <h1><mark>第37集</mark>续</h1> <h2>1.fond-size:字体大小</h2> <p>默认大小： 16px<br> 写法：number(px) 单词(small larger···不推荐使用)</p> <p><a href="http://img.e-com-net.com/image/info8/a607c5cbb535451886714fa3f61b3874.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a607c5cbb535451886714fa3f61b3874.jpg" alt="web前端学习1-45集_第59张图片" width="650" height="222" style="border:1px solid black;"></a><br> 注：字体大小一般为偶数</p> <h2>2.fond-weigth:字体粗细</h2> <dl> 两种模式 <dd> 正常（normal）加粗(bold) </dd> 写法 <dd> 单词（normal、bold）number(100 200···900，100到500都是正常的，600到900都是加粗的) </dd> </dl> <p><a href="http://img.e-com-net.com/image/info8/8e20860343f24ae0a6536dd6db532462.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8e20860343f24ae0a6536dd6db532462.jpg" alt="web前端学习1-45集_第60张图片" width="650" height="217" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/7a768dc73311447caa07dfaa20b147b7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7a768dc73311447caa07dfaa20b147b7.jpg" alt="web前端学习1-45集_第61张图片" width="266" height="287" style="border:1px solid black;"></a></p> <h2>3.fond-style:字体样式</h2> <p>模式：正常（normal）斜体（italic）<br> 写法：单词(normal、italic)<br> 注：oblique也是斜体，用的比较少</p> <p>区别：带有属性倾斜字体才能.没有倾斜属性字体也能<br> 可以设置倾斜操作</p> <h2>4.color：字体颜色</h2> <p><img src="http://img.e-com-net.com/image/info8/5a39831e72604630a98a23970009833a.jpg" alt="在这里插入图片描述" width="423" height="30"></p> <h2>练习</h2> <p>通过文字修饰完成个人简历<br> <a href="http://img.e-com-net.com/image/info8/9b2807c70d724c2c96655ef7935e122e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9b2807c70d724c2c96655ef7935e122e.jpg" alt="web前端学习1-45集_第62张图片" width="650" height="433" style="border:1px solid black;"></a></p> <h1><mark>第38集</mark> css段落样式</h1> <h2>1,text-decoration:文本装饰</h2> <p>下划线：underline<br> 删除线：line-through<br> 上划线：overline<br> 不添加任何装饰：none</p> <p>注：可以添加多个文本修饰：</p> <h2>2.text-transform:文本大小写（针对英文段落）</h2> <p>em单位：相对单位，1em永远都是跟字体大小相同<br> <img src="http://img.e-com-net.com/image/info8/b84445d8ba4d4ece94e8fc07e40829f7.jpg" alt="在这里插入图片描述" width="650" height="29"></p> <p>（则2em代表36px）</p> <h2>4.text-align:文本对齐方式</h2> <dl> 对齐方式 <dd> left <br> right <br> center <br> justify(两端点对齐) </dd> </dl> <h1><mark>第40集</mark> 续</h1> <h2>5.line-height:定义行高</h2> <p><a href="http://img.e-com-net.com/image/info8/3f962a721a234110b90582e5f286c3c6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3f962a721a234110b90582e5f286c3c6.jpg" alt="web前端学习1-45集_第63张图片" width="650" height="198" style="border:1px solid black;"></a></p> <ul> <li>什么是行高：一行文字的高度，上边距和下边距是等价关系</li> <li>默认行高并不是固定值，是变化的，根据当前字体大小变化。<br> <code>p{ line-heigth: 40px;}</code></li> <li>取值：1.number(px) scale(比例值，跟文字大小成比例)<br> <img src="http://img.e-com-net.com/image/info8/5d24e8420e42484b91131248153f4d68.jpg" alt="-" width="338" height="26"></li> </ul> <h1><mark>第41集</mark>续</h1> <h2>6.letter-spacing：定义字间距</h2> <p><img src="http://img.e-com-net.com/image/info8/67b47188d51e4821aedbb2b60f75d7ea.jpg" alt="在这里插入图片描述" width="393" height="29"></p> <h2>7.word-spacing:定义词间距（针对英文）</h2> <p><img src="http://img.e-com-net.com/image/info8/807f030417714f6a879a112776d881cd.jpg" alt="在这里插入图片描述" width="650" height="26"><br> 在中文中没有此效果</p> <h2>8.强制折行：（针对英文）</h2> <ol> <li>word-break:break-all;（非常强烈的折行）</li> <li>word-wrap：break-word；（不是那么强烈）（会产生一些折行问题）</li> </ol> <ul> <li>为了防止英文和数字溢出<br> <img src="http://img.e-com-net.com/image/info8/2fcb3046bb2845b1843f1263bb07ffdf.jpg" alt="在这里插入图片描述" width="650" height="26"></li> </ul> <h1><mark>第42集</mark>（综合针对练习）（重要）</h1> <h1><mark>第43集</mark> css复合样式</h1> <p>一个css属性只控制一种样式，叫做单一样式。<br> 一个css属性控制多种样式，叫做复合样式。</p> <dl> 复合样式（复合的写法是通过空格实现的）（复合写法有的不需要关心顺序，例如1.2.有的需要关心样式，例如3.） <dd> 1.background:red url() repeat 0 0{背景颜色，背景图片，平铺方式，位置。。。} <br> <a href="http://img.e-com-net.com/image/info8/d001046bacce4a1389f23fb01a5cf4de.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d001046bacce4a1389f23fb01a5cf4de.jpg" alt="在这里插入图片描述" width="650" height="82"></a> <br> 可以节省很多代码量 </dd> </dl> <p>2.border：1px red solid（边框的大小、颜色、样式）<br> 3.font：weigth style size family（注：最少要有两个值 size family{字体大小、类型}）<a href="http://img.e-com-net.com/image/info8/413e7fb56faf4b3a95e1a62b3da55672.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/413e7fb56faf4b3a95e1a62b3da55672.jpg" alt="在这里插入图片描述" width="650" height="60"></a></p> <p><a href="http://img.e-com-net.com/image/info8/a31230142e3d45898462b6d70f0c3e6c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a31230142e3d45898462b6d70f0c3e6c.jpg" alt="web前端学习1-45集_第64张图片" width="650" height="117" style="border:1px solid black;"></a><br> font中不可以掉换位置</p> <ul> <li>单一样式复合样式尽量不要混写</li> <li>如果非要混写，那么一定要先写复合样式在写单一样式,这样样式才不会被覆盖掉。</li> </ul> <dl> （复合写法） <dd> <img src="http://img.e-com-net.com/image/info8/d17a86ce349a41808e1d5d9aaf6c3240.jpg" alt="在这里插入图片描述" width="650" height="16"> </dd> </dl> <h1><mark>第44集</mark> css选择器</h1> <h2>1.ID选择器</h2> <ul> <li>css：#elem{}</li> <li>html:id=“elem”</li> <li></li> </ul> <p><a href="http://img.e-com-net.com/image/info8/a969497381874ebc8951dc666591ff04.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a969497381874ebc8951dc666591ff04.jpg" alt="web前端学习1-45集_第65张图片" width="650" height="167" style="border:1px solid black;"></a><br> <img src="http://img.e-com-net.com/image/info8/5e945a5c03fc482e9047afb68df13e22.jpg" alt="在这里插入图片描述" width="650" height="30"><br> 一旦写了id，上面就要用#组成cp<br> 注<br> : 1.在一个页面中，ID值是唯一的（在一个页面中，只能出现一次，否则不符合规范）<br> 2.命名规范，由字母_-数字组成（命名的第一位不能是数字）<br> <a href="http://img.e-com-net.com/image/info8/5fd020a2b8cf4f35ad6c6711c98672cc.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5fd020a2b8cf4f35ad6c6711c98672cc.jpg" alt="web前端学习1-45集_第66张图片" width="650" height="157" style="border:1px solid black;"></a></p> <ol start="3"> <li>命名方式，驼峰式、下划线式、短线式</li> </ol> <ul> <li>快捷创建：div#xiaoming1+Tab键<br> <a href="http://img.e-com-net.com/image/info8/ea880ade939745e6b4f590dcac7f8970.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ea880ade939745e6b4f590dcac7f8970.jpg" alt="在这里插入图片描述" width="650" height="58"></a></li> </ul> <h1><mark>第45集</mark> 续</h1> <h2>2.CLASS选择器</h2> <ul> <li>css：.elem{}</li> <li>html : class = “elem”</li> </ul> <p><a href="http://img.e-com-net.com/image/info8/fd23b0f68cd6454ea207a3c8f7ffdea9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fd23b0f68cd6454ea207a3c8f7ffdea9.jpg" alt="web前端学习1-45集_第67张图片" width="650" height="238" style="border:1px solid black;"></a><br> <img src="http://img.e-com-net.com/image/info8/24045fbda4304eb3b1bc71060200ae9e.jpg" alt="在这里插入图片描述" width="650" height="22"></p> <dl> 注 <dd> 1.class选择器是可以复用的（和id选择器的区别） <br> <a href="http://img.e-com-net.com/image/info8/9890dfe9f9f24f7db21a5cf4be2e2ad2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9890dfe9f9f24f7db21a5cf4be2e2ad2.jpg" alt="web前端学习1-45集_第68张图片" width="650" height="217" style="border:1px solid black;"></a> <br> <a href="http://img.e-com-net.com/image/info8/682d1f52cc9c47d18e156ea76ce89964.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/682d1f52cc9c47d18e156ea76ce89964.jpg" alt="在这里插入图片描述" width="650" height="44"></a> </dd> </dl> <p>2.可以添加多个class样式<br> <a href="http://img.e-com-net.com/image/info8/4e657b46e7384634b08b25b68750d0c8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4e657b46e7384634b08b25b68750d0c8.jpg" alt="web前端学习1-45集_第69张图片" width="650" height="310" style="border:1px solid black;"></a><br> <img src="http://img.e-com-net.com/image/info8/f90d5dd1742a444bab55e56c6a25ac63.jpg" alt="在这里插入图片描述" width="650" height="22"></p> <p>3.多个样式的时候，样式的优先级根据css决定，而不是class属性中的顺序</p> <p>4.标签+类的写法<br> <a href="http://img.e-com-net.com/image/info8/d07492718328404a9476a4874e7d229e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d07492718328404a9476a4874e7d229e.jpg" alt="web前端学习1-45集_第70张图片" width="650" height="387" style="border:1px solid black;"></a><br> 这就会对标签进行选择</p> <h2>小技巧（检查样式是否生效）</h2> <p>打开Chrome控制台，style选项，勾勾</p> <ul> <li>错误也会报错</li> </ul> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1611508397411172352"></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">你可能感兴趣的:(学习,前端)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1943993659967991808.htm" title="系统学习Python——并发模型和异步编程：进程、线程和GIL" target="_blank">系统学习Python——并发模型和异步编程：进程、线程和GIL</a> <span class="text-muted"></span> <div>分类目录：《系统学习Python》总目录在文章《并发模型和异步编程：基础知识》我们简单介绍了Python中的进程、线程和协程。本文就着重介绍Python中的进程、线程和GIL的关系。Python解释器的每个实例都是一个进程。使用multiprocessing或concurrent.futures库可以启动额外的Python进程。Python的subprocess库用于启动运行外部程序（不管使用何种</div> </li> <li><a href="/article/1943991261279088640.htm" title="C++ 11 Lambda表达式和min_element()与max_element()的使用_c++ lamda函数 min_element((1)" target="_blank">C++ 11 Lambda表达式和min_element()与max_element()的使用_c++ lamda函数 min_element((1)</a> <span class="text-muted">2401_84976182</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上CC++开发知识点，真正体系化！由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新如果你需要这些资料，可以戳这里获取#include#include#includeusingnamespacestd;boolcmp(int</div> </li> <li><a href="/article/1943991262029869056.htm" title="C++ 11 Lambda表达式和min_element()与max_element()的使用_c++ lamda函数 min_element(" target="_blank">C++ 11 Lambda表达式和min_element()与max_element()的使用_c++ lamda函数 min_element(</a> <span class="text-muted"></span> <div>网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加戳这里获取一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！intmain(){vectormyvec{3,</div> </li> <li><a href="/article/1943990125864218624.htm" title="JavaScript 树形菜单总结" target="_blank">JavaScript 树形菜单总结</a> <span class="text-muted">Auscy</span> <a class="tag" taget="_blank" href="/search/microsoft/1.htm">microsoft</a> <div>树形菜单是前端开发中常见的交互组件，用于展示具有层级关系的数据（如文件目录、分类列表、组织架构等）。以下从核心概念、实现方式、常见功能及优化方向等方面进行总结。一、核心概念层级结构：数据以父子嵌套形式存在，如{id:1,children:[{id:2}]}。节点：树形结构的基本单元，包含自身信息及子节点（若有）。展开/折叠：子节点的显示与隐藏切换，是树形菜单的核心交互。递归渲染：因数据层级不固定，</div> </li> <li><a href="/article/1943989244456398848.htm" title="冒泡、选择、插入排序：三大基础排序算法深度解析（C语言实现）" target="_blank">冒泡、选择、插入排序：三大基础排序算法深度解析（C语言实现）</a> <span class="text-muted">xienda</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95/1.htm">排序算法</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>在算法学习道路上，排序算法是每位程序员必须掌握的基石。本文将深入解析冒泡排序、选择排序和插入排序这三种基础排序算法，通过C语言代码实现和对比分析，帮助读者彻底理解它们的差异与应用场景。算法原理与代码实现1.冒泡排序（BubbleSort）工作原理：通过重复比较相邻元素，将较大元素逐步"冒泡"到数组末尾。voidbubbleSort(intarr[],intn){ for(inti=0;iarr[</div> </li> <li><a href="/article/1943987856808669184.htm" title="前端项目架构设计要领" target="_blank">前端项目架构设计要领</a> <span class="text-muted"></span> <div>1.架构设计的核心目标在设计前端项目架构时，核心目标是模块化、可维护、可扩展、可测试，以及开发效率的最大化。这些目标可以通过以下几个方面来实现：组件化：将UI功能封装为可复用的组件。模块化：将业务逻辑分解为独立的模块或服务。自动化构建与部署：实现自动化构建、测试和部署流程，减少人为操作的错误。代码规范化与检查：确保团队协作时，代码风格和质量一致。2.项目目录结构设计一个清晰合理的目录结构对大型项目</div> </li> <li><a href="/article/1943987101301272576.htm" title="精通Canvas：15款时钟特效代码实现指南" target="_blank">精通Canvas：15款时钟特效代码实现指南</a> <span class="text-muted">烟幕缭绕</span> <div>本文还有配套的精品资源，点击获取简介：HTML5的Canvas是一个用于绘制矢量图形的API，通过JavaScript实现动态效果。本项目集合了15种不同的时钟特效代码，帮助开发者通过学习绘制圆形、线条、时间更新、旋转、颜色样式设置及动画效果等概念，深化对Canvas的理解和应用。项目中的CSS文件负责时钟的样式设定，而JS文件则包含实现各种特效的逻辑，通过不同的函数或类处理时间更新和动画绘制，提</div> </li> <li><a href="/article/1943986975048527872.htm" title="高效批量单词翻译工具的设计与应用" target="_blank">高效批量单词翻译工具的设计与应用</a> <span class="text-muted"></span> <div>本文还有配套的精品资源，点击获取简介：在信息技术飞速发展的今天，批量单词翻译工具通过计算机的数据处理能力，大大提高了语言学习和文字处理的效率。用户通过简单输入单词列表到一个文本文件，并运行翻译程序，即可获得翻译结果并保存至指定文件。该工具集成了内置或外部翻译引擎，利用自然语言处理技术实现快速准确的翻译，并可能提供词性识别等附加功能。尽管机器翻译无法完全取代人工校对，但它为用户提供了一种高效的翻译解</div> </li> <li><a href="/article/1943985460749594624.htm" title="FPGA小白到项目实战：Verilog+Vivado全流程通关指南（附光学类岗位技能映射）" target="_blank">FPGA小白到项目实战：Verilog+Vivado全流程通关指南（附光学类岗位技能映射）</a> <span class="text-muted">阿牛的药铺</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95%E7%A7%BB%E6%A4%8D%E9%83%A8%E7%BD%B2/1.htm">算法移植部署</a><a class="tag" taget="_blank" href="/search/fpga%E5%BC%80%E5%8F%91/1.htm">fpga开发</a><a class="tag" taget="_blank" href="/search/verilog/1.htm">verilog</a> <div>FPGA小白到项目实战：Verilog+Vivado全流程通关指南（附光学类岗位技能映射）引言：为什么这个FPGA入门路线能帮你快速上岗？本文设计了一条**"Verilog语法→工具链操作→光学项目实战→岗位技能对标"的阶梯式学习路径。不同于泛泛而谈的FPGA教程，我们聚焦光学类产品开发**核心能力（时序接口设计、图像处理算法移植、高速接口应用），通过3个递进式项目（从LED闪烁到图像边缘检测），</div> </li> <li><a href="/article/1943985461282271232.htm" title="PyTorch & TensorFlow速成复习：从基础语法到模型部署实战（附FPGA移植衔接）" target="_blank">PyTorch & TensorFlow速成复习：从基础语法到模型部署实战（附FPGA移植衔接）</a> <span class="text-muted">阿牛的药铺</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95%E7%A7%BB%E6%A4%8D%E9%83%A8%E7%BD%B2/1.htm">算法移植部署</a><a class="tag" taget="_blank" href="/search/pytorch/1.htm">pytorch</a><a class="tag" taget="_blank" href="/search/tensorflow/1.htm">tensorflow</a><a class="tag" taget="_blank" href="/search/fpga%E5%BC%80%E5%8F%91/1.htm">fpga开发</a> <div>PyTorch&TensorFlow速成复习：从基础语法到模型部署实战（附FPGA移植衔接）引言：为什么算法移植工程师必须掌握框架基础？针对光学类产品算法FPGA移植岗位需求（如可见光/红外图像处理），深度学习框架是算法落地的"桥梁"——既要用PyTorch/TensorFlow验证算法可行性，又要将训练好的模型（如CNN、目标检测）转换为FPGA可部署的格式（ONNX、TFLite）。本文采用"</div> </li> <li><a href="/article/1943983696184930304.htm" title="基于链家网的二手房数据采集清洗与可视化分析" target="_blank">基于链家网的二手房数据采集清洗与可视化分析</a> <span class="text-muted">Mint_Datazzh</span> <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/1943983064304644096.htm" title="算法学习笔记：17.蒙特卡洛算法 ——从原理到实战，涵盖 LeetCode 与考研 408 例题" target="_blank">算法学习笔记：17.蒙特卡洛算法 ——从原理到实战，涵盖 LeetCode 与考研 408 例题</a> <span class="text-muted"></span> <div>在计算机科学和数学领域，蒙特卡洛算法（MonteCarloAlgorithm）以其独特的随机抽样思想，成为解决复杂问题的有力工具。从圆周率的计算到金融风险评估，从物理模拟到人工智能，蒙特卡洛算法都发挥着不可替代的作用。本文将深入剖析蒙特卡洛算法的思想、解题思路，结合实际应用场景与Java代码实现，并融入考研408的相关考点，穿插图片辅助理解，帮助你全面掌握这一重要算法。蒙特卡洛算法的基本概念蒙特卡</div> </li> <li><a href="/article/1943983064719880192.htm" title="分布式学习笔记_04_复制模型" target="_blank">分布式学习笔记_04_复制模型</a> <span class="text-muted">NzuCRAS</span> <a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/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/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>常见复制模型使用复制的目的在分布式系统中，数据通常需要被分布在多台机器上，主要为了达到：拓展性：数据量因读写负载巨大，一台机器无法承载，数据分散在多台机器上仍然可以有效地进行负载均衡，达到灵活的横向拓展高容错&高可用：在分布式系统中单机故障是常态，在单机故障的情况下希望整体系统仍然能够正常工作，这时候就需要数据在多台机器上做冗余，在遇到单机故障时能够让其他机器接管统一的用户体验：如果系统客户端分布</div> </li> <li><a href="/article/1943983063352537088.htm" title="算法学习笔记：15.二分查找 ——从原理到实战，涵盖 LeetCode 与考研 408 例题" target="_blank">算法学习笔记：15.二分查找 ——从原理到实战，涵盖 LeetCode 与考研 408 例题</a> <span class="text-muted">呆呆企鹅仔</span> <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/1943979785097113600.htm" title="【前端】jQuery数组合并去重方法总结" target="_blank">【前端】jQuery数组合并去重方法总结</a> <span class="text-muted"></span> <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> <span class="text-muted">老马聊技术</span> <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> <span class="text-muted">前端视界</span> <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/1943968187112550400.htm" title="OpenWebUI(12)源码学习-后端constants.py常量定义文件" target="_blank">OpenWebUI(12)源码学习-后端constants.py常量定义文件</a> <span class="text-muted">青苔猿猿</span> <a class="tag" taget="_blank" href="/search/AI%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">AI大模型</a><a class="tag" taget="_blank" href="/search/openwebui/1.htm">openwebui</a><a class="tag" taget="_blank" href="/search/constants%E5%B8%B8%E9%87%8F%E5%AE%9A%E4%B9%89/1.htm">constants常量定义</a> <div>目录文件名：`constants.py`功能概述：主要功能点详解1.**MESSAGES枚举类**2.**WEBHOOK_MESSAGES枚举类**3.**ERROR_MESSAGES枚举类**✅默认错误模板✅认证与用户相关错误✅资源冲突与重复错误✅验证失败类错误✅权限限制类错误✅文件上传与格式错误✅模型与API错误✅请求频率与安全限制✅数据库与配置错误4.**TASKS枚举类**✅总结实际应用场</div> </li> <li><a href="/article/1943964406694080512.htm" title="RocketMQ 基础教程-应用篇-死信队列" target="_blank">RocketMQ 基础教程-应用篇-死信队列</a> <span class="text-muted">码炫课堂-码哥</span> <a class="tag" taget="_blank" href="/search/rocketmq%E4%B8%93%E9%A2%98/1.htm">rocketmq专题</a><a class="tag" taget="_blank" href="/search/rocketmq/1.htm">rocketmq</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>作者简介：大家好，我是smart哥，前中兴通讯、美团架构师，现某互联网公司CTO联系qq：184480602，加我进群，大家一起学习，一起进步，一起对抗互联网寒冬学习必须往深处挖，挖的越深，基础越扎实！阶段1、深入多线程阶段2、深入多线程设计模式阶段3、深入juc源码解析阶段4、深入jdk其余源码解析</div> </li> <li><a href="/article/1943961125532004352.htm" title="数字孪生技术为UI前端注入新活力：实现产品设计的沉浸式体验" target="_blank">数字孪生技术为UI前端注入新活力：实现产品设计的沉浸式体验</a> <span class="text-muted">ui设计前端开发老司机</span> <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> <span class="text-muted">可曾去过倒悬山</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>Java三年经验程序员技术栈全景指南：从前端到架构，对标阿里美团全栈要求三年经验是Java程序员的分水岭，技术栈深度决定你成为“业务码农”还是“架构师候选人”。本文整合阿里、美团、滴滴等大厂招聘要求，为你绘制可落地的进阶路线。一、Java核心：从语法糖到JVM底层三年经验与初级的核心差异在于系统级理解，大厂面试常考以下能力：JVM与性能调优内存模型（堆外内存、元空间）、GC算法（G1/ZGC适用场</div> </li> <li><a href="/article/1943956589136375808.htm" title="OKHttp3源码分析——学习笔记" target="_blank">OKHttp3源码分析——学习笔记</a> <span class="text-muted">Sincerity_</span> <a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81%E7%9B%B8%E5%85%B3/1.htm">源码相关</a><a class="tag" taget="_blank" href="/search/Okhttp/1.htm">Okhttp</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/1.htm">源码解析</a><a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/1.htm">读书笔记</a><a class="tag" taget="_blank" href="/search/httpclient/1.htm">httpclient</a><a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a> <div>文章目录1.HttpClient与HttpUrlConnection的区别2.OKHttp源码分析使用步骤:dispatcher任务调度器,（后面有详细说明）Request请求RealCallAsyncCall3.OKHttp架构分析1.异步请求线程池,Dispather2.连接池清理线程池-ConnectionPool3.缓存整理线程池DisLruCache4.Http2异步事务线程池,http</div> </li> <li><a href="/article/1943950163496202240.htm" title="JavaScript 基础09：Web APIs——日期对象、DOM节点" target="_blank">JavaScript 基础09：Web APIs——日期对象、DOM节点</a> <span class="text-muted">梦想当全栈</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</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><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>JavaScript基础09：WebAPIs——日期对象、DOM节点进一步学习DOM相关知识，实现可交互的网页特效能够插入、删除和替换元素节点。能够依据元素节点关系查找节点。一、日期对象掌握Date日期对象的使用，动态获取当前计算机的时间。ECMAScript中内置了获取系统时间的对象Date，使用Date时与之前学习的内置对象console和Math不同，它需要借助new关键字才能使用。1.实例</div> </li> <li><a href="/article/1943949027624153088.htm" title="【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（Advanced RAG[1]）基于历史对话重新生成Query？" target="_blank">【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（Advanced RAG[1]）基于历史对话重新生成Query？</a> <span class="text-muted">985小水博一枚呀</span> <a class="tag" taget="_blank" href="/search/AI%E5%A4%A7%E6%A8%A1%E5%9E%8B%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/1.htm">AI大模型学习路线</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/langchain/1.htm">langchain</a><a class="tag" taget="_blank" href="/search/RAG/1.htm">RAG</a> <div>【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（AdvancedRAG[1]）基于历史对话重新生成Query？【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（AdvancedRAG[1]）基于历史对话重新生成Query？文章目录【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（AdvancedRAG[1]）基于历史对话重新生成Q</div> </li> <li><a href="/article/1943949028291047424.htm" title="【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（Advanced RAG[1]）其他Query优化相关策略？" target="_blank">【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（Advanced RAG[1]）其他Query优化相关策略？</a> <span class="text-muted">985小水博一枚呀</span> <a class="tag" taget="_blank" href="/search/AI%E5%A4%A7%E6%A8%A1%E5%9E%8B%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/1.htm">AI大模型学习路线</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/langchain/1.htm">langchain</a> <div>【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（AdvancedRAG[1]）其他Query优化相关策略？【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（AdvancedRAG[1]）其他Query优化相关策略？文章目录【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（AdvancedRAG[1]）其他Query优化相关策略？一</div> </li> <li><a href="/article/1943946255763828736.htm" title="《Java前端开发全栈指南：从Servlet到现代框架实战》" target="_blank">《Java前端开发全栈指南：从Servlet到现代框架实战》</a> <span class="text-muted"></span> <div>前言在当今Web开发领域，Java依然是后端开发的主力语言，而随着前后端分离架构的普及，Java开发者也需要掌握前端技术栈。本文将全面介绍JavaWeb前端开发的核心技术，包括传统Servlet/JSP体系、现代前端框架集成方案，以及全栈开发的最佳实践。通过本文，您将了解如何构建现代化的JavaWeb应用前端界面。一、JavaWeb前端技术演进1.1传统技术栈Servlet：JavaWeb基础，处</div> </li> <li><a href="/article/1943941591924273152.htm" title="传奇修改map地图教程_传奇技能第三祭：NPC的增加、隐藏和脚本修改" target="_blank">传奇修改map地图教程_传奇技能第三祭：NPC的增加、隐藏和脚本修改</a> <span class="text-muted">垃圾箱博物馆</span> <a class="tag" taget="_blank" href="/search/%E4%BC%A0%E5%A5%87%E4%BF%AE%E6%94%B9map%E5%9C%B0%E5%9B%BE%E6%95%99%E7%A8%8B/1.htm">传奇修改map地图教程</a> <div>技能献祭，Get新技能：传奇技能——NPC功能与实现跟航家学技能，用干货带你飞，现学现用，底部有配套学习资源本篇内容简介：通过对游戏内NPC的控制，可以让NPC出现在地图中的任意位置，还可以控制外观显示、自定义命名，新增与隐藏以及脚本功能的实现。一、NPC总控制文本所在路径：D:MirServerMir200EnvirEnvir目录下，找到NPC总控制文本：Merchant，游戏内的所有NPC都在</div> </li> <li><a href="/article/1943940204628865024.htm" title="LangChain中的向量数据库接口－Weaviate" target="_blank">LangChain中的向量数据库接口－Weaviate</a> <span class="text-muted">洪城叮当</span> <a class="tag" taget="_blank" href="/search/langchain/1.htm">langchain</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/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/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/%E4%BA%A4%E4%BA%92/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%9F%A5%E8%AF%86%E5%9B%BE%E8%B0%B1/1.htm">知识图谱</a> <div>文章目录前言一、原型定义二、代码解析1、add_texts方法1.1、应用样例2、from_texts方法2.1、应用样例3、similarity_search方法3.1、应用样例三、项目应用1、安装依赖2、引入依赖3、创建对象4、添加数据5、查询数据总结前言 Weaviate是一个开源的向量数据库，支持存储来自各类机器学习模型的数据对象和向量嵌入，并能无缝扩展至数十亿数据对象。它提供存储文档嵌</div> </li> <li><a href="/article/1943932395958890496.htm" title="深度学习模型表征提取全解析" target="_blank">深度学习模型表征提取全解析</a> <span class="text-muted">ZhangJiQun&MXP</span> <a class="tag" taget="_blank" href="/search/%E6%95%99%E5%AD%A6/1.htm">教学</a><a class="tag" taget="_blank" href="/search/2024%E5%A4%A7%E6%A8%A1%E5%9E%8B%E4%BB%A5%E5%8F%8A%E7%AE%97%E5%8A%9B/1.htm">2024大模型以及算力</a><a class="tag" taget="_blank" href="/search/2021/1.htm">2021</a><a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/embedding/1.htm">embedding</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">语言模型</a> <div>模型内部进行表征提取的方法在自然语言处理（NLP）中，“表征（Representation）”指将文本（词、短语、句子、文档等）转化为计算机可理解的数值形式（如向量、矩阵），核心目标是捕捉语言的语义、语法、上下文依赖等信息。自然语言表征技术可按“静态/动态”“有无上下文”“是否融入知识”等维度划分一、传统静态表征（无上下文，词级为主）这类方法为每个词分配固定向量，不考虑其在具体语境中的含义（无法解</div> </li> <li><a href="/article/1943932016164663296.htm" title="Vue3组件库实战: 打造高复用UI系统" target="_blank">Vue3组件库实战: 打造高复用UI系统</a> <span class="text-muted">武昌库里写JAVA</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/%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/89.htm" title="java责任链模式" target="_blank">java责任链模式</a> <span class="text-muted">3213213333332132</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%B4%A3%E4%BB%BB%E9%93%BE%E6%A8%A1%E5%BC%8F/1.htm">责任链模式</a><a class="tag" taget="_blank" href="/search/%E6%9D%91%E6%B0%91%E5%91%8A%E5%8E%BF%E9%95%BF/1.htm">村民告县长</a> <div>责任链模式，通常就是一个请求从最低级开始往上层层的请求，当在某一层满足条件时，请求将被处理，当请求到最高层仍未满足时，则请求不会被处理。就是一个请求在这个链条的责任范围内，会被相应的处理，如果超出链条的责任范围外，请求不会被相应的处理。下面代码模拟这样的效果：创建一个政府抽象类,方便所有的具体政府部门继承它。 package 责任链模式; /** * </div> </li> <li><a href="/article/216.htm" title="linux、mysql、nginx、tomcat 性能参数优化" target="_blank">linux、mysql、nginx、tomcat 性能参数优化</a> <span class="text-muted">ronin47</span> <div>一、linux 系统内核参数 /etc/sysctl.conf文件常用参数 net.core.netdev_max_backlog = 32768 #允许送到队列的数据包的最大数目 net.core.rmem_max = 8388608 #SOCKET读缓存区大小 net.core.wmem_max = 8388608 #SOCKET写缓存区大</div> </li> <li><a href="/article/343.htm" title="php命令行界面" target="_blank">php命令行界面</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/cli/1.htm">cli</a> <div>常用选项 php -v php -i PHP安装的有关信息 php -h 访问帮助文件 php -m 列出编译到当前PHP安装的所有模块执行一段代码 php -r 'echo "hello, world!";' php -r 'echo "Hello, World!\n";' php -r '$ts = filemtime("</div> </li> <li><a href="/article/470.htm" title="Filter&Session" target="_blank">Filter&Session</a> <span class="text-muted">171815164</span> <a class="tag" taget="_blank" href="/search/session/1.htm">session</a> <div>Filter HttpServletRequest requ = (HttpServletRequest) req; HttpSession session = requ.getSession(); if (session.getAttribute("admin") == null) { PrintWriter out = res.ge</div> </li> <li><a href="/article/597.htm" title="连接池与Spring,Hibernate结合" target="_blank">连接池与Spring,Hibernate结合</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div> 前几篇关于Java连接池的介绍都是基于Java应用的，而我们常用的场景是与Spring和ORM框架结合，下面就利用实例学习一下这方面的配置。 1.下载相关内容： &nb</div> </li> <li><a href="/article/724.htm" title="[简单]mybatis判断数字类型" target="_blank">[简单]mybatis判断数字类型</a> <span class="text-muted">53873039oycg</span> <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a> <div> 昨天同事反馈mybatis保存不了int类型的属性,一直报错，错误信息如下: Caused by: java.lang.NumberFormatException: For input string: "null" at sun.mis</div> </li> <li><a href="/article/851.htm" title="项目启动时或者启动后ava.lang.OutOfMemoryError: PermGen space" target="_blank">项目启动时或者启动后ava.lang.OutOfMemoryError: PermGen space</a> <span class="text-muted">程序员是怎么炼成的</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/catalina.sh/1.htm">catalina.sh</a><a class="tag" taget="_blank" href="/search/eclipse.ini/1.htm">eclipse.ini</a> <div> 在启动比较大的项目时，因为存在大量的jsp页面，所以在编译的时候会生成很多的.class文件，.class文件是都会被加载到jvm的方法区中，如果要加载的class文件很多，就会出现方法区溢出异常 java.lang.OutOfMemoryError: PermGen space. 解决办法是点击eclipse里的tomcat，在</div> </li> <li><a href="/article/978.htm" title="我的crm小结" target="_blank">我的crm小结</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/crm/1.htm">crm</a> <div>各种原因吧，crm今天才完了。主要是接触了几个新技术： Struts2、poi、ibatis这几个都是以前的项目中用过的。 Jsf、tapestry是这次新接触的，都是界面层的框架，用起来也不难。思路和struts不太一样，传说比较简单方便。不过个人感觉还是struts用着顺手啊，当然springmvc也很顺手，不知道是因为习惯还是什么。jsf和tapestry应用的时候需要知道他们的标签、主</div> </li> <li><a href="/article/1105.htm" title="spring里配置使用hibernate的二级缓存几步" target="_blank">spring里配置使用hibernate的二级缓存几步</a> <span class="text-muted">antonyup_2006</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a> <div>．在spring的配置文件中 applicationContent.xml，hibernate部分加入 xml 代码 <prop key="hibernate.cache.provider_class">org.hibernate.cache.EhCacheProvider</prop> <prop key="hi</div> </li> <li><a href="/article/1232.htm" title="JAVA基础面试题" target="_blank">JAVA基础面试题</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E6%8A%BD%E8%B1%A1%E5%AE%9E%E7%8E%B0%E6%8E%A5%E5%8F%A3/1.htm">抽象实现接口</a><a class="tag" taget="_blank" href="/search/String%E7%B1%BB/1.htm">String类</a><a class="tag" taget="_blank" href="/search/%E6%8E%A5%E5%8F%A3%E7%BB%A7%E6%89%BF/1.htm">接口继承</a><a class="tag" taget="_blank" href="/search/%E6%8A%BD%E8%B1%A1%E7%B1%BB%E7%BB%A7%E6%89%BF%E5%AE%9E%E4%BD%93%E7%B1%BB/1.htm">抽象类继承实体类</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%AE%9A%E4%B9%89%E5%BC%82%E5%B8%B8/1.htm">自定义异常</a> <div>/* * 栈（stack）：主要保存基本类型（或者叫内置类型）（char、byte、short、 *int、long、 float、double、boolean）和对象的引用，数据可以共享，速度仅次于 * 寄存器（register），快于堆。堆（heap）：用于存储对象。 */ &</div> </li> <li><a href="/article/1359.htm" title="让sqlmap文件 "继承" 起来" target="_blank">让sqlmap文件 "继承" 起来</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/ibatis/1.htm">ibatis</a><a class="tag" taget="_blank" href="/search/sqlmap/1.htm">sqlmap</a> <div> 多个项目中使用ibatis , 和数据库表对应的 sqlmap文件（增删改查等基本语句)，dao, pojo 都是由工具自动生成的, 现在将这些自动生成的文件放在一个单独的工程中，其它项目工程中通过jar包来引用，并通过"继承"为基础的sqlmap文件，dao,pojo 添加新的方法来满足项</div> </li> <li><a href="/article/1486.htm" title="精通Oracle10编程SQL(13)开发触发器" target="_blank">精通Oracle10编程SQL(13)开发触发器</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a> <div>/* *开发触发器 */ --得到日期是周几 select to_char(sysdate+4,'DY','nls_date_language=AMERICAN') from dual; select to_char(sysdate,'DY','nls_date_language=AMERICAN') from dual; --建立BEFORE语句触发器 CREATE O</div> </li> <li><a href="/article/1613.htm" title="【EhCache三】EhCache查询" target="_blank">【EhCache三】EhCache查询</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/ehcache/1.htm">ehcache</a> <div>本文介绍EhCache查询缓存中数据，EhCache提供了类似Hibernate的查询API，可以按照给定的条件进行查询。要对EhCache进行查询，需要在ehcache.xml中设定要查询的属性数据准备 @Before public void setUp() { //加载EhCache配置文件 Inpu</div> </li> <li><a href="/article/1740.htm" title="CXF框架入门实例" target="_blank">CXF框架入门实例</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/webservice/1.htm">webservice</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a> <div>CXF是apache旗下的开源框架，由Celtix + XFire这两门经典的框架合成，是一套非常流行的web service框架。它提供了JAX-WS的全面支持，并且可以根据实际项目的需要，采用代码优先（Code First）或者 WSDL 优先（WSDL First）来轻松地实现 Web Services 的发布和使用，同时它能与spring进行完美结合。在apache cxf官网提供</div> </li> <li><a href="/article/1867.htm" title="angular.equals" target="_blank">angular.equals</a> <span class="text-muted">boyitech</span> <a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/AngularJS+API/1.htm">AngularJS API</a><a class="tag" taget="_blank" href="/search/AnguarJS+%E4%B8%AD%E6%96%87API/1.htm">AnguarJS 中文API</a><a class="tag" taget="_blank" href="/search/angular.equals/1.htm">angular.equals</a> <div>angular.equals 描述: 比较两个值或者两个对象是不是相等。还支持值的类型，正则表达式和数组的比较。两个值或对象被认为是相等的前提条件是以下的情况至少能满足一项：两个值或者对象能通过=== （恒等）的比较两个值或者对象是同样类型，并且他们的属性都能通过angular</div> </li> <li><a href="/article/1994.htm" title="java-腾讯暑期实习生-输入一个数组A[1,2,...n]，求输入B，使得数组B中的第i个数字B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]" target="_blank">java-腾讯暑期实习生-输入一个数组A[1,2,...n]，求输入B，使得数组B中的第i个数字B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>这道题的具体思路请参看何海涛的微博：http://weibo.com/zhedahht import java.math.BigInteger; import java.util.Arrays; public class CreateBFromATencent { /** * 题目：输入一个数组A[1,2,...n]，求输入B，使得数组B中的第i个数字B[i]=A</div> </li> <li><a href="/article/2121.htm" title="FastDFS 的安装和配置修订版" target="_blank">FastDFS 的安装和配置修订版</a> <span class="text-muted">Chen.H</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/fastDFS/1.htm">fastDFS</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F/1.htm">分布式文件系统</a> <div>FastDFS Home:http://code.google.com/p/fastdfs/ 1. 安装 http://code.google.com/p/fastdfs/wiki/Setup http://hi.baidu.com/leolance/blog/item/3c273327978ae55f93580703.html 安装libevent (对libevent的版本要求为1.4.</div> </li> <li><a href="/article/2248.htm" title="[强人工智能]拓扑扫描与自适应构造器" target="_blank">[强人工智能]拓扑扫描与自适应构造器</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div> 当我们面对一个有限拓扑网络的时候,在对已知的拓扑结构进行分析之后,发现在连通点之后,还存在若干个子网络,且这些网络的结构是未知的,数据库中并未存在这些网络的拓扑结构数据....这个时候,我们该怎么办呢? 那么,现在我们必须设计新的模块和代码包来处理上面的问题</div> </li> <li><a href="/article/2375.htm" title="oracle merge into的用法" target="_blank">oracle merge into的用法</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/merget+into/1.htm">merget into</a> <div>Oracle中merge into的使用 http://blog.csdn.net/yuzhic/article/details/1896878 http://blog.csdn.net/macle2010/article/details/5980965 该命令使用一条语句从一个或者多个数据源中完成对表的更新和插入数据. ORACLE 9i 中，使用此命令必须同时指定UPDATE 和INSE</div> </li> <li><a href="/article/2502.htm" title="不适合使用Hadoop的场景" target="_blank">不适合使用Hadoop的场景</a> <span class="text-muted">datamachine</span> <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a> <div>转自：http://dev.yesky.com/296/35381296.shtml。　　Hadoop通常被认定是能够帮助你解决所有问题的唯一方案。当人们提到“大数据”或是“数据分析”等相关问题的时候，会听到脱口而出的回答：Hadoop! 实际上Hadoop被设计和建造出来，是用来解决一系列特定问题的。对某些问题来说，Hadoop至多算是一个不好的选择，对另一些问题来说，选择Ha</div> </li> <li><a href="/article/2629.htm" title="YII findAll的用法" target="_blank">YII findAll的用法</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a> <div>看文档比较糊涂，其实挺简单的： $predictions=Prediction::model()->findAll("uid=:uid",array(":uid"=>10)); 第一个参数是选择条件：”uid=10″。其中:uid是一个占位符，在后面的array(“:uid”=>10)对齐进行了赋值；更完善的查询需要</div> </li> <li><a href="/article/2756.htm" title="vim 常用 NERDTree 快捷键" target="_blank">vim 常用 NERDTree 快捷键</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>下面给大家整理了一些vim NERDTree的常用快捷键了，这里几乎包括了所有的快捷键了，希望文章对各位会带来帮助。切换工作台和目录 ctrl + w + h 光标 focus 左侧树形目录ctrl + w + l 光标 focus 右侧文件显示窗口ctrl + w + w 光标自动在左右侧窗口切换ctrl + w + r 移动当前窗口的布局位置 o 在已有窗口中打开文件、目录或书签，并跳</div> </li> <li><a href="/article/2883.htm" title="Java把目录下的文件打印出来" target="_blank">Java把目录下的文件打印出来</a> <span class="text-muted">蕃薯耀</span> <a class="tag" taget="_blank" href="/search/%E5%88%97%E5%87%BA%E7%9B%AE%E5%BD%95%E4%B8%8B%E7%9A%84%E6%96%87%E4%BB%B6/1.htm">列出目录下的文件</a><a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E5%A4%B9%E4%B8%8B%E9%9D%A2%E7%9A%84%E6%96%87%E4%BB%B6/1.htm">文件夹下面的文件</a><a class="tag" taget="_blank" href="/search/%E7%9B%AE%E5%BD%95%E4%B8%8B%E7%9A%84%E6%96%87%E4%BB%B6/1.htm">目录下的文件</a> <div>Java把目录下的文件打印出来 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月11日 11:02:</div> </li> <li><a href="/article/3010.htm" title="linux远程桌面----VNCServer与rdesktop" target="_blank">linux远程桌面----VNCServer与rdesktop</a> <span class="text-muted">hanqunfeng</span> <a class="tag" taget="_blank" href="/search/Desktop/1.htm">Desktop</a> <div>windows远程桌面到linux，需要在linux上安装vncserver，并开启vnc服务，同时需要在windows下使用vnc-viewer访问Linux。vncserver同时支持linux远程桌面到linux。 linux远程桌面到windows，需要在linux上安装rdesktop，同时开启windows的远程桌面访问。下面分别介绍，以windo</div> </li> <li><a href="/article/3137.htm" title="guava中的join和split功能" target="_blank">guava中的join和split功能</a> <span class="text-muted">jackyrong</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>guava库中，包含了很好的join和split的功能，例子如下： 1）将LIST转换为使用字符串连接的字符串 List<String> names = Lists.newArrayList("John", "Jane", "Adam", "Tom"); </div> </li> <li><a href="/article/3264.htm" title="Web开发技术十年发展历程" target="_blank">Web开发技术十年发展历程</a> <span class="text-muted">lampcy</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><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/html5/1.htm">html5</a> <div>回顾web开发技术这十年发展历程： Ajax 03年的时候我上六年级，那时候网吧刚在小县城的角落萌生。传奇，大话西游第一代网游一时风靡。我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩，然后接下来的一个小时我一直在，注，册，账，号。彼时网吧用的512k的带宽，注册的时候，填了一堆信息，提交，页面跳转，嘣，”您填写的信息有误，请重填”。然后跳转回注册页面，以此循环。我现在时常想，如果当时a</div> </li> <li><a href="/article/3391.htm" title="架构师之mima-----------------mina的非NIO控制IOBuffer(说得比较好)" target="_blank">架构师之mima-----------------mina的非NIO控制IOBuffer(说得比较好)</a> <span class="text-muted">nannan408</span> <a class="tag" taget="_blank" href="/search/buffer/1.htm">buffer</a> <div>1.前言。如题。 2.代码。 IoService IoService是一个接口，有两种实现：IoAcceptor和IoConnector；其中IoAcceptor是针对Server端的实现，IoConnector是针对Client端的实现；IoService的职责包括： 1、监听器管理 2、IoHandler 3、IoSession</div> </li> <li><a href="/article/3518.htm" title="ORA-00054:resource busy and acquire with NOWAIT specified" target="_blank">ORA-00054:resource busy and acquire with NOWAIT specified</a> <span class="text-muted">Everyday都不同</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/session/1.htm">session</a><a class="tag" taget="_blank" href="/search/Lock/1.htm">Lock</a> <div>[Oracle] 今天对一个数据量很大的表进行操作时，出现如题所示的异常。此时表明数据库的事务处于“忙”的状态，而且被lock了，所以必须先关闭占用的session。 step1，查看被lock的session： select t2.username, t2.sid, t2.serial#, t2.logon_time from v$locked_obj</div> </li> <li><a href="/article/3645.htm" title="javascript学习笔记" target="_blank">javascript学习笔记</a> <span class="text-muted">tntxia</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div> javascript里面有6种基本类型的值:number、string、boolean、object、function和undefined。number：就是数字值，包括整数、小数、NaN、正负无穷。string:字符串类型、单双引号引起来的内容。boolean:true、false object:表示所有的javascript对象，不用多说function:我们熟悉的方法，也就是</div> </li> <li><a href="/article/3772.htm" title="Java enum的用法详解" target="_blank">Java enum的用法详解</a> <span class="text-muted">xieke90</span> <a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a><a class="tag" taget="_blank" href="/search/%E6%9E%9A%E4%B8%BE/1.htm">枚举</a> <div>Java中枚举实现的分析：示例： public static enum SEVERITY{ INFO,WARN,ERROR } enum很像特殊的class，实际上enum声明定义的类型就是一个类。而这些类都是类库中Enum类的子类 (java.l</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <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>

：定义表头
：定义表格单元

：定义表格标题
（要符合嵌套规范）

2.语义化标签：