HTML基础

HTML 是 Web 标准中的第一层,主要用于构建网页的结构,描述页面的内容,在这里,我们能够初步学习到HTML 的相关语法以及最常用的标签。

1. HTML简单介绍

HTML,超文本标记语言(Hypertext Markup Language),超文本,超级文本的缩写,简单来说超文本就是用于链接另一个文本或多媒体内容的文本,比如图片、链接、音频、视频、程序等。而标记,也叫作标签,有着特殊的书写规范,是写给浏览器的一种语法格式,结合普通的文字信息,实现特殊的语义或显示内容。HTML利用标记给普通的文本添加语义、描述超文本内容,搭建网页的基本结构。

  • 网页的基本组成结构
    结构层(HTML):主要负责描述页面的结构以及内容
    表现层(CSS):主要通过CSS来负责页面的外观样式表现
    行为层(Javascript):通过JS实现用户的交互行为

  • 主流浏览器及内核
    IE/Edge: Trident内核, 前缀 -ms-
    Firefox: Gecko内核 , 前缀 -moz-
    Safari: Webkit内核, 前缀 -webkit-
    Opera: presto --> Webkit --> Blink, 前缀 -o-
    Chrome: Webkit ---> Blink( Google 与 Opera Software共同开发 ), 前缀 -webkit-

  • HTML的语义化及其优势

    文件中,使用特殊语义的标记,使得不同的内容具有不同的语义,能够让网站的结构划分更加清晰。

    语义化网页的优势:

    1、方便代码的阅读和后期维护
    2、便于浏览器或是网络爬虫更好地解析网站内容
    3、使用语义化标签,有利于SEO搜索引擎优化,提高网站的搜索排名

2. HTML基本结构

HTML文件的基本骨架
 
 
   
     
     文档标题
   
   
     文档主体部分
   
 
  • HTML文件最基本的四个标签,组成了网页的基本骨架,包括:</code>、<code><body></code>四组标签。</p></li> <li><p>!DOCTYPE<br> 文档声明类型,用于告知浏览器该网页使用的是哪个版本的HTML规范,让浏览器按照对应版本的HTML语法进行解析页面。</p></li> <li><p><html>标签<br> 根标签,表示整个的HTML文档,所有的标签要书写在<code><html></code>标签内。</p></li> <li> <p><head>标签<br> 用于存放<code><title>、<meta>、<base>、<style>、<script>、<link></code>,其内部用于对网页的设置。</p> <ul> <li><p><title>标签<br> 给页面定义标题,使页面拥有自己的名字。<br> <code><title></code>中的内容可以作为搜索引擎抓取时的关键字,提高SEO搜索引擎优化。</p></li> <li> <p><meta>标签<br> 通过相关属性声明文档的一些特殊信息,例如charset字符集编码,keywords关键字,description页面描述等。</p> <p>常见的字符集编码</p> <ul> <li><p>UTF-8:以字节为单位对Unicode万国码进行编码,涵盖了所有人类的语言文字,一个汉字为3个字节大小。</p></li> <li> <p>中文国标字库<br> gb2312:共收入汉字6763个和包括拉丁字母、希腊字母、日文平假名及片假名字母、俄语西里尔字母在内的682个。</p> <p>gbk:是gb2312的扩展,增加了繁体字,共收入 21886 个汉字和图形符号,其中汉字(包括部首和构件)21003 个,图形符号 883 个,一个汉字为2个字节大小。</p> </li> </ul> </li> </ul> </li> <li><p><body>标签<br> 定义网页的主体部分,用于存放所有的HTML显示内容的标签<code><p>、<h1>、<a>、<div></code>等。<br> <code><body></code>内部的元素内容会显示在浏览器的窗口中。</p></li> </ul> <h4>HTML常用标签</h4> <ul> <li>HTML标签<br> HTML 标记通常被称为 HTML 标签 <ul> <li>标签语法规范 <ol> <li><p>标签名必须书写在一对尖括号<code><></code>内部。</p></li> <li><p>标签分为单标签和双标签,双标签必须成对出现。<br> <p></p> 双标签<br> <br /> 单标签</p></li> <li><p>双标签包含开始标签和结束标签,结束标签必须书写关闭符号 <code>/</code>,单标签也需要进行自封闭书写。在HTML5中,单标签可以不写关闭符号。</p></li> </ol> </li> </ul> </li> </ul> <blockquote> <p><strong>HTML元素和HTML标签的不同概念</strong><br> HTML标签,指的是一对双标签或者单标签的HTML标记,不包含标签内的内容,而HTML元素指的是从开始标签到结束标签的所有内容,包含开始标签、元素内容、结束标签。</p> </blockquote> <ul> <li> <p>标签级别<br> • 根据标签内部可以存放的元素内容不同,可以将双标签划分为两个级别。</p> <ul> <li>容器级:标签内部可以存放任意内容,包含容器级标签。比如h1,div等。</li> <li>文本级:标签内部只能存放文字或类似文字的内容,比如存放图片、表单元素等。比如p等。</li> </ul> </li> <li> <p><strong>标题标签<h1>~<h6></strong><br> 标题标签的作用是给标签内部的元素内容添加对应级别标题的语义。</p> <p><code><h1></code>在整个HTML中的权重非常高,内部的内容对于提高搜索引擎排名也非常重要,因此<code><h1></code>应该放置HTML中最重要的内容。此外,为了防止作弊,如果一个页面出现多个<code><h1></code>,反而降低权重。约定俗成的,一个页面中只能出现一个<code><h1></code>。</p> </li> <li><p><strong>段落标签<p></strong><br> 给标签内部的内容添加一个完整段落语义,属于文本级标签。内部只能放置文本、图片、表单元素,或者废弃的<font>标签等。(不能嵌套其他块级标签,如<code><div></code>、<code><p></code>)</p></li> <li><p><strong>换行标签<br /></strong><br> <code><br /></code>标签是HTML中一个简单的换行符,属于<strong>单标签</strong>。在需要换行的位置可以使用<code><br /></code>标签书写</p></li> <li> <p><strong>常用的文本格式化类标签</strong></p> <ul> <li>文本格式化的标签均为双标签,且为文本级标签,内部只能书写文字。</li> </ul> <table> <thead> <tr> <th style="text-align:center">标签</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:center"><b></td> <td style="text-align:left"><strong>粗体</strong></td> </tr> <tr> <td style="text-align:center"><em></td> <td style="text-align:left"><em>着重、斜体</em></td> </tr> <tr> <td style="text-align:center"><i></td> <td style="text-align:left"><em>斜体</em></td> </tr> <tr> <td style="text-align:center"><small></td> <td style="text-align:left">小号字体</td> </tr> <tr> <td style="text-align:center"><strong></td> <td style="text-align:left"><strong>加重语气、粗体</strong></td> </tr> <tr> <td style="text-align:center"><sub></td> <td style="text-align:left">下标 H<sub>2</sub>O</td> </tr> <tr> <td style="text-align:center"><sup></td> <td style="text-align:left">上标 X<sup>2</sup> </td> </tr> <tr> <td style="text-align:center"><ins></td> <td style="text-align:left">插入字、下划线</td> </tr> <tr> <td style="text-align:center"><del></td> <td style="text-align:left"><del>删除字</del></td> </tr> </tbody> </table> </li> <li> <p><strong>图像标签<img></strong></p> <p><strong>单标签</strong>,在指定的位置插入一张图片。<code><img></code>常用属性:</p> <table> <thead> <tr> <th style="text-align:center">属性名</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:center">src</td> <td style="text-align:left">图片路径</td> </tr> <tr> <td style="text-align:center">width</td> <td style="text-align:left">宽度(像素数值)</td> </tr> <tr> <td style="text-align:center">height</td> <td style="text-align:left">高度(像素数值)</td> </tr> <tr> <td style="text-align:center">border</td> <td style="text-align:left">边框(数值)</td> </tr> <tr> <td style="text-align:center">title</td> <td style="text-align:left">提示文本</td> </tr> <tr> <td style="text-align:center">alt</td> <td style="text-align:left">设置图像未找到时的替换文本</td> </tr> </tbody> </table> <p>src属性和路径<br> <code><img></code>标签的各种属性写法:</p> <pre><code class="html"><img src="01.jpg" title="提示文本" alt="可替换文本" /> </code></pre> <p>路径----相对路径与绝对路径<br> 相对路径:查找文件时,需要从文件本身出发,根据相对的位置进行查找,包含 三种查找方式: 同级查找(如:./<em>.jpg)、子级查找(./images/</em>.jpg)、上级查找(../images/*.jpg)</p> <p>绝对路径: 查找文件时,直接从电脑的盘符出发进行查找,或者使用网址形式查找。(如:C:/User/.../<em>.jpg 或者 http://.../xxx/</em>.jpg)</p> <p><strong>一般使用相对路径(文件的相对位置需要保持不变),可以适当使用网址形式的绝对路径</strong></p> </li> <li> <p><strong>超链接标签<a></strong><br> 在指定的位置添加超链接,提供用户进行点击和跳转。</p> <p><a>标签的属性值</p> <ul> <li>href: 设置链接目标的路径地址</li> <li>target:定义被链接的文档在何处跳转显示,主要可选值: <ul> <li>_self: 默认值,表示在当前窗口打开</li> <li>_blank: 空白的,表示跳转的页面在新窗口打开</li> </ul> </li> <li>title: 鼠标悬停时的提示文本,提高用户体验</li> </ul> <p>超链接标签的写法</p> <pre><code><a href="http://www.baidu.com" target="_blank" title="跳转到百度页面">链接</a> </code></pre> <p><code><a></code>标签可以实现两种跳转:<strong>跨页面跳转</strong>、<strong>页面内跳转</strong>。</p> <p><strong>页面内跳转</strong></p> <ol> <li>步骤一:设置锚点(跳转的目标位置),有两种方式<br> 方式 1:在目标位置找到任一标签,给它添加id属性,id的属性值必须唯一<br> <code><p id="mubiao">目标位置</p></code><br> 方式 2:在目标位置添加一个空的<code><a></code>标签,只设置一个name属性,name属性值必须唯一<br> <code><a name="mubiao"></a></code> </li> <li>步骤二:添加链接<br> 链接到锚点,在需要点击的位置设置<code><a></code>标签,给a的href属性设置属性值为#id属性值或者#加a的name属性值。<br> <code><a href="#mubiao">跳转</a></code> </li> </ol> <p><strong>跨页面跳转</strong></p> <ol> <li>步骤一:设置锚点。方式与页面内锚点跳转一致</li> <li>步骤二:添加链接。相当于先跳转到另一个页面(new.html),再进行页面内跳转。<br> <code><a href="new.html#mubiao">跳转</a></code> </li> </ol> </li> <li> <p><strong>列表标签(无序列表、有序列表、定义列表)</strong></p> <p><strong>无序列表<code><ul></code></strong></p> <p>由两个标签组成,<code><ul></code>、<code><li></code>,两者是嵌套关系,一个列表中可以有任意个列表项。</p> <pre><code><ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> </ul> 默认显示效果: • 列表项1 • 列表项2 • 列表项3 • 列表项4 </code></pre> <p><code><ul></code>内部只能嵌套<code><li></code>,<code><li></code>标签不能脱离<code><ul></code>单独书写,列表项无顺序之分。</p> <p><code><li></code>标签是一个经典的容器级标签,内部可以放置任意内容,甚至可以再次嵌套一个列表。</p> <p><strong>有序列表<code><ol></code></strong></p> <p>与无序列表一样,只是语义不同,由两个标签组成,<code><ol></code>、<code><li></code></p> <pre><code><ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> </ol> 默认显示效果: 1. 列表项1 2. 列表项2 3. 列表项3 4. 列表项4 </code></pre> <p><code><ol></code>内部只能嵌套<code><li></code>,<code><li></code>标签不能脱离<code><ol></code>单独书写,列表项之间存在顺序先后之分。</p> <p><code><li></code>标签是一个经典的容器级标签,内部可以放置任意内容,甚至可以再次嵌套一个列表。</p> <p><strong>定义列表<code><dl></code></strong></p> <p>自定义列表不仅仅是一列项目,而是项目及其注释的组合。由三个标签组成完整的结构<code><dl</code>>、<code><dt></code>、<code><dd></code>。<dl>内部只能嵌套<dt>和<dd>,<dt>与<dd>是同级关系。</p> <pre><code> <dl> <dt>主题</dt> <dd>解释项1</dd> <dd>解释项2</dd> </dl> </code></pre> <p><code><dl></code>内部只能嵌套<code><dt></code>和<code><dd></code>,<code><dt></code>与<code><dd></code>不能脱离<code><dl></code>单独书写。</p> <p>dl内部可以放多组dt和dd(不建议放多组),每个dd解释说明的是前面的距离最近的一个dt。</p> <p>每个dt后面可以有0到多个解释项的dd,每个dd解释的都是前面距离最近的一个dt。</p> <p>dt和dd标签也是容器级标签,内部可以放置任意内容。dl定义列表可以应用于<strong>图文混排</strong>的效果。</p> </li> <li> <p><strong>常用布局标签<code><div></code>和<code><span></code></strong></p> <p>常用作布局,没有具体明确的语义。<code><div></code>标签多用于划分网页区域,进行结构布局,整体设置大的布局效果;<code><span></code>标签可辅助进行局部调整。</p> </li> <li> <p><strong>表格标签<table></strong></p> <p>表格主要需要这三个标签,<code><table></code>、<code><tr></code>、<code><td></code><br> 三者是嵌套关系:table > tr > td ,一个表格中有多个行,每个行中有多个单元格</p> <p><strong>table属性</strong></p> <ul> <li>border:边框属性。属性值:数字,表示像素值。</li> <li>cellspacing:定义单元格之间的间隔。(可以使用css设置border-collapse属性替代)</li> <li>cellpadding :定义单元格边沿与其内容之间的距离。(不建议使用,后期使用css设置内边距)</li> <li> <strong>border-collapse</strong>:设置表格的边框是否被合并为一个单一的边框(css样式属性)。默认情况下表格的单元格之间有空隙(默认值是separate),会导致双线边框,将值设置为collapse,去掉多余的边框(设置此属性,cellspacing属性将失效)。</li> <li>table-layout:设置表格单元格宽高是否固定。automatic(自动布局,内容决定宽度)、fixed(固定表格布局,列宽由表格宽度和列宽度设定)。<br> <strong>制作表格的相关标签</strong> </li> <li>th: 表格表头(粗体居中)</li> <li>tr: 表格行数</li> <li>td:表格单元格,有以下属性:<br> rowspan:跨行合并(上下的合并)<br> colspan:跨列合并(左右的合并)<br> 属性值为<strong>数字</strong>,表示合并几行或几列</li> </ul> <p>表格书写示例:</p> <pre><code class="html"><table> <tr> <th>姓名</th><th>性别</th> </tr> <tr> <td>张三</td><td>男</td> </tr> <tr> <td>李四</td><td>男</td> </tr> </table> </code></pre> <blockquote> <p>制作表格的技巧<br> 1. 先列出所有行<tr>,以最小单元格为标准。<br> 2. 再添加每一行的<td>或<th>单元格。<br> 3. 划分单元格所在行时,顶边对齐的属于同一行。<br> 4. 将所有行和列写完后,再查看哪个单元格有跨行或跨列,属性值的个数要参考最小的单元格。</p> </blockquote> <p><strong>表格的分区标签</strong><br> <table>内部最直接的子级包含四个分区标签。</p> <table> <thead> <tr> <th style="text-align:center">标签</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:center">caption</td> <td style="text-align:left">表格的标题,书写标题文字</td> </tr> <tr> <td style="text-align:center">thead</td> <td style="text-align:left">表格的头部,内部嵌套tr>th</td> </tr> <tr> <td style="text-align:center">tbody</td> <td style="text-align:left">表格的主体,内部嵌套tr>td</td> </tr> <tr> <td style="text-align:center">tfoot</td> <td style="text-align:left">表格的页脚,内部嵌套tr>td</td> </tr> </tbody> </table> <p>浏览器对Table的解析是等待整个table全部加载完才显示。如果加入tbody,浏览器则一边下载一边显示已经下载的内容。(这一点很有意义)</p> <p>四个分区标签可以选择性的进行组合,其中最主要的标签是tbody。无论顺序如何颠倒,浏览器中的加载顺序都是自动按照caption、thead、tbody、tfoot执行的。</p> <p>一般使用顺序:thead,tfoot,tbody。tfoot在tbody之前,目的是为了让tbody内容过多时,tfoot的内容能先显示出来。</p> <pre><code><table border="1"> <thead> <tr> <th>姓名</th><th>性别</th> </tr> </thead> <tfoot> <tr> <td colspan="2">工作人员的相关信息</td> </tr> </tfoot> <tbody> <tr> <td>张三</td><td>男</td> </tr> <tr> <td>李四</td><td>男</td> </tr> </tbody> </table> </code></pre> </li> <li> <p><strong><form>表单</strong></p> <ul> <li><p>表单的作用<br> 搜集不同类型的用户输入数据。</p></li> <li><p>表单的组成<br> 表单域、提示信息和表单控件。</p></li> <li><p>表单的功能:<br> 表单域:相当于一个容器,用来容纳所有的表单控件和提示信息,定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。<br> 提示信息:一个表单中通常还需要包含一些说明性的文字,提示用户进行相关填写与操作。<br> 表单控件:包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。</p></li> <li><p><strong>表单域标签<code><form></code></strong><br> 通过对应属性规定提交数据的方法和提交位置</p></li> </ul> <pre><code><form action="xxx.php" method="post/get" name="message"> 提示信息及表单控件书写位置 </form> </code></pre> <table> <thead> <tr> <th style="text-align:left">属性</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left">action</td> <td style="text-align:left">url形式,提交表单数据的服务器url地址</td> </tr> <tr> <td style="text-align:left">method</td> <td style="text-align:left">get/post,设置表单数据提交方式</td> </tr> <tr> <td style="text-align:left">name</td> <td style="text-align:left">规定表单名称</td> </tr> </tbody> </table> <ul> <li> <p><strong><input>标签</strong> <br> <code><input></code>是最重要的一个表单元素,<strong>单标签</strong>,通过标签属性实现各种功能 。</p> <p><input>的type属性类型</p> <table> <thead> <tr> <th style="text-align:left">type属性值</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left">text</td> <td style="text-align:left">单行文本输入框</td> </tr> <tr> <td style="text-align:left">password</td> <td style="text-align:left">密码输入框</td> </tr> <tr> <td style="text-align:left">radio</td> <td style="text-align:left">单选框</td> </tr> <tr> <td style="text-align:left">checkbox</td> <td style="text-align:left">复选框</td> </tr> <tr> <td style="text-align:left">button</td> <td style="text-align:left">普通按钮</td> </tr> <tr> <td style="text-align:left">reset</td> <td style="text-align:left">重置按钮</td> </tr> <tr> <td style="text-align:left">submit</td> <td style="text-align:left">提交按钮</td> </tr> <tr> <td style="text-align:left">image</td> <td style="text-align:left">图像形式的按钮,利用src厲性 查找图片路径</td> </tr> <tr> <td style="text-align:left">file</td> <td style="text-align:left">文件上传按钮,定义了输入字段和"浏览按钮"</td> </tr> <tr> <td style="text-align:left">hidden</td> <td style="text-align:left">隐藏按钮(客户端不可见,服务器可见)</td> </tr> </tbody> </table> <p>input其他常用属性:</p> <ul> <li>name:自定义值, 定义控件的名称,关键属性,提交时数据对应着相应的name</li> <li>value:自定义值,定义控件的默认文本值</li> <li>size:数值,定义控件的宽度</li> <li>checked:布尔值,checked,默认是否被选中</li> <li>maxlength:数值,定义允许输入的最多字符数</li> <li>readonly:布尔值,readonly,指定文本框的值只可读,不允许修改(js可改),数据仍然能够被提交</li> <li>disabled:布尔值,disabled,指定该控件被禁用,数据无法提交</li> </ul> <p><strong><input>写法</strong></p> <pre><code class="html"><input type=" " value="默认输入文本" name=" "> </code></pre> <p>四种按钮类型</p> <table> <thead> <tr> <th style="text-align:left">type</th> <th style="text-align:left">名称</th> <th style="text-align:left">特点</th> </tr> </thead> <tbody> <tr> <td style="text-align:left">button</td> <td style="text-align:left">普通按钮</td> <td style="text-align:left">无任何特殊功能</td> </tr> <tr> <td style="text-align:left">reset</td> <td style="text-align:left">重置按钮</td> <td style="text-align:left">将填写的表单内容清空,恢复成默认</td> </tr> <tr> <td style="text-align:left">submit</td> <td style="text-align:left">提交按钮</td> <td style="text-align:left">数据提交,并重置清空<code><form></code>中填写的倌息</td> </tr> <tr> <td style="text-align:left">image</td> <td style="text-align:left">图片按钮</td> <td style="text-align:left">默认与提交按钮的效果相同</td> </tr> </tbody> </table> </li> <li><p>文件上传<code><input type="file"/></code> 设置multiple属性能够上传多个文件。</p></li> <li> <p><strong>文本域<textarea></textarea></strong><br> 可输入多行文本区域。<code><textarea></code>有两个标签属性,可以设置显示区域大小。(注意空白折叠现象)</p> <ul> <li>rows:行数,可显示的最大行数,若超过行数则会被隐藏并且出现滚动条。</li> <li>cols:列数,表示在出现滚动条之后,每一行显示的最大字节数(一个汉字按2字节计算)。</li> </ul> </li> <li> <p><strong>下拉菜单</strong><br> 下拉菜单由两个标签组成</p> <ul> <li> <code><select></code>:选择,表示定义下拉菜单整体结构。</li> <li> <code><option></code>:选项,表示定义下拉菜单的每一项。</li> </ul> <pre><code class="html"><!-- select > option,option可以有任意多项 --> <select name="city1"> <option value=''>北京</option> <option>上海</option> <option>武汉</option> <option>广州</option> </select> <!-- 可以对下拉菜单项进行分组管理(optgroup) --> <!-- select > optgroup > option --> <!-- optgroup有一个abel属性,表示给这一组选项添加一个分组标签名 --> <select name="city2"> <optgroup label="湖北省"> <option>武汉</option> <option selected="selected">黄石</option> </optgroup> <optgroup label="广东省"> <option>广州</option> <option>深圳</option> </optgroup> </select> </code></pre> </li> <li> <p><strong><label>标签</strong><br> 能够为表单元素定义标注(标记)。</p> <p>如果将表单控件与提示内容使用<code><label></code>进行绑定后,当用户鼠标点击<code><label></code>内的提示内容时,浏览器会自动将焦点转到和标签相关的表单控件上。</p> <p>与表单控件的绑定方式:</p> <ol> <li>给<code><label></code>标签设置<strong>for</strong>属性,属性值为绑定的表单元素的<strong>id属性值</strong> </li> </ol> <pre><code class="html"><input type="checkbox" name="hobby" id="sport" /> <label for="sport">运动</label> </code></pre> <ol start="2"> <li>直接使用<code><label></code>标签将绑定内容与表单元素一起进行嵌套</li> </ol> <pre><code class="html"><label><input type="radio" name="sex" />男</label> </code></pre> </li> </ul> </li> <li><p><strong>字符实体</strong><br> 规则:所有的字符实体和实体编号都是以 <strong>&</strong> 开头,以 <strong>;</strong> 结尾。常用的字符实体有:<br> <code><</code>(< less than) 、<code>></code>(> great than)、<code> </code>(空格)、 <code>©</code>(©版权)、<code>¥</code>(¥)、 <code>×</code>(x)</p></li> </ul> </article> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1721199949338718208"></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/1833656298739167232.htm" title="HTML5全面知识点" target="_blank">HTML5全面知识点</a> <span class="text-muted">A_cot</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>HTML(HyperTextMarkupLanguage)是构建网页的基础语言。以下是全面的HTML知识点:一、HTML基础概念定义:HTML是一种用于描述网页结构的标记语言,通过各种标签来定义网页的内容和布局。版本历史:从HTML的早期版本发展到现在的HTML5,功能不断增强,支持更多的多媒体和交互特性。二、HTML文档结构声明:用于告诉浏览器文档类型是HTML5。标签:整个HTML文档的根元素</div> </li> <li><a href="/article/1833483835501801472.htm" title="【html+css网站设计】" target="_blank">【html+css网站设计】</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/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>学习笔记:HTML基础概念1.vscode常用设置1.1打开文件1.2新建文件1.3自动保存(ctrl+S)1.4文件重命名1.5删除文件2.vscode常用快捷键2.1自动补全HTML基本结构2.2标签自动补全2.3复制当前行|复制多行2.4删除当前行|删除多行2.5单行注释|取消单行注释2.6多行注释|取消多行注释2.7统一编辑2.8生成多个2.9文字2.10打开浏览器2.11快捷键可以组合使</div> </li> <li><a href="/article/1829738462832586752.htm" title="30分钟从零开始入门拿下 HTML" target="_blank">30分钟从零开始入门拿下 HTML</a> <span class="text-muted">Y_3_7</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%96%B9%E6%B3%95/1.htm">学习方法</a> <div>⭐HTML⭐主要内容认识HTML的基本结构,学习常⽤的HTML标签.1.HTML基础1.1什么是HTMLHTML(HyperTextMarkupLanguage),超⽂本标记语⾔.超⽂本:⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.标记语⾔:由标签构成的语⾔HTML的标签都是提前定义好的,使⽤</div> </li> <li><a href="/article/1827558904540786688.htm" title="HTML1:html基础" target="_blank">HTML1:html基础</a> <span class="text-muted">0cfjg0</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/1.htm">前端技术</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>HTML冯诺依曼体系结构运算器控制器存储器输入设备输出设备c/s(client客户端)客户端架构软件需要安装,更新麻烦,不跨平台b/s(browser浏览器)网页架构软件无需安装,无需更新,可跨平台浏览器浏览器内核:处理浏览器得到的各种资源网页:结构HTML(超文本标记语言)表现CSS行为JavaScript冲突的标签属性以先写的为主127.0.0.1:5500服务器地址HTML超文本标记语言ht</div> </li> <li><a href="/article/1770882642342903808.htm" title="Java基础知识总结(下)" target="_blank">Java基础知识总结(下)</a> <span class="text-muted">Yonagi833</span> <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E7%BB%8Fand%E5%85%AB%E8%82%A1/1.htm">面经and八股</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>本文部分内容节选自JavaGuide,地址:https://javaguide.cn/java/basis/java-basic-questions-03.html基础(上)→基础(中)→基础(下)异常Java异常类层次图概览Exception和Error有什么区别?在Java中,所有的异常都有一个共同的祖先java.lang包中的Throwable类.Throwable类有两个重要的子类:Exc</div> </li> <li><a href="/article/1767356812262178816.htm" title="第1天:基础入门-操作系统&名词&文件下载&反弹Shell&防火墙绕过-小迪安全学习" target="_blank">第1天:基础入门-操作系统&名词&文件下载&反弹Shell&防火墙绕过-小迪安全学习</a> <span class="text-muted">慘綠青年627</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a> <div>名词概念前后端,POC/EXP,Payload/Shellcode,后门/Webshell,木马/病毒,反弹,回显,跳板,黑白盒测试,暴力破解,社会工程学,撞库,ATT&CK等https://www.cnblogs.com/sunny11/p/13583083.html基础案例1:操作系统-用途&命令&权限&用户&防火墙个人计算机&服务器用机Windows&Linux常见命令https://blo</div> </li> <li><a href="/article/1759904066001006592.htm" title="前端|Day1: HTML基础(黑马笔记)" target="_blank">前端|Day1: HTML基础(黑马笔记)</a> <span class="text-muted">Sunshine.King</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/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>Day1:HTML基础目录Day1:HTML基础一、标签语法标签结构二、HTML骨架三、标签的关系四、注释五、标题标签六、段落标签七、换行和水平线八、文本格式化标签九、图像标签1.图像属性2.属性语法十、路径1.相对路径2.绝对路径十一、超链接标签十二、音频常用属性十三、视频常用属性十四、综合案例1.个人简介2.Vue简介一、标签语法HTML—超文本标记语言(HyperTextMarkupLang</div> </li> <li><a href="/article/1759708719647649792.htm" title="css和html基础" target="_blank">css和html基础</a> <span class="text-muted">一叶柒刺郎</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>⦁1.src属性是img的图片路径,alt属性是当图片丢失时显示的问题,也是img标签的,href则是标签的跳转路径,titil是鼠标放上后的显示对对对⦁html中定义的标签:https://www.w3cschool.cn/htmltags/html-reference.html⦁2.行内元素设置宽高不起作用,其宽度是内容的宽度,块级元素宽度默认是继承父级元素的宽度,高度是本身内容的高度(如文字</div> </li> <li><a href="/article/1759432882331398144.htm" title="个人简历补充" target="_blank">个人简历补充</a> <span class="text-muted">Xiaobaiforgod</span> <a class="tag" taget="_blank" href="/search/%E4%B8%AA%E4%BA%BA%E7%AE%80%E5%8E%86%E8%A1%A5%E5%85%85/1.htm">个人简历补充</a><a class="tag" taget="_blank" href="/search/%E5%85%A8%E6%A0%88/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/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91/1.htm">开发</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA/1.htm">计算机</a> <div>个人简历补充1.对工作的认识2.八股文和知识面3.框架/架构角度深扒3.1前端3.1.1mPaaS(移动领域)3.1.2普通前端项目框架3.1.3微前端3.2后端持续更新1.对工作的认识2.八股文和知识面前端(基础知识/开发能力/总结输出能力):前端技术知识(含八股)总结-持续更新中Vue基础学习总结js基础学习总结CSS基础学习总结HTML基础学习总结后端(基础知识/开发能力/总结输出能力):2</div> </li> <li><a href="/article/1757210445577469952.htm" title="html基础·input·多行文本·下拉菜单·div·span·css·选择器·伪类·选择器权" target="_blank">html基础·input·多行文本·下拉菜单·div·span·css·选择器·伪类·选择器权</a> <span class="text-muted">KIKIu</span> <div>用户名:密码:男女篮球确定成都重庆贵阳北京三和武侯区成华区金牛区高薪区锦江区海淀区丰台区/*这儿代码就是css代码*/#p1{color:blueviolet;}我是段落1我是段落2隔开作为一个选择器例如:div>p{}-选中div标中的p标签(p必须是div标签的子标签)7.通配符将*作为选择器,选中当前页面中所有的标签-->p{color:yellowgreen;}我是段落1head我是段落2</div> </li> <li><a href="/article/1757079370628874240.htm" title="HTML基础了解" target="_blank">HTML基础了解</a> <span class="text-muted">江湖竖子</span> <div>HTML(HyperTextMarkupLanguage,超文本标记语言)是用来定义网页结构的一种描述语言。——维基百科HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。首先,说明一下,搭建一个网站的过程中,要用到HTML、CSS、Javascript这三大块技术。HTML是构建网站当中缺一不可的一块。所以,很</div> </li> <li><a href="/article/1756835139825975296.htm" title="html基础" target="_blank">html基础</a> <span class="text-muted">m0_59519985</span> <a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>MDN官方文档MDNWebDocsVScode安装插件LiveServerAutoRenameTag自动格式化点击settings,然后输入format,然后勾选上FormatOnSavehtml文件结构文档结构html的所有标签为树形结构,例如:      Web应用课  第一讲标签HTML元素表示一个HTML文档的根(顶级元素),所以它也被称为根元素。所有其他元素必须是此元素的后代。标签HTM</div> </li> <li><a href="/article/1756779836770107392.htm" title="2019-03-21" target="_blank">2019-03-21</a> <span class="text-muted">樊小勇</span> <div>web前端记录1.第一次尝试写这个文档,这个文档将记录我对一些东西的总结和运用。2.首先在这里列一个大纲web前端基础学习技术大纲1.html基础常用标签2.css基础常用标签3.less的引入4.盒子模型5.reset重置样式的引用6.pc、移动端公共样式7.pc端浮动、定位8.div+flex移动端布局9.BFC10.阿里图标的使用</div> </li> <li><a href="/article/1756734894089715712.htm" title="2019web前端学习路线,教你认识HTML" target="_blank">2019web前端学习路线,教你认识HTML</a> <span class="text-muted">强哥科技兴</span> <div>近两年来,前端开发工程师越来越火了,薪资待遇也快接近后端开发工程师了。2019年已经到来了,很多准备入行前端开发工程师的小伙伴们,不知道准备得怎么样了呢?有的朋友在想方设法的学习,争取在年后的金三银四能靠实力找到一份满意的工作!有的小伙伴很迷茫,想学前端,却没有方向!今天来给大家讲讲,在2019年,我们学习前端开发,如何才能高效学会前端开发?HTML基础学习目标1、本专业介绍、HTML相关概念,</div> </li> <li><a href="/article/1756181196951273472.htm" title="HTML基础" target="_blank">HTML基础</a> <span class="text-muted">蘑菇plus</span> <div>HTML基础web基础web标准结构标准:HTML--决定网页上有什么东西(能够显示什么内容)表现标准:css--决定网页上内容的布局和显示方式行为标准:JavaScript(js)--决定网页上的动态的效果2.认识HTML超文本标记语言(可以用来标记文本,图片,视频,音频,flash,按钮,输入框等网页内容)HTML不是编程语言,不会编译执行,语法错误也不会报错导致程序不能往后运行。3.HTML</div> </li> <li><a href="/article/1755523790546157568.htm" title="html基础" target="_blank">html基础</a> <span class="text-muted">eftales</span> <div>html文档中的字符集字符引用&==&<=="=="标签em标签定义和用法em标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说,这意味着要把这段文字用斜体来显示。在文本中加入强调也需要有技巧。如果强调太多,有些重要的短语就会被漏掉;如果强调太少,就无法真正突出重要的部分。这与调味品一样,最好还是不要滥用强调。尽管现在em标签修饰的内容都是用斜体字来显示,但这些内容也</div> </li> <li><a href="/article/1755430459795324928.htm" title="HTML基础" target="_blank">HTML基础</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>HTML---超文本标记语言HTML即超文本标记语言,是一种用于创建网页的标准标记语言。HTML不是一种编程语言,而是一种标记语言。标记语言是一套标记标签,HTML使用标签来描述网页。HTML文档包含了HTML标签及文本内容。可以使用HTML来建立自己的web站点,HTNL运行在浏览器上,由浏览器来解析。HTML实例注意:对于中文网页需要使用声明编码,否则会出现乱码。有些浏览器(如360浏览器)会</div> </li> <li><a href="/article/1755374893609795584.htm" title="前端html基础(包括dom,事件等)" target="_blank">前端html基础(包括dom,事件等)</a> <span class="text-muted">jack_rofer</span> <div>六。事件操作1.事件参考2.DOM的操作方法3.原生JS获取HTMLDOM元素的8种方法4.Javascript中的事件冒泡与事件捕获5.JS阻止冒泡和取消默认事件(默认行为)</div> </li> <li><a href="/article/1755251085691338752.htm" title="前端开发 :(二)HTML基础" target="_blank">前端开发 :(二)HTML基础</a> <span class="text-muted">星光闪闪k</span> <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%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/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>1.介绍HTML1.1HTML的定义和作用HTML(HyperTextMarkupLanguage)是一种标记语言,用于创建和设计网页的结构和内容。它通过使用标签来描述文档的结构,使得浏览器能够正确地解释和显示页面。1.2HTML的发展历史HTML的发展可以追溯到1990年代初,随着互联网的发展,HTML逐渐演变为不同的版本。从HTML2.0到HTML5,每个版本都带来了新的特性和改进,以适应不断</div> </li> <li><a href="/article/1754658821759844352.htm" title="web前端从入门到精通" target="_blank">web前端从入门到精通</a> <span class="text-muted">等一次雪落</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>web前端从入门到精通HTML+CSS系列一、拨云见日如何创建.html文件--网页1.安装插件2.编辑器基本使用3.Chrome浏览器(市场份额最大)4.深入了解网站开发5.web三大核心技术6.HTML基础结构与属性7.HTML初始代码8.HTML注释9.HTML语义化10.标题(h)与段落(p)11.文本修饰标签12.图片标签和图片属性13.引入文件的地址路径14.跳转链接15.跳转锚点16</div> </li> <li><a href="/article/1754333091448504320.htm" title="HTML基础篇之meta标签" target="_blank">HTML基础篇之meta标签</a> <span class="text-muted">文翊</span> <a class="tag" taget="_blank" href="/search/HTML%E7%AF%87/1.htm">HTML篇</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/w3c/1.htm">w3c</a><a class="tag" taget="_blank" href="/search/meta/1.htm">meta</a> <div>Meta常见参数及其意义Meta的常用的标签有很多,这次把这些标签归类来看Meta基础属性和概念来自W3C的解释如下:Metadataisdata(information)aboutdata.ThetagprovidesmetadataabouttheHTMLdocument.Metadatawillnotbedisplayedonthepage,butwillbemachineparsable.</div> </li> <li><a href="/article/1754292607149686784.htm" title="HTML基础知识" target="_blank">HTML基础知识</a> <span class="text-muted">魔王哪吒</span> <div>HTML基础知识HTML的历史:HTML,XHTMLHTML的全局属性:全局标准属性,全局事件属性HTML的元素:imageimage标记语言,是一种将文本以及与文本相关的其他信息结合起来,展现出关于文档结构和数据处理细节的电脑文字编码。HTML,为超文本标记语言。XHTML是可扩展超文本标记语言,是一种更纯洁,更严格,更规范的html代码。html文件由文件头和文件体两部分组成。标签的分类:双标</div> </li> <li><a href="/article/1754229947498512384.htm" title="HTML基础" target="_blank">HTML基础</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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>文章目录HTML基础标签结构HTML骨架标签的关系注释标题标签段落标签换行和水平线文本格式化标签图像标签图像属性属性语法路径相对路径绝对路径超链接标签音频视频HTML基础HTML的意思就是超文本标记语言(HyperTextMarkupLanguage),这里的超文本的意思就是多媒体内容,有文本、图片、音视频等内容,这里的标记就是使用代码的形式,使用尖括号的标签进行标记的意思,例如标签结构标签要成对</div> </li> <li><a href="/article/1754149821511385088.htm" title="2018-07-27" target="_blank">2018-07-27</a> <span class="text-muted">团子团子哟</span> <div>牵引力教育web程序员如何提高自身技能web程序员以其薪资待遇,就业选择方向多,大有发展前途,梦想成为web程序员的也越来越多,真正开始付诸行动学web的人也越来越多,但是在低端的程序员如何提升自身能力,争取更好的待遇呢?今天牵引力和大家分析下web程序员如何更好的提升自己。基础阶段:在打基础同时能参与到项目中去。掌握HMTL&XHTML基础知识、CSS基础知识、Java基础知识DOM、JSON、</div> </li> <li><a href="/article/1754136208822255616.htm" title="HTML基础" target="_blank">HTML基础</a> <span class="text-muted">Az_plus</span> <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/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>HTML基础目录HTML基础基础概念和语法标签注释``标题`h1-h6`段落`p`换行``格式化图片`img`超链接`a`表格`table`列表`ulli`、`olli`表单`form`基础概念和语法HTML结构由注释,根元素,头,主体以及其他部分组成Title你好标签注释注释信息不会作为代码执行helloworld结果:标题h1-h6这是h1这是h2这是h3这是h4这是h5这是h6结果:段落p你</div> </li> <li><a href="/article/1753961423127461888.htm" title="网页前端学习-03" target="_blank">网页前端学习-03</a> <span class="text-muted">Leoma_</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/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/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>HTML基础知识021.vscode书写骨架里些许代码的解释666①、这一行指令可以理解为不是html代码的部分,它充当的作用是告诉浏览器我们需要书写的html版本,如上述代码第一行则代表的是我们要书写的是html5这个版本,DOCTYPE是文档类型声明标签。②、用来强调是中文网站还是英文网站,en代表英文的缩写,zh-CN指的是中文。③、charset是字符集的含义,后面的utf-8是万国码,这</div> </li> <li><a href="/article/1753373741401784320.htm" title="头歌--Web应用开发实验题" target="_blank">头歌--Web应用开发实验题</a> <span class="text-muted">魔莫摸墨</span> <a class="tag" taget="_blank" href="/search/web%E5%BA%94%E7%94%A8%E4%B8%8E%E5%BC%80%E5%8F%91/1.htm">web应用与开发</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</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基础HTML——表单类的标签第1关:表单元素——文本框第2关:表单元素——密码框第3关:表单元素——单选框第4关:表单元素——多选框第5关:表单元素——checked属性第6关:表单元素——disabled属性第7关:表单元素——label标签第8关:表单元素——下拉列表第9关:表单元素——文本域第10关:表单元素——提交按钮第11关:表单元素的综合案例HTML入门——基础第</div> </li> <li><a href="/article/1753329908160937984.htm" title="前端 table 导出excel表格方法" target="_blank">前端 table 导出excel表格方法</a> <span class="text-muted">其斤r</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E8%AE%B0%E5%BD%95/1.htm">小记录</a><a class="tag" taget="_blank" href="/search/Blob/1.htm">Blob</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/excel/1.htm">excel</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>需求:获取后台数据,动态生成table后,导出excel表格,要求格式与table格式一致直接上代码:导出序号单元措施以上是html基础部分,调取后台接口获取数据后渲染tbody中的内容,通过newBlob(),导出excel表格:$("#export").click(()=>{//使用outerHTML属性获取整个table元素的HTML代码(包括标签),然后包装成一个完整的HTML文档,设置c</div> </li> <li><a href="/article/1753021789417521152.htm" title="Python OpenCV 图像的膨胀与腐蚀,图像处理取经之旅第 38 篇" target="_blank">Python OpenCV 图像的膨胀与腐蚀,图像处理取经之旅第 38 篇</a> <span class="text-muted">梦想橡皮擦</span> <div>PythonOpenCV365天学习计划,与橡皮擦一起进入图像领域吧。本篇博客是这个系列的第38篇。该系列文章导航参考:https://blog.csdn.net/hihell/category_10688961.html基础知识铺垫图像的腐蚀与膨胀是图像形态学运算的知识,形态学橡皮擦也是第一次接触到,寻找了一些简单的说明,基本含义是改变图像中物体的形状,一般在二值图中用来连接相邻的元素或分离成独</div> </li> <li><a href="/article/1752995733931311104.htm" title="HTML基础语法(二)" target="_blank">HTML基础语法(二)</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>(接上文:HTML基础语法(一)-CSDN博客)3.2.5)表格标签一种布局,当数据需要以行列形式呈现时使用,看起来整齐(CSS为表格设置样式;CSS也有一些其他的常用布局)。:表格:行:单元格:表头单元格(默认加粗、居中):行合并(竖长条是行合并):列合并(横长条是列合并)应用举例:学号姓名年龄成绩1001小绿1990.52006303007小明18属性,推荐使用CSS设置背景颜色。-->3.2</div> </li> <li><a href="/article/48.htm" title="开发者关心的那些事" target="_blank">开发者关心的那些事</a> <span class="text-muted">圣子足道</span> <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/1.htm">游戏</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/apple/1.htm">apple</a><a class="tag" taget="_blank" href="/search/%E6%94%AF%E4%BB%98/1.htm">支付</a> <div>我要在app里添加IAP,必须要注册自己的产品标识符(product identifiers)。产品标识符是什么? 产品标识符(Product Identifiers)是一串字符串,它用来识别你在应用内贩卖的每件商品。App Store用产品标识符来检索产品信息,标识符只能包含大小写字母(A-Z)、数字(0-9)、下划线(-)、以及圆点(.)。你可以任意排列这些元素,但我们建议你创建标识符时使用</div> </li> <li><a href="/article/175.htm" title="负载均衡器技术Nginx和F5的优缺点对比" target="_blank">负载均衡器技术Nginx和F5的优缺点对比</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/F5/1.htm">F5</a> <div>        对于数据流量过大的网络中,往往单一设备无法承担,需要多台设备进行数据分流,而负载均衡器就是用来将数据分流到多台设备的一个转发器。         目前有许多不同的负载均衡技术用以满足不同的应用需求,如软/硬件负载均衡、本地/全局负载均衡、更高</div> </li> <li><a href="/article/302.htm" title="LeetCode[Math] - #9 Palindrome Number" target="_blank">LeetCode[Math] - #9 Palindrome Number</a> <span class="text-muted">Cwind</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a><a class="tag" taget="_blank" href="/search/%E9%A2%98%E8%A7%A3/1.htm">题解</a><a class="tag" taget="_blank" href="/search/LeetCode/1.htm">LeetCode</a><a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a> <div>原题链接:#9 Palindrome Number   要求: 判断一个整数是否是回文数,不要使用额外的存储空间   难度:简单   分析: 题目限制不允许使用额外的存储空间应指不允许使用O(n)的内存空间,O(1)的内存用于存储中间结果是可以接受的。于是考虑将该整型数反转,然后与原数字进行比较。 注:没有看到有关负数是否可以是回文数的明确结论,例如</div> </li> <li><a href="/article/429.htm" title="画图板的基本实现" target="_blank">画图板的基本实现</a> <span class="text-muted">15700786134</span> <a class="tag" taget="_blank" href="/search/%E7%94%BB%E5%9B%BE%E6%9D%BF/1.htm">画图板</a> <div> 要实现画图板的基本功能,除了在qq登陆界面中用到的组件和方法外,还需要添加鼠标监听器,和接口实现。 首先,需要显示一个JFrame界面: public class DrameFrame extends JFrame {              //显示</div> </li> <li><a href="/article/556.htm" title="linux的ps命令" target="_blank">linux的ps命令</a> <span class="text-muted">被触发</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>Linux中的ps命令是Process Status的缩写。ps命令用来列出系统中当前运行的那些进程。ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动态的显示进程信息,就可以使用top命令。 要对进程进行监测和控制,首先必须要了解当前进程的情况,也就是需要查看当前进程,而 ps 命令就是最基本同时也是非常强大的进程查看命令。使用该命令可以确定有哪些进程正在运行</div> </li> <li><a href="/article/683.htm" title="Android 音乐播放器 下一曲 连续跳几首歌" target="_blank">Android 音乐播放器 下一曲 连续跳几首歌</a> <span class="text-muted">肆无忌惮_</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>最近在写安卓音乐播放器的时候遇到个问题。在MediaPlayer播放结束时会回调 player.setOnCompletionListener(new OnCompletionListener() { @Override public void onCompletion(MediaPlayer mp) { mp.reset(); Log.i("H</div> </li> <li><a href="/article/810.htm" title="java导出txt文件的例子" target="_blank">java导出txt文件的例子</a> <span class="text-muted">知了ing</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a> <div>代码很简单就一个servlet,如下: package com.eastcom.servlet; import java.io.BufferedOutputStream; import java.io.IOException; import java.net.URLEncoder; import java.sql.Connection; import java.sql.Resu</div> </li> <li><a href="/article/937.htm" title="Scala stack试玩, 提高第三方依赖下载速度" target="_blank">Scala stack试玩, 提高第三方依赖下载速度</a> <span class="text-muted">矮蛋蛋</span> <a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a><a class="tag" taget="_blank" href="/search/sbt/1.htm">sbt</a> <div>原文地址: http://segmentfault.com/a/1190000002894524 sbt下载速度实在是惨不忍睹, 需要做些配置优化 下载typesafe离线包, 保存为ivy本地库 wget http://downloads.typesafe.com/typesafe-activator/1.3.4/typesafe-activator-1.3.4.zip 解压r</div> </li> <li><a href="/article/1064.htm" title="phantomjs安装(linux,附带环境变量设置) ,以及casperjs安装。" target="_blank">phantomjs安装(linux,附带环境变量设置) ,以及casperjs安装。</a> <span class="text-muted">alleni123</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/spider/1.htm">spider</a> <div>1. 首先从官网 http://phantomjs.org/下载phantomjs压缩包,解压缩到/root/phantomjs文件夹。 2. 安装依赖 sudo yum install fontconfig freetype libfreetype.so.6 libfontconfig.so.1 libstdc++.so.6 3. 配置环境变量 vi /etc/profil</div> </li> <li><a href="/article/1191.htm" title="JAVA IO FileInputStream和FileOutputStream,字节流的打包输出" target="_blank">JAVA IO FileInputStream和FileOutputStream,字节流的打包输出</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/java%E6%A0%B8%E5%BF%83%E6%80%9D%E6%83%B3/1.htm">java核心思想</a><a class="tag" taget="_blank" href="/search/JAVA+IO%E6%93%8D%E4%BD%9C/1.htm">JAVA IO操作</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E8%8A%82%E6%B5%81/1.htm">字节流</a> <div>在程序设计语言中,数据的保存是基本,如果某程序语言不能保存数据那么该语言是不可能存在的,JAVA是当今最流行的面向对象设计语言之一,在保存数据中也有自己独特的一面,字节流和字符流 1,字节流是由字节构成的,字符流是由字符构成的 字节流和字符流都是继承的InputStream和OutPutStream ,java中两种最基本的就是字节流和字符流   类 FileInputStream</div> </li> <li><a href="/article/1318.htm" title="Spring基础实例(依赖注入和控制反转)" target="_blank">Spring基础实例(依赖注入和控制反转)</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>前提条件:在http://www.springsource.org/download网站上下载Spring框架,并将spring.jar、log4j-1.2.15.jar、commons-logging.jar加载至工程1.武器接口 package com.bijian.spring.base3; public interface Weapon { void kil</div> </li> <li><a href="/article/1445.htm" title="HR看重的十大技能" target="_blank">HR看重的十大技能</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/%E6%8F%90%E5%8D%87/1.htm">提升</a><a class="tag" taget="_blank" href="/search/%E8%83%BD%E5%8A%9B/1.htm">能力</a><a class="tag" taget="_blank" href="/search/HR/1.htm">HR</a><a class="tag" taget="_blank" href="/search/%E6%88%90%E9%95%BF/1.htm">成长</a> <div>    一个人掌握何种技能取决于他的兴趣、能力和聪明程度,也取决于他所能支配的资源以及制定的事业目标,拥有过硬技能的人有更多的工作机会。但是,由于经济发展前景不确定,掌握对你的事业有所帮助的技能显得尤为重要。以下是最受雇主欢迎的十种技能。   一、解决问题的能力   每天,我们都要在生活和工作中解决一些综合性的问题。那些能够发现问题、解决问题并迅速作出有效决</div> </li> <li><a href="/article/1572.htm" title="【Thrift一】Thrift编译安装" target="_blank">【Thrift一】Thrift编译安装</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/thrift/1.htm">thrift</a> <div>什么是Thrift The Apache Thrift software framework, for scalable cross-language services development, combines a software stack with a code generation engine to build services that work efficiently and s</div> </li> <li><a href="/article/1699.htm" title="【Avro三】Hadoop MapReduce读写Avro文件" target="_blank">【Avro三】Hadoop MapReduce读写Avro文件</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/mapreduce/1.htm">mapreduce</a> <div>Avro是Doug Cutting(此人绝对是神一般的存在)牵头开发的。 开发之初就是围绕着完善Hadoop生态系统的数据处理而开展的(使用Avro作为Hadoop MapReduce需要处理数据序列化和反序列化的场景),因此Hadoop MapReduce集成Avro也就是自然而然的事情。 这个例子是一个简单的Hadoop MapReduce读取Avro格式的源文件进行计数统计,然后将计算结果</div> </li> <li><a href="/article/1826.htm" title="nginx定制500,502,503,504页面" target="_blank">nginx定制500,502,503,504页面</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/nginx%E3%80%80%E9%94%99%E8%AF%AF%E6%98%BE%E7%A4%BA/1.htm">nginx 错误显示</a> <div>server { listen 80; error_page 500/500.html; error_page 502/502.html; error_page 503/503.html; error_page 504/504.html; location /test {return502;}} 配置很简单,和配</div> </li> <li><a href="/article/1953.htm" title="java-1.二叉查找树转为双向链表" target="_blank">java-1.二叉查找树转为双向链表</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%8F%89%E6%9F%A5%E6%89%BE%E6%A0%91/1.htm">二叉查找树</a> <div> import java.util.ArrayList; import java.util.List; public class BSTreeToLinkedList { /* 把二元查找树转变成排序的双向链表 题目: 输入一棵二元查找树,将该二元查找树转换成一个排序的双向链表。 要求不能创建任何新的结点,只调整指针的指向。 10 / \ 6 14 / \ </div> </li> <li><a href="/article/2080.htm" title="Netty源码学习-HTTP-tunnel" target="_blank">Netty源码学习-HTTP-tunnel</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div>Netty关于HTTP tunnel的说明: http://docs.jboss.org/netty/3.2/api/org/jboss/netty/channel/socket/http/package-summary.html#package_description 这个说明有点太简略了 一个完整的例子在这里: https://github.com/bylijinnan</div> </li> <li><a href="/article/2207.htm" title="JSONUtil.serialize(map)和JSON.toJSONString(map)的区别" target="_blank">JSONUtil.serialize(map)和JSON.toJSONString(map)的区别</a> <span class="text-muted">coder_xpf</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/map/1.htm">map</a><a class="tag" taget="_blank" href="/search/val%28%29/1.htm">val()</a> <div> JSONUtil.serialize(map)和JSON.toJSONString(map)的区别   数据库查询出来的map有一个字段为空   通过System.out.println()输出 JSONUtil.serialize(map): {"one":"1","two":"nul</div> </li> <li><a href="/article/2334.htm" title="Hibernate缓存总结" target="_blank">Hibernate缓存总结</a> <span class="text-muted">cuishikuan</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a><a class="tag" taget="_blank" href="/search/ssh/1.htm">ssh</a><a class="tag" taget="_blank" href="/search/javaweb/1.htm">javaweb</a><a class="tag" taget="_blank" href="/search/hibernate%E7%BC%93%E5%AD%98/1.htm">hibernate缓存</a><a class="tag" taget="_blank" href="/search/%E4%B8%89%E5%A4%A7%E6%A1%86%E6%9E%B6/1.htm">三大框架</a> <div>一、为什么要用Hibernate缓存? Hibernate是一个持久层框架,经常访问物理数据库。 为了降低应用程序对物理数据源访问的频次,从而提高应用程序的运行性能。 缓存内的数据是对物理数据源中的数据的复制,应用程序在运行时从缓存读写数据,在特定的时刻或事件会同步缓存和物理数据源的数据。   二、Hibernate缓存原理是怎样的? Hibernate缓存包括两大类:Hib</div> </li> <li><a href="/article/2461.htm" title="CentOs6" target="_blank">CentOs6</a> <span class="text-muted">dalan_123</span> <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a> <div>首先su - 切换到root下面1、首先要先安装GCC GCC-C++ Openssl等以来模块:yum -y install make gcc gcc-c++ kernel-devel m4 ncurses-devel openssl-devel2、再安装ncurses模块yum -y install ncurses-develyum install ncurses-devel3、下载Erang</div> </li> <li><a href="/article/2588.htm" title="10款用 jquery 实现滚动条至页面底端自动加载数据效果" target="_blank">10款用 jquery 实现滚动条至页面底端自动加载数据效果</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>  无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术,它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的结果,改变了一直以来只能通过点击下一页来翻页这种常规做法。 无限滚动自动翻页技术的鼻祖是微博的先驱:推特(twitter),后来必应图片搜索、谷歌图片搜索、google reader、箱包批发网等纷纷抄袭了这一项技术,于是靠滚动浏览器滚动条</div> </li> <li><a href="/article/2715.htm" title="ImageButton去边框&Button或者ImageButton的背景透明" target="_blank">ImageButton去边框&Button或者ImageButton的背景透明</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/imagebutton/1.htm">imagebutton</a> <div>在ImageButton中载入图片后,很多人会觉得有图片周围的白边会影响到美观,其实解决这个问题有两种方法 一种方法是将ImageButton的背景改为所需要的图片。如:android:background="@drawable/XXX" 第二种方法就是将ImageButton背景改为透明,这个方法更常用 在XML里;    <ImageBut</div> </li> <li><a href="/article/2842.htm" title="JSP之c:foreach" target="_blank">JSP之c:foreach</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/forearch/1.htm">forearch</a> <div>原文出自:http://www.cnblogs.com/draem0507/archive/2012/09/24/2699745.html <c:forEach>标签用于通用数据循环,它有以下属性 属 性 描 述 是否必须 缺省值 items 进行循环的项目 否 无 begin 开始条件 否 0 end 结束条件 否 集合中的最后一个项目 step 步长 否 1</div> </li> <li><a href="/article/2969.htm" title="Android实现主动连接蓝牙耳机" target="_blank">Android实现主动连接蓝牙耳机</a> <span class="text-muted">gqdy365</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>在Android程序中可以实现自动扫描蓝牙、配对蓝牙、建立数据通道。蓝牙分不同类型,这篇文字只讨论如何与蓝牙耳机连接。 大致可以分三步: 一、扫描蓝牙设备: 1、注册并监听广播: BluetoothAdapter.ACTION_DISCOVERY_STARTED BluetoothDevice.ACTION_FOUND BluetoothAdapter.ACTION_DIS</div> </li> <li><a href="/article/3096.htm" title="android学习轨迹之四:org.json.JSONException: No value for" target="_blank">android学习轨迹之四:org.json.JSONException: No value for</a> <span class="text-muted">hyz301</span> <a class="tag" taget="_blank" href="/search/json/1.htm">json</a> <div>org.json.JSONException: No value for items  在JSON解析中会遇到一种错误,很常见的错误   06-21 12:19:08.714 2098-2127/com.jikexueyuan.secret I/System.out﹕ Result:{"status":1,"page":1,&</div> </li> <li><a href="/article/3223.htm" title="干货分享:从零开始学编程 系列汇总" target="_blank">干货分享:从零开始学编程 系列汇总</a> <span class="text-muted">justjavac</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a> <div>程序员总爱重新发明轮子,于是做了要给轮子汇总。 从零开始写个编译器吧系列 (知乎专栏) 从零开始写一个简单的操作系统 (伯乐在线) 从零开始写JavaScript框架 (图灵社区) 从零开始写jQuery框架 (蓝色理想 ) 从零开始nodejs系列文章 (粉丝日志) 从零开始编写网络游戏 </div> </li> <li><a href="/article/3350.htm" title="jquery-autocomplete 使用手册" target="_blank">jquery-autocomplete 使用手册</a> <span class="text-muted">macroli</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a> <div>jquery-autocomplete学习 一、用前必备 官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ 当前版本:1.1 需要JQuery版本:1.2.6 二、使用 <script src="./jquery-1.3.2.js" type="text/ja</div> </li> <li><a href="/article/3477.htm" title="PLSQL-Developer或者Navicat等工具连接远程oracle数据库的详细配置以及数据库编码的修改" target="_blank">PLSQL-Developer或者Navicat等工具连接远程oracle数据库的详细配置以及数据库编码的修改</a> <span class="text-muted">超声波</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a> <div>  在服务器上将Oracle安装好之后接下来要做的就是通过本地机器来远程连接服务器端的oracle数据库,常用的客户端连接工具就是PLSQL-Developer或者Navicat这些工具了。刚开始也是各种报错,什么TNS:no listener;TNS:lost connection;TNS:target hosts...花了一天的时间终于让PLSQL-Developer和Navicat等这些客户</div> </li> <li><a href="/article/3604.htm" title="数据仓库数据模型之:极限存储--历史拉链表" target="_blank">数据仓库数据模型之:极限存储--历史拉链表</a> <span class="text-muted">superlxw1234</span> <a class="tag" taget="_blank" href="/search/%E6%9E%81%E9%99%90%E5%AD%98%E5%82%A8/1.htm">极限存储</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E4%BB%93%E5%BA%93/1.htm">数据仓库</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%A8%A1%E5%9E%8B/1.htm">数据模型</a><a class="tag" taget="_blank" href="/search/%E6%8B%89%E9%93%BE%E5%8E%86%E5%8F%B2%E8%A1%A8/1.htm">拉链历史表</a> <div>在数据仓库的数据模型设计过程中,经常会遇到这样的需求: 1. 数据量比较大; 2. 表中的部分字段会被update,如用户的地址,产品的描述信息,订单的状态等等; 3. 需要查看某一个时间点或者时间段的历史快照信息,比如,查看某一个订单在历史某一个时间点的状态,    比如,查看某一个用户在过去某一段时间内,更新过几次等等; 4. 变化的比例和频率不是很大,比如,总共有10</div> </li> <li><a href="/article/3731.htm" title="10点睛Spring MVC4.1-全局异常处理" target="_blank">10点睛Spring MVC4.1-全局异常处理</a> <span class="text-muted">wiselyman</span> <a class="tag" taget="_blank" href="/search/spring+mvc/1.htm">spring mvc</a> <div>10.1 全局异常处理 使用@ControllerAdvice注解来实现全局异常处理; 使用@ControllerAdvice的属性缩小处理范围 10.2 演示 演示控制器 package com.wisely.web; import org.springframework.stereotype.Controller; import org.spring</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>