布白whitenot1

HTML基本语法

HTML概念

Hypertext Markup Language：超文本标记语言。是用来制作网页的一种标记语言。

HTML是一种纯文本格式的文件，内部只能书写文字内容，不能添加图片、音频、视频等，但是在网页中给用户呈现的效果却包含了文字以外的内容，这种效果就是HTML语言区别于其他文件的不同之处。

概念：

超文本：是超级文本的缩写，简单来说超文本就是用于链接另一个文本或多媒体内容的文本，比如链接到图片、链接、音频、视频、程序等。

标记：又叫做标签（HTML tag），有特殊的书写规范，是写给浏览器的一种语法格式，结合普通的文字信息，实现特殊的语义或显示内容。在编辑器中可以编辑和查看，在浏览器中不显示。

HTML的功能： 利用标记给普通的文本添加语义、描述超文本内容，搭建网页的基本结构。

例如：案例中的h1标签作用是什么？

错误答案：h1标签可以让内部文字加粗加大，独占一行。

正确答案：h1标签负责给内部文字添加一级标题的语义，不负责样式，样式由css负责。

HTML文件中，如果没有使用特殊语义的标记，也可以实现网页显示效果，但是利用标记给普通的文字添加了不同的语义，能够让网站的结构划分更加清晰。

语义化清晰的HTML网页具备的优势

1. 方便代码的阅读和后期维护

2. 便于浏览器或是网络爬虫更好地解析网站内容 

3. 使用语义化标签有利于SEO搜索引擎优化，提高网站的搜索排名

HTML的基本骨架：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    
body>
html>

HTML的基本语法

HTML标签

HTML 标记通常被称为 HTML 标签 (HTML tag)。标签在书写和使用过程中，必须遵循特定的语法。

标签名必须书写在一对<>内。
标签分为单标签和双标签，双标签成对出现。
双标签包含开始标签和结束标签，结束标签内需要书写关闭符号，单标签也需要自封闭。

在HTML5中，单标签可以不写关闭符号。

HTML元素

HTML元素指的是从开始标签到结束标签的所有内容，包含开始标签、元素内容、结束标签。

例如：双标签内部包含的纯文本内容，就是元素内容。

这是一段文字内容

元素内容可以是纯文本，也可以是其他的元素。这种元素内容包含其他元素的情况，我们可以称为嵌套，也就是div标签元素内部嵌套了p标签元素。

div元素内部嵌套p元素

一个HTML元素div的内容可能是多个其他元素组成，例如p和h1，此时我们习惯称div是p和h1的父级元素，p和h1是div的子级元素，而p和h1属于同级元素，这种嵌套关系可以有多层。


    div元素内部嵌套p元素
    div元素内部嵌套的h1元素

注意：单标签是不能添加元素内容的，可以称为空元素。

根据标签内部可以存放的内容不同，可以将双标签划分为两个级别。

容器级：标签内部可以存放任意内容，包含容器级标签。比如h1，div等。
文本级：标签内部只能存放文字或类似文字的内容，比如存放图片、表单元素等。比如p等。

HTML元素特性1：元素间对空格、换行、缩进等形成的空白不敏感，有无空白对在浏览器中加载的效果没有影响。

段落内容
段落内容
段落内容
段落内容
段落内容

等价于：

段落内容
段落内容
段落内容
段落内容
段落内容

原因在于浏览器识别的是元素的开始和结束以及互相之间的嵌套关系。

鉴于标签的这个特点，建议：

①书写代码过程中，同级标签之间进行换行对齐书写，嵌套标签之间进行缩进书写，增强代码的可读性。

②上传代码过程中，需要减小代码的体积，压缩不必要的空白，提升网页的加载速度。

HTML元素特性2：元素内容如果是文本，会出现空白折叠现象。

所有文字（类似文字内容）之间如果有空格、换行、缩进等空白字符，在浏览器中加载时，连接在一起的空白会折叠成一个空格显示，这就是空白折叠现象。

代码效果：

<p>HTML中所有文字内容之间的空            格、换
		行、缩		进都会被折叠成一个空格显示。p>

如果想在浏览器显示连续空白可以使用一些替换写法解决，例如：

①空格可以使用字符实体中的进行替换书写。

②换行可以使用一个标签实现。

③缩进效果可以使用css中的语法实现。

HTML属性

HTML标签可以添加属性，属性可以提供关于HTML元素的更多信息。

标签属性书写时需要遵循以下的语法规范：

1.书写位置：必须写在开始标签或者单标签之内，与标签名之间用空格进行分隔。

2.属性包含：属性名（key）、属性值（value）。属性名与属性值之间的写法通常称做键值对写法，HTML标签属性的键值对写法是k=”v”。XHTML要求属性值必须在双引号内部。

<p k="v">p>

3、一个标签内可以设置多个不同的属性，属性与属性之间使用空格进行分隔，每个属性的键值对写法都是k=“v”。

<p k="v" k="v" k="v">p>

4、部分标签属性k可以设置多个属性值v，所有属性值v都必须写在同一对双引号内，值与值之间需要使用空格分隔。

<p k="v1 v2 v3 v4">p>

HTML基本结构

HTML中的代码在书写时，需要有一个固定的基本结构。

基本骨架

HTML文件最基本的四个标签，组成了网页的基本骨架，包括：html、head、title、body四组标签。

<html>
	<head>
		<title>网页标题title>
	head>
	<body>
      	网页主体内容
	body>
html>

各个标签的功能：

标签：

作用:定义HTML文件的根元素，表示整个的HTML文档，所有的标签要书写在html标签内部。
标签：

作用：用于存放</code>,<code><meta></code>,<code><base></code>,<code><style></code>,<code><script></code>,<code><link></code>。内部用于对网页的设置，除了title内部的文字，其他标签都不显示在浏览器上。 注意在<code><head></code>标签中我们必须要设置的标签是title。 </li> <li> <code><title></code>标签： 作用1：让页面拥有一个属于自己的标题。作用2：title中的关键字可以作为搜索引擎抓取时的关键字，提高SEO搜索引擎优化。作用3：内部的内容会显示在搜索结果的标题部分。作用4：作为浏览器收藏夹默认的网页标题。建议网页必须添加title标签内部内容，内容尽量精简，提取网页的关键字。 </li> <li> <code><body></code>标签： 作用：定义网页的主体部分，用于存放所有的HTML显示内容的标签p,h,a,b,u,i,s,em,del,ins,strong,img等。<code><body></code>内部的元素内容会显示在浏览器的窗口中。 附：head标签内部的标签功能表 </li> </ol> <table> <thead> <tr> <th>标签</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>head</td> <td>定义了文档的信息</td> </tr> <tr> <td>title</td> <td>定义了文档的标题</td> </tr> <tr> <td>base</td> <td>定义了页面链接标签的默认链接地址</td> </tr> <tr> <td>link</td> <td>定义了一个文档和外部资源之间的关系</td> </tr> <tr> <td>meta</td> <td>定义了HTML文档中的元数据</td> </tr> <tr> <td>script</td> <td>定义了客户端的脚本文件</td> </tr> <tr> <td>style</td> <td>定义了HTML文档的样式文件</td> </tr> </tbody> </table> <h4>DTD</h4> 完整的HTML文件的第一行内容叫做文档定义类型，英文DocType Definition，简称DTD。也称作文档声明类型，DocType Declaration。 作用：告知浏览器该网页使用的是哪种版本的HTML规范。 HTML规范发展到现在，已经升级到了HTML5版本，不仅在原有的基础上增加了更多新的标签和功能，更是简化了DTD的书写。 <pre><code class="prism language-html"><!DOCTYPE html> </code></pre> <h4>命名空间</h4> <code><html></code>元素表示整个网页文档，在开始标签上设置了命名空间xmlns属性。 XHTML1.0 transitionl版本 <pre><code class="prism language-html"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> </html> </code></pre> xml：可扩展标记语言，是一种简单的数据存储语言，使用在传输过程中的规范。被设计用来传输和存储数据，是html的补充。 xmlns：全称叫做XML NameSpace，NameSpace叫做命名空间，可以在文档中定义一个或多个可供选择的命名空间，浏览器会将此命名空间用于该属性所在元素内的所有内容。 <code><html></code>元素的命名空间规定了在不同用户的浏览器中标签语义遵循的统一标准，这个标准使用的就是一个固定的网址http://www.w3.org/1999/xhtml中的规范。 xml:lang=“en” 表示所有的标签的语言都是英语。 在HTML5版本时命名空间也进行了简化。 HTML5版本 <pre><code class="prism language-html"><html lang="en"> </html> </code></pre> <h4>字符集</h4> <code><head></code>标签内部的meta标签通过http-equiv属性定义了当前的网页所使用的字符编码。 <pre><code class="prism language-html"><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </code></pre> char：character，字符。 set：集合。 中文常用字符集包括： UTF-8：国际通用字库，涵盖了所有人类的语言文字，一个汉字为3个字节大小。 gb2312：国标字库，共收入汉字6763个和包括拉丁字母、希腊字母、日文平假名及片假名字母、俄语西里尔字母在内的682个。 gbk：国标字库，是gb2312的扩展，增加了繁体字，共收入 21886 个汉字和图形符号，其中汉字（包括部首和构件）21003 个，图形符号 883 个，一个汉字为2个字节大小。 使用情况建议： 1、如果没有网页加载速度要求，或者制作的是外文网站，使用utf-8。 2、如果含有大量中文汉字的网站，而且要求网页加载速度快，使用gbk。 注意：meta标签声明的字库，必须和编辑器软件默认编译字库相同，否则会出现两个字库不匹配，浏览器加载时出现乱码。 前面的课程已经将我们需要用到的编辑器、HTML语法、基本结构铺垫完毕，后续课程我们将重点学习常用的标签及其用法。 <h3>HTML常用标签</h3> <h4>注释</h4> 在很多代码技术中都可以添加注释内容，我们也可以向 HTML 源代码添加注释。 HTML注释语法： <pre><code class="prism language-html"> </code></pre> 注释只在源代码中可见，浏览器窗口是不显示的。 利用注释的特点，可以有多种用途： ①在源代码中添加描述性的提示信息，便于我们阅读代码。 <pre><code class="prism language-html"> <p>这是一个段落。</p>  </code></pre> ②对于 HTML 纠错也大有帮助，可以通过注释某一行 HTML 代码，以便检索错误的位置。 <pre><code class="prism language-html"> </code></pre> ③暂时注释掉一部分不用的代码，便于后期恢复代码。 <pre><code class="prism language-html"> </code></pre> vscode和sublime快捷键：ctrl+/ <h4>标题</h4> 标题（Heading），是通过<code><h1></code>-<code><h6></code> 六个标签分别来对六个级别的标题进行定义的。 <code><h1></code>定义最大的标题，<code><h6></code>定义最小的标题。 <code><h1></code>-<code><h6></code> 标签都是双标签，且是容器级标签。 注意①： 标题标签的作用是给标签内部的元素内容添加对应级别标题的语义，不负责文字的粗体、字号等样式。样式是由css设定的。 注意②： 标题标签之间是不能互相嵌套的，下一级标题与上级标题之间通过同级关系书写，下一级标题解释说明的是前面距离最近的上一级标题。 注意③： 标题标签对于呈现文档结构非常重要，使用时要根据标签的重要程度进行选择，其中<code><h1></code>标签最重要，<code><h2></code>标签次重要，以此类推。 <code><h1></code>在整个HTML中的权重非常高，内部应该放置HTML中最重要的内容，比如logo。 <code><h1></code>由于非常重要，内部的文字对于提高搜索引擎排名也非常重要，为了防止作弊，如果一个页面出现多个<code><h1></code>，反而降低权重。约定俗成的，一个页面中只会出现一个<code><h1></code>。 <h4>段落</h4> 段落（paragraph）是通过<code></code>标签进行定义的。 <code></code>标签是双标签，且为文本级标签。内部只能放置文本、图片、表单元素，或者废弃的<code></code>标签等。 注意①：<code></code>标签的作用是给标签内部的内容添加一个完整段落的语义，不负责内容自动换行的样式。换行的效果是由css决定的。 <pre><code class="prism language-html"><p>这是第一个段落</p> <p>这是第二个段落</p> </code></pre> <a href="http://img.e-com-net.com/image/info8/a55bc421ef3041e7ac3dac848e1cd358.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a55bc421ef3041e7ac3dac848e1cd358.jpg" alt="HTML基本语法_第2张图片" width="345" height="212" style="border:1px solid black;"></a> 注意②： 每一对儿<code></code>标签内部的元素内容为一个完整的段落，如果有多个段落，需要分别使用不同的<code></code>标签进行定义。 错误写法 <pre><code class="prism language-html"><p>这是第一个段落<br> 这是第二个段落<br> 这是第三个段落</p> </code></pre> 正确写法 <pre><code class="prism language-html"><p>这是第一个段落</p> <p>这是第二个段落</p> <p>这是第三个段落</p> </code></pre> <h4>文本格式化</h4> HTML中有部分标签是用来对文字进行格式化显示设置的，比如粗体和斜体等。 但是在HTML4.0版本规范后，结构和样式进行了分离，HTML只负责搭建结构，css负责格式化样式，所以大部分文本格式化标签被废弃，但是在HTML4.01和XHTML1.0的transitional版本中依旧可以使用。 文本格式化的标签均为双标签，且为文本级标签，内部只能书写文字。 包含以下： <table> <thead> <tr> <th>标签</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>b</td> <td>定义粗体文本，bold</td> </tr> <tr> <td>big</td> <td>定义大号字</td> </tr> <tr> <td>em</td> <td>定义着重文字，emphasis，自带斜体效果</td> </tr> <tr> <td>i</td> <td>定义斜体字，italic</td> </tr> <tr> <td>small</td> <td>定义小号字</td> </tr> <tr> <td>strong</td> <td>定义加重语气，自带加粗效果</td> </tr> <tr> <td>sub</td> <td>定义下标字</td> </tr> <tr> <td>sup</td> <td>定义上标字</td> </tr> <tr> <td>ins</td> <td>定义插入字，自带下划线效果</td> </tr> <tr> <td>del</td> <td>定义删除字</td> </tr> <tr> <td>s</td> <td>不赞成使用，使用del代替</td> </tr> <tr> <td>strike</td> <td>不赞成使用，使用del代替</td> </tr> <tr> <td>u</td> <td>定义下划线，不赞成使用，使用css中样式代替</td> </tr> </tbody> </table> <h4>图像</h4> 图像（image）由<code><img></code>标签进行定义。 <code><img></code>标签是单标签，本身相当于一个特殊的文本。 <code><img></code>标签的作用是在指定的位置插入一张图片。 在HTML文件，常用的插入图片的类型有：jpg、png、gif。 由于<code><img></code>为单标签，所以它只能通过属性进行相关的图像设置。 <code><img></code>常用属性展示： <table> <thead> <tr> <th>属性名</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>src</td> <td>表示图片的路径；</td> </tr> <tr> <td>width</td> <td>表示图片的宽度；</td> </tr> <tr> <td>height</td> <td>表示图片的高度；</td> </tr> <tr> <td>border</td> <td>边框属性；它的值可以设置边框的厚度；</td> </tr> <tr> <td>title</td> <td>设置提示文本；</td> </tr> <tr> <td>alt</td> <td>设置图像没有找到时候的替换文本；</td> </tr> </tbody> </table> <h5>scr和路径</h5> 如果需要插入一张图片到HTML中，<code><img></code>标签必须设置src属性。 src：全称source资源，属性值是图片查找的路径。 路径：指的是寻找文件时所历经的线路，在HTML中有特殊的书写语法。 路径分为相对路径和绝对路径，不同的方式出发点和参考位置不同。 （1）相对路径 相对路径查找文件时，需要从HTML文件本身出发，根据相对的位置进行查找，包含三种方向。 同级查找：指目标文件与HTML文件位于同一级，直接书写文件名+后缀格式； <pre><code class="prism language-html"><img src="smile01.jpg"> </code></pre> 子级查找：指目标文件在与HTML文件同一级的文件夹的内部，需要先查找文件夹名称，然后通过关闭符号/进入文件夹查找里面的文件；如果有多层文件夹，需要/进入多层。 <pre><code class="prism language-html"><img src="images/smile02.png"> <img src="images/tupian/smile03.jpg"> </code></pre> 上级查找：指目标文件在HTML文件所在文件夹的更上一级，需要跳出当前文件夹到上一层，路径写法利用…/表示跳出一级，如果跳出多级书写多次…/，直到找到文件。 上级查找与子级查找常混合使用，…/一般只出现在开始位置。 <pre><code class="prism language-html"><img src="../../smile04.jpg" /> <img src="../images/smile01.jpg" /> </code></pre> 注意： 相对路径不能跨盘符； （2）绝对路径 绝对路径查找文件时，不需要从HTML文件出发，而是直接从电脑的盘符出发进行查找，或者使用网址形式查找。 盘符出发： 例如从c盘或者d盘出发查找图片，书写时以c:/开头，后续类似子级查找写法直至找到目标文件。 <pre><code class="prism language-html"><img src="C:/Users/teacher/Documents/html/case/images/smile02.png" /> </code></pre> 网址形式： 要查找的文件是来自网络资源，路径写法以http://开头。 <pre><code class="prism language-html"><img src="http://img3.imgtn.bdimg.com/it/u=1084243323,278941980&fm=26&gp=0.jpg" /> </code></pre> 从盘符出发的绝对路径的缺点： a.盘符出发的路径不可移植，不可移动。 b.盘符出发的路径容易出现中文字符，中文的路径容易出现错误。 实际应用： a.建议多使用相对路径，可以适当使用网址形式的绝对路径。 b.使用相对路径必须将图片或文件与HTML同时上传，而且需要保持相对位置不变。 <a href="http://img.e-com-net.com/image/info8/de86d7b3e45a44818d74c89353f763ee.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/de86d7b3e45a44818d74c89353f763ee.jpg" alt="HTML基本语法_第3张图片" width="376" height="235" style="border:1px solid black;"></a> <pre><code class="prism language-html"><img src="../../photo/1.png"> </code></pre> <h5>其他属性</h5> width： 图片的宽度 height： 图片的高度 属性值：以px为单位的数值，或者省略px不写。 如果不设置两个属性，会以图片的原始尺寸加载。 如果设置属性：只设置了其中一个，另一个会等比例变换；如果两个都设置，按照设置值加载。 <pre><code class="prism language-html"><img src="smile01.jpg" width="200px"> <img src="smile01.jpg" height="100px"> <img src="smile01.jpg" width="200" height="100"> </code></pre> <a href="http://img.e-com-net.com/image/info8/157b7ae8d9a142a7bed42a1b3bdbaa01.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/157b7ae8d9a142a7bed42a1b3bdbaa01.jpg" alt="HTML基本语法_第4张图片" width="510" height="238" style="border:1px solid black;"></a> width和height属性都可以通过css进行设置。 <hr> border： 设置图片的边框。 属性值：数值，数值是几表示边框宽度为几像素。 <pre><code class="prism language-html"><img src="smile01.jpg" border="20"> </code></pre> <a href="http://img.e-com-net.com/image/info8/6e335065065749ba9b873a17dab8272a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6e335065065749ba9b873a17dab8272a.jpg" alt="HTML基本语法_第5张图片" width="263" height="246" style="border:1px solid black;"></a> border属性可以使用css进行设置，css中的边框有更多的设置效果。 <hr> title： 设置的是鼠标悬停时的提示文本。 属性值：自定义的文字内容。 <pre><code class="prism language-html"><img src="smile01.jpg" title="点击查看原网站"> </code></pre> <a href="http://img.e-com-net.com/image/info8/005f7b585d0245db9d454a46047c3017.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/005f7b585d0245db9d454a46047c3017.jpg" alt="HTML基本语法_第6张图片" width="171" height="213" style="border:1px solid black;"></a> <hr> alt： 设置的是图片查找错误时，出现的替换文本。 如果能正常找到图片，替换文本是不显示的。 属性值：自定义的替换内容。 <pre><code class="prism language-html"><img src="smile01.png" alt="这是一张微笑的表情"> </code></pre> <a href="http://img.e-com-net.com/image/info8/8b2cd3f7f910447894be78c4d46d2edf.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8b2cd3f7f910447894be78c4d46d2edf.jpg" alt="" width="178" height="42"></a> 总结：<code><img></code>标签最为重要的属性为src，尽量使用alt属性对图片进行说明，添加相对关键词可以有利于SEO搜索引擎优化。其他属性可以根据需求进行设置。 <h4>音频和视频</h4> 网页中的多媒体内容除了图片，还有音频，视频等，HTML也提供的特定的标签用于添加音频和视频。 音频使用<code><audio></code>标签进行定义，视频使用<code>video</code>标签进行定义。<code><audio><video></code>是双标签。同图片一样，需要使用src属性设置音频，视频查找的路径。 音频文件支持的格式为：.mp3、.ogg、.wav。 视频视频支持格式：.mp4,.ogg,.webm。 音频/视频加载后不会自动显示播放器的控制条，需要使用controls属性进行设置，属性值也是controls。 <pre><code class="prism language-html"> <audio src="media/snow.mp3" controls="controls"></audio>  <video src="media/video.mp4" controls="controls"></video> </code></pre> <h4>超级链接</h4> HTML 使用超级链接与网络上的另一个文档相连。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 在HTML中使用<code><a></code>标签可以创建链接。 a全称anchor，锚的意思。 <code><a></code>为双标签。 作用：在指定的位置添加超级链接，提供用户进行点击和跳转。 <code><a></code>标签可以实现两种跳转：跨页面跳转、页面内跳转。实现跳转的方式需要用到一些标签属性。 href属性 href全称hypertext reference，超文本引用，用于规定链接的目标地址。 属性值：链接目标的路径地址。可以使用相对路径或网址形式的绝对路径。 根据href属性值不同，a标签有不同的作用。 <ol> <li>url地址：绝对路径时会自动跳转到对应的链接页面，相对路径时会点击自动下载文件并发生跳转，锚点url会跳转到页面的对应位置，可以用于页面滚动。</li> <li>#：单独的一个#符号，代表跳转到页面的top顶部，可以用于制作返回顶部。</li> <li>js调用：</li> </ol> <pre><code class="prism language-html">  <a href="javascript:js_method();"></a>  <a href="javascript:void(0);" onclick="js_method()">超级链接</a>  <a href="javascript:;">超级链接</a> </code></pre> href属性非常重要，<code><a></code>标签要想实现点击跳转，必须设置该属性，拥有这个属性<code><a></code>标签在鼠标移上时才会显示一个小手指针状态。 书写方式如下： <pre><code class="prism language-html"><a href="url">链接文本</a> </code></pre> 实例： <pre><code class="prism language-html"><a href="http://www.lagou.com">拉勾</a> <a href="index.html">首页文件</a> </code></pre> 点击以上两个链接分别跳转到拉勾网、本地的同级index.html文件。 注意：链接文本不仅限于文字，也可以是图片或其他内容。 target属性 使用target 属性，可以定义被链接的文档在何处跳转显示。 属性值有两种： _self：默认值，表示跳转的页面在当前窗口打开，不会打开新的窗口。 _blank：空白的，表示跳转的页面在新窗口打开。 <pre><code class="prism language-html"><a href="http://www.lagou.com" target="_blank">拉勾</a> </code></pre> 点击以上链接，拉勾网页面将会在新窗口打开，当前窗口页面不变化。 title属性 title设置的是鼠标悬停时的提示文本，与<code><img></code>标签类似。 属性值：自定义的文字内容。 该属性用于给用户进行提示，该链接的功能是什么，提高用户的体验。 <pre><code class="prism language-html"><a href="smile.html" title="点击查看源网页"><img src="images/smile02.png" /></a> </code></pre> <a href="http://img.e-com-net.com/image/info8/7f3e6263e0bb401c98701da00b9d3544.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7f3e6263e0bb401c98701da00b9d3544.jpg" alt="HTML基本语法_第7张图片" width="203" height="160" style="border:1px solid black;"></a> <h5>页面锚点跳转</h5> 这种跳转方式实现的是从某个位置跳转到同页面的另一个位置。 制作方法分为两个步骤，分别是设置锚点、添加链接。 第一步：设置锚点，也就是设置目标位置，有两种设置方式。 ①在目标位置找到任意一个标签，给它添加id属性，id的属性值必须是唯一的。 id的属性值定义规则：必须以字母开头，后面可以有字母、数字、下划线和横线，区分大小写。 <pre><code class="prism language-html"><h2 id="mubiao">目标位置</h2> </code></pre> ②在目标位置添加一个空的<code><a></code>标签，只设置一个name属性，name属性值设置方式与id相同，也必须是唯一的。 <pre><code class="prism language-html"><a name="mubiao"></a> </code></pre> 其中，id和name的属性值可以自定义。 第二步：链接到锚点，在需要点击的位置设置<code><a></code>标签，给a的href属性设置属性值为#id属性值或者#加a的name属性值。 <pre><code class="prism language-html"><a href="#mubiao">点击文本</a> </code></pre> <h5>跨页面锚点跳转</h5> 这种跳转方法综合了跨页面跳转和锚点跳转。 制作方法也分为两个步骤，分别是设置锚点、添加链接。 第一步：设置锚点，方式与页面内锚点跳转一致，在目标网页的指定位置设置使用id或name属性。 第二步：链接到锚点，添加超级链接时href属性需要更改，属性值写为页面的路径#id 。 <pre><code class="prism language-html"><a href="new.html#mubiao">点击文本</a> </code></pre> <h4>列表</h4> 列表用于制作HTML中的一系列项目。 通常我们会将内容相关、结构相似、样式相近的内容使用列表结构进行搭建。 根据项目的内容不同，可以有三种语义的列表结构：无序列表、有序列表、定义列表。 <h5>无序列表</h5> ①作用：定义一个没有顺序的列表的结构、语义。 ②无序列表需要两个标签参与，分别是<code><ul></code>和<code><li></code>。 ul：unordered list，表示定义一个无序列表的大结构。 li：list item，列表项，定义的是无序列表内的某一项。 ③注意：<code><ul></code>内部只能嵌套<code><li></code>，<code><li></code>标签不能脱离<code><ul></code>单独书写。 快捷键：ul>li <pre><code class="prism language-html"><ul> <li></li> </ul> </code></pre> ④<code><ul></code>内部可以嵌套任意多个<code><li></code>标签。 快捷键：ul>li*4 <pre><code class="prism language-html"><ul> <li></li> <li></li> <li></li> <li></li> </ul> </code></pre> ⑤<code><li></code>标签是一个经典的容器级标签，内部可以放置任意内容，甚至可以放一组ul>li无序列表结构. 实例 <pre><code class="prism language-html"> <h2>中国的古典四大名著</h2> <ul> <li> <h3>红楼梦</h3>  <ul> <li>林黛玉</li> <li>薛宝钗</li> <li>贾元春</li> <li>王熙凤</li> </ul> </li> <li> <h3>西游记</h3>  <ul> <li>孙悟空</li> <li>猪八戒</li> <li>沙和尚</li> <li>小白龙</li> </ul> </li> <li> <h3>水浒传</h3>  <ul> <li>宋江</li> <li>武松</li> <li>林冲</li> <li>鲁智深</li> </ul> </li> <li> <h3>三国演义</h3>  <ul> <li>刘备</li> <li>孙权</li> <li>曹操</li> <li>董卓</li> </ul> </li> </ul> </code></pre> ⑥无序列表的列表项<code><li></code>之间，没有顺序的先后之分，它们的重要程度是相同的。 ⑦无序列表的作用只是搭建列表结构，没有添加样式前缀的功能，样式是由css负责。 <a href="http://img.e-com-net.com/image/info8/88abaf7b227a4dc9b3c09d0b957865f3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/88abaf7b227a4dc9b3c09d0b957865f3.jpg" alt="HTML基本语法_第8张图片" width="241" height="270" style="border:1px solid black;"></a> <h5>有序列表</h5> 有序列表的语法与无序列表非常类似，只是在语义上有差异。 ①作用：定义一个有先后顺序的列表结构、语义。 ②有序列表由两个标签组成，分别是<code><ol></code>和<code><li></code>。 ol：ordered list，表示定义一个有序的列表的大结构。 li：list item，定义的是有序列表的每一项。 ③<code><ol></code>内部只能嵌套<code><li></code>标签，而<code><li></code>不能脱离<code><ol></code>单独书写。 ④<code><ol></code>标签内部可以嵌套多个<code><li></code>标签。 <pre><code class="prism language-html"><ol> <li></li> <li></li> <li></li> <li></li> </ol> </code></pre> ⑤<code><li></code>标签也是一个经典的容器级标签，内部可以放置任意内容，甚至可以放ol>li。 实例 <pre><code class="prism language-html"> <h2>国土面积排行</h2> <ol> <li> <h3>俄罗斯</h3> </li> <li> <h3>加拿大</h3> </li> <li> <h3>中国</h3>  <ol> <li>新疆</li> <li>西藏</li> <li>内蒙古</li> <li>青海</li> </ol> </li> <li> <h3>美国</h3> </li> </ol> </code></pre> ⑥有序列表的列表项<code><li></code>之间，存在顺序先后之分，根据内容的顺序需要合理调整书写位置。 ⑦有序列表的前面的数字排序样式不是<code><ol></code>标签的作用，而是css负责的。 <a href="http://img.e-com-net.com/image/info8/4d601cfaffbc4945b906b284a391e950.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4d601cfaffbc4945b906b284a391e950.jpg" alt="HTML基本语法_第9张图片" width="225" height="258" style="border:1px solid black;"></a> <h5>定义列表</h5> 自定义列表不仅仅是一列项目，而是项目及其注释的组合。 ①作用：定义一个自定义内容及主题的列表、语义。 ②由三个标签组成完整的结构，包含<code><dl></code>、<code><dt></code>和<code><dd></code>。 dl：definition list，表示定义一个自定义列表的大结构。 dt：definition term，表示定义自定义列表中的一个主题或者术语。 dd：definition description，定义解释项，表示描述或解释前面的定义主题。 ③<code><dl></code>内部只能嵌套<code><dt></code>和<code><dd></code>，<code><dt></code>与<code><dd></code>是同级关系。 快捷键：dl>dt+dd <pre><code class="prism language-html"><dl> <dt>主题</dt> <dd>解释项</dd> </dl> </code></pre> ④dl内部可以放多组dt和dd，每个dd解释说明的是前面的距离最近的一个dt。 <pre><code class="prism language-html"><dl> <dt>主题1</dt> <dd>解释项1</dd> <dt>主题2</dt> <dd>解释项2</dd> <dt>主题3</dt> <dd>解释项3</dd> <dt>主题4</dt> <dd>解释项4</dd> </dl> </code></pre> ⑤每个dt后面可以有0到多个解释项的dd，每个dd解释的都是前面距离最近的一个dt。 <pre><code class="prism language-html"><dl> <dt>主题1</dt> <dd>解释项1.1</dd> <dd>解释项1.2</dd> <dt>主题2</dt> <dd>解释项2.1</dd> <dd>解释项2.2</dd> <dd>解释项2.3</dd> <dt>主题3</dt> <dd>解释项3</dd> <dt>主题4</dt> </dl> </code></pre> ⑥dt和dd标签也是容器级标签，内部可以放置任意内容。 实例 <pre><code class="prism language-html"> <dl> <dt>杨幂</dt> <dd> <p>作品：《三生三世十里桃花》、《扶摇》、《宫》等。</p> <p>工作室成员：迪丽热巴、高伟光、张彬彬等。</p> <p>家庭：小糯米。</p> </dd> <dt>迪丽热巴</dt> <dd> <p>作品：《三生三世系列》、《漂亮的李慧珍》等。</p> </dd> <dt>刘诗诗</dt> <dd> <p>作品：《仙剑奇侠传三》、《步步惊心》等。</p> <p>家庭：吴奇隆等。</p> </dd> <dt>谢娜</dt> </dl> </code></pre> ⑦定义列表中的缩进样式由css负责，标签只负责搭建语义结构。 ⑧配合着css布局效果，最好每个dl中只添加一组dt和dd，便于后期添加css样式。 实例 <pre><code class="prism language-html"> <dl> <dt>杨幂</dt> <dd> <p>作品：《三生三世十里桃花》、《扶摇》、《宫》等。</p> <p>工作室成员：迪丽热巴、高伟光、张彬彬等。</p> <p>家庭：小糯米。</p> </dd> </dl> <dl> <dt>迪丽热巴</dt> <dd> <p>作品：《三生三世系列》、《漂亮的李慧珍》等。</p> </dd> </dl> <dl> <dt>刘诗诗</dt> <dd> <p>作品：《仙剑奇侠传三》、《步步惊心》等。</p> <p>家庭：吴奇隆等。</p> </dd> </dl> <dl> <dt>谢娜</dt> </dl> </code></pre> <a href="http://img.e-com-net.com/image/info8/ade4544d54984f70b7914bbfea245ece.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ade4544d54984f70b7914bbfea245ece.jpg" alt="HTML基本语法_第10张图片" width="650" height="221" style="border:1px solid black;"></a> <hr> <h4>布局</h4> <code><div></code>和<code></code>标签常用作布局工具，我们俗称盒子，后期h5也增加了更多的布局标签。 <code><div></code>和<code></code>都是没有具体语义的。 div： 全称division，分割、区域、跨度的意思。俗称大盒子。 <code><div></code>是双标签，是最经典的容器级标签，内部可以放置任意内容。 作用：多用于划分网页区域，进行结构布局。一般将相关的内容使用<code><div></code>包裹起来，整体设置大的布局效果。 span： 小区域、小跨度的意思。俗称小盒子。 <code></code>也是双标签，容器级标签。 作用：在不改变整体效果的情况下，可以辅助进行局部调整。 <hr> <h4>表格</h4> <h5>表格基础</h5> 创建一个简单的表格至少有三个标签组成，分别是**<code><table></code>、<code><tr></code>、<code><td></code>**标签。 table：表格，定义的是整个的表格大结构。 tr：table rows，表格的行，定义的是表格由多少行组成。 td：table data，表格数据，也叫表格单元格，定义的是每一行内部的单元格。 三者的关系：table>tr>td.一个表格中有多个行，每个行中有多个单元格。 <code><table></code>的属性 <blockquote> border边框属性。属性值：数字，表示像素值。 </blockquote> 表格的单元格之间有默认的空隙，会导致双线边框。 <blockquote> 解决方法：设置标签样式属性style。 属性值：border-collapse:collapse;表示边框塌陷。 </blockquote> <pre><code class="prism language-html"><table border="1" style="border-collapse: collapse;"></table> </code></pre> 引申：如果要绘制表头，使用标签 <code><th></code>，table head data，表头单元格，在表格中绘制的时候，替换的是<code><td></code>的位置。 <code><th></code>标签中自带默认的css样式效果，文字显示粗体居中。 <h5>合并单元格</h5> 表格的单元格可以进行合并，通过<code><th></code>和<code><td></code>的两个属性可以进行合并设置。 rowspan：跨行和并。上下的合并。 colspan：跨列合并。左右的合并。 属性值：数字，数字是几表示跨几行或跨几列合并。 制作方法： <ol> <li>先书写所有行<code><tr></code>，以最小单元格为标准。</li> <li>再添加每一行的<code><td></code>或<code><th></code>单元格。</li> <li>划分单元格时，顶边对齐的属于同一行。</li> <li>将所有行和列写完后，再查看哪个单元格有跨行或跨列，属性值的个数要参考最小的单元格。</li> </ol> <h5>表格分区</h5> 一个完整的表格分为四个大的区域：表格标题、表格头部、表格主体、表格页脚。 <code><table></code>内部最直接的子级包含四个分区标签，他们都是双标签。 caption：表格的标题，内部书写标题文字。 thead：table head，表格的头部。内部嵌套tr>th。 tbody：table body，表格的主体。内部嵌套tr>td。 tfoot：table foot，表格的页脚。内部嵌套tr>td。 四个分区可以选择性的进行组合。 注意：不论书写顺序如何颠倒，浏览器中的加载顺序都是自动按照caption、thead、tbody、tfoot执行的。 <a href="http://img.e-com-net.com/image/info8/d89f2ace06c1487d9139f53388766e01.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d89f2ace06c1487d9139f53388766e01.jpg" alt="HTML基本语法_第11张图片" width="650" height="238" style="border:1px solid black;"></a> <hr> <h4>表单</h4> HTML 表单用于搜集不同类型的用户输入，表单元素就是网页中提供用户进行输入或点击的小控件。 在HTML中，一个完整的表单通常由表单域、提示信息和表单控件（也称为表单元素）3个部分构成。 <a href="http://img.e-com-net.com/image/info8/ae768062a7ef4b2b8b020e397849367b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ae768062a7ef4b2b8b020e397849367b.jpg" alt="HTML基本语法_第12张图片" width="600" height="588" style="border:1px solid black;"></a> 表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。 提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。 表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。 <h5>表单域</h5> HTML表单域使用<code><form></code>标签进行定义。 <code><form></code>标签是一个功能性标签，填写的表单信息要想正确的提交到后台服务器，必须放在一个<code><form></code>标签之内。 <code><form></code>标签为双标签，容器级标签。 <code><form>标签属性</code> <code><form></code>标签通过对应属性规定提交数据的方法和提交位置。 <table> <thead> <tr> <th>属性名</th> <th>属性值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>action</td> <td>url</td> <td>指定接收并处理表单数据的服务器程序的url地址</td> </tr> <tr> <td>method</td> <td>get/post</td> <td>用于设置表单数据的提交方式</td> </tr> <tr> <td>name</td> <td>自定义名称</td> <td>规定表单的名称</td> </tr> </tbody> </table> 实例 <pre><code class="prism language-html"><form action="xxx.php" method="post/get" name="stuMSG"> 提示信息及表单控件书写位置 </form> </code></pre> <h5>表单元素</h5> <h6><code><input></code>标签</h6> <code><input></code>标签是最重要的一个表单元素。 <code><input></code>标签为单标签，本身相当于一个特殊的文本。 <code><input></code>标签需要通过标签属性实现各种功能。 其中，type属性的值不同，决定了<code><input></code>标签的形态不同。 <code><input></code>标签常用属性： <a href="http://img.e-com-net.com/image/info8/44ed0663349f4367bcb2e99c71a7ad6a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/44ed0663349f4367bcb2e99c71a7ad6a.jpg" alt="HTML基本语法_第13张图片" width="599" height="441" style="border:1px solid black;"></a> <code><input></code>标签的type属性值为text。 定义提供用户输入的单行文本的输入框，不能输入多行文字。 常用value属性定义默认的输入文字。 <pre><code class="prism language-html"><input type="text" value="默认输入文本" > </code></pre> <code><input></code>标签的type属性值为password。 定义提供用户输入的密码框。 password字段中的字符会被做掩码处理（显示为星号或实心圆）。 <pre><code class="prism language-html"><input type="password"> </code></pre> <code><input></code>标签的type属性值为radio。 定义提供用户点击选择的单选框。 单选框一般都是成组出现，多个单选框组成一组选择的情况。 同一组单选框之间必须是互斥的关系，通过给同一组单选框都设置相同的name属性实现。 <pre><code class="prism language-html"><input type="radio" name="sex" /> 男 <input type="radio" name="sex" /> 女 </code></pre> <code><input></code>标签的type属性值为checkbox。 定义提供用户点击选择的多选框。 复选框允许用户在有限数量的选项中选择零个或多个选项。 同一组复选框最好也设置相同的name属性。 <pre><code class="prism language-html"><input type="checkbox" name="hobby" /> 唱歌 <input type="checkbox" name="hobby" /> 代码 <input type="checkbox" name="hobby" /> 运动 </code></pre> 注意：单选框和复选框都可以提前设置默认选中项。 <code><input></code>标签有一个checked属性，如果不设置表示默认没有选中。 属性值如果设置为"checked"，表示该项默认被选中。 在h5中可以直接书写checked属性名，不书写属性值，也可以实现选中效果。 <pre><code class="prism language-html"><input type="radio" name="sex" checked="checked" /> 男 <input type="radio" name="sex" /> 女 <input type="checkbox" name="hobby" /> 唱歌 <input type="checkbox" name="hobby" checked /> 代码 <input type="checkbox" name="hobby" /> 运动 </code></pre> <a href="http://img.e-com-net.com/image/info8/c885ffc0738e4e5db0ffe390c607dd9c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c885ffc0738e4e5db0ffe390c607dd9c.jpg" alt="HTML基本语法_第14张图片" width="189" height="172" style="border:1px solid black;"></a> 按钮 <code><input></code>标签有四种形式的按钮： <table> <thead> <tr> <th>type</th> <th>名称</th> <th>特点</th> </tr> </thead> <tbody> <tr> <td>button</td> <td>普通按钮</td> <td>没有任何特殊功能</td> </tr> <tr> <td>reset</td> <td>重置按钮</td> <td>将同一个<code><form></code>中填写的表单内容清空，恢复成默认</td> </tr> <tr> <td>submit</td> <td>提交按钮</td> <td>第一个作用是能将填写数据提交到<code><form></code>中指定的后台服务器，第二个作用是重置清空<code><form></code>中填写的信息</td> </tr> <tr> <td>image</td> <td>图片按钮</td> <td>默认为提交按钮的效果，使用的图片需要利用src属性查找正确路径</td> </tr> </tbody> </table> 按钮上的文字需要使用value属性进行设置。如果是图片按钮的value，表示图片查找失败时的替换文本内容。 <pre><code class="prism language-html"><input type="button" value="普通按钮" /> <input type="reset" value="重置按钮" /> <input type="submit" value="提交按钮" /> <input type="image" src="bd_8.png" value="pic" /> </code></pre> <a href="http://img.e-com-net.com/image/info8/9839b1e944d74122bb30db52889fd899.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9839b1e944d74122bb30db52889fd899.jpg" alt="HTML基本语法_第15张图片" width="293" height="288" style="border:1px solid black;"></a> 注意：<code><button></code>元素的功能类似于<code><input type="submit"></code>将填写数据提交到<code><form></code>中指定的后台服务器。 <pre><code class="prism language-html"><form action="data.php"> <input type="text"><br> <input type="button" value="普通按钮"> <button>button</button> </form> </code></pre> 文件上传：file 定义文件上传按钮，可以提供用户选择本地文件进行上传服务器。 <pre><code class="prism language-html"><input type="file"> </code></pre> 使用input的multiple属性，可以决定是否可以选择多个文件。 <pre><code class="prism language-html"><input type="file" multiple="multiple" /> </code></pre> 如果文件上传的input同时设置accept属性，可以选择文件的MIME类型，多个MIME类型用英文逗号分开，常用的MIME类型见下表。 <pre><code class="prism language-html"><input type="file" accept="image/png,image/gif" /> </code></pre> <a href="http://img.e-com-net.com/image/info8/4191603f3f424a1f896d6db7550f81d3.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/4191603f3f424a1f896d6db7550f81d3.png" alt="HTML基本语法_第16张图片" width="531" height="830" style="border:1px solid black;"></a> <h6>文本域<code><textarea></code></h6> 文本域使用**<code><textarea></code>**标签定义，制作可以输入多行文本的区域。 <code><textarea></code>标签为双标签，本身相当于一个特殊的文字。 <code><textarea></code>有两个重要属性，可以设置显示区域大小。 rows：行，属性值是数字，数字是几表示文本框显示的最大行数，如果超过了行数，会被隐藏并且出现滚动条。 cols：列，属性值是数字，数字是几，表示在出现滚动条之后，每一行显示的最大字节数（一个汉字按2字节计算）。 文本域可以设置默认输入的文字，在双标签之间书写默认文字。 <pre><code class="prism language-html"><textarea cols="30" rows="10">默认输入文字</textarea> </code></pre> <a href="http://img.e-com-net.com/image/info8/a3bc889c7e984b24b481db34dd8ce3a8.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/a3bc889c7e984b24b481db34dd8ce3a8.png" alt="HTML基本语法_第17张图片" width="303" height="228" style="border:1px solid black;"></a> <h6>下拉菜单</h6> HTML中的下拉菜单提前设置一些选项，然后可以通过点击选择其中一项。 下拉菜单需要至少两个标签完成结构： <code><select></code>： 选择，表示定义下拉菜单整体结构。 <code><option></code>： 选项，表示定义下拉菜单的每一项。 两个标签都是双标签，文本级标签。 关系：select>option*4 默认情况下，选中的是第一项。 <pre><code class="prism language-html"><select> <option>广州</option> <option>北京</option> <option>重庆</option> <option>上海</option> </select> </code></pre> <a href="http://img.e-com-net.com/image/info8/fd83b1071cb5453d921870841aadb168.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fd83b1071cb5453d921870841aadb168.jpg" alt="HTML基本语法_第18张图片" width="108" height="168" style="border:1px solid black;"></a> 下拉菜单可以通过给<code><option></code>标签设置selected属性，更改默认选中项。 如果想选中哪一项，给对应的<code><option></code>设置selected属性的属性值为selected。 <pre><code class="prism language-html"><option selected="selected">北京</option> </code></pre> 下拉菜单中如果选项变得复杂，可以将<code><option></code>进行分组管理。 可以使用 <code><optgroup></code> 标签对选项进行分组，<code><optgroup></code>是一个双标签。 关系：select>optgroup>option <code><optgroup></code>可以设置一个label属性，表示给这一组选项添加一个标签名，分组标签<code><optgroup></code>是不能被点击选择的。 <pre><code class="prism language-html"><select> <optgroup label="国内"> <option>广州</option> <option selected="selected">北京</option> <option>重庆</option> <option>上海</option> </optgroup> <optgroup label="国外"> <option>纽约</option> <option>伦敦</option> <option>巴黎</option> </optgroup> </select> </code></pre> <a href="http://img.e-com-net.com/image/info8/6fa3dd1e06c3497cbad2c24fc82ec4fe.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6fa3dd1e06c3497cbad2c24fc82ec4fe.jpg" alt="HTML基本语法_第19张图片" width="129" height="288" style="border:1px solid black;"></a> <h6>label标签</h6> 作用： 如果将表单控件与提示内容使用<code><label></code>进行绑定后，当用户鼠标点击<code><label></code>内的提示内容时，浏览器就会自动将焦点转到和标签相关的表单控件上。提高用户体验。 绑定方法： ① <ol> <li>给表单元素设置id属性</li> <li>然后将需要绑定的其他内容用<code><label></code>标签包裹</li> <li>给<code><label></code>标签设置for属性，属性值为绑定的表单的id属性值。</li> </ol> <pre><code class="prism language-html"><input type="checkbox" name="hobby" id="sport" /> <label for="sport">运动</label> </code></pre> ②如果绑定内容和表单元素写在一起，可以化简绑定写法，直接使用<code><label></code>标签将绑定内容与表单元素一起进行嵌套。 <pre><code class="prism language-html"><label><input type="radio" name="sex" />男</label> </code></pre> <h4>水平分割线</h4> <code><hr></code>标签在 HTML 页面中创建一条水平线。 水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。 <code><hr></code>为单标签，实际在HTML4.0以后已经被废弃，水平线的效果可以使用css中的边框制作。 了解hr的常用属性 <table> <thead> <tr> <th>属性</th> <th>属性值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>align</td> <td>left center right</td> <td>设置hr的对齐方式</td> </tr> <tr> <td>noshade</td> <td>noshade</td> <td>设置 hr 的颜色呈现为纯色。</td> </tr> <tr> <td>color</td> <td>颜色值或颜色名</td> <td>设置hr的颜色</td> </tr> <tr> <td>size</td> <td>像素值</td> <td>设置水平线的高度</td> </tr> <tr> <td>width</td> <td>像素值、百分比</td> <td>设置水平线的宽度</td> </tr> </tbody> </table> 实例 <pre><code class="prism language-html"><hr align="center" color="red" size="10px" width="500px" /> </code></pre> <a href="http://img.e-com-net.com/image/info8/1ff43ac0503c492fa578eef0a21e1a8d.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/1ff43ac0503c492fa578eef0a21e1a8d.png" alt="" width="930" height="97"></a> <h4>换行</h4> <code> </code>（breaking）标签是HTML中一个简单的换行符。 <code> </code>标签是一个单标签。 在需要换行的位置可以使用<code> </code>标签书写，但是<code> </code>与<code></code>不同，<code> </code>没有建立新的段落的语义，只是简单的进行强制换行。 <h4>字符实体</h4> 在普通文字书写时，有一些特殊符号不能直接书写（例如连续的空格），或者符号具有特殊功能也不能直接书写（例如<>符号），可以使用一些HTML提前预留好的替换字符进行书写，这些替换字符叫做字符实体。 通过查询w3cshool手册，查看所有的字符实体。 可以查询特殊字符的替换写法，包含实体名称以及实体编号。 常用的字符实体列表： <a href="http://img.e-com-net.com/image/info8/9fb00a10e7d543ac84cb126d1160c49a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9fb00a10e7d543ac84cb126d1160c49a.jpg" alt="HTML基本语法_第20张图片" width="650" height="438" style="border:1px solid black;"></a> 规则：所有的字符实体和实体编号都是以&开头，以；结尾的。 建议使用实体名称，好处是名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。 注意：实体名称对大小写敏感！ 建议：不需要强制记忆所有的字符实体，只需要记忆常用的几个字符实体名称即可，其他可以通过手册进行查询。 <h3>HTML5</h3> 它是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。用于取代HTML4与XHTML的新一代标准版本，所以叫HTML5。 <h4>H5新变化</h4> XHTML可扩展超文本标记语言 XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用的更多的需求。 HTML5 <ul> <li>HTML5的设计目的是为了在移动设备上支持多媒体。</li> <li>增加了新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3特性。</li> <li>废弃一些元素和属性比如font，center等</li> </ul> 优势： <ul> <li>提高可用性和改进用户的友好体验</li> <li>更好的语义化标签</li> <li>可以给站点带来更多的多媒体元素（视频和音频）</li> <li>可以很好的替代FLASH和Silverlight</li> <li>当涉及到网站的抓取和索引的时候，对于SEO很友好</li> <li>将被大量应用于移动应用程序和游戏</li> <li>可移植性好</li> </ul> 劣势： <ul> <li>该标准并未能很好的被PC端浏览器所支持</li> <li>IE9一下的浏览器几乎都不兼容</li> </ul> HTML5前景趋势 <ul> <li>移动开发优先</li> <li>游戏开发</li> </ul> 广义的HTML5 <ul> <li>狭义的HTML5是指HTML语言的第5个版本</li> <li>而广义的HTML5是HTML5本身+CSS3+JavaScript技术的综合</li> </ul> <h4>HTML5新增语义化标签</h4> 目的：掌握常用的布局标签。 以前制作的网页布局，我们基本用div来做。div就是一个普通的块级标签，对于搜索引擎来说，是没有语义的。 新增语义化标签： <a href="http://img.e-com-net.com/image/info8/5d89156c77224e50b28fb1cfc4a18f4c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5d89156c77224e50b28fb1cfc4a18f4c.jpg" alt="HTML基本语法_第21张图片" width="650" height="475" style="border:1px solid black;"></a> <ul> <li><code><head></code>头部标签</li> <li><code><nav></code>导航标签</li> <li><code><main></code>主体标签</li> <li><code><article></code>独立的内容标签</li> <li><code><section></code>区段标签</li> <li><code><aside></code>侧边栏标签</li> </ul> 注意： <ul> <li>语义化标签主要是针对搜索引擎</li> <li>这些新标签页面中可以使用多次</li> <li>IE9中需要把这些元素转换为块级元素</li> <li>移动端使用这些标签更多</li> </ul> <h4>HTML5新增多媒体标签（音频和视频标签）</h4> 多媒体标签包含两个： <ul> <li>音频：<code><audio></code></li> <li>视频：<code><video></code></li> </ul> 使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件。 <h5><code><audio></code>音频标签</h5> HTML5在不使用插件的情况下也可以原生的支持音频格式文件，当然支持的文件类型有限。 <a href="http://img.e-com-net.com/image/info8/b168d73ed31144af9feee1d1ac1a8a45.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b168d73ed31144af9feee1d1ac1a8a45.jpg" alt="HTML基本语法_第22张图片" width="650" height="151" style="border:1px solid black;"></a> 语法格式： <pre><code class="prism language-html"> <audio src="media/snow.mp3" controls></audio> </code></pre> 兼容写法： <pre><code class="prism language-html"><audio controls> <source src="media/snow.mp3" type="audio/mpeg"> <source src="media/snow.ogg" type="audio/ogg"> 您的浏览器版本过低，不支持音频格式 </audio> </code></pre> 属性值： <a href="http://img.e-com-net.com/image/info8/98238d8f18b44b7b87133b31ae3acc99.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/98238d8f18b44b7b87133b31ae3acc99.jpg" alt="HTML基本语法_第23张图片" width="650" height="270" style="border:1px solid black;"></a> <h5><code><video></code>视频标签</h5> HTML5在不使用插件的情况下也可以原生的支持视频格式文件，当然支持的文件类型有限。 <a href="http://img.e-com-net.com/image/info8/89dc16b36fea4503a877b51a6c9c47bf.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/89dc16b36fea4503a877b51a6c9c47bf.jpg" alt="HTML基本语法_第24张图片" width="650" height="146" style="border:1px solid black;"></a> 语法格式： <pre><code class="prism language-html"> <video src="media/video.mp4" controls autoplay muted></video> </code></pre> 兼容写法： <pre><code class="prism language-html"><video controls width="300px" poster="images/pig.jpg"> <source src="media/video.mp4" type="video/mp4"> <source src="media/video.ogg" type="video/ogg"> 您的浏览器版本过低，不支持视频格式 </video> </code></pre> 属性值： <a href="http://img.e-com-net.com/image/info8/b2a7a1e6da574f2eb13ebae6cc165f92.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b2a7a1e6da574f2eb13ebae6cc165f92.jpg" alt="HTML基本语法_第25张图片" width="650" height="303" style="border:1px solid black;"></a> 总结： <ul> <li>音频标签和视频标签使用基本一致。</li> <li>浏览器支持情况不同。</li> <li>我们可以给视频标签添加muted属性进行自动静音播放视频，音频不可以。</li> <li>视频标签是重点，我们经常设置自动播放，循环和设置大小属性，不使用controls控件。</li> </ul> <h4>HTML5新增表单标签</h4> <h5>输入标签</h5> <a href="http://img.e-com-net.com/image/info8/bf82d3a26bbb4a58ace6532aed536812.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/bf82d3a26bbb4a58ace6532aed536812.jpg" alt="HTML基本语法_第26张图片" width="650" height="395" style="border:1px solid black;"></a> <pre><code class="prism language-html"><form action=""> 姓名:<input type="text"><br> 邮箱:<input type="email"><br> 个人网址:<input type="url"><br> 日期:<input type="date"><br> 时间:<input type="time"><br> 月份:<input type="month"><br> 周:<input type="week"><br> 年龄:<input type="number" max="50" min="10" step="2" value="12"><br> 喜欢运动程度:<input type="range" max="100" min="0" step="5" value="25"><br> 手机号码:<input type="tel"><br> 搜索框:<input type="search"><br> 颜色表单:<input type="color"><br> <input type="submit" value="提交"> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/5a9bad58f54543af9c1ccf5bcf538360.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/5a9bad58f54543af9c1ccf5bcf538360.png" alt="HTML基本语法_第27张图片" width="318" height="410" style="border:1px solid black;"></a> <code><datalist></code>标签 <ul> <li><code><datalist></code>标签规定了<code><input></code>元素可能的选项列表。</li> <li><code><datalist></code>元素包含了一组<code><option></code>元素，这些元素表示预定义可选值，在<code><input></code>元素输入过程中，会自动响应<code><option></code>元素的值。</li> <li>绑定<code><input></code>标签必须设置list属性，属性值等于<code><datalist></code>标签的id属性值。</li> </ul> <pre><code class="prism language-html">城市:<input type="text" list="city-list"> <datalist id="city-list"> <option value="广州">gz</option> <option value="上海">sh</option> <option value="北京">bj</option> <option value="太原"></option> </datalist> </code></pre> <a href="http://img.e-com-net.com/image/info8/8c9dead50f9e44afade63a4b2271b05b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8c9dead50f9e44afade63a4b2271b05b.jpg" alt="HTML基本语法_第28张图片" width="326" height="322" style="border:1px solid black;"></a> <h5>表单属性</h5> <a href="http://img.e-com-net.com/image/info8/7e2948a218a94c7ea586c6cf3bbb6321.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7e2948a218a94c7ea586c6cf3bbb6321.jpg" alt="HTML基本语法_第29张图片" width="650" height="146" style="border:1px solid black;"></a> <a href="http://img.e-com-net.com/image/info8/c5c38dc1f9af4229a203e7dd5781c6ea.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c5c38dc1f9af4229a203e7dd5781c6ea.jpg" alt="HTML基本语法_第30张图片" width="650" height="270" style="border:1px solid black;"></a> <a href="http://img.e-com-net.com/image/info8/96cdada7aff04677b230bc39bcaff234.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/96cdada7aff04677b230bc39bcaff234.jpg" alt="HTML基本语法_第31张图片" width="650" height="146" style="border:1px solid black;"></a> <a href="http://img.e-com-net.com/image/info8/a8f5ff31cc4d439490e0923378bdbb08.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a8f5ff31cc4d439490e0923378bdbb08.jpg" alt="HTML基本语法_第32张图片" width="650" height="303" style="border:1px solid black;"></a> 总结： <ul> <li>音频标签和视频标签使用基本一致。</li> <li>浏览器支持情况不同。</li> <li>我们可以给视频标签添加muted属性进行自动静音播放视频，音频不可以。</li> <li>视频标签是重点，我们经常设置自动播放，循环和设置大小属性，不使用controls控件。</li> </ul> <h4>HTML5新增表单标签</h4> <h5>输入标签</h5> <a href="http://img.e-com-net.com/image/info8/3c28b3c0401741f29c836ef4fadbe00c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3c28b3c0401741f29c836ef4fadbe00c.jpg" alt="HTML基本语法_第33张图片" width="650" height="395" style="border:1px solid black;"></a> <pre><code class="prism language-html"><form action=""> 姓名:<input type="text"><br> 邮箱:<input type="email"><br> 个人网址:<input type="url"><br> 日期:<input type="date"><br> 时间:<input type="time"><br> 月份:<input type="month"><br> 周:<input type="week"><br> 年龄:<input type="number" max="50" min="10" step="2" value="12"><br> 喜欢运动程度:<input type="range" max="100" min="0" step="5" value="25"><br> 手机号码:<input type="tel"><br> 搜索框:<input type="search"><br> 颜色表单:<input type="color"><br> <input type="submit" value="提交"> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/50b1d59746a54ccab901389c4cbd8628.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/50b1d59746a54ccab901389c4cbd8628.png" alt="HTML基本语法_第34张图片" width="318" height="410" style="border:1px solid black;"></a> <code><datalist></code>标签 <ul> <li><code><datalist></code>标签规定了<code><input></code>元素可能的选项列表。</li> <li><code><datalist></code>元素包含了一组<code><option></code>元素，这些元素表示预定义可选值，在<code><input></code>元素输入过程中，会自动响应<code><option></code>元素的值。</li> <li>绑定<code><input></code>标签必须设置list属性，属性值等于<code><datalist></code>标签的id属性值。</li> </ul> <pre><code class="prism language-html">城市:<input type="text" list="city-list"> <datalist id="city-list"> <option value="广州">gz</option> <option value="上海">sh</option> <option value="北京">bj</option> <option value="太原"></option> </datalist> </code></pre> <a href="http://img.e-com-net.com/image/info8/23c103e60a884faead0d7616bcefa0d3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/23c103e60a884faead0d7616bcefa0d3.jpg" alt="HTML基本语法_第35张图片" width="326" height="322" style="border:1px solid black;"></a> <h5>表单属性</h5> <a href="http://img.e-com-net.com/image/info8/2353fe8da39d44f88b5457e84a9d7504.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2353fe8da39d44f88b5457e84a9d7504.jpg" alt="HTML基本语法_第36张图片" width="650" height="333" style="border:1px solid black;"></a> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1719161959573696512"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(前端开发--布白的学习笔记,html,html5)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835514462770130944.htm" title="斤斤计较的婚姻到底有多难？" target="_blank">斤斤计较的婚姻到底有多难？</a> 白心之岂必有为 <div>很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响</div> </li> <li><a href="/article/1835514464028422144.htm" title="情绪觉察日记第37天" target="_blank">情绪觉察日记第37天</a> 露露_e800 <div>今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得</div> </li> <li><a href="/article/1835514335561084928.htm" title="芦花鞋一四" target="_blank">芦花鞋一四</a> 许叶晗 <div>又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花</div> </li> <li><a href="/article/1835514307744460800.htm" title="QQ群采集助手，精准引流必备神器" target="_blank">QQ群采集助手，精准引流必备神器</a> 2401_87347160 <a class="tag" taget="_blank" href="/search/%E5%85%B6%E4%BB%96/1.htm">其他</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具，它通过关键词搜索功能，帮助用户快速找到相关的微信群，并提供筛选是否需要验证的群组的功能。主要功能关键词搜索：用户可以输入关键词，工具将自动查找包含该关键词的微信群。筛选功能：工具提供筛选机制，用户可以选择是否只显示需要验证或不需要验证的群组。精准引流：通过上述功能，用户可以更精准地找到目标群组，进行有效的引流操作。3.设备需求该工具可以</div> </li> <li><a href="/article/1835514207114719232.htm" title="关于沟通这件事，项目经理不需要每次都面对面进行" target="_blank">关于沟通这件事，项目经理不需要每次都面对面进行</a> 流程大师兄 <div>很多项目经理都会遇到这样的问题，项目中由于事情太多，根本没有足够的时间去召开会议，那在这种情况下如何去有效地管理项目中的利益相关者？当然，不建议电子邮件也不需要开会的话，建议可以采取下面几种方式来形成有效的沟通，这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题，项目中哪些利益相关者是必须要进行沟通的？可以列出项目中所有的利益相关者清单，同时也整理出项目中哪些</div> </li> <li><a href="/article/1835513803861749760.htm" title="机器学习与深度学习间关系与区别" target="_blank">机器学习与深度学习间关系与区别</a> ℒℴѵℯ心·动ꦿ໊ོ꫞ <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入</div> </li> <li><a href="/article/1835513701143244800.htm" title="铭刻于星（四十二）" target="_blank">铭刻于星（四十二）</a> 随风至 <div>69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但</div> </li> <li><a href="/article/1835513570171908096.htm" title="底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说" target="_blank">底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说</a> 造命者说 <div>底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡</div> </li> <li><a href="/article/1835513571501502464.htm" title="2020-01-25" target="_blank">2020-01-25</a> 晴岚85 <div>郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什</div> </li> <li><a href="/article/1835513568917811200.htm" title="随笔 | 仙一般的灵气" target="_blank">随笔 | 仙一般的灵气</a> 海思沧海 <div>仙岛今天，我看了你全部，似乎已经进入你的世界我不知道，这是否是梦幻，还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求，这样才能够符合人生的梦想，生活才能够充满着阳光与快乐我不知道，我为什么会这样的感叹，是在感叹自己的人生，还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴，每天活在自己的梦中，活在一个不真实的世界是在逃避自己，还是在逃避周围的一切有时候我嘲笑自己，嘲笑自己如此的虚无，</div> </li> <li><a href="/article/1835513567663714304.htm" title="想家" target="_blank">想家</a> 爆米花机 <div>也许不同于大家对家乡的思念，我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福，我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女，我贪恋家的安逸。刚刚踏出大学校门，初出茅庐，无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气，是无法适应工作的节奏，是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志，选择再次踏上征程。图片发自App</div> </li> <li><a href="/article/1835513551624695808.htm" title="【iOS】MVC设计模式" target="_blank">【iOS】MVC设计模式</a> Magnetic_h <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/objective-c/1.htm">objective-c</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a> <div>MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod</div> </li> <li><a href="/article/1835513551142350848.htm" title="OC语言多界面传值五大方式" target="_blank">OC语言多界面传值五大方式</a> Magnetic_h <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/objective-c/1.htm">objective-c</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt</div> </li> <li><a href="/article/1835513440525971456.htm" title="一百九十四章. 自相矛盾" target="_blank">一百九十四章. 自相矛盾</a> 巨木擎天 <div>唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也</div> </li> <li><a href="/article/1835513424734416896.htm" title="UI学习——cell的复用和自定义cell" target="_blank">UI学习——cell的复用和自定义cell</a> Magnetic_h <a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添</div> </li> <li><a href="/article/1835512920797179904.htm" title="element实现动态路由+面包屑" target="_blank">element实现动态路由+面包屑</a> 软件技术NINI <a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/1.htm">vue案例</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi</div> </li> <li><a href="/article/1835512809883004928.htm" title="10月|愿你的青春不负梦想-读书笔记-01" target="_blank">10月|愿你的青春不负梦想-读书笔记-01</a> Tracy的小书斋 <div>本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便</div> </li> <li><a href="/article/1835512542735200256.htm" title="C语言宏函数" target="_blank">C语言宏函数</a> 南林yan <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a> <div>一、什么是宏函数？通过宏定义的函数是宏函数。如下，编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<<c<<endl;//800return0;}二、为什么要使用宏函数使用宏函数</div> </li> <li><a href="/article/1835512305320816640.htm" title="地推话术，如何应对地推过程中家长的拒绝" target="_blank">地推话术，如何应对地推过程中家长的拒绝</a> 校师学 <div>相信校长们在做地推的时候经常遇到这种情况：市场专员反馈家长不接单，咨询师反馈难以邀约这些家长上门，校区地推疲软，招生难。为什么？仅从地推层面分析，一方面因为家长受到的信息轰炸越来越多，对信息越来越“免疫”；而另一方面地推人员的专业能力和营销话术没有提高，无法应对家长的拒绝，对有意向的家长也不知如何跟进，眼睁睁看着家长走远；对于家长的疑问，更不知道如何有技巧地回答，机会白白流失。由于回答没技巧和专业</div> </li> <li><a href="/article/1835512178023690240.htm" title="谢谢你们，爱你们！" target="_blank">谢谢你们，爱你们！</a> 鹿游儿 <div>昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得</div> </li> <li><a href="/article/1835511911769272320.htm" title="C语言如何定义宏函数？" target="_blank">C语言如何定义宏函数？</a> 小九格物 <a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a> <div>在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参</div> </li> <li><a href="/article/1835511912192897024.htm" title="微服务下功能权限与数据权限的设计与实现" target="_blank">微服务下功能权限与数据权限的设计与实现</a> nbsaas-boot <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E6%9C%8D%E5%8A%A1/1.htm">微服务</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：</div> </li> <li><a href="/article/1835511912843014144.htm" title="理解Gunicorn：Python WSGI服务器的基石" target="_blank">理解Gunicorn：Python WSGI服务器的基石</a> 范范0825 <a class="tag" taget="_blank" href="/search/ipython/1.htm">ipython</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico</div> </li> <li><a href="/article/1835511669476913152.htm" title="小丽成长记（四十三）" target="_blank">小丽成长记（四十三）</a> 玲玲54321 <div>小丽发现，即使她好不容易调整好自己的心态下一秒总会有不确定的伤脑筋的事出现，一个接一个的问题，人生就没有停下的时候，小问题不断出现。不过她今天看的书，她接受了人生就是不确定的，厉害的人就是不断创造确定性，在Ta的领域比别人多的确定性就能让自己脱颖而出，显示价值从而获得的比别人多的利益。正是这样的原因，因为从前修炼自己太少，使得她现在在人生道路上打怪起来困难重重，她似乎永远摆脱不了那种无力感，有种习</div> </li> <li><a href="/article/1835511542284644352.htm" title="学点心理知识，呵护孩子健康" target="_blank">学点心理知识，呵护孩子健康</a> 静候花开_7090 <div>昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果</div> </li> <li><a href="/article/1835511163450912768.htm" title="2021年12月19日，春蕾教育集团团建活动感受——黄晓丹" target="_blank">2021年12月19日，春蕾教育集团团建活动感受——黄晓丹</a> 黄错错加油 <div>感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们</div> </li> <li><a href="/article/1835511036317364224.htm" title="Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断" target="_blank">Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断</a> 尐尐呅 <div>结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌（Mycobacteriumtuberculosis,Mtb）感染引起，获得性免疫缺陷综合症（艾滋病）由人免疫缺陷病毒（Humanimmunodeficiencyvirustype1,HIV-1）感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队，共同研究得出单细胞测序</div> </li> <li><a href="/article/1835511030260789248.htm" title="c++ 的iostream 和 c++的stdio的区别和联系" target="_blank">c++ 的iostream 和 c++的stdio的区别和联系</a> 黄卷青灯77 <a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/iostream/1.htm">iostream</a><a class="tag" taget="_blank" href="/search/stdio/1.htm">stdio</a> <div>在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in</div> </li> <li><a href="/article/1835510909070569472.htm" title="瑶池防线" target="_blank">瑶池防线</a> 谜影梦蝶 <div>冥华虽然逃过了影梦的军队，但他是一个忠臣，他选择上报战况。败给影梦后成逃兵，高层亡尔还活着，七重天失守......随便一条，即可处死冥华。冥华自然是知道以仙界高层的习性此信一发自己必死无疑，但他还选择上报实情，因为责任。同样此信送到仙宫后，知道此事的人，大多数人都认定冥华要完了，所以上到仙界高层，下到扫大街的，包括冥华自己，全都准备好迎接冥华之死。如果仙界现在还属于两方之争的话，冥华必死无疑。然而</div> </li> <li><a href="/article/1835510656011431936.htm" title="爬山后遗症" target="_blank">爬山后遗症</a> 璃绛 <div>爬山，攀登，一步一步走向制高点，是一种挑战。成功抵达是一种无法言语的快乐，在山顶吹吹风，看看风景，这是从未有过的体验。然而，爬山一时爽，下山腿打颤，颠簸的路，一路向下走，腿部力量不够，走起来抖到不行，停不下来了！第二天必定腿疼，浑身酸痛，坐立难安！</div> </li> <li><a href="/article/68.htm" title="mongodb3.03开启认证" target="_blank">mongodb3.03开启认证</a> 21jhf <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>下载了最新mongodb3.03版本，当使用--auth 参数命令行开启mongodb用户认证时遇到很多问题，现总结如下：（百度上搜到的基本都是老版本的，看到db.addUser的就是，请忽略） Windows下我做了一个bat文件，用来启动mongodb，命令行如下： mongod --dbpath db\data --port 27017 --directoryperdb --logp</div> </li> <li><a href="/article/195.htm" title="【Spark103】Task not serializable" target="_blank">【Spark103】Task not serializable</a> bit1129 <a class="tag" taget="_blank" href="/search/Serializable/1.htm">Serializable</a> <div>Task not serializable是Spark开发过程最令人头疼的问题之一，这里记录下出现这个问题的两个实例，一个是自己遇到的，另一个是stackoverflow上看到。等有时间了再仔细探究出现Task not serialiazable的各种原因以及出现问题后如何快速定位问题的所在，至少目前阶段碰到此类问题，没有什么章法 1. package spark.exampl</div> </li> <li><a href="/article/322.htm" title="你所熟知的 LRU(最近最少使用)" target="_blank">你所熟知的 LRU(最近最少使用)</a> dalan_123 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>关于LRU这个名词在很多地方或听说，或使用，接下来看下lru缓存回收的实现 1、大体的想法 a、查询出最近最晚使用的项 b、给最近的使用的项做标记通过使用链表就可以完成这两个操作，关于最近最少使用的项只需要返回链表的尾部；标记最近使用的项，只需要将该项移除并放置到头部，那么难点就出现你如何能够快速在链表定位对应的该项？这时候多</div> </li> <li><a href="/article/449.htm" title="Javascript 跨域" target="_blank">Javascript 跨域</a> 周凡杨 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jsonp/1.htm">jsonp</a><a class="tag" taget="_blank" href="/search/%E8%B7%A8%E5%9F%9F/1.htm">跨域</a><a class="tag" taget="_blank" href="/search/cross-domain/1.htm">cross-domain</a> <div> </div> </li> <li><a href="/article/576.htm" title="linux下安装apache服务器" target="_blank">linux下安装apache服务器</a> g21121 <a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a> <div>安装apache 下载windows版本apache，下载地址：http://httpd.apache.org/download.cgi 1.windows下安装apache Windows下安装apache比较简单，注意选择路径和端口即可，这里就不再赘述了。 2.linux下安装apache：下载之后上传到linux的相关目录，这里指定为/home/apach</div> </li> <li><a href="/article/703.htm" title="FineReport的JS编辑框和URL地址栏语法简介" target="_blank">FineReport的JS编辑框和URL地址栏语法简介</a> 老A不折腾 <a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/web%E6%8A%A5%E8%A1%A8/1.htm">web报表</a><a class="tag" taget="_blank" href="/search/%E6%8A%A5%E8%A1%A8%E8%BD%AF%E4%BB%B6/1.htm">报表软件</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E6%B3%95%E6%80%BB%E7%BB%93/1.htm">语法总结</a> <div> JS编辑框： 1.FineReport的js。作为一款BS产品，browser端的JavaScript是必不可少的。 FineReport中的js是已经调用了finereport.js的。大家知道，预览报表时，报表servlet会将cpt模板转为html，在这个html的head头部中会引入FineReport的js，这个finereport.js中包含了许多内置的fun</div> </li> <li><a href="/article/830.htm" title="根据STATUS信息对MySQL进行优化" target="_blank">根据STATUS信息对MySQL进行优化</a> 墙头上一根草 <a class="tag" taget="_blank" href="/search/status/1.htm">status</a> <div>mysql 查看当前正在执行的操作，即正在执行的sql语句的方法为: show processlist 命令 mysql> show global status;可以列出MySQL服务器运行各种状态值，我个人较喜欢的用法是show status like '查询值%';一、慢查询mysql> show variab</div> </li> <li><a href="/article/957.htm" title="我的spring学习笔记7-Spring的Bean配置文件给Bean定义别名" target="_blank">我的spring学习笔记7-Spring的Bean配置文件给Bean定义别名</a> aijuans <a class="tag" taget="_blank" href="/search/Spring+3/1.htm">Spring 3</a> <div>本文介绍如何给Spring的Bean配置文件的Bean定义别名？原始的 <bean id="business" class="onlyfun.caterpillar.device.Business"> <property name="writer"> <ref b</div> </li> <li><a href="/article/1084.htm" title="高性能mysql 之性能剖析" target="_blank">高性能mysql 之性能剖析</a> annan211 <a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD/1.htm">性能</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/mysql+%E6%80%A7%E8%83%BD%E5%89%96%E6%9E%90/1.htm">mysql 性能剖析</a><a class="tag" taget="_blank" href="/search/%E5%89%96%E6%9E%90/1.htm">剖析</a> <div> 1 定义性能优化 mysql服务器性能，此处定义为响应时间。在解释性能优化之前，先来消除一个误解，很多人认为，性能优化就是降低cpu的利用率或者减少对资源的使用。这是一个陷阱。资源时用来消耗并用来工作的，所以有时候消耗更多的资源能够加快查询速度，保持cpu忙绿，这是必要的。很多时候发现编译进了新版本的InnoDB之后，cpu利用率上升的很厉害，这并不</div> </li> <li><a href="/article/1211.htm" title="主外键和索引唯一性约束" target="_blank">主外键和索引唯一性约束</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/%E7%B4%A2%E5%BC%95/1.htm">索引</a><a class="tag" taget="_blank" href="/search/%E5%94%AF%E4%B8%80%E6%80%A7%E7%BA%A6%E6%9D%9F/1.htm">唯一性约束</a><a class="tag" taget="_blank" href="/search/%E4%B8%BB%E5%A4%96%E9%94%AE%E7%BA%A6%E6%9D%9F/1.htm">主外键约束</a><a class="tag" taget="_blank" href="/search/%E8%81%94%E6%9C%BA%E5%88%A0%E9%99%A4/1.htm">联机删除</a> <div>目标;第一步;创建两张表用户表和文章表第二步;发表文章 1,建表; ---用户表 BlogUsers --userID唯一的 --userName --pwd --sex create </div> </li> <li><a href="/article/1338.htm" title="线程的调度" target="_blank">线程的调度</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B%E7%9A%84%E8%B0%83%E5%BA%A6/1.htm">线程的调度</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a> <div>1. Java提供一个线程调度程序来监控程序中启动后进入可运行状态的所有线程。线程调度程序按照线程的优先级决定应调度哪些线程来执行。 2. 多数线程的调度是抢占式的（即我想中断程序运行就中断，不需要和将被中断的程序协商） a) </div> </li> <li><a href="/article/1465.htm" title="查看日志常用命令" target="_blank">查看日志常用命令</a> bijian1013 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%91%BD%E4%BB%A4/1.htm">命令</a><a class="tag" taget="_blank" href="/search/unix/1.htm">unix</a> <div>一.日志查找方法，可以用通配符查某台主机上的所有服务器grep "关键字" /wls/applogs/custom-*/error.log 二.查看日志常用命令1.grep '关键字' error.log：在error.log中搜索'关键字'2.grep -C10 '关键字' error.log：显示关键字前后10行记录3.grep '关键字' error.l</div> </li> <li><a href="/article/1592.htm" title="【持久化框架MyBatis3一】MyBatis版HelloWorld" target="_blank">【持久化框架MyBatis3一】MyBatis版HelloWorld</a> bit1129 <a class="tag" taget="_blank" href="/search/helloworld/1.htm">helloworld</a> <div>MyBatis这个系列的文章，主要参考《Java Persistence with MyBatis 3》。样例数据本文以MySQL数据库为例，建立一个STUDENTS表，插入两条数据，然后进行单表的增删改查 CREATE TABLE STUDENTS ( stud_id int(11) NOT NULL AUTO_INCREMENT, </div> </li> <li><a href="/article/1719.htm" title="【Hadoop十五】Hadoop Counter" target="_blank">【Hadoop十五】Hadoop Counter</a> bit1129 <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a> <div> 1. 只有Map任务的Map Reduce Job File System Counters FILE: Number of bytes read=3629530 FILE: Number of bytes written=98312 FILE: Number of read operations=0 FILE: Number of lar</div> </li> <li><a href="/article/1846.htm" title="解决Tomcat数据连接池无法释放" target="_blank">解决Tomcat数据连接池无法释放</a> ronin47 <a class="tag" taget="_blank" href="/search/tomcat+%E8%BF%9E%E6%8E%A5%E6%B1%A0%E3%80%80%E4%BC%98%E5%8C%96/1.htm">tomcat 连接池　优化</a> <div> 近段时间，公司的检测中心报表系统(SMC)的开发人员时不时找到我，说用户老是出现无法登录的情况。前些日子因为手头上有Jboss集群的测试工作，发现用户不能登录时，都是在Tomcat中将这个项目Reload一下就好了，不过只是治标而已，因为大概几个小时之后又会再次出现无法登录的情况。今天上午，开发人员小毛又找到我，要我协助将这个问题根治一下，拖太久用户难保不投诉。简单分析了一</div> </li> <li><a href="/article/1973.htm" title="java-75-二叉树两结点的最低共同父结点" target="_blank">java-75-二叉树两结点的最低共同父结点</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> import java.util.LinkedList; import java.util.List; import ljn.help.*; public class BTreeLowestParentOfTwoNodes { public static void main(String[] args) { /* * node data is stored in</div> </li> <li><a href="/article/2100.htm" title="行业垂直搜索引擎网页抓取项目" target="_blank">行业垂直搜索引擎网页抓取项目</a> carlwu <a class="tag" taget="_blank" href="/search/Lucene/1.htm">Lucene</a><a class="tag" taget="_blank" href="/search/Nutch/1.htm">Nutch</a><a class="tag" taget="_blank" href="/search/Heritrix/1.htm">Heritrix</a><a class="tag" taget="_blank" href="/search/Solr/1.htm">Solr</a> <div>公司有一个搜索引擎项目，希望各路高人有空来帮忙指导，谢谢！这是详细需求：（1）通过提供的网站地址(大概100-200个网站)，网页抓取程序能不断抓取网页和其它类型的文件（如Excel、PDF、Word、ppt及zip类型），并且程序能够根据事先提供的规则，过滤掉不相干的下载内容。（2）程序能够搜索这些抓取的内容，并能对这些抓取文件按照油田名进行分类，然后放到服务器不同的目录中。 </div> </li> <li><a href="/article/2227.htm" title="[通讯与服务]在总带宽资源没有大幅增加之前,不适宜大幅度降低资费" target="_blank">[通讯与服务]在总带宽资源没有大幅增加之前,不适宜大幅度降低资费</a> comsci <a class="tag" taget="_blank" href="/search/%E8%B5%84%E6%BA%90/1.htm">资源</a> <div> 降低通讯服务资费，就意味着有更多的用户进入，就意味着通讯服务提供商要接待和服务更多的用户，在总体运维成本没有由于技术升级而大幅下降的情况下，这种降低资费的行为将导致每个用户的平均带宽不断下降，而享受到的服务质量也在下降，这对用户和服务商都是不利的。。。。。。。。 &nbs</div> </li> <li><a href="/article/2354.htm" title="Java时区转换及时间格式" target="_blank">Java时区转换及时间格式</a> Cwind <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>本文介绍Java API 中 Date, Calendar, TimeZone和DateFormat的使用，以及不同时区时间相互转化的方法和原理。问题描述：向处于不同时区的服务器发请求时需要考虑时区转换的问题。譬如，服务器位于东八区（北京时间，GMT+8:00），而身处东四区的用户想要查询当天的销售记录。则需把东四区的“今天”这个时间范围转换为服务器所在时区的时间范围。 </div> </li> <li><a href="/article/2481.htm" title="readonly,只读，不可用" target="_blank">readonly,只读，不可用</a> dashuaifu <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/disable/1.htm">disable</a><a class="tag" taget="_blank" href="/search/readOnly/1.htm">readOnly</a><a class="tag" taget="_blank" href="/search/readOnly/1.htm">readOnly</a> <div>readOnly 和 readonly 不同，在做js开发时一定要注意函数大小写和jsp黄线的警告！！！我就经历过这么一件事：使用readOnly在某些浏览器或同一浏览器不同版本有的可以实现“只读”功能，有的就不行，而且函数readOnly有黄线警告！！！就这样被折磨了不短时间！！！（期间使用过disable函数，但是发现disable函数之后后台接收不到前台的的数据！！！） </div> </li> <li><a href="/article/2608.htm" title="LABjs、RequireJS、SeaJS 介绍" target="_blank">LABjs、RequireJS、SeaJS 介绍</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a> <div>LABjs 的核心是 LAB（Loading and Blocking）：Loading 指异步并行加载，Blocking 是指同步等待执行。LABjs 通过优雅的语法（script 和 wait）实现了这两大特性，核心价值是性能优化。LABjs 是一个文件加载器。RequireJS 和 SeaJS 则是模块加载器，倡导的是一种模块化开发理念，核心价值是让 JavaScript 的模块化开发变得更</div> </li> <li><a href="/article/2735.htm" title="[应用结构]入口脚本" target="_blank">[应用结构]入口脚本</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/yii2/1.htm">yii2</a> <div>入口脚本入口脚本是应用启动流程中的第一环，一个应用（不管是网页应用还是控制台应用）只有一个入口脚本。终端用户的请求通过入口脚本实例化应用并将将请求转发到应用。 Web 应用的入口脚本必须放在终端用户能够访问的目录下，通常命名为 index.php，也可以使用 Web 服务器能定位到的其他名称。控制台应用的入口脚本一般在应用根目录下命名为 yii（后缀为.php），该文</div> </li> <li><a href="/article/2862.htm" title="haoop shell命令" target="_blank">haoop shell命令</a> eksliang <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/hadoop+shell/1.htm">hadoop shell</a> <div> cat chgrp chmod chown copyFromLocal copyToLocal cp du dus expunge get getmerge ls lsr mkdir movefromLocal mv put rm rmr setrep stat tail test text </div> </li> <li><a href="/article/2989.htm" title="MultiStateView不同的状态下显示不同的界面" target="_blank">MultiStateView不同的状态下显示不同的界面</a> gundumw100 <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>只要将指定的view放在该控件里面，可以该view在不同的状态下显示不同的界面，这对ListView很有用，比如加载界面，空白界面，错误界面。而且这些见面由你指定布局，非常灵活。 PS：ListView虽然可以设置一个EmptyView，但使用起来不方便，不灵活，有点累赘。 <com.kennyc.view.MultiStateView xmlns:android=&qu</div> </li> <li><a href="/article/3116.htm" title="jQuery实现页面内锚点平滑跳转" target="_blank">jQuery实现页面内锚点平滑跳转</a> ini <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>平时我们做导航滚动到内容都是通过锚点来做，刷的一下就直接跳到内容了，没有一丝的滚动效果，而且 url 链接最后会有“小尾巴”，就像#keleyi，今天我就介绍一款 jquery 做的滚动的特效，既可以设置滚动速度，又可以在 url 链接上没有“小尾巴”。效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/37.htmHTML文件代码： &</div> </li> <li><a href="/article/3243.htm" title="kafka offset迁移" target="_blank">kafka offset迁移</a> kane_xie <a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a> <div>在早前的kafka版本中（0.8.0），offset是被存储在zookeeper中的。到当前版本（0.8.2）为止，kafka同时支持offset存储在zookeeper和offset manager（broker）中。从官方的说明来看，未来offset的zookeeper存储将会被弃用。因此现有的基于kafka的项目如果今后计划保持更新的话，可以考虑在合适</div> </li> <li><a href="/article/3370.htm" title="android > 搭建 cordova 环境" target="_blank">android > 搭建 cordova 环境</a> mft8899 <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div> 1 , 安装 node.js http://nodejs.org node -v 查看版本 2, 安装 npm 可以先从 https://github.com/isaacs/npm/tags 下载源码解压到</div> </li> <li><a href="/article/3497.htm" title="java封装的比较器，比较是否全相同，获取不同字段名字" target="_blank">java封装的比较器，比较是否全相同，获取不同字段名字</a> qifeifei <div> 非常实用的java比较器，贴上代码： import java.util.HashSet; import java.util.List; import java.util.Set; import net.sf.json.JSONArray; import net.sf.json.JSONObject; import net.sf.json.JsonConfig; i</div> </li> <li><a href="/article/3624.htm" title="记录一些函数用法" target="_blank">记录一些函数用法</a> .Aky. <a class="tag" taget="_blank" href="/search/%E4%BD%8D%E8%BF%90%E7%AE%97/1.htm">位运算</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a><a class="tag" taget="_blank" href="/search/IP/1.htm">IP</a> <div>高手们照旧忽略。想弄个全天朝IP段数据库，找了个今天最新更新的国内所有运营商IP段，copy到文件，用文件函数，字符串函数把玩下。分割出startIp和endIp这样格式写入.txt文件，直接用phpmyadmin导入.csv文件的形式导入。（生命在于折腾，也许你们觉得我傻X，直接下载人家弄好的导入不就可以，做自己的菜鸟，让别人去说吧）当然用到了ip2long()函数把字符串转为整型数</div> </li> <li><a href="/article/3751.htm" title="sublime text 3 rust" target="_blank">sublime text 3 rust</a> wudixiaotie <a class="tag" taget="_blank" href="/search/Sublime+Text/1.htm">Sublime Text</a> <div>1.sublime text 3 => install package => Rust 2.cd ~/.config/sublime-text-3/Packages 3.mkdir rust 4.git clone https://github.com/sp0/rust-style 5.cd rust-style 6.cargo build --release 7.ctrl</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>