HTML、CSS知识点总结

文章目录

  • 一,HTML+CSS基础
    • 1-1 HTML和CSS的关系:
    • 1-2 HTML的结构:
      • 1.2.1 学习要点:
      • 1.2.2 HTML的固定结构:
    • 1.3HTML的文本:
      • 1.3.1标题和段落
        • 标题
        • 段落
          • 空白
          • 换行符和水平线
      • 1.3.2文本的格式化(语义化标记):
    • 1.4HTML的列表
      • 1.4.1有序列表
      • 1.4.2无序列表
      • 1.4.3自定义列表
    • 1.5HTML的链接
      • 1.5.1 HTML 链接
      • 1.5.2 HTML 超链接(链接)
        • 1.5.2.1 绝对url
        • 1.5.2.2 相对url
      • 1.5.3HTML 空链接
        • 1.5.3.1HTML 链接 - target 属性
        • 1.5.3.2HTML 链接 -name 属性
    • 1.6HTML的图像
      • 1.6.1HTML 图像- 图像标签(``)和源属性(Src)
      • 1.6.2图像格式
      • 1.6.3HTML 图像- Alt属性
      • 1.6.4HTML 图像- 设置图像的高度与宽度
    • 1.7HTML的表格
      • 1.7.1HTML 表格的基本结构:
        • HTML 表格表头单元格
        • 表格标题
        • 标题HTML表格高度和宽度
        • HTML表格背景
        • HTML表格空间
        • HTML合并单元格(跨行和跨列)
        • HTML表格头部、主体、页脚
        • HTML表格的嵌套
    • 1.7HTML的表单
      • 1.7.1HTML表单
      • 1.7.2表单元素
    • 1.8HTML其他标记

一,HTML+CSS基础

1-1 HTML和CSS的关系:

学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的:

  • HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
  • CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
  • javaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。

1-2 HTML的结构:

1.2.1 学习要点:

  • 理解html的结构
  • 学习标签
  • 标签和元素

1.2.2 HTML的固定结构:


<html lang="en">
 <head>
	<meta charset="UTF-8">
	<title>title>
 head>
	<body>
		<h1>This is the Main Headingh1>
		<p>This text might be an introduction to the rest of the page. And if the page is a 
			 long one it might be split up into several sub-headings.<p>
		<h2>This is a Sub-Headingh2>
		<p>Many long articles have sub-headings so to help you follow the structure of what 
			 is being written. There may even be sub-sub-headings (or lower-level headings).
			 p>
		<h2>Another Sub-Headingh2>
		<p>Here you can see another sub-heading.p>
	body>
html>

代码讲解:

  1. 称为根标签,所有的网页标签都在中。
  2. 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有</code>、<code><script>、 <style>、<link>、 <meta></code>等标签,头部标签在下一小节中会有详细介绍。</li> <li>在<code><body>和</body></code>标签之间的内容是网页的主要内容,如<code><h1>、<p>、<a>、<img></code>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。</li> </ol> <p><strong>在<code><head></head></code>中使用的标签</strong></p> <pre><code><head> <title>...

    声明部分:主要作用是用来告诉浏览器这个页面使用的是哪个标准。是HTML5标准。
    head部分:将页面的一些额外信息告诉服务器。不会显示在页面上。

    头标签都放在头部分之间。包括:、<base>、<meta>、<link></code></p> <p><code><title></code>:指定整个网页的标题,在浏览器最上方显示。<br> <code><base></code>:为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。<br> <code><meta></code>:提供有关页面的基本信息<br> <code><body></code>:用于定义HTML文档所要显示的内容,也称为主体标签。我们所写的代码必须放在此标签內。<br> <code><link></code>:定义文档与外部资源的关系。</p> <p><strong>小结:</strong></p> <ul> <li>HTML文档是文本文档</li> <li>HTML使用标签为包含在其内的内容提供结构信息</li> <li>标签经常与元素互相换用</li> <li>标签通常成对出现。起始标签标示一段内容的开始;结束标签表示它的结束</li> <li>起始标签可以附带特性,特性告诉我们更多关于元素内容的信息</li> <li>特性由特性名称和特性值组成</li> <li>信息HTML就要学习哪些标签可用,它们有什么作用以及可以用在何处</li> </ul> <h2>1.3HTML的文本:</h2> <p><strong>本节内容:</strong></p> <ul> <li>标题和段落</li> <li>粗体,斜体,强调</li> <li>结构化标记和语义化标记</li> </ul> <h3>1.3.1标题和段落</h3> <h4>标题</h4> <p>标题(Heading)是通过 <code><h1> - <h6></code> 标签进行定义的.</p> <p><code><h1></code>定义最大的标题。<code><h6></code> 定义最小的标题。</p> <p>实例</p> <pre><code><h1>这是一个标题。</h1> <h2>这是一个标题。</h2> <h3>这是一个标题。</h3> </code></pre> <p>注释: 浏览器会自动地在标题的前后添加空行。</p> <p>注释:默认情况下,HTML 会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。</p> <p>标题很重要<br> 请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。</p> <p>搜索引擎使用标题为您的网页的结构和内容编制索引。</p> <p>因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。</p> <p>应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。</p> <h4>段落</h4> <p>HTML 段落<br> HTML 可以将文档分割为若干段落。<br> 默认情况下,浏览器会在显示段落时另起一行并与后续段落保持一定距离</p> <p>段落是通过 <code><p></code> 标签定义的。</p> <hr> <p><strong>实例</strong></p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>这是一个段落<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>这是另外一个段落<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p>这是一个段落</p> <p>这是另外一个段落</p> <hr> <h5>空白</h5> <p>对于空白,设计人员在写代码时为了增强代码的可读性会利用空格或者换行的形式来编写代码。<br> 当浏览器遇到两个以上的空格,只会显示一个空格,同样换行也是一个空格</p> <h5>换行符和水平线</h5> <pre><code><br/>可以在文本中加入换行 <hr/>在不同主题中插入水平线来分割 </code></pre> <h3>1.3.2文本的格式化(语义化标记):</h3> <p><strong>HTML 文本格式化</strong><br> HTML 中存在一些格式化文本的标签,它们可以被直接使用,而不用您再去写样式进行调整。</p> <p>实例</p> <pre><code><b>加粗文本</b> <i>斜体文本</i> </code></pre> <p>这是 <code><sub>下标</sub></code> 和 <code><sup>上标</sup></code></p> <p>HTML 格式化标签<br> HTML 使用标签 <code><b></code>(“bold”) 与 <code><i></code>(“italic”) 对输出的文本进行格式,如:粗体 or 斜体</p> <p>这些 HTML 标签被称为格式化标签(请查看底部完整标签参考手册)。</p> <p>lamp 通常标签 <code><strong></code> 替换加粗标签 <code><b></code> 来使用, <code><em></code> 替换 <code><i></code>标签使用。<br> 然而,这些标签的含义是不同的:<br> <code><b></code> 与<code><i></code> 定义粗体或斜体文本。<br> <code><strong></code> 或者 <code><em></code> 意味着你要呈现的文本是重要的,所以要突出显示。<br> 现今所有主要浏览器都能渲染各种效果的字体。不过,未来浏览器可能会支持更好的渲染效果。<br> HTML 文本格式化标签<br> 标签 描述</p> <pre><code><b> 定义粗体文本 <em> 定义着重文字 <i> 定义斜体字 <small> 定义小号字 <strong> 定义加重语气 <sub> 定义下标字 <sup> 定义上标字 <ins> 定义插入字 <del> 定义删除字 </code></pre> <p>HTML “计算机输出” 标签<br> 标签 描述</p> <pre><code><code> 定义计算机代码 <kbd> 定义键盘码 <samp> 定义计算机代码样本 <var> 定义变量 <pre> 定义预格式文本 </code></pre> <p>HTML 引文, 引用, 及标签定义<br> 标签 描述</p> <pre><code><abbr> 定义缩写 <address> 定义地址 <bdo> 定义文字方向 <blockquote> 定义长的引用 <q> 定义短的引用语 <cite> 定义引用、引证 <dfn> 定义一个定义项目。 </code></pre> <p><strong>实例</strong></p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Text<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>The Story in the Book<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Chapter 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Molly had been staring out of her window for about an hour now. On her desk, lying between the copies of <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span><span class="token punctuation">></span></span>Nature<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span><span class="token punctuation">></span></span>New Scientist<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>, and all the other scientific journals her work had appeared in, was a well thumbed copy of <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>cite</span><span class="token punctuation">></span></span>On The Road<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cite</span><span class="token punctuation">></span></span>. It had been Molly's favourite book since college, and the longer she spent in these four walls the more she felt she needed to be free.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>She had spent the last ten years in this room, sitting under a poster with an Oscar Wilde quote proclaiming that <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>q</span><span class="token punctuation">></span></span>Work is the refuge of people who have nothing better to do<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>q</span><span class="token punctuation">></span></span>. Although many considered her pioneering work, unraveling the secrets of the llama <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Deoxyribonucleic acid<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>DNA<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span>, to be an outstanding achievement, Molly <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>did<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</span><span class="token punctuation">></span></span> think she had something better to do.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p><strong>小结</strong></p> <ul> <li>HTML元素用来描述页面的结构(例如标题和段落)</li> <li>HTML元素还提供语义信息(例如在什么位置着重强调,所使用的的缩略词定义,给定的文本何时是引用)</li> </ul> <h2>1.4HTML的列表</h2> <p><strong>本节内容</strong></p> <ul> <li>有序列表</li> <li>无序列表</li> <li>自定义列表</li> </ul> <h3>1.4.1有序列表</h3> <p>有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 <code><ol></code> 标签。每个列表项始于 <code><li></code> 标签。</p> <p>有序列表适合各项目之间存在顺序关系的情况。</p> <pre><code> <ol> </code></pre> <p>使用<code><ol>元素</code>来创建有序列表</p> <pre><code><li> </code></pre> <p>列表的每个项目都被置于<code><li></code>和<code></li></code>之间</p> <h3>1.4.2无序列表</h3> <p>无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。</p> <p>无序列表适合成员之间无级别顺序关系的情况。</p> <p>无序列表使用 <code><ul></code> 标签,每个项目也是由<code><li></li></code>包裹</p> <h3>1.4.3自定义列表</h3> <p>自定义列表不仅仅是一列项目,而是项目及其注释的组合。</p> <p>自定义列表以 <code><dl></code> 标签开始。每个自定义列表项以 <code><dt></code> 开始。每个自定义列表项的定义以 <code><dd></code> 开始。也就是<code><dt></code>包裹的是术语,而<code><dd></code>表示的是对术语的具体定义和内容</p> <p>自定义列表中的一个术语名可以对应多重定义或者多个术语名对应同一个定义,如果只有也术语名或者只有定义也是可行的,也就是说 <code><dt> 与 <dd></code> 在其中数量不限、对应关系不限。</p> <dl> <dt> 嵌套列表 </dt> <dd> - 可以在中加入另一个列表来创建子列表,或者叫做嵌套列表 </dd> </dl> <p><strong>实例</strong></p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Lists<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Scrambled Eggs<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Eggs are one of my favorite foods. Here is a recipe for deliciously rich scrambled eggs.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Ingredients<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token comment"><!--无序列表--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>2 eggs<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>1tbs butter<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>2tbs cream<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Method<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token comment"><!--有序列表--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Melt butter in a frying pan over a medium heat<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Gently mix the eggs and cream in a bowl<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Once butter has melted add cream and eggs<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Using a spatula fold the eggs from the edge of the pan to the center every 20 seconds (as if you are making an omelette)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>When the eggs are still moist remove from the heat (it will continue to cook on the plate until served)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> <span class="token comment"><!--自定义列表--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dl</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Coffee<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>- black hot drink<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Milk<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>- white cold drink<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dl</span><span class="token punctuation">></span></span> <span class="token comment"><!--嵌套列表--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Mousses<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Pastries <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Croissant<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Mille-feuille<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Palmier<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Profiterole<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Tarts<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p><strong>在浏览器中的显示</strong></p> Lists <h1>Scrambled Eggs</h1> <p>Eggs are one of my favorite foods. Here is a recipe for deliciously rich scrambled eggs.</p> <h2>Ingredients</h2> <ul> <li>2 eggs</li> <li>1tbs butter</li> <li>2tbs cream</li> </ul> <h2>Method</h2> <ol> <li>Melt butter in a frying pan over a medium heat</li> <li>Gently mix the eggs and cream in a bowl</li> <li>Once butter has melted add cream and eggs</li> <li>Using a spatula fold the eggs from the edge of the pan to the center every 20 seconds (as if you are making an omelette)</li> <li>When the eggs are still moist remove from the heat (it will continue to cook on the plate until served)</li> </ol> <dl> <dt> Coffee </dt> <dd> - black hot drink </dd> <dt> Milk </dt> <dd> - white cold drink </dd> </dl> <ul> <li>Mousses</li> <li>Pastries <ul> <li>Croissant</li> <li>Mille-feuille</li> <li>Palmier</li> <li>Profiterole</li> </ul> </li> <li>Tarts</li> </ul> <ul> <li><strong>小结</strong> <ul> <li>HTML中有三种列表:有序列表、无序列表、定义列表</li> <li>有序列表使用数字编号</li> <li>无序列表使用项目符号</li> <li>定义列表用来定义专业术语</li> <li>列表可以嵌套在其他列表中</li> </ul> </li> </ul> <h2>1.5HTML的链接</h2> <p><strong>本节内容</strong></p> <ul> <li>HTML链接定义</li> <li>HTML超链接</li> <li>HTML空链接</li> </ul> <h3>1.5.1 HTML 链接</h3> <dt> HTML链接 </dt> <dd> HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。 </dd> <hr> <h3>1.5.2 HTML 超链接(链接)</h3> <p>HTML使用标签 <code><a></code>来设置超文本链接,是可以从一个页面指向另一个目的端的链接。</p> <p>超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。</p> <p>当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。</p> <p>在标签<code><a></code> 中使用了href属性来描述链接的地址。</p> <p>默认情况下,链接将以以下形式出现在浏览器中:</p> <ul> <li>一个未访问过的链接显示为蓝色字体并带有下划线</li> <li>访问过的链接显示为紫色并带上下划线</li> <li>点击链接时,链接显示为红色并带上下划线</li> </ul> <p><em>注意:如果为这些超链接设置了CSS样式,展示样式会根据CSS的设定来显示</em></p> <h4>1.5.2.1 绝对url</h4> <dt> url </dt> <dd> url的全称是统一资源定位器。每个网页都有各自的url,网页的url就是在访问网站时需要输入网站的地址 </dd> <dt> 绝对url </dt> <dd> 绝对url以网站的域名开头,域名后面可以指定具体页面的路径,如果没有指定,网站则显示其主页,通常用来访问其他网站 </dd> <h4>1.5.2.2 相对url</h4> <p>相对url可以用于为网站内部页面之间建立链接。它用一种简单的方式告诉浏览器如何查找文件。<br> 相对URL(relative URL)以包含URL本身的文件夹的位置为参考点,描述目标文件夹的位置。如果目标文件与当前页面(也就是包含URL的页面)在同一个目录,那么这个文件的相对URL仅仅是文件名和扩展名。</p> <p>如果目标文件在当前目录的子目录中,那么它的相对URL是子目录名,后面是斜杠,然后是目标文件的文件名和扩展名。</p> <p>如果要引用文件层次结构中更高层目录中的文件,那么使用两个句点和一条斜杠。可以组合和重复使用两个句点和一条斜杠,从而引用当前文件所在的硬盘上的任何文件。</p> <ul> <li>引用同目录:<code>文件名+扩展名</code></li> <li>引用子目录:<code>/+文件名+扩展名</code></li> <li>上层目录:每上一级就 <code>../+ 文件名+扩展名</code></li> <li>根相对URL:<code>/根文件夹/+文件名+扩展名</code></li> </ul> <p>一般来说,对于同一服务器上的文件,应该总是使用相对URL,它们更容易输入,而且在将页面从本地系统转移到服务器上时更方便,只要每个文件的相对位置保持不变,链接就仍然是有效地。</p> <hr> <h3>1.5.3HTML 空链接</h3> <p>HTML 空链接:指指向链接后,鼠标变成手形,但单击后仍停留在当前页面。</p> <p>临时加的空链接,主要为了能更好的看到最终的效果。</p> <p>基本语法:</p> <pre><code><a href="#">链接文字</a> </code></pre> <p>其中“ # ”表示空链接。</p> <p>HTML 链接语法<br> 链接的 HTML 代码很简单。它类似这样::</p> <pre><code><a href="url">Link text</a> </code></pre> <p>href 属性描述了链接的目标。.</p> <p><em>提示: “链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。</em></p> <h4>1.5.3.1HTML 链接 - target 属性</h4> <p>使用 Target 属性,你可以定义被链接的文档在何处显示(在新的窗口打开,还是在原有的窗口中打开)。<br> <em>提示:默认的被链接文档会在原有的窗口中打开的。如果将 target 属性设置为 “_blank” 则文档就会在新窗口打开。</em></p> <h4>1.5.3.2HTML 链接 -name 属性</h4> <p>name 属性规定锚(anchor)的名称。</p> <p>您可以使用 name 属性创建 HTML 页面中的书签。</p> <p>书签不会以任何特殊方式显示,它对读者是不可见的。</p> <p>当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。</p> <p>命名锚的语法:</p> <pre><code><a name="label">锚(显示在页面上的文本)</a> </code></pre> <p><em>提示:锚的名称可以是任何你喜欢的名字。</em></p> <p><em>提示:您可以使用 id 属性来替代 name 属性,命名锚同样有效。</em></p> <p>实例<br> 首先,我们在 HTML 文档中对锚进行命名(创建一个书签):</p> <pre><code><a name="tips">基本的注意事项 - 有用的提示</a> </code></pre> <p>然后,我们在同一个文档中创建指向该锚的链接:</p> <pre><code><a href="#tips">有用的提示</a> </code></pre> <p>您也可以在其他页面中创建指向该锚的链接:</p> <pre><code><a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a> </code></pre> <p>在上面的代码中,我们将 # 符号和锚名称添加到 URL 的末端,就可以直接链接到 tips 这个命名锚了。<br> <strong>实例</strong></p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Links<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Film Folk<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Festival Diary<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Here are some of the film festivals we will be attending this year.<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>Please <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>mailto:filmfolk@example.org<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>contact us<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> if you would like more information.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>January<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.sundance.org<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Sundance Film Festival<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>Park City, Utah, USA<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>20 - 30 January 2011<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>February<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.tropfest.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Tropfest<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>Sydney, Australia<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>20 February 2011<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>March<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://sxsw.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>South by Southwest<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>Austin, Texas, USA<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>11 - 20 March 2011<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>April<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.londonindependent.org<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>London Independent Film Festival<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>London, UK<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>15 - 24 April 2011<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>May<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.festival-cannes.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Cannes International Film Festival<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>Cannes, France<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>11 - 22 May 2011<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>June<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.sff.org.au<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Sydney Film Festival<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>Sydney, Australia<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>8 - 19 June 2011<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>July<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.miff.com.au<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Melbourne International Film Festival<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>Melbourne, Victoria, Australia<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>22 July - 7 August 2011<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>August<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.nzff.co.nz<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>New Zealand International Film Festival<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>Dunedin, New Zealand<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>4 - 25 August 2011<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>September<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.labiennale.org/en/cinema<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Venice Film Festival<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>Venice, Italy<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>31 August - 10 September 2011<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>October<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.bfi.org.uk/lff/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>London Film Festival<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>London, UK<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>12 - 27 October 2011<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>November<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.idfa.nl/industry.aspx<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>International Documentary Film Festival Amsterdam (IDFA)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>Amsterdam, Netherlands<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>16 - 27 November 2011<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>December<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://whistlerfilmfestival.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Whistler Film Festival<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>Whistler, BC, Canada<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>30 November - 4 December 2011<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>about.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About Film Folk<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#top<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Top of page<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>在浏览器中的显示</p> Links <h1 id="top">Film Folk</h1> <h2>Festival Diary</h2> <p>Here are some of the film festivals we will be attending this year.<br>Please contact us if you would like more information.</p> <h3>January</h3> <p>Sundance Film Festival<br>Park City, Utah, USA<br>20 - 30 January 2011</p> <h3>February</h3> <p>Tropfest<br>Sydney, Australia<br>20 February 2011</p> <h3>March</h3> <p>South by Southwest<br>Austin, Texas, USA<br>11 - 20 March 2011</p> <h3>April</h3> <p>London Independent Film Festival<br>London, UK<br>15 - 24 April 2011</p> <h3>May</h3> <p>Cannes International Film Festival<br>Cannes, France<br>11 - 22 May 2011</p> <h3>June</h3> <p>Sydney Film Festival<br>Sydney, Australia<br>8 - 19 June 2011</p> <h3>July</h3> <p>Melbourne International Film Festival<br>Melbourne, Victoria, Australia<br>22 July - 7 August 2011</p> <h3>August</h3> <p>New Zealand International Film Festival<br>Dunedin, New Zealand<br>4 - 25 August 2011</p> <h3>September</h3> <p>Venice Film Festival<br>Venice, Italy<br>31 August - 10 September 2011</p> <h3>October</h3> <p>London Film Festival<br>London, UK<br>12 - 27 October 2011</p> <h3>November</h3> <p>International Documentary Film Festival Amsterdam (IDFA)<br>Amsterdam, Netherlands<br>16 - 27 November 2011</p> <h3>December</h3> <p>Whistler Film Festival<br>Whistler, BC, Canada<br>30 November - 4 December 2011</p> <p>About Film Folk</p> <p>Top of page</p> <p><strong>总结</strong></p> <ul> <li>链接是由元素<code><a></code>创建的</li> <li><code><a></code>元素通过href特性来指明你所要链接的页面</li> <li>如果是链接到网站内部的某个页面,最好使用相对链接</li> <li>可以通过id特性将某个可链接的页面上的元素作为链接目标</li> </ul> <hr> <h2>1.6HTML的图像</h2> <p><strong>本节内容</strong></p> <ul> <li>HTML的图像及其重要属性src和alt</li> <li>图像格式</li> <li>设置图像大小</li> <li>优化图像显示</li> </ul> <h3>1.6.1HTML 图像- 图像标签(<code><img></code>)和源属性(Src)</h3> <p>在 HTML 中,图像由<code><img></code>标签定义。<br> <code><img></code>是空标签,意思是说,它只包含属性,并且没有闭合标签。<br> 要在页面上显示图像,你需要使用源属性(src)。src指 “source”。源属性的值是图像的 URL 地址。</p> <p>定义图像的语法是:</p> <pre><code><img src="url" alt="some_text"> </code></pre> <p>URL 指存储图像的位置。</p> <p>浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段。</p> <h3>1.6.2图像格式</h3> <p>常见的图像格式有</p> <dl> <dt> JPG </dt> <dd> 一般为色彩鲜艳,内容丰富的图片 </dd> <dt> PNG </dt> <dd> 无损压缩、透明、交错、动画 </dd> <dt> GIF </dt> <dd> 简单动画、背景透明 </dd> <dt> 透明 </dt> <dd> 可以给图片指定一种颜色,使其不被显示而为透明 </dd> <dt> 交错 </dt> <dd> 在显示图片的过程中可以从概貌逐渐变化到全貌,看上去也就是清晰度由小到大 </dd> </dl> <h3>1.6.3HTML 图像- Alt属性</h3> <p>alt属性用来为图像定义一串预备的可替换的文本。在编程测试中练习alt属性的使用方法。</p> <p>替换文本属性的值是用户定义的。</p> <pre><code><img src="boat.gif" alt="Big Boat"> </code></pre> <p>在浏览器无法载入图像时,替换文本属性告诉读者他们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。</p> <h3>1.6.4HTML 图像- 设置图像的高度与宽度</h3> <p>height(高度)与width(宽度)属性用于设置图像的高度与宽度.</p> <p>属性值默认单位为像素:</p> <pre><code><img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228"> </code></pre> <p><em>提示: 指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度,页面加载时就会保留指定的尺寸。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。</em></p> <p>设置图像边框<br>  在<img src="">标签中您可以使用border属性以像素为单位指定边框粗细。厚度为 0 表示图片周围没有边框。</p> <pre><code><img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" border = "3"> </code></pre> <p>设置图像对齐<br>  默认情况下,图像在页面中将显示为左侧对齐,在<img src="">标签中您可以使用align属性将设置图像的对齐方式:center(居中)或right(右侧)。</p> <pre><code><img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" align="right"> </code></pre> <p><em>基本的注意事项 - 有用的提示:<br> 注意: 假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件。加载图片是需要时间的,所以我们的建议是:慎用图片。<br> 注意: 加载页面时,要注意插入页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,图像标签就会显示一个破碎的图片。</em></p> <h2>1.7HTML的表格</h2> <p><strong>本节内容</strong></p> <ul> <li>HTML表格的基本结构</li> </ul> <p><strong>HTML 表格</strong></p> <hr> <p>表格由<code><table></code>标签来定义。每个表格均有若干行(由<code><tr></code>标签定义),每行被分割为若干单元格(由<code><td></code>标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。</p> <h3>1.7.1HTML 表格的基本结构:</h3> <pre><code><table>…</table>:定义表格 <th>…</th>:定义表格的标题栏(文字加粗) <tr>…</tr>:定义表格的行 <td>…</td>:定义表格的列 </code></pre> <h4>HTML 表格表头单元格</h4> <hr>  表格的表头单元格使用``标签进行定义。 <p>表格的表头单元格属性主要是一些公共属性,如:align、dir、width、height。<br>  大多数浏览器会把表头显示为粗体居中的文本</p> <h4>表格标题</h4> <hr> <p>在<code><table></code>标签中我们可以使用<code><caption> ... </ caption></code>标签作为标题,并在表的顶部显示出来。</p> <p>注:此标签在较新版本的HTML / XHTML中已弃用</p> <table border="1"> <caption> 这是标题 </caption> <tbody> <tr> <td>row 1, column 1</td> <td>row 1, columnn 2</td> </tr> <tr> <td>row 2, column 1</td> <td>row 2, columnn 2</td> </tr> </tbody> </table> <h4>标题HTML表格高度和宽度</h4> <hr> <p>在<code><table></code>标签中您可以使用width(宽)和height(高)属性设置表格宽度和高度。您可以按像素或可用屏幕区域的百分比来指定表格宽度或高度。</p> <table border="1" width="400" height="150"> <tbody> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </tbody> </table> <h4>HTML表格背景</h4> <hr> <p>可以使用以下方法之一设置HTML表格的背景</p> <ul> <li>bgcolor属性 - 可以为整个表格或仅为一个单元格设置背景颜色。</li> <li>background属性 - 可以为整个表设置背景图像或仅为一个单元设置背景图像。</li> <li>bordercolor属性 - 可以设置边框颜色。</li> </ul> <p>注:HTML5中不推荐使用bgcolor,background和bordercolor属性。不要使用这些属性。</p> <table border="1"> <tbody> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </tbody> </table>  使用background属性需要提供图像 URL 地址: <table border="1"> <tbody> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </tbody> </table> <h4>HTML表格空间</h4> <hr> <p>有以下两个属性,用于调整HTML表格中单元格的空间:</p> <ul> <li>cellspacing属性-定义表格单元格之间的空间</li> <li>cellpadding属性-表示单元格边框与单元格内容之间的距离</li> </ul> <table border="1"> <tbody> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>其琛</td> <td>5000</td> </tr> <tr> <td>曼迪</td> <td>7000</td> </tr> </tbody> </table> <h4>HTML合并单元格(跨行和跨列)</h4> <p>如果要将两个或多个列合并为一个列,将使用colspan属性<br> 如果要合并两行或更多行,则将使用rowspan属性。</p> <table border="1"> <tbody> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td rowspan="2">Row 1 Cell 1</td> <td>Row 1 Cell 2</td> <td>Row 1 Cell 3</td> </tr> <tr> <td>Row 2 Cell 2</td> <td>Row 2 Cell 3</td> </tr> <tr> <td colspan="3">Row 3 Cell 1</td> </tr> </tbody> </table> <h4>HTML表格头部、主体、页脚</h4> <hr> <p>表格可以分为三个部分 - 头部,主体和页脚,如同word文档中页面的页眉、正文、页脚。每个页面保持相同,而正文是表格的主要内容持有者。</p> <p>头部,主体和页脚的对应的三个标签是:</p> <pre><code><thead> - 创建单独的表头。 <tbody> - 表示表格的主体。 <tfoot> - 创建一个单独的表页脚。 </code></pre> <p>表可以包含多个<code><tbody></code>元素以指示不同的页面。</p> <p>但值得注意的是<code><thead></code>和<code><tfoot></code>标签应出现在<code><tbody></code>之前:</p> <table border="1" width="100%"> <thead> <tr> <td colspan="4">This is the head of the table</td> </tr> </thead> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </tbody> <tfoot> <tr> <td colspan="4">This is the foot of the table</td> </tr> </tfoot> </table> <h4>HTML表格的嵌套</h4> <hr> <p>可以在另一个表中使用一个表。可以使用<code><table></code>内的几乎所有标签。</p> <table border="1" width="100%"> <tbody> <tr> <td> <table border="1" width="100%"> <tbody> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>其琛</td> <td>5000</td> </tr> <tr> <td>曼迪</td> <td>7000</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <p><strong>小结</strong></p> <ul> <li><code><table></code>标签用来向网页中添加表格</li> <li>表格是逐行绘制的。行是由<code><tr></code>元素创建的。</li> <li>每一行都有一定数量的由<code><td></code>元素(表示标题时使用的<code><th></code>元素)表示的单元格</li> <li>可利用rowspan和colspan特性使表格中的单元跨越多行和多列</li> <li>对于长列表,可将列表分为<code><thead></code>、<code><tbody>、<tfoot></code>三个部分</li> </ul> <h2>1.7HTML的表单</h2> <p><strong>本节内容</strong></p> <ul> <li>HTML表单与表单元素</li> </ul> <h3>1.7.1HTML表单</h3> <hr> 表单是一个包含表单元素的区域,用来采集用户的信息。 <p>表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。</p> <p>表单使用表单标签 <code><form></code> 来设置:</p> <pre><code><form action="数据处理网页"> 表单元素 </form> </code></pre> <p>每个表单都应该设置action特性,通常还要设置method特性和id特性<br> <strong>action</strong></p> <ul> <li>action特性值是服务器上一个页面的url,这个页面用来接收用户提交表单时的数据。</li> </ul> <p><strong>method</strong></p> <ul> <li>表单的提交可以采用两种方法:get或者post</li> </ul> <p><strong>使用get方法时表单中的元素的值附加在action特性指定的url末尾</strong><br> 此方法适合于</p> <ul> <li>短表单例如搜索框</li> <li>只从web服务器上检索数据的情形(不用发送那些要在数据库中添加或者删除的东西)</li> </ul> <p><strong>使用post方法时</strong></p> <ul> <li>表单中的值被放在http头部信息中发送。从经验来说如果你的表单存在以下情形应该用post方法</li> <li>允许用户上传文件</li> <li>非常长</li> <li>包含敏感信息</li> <li>向数据库中添加信息或者删除信息</li> </ul> <h3>1.7.2表单元素</h3> <hr> <dt> 表单元素 </dt> <dd> 文本框、按钮、单选、复选、下拉列表、文本域 </dd> <p><strong>文本框、密码框</strong></p> <pre><code> <form> <input type="text|password"/> </form> </code></pre> <p>文本框type=text 密码框为password</p> <hr> **提交按钮input——submit** <pre><code><form> 姓名: <input type="text" value=" " name="myname"/> <input type="submit" value="提交" name="submittn"/> </form> </code></pre> <p><strong>重置按钮input——reset</strong><br> type:reset</p> <pre><code><form> 爱好: <input type="text"/> <input type="submit" name="确定/> <input type="reset" name="重置"/> </form> </code></pre> <h2>1.8HTML其他标记</h2> <p><strong>本节内容</strong></p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1290979624041390080"></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">你可能感兴趣的:(前端,学习笔记)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1950232190038110208.htm" title="day15|前端框架学习和算法" target="_blank">day15|前端框架学习和算法</a> <span class="text-muted">universe_01</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>T22括号生成先把所有情况都画出来,然后(在满足什么情况下)把不符合条件的删除。T78子集要画树状图,把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索:每个边都走完,再回溯应用:二叉树搜索,图搜索回溯算法=DFS+剪枝T200岛屿数量(非常经典BFS宽度把树状转化成队列形式,lambda匿名函数“一次性的小函数,没有名字”setup语法糖:让代码更简洁好写的语法ref创建:基本类型的</div> </li> <li><a href="/article/1950196906563006464.htm" title="Unity学习笔记1" target="_blank">Unity学习笔记1</a> <span class="text-muted">zy_777</span> <div>通过一个星期的简单学习,初步了解了下unity,unity的使用,以及场景的布局,UI,以及用C#做一些简单的逻辑。好记性不如烂笔头,一些关键帧还是记起来比较好,哈哈,不然可能转瞬即逝了,(PS:纯小白观点,unity大神可以直接忽略了)一:MonoBehaviour类的初始化1,Instantiate()创建GameObject2,通过Awake()和Start()来做初始化3,Update、L</div> </li> <li><a href="/article/1950191208873652224.htm" title="vue element 封装表单" target="_blank">vue element 封装表单</a> <span class="text-muted">影子信息</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>背景:在前端系统开发中,系统页面涉及到的表单组件比较多,所以进行了简单的封装。封装的包括一些Form表单组件,如下:input输入框、select下拉框、等实现效果:理论知识:表单组件官方链接:点击跳转封装组件:封装组件的思路:不封装element组件,每一个input组件绑定一个form对象,例如官网。简单封装element组件,利用for循环生成form表单的每一项el-form-item。进</div> </li> <li><a href="/article/1950191165710069760.htm" title="前端面试每日 3+1 —— 第39天" target="_blank">前端面试每日 3+1 —— 第39天</a> <span class="text-muted">浪子神剑</span> <div>今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么?[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么?《论语》,曾子曰:“吾日三省吾身”(我每天多次反省自己)。前端面试每日3+1题,以面试题来驱动学习,每天进步一点!让努力成为一种习惯,让奋斗成为一种享受!欢迎在Iss</div> </li> <li><a href="/article/1950187554129113088.htm" title="Django学习笔记(一)" target="_blank">Django学习笔记(一)</a> <span class="text-muted"></span> <div>学习视频为:pythondjangoweb框架开发入门全套视频教程一、安装pipinstalldjango==****检查是否安装成功django.get_version()二、django新建项目操作1、新建一个项目django-adminstartprojectproject_name2、新建APPcdproject_namedjango-adminstartappApp注:一个project</div> </li> <li><a href="/article/1950179614320029696.htm" title="python学习笔记(汇总)" target="_blank">python学习笔记(汇总)</a> <span class="text-muted">朕的剑还未配妥</span> <a class="tag" taget="_blank" href="/search/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E6%95%B4%E7%90%86/1.htm">python学习笔记整理</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>文章目录一.基础知识二.python中的数据类型三.运算符四.程序的控制结构五.列表六.字典七.元组八.集合九.字符串十.函数十一.解决bug一.基础知识print函数字符串要加引号,数字可不加引号,如print(123.4)print('小谢')print("洛天依")还可输入表达式,如print(1+3)如果使用三引号,print打印的内容可不在同一行print("line1line2line</div> </li> <li><a href="/article/1950178477592342528.htm" title="前端数据库:IndexedDB从基础到高级使用指南" target="_blank">前端数据库:IndexedDB从基础到高级使用指南</a> <span class="text-muted"></span> <div>文章目录前端数据库:IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例:构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.</div> </li> <li><a href="/article/1950169524384886784.htm" title="【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录(三)" target="_blank">【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录(三)</a> <span class="text-muted">笙囧同学</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/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a> <div>核心功能设计用户管理系统用户管理是整个系统的基础,我设计了完整的用户生命周期管理:用户注册流程验证失败验证通过验证失败验证通过用户名已存在用户名可用失败成功用户访问注册页面填写注册信息前端表单验证显示错误提示提交到后端后端数据验证返回错误信息用户名唯一性检查提示用户名重复密码加密处理保存用户信息保存成功?显示系统错误注册成功跳转登录页面登录认证机制深度解析我实现了一套企业级的多层次安全认证机制:认</div> </li> <li><a href="/article/1950169526440095744.htm" title="从零到一:打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战" target="_blank">从零到一:打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战</a> <span class="text-muted"></span> <div>作者简介:笙囧同学,中科院计算机大模型方向硕士,全栈开发爱好者联系方式:3251736703@qq.com各大平台账号:笙囧同学座右铭:偷懒是人生进步的阶梯前言在AI技术飞速发展的今天,如何将前沿的大模型技术与实际应用相结合,一直是我们开发者关注的焦点。今天,笙囧同学将带大家从零开始,构建一个基于GigaChatAI的艺术创作平台,实现React前端+Django后端的完整全栈解决方案。这不仅仅是</div> </li> <li><a href="/article/1950164483057971200.htm" title="14.tornado操作之应用Websocket协议实现聊天室功能" target="_blank">14.tornado操作之应用Websocket协议实现聊天室功能</a> <span class="text-muted">孤寒者</span> <a class="tag" taget="_blank" href="/search/Tornado%E6%A1%86%E6%9E%B6%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E5%AE%9E%E6%88%98/1.htm">Tornado框架从入门到实战</a><a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/tornado/1.htm">tornado</a><a class="tag" taget="_blank" href="/search/%E8%81%8A%E5%A4%A9%E5%AE%A4%E5%8A%9F%E8%83%BD%E5%AE%9E%E7%8E%B0/1.htm">聊天室功能实现</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录:每篇前言:1.什么是WebSocket(1)定义(2)优点(3)和HTTP对比(4)适用场景2.WebSocket关键方法3.本tornado项目中使用WebSocket(1)准备一个聊天室的页面:第一步:编写视图:第二步:编写接口:(app.py中加入以下接口!)第三步:编写前端页面:测试接口——响应OK!(2)使用WebSocket:(3)聊天室的聊天功能的最终实现:第一步:战前准备第二</div> </li> <li><a href="/article/1950147339964444672.htm" title="【Druid】学习笔记" target="_blank">【Druid】学习笔记</a> <span class="text-muted">fixAllenSun</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>【Druid】学习笔记【一】简介【1】简介【2】数据库连接池(1)能解决的问题(2)使用数据库连接池的好处【3】监控(1)监控信息采集的StatFilter(2)监控不影响性能(3)SQL参数化合并监控(4)执行次数、返回行数、更新行数和并发监控(5)慢查监控(6)Exception监控(7)区间分布(8)内置监控DEMO【4】Druid基本配置参数介绍【5】Druid相比于其他数据库连接池的优点</div> </li> <li><a href="/article/1950144218282389504.htm" title="为什么学习Web前端一定要掌握JavaScript?" target="_blank">为什么学习Web前端一定要掌握JavaScript?</a> <span class="text-muted">web前端学习指南</span> <div>为什么学习Web前端一定要掌握JavaScript?在前端的世界里,没有什么是JavaScript实现不了的,关于JS有一句话:凡是可以用JavaScript来写的应用,最终都会用JavaScript,JavaScript可运行在所有主要平台的所有主流浏览器上,也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。</div> </li> <li><a href="/article/1950143305194991616.htm" title="小架构step系列25:错误码" target="_blank">小架构step系列25:错误码</a> <span class="text-muted">秋千码途</span> <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>1概述一个系统中,可能产生各种各样的错误,对这些错误进行编码。当错误发生时,通过这个错误码就有可能快速判断是什么错误,不一定需要查看代码就可以进行处理,提高问题处理效率。有了统一的错误码,还可以标准化错误信息,方便把错误信息纳入文档管理和对错误信息进行国际化等。没有错误码的管理,开发人员就会按自己的理解处理这些错误。有些直接把堆栈直接反馈到前端页面上,使用看不懂这些信息体验很差,也暴露了堆栈信息有</div> </li> <li><a href="/article/1950142042847899648.htm" title="java学习笔记8" target="_blank">java学习笔记8</a> <span class="text-muted">幸福,你等等我</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>一、异常处理Error:错误,程序员无法处理,如OOM内存溢出错误、内存泄漏...会导出程序崩溃1.异常:程序中一些程序自身处理不了的特殊情况2.异常类Exception3.异常的分类:(1).检查型异常(编译异常):在编译时就会抛出的异常(代码上会报错),需要在代码中编写处理方式(和程序之外的资源访问)直接继承Exception(2).运行时异常:在代码运行阶段可能会出现的异常,可以不用明文处理</div> </li> <li><a href="/article/1950140903616212992.htm" title="Java朴实无华按天计划从入门到实战(强化速战版-66天)" target="_blank">Java朴实无华按天计划从入门到实战(强化速战版-66天)</a> <span class="text-muted">岫珩</span> <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/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/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E6%97%B6%E9%97%B4%E5%AE%89%E6%8E%92/1.htm">时间安排</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%AE%A1%E5%88%92/1.htm">学习计划</a> <div>致敬读者感谢阅读笑口常开生日快乐⬛早点睡觉博主相关博主信息博客首页专栏推荐活动信息文章目录Java朴实无华按天计划从入门到实战(强化速战版-66天)1.基础(18)1.1JavaSE核心(5天)1.2数据库与SQL(5天)1.3前端基础(8天)2.进阶(17天)2.1JavaWeb核心(5天)2.2Mybatis与Spring全家桶(6天)2.3中间件入门(4天)2.4实践项目(2天)3.高阶(1</div> </li> <li><a href="/article/1950132204336115712.htm" title="《跨域资源共享CORS的深层逻辑与前端实践精要》" target="_blank">《跨域资源共享CORS的深层逻辑与前端实践精要》</a> <span class="text-muted"></span> <div>不同源头的资源交互已成为常态,而跨域资源共享(CORS)正是支撑这种交互的隐形架构。现代Web安全体系中平衡开放与防护的精妙设计。理解CORS的深层逻辑,不仅能解决实际开发中的跨域难题,更能触及网络安全与资源流通的核心矛盾,为前端工程师构建稳健的应用提供底层认知支撑。跨域资源共享的诞生,源于网络安全与应用发展的必然冲突。浏览器的同源策略,作为早期网络安全的基石,通过限制不同源文档的交互,有效阻挡了</div> </li> <li><a href="/article/1950131321980383232.htm" title="深入了解 Kubernetes(k8s):从概念到实践" target="_blank">深入了解 Kubernetes(k8s):从概念到实践</a> <span class="text-muted"></span> <div>目录一、k8s核心概念二、k8s的优势三、k8s架构组件控制平面组件节点组件四、k8s+docker运行前后端分离项目的例子1.准备前端项目2.准备后端项目3.创建k8s部署配置文件4.部署应用到k8s集群在当今云计算和容器化技术飞速发展的时代,Kubernetes(简称k8s)已成为容器编排领域的事实标准。无论是互联网巨头、传统企业还是初创公司,都在广泛采用k8s来管理和部署容器化应用。本文将带</div> </li> <li><a href="/article/1950119224630374400.htm" title="大厂都在用的前端缓存策略,你掌握了吗?" target="_blank">大厂都在用的前端缓存策略,你掌握了吗?</a> <span class="text-muted">AI架构全栈开发实战笔记</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>大厂都在用的前端缓存策略,你掌握了吗?关键词:前端缓存、HTTP缓存、ServiceWorker、CDN缓存、缓存策略、性能优化、浏览器缓存摘要:本文将深入探讨前端开发中常用的缓存策略,从浏览器缓存到ServiceWorker,从HTTP缓存头到CDN缓存,全面解析大厂都在使用的高效缓存技术。通过生动的比喻和实际代码示例,帮助开发者理解并掌握这些提升Web应用性能的关键技术。背景介绍目的和范围本文</div> </li> <li><a href="/article/1950115062781898752.htm" title="26. 什么是雪碧图,作用和原理了解吗" target="_blank">26. 什么是雪碧图,作用和原理了解吗</a> <span class="text-muted">yqcoder</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95-CSS/1.htm">前端面试-CSS</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><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>总结小图合成一张,使用background来使用,减少资源请求一、什么是雪碧图?雪碧图(CSSSprite)是一种前端优化技术,指的是将多个小图标合并成一张大图,通过CSS控制显示其中的某一部分。它常用于网站中图标、按钮等小图较多的场景。二、雪碧图的作用作用说明✅减少HTTP请求次数合并多个图片为一张图,减少请求资源数✅提升页面加载速度尤其在图片较多时效果明显✅避免图片加载闪烁鼠标悬停切换图片时不</div> </li> <li><a href="/article/1950113424281235456.htm" title="2025 最强 Agent 智能体 学习笔记 (71)" target="_blank">2025 最强 Agent 智能体 学习笔记 (71)</a> <span class="text-muted">一刀7段</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>Agent智能体的系统学习与职业发展核心内容概览本集是《2025最强Agent智能体全套教程》的第72集,聚焦Agent智能体领域的系统学习方法与职业发展路径,系统梳理了从入门到专家的能力体系、关键学习资源、职业方向选择及行业发展机遇。内容结合技术趋势与职场需求,为不同背景的学习者(学生、开发者、转行人士)提供清晰的成长蓝图,帮助其在Agent智能体领域高效成长,实现职业目标。系统学习的能力体系与</div> </li> <li><a href="/article/1950112039502409728.htm" title="H5UI微信小程序前端框架实战指南" target="_blank">H5UI微信小程序前端框架实战指南</a> <span class="text-muted">ai</span> <div>本文还有配套的精品资源,点击获取简介:H5UI是一个为微信小程序开发设计的前端框架,基于H5技术,提供简洁高效的组件库。框架集成了丰富的UI元素,如按钮、表格、导航栏等,简化了界面布局和交互的实现。通过安装、引入、使用组件和事件绑定四个步骤,开发者可以轻松构建功能齐全的应用。了解性能优化等注意事项对于高效开发同样重要。1.微信小程序前端开发框架介绍微信小程序概述微信小程序是微信官方推出的一种无需下</div> </li> <li><a href="/article/1950104854819041280.htm" title="Ubuntu安装LAMP" target="_blank">Ubuntu安装LAMP</a> <span class="text-muted">L_h1</span> <a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95/1.htm">测试</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>在安装vim时遇到了一个问题:E:无法获得锁/var/lib/dpkg/lock-frontend-open(11:资源暂时不可用)E:无法获取dpkg前端锁(/var/lib/dpkg/lock-frontend),是否有其他进程正占用它?解决办法:强制解锁sudorm/var/lib/dpkg/lock-frontendsudorm/var/cache/apt/archives/locksud</div> </li> <li><a href="/article/1950104727928762368.htm" title="震惊!DOM变化监控神器MutationObserver,前端开发必知的隐藏武器!" target="_blank">震惊!DOM变化监控神器MutationObserver,前端开发必知的隐藏武器!</a> <span class="text-muted">coding随想</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>一、什么是MutationObserver?如果你是一个前端开发者,一定会遇到这样的场景:页面动态加载内容后,某些操作失效了。比如,你写了一个监听按钮点击的代码,但按钮是通过AJAX动态加载的,你的代码根本无法触发。这个时候,你就需要一个“监控哨兵”——MutationObserver,它能实时监听DOM树的变化,帮你捕获那些“暗中作祟”的节点变动。MutationObserver是HTML5引入</div> </li> <li><a href="/article/1950095708468080640.htm" title="【学习笔记】CBT工作坊第二天:动机驱动行为" target="_blank">【学习笔记】CBT工作坊第二天:动机驱动行为</a> <span class="text-muted">花团与芥末</span> <div>什么叫动机?在认知行为疗法中,动机是引导我们行为的各种外在和内在的力量,唤起行为起始的力量,朝着一定目标与方向进行的力量,维持或停止的力量。也就是说,在我们的所有行为包括没有做的行为背后,都隐藏着某种动机。那么,动机一般有哪些呢?大家一般听说过的,是马斯洛的需求层次理论。在他的金字塔理论中,将动机需求分为了6个层次,从初级到高级分别是:生存(活着的必须条件)--安全(活下去)--爱--尊重--自我</div> </li> <li><a href="/article/1950094764498022400.htm" title="Coze Studio 架构拆解:AI Agent 开发平台项目结构全分析" target="_blank">Coze Studio 架构拆解:AI Agent 开发平台项目结构全分析</a> <span class="text-muted">代码简单说</span> <a class="tag" taget="_blank" href="/search/2025%E5%BC%80%E5%8F%91%E5%BF%85%E5%A4%87%28%E9%99%90%E6%97%B6%E7%89%B9%E6%83%A0%29/1.htm">2025开发必备(限时特惠)</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/Coze/1.htm">Coze</a><a class="tag" taget="_blank" href="/search/Studio/1.htm">Studio</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/Agent/1.htm">Agent</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E5%B9%B3%E5%8F%B0/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/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E7%A8%8B%E5%8C%96/1.htm">工程化</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E8%A7%A3%E6%9E%B6%E6%9E%84/1.htm">图解架构</a> <div>CozeStudio架构拆解:AIAgent开发平台项目结构全分析标签:CozeStudio项目架构、领域驱动设计DDD、全栈开发规范、Hertz框架、前后端协作、云原生容器、前端测试、IDL接口设计、微服务解耦、AI开发平台源码分析在最近研究AIAgent开发平台的过程中,我深入分析了刚刚开源的CozeStudio项目。这套系统是国内少有的开源全栈AI工程化项目,代码整洁、架构先进,特别是它基于</div> </li> <li><a href="/article/1950082037897555968.htm" title="图解系统的学习笔记--硬件结构" target="_blank">图解系统的学习笔记--硬件结构</a> <span class="text-muted">什么蜜桃绵绵冰</span> <a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/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/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>CPU是如何执行程序的?图灵机的工作方式图灵机的基本组成纸带:纸带由一个个连续的格子组成,每个格子可以写入字符,纸带就好比内存,而纸带上的格子的字符就好比内存中的数据或程序读写头:可以读取只带上任意格子的字符,也可以把字符写入到纸带的格子读写头上的部件-存储单元、控制单元、运算单元存储单元用于存放数据控制单元用于识别字符是数据还是指令、以及控制程序的流程等预算单元用于执行运算指令冯诺依曼模型计算机</div> </li> <li><a href="/article/1950075480849838080.htm" title="关于前端的性能优化" target="_blank">关于前端的性能优化</a> <span class="text-muted"></span> <div>性能优化主要涵盖了以下四个方面:(tip:仅代表个人总结,如有不当,还希望看到的大佬多多指示)减少网络请求:合并文件、使用CDN、启用缓存。优化资源加载:代码分割、懒加载、图片压缩。提升渲染性能:减少重绘回流、防抖节流、使用WebWorker。监控和迭代:定期使用工具检测性能,持续优化。一、网络层面优化减少HTTP请求合并文件:将多个CSS或JavaScript文件合并成一个,减少请求次数。使用C</div> </li> <li><a href="/article/1950061236175564800.htm" title="Spring学习笔记07——SpringBoot中关于接口文档管理的注解" target="_blank">Spring学习笔记07——SpringBoot中关于接口文档管理的注解</a> <span class="text-muted">Shaoxi Zhang</span> <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>一、Lombok注解@Data:生成所有字段的getter/setter、toString()、equals()和hashCode()。@Getter/@Setter:单独为所有字段或指定字段生成getter/setter。importlombok.Data;@DatapublicclassUser{privateLongid;privateStringname;}编译后,Lombok会为id和n</div> </li> <li><a href="/article/1950059723604684800.htm" title="linux网卡显示未知未托管,linux有线网络显示设备未托管" target="_blank">linux网卡显示未知未托管,linux有线网络显示设备未托管</a> <span class="text-muted"></span> <div>NetworkManagerNetworkManager是为了使网络配置尽可能简单而开发的网络管理软件包,如果使用DHCP,NetworkManager会替换默认的路由表、从DHCP服务器获取IP地址并根据情况设置域名服务器,NetworkManager的目标是使网络能够开箱即用。NetworkManager由两部分组成:一个以超级用户运行的守护进程(network-manager);一个前端管理</div> </li> <li><a href="/article/1950057579757498368.htm" title="零基础入门uniapp Vue3组合式API版本" target="_blank">零基础入门uniapp Vue3组合式API版本</a> <span class="text-muted">鹤早早</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>前言:小程序学习笔记,课程来源up主咸虾米_。仅记录笔记,大家想学习可以去关注他。1.已安装HBuiderX(目前是4.36版本),微信开发者工具(但还没注册小程序码),相关配置OK了。1.16相关架构学习1.pages-index-index.vuebox1box2.layout{border:1pxsolidred;.box1{border:1pxsolidgreen;}.box2{borde</div> </li> <li><a href="/article/85.htm" title="ztree异步加载" target="_blank">ztree异步加载</a> <span class="text-muted">3213213333332132</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/ztree/1.htm">ztree</a> <div>相信新手用ztree的时候,对异步加载会有些困惑,我开始的时候也是看了API花了些时间才搞定了异步加载,在这里分享给大家。 我后台代码生成的是json格式的数据,数据大家按各自的需求生成,这里只给出前端的代码。 设置setting,这里只关注async属性的配置 var setting = { //异步加载配置 </div> </li> <li><a href="/article/212.htm" title="thirft rpc 具体调用流程" target="_blank">thirft rpc 具体调用流程</a> <span class="text-muted">BlueSkator</span> <a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/rpc/1.htm">rpc</a><a class="tag" taget="_blank" href="/search/thrift/1.htm">thrift</a> <div>Thrift调用过程中,Thrift客户端和服务器之间主要用到传输层类、协议层类和处理类三个主要的核心类,这三个类的相互协作共同完成rpc的整个调用过程。在调用过程中将按照以下顺序进行协同工作:         (1)     将客户端程序调用的函数名和参数传递给协议层(TProtocol),协议</div> </li> <li><a href="/article/339.htm" title="异或运算推导, 交换数据" target="_blank">异或运算推导, 交换数据</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E5%BC%82%E6%88%96/1.htm">异或</a><a class="tag" taget="_blank" href="/search/%5E/1.htm">^</a> <div>/* * 5 0101 * 9 1010 * * 5 ^ 5 * 0101 * 0101 * ----- * 0000 * 得出第一个规律: 相同的数进行异或, 结果是0 * * 9 ^ 5 ^ 6 * 1010 * 0101 * ---- * 1111 * * 1111 * 0110 * ---- * 1001 </div> </li> <li><a href="/article/466.htm" title="事件源对象" target="_blank">事件源对象</a> <span class="text-muted">周华华</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q</div> </li> <li><a href="/article/593.htm" title="MySql配置及相关命令" target="_blank">MySql配置及相关命令</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>        MySQL安装完毕后我们需要对它进行一些设置及性能优化,主要包括字符集设置,启动设置,连接优化,表优化,分区优化等等。           一 修改MySQL密码及用户      </div> </li> <li><a href="/article/720.htm" title="[简单]poi删除excel 2007超链接" target="_blank">[简单]poi删除excel 2007超链接</a> <span class="text-muted">53873039oycg</span> <a class="tag" taget="_blank" href="/search/Excel/1.htm">Excel</a> <div>      采用解析sheet.xml方式删除超链接,缺点是要打开文件2次,代码如下:      public void removeExcel2007AllHyperLink(String filePath) throws Exception { OPCPackage ocPkg = OPCPac</div> </li> <li><a href="/article/847.htm" title="Struts2添加 open flash chart" target="_blank">Struts2添加 open flash chart</a> <span class="text-muted">云端月影</span> <div>准备以下开源项目: 1. Struts 2.1.6 2. Open Flash Chart 2 Version 2 Lug Wyrm Charmer (28th, July 2009) 3. jofc2,这东西不知道是没做好还是什么意思,好像和ofc2不怎么匹配,最好下源码,有什么问题直接改。 4. log4j 用eclipse新建动态网站,取名OFC2Demo,将Struts2 l</div> </li> <li><a href="/article/974.htm" title="spring包详解" target="_blank">spring包详解</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div> 下载的spring包中文件及各种包众多,在项目中往往只有部分是我们必须的,如果不清楚什么时候需要什么包的话,看看下面就知道了。 aspectj目录下是在Spring框架下使用aspectj的源代码和测试程序文件。Aspectj是java最早的提供AOP的应用框架。 dist 目录下是Spring 的发布包,关于发布包下面会详细进行说明。 docs&nb</div> </li> <li><a href="/article/1101.htm" title="网站推广之seo概念" target="_blank">网站推广之seo概念</a> <span class="text-muted">antonyup_2006</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a><a class="tag" taget="_blank" href="/search/%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E/1.htm">搜索引擎</a><a class="tag" taget="_blank" href="/search/Google/1.htm">Google</a> <div>   持续开发一年多的b2c网站终于在08年10月23日上线了。作为开发人员的我在修改bug的同时,准备了解下网站的推广分析策略。     所谓网站推广,目的在于让尽可能多的潜在用户了解并访问网站,通过网站获得有关产品和服务等信息,为最终形成购买决策提供支持。     网站推广策略有很多,seo,email,adv</div> </li> <li><a href="/article/1228.htm" title="单例模式,sql注入,序列" target="_blank">单例模式,sql注入,序列</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F/1.htm">单例模式</a><a class="tag" taget="_blank" href="/search/%E5%BA%8F%E5%88%97/1.htm">序列</a><a class="tag" taget="_blank" href="/search/sql%E6%B3%A8%E5%85%A5/1.htm">sql注入</a><a class="tag" taget="_blank" href="/search/%E9%A2%84%E7%BC%96%E8%AF%91/1.htm">预编译</a> <div>  序列在前面写过有关的博客,也有过总结,但是今天在做一个JDBC操作数据库的相关内容时 需要使用序列创建一个自增长的字段  居然不会了,所以将序列写在本篇的前面    1,序列是一个保存数据连续的增长的一种方式; 序列的创建; CREATE SEQUENCE seq_pro 2 INCREMENT BY 1 -- 每次加几个 3 </div> </li> <li><a href="/article/1355.htm" title="Mockito单元测试实例" target="_blank">Mockito单元测试实例</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a><a class="tag" taget="_blank" href="/search/mockito/1.htm">mockito</a> <div>Mockito单元测试实例: public class SettingServiceTest { private List<PersonDTO> personList = new ArrayList<PersonDTO>(); @InjectMocks private SettingPojoService settin</div> </li> <li><a href="/article/1482.htm" title="精通Oracle10编程SQL(9)使用游标" target="_blank">精通Oracle10编程SQL(9)使用游标</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a> <div>/* *使用游标 */ --显示游标 --在显式游标中使用FETCH...INTO语句 DECLARE CURSOR emp_cursor is select ename,sal from emp where deptno=1; v_ename emp.ename%TYPE; v_sal emp.sal%TYPE; begin ope</div> </li> <li><a href="/article/1609.htm" title="【Java语言】动态代理" target="_blank">【Java语言】动态代理</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/java%E8%AF%AD%E8%A8%80/1.htm">java语言</a> <div>  JDK接口动态代理 JDK自带的动态代理通过动态的根据接口生成字节码(实现接口的一个具体类)的方式,为接口的实现类提供代理。被代理的对象和代理对象通过InvocationHandler建立关联   package com.tom; import com.tom.model.User; import com.tom.service.IUserService; </div> </li> <li><a href="/article/1736.htm" title="Java通信之URL通信基础" target="_blank">Java通信之URL通信基础</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/webservice/1.htm">webservice</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a><a class="tag" taget="_blank" href="/search/ITeye/1.htm">ITeye</a> <div>java对网络通信以及提供了比较全面的jdk支持,java.net包能让程序员直接在程序中实现网络通信。 在技术日新月异的现在,我们能通过很多方式实现数据通信,比如webservice、url通信、socket通信等等,今天简单介绍下URL通信。 学习准备:建议首先学习java的IO基础知识   URL是统一资源定位器的简写,URL可以访问Internet和www,可以通过url</div> </li> <li><a href="/article/1863.htm" title="博弈Java讲义 - Java线程同步 (1)" target="_blank">博弈Java讲义 - Java线程同步 (1)</a> <span class="text-muted">boyitech</span> <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/%E5%90%8C%E6%AD%A5/1.htm">同步</a><a class="tag" taget="_blank" href="/search/%E9%94%81/1.htm">锁</a> <div>  在并发编程中经常会碰到多个执行线程共享资源的问题。例如多个线程同时读写文件,共用数据库连接,全局的计数器等。如果不处理好多线程之间的同步问题很容易引起状态不一致或者其他的错误。    同步不仅可以阻止一个线程看到对象处于不一致的状态,它还可以保证进入同步方法或者块的每个线程,都看到由同一锁保护的之前所有的修改结果。处理同步的关键就是要正确的识别临界条件(cri</div> </li> <li><a href="/article/1990.htm" title="java-给定字符串,删除开始和结尾处的空格,并将中间的多个连续的空格合并成一个。" target="_blank">java-给定字符串,删除开始和结尾处的空格,并将中间的多个连续的空格合并成一个。</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class DeleteExtraSpace { /** * 题目:给定字符串,删除开始和结尾处的空格,并将中间的多个连续的空格合并成一个。 * 方法1.用已有的String类的trim和replaceAll方法 * 方法2.全部用正则表达式,这个我不熟 * 方法3.“重新发明轮子”,从头遍历一次 */ public static v</div> </li> <li><a href="/article/2117.htm" title="An error has occurred.See the log file错误解决!" target="_blank">An error has occurred.See the log file错误解决!</a> <span class="text-muted">Kai_Ge</span> <a class="tag" taget="_blank" href="/search/MyEclipse/1.htm">MyEclipse</a> <div>今天早上打开MyEclipse时,自动关闭!弹出An error has occurred.See the log file错误提示! 很郁闷昨天启动和关闭还好着!!!打开几次依然报此错误,确定不是眼花了! 打开日志文件!找到当日错误文件内容: --------------------------------------------------------------------------</div> </li> <li><a href="/article/2244.htm" title="[矿业与工业]修建一个空间矿床开采站要多少钱?" target="_blank">[矿业与工业]修建一个空间矿床开采站要多少钱?</a> <span class="text-muted">comsci</span> <div>        地球上的钛金属矿藏已经接近枯竭...........        我们在冥王星的一颗卫星上面发现一些具有开采价值的矿床.....        那么,现在要编制一个预算,提交给财政部门..</div> </li> <li><a href="/article/2371.htm" title="解析Google Map Routes" target="_blank">解析Google Map Routes</a> <span class="text-muted">dai_lm</span> <a class="tag" taget="_blank" href="/search/google+api/1.htm">google api</a> <div>为了获得从A点到B点的路劲,经常会使用Google提供的API,例如 [url] http://maps.googleapis.com/maps/api/directions/json?origin=40.7144,-74.0060&destination=47.6063,-122.3204&sensor=false [/url] 从返回的结果上,大致可以了解应该怎么走,但</div> </li> <li><a href="/article/2498.htm" title="SQL还有多少“理所应当”?" target="_blank">SQL还有多少“理所应当”?</a> <span class="text-muted">datamachine</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a> <div>转贴存档,原帖地址:http://blog.chinaunix.net/uid-29242841-id-3968998.html、http://blog.chinaunix.net/uid-29242841-id-3971046.html! ------------------------------------华丽的分割线-------------------------------- </div> </li> <li><a href="/article/2625.htm" title="Yii使用Ajax验证时,如何设置某些字段不需要验证" target="_blank">Yii使用Ajax验证时,如何设置某些字段不需要验证</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a> <div>经常像你注册页面,你可能非常希望只需要Ajax去验证用户名和Email,而不需要使用Ajax再去验证密码,默认如果你使用Yii 内置的ajax验证Form,例如: $form=$this->beginWidget('CActiveForm', array(        'id'=>'usuario-form',&</div> </li> <li><a href="/article/2752.htm" title="使用git同步网站代码" target="_blank">使用git同步网站代码</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/crontab/1.htm">crontab</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a> <div>转自:http://ued.ctrip.com/blog/?p=3646?tn=gongxinjun.com   管理一网站,最开始使用的虚拟空间,采用提供商支持的ftp上传网站文件,后换用vps,vps可以自己搭建ftp的,但是懒得搞,直接使用scp传输文件到服务器,现在需要更新文件到服务器,使用scp真的很烦。发现本人就职的公司,采用的git+rsync的方式来管理、同步代码,遂</div> </li> <li><a href="/article/2879.htm" title="sql基本操作" target="_blank">sql基本操作</a> <span class="text-muted">蕃薯耀</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/sql%E5%9F%BA%E6%9C%AC%E6%93%8D%E4%BD%9C/1.htm">sql基本操作</a><a class="tag" taget="_blank" href="/search/sql%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C/1.htm">sql常用操作</a> <div>sql基本操作 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月1日 17:30:33 星期一     &</div> </li> <li><a href="/article/3006.htm" title="Spring4+Hibernate4+Atomikos3.3多数据源事务管理" target="_blank">Spring4+Hibernate4+Atomikos3.3多数据源事务管理</a> <span class="text-muted">hanqunfeng</span> <a class="tag" taget="_blank" href="/search/Hibernate4/1.htm">Hibernate4</a> <div>Spring3+后不再对JTOM提供支持,所以可以改用Atomikos管理多数据源事务。Spring2.5+Hibernate3+JTOM参考:http://hanqunfeng.iteye.com/blog/1554251Atomikos官网网站:http://www.atomikos.com/   一.pom.xml <dependency> <</div> </li> <li><a href="/article/3133.htm" title="jquery中两个值得注意的方法one()和trigger()方法" target="_blank">jquery中两个值得注意的方法one()和trigger()方法</a> <span class="text-muted">jackyrong</span> <a class="tag" taget="_blank" href="/search/trigger/1.htm">trigger</a> <div>  在jquery中,有两个值得注意但容易忽视的方法,分别是one()方法和trigger()方法,这是从国内作者<<jquery权威指南》一书中看到不错的介绍 1) one方法     one方法的功能是让所选定的元素绑定一个仅触发一次的处理函数,格式为    one(type,${data},fn) &nb</div> </li> <li><a href="/article/3260.htm" title="拿工资不仅仅是让你写代码的" target="_blank">拿工资不仅仅是让你写代码的</a> <span class="text-muted">lampcy</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/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%92%A8%E8%AF%A2/1.htm">咨询</a> <div>这是我对团队每个新进员工说的第一件事情。这句话的意思是,我并不关心你是如何快速完成任务的,哪怕代码很差,只要它像救生艇通气门一样管用就行。这句话也是我最喜欢的座右铭之一。 这个说法其实很合理:我们的工作是思考客户提出的问题,然后制定解决方案。思考第一,代码第二,公司请我们的最终目的不是写代码,而是想出解决方案。 话粗理不粗。 付你薪水不是让你来思考的,也不是让你来写代码的,你的目的是交付产品</div> </li> <li><a href="/article/3387.htm" title="架构师之对象操作----------对象的效率复制和判断是否全为空" target="_blank">架构师之对象操作----------对象的效率复制和判断是否全为空</a> <span class="text-muted">nannan408</span> <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84%E5%B8%88/1.htm">架构师</a> <div>1.前言。   如题。 2.代码。 (1)对象的复制,比spring的beanCopier在大并发下效率要高,利用net.sf.cglib.beans.BeanCopier Src src=new Src(); BeanCopier beanCopier = BeanCopier.create(Src.class, Des.class, false); </div> </li> <li><a href="/article/3514.htm" title="ajax 被缓存的解决方案" target="_blank">ajax 被缓存的解决方案</a> <span class="text-muted">Rainbow702</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><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/cache/1.htm">cache</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a> <div>使用jquery的ajax来发送请求进行局部刷新画面,各位可能都做过。 今天碰到一个奇怪的现象,就是,同一个ajax请求,在chrome中,不论发送多少次,都可以发送至服务器端,而不会被缓存。但是,换成在IE下的时候,发现,同一个ajax请求,会发生被缓存的情况,只有第一次才会被发送至服务器端,之后的不会再被发送。郁闷。 解决方法如下: ① 直接使用 JQuery提供的 “cache”参数,</div> </li> <li><a href="/article/3641.htm" title="修改date.toLocaleString()的警告" target="_blank">修改date.toLocaleString()的警告</a> <span class="text-muted">tntxia</span> <a class="tag" taget="_blank" href="/search/String/1.htm">String</a> <div>  我们在写程序的时候,经常要查看时间,所以我们经常会用到date.toLocaleString(),但是date.toLocaleString()是一个过时 的API,代替的方法如下:   package com.tntxia.htmlmaker.util; import java.text.SimpleDateFormat; import java.util.</div> </li> <li><a href="/article/3768.htm" title="项目完成后的小总结" target="_blank">项目完成后的小总结</a> <span class="text-muted">xiaomiya</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E6%80%BB%E7%BB%93/1.htm">总结</a><a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE/1.htm">项目</a> <div>项目完成了,突然想做个总结但是有点无从下手了。 做之前对于客户端给的接口很模式。然而定义好了格式要求就如此的愉快了。 先说说项目主要实现的功能吧 1,按键精灵 2,获取行情数据 3,各种input输入条件判断 4,发送数据(有json格式和string格式) 5,获取预警条件列表和预警结果列表, 6,排序, 7,预警结果分页获取 8,导出文件(excel,text等) 9,修</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>