zy_lalala

html基础整理

1. HTML 简介

1- 什么是HTML？

HTML 是用来描述网页的一种语言。HTML 不是一种编程语言，而是一种标记语言。

HTML 指的是超文本标记语言: HyperText Markup Language

超文本：
- 可以处理文本数据，也可以处理图片，视频，音频数据——超越文本限制
- 可以从一个文件跳转到另一个文件，与世界各地主机的文件连接——超级链接文本
标记——html规定好的用来描述具体内容的元素

2- HTML网页结构

（1）声明

声明有助于浏览器中正确显示网页,用来告知 Web 浏览器页面使用了哪种 HTML 版本，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

表示当前html文件使用的是html5的版本规范。

doctype 声明是不区分大小写的，以下方式均可：

DOCTYPE html>
DOCTYPE HTML>
doctype html>
Doctype Html>

（2） html组成

DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>wangxingtitle>
head>
<body>
	<h1>我的第一个标题h1>
	<p>我的第一个段落。p>
body>
html>

head----html文件的头部

head标记中定义的内容是给浏览器提供的附加信息，告诉浏览器当前html文件应该如何执行。

元素包含了所有的头部标签元素,在元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: </code>, <code><style></code>, <code><meta></code>, <code><link></code>, <code><script></code>, <code><noscript></code> 和 <code><base></code>。 <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <html> <head> <meta charset="utf-8"> <title>HTML head 元素中的子元素</title>  <base href="https://www.baidu.com/"/> <link rel="stylesheet" href="mytest.css" />  <link rel="shortcut icon" href="favicon.ico" /> <style> p { font-size: 30px; } </style>   <script src="mytest.js"></script> </head> <body> </body> </html> </code></pre> <h6>1. title标签</h6> 定义文档的标题；当网页添加到收藏夹时，显示在收藏夹中的标题；显示在搜索引擎结果页面的标题。 <h6>2. base标签</h6> 设置当前页面中所有链接的基础访问地址。 <h6>3. link标签</h6> 定义文档与外部资源之间的关系，通常用于导入外部css样式文件，以及引入网站图标。 <h6>4. style标签</h6> 定义HTML文档的样式文件引用地址，设置当前网页中css样式。 <h6>5. script标签</h6> 用于加载脚本文件，如： JavaScript <h6>6. meta标签</h6> 提供关于HTML文档的元数据，meta 元素通常被用于指定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。 属性： <ol> <li> charset 字符集 <pre><code><meta charset="UTF-8" </code></pre> 字符集(Character set)是多个字符的集合。计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。 utf-8是目前最常用的字符集编码方式，UTF-8基本包含全世界所有国家需要用到的字符。 常用的字符集编码方式还有：gb2312 简单中文包括6763个汉字 GUO BIAO；GBK包含全部中文字符。 </li> <li> content: 定义与 http-equiv 或 name 属性相关的元信息。 </li> <li> http-equiv：把 content 属性关联到 HTTP 头部。 </li> <li> name: 把 content 属性关联到一个名称。 </li> </ol> <pre><code class="prism language-html"> <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">  <meta name="description" content="Free Web tutorials on HTML and CSS">  <meta name="author" content="zhangsan">  <meta http-equiv="refresh" content="30"> </code></pre> <h5></h5> <h5>body----html文件的身体</h5> <ul> <li>显示当前html网页的具体内容</li> </ul> head标记用户不可见，body标记用户可见【不看脸，看身体】 <h1>2. HTML编辑器</h1> 我们可以使用记事本来编辑HTML，也可以使用专业的HTML 编辑器来编辑HTML。 <h2>1- 记事本来编辑HTML</h2> <ol> <li>新建记事本文件</li> <li>打开记事本文件，键入html代码</li> <li>保存记事本文件，修改文件的后缀名为.html</li> <li>双击HTML文件在浏览器上运行。</li> </ol> <h2>2- 专业的HTML编辑器</h2> <ul> <li>Notepad++：http://www.html.cn/tool/edit/2.html</li> <li>Sublime Text：http://www.html.cn/tool/edit/6.html</li> <li>WebStorm: https://www.html.cn/tool/edit/8.html</li> <li>HBuilderX: https://www.dcloud.io/hbuilderx.html</li> <li>VS Code：https://code.visualstudio.com/</li> </ul> <h1>3. Web浏览器</h1> Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示，是html网页的运行环境。 <h2>浏览器内核</h2> 浏览器的种类很多，但是主流的内核只有四种，各种不同的浏览器，就是在主流内核的基础上，添加不同的功能构成。同一个网页在不同内核的浏览器上可能会呈现出不同的效果。 <table> <thead> <tr> <th align="center">内核</th> <th align="left">浏览器</th> <th align="left">备注</th> </tr> </thead> <tbody> <tr> <td align="center">Trident</td> <td align="left">IE</td> <td align="left">是微软开发的一种排版引擎，使用 Trident 渲染引擎的浏览器有：IE、腾讯 TT、百度浏览器等</td> </tr> <tr> <td align="center">Gecko</td> <td align="left">firefox</td> <td align="left">Gecko是一套开放源代码的、以C++编写的网页排版引擎</td> </tr> <tr> <td align="center">webkit</td> <td align="left">Safari</td> <td align="left">WebKit 是一个开源项目，包含了来自 KDE 项目和苹果公司的一些组件，主要用于 Mac OS 系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。</td> </tr> <tr> <td align="center">Chromium/Blink</td> <td align="left">chrome</td> <td align="left">在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发</td> </tr> <tr> <td align="center">blink</td> <td align="left">Opera</td> <td align="left">Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核</td> </tr> </tbody> </table> <h1>4. HTML 标签</h1> HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 <ul> <li> HTML 标签是由尖括号包围的关键词，比如<code><html></code> </li> <li> HTML 标签通常是成对出现的，比如 <code></code> 和 <code></code> </li> <li> 标签对中的第一个标签是开始标签，第二个标签是结束标签 </li> <li> 开始和结束标签也被称为开放标签和闭合标签。 </li> </ul> <h2>1- 标题<code><h1-h6></code></h2> 标题（Heading）是通过 <code><h1></code> - <code><h6></code>标签进行定义的。 <pre><code class="prism language-html"><h1>第一标题</h1> <h2>第二标题</h2> <h3>第三标题</h3> <h4>第四标题</h4> <h5>第五标题</h5> <h6>第六标题</h6> </code></pre> <ul> <li>浏览器会自动地在标题的前后添加空行。</li> <li>标题标签语义：作为标题使用，并且重要性递减</li> <li>网页中的h1比较重要的标签，有助于搜索引擎的搜索，影响到搜索引擎的排名</li> <li>一个页面只能有一个h1标签，表示网页中的主要描述内容， h1-h6中程度依次降低。</li> </ul> <h2>2- 段落<code></code></h2> <pre><code class="prism language-html"><p> 文本内容 </p> </code></pre> <ul> <li>HTML 可以将文档分割为若干段落。</li> <li>浏览器会自动地在段落的前后添加空行（是块级元素）</li> </ul> <h2>3- 水平线<code><hr/></code></h2> <code><hr/></code>标签在 HTML 页面中创建水平线,是一个单标签 <table> <thead> <tr> <th>属性</th> <th>表示</th> </tr> </thead> <tbody> <tr> <td>width</td> <td>设置水平线长短</td> </tr> <tr> <td>color</td> <td>设置水平线颜色</td> </tr> <tr> <td>size</td> <td>设置水平线粗细</td> </tr> <tr> <td>align</td> <td>设置水平线水平对齐方式</td> </tr> </tbody> </table> <pre><code class="prism language-html"><hr/> <hr width="200px" color="black" size="10" align="right"/> </code></pre> <h2>4- 换行<code> </code></h2> 单词缩写： break 打断 ,换行 在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签 <pre><code class="prism language-html"><br/> </code></pre> <h2>5- 注释<code></code></h2> 可以将注释插入 HTML 代码中，用于解释说名代码的含义和作用，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。 <pre><code class="prism language-html"> </code></pre> <h2>6- 格式化文本标签</h2> 在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。 <table> <thead> <tr> <th>标签</th> <th>显示效果</th> </tr> </thead> <tbody> <tr> <td><code></code> <code></code></td> <td>文字以粗体方式显示（推荐使用strong）</td> </tr> <tr> <td><code></code> <code></code></td> <td>文字以斜体方式显示（推荐使用em）</td> </tr> <tr> <td><code><s></s></code> <code><del></del></code></td> <td>文字以加删除线方式显示（推荐使用del）</td> </tr> <tr> <td><code></code> <code><ins></ins></code></td> <td>文字以加下划线方式显示</td> </tr> </tbody> </table> 区别： b只是加粗，strong 除了可以加粗还有强调的意思，语义更强烈。其他同理。 <table> <thead> <tr> <th>标签</th> <th>显示效果</th> <th>用途</th> </tr> </thead> <tbody> <tr> <td><code></code></td> <td>文字显示会比父元素小</td> <td>细则类的内容：合同中小字，网页中版权的声明</td> </tr> <tr> <td><code><ins></code></td> <td><ins>定义下划线</ins></td> <td></td> </tr> <tr> <td><code><del></code></td> <td><del>定义删除线【贯穿线】</del></td> <td></td> </tr> <tr> <td><code></code></td> <td>22</td> <td>表示上标</td> </tr> <tr> <td><code></code></td> <td>H2O</td> <td>表示下标</td> </tr> </tbody> </table> <h2>7- 图像<code><img></code></h2> <ul> <li> <code><img/></code>是单闭合标签 </li> <li> 描述：使用<code><img></code>标签向网页中引入一个外部图片 </li> </ul> 语法：该语法中src属性用于指定图像文件的路径和文件名，它是img标签的必需属性。 <pre><code class="prism language-html"><img src="图像URL路径" /> </code></pre> <h3>（1）常见图像格式</h3> <ol> <li>JPG：各浏览器均支持JPEG格式，文件尺寸较小，下载速度快</li> <li>GIF：特点是其在一个GIF文件中可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅独处并显示到屏幕上，就可构成一种最简单的动画</li> <li>PNG：是目前保证最不失真的格式，它汲取了GIF和JPG两者的优点，存储形式丰富，兼有GIF和JPG的色彩模式</li> <li>PSD：可以存储Photoshop中所有的图层，通道、参考线、注解和颜色模式等信息</li> </ol> <h3>（2）路径</h3> <h4>1. 绝对路径</h4> 从操作系统的指定盘中的目录中开始查找图片资源所形成的路径[不推荐] <pre><code class="prism language-html"><img src="F:\20210810\20210811HTML(2)\code\imgs\avatar.png" /> </code></pre> <ul> <li>绝对路径缺点： <ul> <li>如果图片保存目录太深，图片的操作路径就会很长。</li> <li>当我们将网页\保存图片的文件夹移动之后，这个图片的路径就变化。图片无法正常显示。</li> </ul> </li> </ul> <h4>2. 相对路径</h4> 以当前网页为参照中心，对外开始查找图片资源所形成的路径。[推荐] <ul> <li> 图片与当前网页在同一个目录下【src=”图片名称”】 <pre><code class="prism language-html"><img src="avatar3.png" /> </code></pre> </li> <li> 图片保存在当前网页所在目录的子文件夹中【src=”子文件夹的名称/图片名称”】 <pre><code class="prism language-html"><img src="imgs/avatar2.png" /> </code></pre> </li> <li> 图片保存在当前网页所在目录的父文件夹中【…/上一层】 <pre><code class="prism language-html"><img src="../testimg/avatar04.png" /> </code></pre> </li> </ul> <h4>3. 网络路径</h4> 网络路径就是一个url的网络地址。 <pre><code class="prism language-html"> <img src="https://img1.baidu.com/it/u=2681504758,1624692466&fm=26&fmt=auto&gp=0.jpg"/> </code></pre> <h3>（3）属性</h3> <pre><code class="prism language-html"><img src="../testimg/avatar06.png" alt="头像图片" width="200px" height="200px"/> </code></pre> <table> <thead> <tr> <th>属性</th> <th>属性值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>src</td> <td>URL</td> <td>图片的路径，就是图片的位置</td> </tr> <tr> <td>alt</td> <td>文本</td> <td>图片不能显示时的替代文本</td> </tr> <tr> <td>title</td> <td>文本</td> <td>鼠标悬停在图片上时的提示信息</td> </tr> <tr> <td>width</td> <td>像素</td> <td>设置图片的宽</td> </tr> <tr> <td>height</td> <td>像素</td> <td>设置图片的高</td> </tr> <tr> <td>border</td> <td>数字</td> <td>设置图像边框的宽度（主要通过css设置）</td> </tr> </tbody> </table> <h2>8- 超链接<code><a></code></h2> HTML使用标签<code><a></code>来设置超文本链接。 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。 当鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。 链接的默认样式如下（可通过CSS设置修改这些默认样式）： <ul> <li>未访问过的链接——蓝色字体，带有下划线；</li> <li>点击链接时——红色字体，带有下划线；</li> <li>访问过的链接——紫色字体，带有下划线。</li> </ul> 语法格式： <pre><code class="prism language-html"><a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a> </code></pre> <h3>（1）超链接的作用</h3> <ol> <li>跳转到新的文档</li> <li>跳转到当前网页中的某个部分（锚点定位）</li> </ol> <h3>（2）属性</h3> <ul> <li>href 属性：指定链接目标的url地址</li> </ul> <ol> <li>绝对路径</li> </ol> <pre><code class="prism language-html"><a href="E:\wangxing\20210812\code\test1.html">跳转至test1</a> </code></pre> <ol start="2"> <li>相对路径</li> </ol> <pre><code class="prism language-html"><a href="test2.html">跳转至test2</a> </code></pre> <ol start="3"> <li>网络地址</li> </ol> 注意：网络链接需要添加http:// www.baidu.com/ <pre><code class="prism language-html"><a href="http://www.baidu.com/">点击这里打开百度</a> </code></pre> <ul> <li>target属性：指定链接页面的打开方式</li> </ul> <ol> <li><code>_self</code>——默认值，在当前窗口中显示资源</li> <li><code>_blank</code>——在新窗口中显示资源</li> </ol> <pre><code class="prism language-html"><a href="test2.html">在当前窗口中打开test2</a> <a href="test2.html" target="blank">在新页面打开test2</a> </code></pre> <h3>（3）锚点定位</h3> 通过创建锚点链接，用户能够快速定位到目标内容。 创建锚点链接分为两步： <pre><code class="prism language-html">1. 给目标处的标签设置id属性 <h3 id="two">跳转到这里</h3> 2. 给点击的超链接设置href属性值为："#id名" <a href="#two">点这里</a> </code></pre> <h2>9- 表格 <code><table></code></h2> <code><table></code> 标签定义表格； <code><tr></code>标签定义表格中的行，<code><th></code>标签定义表头单元格（替换td位置）； <code><td></code>标签定义表格中的单元格，字母 td 指表格数据（table data），数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 还可根据表格结构加上thead、tbody、tfoot标签。 <ul> <li><code><thead></code>：用于定义表格的头部。用来放标题之类的东西。</li> <li><code><tbody></code>：用于定义表格的主体。放数据本体。</li> <li><code><tfoot></code>：放表格的脚注之类。</li> </ul> <pre><code class="prism language-html"> <table align="center" border="1" cellpadding="0" cellspacing="0"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>男</td> <td>25</td> </tr> <tr> <td>李四</td> <td>男</td> <td>28</td> </tr> </tbody> </table>表格属性 </code></pre> <h3>(1) 表格属性</h3> <ul> <li>border：边框</li> <li>cellspacing：单元格与单元格边框之间的空白间距</li> <li>cellpadding：单元格内容与单元格边框之间的空白间距</li> <li>width：表格宽度</li> <li>height：表格高度</li> <li>align：表格在网页中的水平对齐方式</li> </ul> 我们经常有个说法，是三参为0，平时开发的我们这三个参数 border cellpadding cellspacing 为 0 <h3>(2) 合并单元格</h3> <ul> <li> 跨行合并：rowspan 单元格的上下合并 rowspan=“合并单元格的个数” <pre><code class="prism language-html"> <table align="center" border="1" cellpadding="0" cellspacing="0" width="300" height="100"> <tr> <th>城市</th> <th>区域</th> <th>人数</th> </tr> <tr> <th>上海</th> <td>浦东新区</td> <td>504万</td> </tr> <tr> <th rowspan="2">西安</th> <td>雁塔区</td> <td>139万</td> </tr> <tr> <td>碑林区</td> <td>69万</td> </tr> </table> </code></pre> 显示结果如图： <a href="http://img.e-com-net.com/image/info8/ff6a0402361747ba90411803584d1150.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ff6a0402361747ba90411803584d1150.jpg" alt="html基础整理_第1张图片" width="384" height="133" style="border:1px solid black;"></a> </li> <li> 跨列合并：colspan 单元格的左右合并 colspan=“合并单元格的个数” </li> </ul> <pre><code class="prism language-html"> <table align="center" border="1" cellpadding="0" cellspacing="0" width="300"> <tr> <th>城市</th> <th colspan="3">区域</th> </tr> <tr> <th>西安</th> <td>雁塔区</td> <td>碑林区</td> <td>未央区</td> </tr> <tr> <th>上海</th> <td>黄埔区</td> <td>徐汇区</td> <td>浦东新区</td> </tr> </table> </code></pre> 显示结果如图： <a href="http://img.e-com-net.com/image/info8/57129e80d9ae4eac8adc6b8482757f0b.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/57129e80d9ae4eac8adc6b8482757f0b.png" alt="在这里插入图片描述" width="384" height="95"></a> <h2>10- 列表</h2> <ul> <li>概念：容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表。</li> <li>特点：列表最大的特点就是整齐、整洁、有序，跟表格类似，但是他可组合自由度会更高。</li> <li>HTML 支持有序、无序和自定义列表。</li> </ul> <h3>（1）有序列表<code><ol></code></h3> <ul> <li>有顺序</li> <li>每个<code><li></code>标签独占一行（块元素）</li> <li>默认<code><li></code>标签项前面有顺序标记</li> <li>一般用于排序类型的列表，如试卷、问卷选项等</li> </ul> <pre><code class="prism language-html"><ol type="a" start="1"> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ol> </code></pre> type属性——列表的类型 <ul> <li> 1 表示数字编号（默认） </li> <li> a 表示小写英文字母编号 </li> <li> A 表示大写英文字母编号 </li> <li> i 表示小写罗马数字编号 </li> <li> I 表示大写罗马数字编号 </li> </ul> start属性——列表编号的起始值。 <h3>（2）无序列表<code><ul></code></h3> <ul> <li>无序列表的各个列表项之间没有顺序级别之分，是并列的。</li> <li>每个<code><li></code>标签独占一行（块元素）</li> <li>默认<code><li></code>标签项前面有个实心小圆点</li> <li>一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等</li> </ul> <pre><code class="prism language-html"><ul type="circle"> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> </code></pre> type属性——列表的类型 <ul> <li>disc——默认值，实心小圆点</li> <li>circle——空心圆圈</li> <li>square——实心小方块</li> </ul> 通过css设置语法：style=“list-style-type:disc/circle/square” <h3>（3）自定义列表</h3> <ul> <li>没有顺序，每个<code><dt></code>标签、<code><dd></code>标签独占一行（块元素）</li> <li>定义列表常用于对术语或名词进行解释和描述</li> <li>定义列表的列表项前没有任何项目符号</li> <li>一般用于一个标题下有一个或多个列表项的情况</li> </ul> <pre><code class="prism language-html"><dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> ... <dt>名词2</dt> <dd>名词2解释1</dd> <dd>名词2解释2</dd> </dl> </code></pre> <h2>11- iframe框架</h2> <code><iframe></code>表示一个内联框架，它能够在当前的html页面中开辟出一块空间单独显示一个html文件。 属性： <ul> <li> src——需要显示的html文件的URL路径 </li> <li> height——设置框架的宽度 </li> <li> width——设置框架的高度 </li> <li> frameborder——设置是否显示框架的边框，显示：yes/1、不显示：no/0 </li> <li> name——设置当前框架的名称，提供给超链接的target属性，达到联动效果 （让a链接的target属性值==iframe的name属性值） </li> </ul> <pre><code class="prism language-html"><ul> <li><a href="test1.html" target="frame">文本标签</a></li> <li><a href="test2.html" target="frame">超链接</a></li> <li><a href="test3.html" target="frame">列表</a></li> </ul> <div> <iframe src="" frameborder="0" name="frame" width="1000px" height="800px"></iframe> </div> </code></pre> <h2>12- HTML元素分类</h2> 按照元素显示模式分类，html元素一般分为 块级元素 和 行内元素 两种类型。 <h3>（1）块级元素block-level</h3> 常见的块元素有div、h1-h6、p、ul、ol、li等 其中div标签是最典型的块元素。 div元素没有特定的含义，它与css一起使用，可以用来制作网页的布局，代替table进行页面布局。 块元素的特点： <ul> <li>比较霸道，自己独占一行。</li> <li>高度、宽度、外边距、内边距都可以控制。</li> <li>宽度默认是容器（父级宽度）的100%。</li> <li>是一个容器级盒子，里面可以放行内元素或者块级元素。</li> </ul> <pre><code class="prism language-html"><body> <div style="width: 200px; height: 200px; background-color: pink;"> <h3>这是一个标题</h3> <p>段落</p> <a href="#">超链接</a> <img src="../cat.jpeg" style="width: 100px; height: 100px;"> </div> <div> <p>这是另一个div</p> </div> </body> </code></pre> 显示结果为： <a href="http://img.e-com-net.com/image/info8/7b03b2fc50d24123a9ed19c837a9b13c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7b03b2fc50d24123a9ed19c837a9b13c.jpg" alt="html基础整理_第2张图片" width="272" height="313" style="border:1px solid black;"></a> <h3>（2）行内元素inline-level</h3> 行内元素也称为内联元素 常见的行内元素有a、strong、b、em、i、del、s、ins、u、span等 其中span标签是最典型的行内元素，span标签与CSS一起使用可以改变某一段文本中的指定文字的样式。 行内元素的特点： <ul> <li>相邻行内元素在一行上，一行可以显示多个</li> <li>高、宽直接设置是无效的</li> <li>默认宽度就是他本身内容的宽度</li> <li>行内元素只能容纳文本或其他行内元素。</li> </ul> <pre><code class="prism language-html"><body> <span>我是span1号，一行放多个</span> <span>我是span2号</span> <div>我是div，我独占一行</div> <span>我是span3号</span> <i>我是i标签</i> <strong>我是<span style="background-color: yellow; color: red; font-size: 20px;">中国人</span>，我骄傲！</strong> <a>我是超链接</a> </body> </code></pre> 显示结果为： <a href="http://img.e-com-net.com/image/info8/7ab8d7c55ced434bba53efdebb759d63.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/7ab8d7c55ced434bba53efdebb759d63.png" alt="html基础整理_第3张图片" width="578" height="101" style="border:1px solid black;"></a> <h3>（3）行内块元素inline-block</h3> 在行内元素中有几个特殊的标签——img、input、td，他们同时具有块元素和行内元素的特点，有些资料称之为行内块元素。 行内块元素的特点： <ul> <li>和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）。</li> <li>默认宽度就是它本身内容的宽度（行内元素特点）</li> <li>高度、宽度、外边距、内边距都可以控制（块级元素特点）</li> </ul> <pre><code class="prism language-html"><div style="width: 400px; height: 150px; background-color: pink"> <img src="../cat.jpeg" width="100px"> <img src="../../project/20210812-table/pic.jpg" width="100px"> 用户名：<input type="text" style="width: 100px;"> 密码：<input type="password"> </div> </code></pre> 显示结果为： <a href="http://img.e-com-net.com/image/info8/fe0424e4f9de4bcfb978542965e622bd.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fe0424e4f9de4bcfb978542965e622bd.jpg" alt="html基础整理_第4张图片" width="525" height="215" style="border:1px solid black;"></a> <h2>13- 字符实体</h2> HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，需要在 HTML 源代码中使用字符实体。 他们不是标签，而是符号。 虽然 html 不区分大小写，但实体字符对大小写敏感。 常见的字符实体： <table> <thead> <tr> <th>描述</th> <th>显示结果</th> <th>实体名称</th> </tr> </thead> <tbody> <tr> <td>空格符</td> <td></td> <td><code> </code></td> </tr> <tr> <td>小于号</td> <td><</td> <td><code><</code></td> </tr> <tr> <td>大于号</td> <td>></td> <td><code>></code></td> </tr> <tr> <td>和号</td> <td>&</td> <td><code>&</code></td> </tr> <tr> <td>引号</td> <td>"</td> <td><code>"</code></td> </tr> <tr> <td>撇号</td> <td>’</td> <td><code>'</code>(IE不支持)</td> </tr> <tr> <td>人民币</td> <td>￥</td> <td><code>¥</code></td> </tr> <tr> <td>镑</td> <td>£</td> <td><code>£</code></td> </tr> <tr> <td>欧元</td> <td>€</td> <td><code>€</code></td> </tr> <tr> <td>版权</td> <td>©</td> <td><code>©</code></td> </tr> <tr> <td>注册商标</td> <td>®</td> <td><code>®</code></td> </tr> <tr> <td>摄氏度</td> <td>°</td> <td><code>°</code></td> </tr> <tr> <td>正负号</td> <td>±</td> <td><code>±</code></td> </tr> <tr> <td>乘号</td> <td>×</td> <td><code>×</code></td> </tr> <tr> <td>除号</td> <td>÷</td> <td><code>÷</code></td> </tr> <tr> <td>平方2</td> <td>²</td> <td><code>²</code></td> </tr> <tr> <td>立方3</td> <td>³</td> <td><code>³</code></td> </tr> </tbody> </table> <h2>14- 表单</h2> 在HTML中，一个完整的表单通常由表单域、表单元素和提示信息3个部分构成。 表单域是一个包含表单元素的区域。 表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。通常出现在表单中，也可结合js单独出现，即不一定必须要出现在表单中。 提示信息是一个表单中一些说明性的文字，提示用户进行填写和操作。 <h3>（1）<code><form></code>表单域</h3> <ul> <li>收集的用户信息怎么传递给服务器？——通过form表单域。</li> <li>目的：在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。</li> </ul> <h4>form元素常用属性</h4> <ul> <li> name——设置表单的名称，以区分同一个页面中的多个表单。 </li> <li> action——设置后端处理程序的访问地址，属性值为url地址； </li> <li> method——设置表单的提交方式，属性值为get / post <ol> <li> get方式：将采集的信息数据跟随在后端处理程序的访问地址之后。数据量限制–255个字符。 </li> <li> post方式：将采集的信息数据封装到网络协议中发送给后端处理程序。没有数据量限制。 </li> </ol> </li> <li> enctype——规定在将表单数据发送到后台处理程序之前如何对其进行编码，属性值有3种： <ol> <li> application/x-www-form-urlencoded：默认值在发送前对所有字符进行编码（将空格转换为 “+” 符号，特殊字符转换为 ASCII HEX 值）。 </li> <li> multipart/form-data：不对字符进行编码。当使用有文件上传控件的表单时，该值是必需的。（如果使用表单实现文件上传，那么method属性一定post，enctype属性值一定是multipart/form-data。） </li> <li> text/plain：将空格转换为 “+” 符号，但不编码特殊字符。 </li> </ol> </li> <li> target——规定提交表单后在何处显示响应 <ol> <li> _blank：新窗口 </li> <li> _self：当前窗口 </li> <li> _parent：父框架 </li> <li> framename：响应显示在命名的 iframe中 </li> </ol> </li> </ul> <pre><code class="prism language-html"><body> <form action="login" name="student" method="GET" enctype="multipart/form-data" target="_parent"> <label for="name">学生姓名：</label> <input type="text" id="name" name="name"><br> <span>性别：</span> <input type="radio" name="sex" value="man" id="man"><label for="man">男</label> <input type="radio" name="sex" value="woman" id="woman" checked="checked"><label for="woman">女</label><br> <input type="submit" value="提交"> </form> </body> </code></pre> 显示效果为： <a href="http://img.e-com-net.com/image/info8/b7cb1e015d6c45ce928273d9b5f74374.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/b7cb1e015d6c45ce928273d9b5f74374.png" alt="在这里插入图片描述" width="350" height="93"></a> 提交后网址处显示： <a href="http://img.e-com-net.com/image/info8/dd46271ef3b0418ba5c6fae8e2ae8487.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/dd46271ef3b0418ba5c6fae8e2ae8487.png" alt="在这里插入图片描述" width="743" height="49"></a> <h3>（2）表单元素</h3> 表单元素可分为2大类——1.input类型 2.非input类型 <h4>① input类型</h4> input标签常见属性： <h5>a. type 属性</h5> 通过改变type属性值，可以决定属于哪种input表单。 type = “text” ——文本框，可以做用户名、昵称等。 type = “password” ——密码框，用户输入的内容是不可见的。 type = “radio” ——单选按钮，有多个单选按钮时，为了保证每次只能选一个，要求name属性值要相同。 type = “checkbox” ——复选框，有多个复选框时，要求name属性值要相同。 type = “date” ——日期框，可勾选-年-月-日。 type = “time” ——时间框，可勾选-时-分-秒。 type = “datetime” ——日期时间框，可勾选-年-月-日-时-分-秒。 type = “color” ——颜色框，可勾选颜色 type = “tel” ——电话，在提交时会校验电话号码的格式是否正确。 type = “email” ——邮箱，在提交时会校验邮箱地址的格式是否正确。 type = “url” ——网址，在提交时会校验网址格式是否正确。 type = “file” ——文件域，可勾选本地文件进行上传。 type = “hidden” ——隐藏域，向后端处理程序提交对用户不可以见的数据 type = “submit” ——表单提交按钮，可以将form标签内部收集到表单元素数据提交给服务器，且form标签内元素恢复至起始状态。 type = “reset” ——表单重置按钮，可将form标签内部的全部表单元素恢复至起始的状态。 type = “button” ——普通按钮 <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> <style> div { height: 30px; } span { display: inline-block; width: 120px; text-align: right; } </style> </head> <body> <form action="test" method="GET"> <div><span>姓名：</span><input type="text" name="username" placeholder="请输入您的姓名"></div> <div><span>密码：</span><input type="password" name="psd" placeholder="请输入密码"></div> <div> <span>性别：</span> <input type="radio" name="sex" value="man" checked>男 <input type="radio" name="sex" value="woman">女 </div> <div> <span>爱好：</span> <input type="checkbox" name="hobby" value="movie">看电影 <input type="checkbox" name="hobby" value="music">听歌 <input type="checkbox" name="hobby" value="book">读书 </div> <div><span>出生年月日：</span><input type="date" name="borth"></div> <div><span>当前时间：</span><input type="time" name="nowtime"></div> <div><span>最喜欢的颜色：</span><input type="color" name="likecolor"></div> <div><span>电话号码：</span><input type="tel" name="phonenumber"></div> <div><span>邮箱：</span><input type="email" name="email"></div> <div><span>个人网址：</span><input type="url" name="url"></div> <div><span>上传作业：</span><input type="file" name="work"></div> <div><span>隐藏域：</span><input type="hidden" name="myhedden" value="这里的信息用户不可见"></div> <div> <input type="button" value="普通按钮"> <input type="reset" value="重置按钮"> <input type="submit" value="提交"> </div> </form> </body> </html> </code></pre> 显示效果如下： <a href="http://img.e-com-net.com/image/info8/bf00372f99ac493f8e01abf946dfb848.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/bf00372f99ac493f8e01abf946dfb848.jpg" alt="html基础整理_第5张图片" width="404" height="500" style="border:1px solid black;"></a> <h5>b. value属性</h5> 默认的文本值，有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置 <pre><code class="prism language-html">用户名:<input type="text" name="username" value="请输入用户名"> </code></pre> 按钮类型的value属性值是显示在按钮上的字。 <pre><code class="prism language-html"><input type="button" value="普通按钮"> <input type="reset" value="重置"> <input type="submit" value="提交"> </code></pre> <h5>c. name属性</h5> 表单的名字，这样，后台可以通过这个name属性找到这个表单。页面中的表单很多，name主要作用就是用于区别不同的表单。 name属性后面的值，是我们自己定义的。 radio如果是一组，我们必须给他们命名相同的名字 name ，这样就可以多个选其中的一个。 <pre><code class="prism language-html"><input type="radio" name="sex" />男 <input type="radio" name="sex" />女 </code></pre> <h5>d. checked属性</h5> 表示默认选中状态。较常见于单选按钮和复选按钮。 <pre><code class="prism language-html"> 性别: <input type="radio" name="sex" value="man" checked="checked" />男 <input type="radio" name="sex" value="woman" />女 </code></pre> <h5>e. 只读readonly</h5> <h5>f. 占位符placeholder</h5> <ul> <li>input类型的文本框提供一种提示（hint）</li> <li>可以描述文本框期待用户输入何种内容</li> <li>提示语默认显示，当文本框中输入内容时提示语消失</li> <li>适合于input标签：text、search、url、email和password等类型</li> </ul> <h4>② 非input类型</h4> <h5>a. 下拉菜单 select</h5> option——表示下拉列表中的每一项 包含在option中的内容是给用户查看的 option中的value属性是提交给后端处理程序的具体值 <pre><code class="prism language-html">最喜欢的城市： <select name="city" id=""> <option value="choice">请选择</option> <option value="bj">北京</option> <option value="sh">上海</option> <option value="xa">西安</option> </select> </code></pre> 显示效果为： <a href="http://img.e-com-net.com/image/info8/624c6cdfd4b742d4bb5a8bf71dcf39a5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/624c6cdfd4b742d4bb5a8bf71dcf39a5.jpg" alt="html基础整理_第6张图片" width="259" height="154" style="border:1px solid black;"></a> <h5>b. 文本域 textarea</h5> cols——列数，设置文本域的宽度 rows——行数，设置文本域的高度 输入超过大小空间之后自动显示滚动条 <pre><code class="prism language-html">自我评价：<textarea name="pingjia" id="" cols="50" rows="8"></textarea> </code></pre> 显示效果为： <a href="http://img.e-com-net.com/image/info8/4555680dae82432fa1da42e600b29b4f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4555680dae82432fa1da42e600b29b4f.jpg" alt="html基础整理_第7张图片" width="605" height="191" style="border:1px solid black;"></a> 文本域默认可拖拽调整大小，若需要固定文本域大小，防止拖拽，可设置：resize: none <pre><code class="prism language-html">  自我评价：<textarea name="pingjia" id="" cols="50" rows="8" style="vertical-align: top; resize: none;"></textarea> </code></pre> 显示效果为： <a href="http://img.e-com-net.com/image/info8/356d9d8c8c414fa69d10172464a8b25d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/356d9d8c8c414fa69d10172464a8b25d.jpg" alt="html基础整理_第8张图片" width="594" height="165" style="border:1px solid black;"></a> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1638962958618910720"></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,html)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> igotyback <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> 某公司摸鱼前端 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> 彩云飘过 <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> STU学生网页设计 <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><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/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835435506645692416.htm" title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a> 有一只柴犬 <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div> </li> <li><a href="/article/1835435141535723520.htm" title="详解：如何设计出健壮的秒杀系统？" target="_blank">详解：如何设计出健壮的秒杀系统？</a> 夜空_2cd3 <div>作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*</div> </li> <li><a href="/article/1835403246865313792.htm" title="斟一小组鸡血视频" target="_blank">斟一小组鸡血视频</a> 和自己一起成长 <div>http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa</div> </li> <li><a href="/article/1835395039572881408.htm" title="Dockerfile命令详解之 FROM" target="_blank">Dockerfile命令详解之 FROM</a> 清风怎不知意 <a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8%E5%8C%96/1.htm">容器化</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用</div> </li> <li><a href="/article/1835389111658180608.htm" title="《HTML 与 CSS—— 响应式设计》" target="_blank">《HTML 与 CSS—— 响应式设计》</a> 陈在天box <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在</div> </li> <li><a href="/article/1835387977480630272.htm" title="【C语言】- 自定义类型：结构体、枚举、联合" target="_blank">【C语言】- 自定义类型：结构体、枚举、联合</a> Cavalier_01 <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a> <div>【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523</div> </li> <li><a href="/article/1835382685745377280.htm" title="html+css网页设计旅游网站首页1个页面" target="_blank">html+css网页设计旅游网站首页1个页面</a> html+css+js网页设计 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a> <div>html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击</div> </li> <li><a href="/article/1835379153730367488.htm" title="spring mvc @RequestBody String类型参数" target="_blank">spring mvc @RequestBody String类型参数</a> zoyation <a class="tag" taget="_blank" href="/search/spring-mvc/1.htm">spring-mvc</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a> <div>通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ</div> </li> <li><a href="/article/1835377684025274368.htm" title="ubuntu安装opencv最快的方法" target="_blank">ubuntu安装opencv最快的方法</a> Derek重名了 <div>最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html</div> </li> <li><a href="/article/1835376759739084800.htm" title="处理标签包裹的字符串，并取出前250字符" target="_blank">处理标签包裹的字符串，并取出前250字符</a> 周bro <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>//假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do</div> </li> <li><a href="/article/1835372727582683136.htm" title="h5小游戏定制开发" target="_blank">h5小游戏定制开发</a> 红匣子实力推荐 <div>随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台</div> </li> <li><a href="/article/1835354700392787968.htm" title="Nginx的使用场景：构建高效、可扩展的Web架构" target="_blank">Nginx的使用场景：构建高效、可扩展的Web架构</a> 张某布响丸辣 <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</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>Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin</div> </li> <li><a href="/article/1835354447627251712.htm" title="前端知识点" target="_blank">前端知识点</a> ZhangTao_zata <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage</div> </li> <li><a href="/article/1835349024102772736.htm" title="非关系型数据库" target="_blank">非关系型数据库</a> 天秤-white <a class="tag" taget="_blank" href="/search/nosql/1.htm">nosql</a> <div>一、为什么要用Nosql1.单机MySQL的时代。一个基本的网站访问量一般不会太大，单个数据库完全足够。那时候更多使用的静态网页html，服务器根本没有太大压力。这时候网站的瓶颈是什么？-数据量如果太大，一个机器放不下。-数据量太大需要建立数据的索引（B+Tree），一个服务器内存放不下。-访问量读写混合，一个服务器承受不了。2.memcached缓存+MySQL+垂直拆分（读写分离）。网站80%</div> </li> <li><a href="/article/1835342718067372032.htm" title="Python精选200Tips：121-125" target="_blank">Python精选200Tips：121-125</a> AnFany <a class="tag" taget="_blank" href="/search/Python200%2BTips/1.htm">Python200+Tips</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>Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例</div> </li> <li><a href="/article/1835333268375957504.htm" title="爬虫技术抓取网站数据" target="_blank">爬虫技术抓取网站数据</a> Bearjumpingcandy <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a> <div>爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文</div> </li> <li><a href="/article/1835316434805288960.htm" title="七.正则化" target="_blank">七.正则化</a> 愿风去了 <div>吴恩达机器学习之正则化（Regularization）http://www.cnblogs.com/jianxinzhou/p/4083921.html从数学公式上理解L1和L2https://blog.csdn.net/b876144622/article/details/81276818虽然在线性回归中加入基函数会使模型更加灵活，但是很容易引起数据的过拟合。例如将数据投影到30维的基函数上，模</div> </li> <li><a href="/article/1835296397365178368.htm" title="创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几" target="_blank">创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几</a> uthRaman <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=</div> </li> <li><a href="/article/1835285939723792384.htm" title="利用frp实现内网穿透（需要云主机）" target="_blank">利用frp实现内网穿透（需要云主机）</a> heiyumiao <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%B7%A5%E5%85%B7/1.htm">网络工具</a><a class="tag" taget="_blank" href="/search/github/1.htm">github</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>详细实现教程：https://www.iplaysoft.com/frp.htmlhttps://blog.csdn.net/u013144287/article/details/78589643/项目官网地址：https://github.com/fatedier/frp/releases按照系统下载相应的程序包什么是frp内网穿透工具有很多，其中Frp(FastReverseProxy)是比较</div> </li> <li><a href="/article/1835270061674295296.htm" title="word转html制作操作手册,Word文档转换为HTML帮助文档操作手册范本.pdf" target="_blank">word转html制作操作手册,Word文档转换为HTML帮助文档操作手册范本.pdf</a> 想吃草莓干 <a class="tag" taget="_blank" href="/search/word%E8%BD%AChtml%E5%88%B6%E4%BD%9C%E6%93%8D%E4%BD%9C%E6%89%8B%E5%86%8C/1.htm">word转html制作操作手册</a> <div>Word文档转换为HTML帮助文档操作手册一、使用到的软件DOC2CHMDreamweaverCS3Helpandmanual4二、操作步骤1.先建立一个工作目录。如hhwork。2.将需要转换的文件复制到此工作目录下。如果是中文文件名，最好将其改为英文文件名。例：现在要将《小神探点检定修信息管理系统使用手册0.3.6.doc》转换为Html格式的帮助文档，首先将此文档复制到hhwork目录下并将</div> </li> <li><a href="/article/1835262372638453760.htm" title="WORD批量转换器MultiDoc Converter" target="_blank">WORD批量转换器MultiDoc Converter</a> uolian <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a> <div>WORD批量转换器MultiDocConverterhttps://www.52pojie.cn/thread-1318745-1-1.html可批量将doc、docx等文件格式转成doc、docx、pdf、rtf、txt、html、epub等格式。安装包下载地址：https://wws.lanzouj.com/irvVbiz0pkd最终下载文件打包地址（未作成单文件，不确定是否可以直接使用）：h</div> </li> <li><a href="/article/1835258583235784704.htm" title="HTML中"bgcolor"与"background-color"的区别" target="_blank">HTML中"bgcolor"与"background-color"的区别</a> Sardar_ <a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>bgcolor只是标签属性，而backgroud更多作为css的样式属性。它们俩大多数情况下效果完全相同。但在标签下效果不同。不支持bgcolor属性，只能用style标签添加CSS样式。作为table的属性而言：HelloWorld!和HelloWorld!效果完全相同。作为body属性而言：效果完全相同。不过个人推荐统一用CSS样式进行控制，把style统一放到.css文件中。backgrou</div> </li> <li><a href="/article/1835257575277424640.htm" title="【Python爬虫】百度百科词条内容" target="_blank">【Python爬虫】百度百科词条内容</a> PokiFighting <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%A4%84%E7%90%86/1.htm">数据处理</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/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>词条内容我这里随便选取了一个链接，用的是FBI的词条importurllib.requestimporturllib.parsefromlxmlimportetreedefquery(url):headers={'user-agent':'Mozilla/5.0(WindowsNT6.1;Win64;x64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/80.</div> </li> <li><a href="/article/1835249513875468288.htm" title="说说在 Vue.js 中如何实现组件间通信" target="_blank">说说在 Vue.js 中如何实现组件间通信</a> deniro <div>1用法假设父组件的模板包含子组件，我们可以通过props来正向地把数据从父组件传递给子组件。props可以是字符串数组，也可以是对象。html：js：Vue.component('deniro-component',{props:['message'],template:'{{message}}'});varapp=newVue({el:'#app',data:{}});渲染结果：＂嫦娥四号＂成功</div> </li> <li><a href="/article/28.htm" title="如何用ruby来写hadoop的mapreduce并生成jar包" target="_blank">如何用ruby来写hadoop的mapreduce并生成jar包</a> wudixiaotie <a class="tag" taget="_blank" href="/search/mapreduce/1.htm">mapreduce</a> <div>ruby来写hadoop的mapreduce，我用的方法是rubydoop。怎么配置环境呢： 1.安装rvm：不说了网上有 2.安装ruby：由于我以前是做ruby的，所以习惯性的先安装了ruby，起码调试起来比jruby快多了。 3.安装jruby： rvm install jruby然后等待安</div> </li> <li><a href="/article/155.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/%E8%AE%BF%E9%97%AE%E6%8E%A7%E5%88%B6%E6%9D%83%E9%99%90/1.htm">访问控制权限</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F/1.htm">单例模式</a> <div>访问权限是java中一个比较中要的知识点,它规定者什么方法可以访问,什么不可以访问一:包访问权限; 自定义包: package com.wj.control; //包 public class Demo { //定义一个无参的方法 public void DemoPackage(){ System.out.println("调用</div> </li> <li><a href="/article/282.htm" title="[生物与医学]请审慎食用小龙虾" target="_blank">[生物与医学]请审慎食用小龙虾</a> comsci <a class="tag" taget="_blank" href="/search/%E7%94%9F%E7%89%A9/1.htm">生物</a> <div> 现在的餐馆里面出售的小龙虾,有一些是在野外捕捉的,这些小龙虾身体里面可能带有某些病毒和细菌,人食用以后可能会导致一些疾病,严重的甚至会死亡..... 所以,参加聚餐的时候,最好不要点小龙虾...就吃养殖的猪肉,牛肉,羊肉和鱼,等动物蛋白质 </div> </li> <li><a href="/article/409.htm" title="org.apache.jasper.JasperException: Unable to compile class for JSP:" target="_blank">org.apache.jasper.JasperException: Unable to compile class for JSP:</a> 商人shang <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a><a class="tag" taget="_blank" href="/search/2.2/1.htm">2.2</a><a class="tag" taget="_blank" href="/search/jdk1.8/1.htm">jdk1.8</a> <div>环境： jdk1.8 maven tomcat7-maven-plugin 2.0 原因： tomcat7-maven-plugin 2.0 不知吃 jdk 1.8，换成 tomcat7-maven-plugin 2.2就行，即 <plugin> </div> </li> <li><a href="/article/536.htm" title="你的垃圾你处理掉了吗?GC" target="_blank">你的垃圾你处理掉了吗?GC</a> oloz <a class="tag" taget="_blank" href="/search/GC/1.htm">GC</a> <div>前序:本人菜鸟，此文研究学习来自网络，各位牛牛多指教　 1.垃圾收集算法的核心思想　　Java语言建立了垃圾收集机制，用以跟踪正在使用的对象和发现并回收不再使用(引用)的对象。该机制可以有效防范动态内存分配中可能发生的两个危险：因内存垃圾过多而引发的内存耗尽，以及不恰当的内存释放所造成的内存非法引用。　　垃圾收集算法的核心思想是：对虚拟机可用内存空间，即堆空间中的对象进行识别</div> </li> <li><a href="/article/663.htm" title="shiro 和 SESSSION" target="_blank">shiro 和 SESSSION</a> 杨白白 <a class="tag" taget="_blank" href="/search/shiro/1.htm">shiro</a> <div>shiro 在web项目里默认使用的是web容器提供的session，也就是说shiro使用的session是web容器产生的，并不是自己产生的，在用于非web环境时可用其他来源代替。在web工程启动的时候它就和容器绑定在了一起，这是通过web.xml里面的shiroFilter实现的。通过session.getSession()方法会在浏览器cokkice产生JESSIONID，当关闭浏览器，此</div> </li> <li><a href="/article/790.htm" title="移动互联网终端淘宝客如何实现盈利" target="_blank">移动互联网终端淘宝客如何实现盈利</a> 小桔子 <a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8B%95%E5%AE%A2%E6%88%B6%E7%AB%AF/1.htm">移動客戶端</a><a class="tag" taget="_blank" href="/search/%E6%B7%98%E5%AE%A2/1.htm">淘客</a><a class="tag" taget="_blank" href="/search/%E6%B7%98%E5%AF%B6App/1.htm">淘寶App</a> <div> 2012年淘宝联盟平台为站长和淘宝客带来的分成收入突破30亿元，同比增长100%。而来自移动端的分成达1亿元，其中美丽说、蘑菇街、果库、口袋购物等App运营商分成近5000万元。可以看出，虽然目前阶段PC端对于淘客而言仍旧是盈利的大头，但移动端已经呈现出爆发之势。而且这个势头将随着智能终端(手机，平板)的加速普及而更加迅猛</div> </li> <li><a href="/article/917.htm" title="wordpress小工具制作" target="_blank">wordpress小工具制作</a> aichenglong <a class="tag" taget="_blank" href="/search/wordpress/1.htm">wordpress</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E5%B7%A5%E5%85%B7/1.htm">小工具</a> <div>wordpress 使用侧边栏的小工具，很方便调整页面结构小工具的制作过程 1 在自己的主题文件中新建一个文件夹(如widget)，在文件夹中创建一个php(AWP_posts-category.php) 小工具是一个类,想侧边栏一样，还得使用代码注册，他才可以再后台使用，基本的代码一层不变 <?php class AWP_Post_Category extends WP_Wi</div> </li> <li><a href="/article/1044.htm" title="JS微信分享" target="_blank">JS微信分享</a> AILIKES <a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div>// 所有功能必须包含在 WeixinApi.ready 中进行 WeixinApi.ready(function(Api) { // 微信分享的数据 var wxData = { &nb</div> </li> <li><a href="/article/1171.htm" title="封装探讨" target="_blank">封装探讨</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/JAVA%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1+%E5%B0%81%E8%A3%85/1.htm">JAVA面向对象封装</a> <div>//封装属性方法将某些东西包装在一起，通过创建对象或使用静态的方法来调用，称为封装；封装其实就是有选择性地公开或隐藏某些信息，它解决了数据的安全性问题，增加代码的可读性和可维护性在 Aname类中申明三个属性，将其封装在一个类中：通过对象来调用例如 1： //属性将其设为私有姓名 name 可以公开 </div> </li> <li><a href="/article/1298.htm" title="jquery radio/checkbox change事件不能触发的问题" target="_blank">jquery radio/checkbox change事件不能触发的问题</a> bijian1013 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a> <div>我想让radio来控制当前我选择的是机动车还是特种车，如下所示： <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"><</div> </li> <li><a href="/article/1425.htm" title="AngularJS中安全性措施" target="_blank">AngularJS中安全性措施</a> bijian1013 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8%E6%80%A7/1.htm">安全性</a><a class="tag" taget="_blank" href="/search/XSRF/1.htm">XSRF</a><a class="tag" taget="_blank" href="/search/JSON%E6%BC%8F%E6%B4%9E/1.htm">JSON漏洞</a> <div> 在使用web应用中，安全性是应该首要考虑的一个问题。AngularJS提供了一些辅助机制，用来防护来自两个常见攻击方向的网络攻击。一.JSON漏洞当使用一个GET请求获取JSON数组信息的时候（尤其是当这一信息非常敏感，</div> </li> <li><a href="/article/1552.htm" title="[Maven学习笔记九]Maven发布web项目" target="_blank">[Maven学习笔记九]Maven发布web项目</a> bit1129 <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>基于Maven的web项目的标准项目结构 user-project user-core user-service user-web src </div> </li> <li><a href="/article/1679.htm" title="【Hive七】Hive用户自定义聚合函数(UDAF)" target="_blank">【Hive七】Hive用户自定义聚合函数(UDAF)</a> bit1129 <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a> <div>用户自定义聚合函数，用户提供的多个入参通过聚合计算(求和、求最大值、求最小值)得到一个聚合计算结果的函数。问题：UDF也可以提供输入多个参数然后输出一个结果的运算，比如加法运算add(3，5)，add这个UDF需要实现UDF的evaluate方法,那么UDF和UDAF的实质分别究竟是什么？ Double evaluate(Double a, Double b) </div> </li> <li><a href="/article/1806.htm" title="通过 nginx-lua 给 Nginx 增加 OAuth 支持" target="_blank">通过 nginx-lua 给 Nginx 增加 OAuth 支持</a> ronin47 <div>前言：我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算，阅读下面的文档，实现自动化并获得收益。SeatGeek 在过去几年中取得了发展，我们已经积累了不少针对各种任务的不同管理接口。我们通常为新的展示需求创建新模块，比如我们自己的博客、图表等。我们还定期开发内部工具来处理诸如部署、可视化操作及事件处理等事务。在处理这些事务中，我们使用了几个不同的接口来认证： &n</div> </li> <li><a href="/article/1933.htm" title="利用tomcat-redis-session-manager做session同步时自定义类对象属性保存不上的解决方法" target="_blank">利用tomcat-redis-session-manager做session同步时自定义类对象属性保存不上的解决方法</a> bsr1983 <a class="tag" taget="_blank" href="/search/session/1.htm">session</a> <div>在利用tomcat-redis-session-manager做session同步时，遇到了在session保存一个自定义对象时，修改该对象中的某个属性，session未进行序列化，属性没有被存储到redis中。在 tomcat-redis-session-manager的github上有如下说明： Session Change Tracking As noted in the &qu</div> </li> <li><a href="/article/2060.htm" title="《代码大全》表驱动法-Table Driven Approach-1" target="_blank">《代码大全》表驱动法-Table Driven Approach-1</a> bylijinnan <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> <div>关于Table Driven Approach的一篇非常好的文章： http://www.codeproject.com/Articles/42732/Table-driven-Approach package com.ljn.base; import java.util.Random; public class TableDriven { public </div> </li> <li><a href="/article/2187.htm" title="Sybase封锁原理" target="_blank">Sybase封锁原理</a> chicony <a class="tag" taget="_blank" href="/search/Sybase/1.htm">Sybase</a> <div> 昨天在操作Sybase IQ12.7时意外操作造成了数据库表锁定，不能删除被锁定表数据也不能往其中写入数据。由于着急往该表抽入数据，因此立马着手解决该表的解锁问题。无奈此前没有接触过Sybase IQ12.7这套数据库产品，加之当时已属于下班时间无法求助于支持人员支持，因此只有借助搜索引擎强大的</div> </li> <li><a href="/article/2314.htm" title="java异常处理机制" target="_blank">java异常处理机制</a> CrazyMizzz <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>java异常关键字有以下几个，分别为 try catch final throw throws 他们的定义分别为 try： Opening exception-handling statement. catch： Captures the exception. finally： Runs its code before terminating</div> </li> <li><a href="/article/2441.htm" title="hive 数据插入DML语法汇总" target="_blank">hive 数据插入DML语法汇总</a> daizj <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/DML/1.htm">DML</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8F%92%E5%85%A5/1.htm">数据插入</a> <div>Hive的数据插入DML语法汇总1、Loading files into tables语法：1) LOAD DATA [LOCAL] INPATH 'filepath' [OVERWRITE] INTO TABLE tablename [PARTITION (partcol1=val1, partcol2=val2 ...)]解释：1)、上面命令执行环境为hive客户端环境下： hive>l</div> </li> <li><a href="/article/2568.htm" title="工厂设计模式" target="_blank">工厂设计模式</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div> 使用设计模式是促进最佳实践和良好设计的好办法。设计模式可以提供针对常见的编程问题的灵活的解决方案。工厂模式工厂模式（Factory）允许你在代码执行时实例化对象。它之所以被称为工厂模式是因为它负责“生产”对象。工厂方法的参数是你要生成的对象对应的类名称。 Example #1 调用工厂方法（带参数） <?phpclass Example{ </div> </li> <li><a href="/article/2695.htm" title="mysql字符串查找函数" target="_blank">mysql字符串查找函数</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div> FIND_IN_SET(str,strlist) 假如字符串str 在由N 子链组成的字符串列表strlist 中，则返回值的范围在1到 N 之间。一个字符串列表就是一个由一些被‘,’符号分开的自链组成的字符串。如果第一个参数是一个常数字符串，而第二个是type SET列，则 FIND_IN_SET() 函数被优化，使用比特计算。如果str不在strlist 或st</div> </li> <li><a href="/article/2822.htm" title="jvm内存管理" target="_blank">jvm内存管理</a> easterfly <a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a> <div>一、JVM堆内存的划分分为年轻代和年老代。年轻代又分为三部分：一个eden,两个survivor。工作过程是这样的：e区空间满了后，执行minor gc，存活下来的对象放入s0, 对s0仍会进行minor gc，存活下来的的对象放入s1中，对s1同样执行minor gc，依旧存活的对象就放入年老代中；年老代满了之后会执行major gc，这个是stop the word模式，执行</div> </li> <li><a href="/article/2949.htm" title="CentOS-6.3安装配置JDK-8" target="_blank">CentOS-6.3安装配置JDK-8</a> gengzg <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a> <div>JAVA_HOME=/usr/java/jdk1.8.0_45 JRE_HOME=/usr/java/jdk1.8.0_45/jre PATH=$PATH:$JAVA_HOME/bin:$JRE_HOME/bin CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JRE_HOME/lib export JAVA_HOME</div> </li> <li><a href="/article/3076.htm" title="【转】关于web路径的获取方法" target="_blank">【转】关于web路径的获取方法</a> huangyc1210 <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E8%B7%AF%E5%BE%84/1.htm">路径</a> <div>假定你的web application 名称为news,你在浏览器中输入请求路径： http://localhost:8080/news/main/list.jsp 则执行下面向行代码后打印出如下结果： 1、 System.out.println(request.getContextPath()); //可返回站点的根路径。也就是项</div> </li> <li><a href="/article/3203.htm" title="php里获取第一个中文首字母并排序" target="_blank">php里获取第一个中文首字母并排序</a> 远去的渡口 <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a> <div>很久没来更新博客了，还是觉得工作需要多总结的好。今天来更新一个自己认为比较有成就的问题吧。最近在做储值结算，需求里结算首页需要按门店的首字母A-Z排序。我的数据结构原本是这样的： Array ( [0] => Array ( [sid] => 2885842 [recetcstoredpay] =&g</div> </li> <li><a href="/article/3330.htm" title="java内部类" target="_blank">java内部类</a> hm4123660 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E9%83%A8%E7%B1%BB/1.htm">内部类</a><a class="tag" taget="_blank" href="/search/%E5%8C%BF%E5%90%8D%E5%86%85%E9%83%A8%E7%B1%BB/1.htm">匿名内部类</a><a class="tag" taget="_blank" href="/search/%E6%88%90%E5%91%98%E5%86%85%E9%83%A8%E7%B1%BB/1.htm">成员内部类</a><a class="tag" taget="_blank" href="/search/%E6%96%B9%E6%B3%95%E5%86%85%E9%83%A8%E7%B1%BB/1.htm">方法内部类</a> <div> 　在Java中，可以将一个类定义在另一个类里面或者一个方法里面，这样的类称为内部类。内部类仍然是一个独立的类，在编译之后内部类会被编译成独立的.class文件，但是前面冠以外部类的类名和$符号。内部类可以间接解决多继承问题,可以使用内部类继承一个类，外部类继承一个类，实现多继承。 &nb</div> </li> <li><a href="/article/3457.htm" title="Caused by: java.lang.IncompatibleClassChangeError: class org.hibernate.cfg.Exten" target="_blank">Caused by: java.lang.IncompatibleClassChangeError: class org.hibernate.cfg.Exten</a> zhb8015 <div>maven pom.xml关于hibernate的配置和异常信息如下，查了好多资料，问题还是没有解决。只知道是包冲突，就是不知道是哪个包....遇到这个问题的分享下是怎么解决的。。 maven pom: <dependency> <groupId>org.hibernate</groupId> <ar</div> </li> <li><a href="/article/3584.htm" title="Spark 性能相关参数配置详解－任务调度篇" target="_blank">Spark 性能相关参数配置详解－任务调度篇</a> Stark_Summer <a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a><a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a><a class="tag" taget="_blank" href="/search/cpu/1.htm">cpu</a><a class="tag" taget="_blank" href="/search/%E4%BB%BB%E5%8A%A1%E8%B0%83%E5%BA%A6/1.htm">任务调度</a><a class="tag" taget="_blank" href="/search/yarn/1.htm">yarn</a> <div>随着Spark的逐渐成熟完善, 越来越多的可配置参数被添加到Spark中来, 本文试图通过阐述这其中部分参数的工作原理和配置思路, 和大家一起探讨一下如何根据实际场合对Spark进行配置优化。由于篇幅较长，所以在这里分篇组织，如果要看最新完整的网页版内容，可以戳这里：http://spark-config.readthedocs.org/，主要是便</div> </li> <li><a href="/article/3711.htm" title="css3滤镜" target="_blank">css3滤镜</a> wangkeheng <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>经常看到一些网站的底部有一些灰色的图标，鼠标移入的时候会变亮，开始以为是js操作src或者bg呢，搜索了一下，发现了一个更好的方法：通过css3的滤镜方法。 html代码： <a href='' class='icon'><img src='utv.jpg' /></a> css代码： .icon{-webkit-filter: graysc</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>