橙子!

【Web前端】HTML/CSS一文详解

现在对HTML和CSS的基础知识做一个详细的总结，文章内容很硬核。共有3w+字总结，建议收藏反复学习！适用于初学者学习或者熟练相关操作的人复习使用。

文章目录

HTML篇
一.HTML简介
- 1.什么是HTML？
- 2.HTML 标签
- 3.HTML 元素
- 4.HTML版本
- 5.Web 浏览器
- 6.HTML 网页结构
- 7.中文编码
- 8.编写第一个网页
二.HTML编辑器
三.HTML基础
- 1.HTML 标题
- 2.HTML 段落
- 3.HTML 链接
- 4.HTML 图像
四.HTML元素
- 1.HTML 元素语法
- 2.嵌套的 HTML 元素
- 3.HTML 空元素
五.HTML属性
六.HTML标题
- 1.HTML标题
- 2.HTML水平线
- 3.HTML 注释
七.HTML段落
- 1.HTML段落
- 2.HTML换行
八.HTML文本格式化
九.HTML链接
十.HTML头部
十一.HTML图像
十二.HTML表格
十三.HTML列表
十四.HTML区块
- 1.HTML区块元素
- 2.HTML内联元素
- 3.HTML的 div 元素
- 4.HTML的 span 元素
十五.HTML布局
- 1.使用div元素添加网页布局
- 2.使用table元素添加网页布局
十六.HTML表单和输入
- 1.文本域
- 2.密码字段
- 3.单选按钮
- 4.复选框
- 5.提交按钮
十七.HTML框架
- 1.iframe语法
- 2.iframe设置高度和宽度
- 3.iframe去除边框
- 4.使用 iframe 来显示目标链接页面
十八.HTML颜色
十九.脚本
- 1.HTML的 script 标签
- 2.HTML的 noscript 标签
二十.字符实体
二十一.URL
- 1.常见的 URL Scheme
二十二.HTML总结
CSS篇
一.CSS简介
- 1.什么是CSS？
二.CSS语法
- 1.语法规则
- 2.注释
三.CSS选择器
- 1.CSS的id选择器
- 2.CSS的class选择器
四.CSS创建
- 1.外部样式表
- 2.内部样式表
- 3.内联样式
- 4.多重样式
- 5.多重样式的优先级
五.CSS 背景
- 1.背景颜色
- 2.背景图像
- 3.背景图像 - 水平或垂直平铺
- 4.背景图像- 设置定位与不平铺
- 5.背景- 简写属性
六.CSS文本
- 1.文本颜色
- 2.文本的对齐方式
- 3.文本修饰
- 4.文本转换
- 5.文本缩进
七.CSS文字
- 1.CSS字体类型
- 2.字体系列
- 3.字体样式
- 4.字体大小
- - 4.1设置字体的大小像素
  - 4.2用em来设置字体大小
  - 4.3使用百分比和EM组合
八.CSS链接
- 1.链接样式
- 2.文本修饰
- 3.背景颜色
九.CSS列表
- 1.无序列表和有序列表
- 2.标记为图像的列表
- 3.列表属性值简写
十.CSS表格
- 1.表格边框
- 2.折叠边框
- 3.表格宽度和高度
- 4.表格文字对齐
- 5.表格填充
- 6.表格颜色
十一.CSS盒子模型(Box Model)
- 1.CSS 盒子模型
- 2.元素的宽度和高度
十二.CSS边框(Border)
- 1.边框样式
- 2.边框宽度
- 3.边框颜色
- 4.单独设置各边
- 5.属性简写
十三.CSS轮廓(outline)
十四.CSS外边距(margin)
- 1.CSS外边距的使用
- 2.CSS外边距属性简写
十五.CSS填充(padding)
- 1.CSS填充的使用
- 2.CSS填充属性简写
十六.CSS分组和嵌套选择器
- 1.分组选择器
- 2.嵌套选择器
十七.CSS尺寸(Dimension)
十八.CSS显示与可见性(Display Visibility)
- 1.隐藏元素
- 2.改变元素的显示
十九.CSS定位(Position)
- 1.static定位
- 2.fixed定位
- 3.relative定位
- 4.absolute定位
- 5.sticky 定位
- 6.重叠的元素
二十.CSS布局(Overflow)
二十一.CSS浮动(Float)
- 1.元素是怎么浮动？
- 2.彼此相邻的浮动元素
- 3.清除浮动
二十二.CSS布局-对齐
- 1.水平对齐
- - 1.1元素居中对齐
  - 1.2文本居中对齐
  - 1.3图片居中对齐
  - 1.4使用定位方式实现左右对齐
  - 1.5使用浮动方式实现左右对齐
- 2.垂直对齐
二十三.CSS导航栏
- 1.HTML设置菜单项
- 2.垂直导航栏
- 3.水平导航栏
- 内联列表项
- 2.浮动列表项
- 3.实例
- 4.固定导航栏
二十四.CSS下拉菜单
- 1.基本下拉菜单
- 2.常用下拉菜单
二十五.CSS提示工具
- 1.基础提示框
- 2.定位提示工具
- 3.添加箭头
- 4.淡入效果
二十六.总结

HTML篇

一.HTML简介

万维网W3C标准中网页分为结构，表现和行为三部分，HTML用于描述页面的结构，CSS用于控制页面中的元素样式，JavaScript用于响应用户的操作。HTML，CSS和JavaScript组成了前端技术栈。学习HTML就是学习标签的一个过程，难度指数低，重在反复练习！

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

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

body>
html>

1.什么是HTML？

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

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

2.HTML 标签

HTML标记标签又称为标签。

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

<标签>内容标签>

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

3.HTML 元素

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

<h1>一级标题h1>

4.HTML版本

版本	发布时间
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

5.Web 浏览器

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

6.HTML 网页结构

7.中文编码

当在浏览器输出中文乱码时，需要在头部将字符声明为 UTF-8 或 GBK。

<meta charset="UTF-8">

8.编写第一个网页

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

<html>

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

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

html>

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

二.HTML编辑器

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

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

轻量级编辑器

丰富的插件系统

代码跟踪功能

三.HTML基础

1.HTML 标题

HTML 标题是通过

-

标签来定义的。

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

2.HTML 段落

HTML 段落是通过标签

来定义的。

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

3.HTML 链接

HTML 链接是通过标签来定义的。

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

4.HTML 图像

HTML 图像是通过标签来定义的。

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

四.HTML元素

1.HTML 元素语法

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

2.嵌套的 HTML 元素

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

DOCTYPE html>
<html>

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

html>

这个
元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签
以及一个结束标签
。元素内容是: 段落1…。

元素定义了 HTML 文档的主体。这个元素拥有一个开始标签以及一个结束标签。元素内容是另一个 HTML 元素（p 元素）。

元素定义了整个 HTML 文档。这个元素拥有一个开始标签，以及一个结束标签。元素内容是另一个 HTML 元素（body 元素）。

3.HTML 空元素

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

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

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

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

五.HTML属性

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

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

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

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

六.HTML标题

1.HTML标题

标题是通过

-
标签进行定义的。
定义最大的标题。
定义最小的标题。浏览器会自动地在标题的前后添加空行。

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

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

2.HTML水平线

标签在 HTML 页面中创建水平线。

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

3.HTML 注释

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

七.HTML段落

1.HTML段落

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

标签定义的。

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

2.HTML换行

使用标签在不产生新的段落的情况下换行。

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

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

八.HTML文本格式化

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

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

标签作用

定义粗体文本

定义着重文字

定义斜体文字

定义小号文字

… …

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

九.HTML链接

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

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

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

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

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

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

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

十.HTML头部

1.HTML 元素：

元素包含了所有的头部标签元素。在元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: , <style>, <meta>, <link>, <script>, <noscript> 和 <base>。</code> <hr> 2.HTML <code><title></code>元素： <code><title></code> 标签定义了不同文档的标题。 <ul> <li class="task-list-item"> 定义了浏览器工具栏的标题</li> <li class="task-list-item"> 当网页添加到收藏夹时，显示在收藏夹中的标题</li> <li class="task-list-item"> 显示在搜索引擎结果页面的标题</li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> <p>文档内容......</p> </body> </html> </code></pre> <hr> 3.HTML <code><base></code>元素： <code><base></code> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接。 <pre><code class="prism language-html"><head> <base href="http://www.baidu.com/images/" target="_blank"> </head> </code></pre> <hr> 4.HTML <code><link></code>元素 <code><link></code> 标签定义了文档与外部资源之间的关系。 <pre><code class="prism language-html"><head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> </code></pre> <hr> 5.HTML <code><stytle></code>元素 <code><style></code> 标签定义了HTML文档的样式文件引用地址。 <pre><code class="prism language-html"><head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head> </code></pre> <hr> 6.HTML <code><meta></code>元素 <code><meta></code>标签描述了一些基本的元数据。 <ul> <li class="task-list-item"> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。</li> <li class="task-list-item"> 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。</li> <li class="task-list-item"> 一般放置于区域。</li> </ul> <hr> 7.HTML <code><script></code>元素 <code><script></code>标签用于加载脚本文件，如： JavaScript。 <hr> <h1>十一.HTML图像</h1> 在 HTML 中，图像由<code><img></code> 标签定义，<code><img></code> 是空标签。 要在页面上显示图像，需要使用源属性（src），源属性的值是图像的 URL 地址。 <pre><code class="prism language-html"><img src="url" alt="some_text"> </code></pre> alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，浏览器将显示这个替代性的文本而不是图像 <pre><code class="prism language-html"><img src="boat.gif" alt="显示图像"> </code></pre> height（高度）与 width（宽度）属性用于设置图像的高度与宽度。默认单位是像素。 <pre><code class="prism language-html"><img src="baidu.jpg" alt="百度" width="200" height="100"> </code></pre> <blockquote> 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。 </blockquote> <hr> <h1>十二.HTML表格</h1> 表格由 <code><table></code> 标签来定义。每个表格均有若干行（由 <code><tr></code> 标签定义），每行被分割为若干单元格（由 <code><td></code> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 <pre><code class="prism language-html"><table border="1"> <tr> <td>你好</td> <td>你好</td> </tr> <tr> <td>你好</td> <td>你好</td> </tr> </table> </code></pre> 大多数情况我们需要给表格加上边框，也可以不使用边框。 表格的表头使用 <code><th></code> 标签进行定义，大多数浏览器会把表头显示为粗体居中的文本。 <hr> <h1>十三.HTML列表</h1> HTML 支持有序、无序和定义列表: <ul> <li>无序列表使用 <code><ul></code> 标签定义，使用粗体圆点（典型的小黑圆圈）进行标记，每个列表项始于 <code><li></code> 标签</li> </ul> <pre><code class="prism language-html"> <ul> <li>java</li> <li>python</li> </ul> </code></pre> <img src="http://img.e-com-net.com/image/info8/b0d48127950542abb065a761bc39a3db.jpg" alt="在这里插入图片描述" width="0" height="0"> <ul> <li>有序列表使用<code><ol></code> 标签定义，使用数字进行标记，每个列表项始于 <code><li></code> 标签。</li> </ul> <pre><code class="prism language-html"> <ol> <li>java</li> <li>python</li> </ol> </code></pre> <img src="http://img.e-com-net.com/image/info8/2d91f0a115054daaa0f0d39e7cccd143.jpg" alt="在这里插入图片描述" width="0" height="0"> <ul> <li>自定义列表以 <code><dl></code> 标签开始，每个自定义列表项以 <code><dt></code> 开始。每个自定义列表项的定义以 <code><dd></code> 开始，自定义列表是项目和注释的组合。</li> </ul> <pre><code class="prism language-html"> <dl> <dt>java</dt> <dd>-诞生于1995年</dd> <dt>python</dt> <dd>-诞生于1991年</dd> </dl> </code></pre> <img src="http://img.e-com-net.com/image/info8/ba829f8ff0904312959966f51b941868.jpg" alt="在这里插入图片描述" width="0" height="0"> <hr> <h1>十四.HTML区块</h1> HTML 可以通过 <code><div></code> 和 <code></code>将元素组合起来。 <blockquote> 大多数 HTML 元素被定义为块级元素或内联元素。 </blockquote> <h2>1.HTML区块元素</h2> 块级元素在浏览器显示时，通常会以新行来开始和结束。 <h2>2.HTML内联元素</h2> 内联元素在浏览器显示时通常不会以新行开始。 <h2>3.HTML的 div 元素</h2> HTML <code><div></code> 元素是块级元素，它是用于组合其他 HTML 元素的容器。 例：让文档中的一块区域显示为红色，另一块区域加粗且显示为蓝色！ <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>望庐山瀑布</h1> <h2>唐李白</h2> <div style="color:red"> <p>日照香炉生紫烟，</p> <p>遥看瀑布挂前川。</p> </div> <div style="font-weight:bold;color:blue"> <p>飞流直下三千尺，</p> <p>疑是银河落九天。</p> </div> </body> </html> </code></pre> 显示效果：<img src="http://img.e-com-net.com/image/info8/35e3facdb0a047dba57bdd4e64bfa916.jpg" alt="在这里插入图片描述" width="0" height="0"> <blockquote> <code><div></code>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。 </blockquote> <h2>4.HTML的 span 元素</h2> HTML <code></code> 元素是内联元素，可用作文本的容器。 例：对文档中的一部分文本进行着色！ <pre><code class="prism language-html"> <h2><span style="color:chartreuse">唐</span> -李白</h2> </code></pre> 显示效果： <img src="http://img.e-com-net.com/image/info8/0bb7d0d6786c49058108c866969b2593.jpg" alt="在这里插入图片描述" width="0" height="0"> <blockquote> <code></code> 用于对文档中的行内元素进行组合。 </blockquote> <hr> <h1>十五.HTML布局</h1> 布局用于改善网站的外观，我们可以使用<code><div></code>或者<code><table></code>添加网页布局，大多数网站可以使用 <code><div></code> 或者 <code><table></code> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。 <h2>1.使用div元素添加网页布局</h2> div 元素是用于分组 HTML 元素的块级元素。 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小橙子前端教程!</title> </head> <body> <div id="container" style="width:600px"> <div id="header" style="background-color:cornflowerblue;"> <h1 style="margin-bottom:0;">--唐诗三百首--</h1> </div>   <div id="menu" style="background-color:dimgrey;height:200px;width:200px;float:left;"> <b>菜单</b><br> 望庐山瀑布<br> 静夜思<br> 绝句<br> 琵琶行 </div> <div id="content" style="background-color:aliceblue;height:200px;width:400px;float:left;"> 望庐山瀑布<br> 翻译译文：香炉峰在阳光的照射下生起紫色烟霞，远远望见瀑布似白色绢绸悬挂在山前。高崖上飞腾直落的瀑布好像有几千尺，让人恍惚以为银河从天上泻落到人间。 </div>  <div id="footer" style="background-color:cadetblue;clear:both;text-align:center;"> 橙子！</div> </div> </body> </html> </code></pre> <img src="http://img.e-com-net.com/image/info8/9989ee7617ba4916920685efffb3c238.jpg" alt="在这里插入图片描述" width="0" height="0"> <h2>2.使用table元素添加网页布局</h2> 我们还可以使用table标签添加网页布局！ <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小橙子前端教程!</title> </head> <body> <table width="600" border="0"> <tr> <td colspan="2" style="background-color:cornflowerblue"> <h1>--唐诗三百首--</h1> </td> </tr> <tr> <td style="background-color:dimgrey;width:200px;vertical-align:top;"> <b>菜单</b><br> 望庐山瀑布<br> 静夜思<br> 绝句<br> 琵琶行 </td>  <td style="background-color:aliceblue;height:200px;width:400px;vertical-align:top;"> 望庐山瀑布<br> 翻译译文：香炉峰在阳光的照射下生起紫色烟霞，远远望见瀑布似白色绢绸悬挂在山前。高崖上飞腾直落的瀑布好像有几千尺，让人恍惚以为银河从天上泻落到人间。</td> </tr> <tr> <td colspan="2" style="background-color:cadetblue;text-align:center;"> 橙子！</td> </tr> </table> </body> </html> </code></pre> <img src="http://img.e-com-net.com/image/info8/90581b43833c4886ba34b40753453282.jpg" alt="在这里插入图片描述" width="0" height="0"> <blockquote> <code><table></code>元素主要用于创建表格，虽然可以用于添加网页布局，但是不建议使用！ </blockquote> <hr> <h1>十六.HTML表单和输入</h1> HTML 表单用于收集用户的输入信息，HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。 <blockquote> 表单是一个包含表单元素的区域，表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等等。 </blockquote> 我们使用标签来创建表单，多数情况下被用到的表单标签是输入标签 <code><input></code>。 <h2>1.文本域</h2> 文本域(Text Fields)通过 <code><input type="text"></code> 来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。 <pre><code class="prism language-html"><body> <form> First <input type="text" name="firstname"><br> Last <input type="text" name="lastname"> </form> </body> </code></pre> <img src="http://img.e-com-net.com/image/info8/af1c6a5d773542b6bf91647ebb1f13d6.jpg" alt="在这里插入图片描述" width="0" height="0"> <h2>2.密码字段</h2> 密码字段通过标签 <code><input type="password"></code> 来定义。 <pre><code class="prism language-html"><form> Password: <input type="password" name="pwd"> </form> </code></pre> <img src="http://img.e-com-net.com/image/info8/ff2d4396b97641d3b69f04b5f2d55bb6.jpg" alt="在这里插入图片描述" width="0" height="0"> <blockquote> 密码字段字符不会明文显示，而是以星号 * 或圆点 . 替代。 </blockquote> <h2>3.单选按钮</h2> 单选按钮(Radio Buttons)通过<code><input type="radio"></code>标签来定义。 <pre><code class="prism language-html"><form action=""> <input type="radio" name="sex" value="male">男<br> <input type="radio" name="sex" value="female">女 </form> </code></pre> <img src="http://img.e-com-net.com/image/info8/a5cc85e46eca4cdea7e5ce22b6ac733a.jpg" alt="在这里插入图片描述" width="0" height="0"> <h2>4.复选框</h2> 复选框(Checkboxes)通过标签<code><input type="checkbox"></code>来定义。 <pre><code class="prism language-html"> <form> <input type="checkbox" name="vehicle" value="Bike">语文<br> <input type="checkbox" name="vehicle" value="Car">数学<br> <input type="checkbox" name="vehicle" value="Bike">英语<br> <input type="checkbox" name="vehicle" value="Car">历史 </form> </code></pre> <img src="http://img.e-com-net.com/image/info8/cef0504f829a4eebbcc5337da232d90d.jpg" alt="在这里插入图片描述" width="0" height="0"> <h2>5.提交按钮</h2> 提交按钮用<code><input type="submit"></code>标签来定义！ <pre><code class="prism language-html"><form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> </code></pre> <img src="http://img.e-com-net.com/image/info8/56f16d70324a4587ab1ef18adadbcfa5.jpg" alt="在这里插入图片描述" width="0" height="0"> 在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 html_form_action.php 文件，该页面将显示出输入的结果。 <blockquote> <code>method</code> 属性用于定义表单数据的提交方式，可以是以下值： <ul> <li><code>post</code>：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。</li> <li><code>get</code>：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。</li> </ul> </blockquote> <hr> <h1>十七.HTML框架</h1> 有时候我们希望在同一个浏览器界面中显示不止一个页面，这时候就要用到框架！ <h2>1.iframe语法</h2> <pre><code class="prism language-html"><iframe src="URL"></iframe> </code></pre> <h2>2.iframe设置高度和宽度</h2> <code>height</code> 和 <code>width</code> 属性用来定义iframe标签的高度与宽度。 <pre><code class="prism language-html"><iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe> </code></pre> <h2>3.iframe去除边框</h2> <code>frameborder</code> 属性用于定义iframe表示是否显示边框。 <pre><code class="prism language-html"><iframe src="demo_iframe.htm" frameborder="0"></iframe> </code></pre> <h2>4.使用 iframe 来显示目标链接页面</h2> <code>iframe</code> 可以显示一个目标链接的页面 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小橙子前端教程！</title> </head> <body> <iframe src="demo_iframe.htm" name="iframe_a" width="800" height="400"></iframe> <p><a href="https://blog.csdn.net/zhangxia_?spm=1000.2115.3001.5343" target="iframe_a">橙子！的博客</a></p> <p><b>注意：</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。</p> </body> </html> </code></pre> <img src="http://img.e-com-net.com/image/info8/783f8b2b244940f7b852a1ce40dbdd85.jpg" alt="在这里插入图片描述" width="0" height="0"> <h1>十八.HTML颜色</h1> <ul> <li> HTML 颜色由红色、绿色、蓝色混合而成。 </li> <li> HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。 </li> <li> 每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。 </li> </ul> <img src="http://img.e-com-net.com/image/info8/807e73cda7904b31bd0840eaf53bc4a4.jpg" alt="在这里插入图片描述" width="0" height="0"> <blockquote> 具体颜色效果可以查表 </blockquote> <hr> <h1>十九.脚本</h1> <h2>1.HTML的 script 标签</h2> <code><script></code> 标签用于定义客户端脚本，比如 JavaScript。<code><script></code> 元素既可包含脚本语句，也可通过 <code>src</code> 属性指向外部脚本文件。 <pre><code class="prism language-html"><script> document.write("Hello World!"); </script> </code></pre> <h2>2.HTML的 noscript 标签</h2> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，<code><noscript></code>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素，在浏览器禁止使用脚本时，会显示该标签内的内容。 <pre><code class="prism language-html"><script> document.write("Hello World!") </script> <noscript>抱歉，你的浏览器不支持 JavaScript!</noscript> </code></pre> <h1>二十.字符实体</h1> HTML中预留的字符和一些键盘上找不到的字符必须使用字符实体来替换！ 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 <table> <thead> <tr> <th>显示结果</th> <th>描述</th> <th>实体名称</th> <th>实体编号</th> </tr> </thead> <tbody> <tr> <td></td> <td>空格</td> <td><code> </code></td> <td><code> </code></td> </tr> <tr> <td><</td> <td>小于号</td> <td><code><</code></td> <td><code><</code></td> </tr> <tr> <td>></td> <td>大于号</td> <td><code>></code></td> <td><code>></code></td> </tr> <tr> <td>&</td> <td>和号</td> <td><code>&</code></td> <td><code>&</code></td> </tr> </tbody> </table> <blockquote> 实体名称对大小写敏感，实际实体名称使用时参考HTML实体参考手册！ </blockquote> <h1>二十一.URL</h1> URL(统一资源定位器)是一个网页地址，可以使用网址(例如：www.baidu.com)或者使用IP地址来访问。 Web浏览器通过URL从Web服务器请求页面。 <h2>1.常见的 URL Scheme</h2> <table> <thead> <tr> <th>Scheme</th> <th>访问</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td>http</td> <td>超文本传输协议</td> <td>以 http:// 开头的普通网页。不加密。</td> </tr> <tr> <td>https</td> <td>安全超文本传输协议</td> <td>安全网页，加密所有信息交换。</td> </tr> <tr> <td>ftp</td> <td>文件传输协议</td> <td>用于将文件下载或上传至网站。</td> </tr> <tr> <td>file</td> <td></td> <td>您计算机上的文件。</td> </tr> </tbody> </table> <blockquote> URL 只能使用 ASCII 字符集。 </blockquote> <hr> <h1>二十二.HTML总结</h1> 恭喜你！现在已经完成HTML基础知识的学习，接下来就要学习CSS啦。 <hr> <hr> <h1>CSS篇</h1> <h1>一.CSS简介</h1> <h2>1.什么是CSS？</h2> CSS 指层叠样式表 (Cascading Style Sheets)。 <ul> <li>样式定义如何显示 HTML 元素</li> <li>样式通常存储在样式表中</li> <li>外部样式表可以极大提高工作效率，通常存储在CSS文件中</li> <li>多个样式定义可层叠为一个</li> </ul> <pre><code class="prism language-html">p { color:red; text-align:center; } </code></pre> <hr> <h1>二.CSS语法</h1> <h2>1.语法规则</h2> CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: <img src="http://img.e-com-net.com/image/info8/dd0577b0f7cd4986892a3661b9c046ad.png" alt="在这里插入图片描述" width="0" height="0"> <ul> <li>选择器通常是您需要改变样式的 HTML 元素。</li> <li>每条声明由一个属性和一个值组成。</li> </ul> <h2>2.注释</h2> CSS注释以 <code>/*</code> 开始, 以 <code>*/</code> 结束,注释是为了提高代码的可读性！ <pre><code class="prism language-html">/*注释*/ p { text-align:center; /*注释*/ color:red; } </code></pre> <hr> <h1>三.CSS选择器</h1> 如果要在HTML元素中使用CSS样式，则需要在元素中使用选择器！ <h2>1.CSS的id选择器</h2> id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小橙子前端教程!</title> <style> #p1 { color: red; } </style> </head> <body> <p id="p1">通过id选择器把这一段文字设置为红色！</p> <p>这一段文字不受上面的影响！</p> </body> </html> </code></pre> <img src="http://img.e-com-net.com/image/info8/ae96ec858c0b4d989d7a82a5d9e30793.jpg" alt="在这里插入图片描述" width="0" height="0"> <h2>2.CSS的class选择器</h2> class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用，class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小橙子前端教程！</title> <style> .center { text-align: center; } </style> </head> <body> <h1 class="center">标题居中</h1> <p class="center">段落居中</p> </body> </html> </code></pre> <img src="http://img.e-com-net.com/image/info8/7c030cb2f2fb4a34a9c248dae848076b.jpg" alt="在这里插入图片描述" width="0" height="0"> 同时也可以指定特定的HTML元素使用class。 <pre><code class="prism language-html">p.center {text-align:center;} </code></pre> <hr> <h1>四.CSS创建</h1> 浏览器会根据样式表格式化HTML文档！有三种方法可以插入样式表： <h2>1.外部样式表</h2> 当样式需要应用于很多界面的时候，通常使用外部样式表，使用外部样式表的优点是可以通过改变一个文件来改变整个HTML文档的样式布局，每个页面使用 <code><link></code> 标签链接到样式表。 <code><link></code> 标签在文档的头部。 <pre><code class="prism language-html"><head> <link rel="stylesheet" type="text/css" href="mystyle.css">  </head> </code></pre> <h2>2.内部样式表</h2> 当单个文档需要特殊的样式时，就应该使用内部样式表。使用 <code><style></code> 标签在文档头部定义内部样式表。 <pre><code class="prism language-html"><style> hr { color: sienna; } p { color: red; } body { background-color: aqua; } </style> </code></pre> <h2>3.内联样式</h2> 当样式只需要在元素上应用一次时可以使用内联样式，但是由于内联样式把表现和内容混在一起，所以不建议使用！ <pre><code class="prism language-html"><p style="color:red">内联样式不建议使用!</p> </code></pre> <h2>4.多重样式</h2> 如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。 <blockquote> 内部样式表和外部样式表中存在重复的部分，内部样式表将取代外部样式表中的部分！ </blockquote> 外部样式表： <pre><code class="prism language-html">h3 { color:red; font-size:12px; } </code></pre> 内部样式表： <pre><code class="prism language-html">h3 { font-size:20pt; } </code></pre> 最终效果： <pre><code class="prism language-html">h3 { color:red; font-size:20px; } </code></pre> <blockquote> 颜色属性继承自外部样式表，字体大小属性将取代外部样式表中的部分。 </blockquote> <h2>5.多重样式的优先级</h2> 样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。 优先级：（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式 <hr> <h1>五.CSS 背景</h1> CSS 背景属性用于定义HTML元素的背景。CSS背景有以下的效果： <h2>1.背景颜色</h2> <code>background-color</code> 属性定义了元素的背景颜色，在<code>body</code>选择器中使用！ <pre><code class="prism language-html">body {background-color:grey;} </code></pre> <blockquote> CSS中的颜色通常有以下三种定义方式： <ul> <li>十六进制 - 如：“#ff0000”</li> <li>RGB - 如：“rgb(255,0,0)”</li> <li>颜色名称 - 如：“red”</li> </ul> </blockquote> <hr> <h2>2.背景图像</h2> background-image 属性描述了元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。 <pre><code class="prism language-html">background-image: url('images/1.jpg'); </code></pre> <h2>3.背景图像 - 水平或垂直平铺</h2> <code>background-image</code>属性默认会在页面的水平或者垂直方向平铺。但是有时候图片在水平和垂直方向平铺不能达到想要的效果，可以选择只在某一方向平铺。 <h2>4.背景图像- 设置定位与不平铺</h2> <img src="http://img.e-com-net.com/image/info8/40587557390847b78569848a3383f21f.jpg" alt="在这里插入图片描述" width="0" height="0"> 为了让背景图片不影响文本的排版可以使用 <code>background-repeat</code>属性让图片不平铺，以达到预期的效果！ 同时可以通过<code>background-position</code>属性设置图片显示的位置，让文本达到最佳的显示效果！ <pre><code class="prism language-html">body { background-image:url('images/pai.jpg'); background-repeat:no-repeat; background-position:right top;/*设置背景图像的起始位置。*/ } </code></pre> <img src="http://img.e-com-net.com/image/info8/84a958a2179949a884fe30587d04e422.jpg" alt="在这里插入图片描述" width="0" height="0"> <h2>5.背景- 简写属性</h2> 为了简化页面背景属性的代码，可以将这些属性合并在同一个属性中。背景颜色的简写属性为 <code>"background"</code>。 <pre><code class="prism language-html">body {background:grey url('images/pai.jpg') no-repeat right top;} </code></pre> <hr> <h1>六.CSS文本</h1> <h2>1.文本颜色</h2> 颜色属性用来设置文字的颜色。 <pre><code class="prism language-html">body {color:red;} </code></pre> <h2>2.文本的对齐方式</h2> 文本排列属性是用来设置文本的水平对齐方式。 文本的水平排列方式有居中，对齐到左，对齐到右，两端对其。 <pre><code class="prism language-html">h1 {text-align:center;} p {text-align:justify;/*两端对齐*/} </code></pre> <h2>3.文本修饰</h2> <code>text-decoration</code> 属性用来设置或删除文本的装饰。 <pre><code class="prism language-html">a {text-decoration:none;/*用来删除链接的下划线*/} </code></pre> 同时，还可以使用<code>text-decoration</code> 属性来增强文章的阅读效果。 <pre><code class="prism language-html"><style> h1 {text-decoration: overline;} h2 {text-decoration: line-through;} h3 {text-decoration: underline;} </style> </code></pre> <img src="http://img.e-com-net.com/image/info8/02225802500a41a7802dfd1e1554b4fe.jpg" alt="在这里插入图片描述" width="0" height="0"> <h2>4.文本转换</h2> 文本转换属性是用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母，或每个单词的首字母大写。 <pre><code class="prism language-css"><style> p.uppercase {text-transform:uppercase;}/*大写*/ p.lowercase {text-transform:lowercase;}/*小写*/ p.capitalize {text-transform:capitalize;}/*首字母大写*/ </style> </code></pre> <img src="http://img.e-com-net.com/image/info8/c1b62819bfe244cfa03485ad787cc139.jpg" alt="在这里插入图片描述" width="0" height="0"> <h2>5.文本缩进</h2> 文本缩进属性是用来指定文本的第一行的缩进。 <pre><code class="prism language-css">p {text-indent:14px;} </code></pre> <hr> <h1>七.CSS文字</h1> CSS字体属性定义字体，加粗，大小，文字样式。 <h2>1.CSS字体类型</h2> <blockquote> 在CSS中，有两种类型的字体系列名称： <ul> <li>通用字体系列 - 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）</li> <li>特定字体系列 - 一个特定的字体系列（如 “Times” 或 “Courier”）</li> </ul> </blockquote> <table> <thead> <tr> <th>通用字体系列</th> <th>说明</th> <th>展示</th> </tr> </thead> <tbody> <tr> <td>Serif</td> <td>Serif字体中字符在行的末端拥有额外的装饰</td> <td><img src="http://img.e-com-net.com/image/info8/3228b905eb7344e198f2ca7fff60388a.jpg" alt="在这里插入图片描述" width="0" height="0"></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td>Sans-serif</td> <td>字体中字符在行的末端没有额外的装饰</td> <td><img src="http://img.e-com-net.com/image/info8/7fe33cf09b4d4535978ab3efb6b0db63.jpg" alt="在这里插入图片描述" width="0" height="0"></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td>Monospace</td> <td>所有的等宽字符具有相同的宽度</td> <td><img src="http://img.e-com-net.com/image/info8/927561ff386c480eb68ca8e17e965f22.jpg" alt="在这里插入图片描述" width="0" height="0"></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table> <h2>2.字体系列</h2> font-family 属性设置文本的字体系列。 <blockquote> <code>font-family</code> 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。 </blockquote> <h2>3.字体样式</h2> 我们可以通过字体样式设置正常或者斜体！ <pre><code class="prism language-html">p.normal {font-style:normal;} p.italic {font-style:italic;} </code></pre> <img src="http://img.e-com-net.com/image/info8/2087699253ea4f51bc43460c4668087e.jpg" alt="在这里插入图片描述" width="0" height="0"> <h2>4.字体大小</h2> <code>font-size</code> 属性设置文本的大小。 <blockquote> 字体大小的值可以是绝对或相对的大小。 绝对大小： <ul> <li>设置一个指定大小的文本</li> <li>不允许用户在所有浏览器中改变文本大小</li> <li>确定了输出的物理尺寸时绝对大小很有用</li> </ul> 相对大小： <ul> <li>相对于周围的元素来设置大小</li> <li>允许用户在浏览器中改变文字大小</li> </ul> </blockquote> <h3>4.1设置字体的大小像素</h3> 为了控制字体的大小，可以设置字体的大小像素。 <pre><code class="prism language-html">p {font-size:14px;} </code></pre> <blockquote> 可以通过缩放浏览器来调整字体的大小，但是实际调整的是页面的大小。 </blockquote> <h3>4.2用em来设置字体大小</h3> 1em和当前字体大小相等。在浏览器中默认的文字大小是16px。因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为<code>em=px/16=em。</code> <pre><code class="prism language-css">p {font-size:0.875em;} /* 14px/16=0.875em */ </code></pre> <h3>4.3使用百分比和EM组合</h3> 在所有浏览器的解决方案中，设置元素的默认字体大小的是百分比。 <pre><code class="prism language-css">body {font-size:100%;} p {font-size:0.875em;} </code></pre> <blockquote> 在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。 </blockquote> <hr> <h1>八.CSS链接</h1> <h2>1.链接样式</h2> 不同的链接可以有不同的样式，链接的不同状态也可以有不同的样式。 <blockquote> 链接的四种状态： <ul> <li>a:link - 正常，未访问过的链接</li> <li>a:visited - 用户已访问过的链接</li> <li>a:hover - 当用户鼠标放在链接上时</li> <li>a:active - 链接被点击的那一刻</li> </ul> </blockquote> <pre><code class="prism language-css">a:link {color:black;} /* 未访问链接*/ a:visited {color:greenyellow;} /* 已访问链接 */ a:hover {color:red;} /* 鼠标移动到链接上 */ a:active {color:blue;} /* 鼠标点击时 */ </code></pre> <blockquote> a:hover 必须跟在 a:link 和 a:visited后面,a:active 必须跟在 a:hover后面。 </blockquote> <h2>2.文本修饰</h2> <code>text-decoration</code> 属性主要用于删除链接中的下划线： <pre><code class="prism language-css">a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;} </code></pre> <h2>3.背景颜色</h2> 背景颜色属性指定链接背景色： <pre><code class="prism language-css">a:link {background-color:#B2FF99;} /* 未访问链接 */ a:visited {background-color:#FFFF85;} /* 已访问链接 */ a:hover {background-color:#FF704D;} /* 鼠标移动到链接上 */ a:active {background-color:#FF704D;} /* 鼠标点击时 */ </code></pre> <hr> <h1>九.CSS列表</h1> CSS中可以使用不同的列表项标记来实现列表。 <h2>1.无序列表和有序列表</h2> <code>list-style-type</code>属性指定列表项标记的类型。 <pre><code class="prism language-html"> <style> ul.a { list-style-type: circle; } ul.b { list-style-type: square; } ol.c { list-style-type: decimal; } ol.d { list-style-type: lower-alpha; } </style> </code></pre> <img src="http://img.e-com-net.com/image/info8/4239cc3d578b459583ac7a20f771cda9.jpg" alt="在这里插入图片描述" width="0" height="0"> <h2>2.标记为图像的列表</h2> <pre><code class="prism language-html"> <style> ul { list-style-image: url('images/1.png'); } </style> </code></pre> <img src="http://img.e-com-net.com/image/info8/4747a54a44664939a47b7ee39eda47ef.jpg" alt="在这里插入图片描述" width="0" height="0"> <h2>3.列表属性值简写</h2> 在单个属性中可以指定所有的列表属性，但是指定时必须按照一定的顺序！ <blockquote> 例如按照以下顺序指定列表属性： <ul> <li>list-style-type</li> <li>list-style-position</li> <li>list-style-image</li> </ul> </blockquote> <pre><code class="prism language-html">ul { list-style:square url("images/3.png"); } </code></pre> <blockquote> <code>list-style-type: none;</code>设置列表类型为没有列表项标记！ </blockquote> <h1>十.CSS表格</h1> <h2>1.表格边框</h2> 使用<code>border</code>属性指定CSS表格的边框。 <h2>2.折叠边框</h2> <code>border-collapse</code> 属性设置表格的边框是否被折叠成一个单一的边框或隔开。 <h2>3.表格宽度和高度</h2> <code>Width</code>和<code>height</code>属性定义表格的宽度和高度。 <h2>4.表格文字对齐</h2> 水平对齐： <pre><code class="prism language-html"><style> table, td, th { border:1px solid blue; padding:10px; width:25%; text-align:left; } th { background-color:grey; color:white; height:30px; } </style> </code></pre> <img src="http://img.e-com-net.com/image/info8/e3bf9863a153416099c7d5fe9d2b9805.jpg" alt="在这里插入图片描述" width="0" height="0"> 垂直对齐： <pre><code class="prism language-html">td { height:50px; vertical-align:bottom; } </code></pre> <img src="http://img.e-com-net.com/image/info8/2922661a86b845059afe543ccf04c260.jpg" alt="在这里插入图片描述" width="0" height="0"> <blockquote> 表格中的文字对齐方式分为水平对齐和垂直对齐： <ul> <li><code>text-align</code>属性设置水平对齐方式，向左，右，或中心。</li> <li><code>vertical-align</code>属性设置垂直对齐方式，顶部，底部或中间。</li> </ul> </blockquote> <h2>5.表格填充</h2> <code>td</code>和<code>th</code>元素的填充属性可以控制边框和表格内容之间的间距。 <pre><code class="prism language-html">td { padding:15px; } </code></pre> <img src="http://img.e-com-net.com/image/info8/cba76668a6c64da5938b0f7ccc280426.jpg" alt="在这里插入图片描述" width="0" height="0"> <h2>6.表格颜色</h2> 我们可以指定表格边框的颜色，文本的颜色和背景颜色。 <pre><code class="prism language-html"><style> table, td, th { border:1px solid blue; } th { background-color:grey; color:white; } </style> </code></pre> <img src="http://img.e-com-net.com/image/info8/275757eea1c74e73912431b4b6dbeb3a.jpg" alt="在这里插入图片描述" width="0" height="0"> <hr> <h1>十一.CSS盒子模型(Box Model)</h1> 所有HTML元素可以看作盒子！ <h2>1.CSS 盒子模型</h2> 在CSS中，盒子模型用于设计和布局。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 <img src="http://img.e-com-net.com/image/info8/889462f7464148979e20edca09bd7769.jpg" alt="在这里插入图片描述" width="0" height="0"> <blockquote> 说明： <ul> <li>Margin(外边距) - 清除边框外的区域，外边距是透明的。</li> <li>Border(边框) - 围绕在内边距和内容外的边框。</li> <li>Padding(内边距) - 清除内容周围的区域，内边距是透明的。</li> <li>Content(内容) - 盒子的内容，显示文本和图像。</li> </ul> </blockquote> <h2>2.元素的宽度和高度</h2> 完整大小的元素，必须包括宽度和高度，还必须包含内边距，边框和外边距。 <pre><code class="prism language-css">div { width: 300px; border: 25px solid blue; padding: 25px; margin: 25px; } </code></pre> <img src="http://img.e-com-net.com/image/info8/3d23236f55a64234b0f7451e333745d7.jpg" alt="在这里插入图片描述" width="0" height="0"> <blockquote> 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距 </blockquote> <h1>十二.CSS边框(Border)</h1> 可以利用边框属性指定元素边框的样式和颜色。 <h2>1.边框样式</h2> <code>border-style</code>属性用来定义边框的样式。 <pre><code class="prism language-html"><style> p.none {border-style:none;} p.dotted {border-style:dotted;} p.dashed {border-style:dashed;} p.solid {border-style:solid;} p.double {border-style:double;} p.groove {border-style:groove;} p.ridge {border-style:ridge;} p.inset {border-style:inset;} p.outset {border-style:outset;} p.hidden {border-style:hidden;} p.mix {border-style: dotted dashed solid double;} </style> </code></pre> <img src="http://img.e-com-net.com/image/info8/e34ea64cafdc4b2a865982195df1e908.jpg" alt="在这里插入图片描述" width="0" height="0"> <h2>2.边框宽度</h2> <code>border-width</code> 属性用来指定边框宽度。 <pre><code class="prism language-html"><style> p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; } p.three { border-style:solid; border-width:1px; } </style> </code></pre> <img src="http://img.e-com-net.com/image/info8/4214155c97a9458b822d133aff992c63.jpg" alt="在这里插入图片描述" width="0" height="0"> <blockquote> 为边框指定宽度有两种方法： <ul> <li>指定长度值</li> <li>使用关键字，分别是 <code>thick</code> 、<code>medium</code>（默认值）和 <code>thin</code>，CSS 没有定义 3 个关键字的具体宽度</li> </ul> <hr> “<code>border-width</code>” 属性必须和border-style一起使用，否则不起作用！ </blockquote> <h2>3.边框颜色</h2> <code>border-color</code>属性用于设置边框的颜色。设置颜色的方法和HTML类似。 <pre><code class="prism language-html"><style> p.one { border-style:solid; } p.two { border-style:solid; border-color:red; } </style> </code></pre> <img src="http://img.e-com-net.com/image/info8/8698ba9dc2884646a86ef37877e7adc6.jpg" alt="在这里插入图片描述" width="0" height="0"> <blockquote> <code>border-color</code>属性必须和border-style一起使用，否则不起作用。 </blockquote> <h2>4.单独设置各边</h2> 在CSS中，可以把边框各边设置成不同的样式和颜色。 <pre><code class="prism language-html"><style> p { border-top-style:solid; border-top-color:red ; border-right-style:dotted; border-bottom-style:dotted; border-left-style:solid; } </style> </code></pre> <img src="http://img.e-com-net.com/image/info8/9690cc6b333c48b0ae24be5dc22bcba3.jpg" alt="在这里插入图片描述" width="0" height="0"> <h2>5.属性简写</h2> 为了使用方便可以在<code>border</code>一个属性中设置边框。 <pre><code class="prism language-css">border:5px solid red; </code></pre> <hr> <h1>十三.CSS轮廓(outline)</h1> 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。 <blockquote> 常用的outline属性： <ul> <li>outline-color:设置轮廓的颜色</li> <li>outline-style:设置轮廓的样式</li> <li>outline-width:设置轮廓的宽度</li> </ul> </blockquote> <pre><code class="prism language-html"> <style> p{ border:1px solid black; outline:red solid 3px; } </style> </code></pre> <img src="http://img.e-com-net.com/image/info8/944703f6d2ab45049fac323be3bf4340.jpg" alt="在这里插入图片描述" width="0" height="0"> <hr> <h1>十四.CSS外边距(margin)</h1> <h2>1.CSS外边距的使用</h2> <code>margin</code>外边距属性定义了元素周围的空间。 <img src="http://img.e-com-net.com/image/info8/f43eea18b62747d19207ae197538123e.jpg" alt="在这里插入图片描述" width="0" height="0"> <pre><code class="prism language-css">p.margin { margin-top:200px; margin-bottom:200px; margin-right:50px; margin-left:50px; } </code></pre> <blockquote> 外边框属性可能的值： <ul> <li><code>auto</code>:设置浏览器边距，依赖于浏览器</li> <li><code>length</code>:定义一个固定的长度</li> <li><code>%</code>:定义一个百分比的外边距</li> </ul> </blockquote> <h2>2.CSS外边距属性简写</h2> 为了使用方便，可以使用一个margin属性指定所有的外边距。 margin属性可以有一到四个值，定义的内容稍有不同： <pre><code class="prism language-css">margin:25px 50px 30px 60px; </code></pre> <ul> <li>上边距为25</li> <li>右边距为50</li> <li>下边距为30</li> <li>左边距为60</li> </ul> <pre><code class="prism language-css">margin:25px 50px 30px </code></pre> <ul> <li>上边距为25</li> <li>左右边距为50</li> <li>下边距为30</li> </ul> <pre><code class="prism language-css">margin:25px 50px </code></pre> <ul> <li>上下边距为25</li> <li>左右边距为50</li> </ul> <pre><code class="prism language-css">margin:25px </code></pre> <ul> <li>四个边距都是25</li> </ul> <hr> <h1>十五.CSS填充(padding)</h1> <h2>1.CSS填充的使用</h2> CSS <code>padding</code>（填充）属性定义元素边框与元素内容之间的空间，即上下左右的内边距。 <pre><code class="prism language-css">p.padding { padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; } </code></pre> <blockquote> 填充属性可能的值： <ul> <li>length:定义一个固定的填充</li> <li>%:使用百分比值定义一个填充</li> </ul> </blockquote> <h2>2.CSS填充属性简写</h2> 为了使用方便，可以在一个padding属性中指定所有的填充值。 padding属性可以有一到四个值，定义内容稍有不同： <pre><code class="prism language-css">padding:25px 50px 75px 100px; </code></pre> <ul> <li>上填充为25</li> <li>右填充为50</li> <li>下填充为75</li> <li>左填充为100</li> </ul> <pre><code class="prism language-css">padding:25px 50px 75px </code></pre> <ul> <li>上填充为25</li> <li>左右填充为50</li> <li>下填充为75</li> </ul> <pre><code class="prism language-css">padding:25px 50px </code></pre> <ul> <li>上下填充为25</li> <li>左右填充50</li> </ul> <pre><code class="prism language-html">padding:25px </code></pre> <ul> <li>四边的填充都为25</li> </ul> <hr> <h1>十六.CSS分组和嵌套选择器</h1> <h2>1.分组选择器</h2> 在样式表中有多相同样式的元素，为了减少代码，可以使用分组选择器！例如： <pre><code class="prism language-html"><style> h1,h2 { color:red; } </style> </code></pre> 使用效果和以下代码相同： <pre><code class="prism language-html"> <style> h1 { color:red; } h2 { color:red; } </style> </code></pre> <h2>2.嵌套选择器</h2> 使用于选择器内部的选择器样式！例如： <blockquote> <ul> <li><code>p{ }</code>: 为所有 p 元素指定一个样式。</li> <li><code>.marked{ }</code>: 为所有 class=“marked” 的元素指定一个样式。</li> <li><code>.marked p{ }</code>: 为所有 class=“marked” 元素内的 p 元素指定一个样式。</li> <li><code>p.marked{ }</code>: 为所有 class=“marked” 的 p 元素指定一个样式。</li> </ul> </blockquote> <hr> <h1>十七.CSS尺寸(Dimension)</h1> CSS 尺寸 (<code>Dimension</code>) 属性用来控制元素的高度和宽度。 CSS 尺寸 (Dimension)属性： <table> <thead> <tr> <th>属性</th> <th>功能</th> </tr> </thead> <tbody> <tr> <td>height</td> <td>设置元素的高度。</td> </tr> <tr> <td>line-height</td> <td>设置行高。</td> </tr> <tr> <td>max-height</td> <td>设置元素的最大高度。</td> </tr> <tr> <td>max-width</td> <td>设置元素的最大宽度。</td> </tr> <tr> <td>min-height</td> <td>设置元素的最小高度。</td> </tr> <tr> <td>min-width</td> <td>设置元素的最小宽度。</td> </tr> <tr> <td>width</td> <td>设置元素的宽度。</td> </tr> </tbody> </table> <hr> <h1>十八.CSS显示与可见性(Display Visibility)</h1> <code>display</code>(显示)属性设置一个元素应如何显示，<code>visibility</code>(可见性)属性指定一个元素应可见还是隐藏。 <h2>1.隐藏元素</h2> 使用<code>display:none</code>或<code>visibility:hidden</code>可以隐藏元素，但是两者效果不同，前者隐藏的元素不会占用任何空间，后者隐藏的元素仍占用和隐藏前相同的空间，仍然会影响布局！ <h2>2.改变元素的显示</h2> <blockquote> 块元素是一个元素，占用了全部宽度，在前后都是换行符。例如<code><h1></code>，<code></code>。内联元素只需要必要的宽度，不强制换行。例如<code></code>，<code><a></code>。 </blockquote> 可以通过改变块级元素和内联元素，使元素有一定的特定布局。 <pre><code class="prism language-css">span {display:block;} </code></pre> 通过改变内联元素的属性使得显示为块级元素，前后带有换行符！ <hr> <h1>十九.CSS定位(Position)</h1> <code>position</code> 属性指定了元素的定位类型，<code>position</code> 属性的五个值： <ul> <li>static</li> <li>relative</li> <li>fixed</li> <li>absolute</li> <li>sticky</li> </ul> <h2>1.static定位</h2> HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。 <pre><code class="prism language-html">div.static { position: static; border: 3px solid red; } </code></pre> <h2>2.fixed定位</h2> 元素的位置相对于浏览器窗口是固定位置。不会随着窗口滚动而移动。 <pre><code class="prism language-css">p.pos_fixed { position:fixed; top:30px; right:5px; } </code></pre> <h2>3.relative定位</h2> 元素的位置是相对于正常元素的位置，移动这个元素的位置，但是原本所占的空间不会改变！ <pre><code class="prism language-css">h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; } </code></pre> <h2>4.absolute定位</h2> 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<code><html></code>。 <pre><code class="prism language-css">h2 { position:absolute; left:100px; top:150px; } </code></pre> <blockquote> 该定位的元素不占据空间，因为它与文档流无关，可以与其它元素重合。 </blockquote> <h2>5.sticky 定位</h2> 粘性定位的元素是依赖于用户的滚动，在 <code>position:relative</code> 与 <code>position:fixed</code> 定位之间切换。 <pre><code class="prism language-css">div.sticky { position: sticky; top: 0; padding: 5px; background-color: #cae8ca; border: 2px solid #4CAF50; } </code></pre> <img src="http://img.e-com-net.com/image/info8/c16c713831ec4abab414d499df0e8c0e.gif" alt="在这里插入图片描述" width="0" height="0"> <blockquote> 指定 top, right, bottom 或 left 四个值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。 </blockquote> <h2>6.重叠的元素</h2> 元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素。<code>z-index</code>属性指定了一个元素的堆叠顺序(哪个元素应该放在前面，或后面。) <blockquote> 如果两个定位元素重叠，没有指定<code>z - index</code>，最后定位在HTML代码中的元素将被显示在最前面。 </blockquote> <hr> <h1>二十.CSS布局(Overflow)</h1> CSS的<code>overflow</code> 属性用于控制内容溢出元素框时显示的方式，在对应的元素区间内添加滚动条。<code>overflow</code> 属性只工作于指定高度的块元素上。 <pre><code class="prism language-css">div { background-color: #eee; width: 300px; height: 50px; border: 1px solid black; overflow: visible; } </code></pre> <img src="http://img.e-com-net.com/image/info8/e5d14d3716484487bae6840524febe60.jpg" alt="在这里插入图片描述" width="0" height="0"> <pre><code class="prism language-css">#overflowTest { background: #eee; width: 500px; height: 150px; overflow: scroll; border: 1px solid black; } </code></pre> <img src="http://img.e-com-net.com/image/info8/8702ac840996496a93c9b5104c99908d.gif" alt="请添加图片描述" width="0" height="0"> <blockquote> overflow属性的所有值： <ul> <li>visible:默认值。内容不会被修剪，会呈现在元素框之外。</li> <li>hidden:内容会被修剪，并且其余内容是不可见的。</li> <li>scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。</li> <li>auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。</li> <li>inherit:规定应该从父元素继承 overflow 属性的值。</li> </ul> </blockquote> <hr> <h1>二十一.CSS浮动(Float)</h1> CSS 的 <code>Float</code>（浮动），会使元素向左或向右移动，其周围的元素也会重新排列，往往用于图像的布局。 <h2>1.元素是怎么浮动？</h2> <ol> <li>元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。</li> <li>一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。</li> <li>浮动元素之前的元素将不会受到影响，浮动元素之后的元素将围绕它。</li> </ol> <pre><code class="prism language-html"><style> img { float:left; } </style> </code></pre> <img src="http://img.e-com-net.com/image/info8/6146d88f82434d0e9410d45a9954d11b.jpg" alt="在这里插入图片描述" width="0" height="0"> <h2>2.彼此相邻的浮动元素</h2> 当几个浮动的元素放在一起，如果有空间的话，它们将彼此相邻。 左浮动： <pre><code class="prism language-css">.images { float:left; width:200px; height:200px; margin:5px; } /*css的样式会优先于标签的属性。*/ </code></pre> <img src="http://img.e-com-net.com/image/info8/fd9b912e26a742b7b119acf50b391787.jpg" alt="在这里插入图片描述" width="0" height="0"> 右浮动： <pre><code class="prism language-css">.images { float:right; width:200px; height:200px; margin:5px; } </code></pre> <img src="http://img.e-com-net.com/image/info8/58b9459d99d2433a9b95cbb7d1179f44.jpg" alt="在这里插入图片描述" width="0" height="0"> <h2>3.清除浮动</h2> 元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 <code>clear</code> 属性。 <code>clear</code> 属性指定元素两侧不能出现浮动元素。 没有使用<code>clear</code>属性的效果： 使用了<code>clear</code>属性的效果： <pre><code class="prism language-html"><style> .images { float:left; width:200px; height:200px; margin:5px; } .text_line { clear:both; margin-bottom:2px; } </style> </code></pre> <hr> <h1>二十二.CSS布局-对齐</h1> <h2>1.水平对齐</h2> <h3>1.1元素居中对齐</h3> 使用<code>margin: auto;</code>水平对齐一个元素，同时设置元素的宽度防止它溢出到容器的边缘！ <pre><code class="prism language-css">.center { margin: auto; width: 30%; border: 3px solid red; padding: 10px; } </code></pre> <a href="http://img.e-com-net.com/image/info8/4967a52bc167474c83cf8a2da7f6abcf.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4967a52bc167474c83cf8a2da7f6abcf.jpg" alt="【Web前端】HTML/CSS一文详解_第2张图片" width="650" height="200" style="border:1px solid black;"></a> <blockquote> 元素通过指定宽度，将两边的空外边距平均分配，达到元素居中的效果！ </blockquote> <h3>1.2文本居中对齐</h3> 如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center; <pre><code class="prism language-css">.center { text-align: center; border: 3px solid red; } </code></pre> <a href="http://img.e-com-net.com/image/info8/1393e40262154b48a002a33cbf498eef.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1393e40262154b48a002a33cbf498eef.jpg" alt="【Web前端】HTML/CSS一文详解_第3张图片" width="650" height="169" style="border:1px solid black;"></a> <h3>1.3图片居中对齐</h3> 要让图片居中对齐，首先要把它放在块级元素中，然后使用<code>margin: auto;</code>。 <pre><code class="prism language-css">img { display: block; margin: auto; } </code></pre> <a href="http://img.e-com-net.com/image/info8/64547cc9af2c49c894d7affa518836b3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/64547cc9af2c49c894d7affa518836b3.jpg" alt="【Web前端】HTML/CSS一文详解_第4张图片" width="650" height="310" style="border:1px solid black;"></a> <h3>1.4使用定位方式实现左右对齐</h3> <code>position: absolute;</code> 属性可以用来对齐元素。 <pre><code class="prism language-css">img { position: absolute; left: 20px; top: 20px; } </code></pre> <a href="http://img.e-com-net.com/image/info8/ea898da1afd6412ba0e15ab22543a210.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ea898da1afd6412ba0e15ab22543a210.jpg" alt="【Web前端】HTML/CSS一文详解_第5张图片" width="650" height="278" style="border:1px solid black;"></a> <blockquote> 当使用 position 来对齐元素时, 通常 <code><body></code> 元素会设置 <code>margin</code> 和 <code>padding</code> 。这样可以避免在不同的浏览器中出现可见的差异。同时，为了解决浏览器带来的差异，当使用 position 属性时，需要始终设置 !DOCTYPE 声明。 </blockquote> <h3>1.5使用浮动方式实现左右对齐</h3> 同样也可以使用flaot属性来对齐元素。 <pre><code class="prism language-css">img { float:left; margin:20px; } </code></pre> <a href="http://img.e-com-net.com/image/info8/20f1b502234f43ecb3105cee540c06c2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/20f1b502234f43ecb3105cee540c06c2.jpg" alt="【Web前端】HTML/CSS一文详解_第6张图片" width="650" height="329" style="border:1px solid black;"></a> <blockquote> 如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出！这个时候可以使用清除浮动来解决问题。 </blockquote> <h2>2.垂直对齐</h2> 可以通过设置内边距来实现垂直对齐！ <pre><code class="prism language-css">.center { padding: 25px 0; border: 3px solid red; } </code></pre> <a href="http://img.e-com-net.com/image/info8/6bdd6276dd004fd6bdbfa55ad29d5189.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6bdd6276dd004fd6bdbfa55ad29d5189.jpg" alt="【Web前端】HTML/CSS一文详解_第7张图片" width="650" height="256" style="border:1px solid black;"></a> <hr> <h1>二十三.CSS导航栏</h1> <h2>1.HTML设置菜单项</h2> 使用CSS可以美化HTML的菜单！导航栏类似于链接列表，所以使用<code><ul></code>属性来创建，效果如下： <pre><code class="prism language-html"><ul> <li><a href="#">新晋作者</a></li> <li><a href="#">作者周榜</a></li> <li><a href="#">作者总榜</a></li> <li><a href="#">原力榜</a></li> </ul> </code></pre> <a href="http://img.e-com-net.com/image/info8/2fcfe9ceaaf145d8a2e007c1abe4f2aa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2fcfe9ceaaf145d8a2e007c1abe4f2aa.jpg" alt="【Web前端】HTML/CSS一文详解_第8张图片" width="650" height="277" style="border:1px solid black;"></a> 对菜单进行美化，删除外边距和填充，同时去掉无序列表标记： <pre><code class="prism language-css"> ul { list-style-type: none; margin: 0; padding: 0; } </code></pre> <a href="http://img.e-com-net.com/image/info8/3d84c8e2137348f184d8fd1083daa2df.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3d84c8e2137348f184d8fd1083daa2df.jpg" alt="【Web前端】HTML/CSS一文详解_第9张图片" width="650" height="300" style="border:1px solid black;"></a> <h2>2.垂直导航栏</h2> 创建一个简单的垂直导航条实例，在鼠标移动到选项时，修改背景颜色： <pre><code class="prism language-html"><style> ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: rgb(240,240,240); } li a { display: block; color:black; padding: 8px 16px; text-decoration: none; } /* 鼠标移动到选项上修改背景颜色 */ li a:hover { background-color: rgb(144,144,144); color: white; } </style> </code></pre> <a href="http://img.e-com-net.com/image/info8/14cffad91d9b409991a160d30da51b1b.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/14cffad91d9b409991a160d30da51b1b.gif" alt="【Web前端】HTML/CSS一文详解_第10张图片" width="920" height="550" style="border:1px solid black;"></a> <blockquote> 使用说明： <ul> <li><code>display:block</code> - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度。</li> </ul> </blockquote> 在点击了选项后，我们可以添加 “active” 类来表示哪个选项被选中： <pre><code class="prism language-css">li a.active { background-color: #4CAF50; color: white; } </code></pre> <a href="http://img.e-com-net.com/image/info8/2592be8ec3b942eaaf14f88a1f392e7b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2592be8ec3b942eaaf14f88a1f392e7b.jpg" alt="【Web前端】HTML/CSS一文详解_第11张图片" width="650" height="271" style="border:1px solid black;"></a> <blockquote> 继续美化： <ul> <li>添加<code>text-align:center</code> 样式来让链接居中！</li> <li>在<code><ul></code>或者<code><li></code>上添加 <code>border</code> 属性来让导航栏有边框！</li> </ul> </blockquote> <pre><code class="prism language-html"><style> ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; border: 1px solid black; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } li { text-align: center; border-bottom: 1px solid black; } li:last-child { border-bottom: none; } li a.active { background-color: #4CAF50; color: white; } li a:hover:not(.active) { background-color: rgb(144,144,144); color: white; } </style> </code></pre> <a href="http://img.e-com-net.com/image/info8/9bfca30699ec4df0b4a0ad45c6b504ef.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/9bfca30699ec4df0b4a0ad45c6b504ef.gif" alt="【Web前端】HTML/CSS一文详解_第12张图片" width="920" height="550" style="border:1px solid black;"></a> <h2>3.水平导航栏</h2> 有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。如果要链接到具有相同的大小，则必须使用浮动的方法。 <h2>内联列表项</h2> <pre><code class="prism language-html"><style> ul { list-style-type:none; margin: 20px; padding:0; } li { display:inline; } </style> </code></pre> <a href="http://img.e-com-net.com/image/info8/a0d756442565443ba553593a2bfaa6d7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a0d756442565443ba553593a2bfaa6d7.jpg" alt="【Web前端】HTML/CSS一文详解_第13张图片" width="650" height="195" style="border:1px solid black;"></a> <h2>2.浮动列表项</h2> 使用内联列表项时，链接有不同的宽度，如果要使用相同的宽度，则需要使用浮动列表项。 <pre><code class="prism language-css">ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left; } a { display:block; width:60px; background-color:#dddddd; } </code></pre> <a href="http://img.e-com-net.com/image/info8/fd0cebfd7f984e0dabe97fd2ffe3f9e6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fd0cebfd7f984e0dabe97fd2ffe3f9e6.jpg" alt="【Web前端】HTML/CSS一文详解_第14张图片" width="650" height="195" style="border:1px solid black;"></a> <blockquote> <code>overflow:hidden</code> 添加到 <code>ul</code> 元素,以防止 <code>li</code> 元素列表的外出。 </blockquote> <h2>3.实例</h2> 创建一个水平导航条，在鼠标移动到选项后修改背景颜色。 <pre><code class="prism language-css">ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: rgb(179, 176, 176); } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: rgb(64, 56, 56); } </code></pre> <a href="http://img.e-com-net.com/image/info8/8ffae3342e124e428c3d60a76feec0f3.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/8ffae3342e124e428c3d60a76feec0f3.gif" alt="【Web前端】HTML/CSS一文详解_第15张图片" width="920" height="550" style="border:1px solid black;"></a> <blockquote> 继续美化：在点击了选项后，我们可以添加 “active” 类来标准哪个选项被选中，并且添加分割线。 </blockquote> <pre><code class="prism language-css">ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: rgb(179, 176, 176); } li { float: left; border-right:1px solid black; } li:last-child { border-right: none; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: rgb(64, 56, 56); } .active { background-color: #4CAF50; } </code></pre> <a href="http://img.e-com-net.com/image/info8/ff880dd7fb9f4126aadc5e68f9a47fa2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ff880dd7fb9f4126aadc5e68f9a47fa2.jpg" alt="【Web前端】HTML/CSS一文详解_第16张图片" width="650" height="249" style="border:1px solid black;"></a> <h2>4.固定导航栏</h2> 可以设置页面的导航栏固定在头部或者底部： <pre><code class="prism language-css">ul { position: fixed; top: 0; width: 100%; } </code></pre> <a href="http://img.e-com-net.com/image/info8/3381d4fbcd414855ae1ee351164db3f1.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/3381d4fbcd414855ae1ee351164db3f1.gif" alt="【Web前端】HTML/CSS一文详解_第17张图片" width="920" height="550" style="border:1px solid black;"></a> <hr> <h1>二十四.CSS下拉菜单</h1> <h2>1.基本下拉菜单</h2> <pre><code class="prism language-css">.dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; } .dropdown:hover .dropdown-content { display: block; } </code></pre> <a href="http://img.e-com-net.com/image/info8/b73b1dffba114959bfe92eaee54a3447.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/b73b1dffba114959bfe92eaee54a3447.gif" alt="【Web前端】HTML/CSS一文详解_第18张图片" width="920" height="550" style="border:1px solid black;"></a> <h2>2.常用下拉菜单</h2> <pre><code class="prism language-css">.dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } </code></pre> <a href="http://img.e-com-net.com/image/info8/9475f9e4335044c2b629a4a3466be9cc.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/9475f9e4335044c2b629a4a3466be9cc.gif" alt="【Web前端】HTML/CSS一文详解_第19张图片" width="920" height="550" style="border:1px solid black;"></a> <hr> <h1>二十五.CSS提示工具</h1> 提示工具在鼠标移动到指定元素后触发。 <h2>1.基础提示框</h2> <pre><code class="prism language-css"><style> /* Tooltip 容器 */ .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; /* 悬停元素上显示点线 */ } /* Tooltip 文本 */ .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; /* 定位 */ position: absolute; z-index: 1; } /* 鼠标移动上去后显示提示框 */ .tooltip:hover .tooltiptext { visibility: visible; } </style> </code></pre> <a href="http://img.e-com-net.com/image/info8/6e3adc4d009e400d92d2e7c6d95ff42e.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/6e3adc4d009e400d92d2e7c6d95ff42e.gif" alt="【Web前端】HTML/CSS一文详解_第20张图片" width="920" height="550" style="border:1px solid black;"></a> <h2>2.定位提示工具</h2> <pre><code class="prism language-css"><style> .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* 定位 */ position: absolute; z-index: 1; top: -5px; left: 105%; } .tooltip:hover .tooltiptext { visibility: visible; } </style> </code></pre> <a href="http://img.e-com-net.com/image/info8/e8120413a85c47a18757d7eb29dc0db1.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/e8120413a85c47a18757d7eb29dc0db1.gif" alt="【Web前端】HTML/CSS一文详解_第21张图片" width="920" height="550" style="border:1px solid black;"></a> <h2>3.添加箭头</h2> <pre><code class="prism language-css">.tooltip .tooltiptext::after { content: " "; position: absolute; top: 100%; /* 提示工具底部 */ left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; } </code></pre> <a href="http://img.e-com-net.com/image/info8/fb12c1a8481e4d879b3c0b4eaf93ec54.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/fb12c1a8481e4d879b3c0b4eaf93ec54.gif" alt="【Web前端】HTML/CSS一文详解_第22张图片" width="920" height="550" style="border:1px solid black;"></a> <h2>4.淡入效果</h2> 我们可以使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果: <pre><code class="prism language-css">.tooltip .tooltiptext { opacity: 0; transition: opacity 1s; } .tooltip:hover .tooltiptext { opacity: 1; } </code></pre> <a href="http://img.e-com-net.com/image/info8/f76c324f0b7b4619b0780dcdaa0b74c4.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/f76c324f0b7b4619b0780dcdaa0b74c4.gif" alt="【Web前端】HTML/CSS一文详解_第23张图片" width="920" height="550" style="border:1px solid black;"></a> <hr> <h1>二十六.总结</h1> 我们在这里已经讲解了许多HTML重要的标签功能以及使用，同时我们已经学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距等技能，下一阶段我们将开始JavaScript的学习了！ </div> </div>�� </div> </div> </div>  <div id="SOHUCS" sid="1549602747689537536"></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/1950233199242178560.htm" title="x86-64汇编语言训练程序与实战" target="_blank">x86-64汇编语言训练程序与实战</a> 十除以十等于一 <div>本文还有配套的精品资源，点击获取简介：汇编语言是一种低级语言，与机器代码紧密相关，特别适用于编写系统级代码及性能要求高的应用。nasm编译器是针对x86和x86-64架构的汇编语言编译器，支持多种语法风格和指令集。项目Euler提供数学和计算机科学问题，鼓励编程技巧应用，前100个问题的答案可共享。x86-64架构扩展了寄存器数量并引入新指令，提升了数据处理效率。学习汇编语言能够深入理解计算机底层</div> </li> <li><a href="/article/1950233072825856000.htm" title="三菱PLC全套学习资料及应用手册" target="_blank">三菱PLC全套学习资料及应用手册</a> good2know <div>本文还有配套的精品资源，点击获取简介：三菱PLC作为工业自动化领域的核心设备，其系列产品的学习和应用需要全面深入的知识。本次资料包为学习者提供从基础到进阶的全方位学习资源，包括各种型号PLC的操作手册、编程指南、软件操作教程以及实际案例分析，旨在帮助用户系统掌握PLC的编程语言、指令系统及在各类工业应用中的实施。1.三菱PLC基础知识入门1.1PLC的基本概念可编程逻辑控制器（PLC）是工业自动化</div> </li> <li><a href="/article/1950232820773351424.htm" title="移动端城市区县二级联动选择功能实现包" target="_blank">移动端城市区县二级联动选择功能实现包</a> good2know <div>本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery</div> </li> <li><a href="/article/1950232316408295424.htm" title="9、汇编语言编程入门：从环境搭建到简单程序实现" target="_blank">9、汇编语言编程入门：从环境搭建到简单程序实现</a> 神经网络酱 <a class="tag" taget="_blank" href="/search/%E6%B1%87%E7%BC%96%E8%AF%AD%E8%A8%80/1.htm">汇编语言</a><a class="tag" taget="_blank" href="/search/MEPIS/1.htm">MEPIS</a><a class="tag" taget="_blank" href="/search/GNU%E5%B7%A5%E5%85%B7%E9%93%BE/1.htm">GNU工具链</a> <div>汇编语言编程入门：从环境搭建到简单程序实现1.数据存储介质问题解决在处理数据存储时，若要使用MEPIS系统，需确保有其可访问的存储介质。目前，MEPIS无法向采用NTFS格式（常用于Windows2000和XP工作站）的硬盘写入数据。不过，若硬盘采用FAT32格式，MEPIS就能进行写入操作。此外，MEPIS还能将文件写入软盘和大多数USB闪存驱动器。若工作站连接到局域网，还可通过FTP协议或挂载</div> </li> <li><a href="/article/1950232190038110208.htm" title="day15｜前端框架学习和算法" target="_blank">day15｜前端框架学习和算法</a> universe_01 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的</div> </li> <li><a href="/article/1950225381961297920.htm" title="SpringMVC的执行流程" target="_blank">SpringMVC的执行流程</a> <div>1、什么是MVCMVC是一种设计模式。MVC的原理图如下所示M-Model模型（完成业务逻辑：有javaBean构成，service+dao+entity）V-View视图（做界面的展示jsp，html……）C-Controller控制器（接收请求—>调用模型—>根据结果派发页面2、SpringMVC是什么SpringMVC是一个MVC的开源框架，SpringMVC=Struts2+Spring，</div> </li> <li><a href="/article/1950219953118441472.htm" title="编程算法：技术创新的引擎与业务增长的核心驱动力" target="_blank">编程算法：技术创新的引擎与业务增长的核心驱动力</a> <div>在数字经济时代，算法已成为推动技术创新与业务增长的隐形引擎。从存内计算突破冯·诺依曼瓶颈，到动态规划优化万亿级金融交易，编程算法正在重塑产业竞争格局。一、存内计算：突破冯·诺依曼瓶颈的算法革命1.1存内计算的基本原理传统计算架构中90%的能耗消耗在数据搬运上。存内计算（Processing-in-Memory）通过直接在存储单元执行计算，实现能效10-100倍提升：#传统计算vs存内计算能耗模型i</div> </li> <li><a href="/article/1950214964396486656.htm" title="js操作样式" target="_blank">js操作样式</a> 郝加升 <div>DOM样式属性和方法：指定的元素，它的style有这么几个属性和方法：cssText：通过这个属性可以访问到元素的特性style设置的属性，并且可以直接赋值设置。removeProperty（属性名称）：从样式中删除给定属性。setProperty（属性名称，值，权重）：可以通过这个方法设置给定样式的同时设置其权重，可以传入”important”或者一个空字符串。获取计算后样式：window.ge</div> </li> <li><a href="/article/1950208989954371584.htm" title="Selenium 特殊控件操作与 ActionChains 实践详解" target="_blank">Selenium 特殊控件操作与 ActionChains 实践详解</a> 小馋喵知识杂货铺 <a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a> <div>1.下拉框单选操作(a)使用SeleniumSelect类（标准HTML标签）Selenium提供了内置的Select类用于操作标准下拉框，这种方式简单且直观。fromselenium.webdriver.support.uiimportSelect#定位下拉框dropdown=Select(driver.find_element("id","dropdown_id"))#通过以下三种方式选择单个</div> </li> <li><a href="/article/1950207097413103616.htm" title="微信公众号回调java_处理微信公众号消息回调" target="_blank">微信公众号回调java_处理微信公众号消息回调</a> weixin_39607620 <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E5%9B%9E%E8%B0%83java/1.htm">微信公众号回调java</a> <div>1、背景在上一节中，咱们知道如何接入微信公众号，可是以后公众号会与咱们进行交互，那么微信公众号如何通知到咱们本身的服务器呢？咱们知道咱们接入的时候提供的url是GET/mp/entry，那么公众号以后产生的事件将会以POST/mp/entry发送到咱们本身的服务器上。html2、代码实现，此处仍是使用weixin-java-mp这个框架实现一、引入weixin-java-mpcom.github.</div> </li> <li><a href="/article/1950206970766094336.htm" title="C++编程基础与面向对象概念解析" target="_blank">C++编程基础与面向对象概念解析</a> 侯昂 <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%BC%96%E7%A8%8B/1.htm">面向对象编程</a><a class="tag" taget="_blank" href="/search/C%2B%2B%E8%AF%AD%E6%B3%95/1.htm">C++语法</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a><a class="tag" taget="_blank" href="/search/%E7%B1%BB%E4%B8%8E%E5%AF%B9%E8%B1%A1/1.htm">类与对象</a><a class="tag" taget="_blank" href="/search/%E7%BB%A7%E6%89%BF%E4%B8%8E%E5%A4%9A%E6%80%81%E6%80%A7/1.htm">继承与多态性</a> <div>C++编程基础与面向对象概念解析背景简介C++是一种广泛使用的面向对象编程语言，它允许开发者创建高效、灵活且功能强大的程序。本文基于《C++Primer》一书的章节内容，深入解析C++的核心概念和面向对象编程原则，旨在帮助读者构建扎实的C++编程基础。面向对象编程的原则软件危机与进化介绍了软件危机的产生和软件进化的必要性，强调了面向对象编程（OOP）在应对这些问题中的优势。面向对象编程范式讨论了面</div> </li> <li><a href="/article/1950202684451647488.htm" title="[spring6: Mvc-网关]-源码解析" target="_blank">[spring6: Mvc-网关]-源码解析</a> <div>推荐阅读：[spring6:Mvc-函数式编程]-源码解析GatewayServerMvcAutoConfiguration@AutoConfiguration(after={HttpClientAutoConfiguration.class,RestTemplateAutoConfiguration.class,RestClientAutoConfiguration.class,FilterAu</div> </li> <li><a href="/article/1950201094361640960.htm" title="人工智能应用研究快讯 2021-11-30" target="_blank">人工智能应用研究快讯 2021-11-30</a> 峰谷皆平 <div>[HTML]ArtificialIntelligenceforSkinCancerDetection:ScopingReviewATakiddin,JSchneider,YYang,AAbd-Alrazaq...JournalofMedicalInternet...,2021ABSTACT:Background:Skincanceristhemostcommoncancertypeaffectin</div> </li> <li><a href="/article/1950200667587014656.htm" title="学C++的五大惊人好处" target="_blank">学C++的五大惊人好处</a> <div>为什么要学c++学c++有什么用学习c++的好处有1.中考可以加分2.高考可能直接录取3.就业广且工资高4.在未来30--50年c++一定是一个很受欢迎的职业5.c++成功的例子deepsick等AI智能C++语言兼备编程效率和编译运行效率的语言C++语言是C语言功能增强版,在c语言的基础上添加了面向对象编程和泛型编程的支持既继承了C语言高效，简洁，快速和可移植的传统,又具备类似Java、Go等其</div> </li> <li><a href="/article/1950199910724857856.htm" title="机器学习必备数学与编程指南：从入门到精通" target="_blank">机器学习必备数学与编程指南：从入门到精通</a> a小胡哦 <a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0%E5%9F%BA%E7%A1%80/1.htm">机器学习基础</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%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> <div>一、机器学习核心数学基础1.线性代数（神经网络的基础）必须掌握：矩阵运算（乘法、转置、逆）向量空间与线性变换特征值分解与奇异值分解(SVD)为什么重要：神经网络本质就是矩阵运算学习技巧：用NumPy实际操作矩阵运算2.概率与统计（模型评估的关键）核心概念：条件概率与贝叶斯定理概率分布（正态、泊松、伯努利）假设检验与p值应用场景：朴素贝叶斯、A/B测试3.微积分（优化算法的基础）重点掌握：导数与偏导</div> </li> <li><a href="/article/1950198270882017280.htm" title="《UNIX网络编程卷1：套接字联网API》第8章：基本UDP套接字编程深度解析" target="_blank">《UNIX网络编程卷1：套接字联网API》第8章：基本UDP套接字编程深度解析</a> <div>《UNIX网络编程卷1：套接字联网API》第8章：基本UDP套接字编程深度解析（8000字图文实战）一、UDP协议核心特性与编程模型1.1UDP协议设计哲学UDP（UserDatagramProtocol）是面向无连接的传输层协议（图1），其核心特征包括：无连接通信：无需三次握手，直接发送数据报尽最大努力交付：不保证可靠性、不维护连接状态报文边界保留：接收方读取的数据与发送方写入完全一致低开销高效</div> </li> <li><a href="/article/1950195876991397888.htm" title="【Jupyter】个人开发常见命令" target="_blank">【Jupyter】个人开发常见命令</a> TIM老师 <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Pycharm/1.htm">Pycharm</a><a class="tag" taget="_blank" href="/search/%26amp%3B/1.htm">&</a><a class="tag" taget="_blank" href="/search/VSCode/1.htm">VSCode</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/Jupyter/1.htm">Jupyter</a> <div>1.查看python版本importsysprint(sys.version)2.ipynb/py文件转换jupyternbconvert--topythonmy_file.ipynbipynb转换为mdjupyternbconvert--tomdmy_file.ipynbipynb转为htmljupyternbconvert--tohtmlmy_file.ipynbipython转换为pdfju</div> </li> <li><a href="/article/1950195246893690880.htm" title="30 岁转行编程来得及吗？这位宝妈的经历告诉你答案" target="_blank">30 岁转行编程来得及吗？这位宝妈的经历告诉你答案</a> 大力出奇迹985 <a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a> <div>30岁转行编程是否可行？本文通过一位宝妈的真实经历给出答案。这位宝妈在30岁时，因职业发展瓶颈和对编程的兴趣，毅然决定转行。她克服了学习中的诸多困难，平衡家庭与学习，最终成功入职科技公司。文章详细讲述了她的转行动机、学习过程、求职经历及收获，证明了只要有决心和正确方法，30岁转行编程完全来得及，为有类似想法的人提供了实用参考。正文一、转行的契机：职业瓶颈与心中热爱的碰撞30岁的林悦（化名）曾是一家</div> </li> <li><a href="/article/1950194868303228928.htm" title="免费编程课程大汇总：从入门到精通的一站式资源" target="_blank">免费编程课程大汇总：从入门到精通的一站式资源</a> 大力出奇迹985 <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%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a> <div>在数字化时代，编程已成为一项至关重要的技能，无论是为了职业发展还是个人兴趣，学习编程都极具价值。本文精心汇总了丰富的免费编程课程资源，涵盖从基础入门到精通的各个阶段。通过全面介绍如Coursera、edX等在线学习平台，Codecademy、freeCodeCamp等交互式学习网站，以及B站、网易云课堂等视频课程平台的免费课程，为编程学习者提供了一站式的资源指南，帮助读者轻松开启编程学习之旅，逐步</div> </li> <li><a href="/article/1950194742100815872.htm" title="用代码生成艺术字：设计个性化海报的秘密" target="_blank">用代码生成艺术字：设计个性化海报的秘密</a> <div>本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准</div> </li> <li><a href="/article/1950194363237724160.htm" title="用 Python 开发小游戏：零基础也能做出《贪吃蛇》" target="_blank">用 Python 开发小游戏：零基础也能做出《贪吃蛇》</a> <div>本文专为零基础学习者打造，详细介绍如何用Python开发经典小游戏《贪吃蛇》。无需复杂编程知识，从环境搭建到代码编写、功能实现，逐步讲解核心逻辑与操作。涵盖Pygame库的基础运用、游戏界面设计、蛇的移动与食物生成规则等，让新手能按步骤完成开发，同时融入SEO优化要点，帮助读者轻松入门Python游戏开发，体验从0到1做出游戏的乐趣。一、为什么选择用Python开发《贪吃蛇》对于零基础学习者来说，</div> </li> <li><a href="/article/1950194363741040640.htm" title="文科生转行编程：从月薪 3 千到 2 万的真实经历" target="_blank">文科生转行编程：从月薪 3 千到 2 万的真实经历</a> <div>在当下就业市场中，文科生往往面临诸多挑战，薪资水平也不尽如人意。然而，有不少勇敢的文科生成功实现了向编程领域的转行，薪资更是实现了从月薪3千到2万的飞跃。本文将深入剖析文科生转行编程的真实经历，从最初对现状的不满萌生出转行念头，到如何艰难地开启学习之旅，克服基础薄弱、思维转换难等重重困难，再到求职时凭借策略与努力获得宝贵机会，以及入职后持续学习保持竞争力。希望通过这些真实历程，为有志于转行编程的文</div> </li> <li><a href="/article/1950191587556388864.htm" title="C#中的设计模式：构建更加优雅的代码" target="_blank">C#中的设计模式：构建更加优雅的代码</a> Envyᥫᩣᩚ <a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>C#在面向对象编程（OOP）方面的强大支持，我们可以探讨“C#中的设计模式”。这不仅有助于理解如何更好地组织代码，还能提高代码的可维护性和可扩展性。引言设计模式是软件工程中经过实践验证的解决方案模板，它们提供了一种标准化的方法来解决常见的开发问题。对于使用C#进行开发的程序员来说，理解和应用这些模式可以帮助创建结构良好、易于维护和扩展的应用程序。本文将介绍几种常用的设计模式，并展示如何用C#实现它</div> </li> <li><a href="/article/1950191208873652224.htm" title="vue element 封装表单" target="_blank">vue element 封装表单</a> 影子信息 <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>背景：在前端系统开发中，系统页面涉及到的表单组件比较多，所以进行了简单的封装。封装的包括一些Form表单组件，如下：input输入框、select下拉框、等实现效果：理论知识：表单组件官方链接：点击跳转封装组件：封装组件的思路：不封装element组件，每一个input组件绑定一个form对象，例如官网。简单封装element组件，利用for循环生成form表单的每一项el-form-item。进</div> </li> <li><a href="/article/1950191165710069760.htm" title="前端面试每日 3+1 —— 第39天" target="_blank">前端面试每日 3+1 —— 第39天</a> 浪子神剑 <div>今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss</div> </li> <li><a href="/article/1950190325960077312.htm" title="Jupyter Notebook：数据科学的“瑞士军刀”" target="_blank">Jupyter Notebook：数据科学的“瑞士军刀”</a> a小胡哦 <a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0%E5%9F%BA%E7%A1%80/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/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a> <div>在数据科学的世界里，JupyterNotebook是一个不可或缺的工具，它就像是数据科学家手中的“瑞士军刀”，功能强大且灵活多变。今天，就让我们一起深入了解这个神奇的工具。一、JupyterNotebook是什么？JupyterNotebook是一个开源的Web应用程序，它允许你创建和共享包含实时代码、方程、可视化和解释性文本的文档。它支持多种编程语言，其中Python是最常用的语言之一。Jupy</div> </li> <li><a href="/article/1950190146074767360.htm" title="大数据技术笔记—spring入门" target="_blank">大数据技术笔记—spring入门</a> 卿卿老祖 <div>篇一spring介绍spring.io官网快速开始Aop面向切面编程，可以任何位置，并且可以细致到方法上连接框架与框架Spring就是IOCAOP思想有效的组织中间层对象一般都是切入service层spring组成前后端分离已学方式，前后台未分离：Spring的远程通信：明日更新创建第一个spring项目来源：科多大数据</div> </li> <li><a href="/article/1950187223672483840.htm" title="GDP经济社会人文民生栅格数据下载网站汇总" target="_blank">GDP经济社会人文民生栅格数据下载网站汇总</a> 疯狂学习GIS <div> 本文为“GIS数据获取整理”专栏（https://blog.csdn.net/zhebushibiaoshifu/category_10857546.html）中第八篇独立博客，因此本文全部标题均由“8”开头。本文对目前主要的GDP、社会与经济数据获取网站加以整理与介绍，若需其它GIS领域数据（如遥感影像数据、气象数据、土地土壤数据、农业数据等），大家可以点击上方专栏查看，也可以看这一篇汇总文</div> </li> <li><a href="/article/1950183268448006144.htm" title="python编程第十四课：数据可视化" target="_blank">python编程第十四课：数据可视化</a> 小小源助手 <a class="tag" taget="_blank" href="/search/Python%E4%BB%A3%E7%A0%81%E5%AE%9E%E4%BE%8B/1.htm">Python代码实例</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">信息可视化</a><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> <div>Python数据可视化：让数据“开口说话”在当今数据爆炸的时代，数据可视化已成为探索数据规律、传达数据信息的关键技术。Python凭借其丰富的第三方库，为数据可视化提供了强大而灵活的解决方案。本文将带你深入了解Matplotlib库的基础绘图、Seaborn库的高级可视化以及交互式可视化工具Plotly，帮助你通过图表清晰地展示数据背后的故事。一、Matplotlib库基础绘图Matplotlib</div> </li> <li><a href="/article/1950181127176122368.htm" title="C++中std::variant的使用详解和实战代码示例" target="_blank">C++中std::variant的使用详解和实战代码示例</a> 点云SLAM <a class="tag" taget="_blank" href="/search/C%2B%2B/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%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/variant/1.htm">variant</a><a class="tag" taget="_blank" href="/search/C%2B%2B%E6%B3%9B%E5%9E%8B%E7%BC%96%E7%A8%8B/1.htm">C++泛型编程</a><a class="tag" taget="_blank" href="/search/%E8%81%94%E5%90%88%E4%BD%93/1.htm">联合体</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/%E7%B1%BB%E5%9E%8B%E6%93%A6%E9%99%A4%E6%9C%BA%E5%88%B6/1.htm">类型擦除机制</a><a class="tag" taget="_blank" href="/search/C%2B%2B17/1.htm">C++17</a> <div>std::variant是C++17引入的一个类型安全的联合体（type-safeunion），它可以在多个类型之间存储一个值，并在编译时进行类型检查。它是现代C++类型擦除与泛型编程的核心工具之一，适用于构建可变类型结构、消息传递系统、状态机等。一、基本概念#includestd::variantv;类似于联合体union，但类型安全。std::variant只能存储其中一个类型的值。默认构造时</div> </li> <li><a href="/article/71.htm" title="Linux的Initrd机制" target="_blank">Linux的Initrd机制</a> 被触发 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>Linux 的 initrd 技术是一个非常普遍使用的机制，linux2.6 内核的 initrd 的文件格式由原来的文件系统镜像文件转变成了 cpio 格式，变化不仅反映在文件格式上， linux 内核对这两种格式的 initrd 的处理有着截然的不同。本文首先介绍了什么是 initrd 技术，然后分别介绍了 Linux2.4 内核和 2.6 内核的 initrd 的处理流程。最后通过对 Lin</div> </li> <li><a href="/article/198.htm" title="maven本地仓库路径修改" target="_blank">maven本地仓库路径修改</a> bitcarter <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>默认maven本地仓库路径：C:\Users\Administrator\.m2 修改maven本地仓库路径方法： 1.打开E:\maven\apache-maven-2.2.1\conf\settings.xml 2.找到 </div> </li> <li><a href="/article/325.htm" title="XSD和XML中的命名空间" target="_blank">XSD和XML中的命名空间</a> darrenzhu <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/xsd/1.htm">xsd</a><a class="tag" taget="_blank" href="/search/schema/1.htm">schema</a><a class="tag" taget="_blank" href="/search/namespace/1.htm">namespace</a><a class="tag" taget="_blank" href="/search/%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4/1.htm">命名空间</a> <div>http://www.360doc.com/content/12/0418/10/9437165_204585479.shtml http://blog.csdn.net/wanghuan203/article/details/9203621 http://blog.csdn.net/wanghuan203/article/details/9204337 http://www.cn</div> </li> <li><a href="/article/452.htm" title="Java 求素数运算" target="_blank">Java 求素数运算</a> 周凡杨 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%B4%A0%E6%95%B0/1.htm">素数</a> <div>网络上对求素数之解数不胜数，我在此总结归纳一下，同时对一些编码，加以改进，效率有成倍热提高。第一种：原理: 6N(+-)1法任何一个自然数，总可以表示成为如下的形式之一： 6N，6N+1，6N+2，6N+3，6N+4，6N+5 (N=0，1，2，…) </div> </li> <li><a href="/article/579.htm" title="java 单例模式" target="_blank">java 单例模式</a> g21121 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>想必单例模式大家都不会陌生，有如下两种方式来实现单例模式： class Singleton { private static Singleton instance=new Singleton(); private Singleton(){} static Singleton getInstance() { return instance; }</div> </li> <li><a href="/article/706.htm" title="Linux下Mysql源码安装" target="_blank">Linux下Mysql源码安装</a> 510888780 <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>1.假设已经有mysql-5.6.23-linux-glibc2.5-x86_64.tar.gz (1)创建mysql的安装目录及数据库存放目录解压缩下载的源码包，目录结构，特殊指定的目录除外： </div> </li> <li><a href="/article/833.htm" title="32位和64位操作系统" target="_blank">32位和64位操作系统</a> 墙头上一根草 <a class="tag" taget="_blank" href="/search/32%E4%BD%8D%E5%92%8C64%E4%BD%8D%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">32位和64位操作系统</a> <div>32位和64位操作系统是指：CPU一次处理数据的能力是32位还是64位。现在市场上的CPU一般都是64位的，但是这些CPU并不是真正意义上的64 位CPU，里面依然保留了大部分32位的技术，只是进行了部分64位的改进。32位和64位的区别还涉及了内存的寻址方面，32位系统的最大寻址空间是2 的32次方= 4294967296（bit）= 4（GB）左右，而64位系统的最大寻址空间的寻址空间则达到了</div> </li> <li><a href="/article/960.htm" title="我的spring学习笔记10-轻量级_Spring框架" target="_blank">我的spring学习笔记10-轻量级_Spring框架</a> aijuans <a class="tag" taget="_blank" href="/search/Spring+3/1.htm">Spring 3</a> <div>一、问题提问： → 请简单介绍一下什么是轻量级？轻量级（Leightweight）是相对于一些重量级的容器来说的，比如Spring的核心是一个轻量级的容器，Spring的核心包在文件容量上只有不到1M大小，使用Spring核心包所需要的资源也是很少的，您甚至可以在小型设备中使用Spring。 </div> </li> <li><a href="/article/1087.htm" title="mongodb 环境搭建及简单CURD" target="_blank">mongodb 环境搭建及简单CURD</a> antlove <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/Install/1.htm">Install</a><a class="tag" taget="_blank" href="/search/curd/1.htm">curd</a><a class="tag" taget="_blank" href="/search/NoSQL/1.htm">NoSQL</a><a class="tag" taget="_blank" href="/search/mongo/1.htm">mongo</a> <div>一搭建mongodb环境 1. 在mongo官网下载mongodb 2. 在本地创建目录 "D:\Program Files\mongodb-win32-i386-2.6.4\data\db" 3. 运行mongodb服务 [mongod.exe --dbpath "D:\Program Files\mongodb-win32-i386-2.6.4\data\</div> </li> <li><a href="/article/1214.htm" title="数据字典和动态视图" target="_blank">数据字典和动态视图</a> 百合不是茶 <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%AD%97%E5%85%B8/1.htm">数据字典</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E8%A7%86%E5%9B%BE/1.htm">动态视图</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E5%92%8C%E5%AF%B9%E8%B1%A1%E6%9D%83%E9%99%90/1.htm">系统和对象权限</a> <div>数据字典（data dictionary）是 Oracle 数据库的一个重要组成部分，这是一组用于记录数据库信息的只读（read-only）表。随着数据库的启动而启动,数据库关闭时数据字典也关闭数据字典中包含数据库中所有方案对象（schema object）的定义(包括表，视图，索引，簇，同义词，序列，过程，函数，包，触发器等等) 数据库为一</div> </li> <li><a href="/article/1341.htm" title="多线程编程一般规则" target="_blank">多线程编程一般规则</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a> <div> 如果两个工两个以上的线程都修改一个对象，那么把执行修改的方法定义为被同步的，如果对象更新影响到只读方法，那么只读方法也要定义成同步的。不要滥用同步。如果在一个对象内的不同的方法访问的不是同一个数据，就不要将方法设置为synchronized的。 </div> </li> <li><a href="/article/1468.htm" title="将文件或目录拷贝到另一个Linux系统的命令scp" target="_blank">将文件或目录拷贝到另一个Linux系统的命令scp</a> bijian1013 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/unix/1.htm">unix</a><a class="tag" taget="_blank" href="/search/scp/1.htm">scp</a> <div>一.功能说明 scp就是security copy，用于将文件或者目录从一个Linux系统拷贝到另一个Linux系统下。scp传输数据用的是SSH协议，保证了数据传输的安全，其格式如下： scp 远程用户名@IP地址：文件的绝对路径</div> </li> <li><a href="/article/1595.htm" title="【持久化框架MyBatis3五】MyBatis3一对多关联查询" target="_blank">【持久化框架MyBatis3五】MyBatis3一对多关联查询</a> bit1129 <a class="tag" taget="_blank" href="/search/Mybatis3/1.htm">Mybatis3</a> <div>以教员和课程为例介绍一对多关联关系，在这里认为一个教员可以叫多门课程，而一门课程只有1个教员教，这种关系在实际中不太常见，通过教员和课程是多对多的关系。示例数据：地址表： CREATE TABLE ADDRESSES ( ADDR_ID INT(11) NOT NULL AUTO_INCREMENT, STREET VAR</div> </li> <li><a href="/article/1722.htm" title="cookie状态判断引发的查找问题" target="_blank">cookie状态判断引发的查找问题</a> bitcarter <a class="tag" taget="_blank" href="/search/form/1.htm">form</a><a class="tag" taget="_blank" href="/search/cgi/1.htm">cgi</a> <div>先说一下我们的业务背景： 1.前台将图片和文本通过form表单提交到后台，图片我们都做了base64的编码，并且前台图片进行了压缩 2.form中action是一个cgi服务 3.后台cgi服务同时供PC，H5，APP 4.后台cgi中调用公共的cookie状态判断方法（公共的，大家都用，几年了没有问题）问题：（折腾两天。。。。） 1.PC端cgi服务正常调用，cookie判断没</div> </li> <li><a href="/article/1849.htm" title="通过Nginx,Tomcat访问日志(access log)记录请求耗时" target="_blank">通过Nginx,Tomcat访问日志(access log)记录请求耗时</a> ronin47 <div>一、Nginx通过$upstream_response_time $request_time统计请求和后台服务响应时间 nginx.conf使用配置方式： log_format main '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_r</div> </li> <li><a href="/article/1976.htm" title="java-67- n个骰子的点数。把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。" target="_blank">java-67- n个骰子的点数。把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class ProbabilityOfDice { /** * Q67 n个骰子的点数 * 把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。 * 在以下求解过程中，我们把骰子看作是有序的。 * 例如当n=2时，我们认为（1，2）和（2，1）是两种不同的情况 */ private stati</div> </li> <li><a href="/article/2103.htm" title="看别人的博客，觉得心情很好" target="_blank">看别人的博客，觉得心情很好</a> Cb123456 <a class="tag" taget="_blank" href="/search/%E5%8D%9A%E5%AE%A2/1.htm">博客</a><a class="tag" taget="_blank" href="/search/%E5%BF%83%E6%83%85/1.htm">心情</a> <div> 以为写博客，就是总结，就和日记一样吧，同时也在督促自己。今天看了好长时间博客: 职业规划: http://www.iteye.com/blogs/subjects/zhiyeguihua android学习: 1.http://byandby.i</div> </li> <li><a href="/article/2230.htm" title="[JWFD开源工作流]尝试用原生代码引擎实现循环反馈拓扑分析" target="_blank">[JWFD开源工作流]尝试用原生代码引擎实现循环反馈拓扑分析</a> comsci <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C%E6%B5%81/1.htm">工作流</a> <div> 我们已经不满足于仅仅跳跃一次，通过对引擎的升级，今天我测试了一下循环反馈模式，大概跑了200圈，引擎报一个溢出错误在一个流程图的结束节点中嵌入一段方程，每次引擎运行到这个节点的时候，通过实时编译器GM模块，计算这个方程，计算结果与预设值进行比较，符合条件则跳跃到开始节点，继续新一轮拓扑分析，直到遇到</div> </li> <li><a href="/article/2357.htm" title="JS常用的事件及方法" target="_blank">JS常用的事件及方法</a> cwqcwqmax9 <a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div>事件描述 onactivate 当对象设置为活动元素时触发。 onafterupdate 当成功更新数据源对象中的关联对象后在数据绑定对象上触发。 onbeforeactivate 对象要被设置为当前元素前立即触发。 onbeforecut 当选中区从文档中删除之前在源对象触发。 onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即</div> </li> <li><a href="/article/2484.htm" title="正则表达式验证日期格式" target="_blank">正则表达式验证日期格式</a> dashuaifu <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/IT%E5%85%B6%E5%AE%83/1.htm">IT其它</a><a class="tag" taget="_blank" href="/search/java%E5%85%B6%E5%AE%83/1.htm">java其它</a> <div> 正则表达式验证日期格式 function isDate(d){ var v = d.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/i); if(!v) { this.focus(); return false; } } <input value="2000-8-8" onblu</div> </li> <li><a href="/article/2611.htm" title="Yii CModel.rules() 方法、validate预定义完整列表、以及说说验证" target="_blank">Yii CModel.rules() 方法、validate预定义完整列表、以及说说验证</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a> <div>public array rules () {return} array 要调用 validate() 时应用的有效性规则。返回属性的有效性规则。声明验证规则，应重写此方法。每个规则是数组具有以下结构：array('attribute list', 'validator name', 'on'=>'scenario name', ...validation </div> </li> <li><a href="/article/2738.htm" title="UITextAttributeTextColor = deprecated in iOS 7.0" target="_blank">UITextAttributeTextColor = deprecated in iOS 7.0</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a> <div>In this lesson we used the key "UITextAttributeTextColor" to change the color of the UINavigationBar appearance to white. This prompts a warning "first deprecated in iOS 7.0." Ins</div> </li> <li><a href="/article/2865.htm" title="判断一个数是质数的几种方法" target="_blank">判断一个数是质数的几种方法</a> EmmaZhao <a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>质数也叫素数，是只能被1和它本身整除的正整数，最小的质数是2，目前发现的最大的质数是p=2^57885161-1【注1】。判断一个数是质数的最简单的方法如下： def isPrime1(n): for i in range(2, n): if n % i == 0: return False return True 但是在上面的方法中有一些冗余的计算，所以</div> </li> <li><a href="/article/2992.htm" title="SpringSecurity工作原理小解读" target="_blank">SpringSecurity工作原理小解读</a> 坏我一锅粥 <a class="tag" taget="_blank" href="/search/SpringSecurity/1.htm">SpringSecurity</a> <div> SecurityContextPersistenceFilter ConcurrentSessionFilter WebAsyncManagerIntegrationFilter HeaderWriterFilter CsrfFilter LogoutFilter Use</div> </li> <li><a href="/article/3119.htm" title="JS实现自适应宽度的Tag切换" target="_blank">JS实现自适应宽度的Tag切换</a> ini <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>效果体验：http://hovertree.com/texiao/js/3.htm 该效果使用纯JavaScript代码，实现TAB页切换效果，TAB标签根据内容自适应宽度，点击TAB标签切换内容页。 HTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"</div> </li> <li><a href="/article/3246.htm" title="Hbase Rest API : 数据查询" target="_blank">Hbase Rest API : 数据查询</a> kane_xie <a class="tag" taget="_blank" href="/search/REST/1.htm">REST</a><a class="tag" taget="_blank" href="/search/hbase/1.htm">hbase</a> <div>hbase（hadoop）是用java编写的，有些语言（例如python）能够对它提供良好的支持，但也有很多语言使用起来并不是那么方便，比如c#只能通过thrift访问。Rest就能很好的解决这个问题。Hbase的org.apache.hadoop.hbase.rest包提供了rest接口，它内嵌了jetty作为servlet容器。启动命令：./bin/hbase rest s</div> </li> <li><a href="/article/3373.htm" title="JQuery实现鼠标拖动元素移动位置（源码+注释）" target="_blank">JQuery实现鼠标拖动元素移动位置（源码+注释）</a> 明子健 <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81/1.htm">源码</a><a class="tag" taget="_blank" href="/search/%E6%8B%96%E5%8A%A8/1.htm">拖动</a><a class="tag" taget="_blank" href="/search/%E9%BC%A0%E6%A0%87/1.htm">鼠标</a> <div>欢迎讨论指正！ print.html代码： <!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <title>发票打印</title> &l</div> </li> <li><a href="/article/3500.htm" title="Postgresql 连表更新字段语法 update" target="_blank">Postgresql 连表更新字段语法 update</a> qifeifei <a class="tag" taget="_blank" href="/search/PostgreSQL/1.htm">PostgreSQL</a> <div>下面这段sql本来目的是想更新条件下的数据，可是这段sql却更新了整个表的数据。sql如下： UPDATE tops_visa.visa_order SET op_audit_abort_pass_date = now() FROM tops_visa.visa_order as t1 INNER JOIN tops_visa.visa_visitor as t2 ON t1. </div> </li> <li><a href="/article/3627.htm" title="将redis,memcache结合使用的方案?" target="_blank">将redis,memcache结合使用的方案?</a> tcrct <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a> <div>公司架构上使用了阿里云的服务，由于阿里的kvstore收费相当高，打算自建，自建后就需要自己维护，所以就有了一个想法，针对kvstore(redis)及ocs(memcache)的特点，想自己开发一个cache层，将需要用到list，set，map等redis方法的继续使用redis来完成，将整条记录放在memcache下，即findbyid，save等时就memcache，其它就对应使用redi</div> </li> <li><a href="/article/3754.htm" title="开发中遇到的诡异的bug" target="_blank">开发中遇到的诡异的bug</a> wudixiaotie <a class="tag" taget="_blank" href="/search/bug/1.htm">bug</a> <div>今天我们服务器组遇到个问题：我们的服务是从Kafka里面取出数据，然后把offset存储到ssdb中，每个topic和partition都对应ssdb中不同的key，服务启动之后，每次kafka数据更新我们这边收到消息，然后存储之后就发现ssdb的值偶尔是-2,这就奇怪了，最开始我们是在代码中打印存储的日志，发现没什么问题，后来去查看ssdb的日志，才发现里面每次set的时候都会对同一个key</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>

2.HTML水平线

3.HTML 注释

【Web前端】HTML/CSS一文详解

文章目录

HTML篇

一.HTML简介

1.什么是HTML？

2.HTML 标签

3.HTML 元素

4.HTML版本

5.Web 浏览器

6.HTML 网页结构

7.中文编码

8.编写第一个网页

二.HTML编辑器

三.HTML基础

1.HTML 标题

`-`
标签来定义的。

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

2.HTML 段落

HTML 段落是通过标签
来定义的。

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

标签来定义的。

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

2.HTML 段落

3.HTML 链接

4.HTML 图像

四.HTML元素

1.HTML 元素语法

2.嵌套的 HTML 元素

3.HTML 空元素

五.HTML属性

六.HTML标题

1.HTML标题

七.HTML段落

1.HTML段落

2.HTML换行

八.HTML文本格式化

九.HTML链接

十.HTML头部

【Web前端】HTML/CSS一文详解

文章目录

HTML篇

一.HTML简介

1.什么是HTML？

2.HTML 标签

3.HTML 元素

4.HTML版本

5.Web 浏览器

6.HTML 网页结构

7.中文编码

8.编写第一个网页

二.HTML编辑器

三.HTML基础

1.HTML 标题

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

标签来定义的。 <h1>一级标题h1> <h2>二级标题h2> <h3>三级标题h3>

2.HTML 段落

3.HTML 链接

4.HTML 图像

四.HTML元素

1.HTML 元素语法

2.嵌套的 HTML 元素

3.HTML 空元素

五.HTML属性

六.HTML标题

1.HTML标题

- 标签进行定义的。七.HTML段落

标签进行定义的。

定义最大的标题。

2.HTML水平线

3.HTML 注释

七.HTML段落

1.HTML段落

2.HTML换行

八.HTML文本格式化

九.HTML链接

十.HTML头部

`-`
标签来定义的。

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

2.HTML 段落

HTML 段落是通过标签
来定义的。

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

标签来定义的。

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