HTML基础 知识点总结

• 从这篇笔记开始总结看过的《从0到1 HTML+CSS+JavaScript》书籍笔记，记录HTML以及CSS的相关知识点，为之后从事相关工作打好基础
•  简单介绍
•  基本标签
• 文本
• 列表
• 表格 

一.简单介绍

• HTML：超文本标记语言，HTML是一门描述性的标记语言
• CSS：层叠样式表，用来控制网页外观的一种技术
• JavaScript:  嵌入到HTML页面的脚本语言，由浏览器一边解释一边执行
• HTML用于控制网页的结构，CSS用于控制网页的外观，JavaScript用于控制网页的行为

1.1HTML

① 概念：超文本标记语言，是网页的标准语言，并不是一门编程语言，而是一门描述性的标记语言

② 语法：<标签符>内容

③ 说明：标签符一般都是成对出现的，包含一个“开始标签”和一个“结束标签”

④ 学习HTML就是学习各种标签，搭建网页的骨架

二.基本标签

2.1 HTML结构

1. 基本结构

• :文档声明，表明这是一个html页面
•   : 告诉浏览器，这个页面是从这个标签开始，然后到这个标签结束
• ：网页的头部，用于定义一些特殊的内容，比如页面标题，定时刷新，外部文件等
• :  网页的身体

2. head标签

 只有6个标签可以放到head中，title标签，meta标签，link标签，style标签，script标签，base标签

① title标签：定义网页的标题

② meta标签：定义页面的特殊信息，比如页面关键字，描述等，不是提供给用户看的，而是提供给搜索引擎蜘蛛看的，meta的作用就是告诉“搜索蜘蛛”这个页面是做什么的

• name属性

 （1）name属性的取值

属性值	说明
keywords	网页的关键字，可以是多个
description	网页的描述
author	网页的作者
copyright	版权信息

 

 

 

 

（2）name属性的语法

•  http-equiv属性

        作用1：定义网页所使用的编码

        语法：

在HTML5中的简写形式，必须放在title标签以及其他meta标签前面

         作用2：定义网页自动刷新跳转

       语法：

含义：表示当前页面6秒后会自动跳转到url指向的这个页面，很多小广告就是这种方式实现定时跳转的

  ③ style标签

•  定义元素的CSS样式
•  语法

④ script标签

• 定义页面的JavaScript代码，也可以引入外部的JavaScript文件
• 语法

⑤ link标签

• 引入外部样式文件（CSS文件）
• 语法

3.body标签

4.注释

 三. 文本

3.1 标题标签

① 在html中，共有6个级别标签：h1, h2, h3, h4, h5, h6, h1标签的重要性最高，h6标签的重要性最低

② 一个页面只能有一个h1标签，而h2到h6可以有多个

③ title和h1标签的区别

• title标签是用于显示地址栏的标题
• h1标签是显示文章的标题

3.2 段落标签

①

：段落标签，用来显示一段文字，段落标签会自动换黄，并且段落和段落之间有一定的间距

②
: 换行标签，对文字进行换行处理，br标签是自闭和标签

3.3 文本标签

作用：对文字进行修饰，比如粗体，斜体，上标，下标(下面红色标签需要重点掌握)

① 粗体标签： 或  ，尽量使用strong标签，更加具有语义化

② 斜体标签：     , 尽量使用em标签，语义化更好

③ 上标标签：标签，比如表示平方，次方等,把数字或某些文字放到这个标签中，就可以变成上标

④ 下标标签：,比如表示一些化学物质，硫酸分子等

⑤ 中划线标签：标签，也成为删除线，常用于商品促销的标价

⑥ 下划线标签：, 实现文本的下划线效果

⑦ 大字号标签和小字号标签：   

3.4 水平线标签

① hr标签实现水平线效果

3.5 div标签

• div标签来划分HTML结构，配合CSS来整体控制某一块样式

3.6 自闭合标签

• 一般标签：有开始符号和结束符号，可以在内部插入其他标签或文字
• 自闭合标签：只有开始符号没有结束符号，不可以在内部插入其他标签或文字

标签	说明
	定义网页的信息（供搜索引擎查看）
	引入“外部CSS文件”
	换行标签
	水平线标签
	图片标签
	表单标签

 

 

 

 

 

 

3.7 块元素和行内元素

① 块元素

• 在浏览器显示状态下将独占一整行，排斥其他元素与它在同一行
• 一般情况下，块元素内部可以容纳其他块元素和行内元素

② 行内元素

• 行内元素只能容纳其他行内元素，不可以容纳块元素

3.8 特殊符号

① 空格：  

② 特殊符号：以&开头，以;结尾，需要通过代码实现（本书42页可以查阅）

四.列表

列表分为三种：有序列表，无需列表，定义列表

• 有序列表：列表项有先后之分
• 无序列表：列表项之间没有先后顺序之分
• 定义列表：一组带有特殊含义的列表，一个列表项中包含“条件”和“列表”两部分

4.1 有序列表

① 有序列表中各个列表项是有顺序的

② 语法：

     
列表项
     
列表项
     
列表项

③ ol表示有序列表，li表示列表项，一个有序列表可以包含多个列表项

④ ol的子标签只能是li标签，不能是其他标签

⑤ type属性

语法：

     
列表项
     
列表项
     
列表项

   type属性的取值：

属性值	列表项符号
1	阿拉伯数字：1 2 3 4
a	小写英文字母：a, b, c, ...
A	大写英文字母：A，B, C...
i	小写罗马数字：i, ii, iii...
I	小写罗马数字：I， II， III...

 

 

 

 

 

 

 4.2 无序列表

① 无序列表的列表项是没有顺序的

② 语法

     
列表项
     
列表项
     
列表项

③ ul 无序列表，li 列表项

④ ul和li标签需要配合一起使用，不可以单独使用，ul标签的子标签只能是li标签，不能是其他标签

⑤ ul元素内部的文本，只能在li元素内部添加，不能在li元素外部添加

⑥  type属性

语法：

     
列表项
     
列表项
     
列表项

取值：

属性值	列表符号
disc	实心圆
circle	空心圆
square	正方形

 

 

 

 

 4.3 定义列表

① 定义列表由两部分组成：名词和描述

② 语法

    
添加要解释的名词
    
添加该名词的具体解释

③ dl 定义列表，dt 定义名词， dd定义描述

 五.标签语义化

目的：不是为了记住所有标签，而是在你需要的地方能使用正确的语义化标签，学会把标签用在对的地方

六.表格

6.1 表格基本结构

① 表格的组成部分

• 表格：table标签
• 行：tr标签
• 单元格：td标签

② 语法：

③ 说明

• tr表示行，td表示表格单元格
• 有多少组tr，就有多少行

6.2 表格完整结构

① caption 表格标题：一个表格只能有一个标题，默认情况下，标题位于整个表格第一行

② 默认情况下表格是没有边框的

③ 表头单元格 th:

• 单元格有两种，表头单元格（th）和表格单元格(td)
• 浏览器会以“粗体”和“居中” 来显示th标签的内容，td不会
• th用于表头，td用于表行

6.3 语义化 

HTML引入了thead, tbody, tfoot三个标签，把表格划分成三部分，表头，表身，表脚

使代码更加语义化，方便用分块控制表格CSS的样式

6.4 合并行

① rowspan 属性来合并行：纵向合并n个单元格

② 语法：

6.5 合并列

① colspan属性来合并列: 横向的N个单元格

② 语法：

七.图片

7.1 图片标签

① 图片标签用来显示一张图

②  

1. src属性

① 用于指定这个图片所在的路径，路径可以是相对路径，也可以是绝对路径

② 语法：

③ 任何一张图必须指定src属性才可以显示，src属性是img不可缺少的属性

2. alt属性和title属性

• alt属性用于图片描述，这个描述文字是给搜索引擎看的，当图片无法展示时，页面会显示alt 中指定的文字
• tiltle属性用于图片描述，这个描述文字是给用户看的，当鼠标指针移到图片上时，会显示title中的文字

7.2 图片路径

① 绝对路径：图片在计算机中的完整路径

② 相对路径：图片相对当前页面的为止

③ 在实际开发中，不管是图片还是超链接，一般都使用相对路径，几乎不会使用绝对路径

③ 在使用图片时，建议图片名或者文件夹名都使用英文名

7.3 图片格式

① 位图

• 又称为像素图，它是由像素点组成的图片，放大图片后，图片会失真
• 缩小图片后，图片同样也会失真
• 最常见的位图格式  jpg, png, gif
• jpg格式可以很好的处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片，高清，图片等，jpg格式的图片体积比较大，不支持保存透明背景
• png格式是一种无损格式，可以无损压缩以保证页面打开速度，png格式的图片体积较小，并支持保存透明背景，不过不适合存储颜色丰富的图片
• gif格式的图片效果最差，不过它适合制作动画
• 如果想要展示颜色丰富的高质量图片，就使用jpg格式；如果是一般图片，为了减少体积或者想要透明效果，可以使用png图片，如果是动画图片，可以使用gif格式

② 矢量图

• 又称为向量图，以一种数学描述的方式来记录内容的图片格式
• 优点是无论图片放大，缩小或者旋转都不会失真
• 最大缺点就是难以表现色彩丰富的图片
• 常见格式：.ai   .cdr  .fh .swf    swf的格式比较常见，它指的是flash动画

③ 矢量图和位图的区别

• 位图适用于展示色彩丰富的图片，矢量图不适合展示色彩丰富的图片
• 位图的组成单位“像素”， 矢量图的组成单位是“数学向量”
• 位图受分辨率影响，当图片放大时会失真，而矢量图不受分辨率影响，图片放大时不会失真
• 网页中的图片绝大多数都是位图，而不是矢量图

八. 超链接

1.超链接简介 

超链接能够在各个独立的页面之间方便地跳转

① a标签

• 语法： 文本或图片
• href: 表示你想要跳转到的页面的路径，可以是相对路径，也可以是绝对路径
• 将文本设置成超链接称为“文本超链接”， 将图片设置为超链接称为“图片超链接”
• 不管是哪种超链接，都是把文字或者图片放到a标签内部来实现的

② target属性

•  用来定义超链接打开窗口的方式
• 语法：文本或图片
• target的属性取值

属性值	说明
_self	在原来窗口打开链接（默认值）
_blank	在新窗口打开链接
_parent	在父窗口打开链接
_top	在顶层窗口打开超链接

 

 

 

 

 

2.内部链接 

① 外部链接：“外部网站”的页面

② 内部链接：自身网站的网页

3.锚点链接

① 锚点链接：内部链接的一种，链接地址指向的是当前页面的某个部分

② 单击某一个超链接，就会跳到当前页面的某一部分

③ 实现方式

• 目标元素的id
• a标签的href指向该id
• 给a标签的href属性赋值时，需要在id前面加上"#", 用来表示这是一个锚点链接

推荐文章
推荐音乐


   
推荐音乐
   

   
歌曲1
   
歌曲2
   
歌曲3
   

 九.表单

9.1 简单介绍

① 表单的主要作用：在浏览器端收集用户信息，将数据交给服务器来处理

② 表单标签：form input textarea select option

③ 外观：

• 单行文本框
• 密码文本框
• 单选框
• 复选框
• 按钮
• 文件上传
• 多行文本框
• 下拉列表

9.2 form标签

① 将所有表单标签放在form标签内部

② form标签属性

属性	说明
name	表单名称
method	提交方式
action	提交方式
target	打开方式
enctype	编码方式

 

 

 

 

 

• name属性

  作用：为了区分页面中的表单，可以使用name属性给表单命名

•  method属性

 作用：用于指定表单数据使用哪一种http提交方法，一种是get; 一种是post, get的安全性较差，post的安全性较好，大多数情况下使用post

• action 属性

  作用：指定表单数据提交到哪个地址进行处理

•  target属性

 作用：指定窗口的打开方式，与a标签的target属性值是一样的，一般情况下只会用到_blank这一个属性

• enctype属性

 作用：指定表单数据提交的编码方式，一般情况下，不需要设置，除非用到上传文件功能

9.3 Input标签

① input 是自闭合标签，没有结束符号

② type的属性值

属性值	说明
text	单行文本框
password	密码文本框
radio	单选框
checkbox	多选框
button submit reset	按钮
file	文件上传

 

 

 

 

 

 

 

9.4 单行文本框

• 语法： 

• 属性：

属性	说明
value	设置单行文本框的默认值，在默认情况下单行文本框显示的文字,如果没有设置，文本框就是空白的
size	设置单行文本框长度，一般不会使用，都是使用css属性控制
maxlength	设置单行文本框中最多可以输入的字符数

 

 

 

 

 

9.5 密码文本框 

① 在密码文本框中输入的字符不可见

② 语法： 

③ 密码文本框属性

属性	说明
value	设置密码文本框的默认值，在默认情况下密码文本框显示的文字,如果没有设置，文本框就是空白的
size	设置密码文本框长度，一般不会使用，都是使用css属性控制
maxlength	设置密码文本框中最多可以输入的字符数

 

 

 

9.6 单选框

① 单选框是使用input标签来实现的，type属性值为"radio"

② 语法：

③ name属性表示单选按钮所在的组名，value属性表示单选按钮的取值，这两个属性必须设置

④ 举例

  男
  女

⑤ 对于这一组单选按钮，只能选中其中一项，不能同时选中两项

⑥ 默认让一个选中：使用checked属性，没有属性值是因为采用的是简写形式

  男
  女

⑦ 对于同一组的单选框，name的值必须相同

9.7 复选框

① type的属性为checkbox

② 复选框可以选择多项

③ 语法：

④ name属性表示复选框所在的组名，value属性表示复选框的取值，这两个属性都必须要设置

⑤ 让复选框选中也可以使用checked属性来实现

9.8 按钮

常见按钮：普通按钮（button）  提交按钮（submit） 重置按钮（reset）

value 就是按钮上的文字

① 普通按钮：

② 提交按钮：

③ 重置按钮：

• 点击重置按钮之后，表单中的内容被清空了，但是重置按钮只能清空它 “所在form标签” 内表单的内容，对于当前所在form之外的表单清除是无效的

④ 三种按钮的区别

• 普通按钮一般情况都是配合JavaScript来进行各种操作的
• 提交按钮一般都是用来给服务器提交数据的
• 重置按钮一般是用来清空用户在表单中输入的数据的

button标签

9.9 文件

① 通过input标签来实现，type的属性取值为file

 9.10 多行文本框

① 多行文本框可以输入多行文字，多行文本框使用的是textarea标签

② 语法：

默认文本<textarea></code></pre> 
  <p>③ 多行文本框的默认显示文本是在标签对的内部设置，而不是在value属性中设置的</p> 
  <h3>9.11 下拉列表</h3> 
  <p>① 使用select和option两个标签来配合使用</p> 
  <pre><code class="language-javascript"><select>
    <option>选项内容</option>
    <option>选项内容</option>
</select></code></pre> 
  <p>② select标签属性</p> 
  <ul> 
   <li>multiple 设置下拉列表可以选择多项，使用ctrl + 鼠标左键 来进行选取</li> 
   <li>size 设置下拉列表显示几个列表项，取值为整数</li> 
  </ul> 
  <pre><code class="language-javascript"><select multiple>
    <option>选项内容</option>
    <option>选项内容</option>
</select></code></pre> 
  <p>③ option标签属性</p> 
  <ul> 
   <li>selected: 是否选中</li> 
   <li>value: 选项值</li> 
  </ul> 
  <pre><code class="language-javascript"><select multiple>
    <option selected>选项内容</option>
    <option value="选项值">选项内容</option>
</select></code></pre> 
  <h2>十.框架</h2> 
  <p>① iframe标签：实现一个内嵌框架，内嵌框架是指在当前页面再嵌入另外一个网页</p> 
  <p>② 语法：<span style="background-color:#fbd4d0;"><iframe src="链接地址" width="数值" height="数值"></iframe></span></p> 
  <p>③ src是必选的，用于定义链接页面的地址，width和height这两个属性是可选的，分别用于定义框架的高度和宽度</p> 
  <p>④ 也可以同时嵌入多个页面</p> 
  <p></p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1699650101267476480"></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">
                        <!-- 文章页-右侧1 动态广告位 -->
                        <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>
                        <!-- 文章页-右侧2 动态广告位 -->
                        <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>
                        <!-- 文章页-右侧3 动态广告位 -->
                        <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,前端)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1835509897106649088.htm"
                           title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a>
                        <span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div>
                    </li>
                    <li><a href="/article/1835509770287673344.htm"
                           title="swagger访问路径" target="_blank">swagger访问路径</a>
                        <span class="text-muted">igotyback</span>
<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>
                        <span class="text-muted">某公司摸鱼前端</span>
<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>
                        <span class="text-muted">彩云飘过</span>

                        <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>
                        <span class="text-muted">STU学生网页设计</span>
<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/1835497792265613312.htm"
                           title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a>
                        <span class="text-muted">加密社</span>
<a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a>
                        <div>加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件</div>
                    </li>
                    <li><a href="/article/1835496149843275776.htm"
                           title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a>
                        <span class="text-muted">二挡起步</span>
<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>
                        <span class="text-muted">二挡起步</span>
<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/1835448238103162880.htm"
                           title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a>
                        <span class="text-muted">苹果酱0567</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/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>这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一</div>
                    </li>
                    <li><a href="/article/1835437775344726016.htm"
                           title="博客网站制作教程" target="_blank">博客网站制作教程</a>
                        <span class="text-muted">2401_85194651</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
                        <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div>
                    </li>
                    <li><a href="/article/1835435506645692416.htm"
                           title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a>
                        <span class="text-muted">有一只柴犬</span>
<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>
                        <span class="text-muted">夜空_2cd3</span>

                        <div>作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*</div>
                    </li>
                    <li><a href="/article/1835428317084348416.htm"
                           title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a>
                        <span class="text-muted">全能全知者</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
                        <div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl</div>
                    </li>
                    <li><a href="/article/1835427057752961024.htm"
                           title="补充元象二面" target="_blank">补充元象二面</a>
                        <span class="text-muted">Redstone Monstrosity</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重</div>
                    </li>
                    <li><a href="/article/1835420753252675584.htm"
                           title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a>
                        <span class="text-muted">jun778895</span>
<a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a>
                        <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂</div>
                    </li>
                    <li><a href="/article/1835411044768509952.htm"
                           title="字节二面" target="_blank">字节二面</a>
                        <span class="text-muted">Redstone Monstrosity</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div>
                    </li>
                    <li><a href="/article/1835403246865313792.htm"
                           title="斟一小组鸡血视频" target="_blank">斟一小组鸡血视频</a>
                        <span class="text-muted">和自己一起成长</span>

                        <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/1835398064727224320.htm"
                           title="前端代码上传文件" target="_blank">前端代码上传文件</a>
                        <span class="text-muted">余生逆风飞翔</span>
<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>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div>
                    </li>
                    <li><a href="/article/1835395039572881408.htm"
                           title="Dockerfile命令详解之 FROM" target="_blank">Dockerfile命令详解之 FROM</a>
                        <span class="text-muted">清风怎不知意</span>
<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>
                        <span class="text-muted">陈在天box</span>
<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>
                        <span class="text-muted">Cavalier_01</span>
<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/1835385458356482048.htm"
                           title="uniapp实现动态标记效果详细步骤【前端开发】" target="_blank">uniapp实现动态标记效果详细步骤【前端开发】</a>
                        <span class="text-muted">2401_85123349</span>
<a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a>
                        <div>第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。</div>
                    </li>
                    <li><a href="/article/1835382685745377280.htm"
                           title="html+css网页设计 旅游网站首页1个页面" target="_blank">html+css网页设计 旅游网站首页1个页面</a>
                        <span class="text-muted">html+css+js网页设计</span>
<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>
                        <span class="text-muted">zoyation</span>
<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>
                        <span class="text-muted">Derek重名了</span>

                        <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>
                        <span class="text-muted">周bro</span>
<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/1835373236217540608.htm"
                           title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a>
                        <span class="text-muted">马小蜗</span>

                        <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div>
                    </li>
                    <li><a href="/article/1835372727582683136.htm"
                           title="h5小游戏定制开发" target="_blank">h5小游戏定制开发</a>
                        <span class="text-muted">红匣子实力推荐</span>

                        <div>随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台</div>
                    </li>
                    <li><a href="/article/1835368019430305792.htm"
                           title="Vue + Express实现一个表单提交" target="_blank">Vue + Express实现一个表单提交</a>
                        <span class="text-muted">九旬大爷的梦</span>

                        <div>最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo</div>
                    </li>
                    <li><a href="/article/1835354700392787968.htm"
                           title="Nginx的使用场景：构建高效、可扩展的Web架构" target="_blank">Nginx的使用场景：构建高效、可扩展的Web架构</a>
                        <span class="text-muted">张某布响丸辣</span>
<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/108.htm"
                                       title="Nginx负载均衡" target="_blank">Nginx负载均衡</a>
                                    <span class="text-muted">510888780</span>
<a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a>
                                    <div>Nginx负载均衡一些基础知识: 
 
nginx 的 upstream目前支持 4 种方式的分配 
1)、轮询（默认） 
      每个请求按时间顺序逐一分配到不同的后端服务器，如果后端服务器down掉，能自动剔除。 
2)、weight 
      指定轮询几率，weight和访问比率成正比</div>
                                </li>
                                <li><a href="/article/235.htm"
                                       title="RedHat 6.4 安装 rabbitmq" target="_blank">RedHat 6.4 安装 rabbitmq</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/erlang/1.htm">erlang</a><a class="tag" taget="_blank" href="/search/rabbitmq/1.htm">rabbitmq</a><a class="tag" taget="_blank" href="/search/redhat/1.htm">redhat</a>
                                    <div>在 linux 下安装软件就是折腾，首先是测试机不能上外网要找运维开通，开通后发现测试机的 yum 不能使用于是又要配置 yum 源，最后安装 rabbitmq 时也尝试了两种方法最后才安装成功 
 
机器版本： 
 
[root@redhat1 rabbitmq]# lsb_release
LSB Version:    :base-4.0-amd64:base-4.0-noarch:core</div>
                                </li>
                                <li><a href="/article/362.htm"
                                       title="FilenameUtils工具类" target="_blank">FilenameUtils工具类</a>
                                    <span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/FilenameUtils/1.htm">FilenameUtils</a><a class="tag" taget="_blank" href="/search/common-io/1.htm">common-io</a>
                                    <div>转载请出自出处：http://eksliang.iteye.com/blog/2217081 一、概述 
这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。 非常的好用。 </div>
                                </li>
                                <li><a href="/article/489.htm"
                                       title="xml文件解析SAX" target="_blank">xml文件解析SAX</a>
                                    <span class="text-muted">不懂事的小屁孩</span>
<a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a>
                                    <div>xml文件解析:xml文件解析有四种方式， 
1.DOM生成和解析XML文档(SAX是基于事件流的解析) 
2.SAX生成和解析XML文档(基于XML文档树结构的解析) 
3.DOM4J生成和解析XML文档 
4.JDOM生成和解析XML  
本文章用第一种方法进行解析，使用android常用的DefaultHandler 
 
 
import org.xml.sax.Attributes;
</div>
                                </li>
                                <li><a href="/article/616.htm"
                                       title="通过定时任务执行mysql的定期删除和新建分区，此处是按日分区" target="_blank">通过定时任务执行mysql的定期删除和新建分区，此处是按日分区</a>
                                    <span class="text-muted">酷的飞上天空</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
                                    <div>使用python脚本作为命令脚本，linux的定时任务来每天定时执行 
  
#!/usr/bin/python
# -*- coding: utf8 -*-
import pymysql
import datetime
import calendar

#要分区的表
table_name = 'my_table'
#连接数据库的信息
host,user,passwd,db = </div>
                                </li>
                                <li><a href="/article/743.htm"
                                       title="如何搭建数据湖架构？听听专家的意见" target="_blank">如何搭建数据湖架构？听听专家的意见</a>
                                    <span class="text-muted">蓝儿唯美</span>
<a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a>
                                    <div>Edo Interactive在几年前遇到一个大问题：公司使用交易数据来帮助零售商和餐馆进行个性化促销，但其数据仓库没有足够时间去处理所有的信用卡和借记卡交易数据 
 “我们要花费27小时来处理每日的数据量，”Edo主管基础设施和信息系统的高级副总裁Tim Garnto说道：“所以在2013年，我们放弃了现有的基于PostgreSQL的关系型数据库系统，使用了Hadoop集群作为公司的数</div>
                                </li>
                                <li><a href="/article/870.htm"
                                       title="spring学习——控制反转与依赖注入" target="_blank">spring学习——控制反转与依赖注入</a>
                                    <span class="text-muted">a-john</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a>
                                    <div>       控制反转（Inversion of Control，英文缩写为IoC）是一个重要的面向对象编程的法则来削减计算机程序的耦合问题，也是轻量级的Spring框架的核心。 控制反转一般分为两种类型，依赖注入（Dependency Injection，简称DI）和依赖查找（Dependency Lookup）。依赖注入应用比较广泛。 
  
</div>
                                </li>
                                <li><a href="/article/997.htm"
                                       title="用spool+unixshell生成文本文件的方法" target="_blank">用spool+unixshell生成文本文件的方法</a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/xshell/1.htm">xshell</a>
                                    <div>例如我们把scott.dept表生成文本文件的语句写成dept.sql,内容如下:  
　　set pages 50000; 
　　set lines 200; 
　　set trims on; 
　　set heading off; 
　　spool /oracle_backup/log/test/dept.lst; 
　　select deptno||','||dname||','||loc </div>
                                </li>
                                <li><a href="/article/1124.htm"
                                       title="1、基础--名词解析(OOA/OOD/OOP)" target="_blank">1、基础--名词解析(OOA/OOD/OOP)</a>
                                    <span class="text-muted">asia007</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/1.htm">学习基础知识</a>
                                    <div>OOA:Object-Oriented Analysis（面向对象分析方法） 
是在一个系统的开发过程中进行了系统业务调查以后，按照面向对象的思想来分析问题。OOA与结构化分析有较大的区别。OOA所强调的是在系统调查资料的基础上，针对OO方法所需要的素材进行的归类分析和整理，而不是对管理业务现状和方法的分析。 
　　OOA（面向对象的分析）模型由5个层次（主题层、对象类层、结构层、属性层和服务层）</div>
                                </li>
                                <li><a href="/article/1251.htm"
                                       title="浅谈java转成json编码格式技术" target="_blank">浅谈java转成json编码格式技术</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/json%E7%BC%96%E7%A0%81/1.htm">json编码</a><a class="tag" taget="_blank" href="/search/java%E8%BD%AC%E6%88%90json%E7%BC%96%E7%A0%81/1.htm">java转成json编码</a>
                                    <div>json编码;是一个轻量级的数据存储和传输的语言 
   
   在java中需要引入json相关的包,引包方式在工程的lib下就可以了 
  
JSON与JAVA数据的转换（JSON 即 JavaScript Object Natation，它是一种轻量级的数据交换格式，非 
  
常适合于服务器与 JavaScript 之间的数据的交</div>
                                </li>
                                <li><a href="/article/1378.htm"
                                       title="web.xml之Spring配置(基于Spring+Struts+Ibatis)" target="_blank">web.xml之Spring配置(基于Spring+Struts+Ibatis)</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/web.xml/1.htm">web.xml</a><a class="tag" taget="_blank" href="/search/SSI/1.htm">SSI</a><a class="tag" taget="_blank" href="/search/spring%E9%85%8D%E7%BD%AE/1.htm">spring配置</a>
                                    <div>指定Spring配置文件位置 
<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>
			/WEB-INF/spring-dao-bean.xml,/WEB-INF/spring-resources.xml,
			/WEB-INF/</div>
                                </li>
                                <li><a href="/article/1505.htm"
                                       title="Installing SonarQube（Fail to download libraries from server）" target="_blank">Installing SonarQube（Fail to download libraries from server）</a>
                                    <span class="text-muted">sunjing</span>
<a class="tag" taget="_blank" href="/search/Install/1.htm">Install</a><a class="tag" taget="_blank" href="/search/Sonar/1.htm">Sonar</a>
                                    <div>1.  Download and unzip the SonarQube distribution  
2.  Starting the Web Server 
The default port is "9000" and the context path is "/". These values can be changed in &l</div>
                                </li>
                                <li><a href="/article/1632.htm"
                                       title="【MongoDB学习笔记十一】Mongo副本集基本的增删查" target="_blank">【MongoDB学习笔记十一】Mongo副本集基本的增删查</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a>
                                    <div>一、创建复本集 
  
假设mongod,mongo已经配置在系统路径变量上，启动三个命令行窗口，分别执行如下命令： 
  
mongod --port 27017 --dbpath  data1 --replSet rs0

mongod --port 27018 --dbpath  data2 --replSet rs0

mongod --port 27019 -</div>
                                </li>
                                <li><a href="/article/1759.htm"
                                       title="Anychart图表系列二之执行Flash和HTML5渲染" target="_blank">Anychart图表系列二之执行Flash和HTML5渲染</a>
                                    <span class="text-muted">白糖_</span>
<a class="tag" taget="_blank" href="/search/Flash/1.htm">Flash</a>
                                    <div>今天介绍Anychart的Flash和HTML5渲染功能 
  
 
 HTML5 
 
Anychart从6.0第一个版本起，已经逐渐开始支持各种图的HTML5渲染效果了，也就是说即使你没有安装Flash插件，只要浏览器支持HTML5，也能看到Anychart的图形（不过这些是需要做一些配置的）。 
这里要提醒下大家，Anychart6.0版本对HTML5的支持还不算很成熟，目前还处于</div>
                                </li>
                                <li><a href="/article/1886.htm"
                                       title="Laravel版本更新异常4.2.8-> 4.2.9 Declaration of ... CompilerEngine ... should be compa" target="_blank">Laravel版本更新异常4.2.8-> 4.2.9 Declaration of ... CompilerEngine ... should be compa</a>
                                    <span class="text-muted">bozch</span>
<a class="tag" taget="_blank" href="/search/laravel/1.htm">laravel</a>
                                    <div>昨天在为了把laravel升级到最新的版本，突然之间就出现了如下错误： 
ErrorException thrown with message "Declaration of Illuminate\View\Engines\CompilerEngine::handleViewException() should be compatible with Illuminate\View\Eng</div>
                                </li>
                                <li><a href="/article/2013.htm"
                                       title="编程之美-NIM游戏分析-石头总数为奇数时如何保证先动手者必胜" target="_blank">编程之美-NIM游戏分析-石头总数为奇数时如何保证先动手者必胜</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a>
                                    <div>


import java.util.Arrays;
import java.util.Random;

public class Nim {

	/**编程之美 NIM游戏分析
问题：
有N块石头和两个玩家A和B，玩家A先将石头随机分成若干堆，然后按照BABA...的顺序不断轮流取石头，
能将剩下的石头一次取光的玩家获胜，每次取石头时，每个玩家只能从若干堆石头中任选一堆，</div>
                                </li>
                                <li><a href="/article/2140.htm"
                                       title="lunce创建索引及简单查询" target="_blank">lunce创建索引及简单查询</a>
                                    <span class="text-muted">chengxuyuancsdn</span>
<a class="tag" taget="_blank" href="/search/%E6%9F%A5%E8%AF%A2/1.htm">查询</a><a class="tag" taget="_blank" href="/search/%E5%88%9B%E5%BB%BA%E7%B4%A2%E5%BC%95/1.htm">创建索引</a><a class="tag" taget="_blank" href="/search/lunce/1.htm">lunce</a>
                                    <div>import java.io.File;
import java.io.IOException;

import org.apache.lucene.analysis.Analyzer;
import org.apache.lucene.analysis.standard.StandardAnalyzer;
import org.apache.lucene.document.Docume</div>
                                </li>
                                <li><a href="/article/2267.htm"
                                       title="[IT与投资]坚持独立自主的研究核心技术" target="_blank">[IT与投资]坚持独立自主的研究核心技术</a>
                                    <span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/it/1.htm">it</a>
                                    <div> 
 
       和别人合作开发某项产品....如果互相之间的技术水平不同,那么这种合作很难进行,一般都会成为强者控制弱者的方法和手段..... 
 
 
       所以弱者,在遇到技术难题的时候,最好不要一开始就去寻求强者的帮助,因为在我们这颗星球上,生物都有一种控制其</div>
                                </li>
                                <li><a href="/article/2394.htm"
                                       title="flashback transaction闪回事务查询" target="_blank">flashback transaction闪回事务查询</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E9%97%AA%E5%9B%9E%E4%BA%8B%E5%8A%A1/1.htm">闪回事务</a>
                                    <div>   
闪回事务查询有别于闪回查询的特点有以下3个： 
 
（1）其正常工作不但需要利用撤销数据，还需要事先启用最小补充日志。 
 
（2）返回的结果不是以前的“旧”数据，而是能够将当前数据修改为以前的样子的撤销SQL（Undo SQL）语句。 
 
（3）集中地在名为flashback_transaction_query表上查询，而不是在各个表上通过“as of”或“vers</div>
                                </li>
                                <li><a href="/article/2521.htm"
                                       title="Java I/O之FilenameFilter类列举出指定路径下某个扩展名的文件" target="_blank">Java I/O之FilenameFilter类列举出指定路径下某个扩展名的文件</a>
                                    <span class="text-muted">游其是你</span>
<a class="tag" taget="_blank" href="/search/FilenameFilter/1.htm">FilenameFilter</a>
                                    <div>这是一个FilenameFilter类用法的例子，实现的列举出“c:\\folder“路径下所有以“.jpg”扩展名的文件。        1   2   3   4   5   6   7   8   9   10   11   12   13   14   15   16   17   18   19   20   21   22   23   24   25   26   27   28  </div>
                                </li>
                                <li><a href="/article/2648.htm"
                                       title="C语言学习五函数，函数的前置声明以及如何在软件开发中合理的设计函数来解决实际问题" target="_blank">C语言学习五函数，函数的前置声明以及如何在软件开发中合理的设计函数来解决实际问题</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/c/1.htm">c</a>
                                    <div># include <stdio.h>

int f(void)		//括号中的void表示该函数不能接受数据，int表示返回的类型为int类型
{
	return 10;	//向主调函数返回10
}

void g(void)	//函数名前面的void表示该函数没有返回值
{
	//return 10;	//error 与第8行行首的void相矛盾
}

in</div>
                                </li>
                                <li><a href="/article/2775.htm"
                                       title="今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Pl" target="_blank">今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Pl</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a>
                                    <div>今天在测试环境使用yum安装，遇到一个问题： 
Error: Cannot retrieve metalink for repository: epel. Please verify its path and try again 
  
处理很简单，修改文件“/etc/yum.repos.d/epel.repo”， 将baseurl的注释取消， mirrorlist注释掉。即可。 
&n</div>
                                </li>
                                <li><a href="/article/2902.htm"
                                       title="单例模式" target="_blank">单例模式</a>
                                    <span class="text-muted">shuizhaosi888</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F/1.htm">单例模式</a>
                                    <div>单例模式        懒汉式 
public class RunMain {

	/**
	 * 私有构造
	 */
	private RunMain() {
	}
	
    /**
     * 内部类，用于占位，只有
     */
	private static class SingletonRunMain {
		priv</div>
                                </li>
                                <li><a href="/article/3029.htm"
                                       title="Spring Security（09）——Filter" target="_blank">Spring Security（09）——Filter</a>
                                    <span class="text-muted">234390216</span>
<a class="tag" taget="_blank" href="/search/Spring+Security/1.htm">Spring Security</a>
                                    <div>Filter 
目录 
1.1     Filter顺序 
1.2     添加Filter到FilterChain 
1.3     DelegatingFilterProxy 
1.4     FilterChainProxy 
1.5</div>
                                </li>
                                <li><a href="/article/3156.htm"
                                       title="公司项目NODEJS实践0.1" target="_blank">公司项目NODEJS实践0.1</a>
                                    <span class="text-muted">逐行分析JS源代码</span>
<a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a>
                                    <div>  
一、前言 
        前端如何独立用nodeJs实现一个简单的注册、登录功能，是不是只用nodejs+sql就可以了？其实是可以实现，但离实际应用还有距离，那要怎么做才是实际可用的。 
        网上有很多nod</div>
                                </li>
                                <li><a href="/article/3283.htm"
                                       title="java.lang.Math" target="_blank">java.lang.Math</a>
                                    <span class="text-muted">liuhaibo_ljf</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a><a class="tag" taget="_blank" href="/search/lang/1.htm">lang</a>
                                    <div>System.out.println(Math.PI); 
System.out.println(Math.abs(1.2)); 
System.out.println(Math.abs(1.2)); 
System.out.println(Math.abs(1)); 
System.out.println(Math.abs(111111111)); 
System.out.println(Mat</div>
                                </li>
                                <li><a href="/article/3410.htm"
                                       title="linux下时间同步" target="_blank">linux下时间同步</a>
                                    <span class="text-muted">nonobaba</span>
<a class="tag" taget="_blank" href="/search/ntp/1.htm">ntp</a>
                                    <div>今天在linux下做hbase集群的时候，发现hmaster启动成功了，但是用hbase命令进入shell的时候报了一个错误  PleaseHoldException: Master is initializing，查看了日志，大致意思是说master和slave时间不同步，没办法，只好找一种手动同步一下，后来发现一共部署了10来台机器，手动同步偏差又比较大，所以还是从网上找现成的解决方</div>
                                </li>
                                <li><a href="/article/3537.htm"
                                       title="ZooKeeper3.4.6的集群部署" target="_blank">ZooKeeper3.4.6的集群部署</a>
                                    <span class="text-muted">roadrunners</span>
<a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a><a class="tag" taget="_blank" href="/search/%E9%9B%86%E7%BE%A4/1.htm">集群</a><a class="tag" taget="_blank" href="/search/%E9%83%A8%E7%BD%B2/1.htm">部署</a>
                                    <div>ZooKeeper是Apache的一个开源项目，在分布式服务中应用比较广泛。它主要用来解决分布式应用中经常遇到的一些数据管理问题，如：统一命名服务、状态同步、集群管理、配置文件管理、同步锁、队列等。这里主要讲集群中ZooKeeper的部署。 
  
1、准备工作 
我们准备3台机器做ZooKeeper集群，分别在3台机器上创建ZooKeeper需要的目录。 
  
数据存储目录</div>
                                </li>
                                <li><a href="/article/3664.htm"
                                       title="Java高效读取大文件" target="_blank">Java高效读取大文件</a>
                                    <span class="text-muted">tomcat_oracle</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>　　读取文件行的标准方式是在内存中读取，Guava 和Apache Commons IO都提供了如下所示快速读取文件行的方法：   　　Files.readLines(new File(path), Charsets.UTF_8);   　　FileUtils.readLines(new File(path));   　　这种方法带来的问题是文件的所有行都被存放在内存中，当文件足够大时很快就会导致</div>
                                </li>
                                <li><a href="/article/3791.htm"
                                       title="微信支付api返回的xml转换为Map的方法" target="_blank">微信支付api返回的xml转换为Map的方法</a>
                                    <span class="text-muted">xu3508620</span>
<a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/map/1.htm">map</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1api/1.htm">微信api</a>
                                    <div>举例如下： 
<xml> 
   <return_code><![CDATA[SUCCESS]]></return_code> 
   <return_msg><![CDATA[OK]]></return_msg> 
   <appid><</div>
                                </li>
                </ul>
            </div>
        </div>
    </div>

<div>
    <div class="container">
        <div class="indexes">
            <strong>按字母分类：</strong>
            <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
                href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
                href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
                href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
                href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
                href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
                href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
                href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
                href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
        </div>
    </div>
</div>
<footer id="footer" class="mb30 mt30">
    <div class="container">
        <div class="footBglm">
            <a target="_blank" href="/">首页</a> -
            <a target="_blank" href="/custom/about.htm">关于我们</a> -
            <a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
            <a target="_blank" href="/sitemap.txt">Sitemap</a> -
            <a target="_blank" href="/custom/delete.htm">侵权投诉</a>
        </div>
        <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
<!--            <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
        </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>