前言

本系列文章主要是基于W3school这个学习网站来总结的，之所以会自己总结一番，一来是因为网站中的实例效果，需要点击一下“尝试一下”这个按钮才可以看到，对于学习来说，其实效率很低，而且如果我要复习的话，只需要打开这篇文章在电脑屏幕左边，再打开在线编译器在屏幕右边，一路将例子敲下来即可，而不用每次都点击“尝试一下”这个按钮，来查看代码显示效果。

一、HTML简介

HTML是用来描述网页的一种语言。
HTML 指的是超文本标记语言（Hyper Text Markup Language）
HTML 不是一种编程语言，而是一种标记语言（markup language），标记语言是一套标记标签（markup tag）
HTML 使用标记标签来描述网页。

HTML标签

HTML标记标签通常被称为HTML标签，HTML标签是HTML语言中最基本的单位，HTML标签是HTML（标准通用标记语言下的一个应用）最重要的组成部分。HTML标签的大小写，例如“主体”和表示的意思是一样的，推荐使用小写。
- 由尖括号包围的关键词，比如
- 通常是成对出现的，比如
  和
- 标签对中的第一个标签是开始标签，第二个标签是结束标签。
- 开始和结束标签也称为开放标签和闭合标签。
- 也有单独呈现的标签，比如等。
- 一般成对出现的标签，其内容在两个标签中间。单独呈现的标签，则在标签属性中赋值。如
  标题
  和
- 网页的内容需在标签中，标题、字符格式、语言、兼容性、关键字、描述等信息显示在标签中，而网页需要展示的内容需要嵌套在标签中。某些时候不按标准书写代码虽然可以正常显示，但是作为职业素养，还是应该养成正规编写习惯。

HTML文档 = 网页

HTML文档描述网页
HTML文档包含HTML标签和纯文本
HTML文档也被称为网页
Web浏览器的作用是读取HTML文档，并以网页的形式显示出它们，浏览器不会显示HTML标签，而是使用标签来解释页面的内容。

实例




我的第一个标题。

我的第一个段落。

例子解释
- 与之间的文本描述网页，元素定义了整个HTML文档，这个元素拥有一个开始标签，以及一个结束标签，元素内容是另一个HTML元素（body元素）。
- 与之间的文本是可见的页面内容，这个元素拥有一个开始标签，以及一个结束标签，元素内容是另外两个HTML元素（h1元素和p元素）。
- 与
  之间的文本被显示为标题，这个元素拥有一个开始标签
  ，以及一个结束标签
  ，元素内容是：我的第一个标题。
- 与
  之间的文本被显示为段落，这个元素拥有一个开始标签
  ，以及一个结束标签
  ，元素内容是：我的第一个段落。

二、HTML编辑器

Notepad
记事本
- 启动记事本
- 使用记事本来编辑HTML
- 选择另存为，保存，然后将文件后缀更改为.html
- 在浏览器中运行这个HTML文件，直接鼠标拖动这个文件至浏览器页面即可。

三、四个最常使用的标签

HTML标题

实例




这是标题1
这是标题2
这是标题3
这是标题4
这是标题5
这是标题6

标题元素范围是h1到h6之间，所有h7不会显示加粗的标题效果

HTML标题（Heading）是通过
到
等标签进行定义的，
定义最大的标题，
定义最小的标题。
浏览器会自动地在标题的前后添加空行，默认情况下，HTML会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
标题很重要
- 请确保将HTML heading标签只用于标题，不要仅仅是为了产生粗体或大号的文本而使用标题。
- 搜索引擎使用标题为你的网页的结构和内容编制索引。
- 因为用户可以通过标题来快速浏览你的网页，所以用标题来呈现文档结构是很重要的。
- 应该将h1用作主标题（最重要），其后是h2（次重要），再其次是h3，以此类推。
HTML水平线
- 标签在HTMl页面中创建水平线。hr元素可用于分隔内容。
- 实例




hr 标签定义水平线



这是段落1



这是段落2

HTML注释
- 可以将注释插入HTML代码中，这样可以提高其可读性，使代码更易被人理解，浏览器会忽略注释。
- 实例







这是一段普通的段落。

HTML提示——如何查看源代码
单击右键，选择“查看源文件”（IE）或“查看页面源代码”（Firefox），其他浏览器的做法也是类似的，这么做会打开一个包含页面HTML代码的窗口。

HTML段落

实例




这是段落1
这是段落2
这是段落3

段落元素由 p 标签定义

HTML段落是通过
标签进行定义的。
浏览器会自动地在段落的前后添加空行。（
是块级元素）
使用空的段落标记
去插入一个空行是个坏习惯，用
标签代替它。
不要忘记结束标签，即使忘了使用结束标签，大多数浏览器也会正确地将HTML显示出来。
- 实例




This is a paragraph.
This is a paragraph.
This is a paragraph.

不要忘记关闭你的 HTML 标签！

HTML拆行
- 如果你希望在不产生一个新段落的情况下进行换行（新行），就使用
  标签。
- 元素是一个空的HTML元素，由于关闭标签没有任何意义，因此它没有结束标签。
- 还是
  ，在XHTML、XML以及未来的HTML版本中不允许使用没有结束标签（闭合标签）的HTML元素，即使
  在所有浏览器中的显示都没有问题，使用
  也是更长远的保障。
  - 实例






To break

lines

in a

paragraph,

use the br tag.

HTML输出——有用的提示
- 我们无法确定HTML被显示的确切效果，屏幕的大小，以及对窗口的调整都可能导致不同的结果。
- 对于HTML，我们无法通过在HTML代码中添加额外的空格和换行来改变输出的效果。
- 当显示页面时，浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被算作一个空格，需要注意的是，HTML代码中的所有连续的空格（空行）也被显示为一个空格。
  - 实例





春晓


    春眠不觉晓，
      处处闻啼鸟。
        夜来风雨声，
          花落知多少。


注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。

HTML链接

HTML链接是通过标签进行定义的，并且在href属性中指定链接的地址。

实例




w3school是一个非常好的学习Web技术的网站。

HTML图像

HTML图像是通过标签进行定义的，图像的名称和尺寸是以属性的形式提供的。
- 如果是本地的话，后面加上图片的绝对路径或者相对路径。
- 如果图片源来自网上，那必须使用绝对路径。

HTML元素

HTML文档是由HTML元素定义的，HTML元素指的是从开始（start tag）到结束标签（end tag）的所有代码。开始标签常被称为开放标签（opening tag），结束标签常被称为闭合标签（closing tag）

开始标签	元素内容	结束标签
	This is a paragraph
	This is a link

HTML元素语法

HTML元素以开始标签起始
HTML元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些HTML元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数HTML元素可拥有属性

嵌套的HTML元素

大多数HTML元素可以嵌套（可以包含其他HTML元素）
HTML文档由嵌套的HTML元素构成

不要忘记结束标签

即使你忘记了使用结束标签，大多数浏览器也会正确地显示HTML，但是不要依赖这种做法，忘记使用结束标签会产生不可预料的结果或者错误，未来的HTML版本不允许省略结束标签。

空的HTML元素

没有内容的HTML元素被称为空元素，空元素是在开始标签中关闭的。
比如
就是没有关闭标签的空元素（
标签定义换行）
在XHTML、XML以及未来版本的HTML中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如
，是关闭空元素的正确方法，HTML、XHTML和XML都接受这种方式。
即使
在所有浏览器中都是有效的，但使用
其实是更长远的保障。

HTML属性

HTML标签可以拥有属性，属性提供了有关HTML元素的更多信息。
属性总是以名称/值对的形式出现，比如name="value"。
属性总是在HTML元素的开始标签中规定。
属性实例，HTML链接由标签定义，链接的地址在href属性中指定。




w3school是一个非常好的学习Web技术的网站。

更多属性实例
- 属性例子1：居中排列标题




This is heading 1

上面的标题在页面中进行了居中排列。

- 属性例子2：背景颜色




请看：改变了颜色的背景。

属性例子3：
定义HTML表格。

HTML提示：使用小写属性

属性和属性值对大小写不敏感。不过万维网联盟在其HTML4推荐标准中推荐小写的属性和属性值。而新版本的（X）HTML要求使用小写属心。

始终为属性值加引号

属性值应该始终被包括在引号内，双引号是最常使用的，不过使用单引号也没有问题，在某些个别情况下，比如属性值本身就含有双引号，那么这时就必须使用单引号，例如：

name='Bill "Helloworld" Gates'

HTML样式

实例




Look! Style and Colors

This text is in Verdana and green


This text is in Times and green


This text is 30 pixels high

style 属性用于改变HTML元素的样式。
style 属性的作用：
- 提供了一种改变所有HTML元素的样式的通用方法。
- 样式是HTML4引入的，它是一种新的首选的改变HTML元素样式的方式，通过HTML样式，能够通过使用style属性直接将样式添加到HTML元素，或者间接地在独立的样式表中（CSS文件）进行定义。
不赞成使用的标签和属性
- 在HTML4中，有若干的标签和属性是被废弃的，被废弃的意思是在未来版本的HTM和XHTML中将不支持这些标签和属性。
- 应该避免使用以下这些标签和属性，并使用样式代替。

标签	描述
	定义居中的内容
和	定义HTML字体
	定义删除线文本
	定义下划线文本

属性	描述
align	定义文本的对齐方式
bgcolor	定义背景颜色
color	定义文本颜色

HTML样式实例——背景颜色
- background-color 属性为元素定义了背景颜色。






This is a heading



This is a paragraph

HTML样式实例——字体、颜色和尺寸
- font-family、color以及font-size属性分别定义元素中文本的字体系列、颜色和字体尺寸。




A heading


A paragraph

HTML样式实例——文本对齐
- text-align属性规定了元素中文本的水平对齐方式。




This is a heading


上面的标题相对于页面居中对齐

HTML格式化

HTML可以定义很多供格式化输出的元素，比如粗体和斜体字。
文本格式化标签

标签	描述
	定义粗体文字
	定义大号字
	定义着重文字
	定义斜体文字
	定义小号字
	定义加重语气
	定义下标字
	定义上标字
	定义插入字
	定义删除字
	使用代替
	使用代替
	使用样式（style）代替

“计算机输出”标签

标签	描述
	定义计算机代码
	定义键盘码
	定义计算机代码样本
	定义打字机代码
	定义变量
	定义预格式文本
	使用代替
</td> <td style="text-align:center">使用<pre>代替</td> </tr> <tr> <td><xmp></td> <td style="text-align:center">使用<pre>代替</td> </tr> </tbody> </table> <ul> <li>引用、引用和术语定义</li> </ul> <table> <thead> <tr> <th>标签</th> <th style="text-align:center">描述</th> </tr> </thead> <tbody> <tr> <td><abbr></td> <td style="text-align:center">定义缩写</td> </tr> <tr> <td><acronym></td> <td style="text-align:center">定义首字母缩写</td> </tr> <tr> <td><address></td> <td style="text-align:center">定义地址</td> </tr> <tr> <td><bdo></td> <td style="text-align:center">定义文字方向</td> </tr> <tr> <td><blockquote></td> <td style="text-align:center">定义长的引用语</td> </tr> <tr> <td><q></td> <td style="text-align:center">定义短的引用语</td> </tr> <tr> <td><cite></td> <td style="text-align:center">定义引用、引证</td> </tr> <tr> <td><dfn></td> <td style="text-align:center">定义一个定义项目</td> </tr> </tbody> </table> <h3>HTML文本格式化实例</h3> <ul> <li>文本格式化</li> </ul> <pre><code><html> <body> <b>This text is bold</b> <br/> <strong>This text is strong</strong> <br/> <big>This text is big</big> <br/> <em>This text is emphasized</em> <br/> <i>This text is italic</i> <br/> <small>This text is small</small> <br/> This text contains <sub>subscript</sub> <br/> This text contains <sup>superscript</sup> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 446px; max-height: 199px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/202c7a87ba054f2888c3fb5d14a5925b.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/202c7a87ba054f2888c3fb5d14a5925b.png" width="446" height="199" alt="web学习之html基础（一）_第15张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>预格式文本</li> </ul> <pre><code><html> <body> <pre> 这是预格式文本。它保留了空格和换行。 </pre> <p>pre 标签很适合显示计算机代码：</p> <pre> for i = 1 to 10 print i next i </pre> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 451px; max-height: 181px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/aa913fe299c4414fb86fad90d8eb06d2.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/aa913fe299c4414fb86fad90d8eb06d2.png" width="451" height="181" alt="web学习之html基础（一）_第16张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>“计算机输出”标签</li> </ul> <pre><code><html> <body> <code>Computer code</code> <br/> <kbd>Keyboard input</kbd> <br/> <tt>Teletype text</tt> <br/> <samp>Sample text</samp> <br/> <var>Computer variable</var> <br/> <p> <b>注释：</b>这些标签常用于显示计算机/编程代码。 </p> <body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 448px; max-height: 169px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/a7a76eaeedf449dc9934c9f9557b1f28.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/a7a76eaeedf449dc9934c9f9557b1f28.png" width="448" height="169" alt="web学习之html基础（一）_第17张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>地址</li> </ul> <pre><code><html> <body> <address> Written by <a href="mailto:webmaster@example.com">Donald Duck</a>. <br> Visit us at: <br> Example.com <br> Box 564, Disneyland <br> USA </address> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 447px; max-height: 107px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/fce31c9407164b32adb7fbfc33b9d53e.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/fce31c9407164b32adb7fbfc33b9d53e.png" width="447" height="107" alt="web学习之html基础（一）_第18张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>缩写和首字母缩写</li> </ul> <pre><code><html> <body> <abbr title="etcetera">etc.</abbr> <br /> <acronym title="World Wide Web">WWW</acronym> <p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p> <p>仅对于 IE 5 中的 acronym 元素有效。</p> <p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 450px; max-height: 185px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/9bee9cb255ab418c98e2e20b55f97711.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/9bee9cb255ab418c98e2e20b55f97711.png" width="450" height="185" alt="web学习之html基础（一）_第19张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>文字方向</li> </ul> <pre><code><html> <body> <p> 如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)； </p> <bdo dir="rtl"> Here is some Hebrew text </bdo> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 449px; max-height: 103px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/23e09d1a8e6d4be8b2ec81cc8a071ac7.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/23e09d1a8e6d4be8b2ec81cc8a071ac7.png" width="449" height="103" alt="web学习之html基础（一）_第20张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>块引用</li> </ul> <pre><code><html> <body> 这是长的引用： <blockquote> 这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。 </blockquote> 这是短的引用： <q> 这是短的引用。 </q> <p> 使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。 </p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 449px; max-height: 220px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/ad3fc551d8ac4a7ab8b985984607c0e9.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/ad3fc551d8ac4a7ab8b985984607c0e9.png" width="449" height="220" alt="web学习之html基础（一）_第21张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>删除字效果和插入字效果</li> </ul> <pre><code><html> <body> <p>一打有 <del>二十</del> <ins>十二</ins> 件。</p> <p>大多数浏览器会改写为删除文本和下划线文本。</p> <p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 450px; max-height: 134px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/79c2aa298a044c75820c7312b5b18065.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/79c2aa298a044c75820c7312b5b18065.png" width="450" height="134" alt="web学习之html基础（一）_第22张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <h2>HTML CSS</h2> <ul> <li><p>通过使用HTML4.0，所有的格式化代码均可移出HTML文档，然后移入一个独立的样式表。</p></li> <li> <p>实例</p> <ul> <li>HTML中的样式 <ul> <li>本例演示如何使用添加到<head>部分的样式信息对HTML进行格式化。</li> </ul> </li> </ul> </li> </ul> <pre><code><html> <head> <style type="text/css"> h1 {color: red} p {color: blue} </style> </head> <body> <h1>header 1</h1> <p>A paragraph.</p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 460px; max-height: 96px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/d1bb6518eb6741ec80ba3abf64b542fd.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/d1bb6518eb6741ec80ba3abf64b542fd.png" width="460" height="96"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li> <ul> <li>没有下划线的链接 <ul> <li>本例演示如何使用样式属性做一个没有下划线的链接。</li> </ul> </li> </ul></li> </ul> <pre><code><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> </head> <body> <a href="/example/html/lastpage.html" style="text-decoration:none"> 这是一个链接！ </a> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 460px; max-height: 93px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/51fc8b6016a14ffcb83ca95b31c10ad6.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/51fc8b6016a14ffcb83ca95b31c10ad6.png" width="460" height="93"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li> <ul> <li>链接到一个外部样式表 <ul> <li>本例演示如何<link>标签链接到一个外部样式表。</li> </ul> </li> </ul></li> </ul> <pre><code><html> <head> <link rel="stylesheet" type="text/css" href="/html/csstest1.css" > </head> <body> <h1>我通过外部样式表进行格式化。</h1> <p>我也一样！</p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 460px; max-height: 185px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/745a8b17528441639d6a421fce324eca.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/745a8b17528441639d6a421fce324eca.png" width="460" height="185" alt="web学习之html基础（一）_第23张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>使用样式 <ul> <li>当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化，有如下三种方式来插入样式表。 <ul> <li>外部样式表 <ul> <li>当样式需要被应用到很多页面的时候，外部样式表将是理想的选择，使用外部样式表，你就可以通过更改一个文件的外观。</li> </ul> </li> </ul> </li> </ul> </li> </ul> <pre><code><head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> </code></pre> <ul> <li> <ul> <li> <ul> <li>内部样式表 <ul> <li>当单个文件需要特别样式时，就可以使用内部样式表，你可以在head部分通过<style>标签定义内部样式表。</li> </ul> </li> </ul></li> </ul></li> </ul> <pre><code><head> <style type="text/css"> body {background-color:red} p {margin-left:20px} </style> </head> </code></pre> <ul> <li> <ul> <li> <ul> <li>内联样式 <ul> <li>当特殊的样式需要应用到个别元素时，就可以使用内联样式，使用内联样式的方法是在相关的标签中使用样式属性。包含任何CSS属性，以下实例显示出如何改变段落的颜色和左外边距。</li> </ul> </li> </ul></li> </ul></li> </ul> <pre><code><p style="Color:red;margin-left:60px"> This is a paragraph </p> </code></pre> <table> <thead> <tr> <th>标签</th> <th style="text-align:center">描述</th> </tr> </thead> <tbody> <tr> <td><style></td> <td style="text-align:center">定义样式定义</td> </tr> <tr> <td><link></td> <td style="text-align:center">定义资源引用</td> </tr> <tr> <td><div></td> <td style="text-align:center">定义文档中的节或区域（块级）</td> </tr> <tr> <td><span></td> <td style="text-align:center">定义文档中的行内的小块或区域</td> </tr> <tr> <td><font></td> <td style="text-align:center">规定文本的字体、字体尺寸、字体颜色。不赞成使用，请使用样式。</td> </tr> <tr> <td><basefont></td> <td style="text-align:center">定义基准字体，不赞成使用，请使用样式。</td> </tr> <tr> <td><center></td> <td style="text-align:center">对文本进行水平居中，不赞成使用，请使用样式。</td> </tr> </tbody> </table> <h2>HTML链接</h2> <ul> <li>HTML使用超级链接与网络上的另一个文档相连。</li> <li>几乎可以在所有的网页中找到链接，点击链接可以从一张页面跳转到另一张页面。</li> </ul> <h3>实例</h3> <ul> <li>示例一：创建超级链接 <ul> <li>本例演示如何在HTML文档中创建链接。</li> </ul> </li> </ul> <pre><code><html> <body> <p> <a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p> <p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 467px; max-height: 89px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/c173b93bb13c441099bfe6fe6357ec2b.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/c173b93bb13c441099bfe6fe6357ec2b.png" width="467" height="89"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>示例二：将图像作为链接 <ul> <li>本例演示如何使用图像作为链接。</li> </ul> </li> </ul> <pre><code><html> <body> <p> 您也可以使用图像来作链接： <a href="/example/html/lastpage.html"> <img border="0" src="/i/eg_buttonnext.gif" /> </a> </p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 466px; max-height: 157px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/64f86ebf9774445192bc31a851696c46.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/64f86ebf9774445192bc31a851696c46.png" width="466" height="157" alt="web学习之html基础（一）_第24张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>示例三：在新的浏览器窗口打开链接 <ul> <li>本例演示如何在新窗口打开一个页面，这样的话访问者就无需离开你的站点了。</li> </ul> </li> </ul> <pre><code><html> <body> <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a> <p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 471px; max-height: 120px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/df93b4fc605f46959a9b8672126d7001.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/df93b4fc605f46959a9b8672126d7001.png" width="471" height="120" alt="web学习之html基础（一）_第25张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>示例四：链接到同一个页面的不同位置 <ul> <li>本例演示如何使用链接跳转至文档的另一个部分。</li> </ul> </li> </ul> <pre><code><html> <body> <p> <a href="#C4">查看 chapter 4。</a> </p> <h2>Chapter 1</h2> <p>This chapter explains ba bla</p> <h2>Chapter 2</h2> <p>This chapter explains ba bla</p> <h2>Chapter 3</h2> <p>This chapter explains ba bla</p> <h2><a name="C4">Chapter 4</a></h2> <p>This chapter explains ba bla</p> <h2>Chapter 5</h2> <p>This chapter explains ba bla</p> <h2>Chapter 6</h2> <p>This chapter explains ba bla</p> <h2>Chapter 7</h2> <p>This chapter explains ba bla</p> <h2>Chapter 8</h2> <p>This chapter explains ba bla</p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 451px; max-height: 390px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/2f26a36a2d764461a2b97a3700a0637b.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/2f26a36a2d764461a2b97a3700a0637b.png" width="451" height="390" alt="web学习之html基础（一）_第26张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <div class="image-package"> <div class="image-container" style="max-width: 451px; max-height: 402px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/57629f7909c048eb8f7721a040802bc3.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/57629f7909c048eb8f7721a040802bc3.png" width="451" height="402" alt="web学习之html基础（一）_第27张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>示例五：跳出框架 <ul> <li>本例演示如何跳出框架，假如你的页面被固定在框架之内。</li> </ul> </li> </ul> <pre><code><html> <body> <p>被锁在框架中了吗？</p> <a href="/index.html" target="_top">请点击这里！</a> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 471px; max-height: 95px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/4d511e2612b946acac08d0cf4165d699.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/4d511e2612b946acac08d0cf4165d699.png" width="471" height="95"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>示例六：创建电子邮件链接1 <ul> <li>本例演示如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）</li> </ul> </li> </ul> <pre><code><html> <body> <p> 这是邮件链接： <a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a> </p> <p> <b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。 </p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 468px; max-height: 97px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/d203e01f084945079db5c465b23947d0.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/d203e01f084945079db5c465b23947d0.png" width="468" height="97"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>示例七：创建电子邮件链接2</li> </ul> <pre><code><html> <body> <p> 这是另一个 mailto 链接： <a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a> </p> <p> <b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。 </p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 466px; max-height: 123px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/2b7c8444eb1841f2a6c53a65a68893fa.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/2b7c8444eb1841f2a6c53a65a68893fa.png" width="466" height="123" alt="web学习之html基础（一）_第28张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <h2>HTML图像</h2> <ul> <li>在HTML中，图像由<img>标签定义，<img>标签是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src），src指“source”，源属性的值是图像的URL地址。定义图像的语法是：</li> </ul> <pre><code><img src="url" /> </code></pre> <ul> <li><p>URL指存储图像的位置。如果名为“boat.gif” 的图像位于www.w3school.com.cn的目录中，那么其URL为http://www.w3school.com.cn/images/boat.gif</p></li> <li><p>浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。</p></li> <li><p>alt 属性用来为图像定义一串预备的可替换的文本，替换文本属性的值是用户定义的。</p></li> </ul> <pre><code><img src="boat.gif" alt="Big Boat"> </code></pre> <ul> <li>在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息，此时，浏览器将显示这个替代性文本而不是图像，为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。</li> <li>注意事项，假如某个HTML文件包含十个图像，那么为了正确显示这个页面，需要加载11个文件，加载图片是需要时间的，所以我们的建议是：慎用图片。</li> </ul> <h3>图像标签</h3> <table> <thead> <tr> <th>标签</th> <th style="text-align:center">描述</th> </tr> </thead> <tbody> <tr> <td><img></td> <td style="text-align:center">定义图像</td> </tr> <tr> <td><map></td> <td style="text-align:center">定义图像地图</td> </tr> <tr> <td><area></td> <td style="text-align:center">定义图像地图中的可点击区域</td> </tr> </tbody> </table> <h3>实例</h3> <ul> <li>示例一：插入图像 <ul> <li>本例演示如何在网页中显示图像。</li> </ul> </li> </ul> <pre><code> <html> <body> <p> 一幅图像： <img src="/i/eg_mouse.jpg" width="128" height="128" /> </p> <p> 一幅动画图像： <img src="/i/eg_cute.gif" width="50" height="50" /> </p> <p>请注意，插入动画图像的语法与插入普通图像的语法没有区别。</p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 434px; max-height: 292px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/31ac9aa060454ada81c5a98f7e1d1eae.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/31ac9aa060454ada81c5a98f7e1d1eae.jpg" width="434" height="292" alt="web学习之html基础（一）_第29张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>示例二：从不同的位置插入图片 <ul> <li>本例演示如何将其他文件夹或服务器的图片显示到网页中。</li> </ul> </li> </ul> <pre><code><html> <body> <p> 来自另一个文件夹的图像： <img src="/i/ct_netscape.jpg" /> </p> <p> 来自 W3School.com.cn 的图像： <img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" /> </p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 433px; max-height: 148px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/fc18ead4b9d6414c8e6cc3dad30b92b9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/fc18ead4b9d6414c8e6cc3dad30b92b9.jpg" width="433" height="148" alt="web学习之html基础（一）_第30张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>示例三：背景图片 <ul> <li>本例演示如何向HTML页面添加背景图片。</li> </ul> </li> </ul> <pre><code><html> <body background="/i/eg_background.jpg"> <h3>图像背景</h3> <p>gif 和 jpg 文件均可用作 HTML 背景。</p> <p>如果图像小于页面，图像会进行重复。</p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 435px; max-height: 152px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/2b643f261b2e44a0baf395e985c86df5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/2b643f261b2e44a0baf395e985c86df5.jpg" width="435" height="152" alt="web学习之html基础（一）_第31张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>示例四：排列图片 <ul> <li>本例演示如何在文字中排列图像。</li> </ul> </li> </ul> <pre><code><html> <body> <h2>未设置对齐方式的图像：</h2> <p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p> <h2>已设置对齐方式的图像：</h2> <p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p> <p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p> <p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p> <p>请注意，bottom 对齐方式是默认的对齐方式。</p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 413px; max-height: 400px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/a4eae644d35e4b0787a41a0b4b44bd5b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/a4eae644d35e4b0787a41a0b4b44bd5b.jpg" width="413" height="400" alt="web学习之html基础（一）_第32张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>示例五：浮动图像 <ul> <li>本例演示如何使图片浮动至段落的左边或右边。</li> </ul> </li> </ul> <pre><code><html> <body> <p> <img src ="/i/eg_cute.gif" align ="left"> 带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。 </p> <p> <img src ="/i/eg_cute.gif" align ="right"> 带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。 </p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 434px; max-height: 135px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/eeb5f328d600430f8526b4688ee1e6a8.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/eeb5f328d600430f8526b4688ee1e6a8.png" width="434" height="135" alt="web学习之html基础（一）_第33张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>示例六：调整图片尺寸 <ul> <li>本例演示如何将图片调整到不同的尺寸。</li> </ul> </li> </ul> <pre><code><html> <body> <img src="/i/eg_mouse.jpg" width="50" height="50"> <br /> <img src="/i/eg_mouse.jpg" width="100" height="100"> <br /> <img src="/i/eg_mouse.jpg" width="200" height="200"> <p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 414px; max-height: 356px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/d390dd1f3f534df5811ad56e715dda18.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/d390dd1f3f534df5811ad56e715dda18.jpg" width="414" height="356" alt="web学习之html基础（一）_第34张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>示例七：为图片显示替换文本 <ul> <li>本例演示如何为图片显示替换文本，在浏览器无法载入图像时，替换文本属性告诉读者们失去的信息，为页面上的图像都加上替换文本是个好习惯。</li> </ul> </li> </ul> <pre><code><html> <body> <p>仅支持文本的浏览器无法显示图像，仅仅能够显示在图像的 "alt" 属性中指定的文本。在这里，"alt" 的文本是“向左转”。</p> <p>请注意，如果您把鼠标指针移动到图像上，大多数浏览器会显示 "alt" 文本。</p> <img src="/i/eg_goleft.gif" alt="向左转" /> <p>如果无法显示图像，将显示 "alt" 属性中的文本：</p> <img src="/i/eg_goleft123.gif" alt="向左转" /> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 506px; max-height: 246px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/d066304c5216493aa3185282d28f8914.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/d066304c5216493aa3185282d28f8914.png" width="506" height="246" alt="web学习之html基础（一）_第35张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>示例八：制作图像链接 <ul> <li>本例演示如何将图像作为一个链接使用。</li> </ul> </li> </ul> <pre><code><html> <body> <p> 您也可以把图像作为链接来使用： <a href="/example/html/lastpage.html"> <img border="0" src="/i/eg_buttonnext.gif" /> </a> </p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 518px; max-height: 185px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/ab52b9360f8e4f7abb6a1043fad5b1dd.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/ab52b9360f8e4f7abb6a1043fad5b1dd.png" width="518" height="185" alt="web学习之html基础（一）_第36张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>示例九：创建图像映射 <ul> <li>本例显示如何创建带有可供点击区域的图像地图，其中的每一个区域都是一个超级链接。</li> </ul> </li> </ul> <pre><code><html> <body> <p>请点击图像上的星球，把它们放大。</p> <img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" target ="_blank" alt="Sun" /> </map> <p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 517px; max-height: 380px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/c756b264398c4ec19beee25c07c953f0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/c756b264398c4ec19beee25c07c953f0.jpg" width="517" height="380" alt="web学习之html基础（一）_第37张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>示例十：把图像转换为图像映射 <ul> <li>本例显示如何把一幅普通的图像设置为图像映射。</li> </ul> </li> </ul> <pre><code> <html> <body> <p>请把鼠标移动到图像上，看一下状态栏的坐标如何变化。</p> <a href="/example/html/html_ismap.html"> <img src="/i/eg_planets.jpg" ismap /> </a> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 519px; max-height: 322px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/f98a865afaf045f49cac316dc4690ae7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/f98a865afaf045f49cac316dc4690ae7.jpg" width="519" height="322" alt="web学习之html基础（一）_第38张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <h2>HTML表格</h2> <ul> <li>HTML表格由<table>标签来定义，每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母td指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、段落、表单、水平线、表格等等。</li> <li>边框属性，如果不定义边框属性，表格将不显示边框，有时这很有用，但是太多数时候，我们希望显示边框，使用边框属性border来显示一个带有边框的表格。</li> <li>表头，表格的表头使用<th>标签进行定义，大多数浏览器会把表头显示为粗体居中的文本。</li> <li>空单元格，在一些浏览器中，没有内容的表格单元显示得不太好，如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。为了避免这种情况，在空单元格中添加一个空占位符<code><td> </td></code>，就可以将边框显示出来。</li> </ul> <h3>表格标签</h3> <table> <thead> <tr> <th>标签</th> <th style="text-align:center">描述</th> </tr> </thead> <tbody> <tr> <td><table></td> <td style="text-align:center">定义表格</td> </tr> <tr> <td><caption></td> <td style="text-align:center">定义表格标题</td> </tr> <tr> <td><th></td> <td style="text-align:center">定义表格的表头</td> </tr> <tr> <td><tr></td> <td style="text-align:center">定义表格的行</td> </tr> <tr> <td><td></td> <td style="text-align:center">定义表格单元</td> </tr> <tr> <td><thead></td> <td style="text-align:center">定义表格的页眉</td> </tr> <tr> <td><tbody></td> <td style="text-align:center">定义表格的主体</td> </tr> <tr> <td><tfoot></td> <td style="text-align:center">定义表格的页脚</td> </tr> <tr> <td><col></td> <td style="text-align:center">定义用于表格列的属性</td> </tr> <tr> <td><colgroup></td> <td style="text-align:center">定义表格列的组</td> </tr> </tbody> </table> <h3>实例</h3> <ul> <li>示例一：表格 <ul> <li>这个例子演示如何在HTML文档中创建表格。</li> </ul> </li> </ul> <pre><code><html> <body> <p>每个表格由 table 标签开始。</p> <p>每个表格行由 tr 标签开始。</p> <p>每个表格数据由 td 标签开始。</p> <h4>一列：</h4> <table border="1"> <tr> <td>100</td> </tr> </table> <h4>一行三列：</h4> <table border="5"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <h4>两行三列：</h4> <table border="10"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 446px; max-height: 405px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/497bec757bd7414e92f559533c558b5b.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/497bec757bd7414e92f559533c558b5b.png" width="446" height="405" alt="web学习之html基础（一）_第39张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>示例二：表格边框 <ul> <li>本例演示各种类型的表格边框。</li> </ul> </li> </ul> <pre><code><html> <body> <h4>带有普通的边框：</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>带有粗的边框：</h4> <table border="8"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>带有很粗的边框：</h4> <table border="15"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 370px; max-height: 398px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/c4786c42fd2945c9bf654c202efc9426.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/c4786c42fd2945c9bf654c202efc9426.png" width="370" height="398" alt="web学习之html基础（一）_第40张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <h2>HTML列表</h2> <ul> <li><p>HTML支持有序、无序和定义列表</p></li> <li> <p>无序列表</p> <ul> <li>无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。</li> <li>无序列表始于<ul>标签，每个列表项始于<li>。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。</li> </ul> </li> <li> <p>有序列表</p> <ul> <li>有序列表也是一列项目，列表项目使用数字进行标记。</li> <li>有序列表始于<ol>标签，每个列表项始于<li>标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。</li> </ul> </li> <li> <p>定义列表</p> <ul> <li>自定义列表不仅仅是一列项目，而是项目及其注释的组合。</li> <li>自定义列表以<dl>标签开始，每个自定义列表项以<dt>开始，每个自定义列表项的定义以<dd>开始。定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。</li> </ul> </li> </ul> <h3>列表标签</h3> <table> <thead> <tr> <th>标签</th> <th style="text-align:center">描述</th> </tr> </thead> <tbody> <tr> <td><ol></td> <td style="text-align:center">定义有序列表</td> </tr> <tr> <td><ul></td> <td style="text-align:center">定义无序列表</td> </tr> <tr> <td><li></td> <td style="text-align:center">定义列表项</td> </tr> <tr> <td><dl></td> <td style="text-align:center">定义定义列表</td> </tr> <tr> <td><dt></td> <td style="text-align:center">定义定义项目</td> </tr> <tr> <td><dd></td> <td style="text-align:center">定义定义的描述</td> </tr> <tr> <td><dir></td> <td style="text-align:center">使用<ul>代替</td> </tr> <tr> <td><menu></td> <td style="text-align:center">使用<ul>代替</td> </tr> </tbody> </table> <h3>实例</h3> <ul> <li>示例一：无序列表 <ul> <li>本例演示无序列表。</li> </ul> </li> </ul> <pre><code><html> <body> <h4>一个无序列表：</h4> <ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 374px; max-height: 143px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/e86385f04b5a4db6bb065bf944810caa.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/e86385f04b5a4db6bb065bf944810caa.png" width="374" height="143" alt="web学习之html基础（一）_第41张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>示例二：有序列表 <ul> <li>本例演示有序列表。</li> </ul> </li> </ul> <pre><code><html> <body> <h4>有序列表样式：</h4> <ol> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol> <ol start="50"> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 444px; max-height: 194px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/1d580e1fd0644d83899fafeda4ebb8ac.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/1d580e1fd0644d83899fafeda4ebb8ac.png" width="444" height="194" alt="web学习之html基础（一）_第42张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <h2>HTML块</h2> <ul> <li><p>可以通过<div>和<span>将HTML元素组合起来。</p></li> <li> <p>HTML块元素</p> <ul> <li>大多数HTML元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束），比如<h1>、<p>、<ul>、<table>等等。</li> </ul> </li> <li> <p>HTML内联元素</p> <ul> <li>内联元素在显示时通常不会以新行开始，比如<b>、<td>、<a>、<img>等等。</li> </ul> </li> <li> <p>HTML<div>元素</p> <ul> <li>HTML<div>元素是块级元素，它是可用于组合其他HTML元素的容器，<div>元素没有特定的含义，除此之外，由于它属于块级元素，浏览器会在其前后显示拆行，如果与CSS一同使用，<div>元素可用于对大的内容块设置样式属性。</li> <li><div>元素的另一个常见的用途是文档布局，它取代了使用表格定义布局的老式方法，使用<table>元素进行文档布局不是表格的正确用法，<table>元素的作用是显示表格化的数据。</li> </ul> </li> <li> <p>HTML<span>元素</p> <ul> <li>HTML<span>元素是内联元素，可用作文本的容器，<span>元素也没有特定的含义，当与CSS一同使用时，<span>元素可用于为部分文本设置样式属性。</li> </ul> </li> </ul> <h3>HTML分组标签</h3> <table> <thead> <tr> <th>标签</th> <th style="text-align:center">描述</th> </tr> </thead> <tbody> <tr> <td><div></td> <td style="text-align:center">定义文档中的分区或节（division/section）</td> </tr> <tr> <td><span></td> <td style="text-align:center">定义span，用来组合文档中的行内元素</td> </tr> </tbody> </table> <h2>HTML类</h2> <ul> <li> <p>对HTML进行分类（设置类），使我们能够为元素的类定义CSS样式，为相同的类设置相同的样式，或者为不同的类设置不同的样式。</p> <ul> <li>示例，如下所示：</li> </ul> </li> </ul> <pre><code> <html> <head> <style> .cities { background-color:black; color:white; margin:20px; padding:20px; } </style> </head> <body> <div class="cities"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </div> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 507px; max-height: 296px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/244bd2236525428398701a3d6045b72f.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/244bd2236525428398701a3d6045b72f.png" width="507" height="296" alt="web学习之html基础（一）_第43张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>分类块级元素 <ul> <li>HTML<div>元素是块级元素，它能够用作其他和HTML元素的容器，设置<div>元素的类，使我们能够为相同的<div>元素设置相同的类。</li> <li>示例，如下所示：</li> </ul> </li> </ul> <pre><code><!DOCTYPE html> <html> <head> <style> .cities { background-color:black; color:white; margin:20px; padding:20px; } </style> </head> <body> <div class="cities"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </div> <div class="cities"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> <p>Situated on the Seine River, it is at the heart of the 蝜e-de-France region, also known as the r間ion parisienne.</p> <p>Within its metropolitan area is one of the largest population centers in Europe, with over 12 million inhabitants.</p> </div> <div class="cities"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> <p>It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.</p> <p>The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million people and the world's largest urban economy.</p> </div> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 495px; max-height: 396px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/7cdd79b01b0a4796ad4b6aeb10efad00.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/7cdd79b01b0a4796ad4b6aeb10efad00.png" width="495" height="396" alt="web学习之html基础（一）_第44张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>分类行内元素 <ul> <li><p>HTML<span>元素是行内元素，能够用作文本的容器，设置<span>元素的类，能够为相同的<span>元素设置相同的样式。</p></li> <li><p>示例，如下所示：</p></li> </ul> </li> </ul> <pre><code> <html> <head> <style> span.red { color:red; } </style> </head> <body> <h1>我的<span class="red">重要的</span>标题</h1> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 454px; max-height: 127px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/2ceb953eb7554f1eaddea89e086eaaa2.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/2ceb953eb7554f1eaddea89e086eaaa2.png" width="454" height="127" alt="web学习之html基础（一）_第45张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <h2>HTML布局</h2> <ul> <li> <p>网站常常使用多列显示内容（就像杂志和报纸）。</p> <br> <div class="image-package"> <div class="image-container" style="max-width: 663px; max-height: 430px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/c70a7ea72c174c9986ff012cf0788367.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/c70a7ea72c174c9986ff012cf0788367.png" width="663" height="430" alt="web学习之html基础（一）_第46张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> </li> </ul> <ul> <li>使用<div>元素的HTML布局 <ul> <li><div>元素常用作布局工具，因为能够轻松地通过CSS对其进行定位，下面这个例子使用了四个<div>元素来创建多列布局。</li> <li>实例</li> </ul> </li> </ul> <pre><code><!DOCTYPE html> <html> <head> <style> #header { background-color:black; color:white; text-align:center; padding:5px; } #nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; } #section { width:350px; float:left; padding:10px; } #footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; } </style> </head> <body> <div id="header"> <h1>City Gallery</h1> </div> <div id="nav"> London<br> Paris<br> Tokyo<br> </div> <div id="section"> <h2>London</h2> <p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </p> <p> Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. </p> </div> <div id="footer"> Copyright ? W3Schools.com </div> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 436px; max-height: 398px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/cdc82575eeac499fa074fac185799d8c.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/cdc82575eeac499fa074fac185799d8c.png" width="436" height="398" alt="web学习之html基础（一）_第47张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <div class="image-package"> <div class="image-container" style="max-width: 440px; max-height: 398px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/eaeafdbd13e044eabd2661fb5b83f69c.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/eaeafdbd13e044eabd2661fb5b83f69c.png" width="440" height="398" alt="web学习之html基础（一）_第48张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li> <p>使用HTML5的网站布局</p> <ul> <li>HTML5语义元素</li> </ul> </li> </ul> <table> <thead> <tr> <th>语义元素</th> <th style="text-align:center">描述</th> </tr> </thead> <tbody> <tr> <td>header</td> <td style="text-align:center">定义文档或节的页眉</td> </tr> <tr> <td>nav</td> <td style="text-align:center">定义导航链接的容器</td> </tr> <tr> <td>section</td> <td style="text-align:center">定义文档中的节</td> </tr> <tr> <td>article</td> <td style="text-align:center">定义独立的自包含文章</td> </tr> <tr> <td>aside</td> <td style="text-align:center">定义内容之外的内容（比如侧栏）</td> </tr> <tr> <td>footer</td> <td style="text-align:center">定义文档或节的页脚</td> </tr> <tr> <td>details</td> <td style="text-align:center">定义额外的细节</td> </tr> <tr> <td>summary</td> <td style="text-align:center">定义details元素的标题</td> </tr> </tbody> </table> <ul> <li>使用表格的HTML布局 <ul> <li><p><table>元素不是作为布局工具而设计的，<table>元素的作用是显示表格化的数据，使用<table>元素能够取得布局效果，因为能够通过CSS设置表格元素的样式。</p></li> <li><p>实例</p></li> </ul> </li> </ul> <pre><code> <html> <head> <style> table.lamp { width:100%; border:1px solid #d4d4d4; } table.lamp th, td { padding:10px; } table.lamp th { width:40px; } </style> </head> <body> <table class="lamp"> <tr> <th> <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"> </th> <td> The table element was not designed to be a layout tool. </td> </tr> </table> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 458px; max-height: 108px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/6ac39984e19d41d69f12a44dd208e28a.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/6ac39984e19d41d69f12a44dd208e28a.png" width="458" height="108" alt="web学习之html基础（一）_第49张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <h2>HTML 响应式Web设计</h2> <ul> <li> <p>什么是响应式Web设计？</p> <ul> <li>RWD指的是响应式Web设计（Responsive Web Design）</li> <li>RWD能够以可变尺寸传递网页</li> <li>RWD对于平板和移动设备是必需的</li> </ul> </li> <li><p>创建自己的响应式Web设计</p></li> </ul> <pre><code><html lang="en-US"> <head> <style> .city { float: left; margin: 5px; padding: 15px; width: 300px; height: 300px; border: 1px solid black; } </style> </head> <body> <h1>W3School Demo</h1> <h2>Resize this responsive page!</h2> <br> <div class="city"> <h2>London</h2> <p>London is the capital city of England.</p> <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="city"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </div> <div class="city"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 815px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/231025995dcf4fd4b613b94be6adbfe9.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/231025995dcf4fd4b613b94be6adbfe9.png" width="704" height="820" alt="web学习之html基础（一）_第50张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>使用Bootstrap <ul> <li>另一个创建响应式设计的方法，是使用现成的CSS框架。</li> <li>Bootstrap是最流行的开发响应式Web的HTML，CSS和JS框架。</li> <li>Bootstrap帮助你开发在任何尺寸都外观出众的站点，比如显示器、笔记本电脑、平板电脑或手机。</li> <li>实例</li> </ul> </li> </ul> <pre><code><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="jumbotron"> <h1>W3School Demo</h1> <p>Resize this responsive page!</p> </div> </div> <div class="container"> <div class="row"> <div class="col-md-4"> <h2>London</h2> <p>London is the capital city of England.</p> <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="col-md-4"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </div> <div class="col-md-4"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div> </div> </div> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 600px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/ae7ecaae40db4664bd49029167bae344.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/ae7ecaae40db4664bd49029167bae344.png" width="798" height="600" alt="web学习之html基础（一）_第51张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <h2>HTML框架</h2> <ul> <li>通过使用框架，可以在同一个浏览器窗口中显示不止一个页面，每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。</li> <li>使用框架的坏处： <ul> <li>开发人员必须同时跟踪更多的HTML文档</li> <li>很难打印整张页面</li> </ul> </li> </ul> <ul> <li> <p>框架结构标签（<frameset>）</p> <ul> <li>框架结构标签定义如何将窗口分割为框架</li> <li>每个frameset定义了一系列行或列</li> <li>rows/columns 的值规定了每行或每列占据屏幕的面积</li> <li>frameset标签也被某些文章和书籍译为框架集</li> </ul> </li> <li> <p>框架标签</p> <ul> <li>Frame 标签定义了放置在每个框架中的HTML文档</li> <li>在下面的这个例子中，我们设置了一个两列的框架集，第一列被设置为占据浏览器窗口的25%，第二列被设置为75%，HTML文档“frame_a.html”被置于第一列中，而HTML文档“frame_b.html”被置于第二个列中：</li> </ul> </li> </ul> <pre><code><frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset> </code></pre> <ul> <li>基本的注意事项 <ul> <li>假如一个框架有可见边框，用户可以拖动边框来改变它的大小，为了避免这种情况发生，可以在<frame>标签中加入：<br> noresize="noresize"</li> <li>为不支持框架的浏览器添加<noframes>标签。</li> <li>不能将<body></body>标签与<frameset></frameset>标签同时使用，不过，假如你添加包含一段文本的<noframes>标签，就必须将这段文字嵌套于<body></body>标签内。</li> </ul> </li> </ul> <h3>实例</h3> <ul> <li>示例一：垂直框架 <ul> <li>本例演示如何使用三份不同的文档制作一个垂直框架。</li> </ul> </li> </ul> <pre><code><html> <frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> </frameset> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 520px; max-height: 401px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/0d7fb17b7fea418098bb54843da50808.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/0d7fb17b7fea418098bb54843da50808.png" width="520" height="401" alt="web学习之html基础（一）_第52张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li> <p>示例二：水平框架</p> <ul> <li>本例演示如何使用三份不同的文档制作一个水平框架。</li> </ul> </li> </ul> <pre><code><html> <frameset rows="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> </frameset> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 514px; max-height: 402px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/bc4424ae9b8c4b11a06c8865b9226620.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/bc4424ae9b8c4b11a06c8865b9226620.png" width="514" height="402" alt="web学习之html基础（一）_第53张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <h2>HTML内联框架（Iframe）</h2> <ul> <li><p>用于在网页内显示网页。</p></li> <li><p>添加iframe的语法，URL指向隔离页面的位置。</p></li> </ul> <pre><code><iframe src="URL"></iframe> </code></pre> <ul> <li>Iframe-设置高度和宽度 <ul> <li>width和height属性用于规定 iframe的宽度和高度。属性值的默认单位是像素，但也可以用百分比来设定（比如"80%"）</li> <li>实例</li> </ul> </li> </ul> <pre><code><html> <body> <iframe src="/example/html/demo_iframe.html" width="200" height="200"></iframe> <p>某些老式的浏览器不支持内联框架。</p> <p>如果不支持，则 iframe 是不可见的。</p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 424px; max-height: 333px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/cb5be3bcc47d408bac3f95c2aa8d696e.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/cb5be3bcc47d408bac3f95c2aa8d696e.png" width="424" height="333" alt="web学习之html基础（一）_第54张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>Iframe-删除边框 <ul> <li>frameborder 属性规定是否显示iframe周围的边框。设置属性值为"0"就可以移除边框。</li> <li>实例</li> </ul> </li> </ul> <pre><code><html> <body> <iframe src="/example/html/demo_iframe.html" frameborder="0"></iframe> <p>某些老式的浏览器不支持内联框架。</p> <p>如果不支持，则 iframe 是不可见的。</p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 447px; max-height: 272px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/8f8ceb03bad3411f9cc2b20baf7c5196.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/8f8ceb03bad3411f9cc2b20baf7c5196.png" width="447" height="272" alt="web学习之html基础（一）_第55张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>使用 iframe 作为链接的目标 <ul> <li>iframe可用作链接的目标（target）</li> <li>链接的 target 属性必须引用 iframe 的 name 属性。</li> <li>实例</li> </ul> </li> </ul> <pre><code><html> <body> <iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe> <p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p> <p><b>注释：</b>由于链接的目标匹配 iframe 的名称，所以链接会在 iframe 中打开。</p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 421px; max-height: 266px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/f59dfe282c07450fadc2ab87d315a58a.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/f59dfe282c07450fadc2ab87d315a58a.png" width="421" height="266" alt="web学习之html基础（一）_第56张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <h3>HTML iframe 标签</h3> <table> <thead> <tr> <th>标签</th> <th style="text-align:center">描述</th> </tr> </thead> <tbody> <tr> <td><iframe></td> <td style="text-align:center">定义内联的子窗口（框架）</td> </tr> </tbody> </table> <h2>HTML背景</h2> <ul> <li><body>拥有两个配置背景的标签，背景可以是颜色或者图像。</li> <li>背景颜色（Bgcolor），背景颜色属性将背景设置为某种颜色，属性值可以是十六进制数、RGB值或颜色名。</li> </ul> <pre><code><body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black"> </code></pre> <ul> <li>背景（Background），背景属性将背景设置为图像，属性值为图像的URL，如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。URL可以是相对地址，如第一行代码，也可以是绝对路径，如第二行代码。</li> </ul> <pre><code><body background="clouds.gif"> <body background="http://www.w3school.com.cn/clouds.gif"> </code></pre> <ul> <li>提示：如果你打算使用背景图片，你需要紧记一下以下几点： <ul> <li>背景图像是否增加了页面的加载时间，（图像不应超过10k）。</li> <li>背景图像是否与页面中的其他图像搭配良好。</li> <li>背景图像是否与页面中的文字颜色搭配良好。</li> <li>图像在页面中平铺后，看上去还可以吗？</li> <li>对文字的注意力被背景图像喧宾夺主了吗？</li> </ul> </li> <li>基本的注意事项： <ul> <li><body>标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML标准（HTML4和XHTML）中已被废弃，W3C在他们的推荐标准中已删除这些属性。</li> <li>应该使用层叠样式表（CSS）来定义HTML元素的布局和显示属性。</li> </ul> </li> </ul> <h3>实例</h3> <ul> <li>示例一：搭配良好的背景和颜色 <ul> <li>一个背景颜色和文字颜色搭配良好的例子，使页面中的文字易于阅读。</li> </ul> </li> </ul> <pre><code><html> <body bgcolor="#d0d0d0"> <p> 这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。 </p> <p> 这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。 </p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 456px; max-height: 340px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/0b002a4b25b04ab7adc9991c35255f3f.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/0b002a4b25b04ab7adc9991c35255f3f.png" width="456" height="340" alt="web学习之html基础（一）_第57张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>示例二：搭配得不好的背景和颜色 <ul> <li>一个背景颜色和文字颜色搭配得不好的例子，使页面中的文字难于阅读。</li> </ul> </li> </ul> <pre><code>html> <body bgcolor="#ffffff" text="yellow"> <p> 这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。 </p> <p> 这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。 </p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 459px; max-height: 197px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/53c20903bb1f48ee8fb05682b77122a5.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/53c20903bb1f48ee8fb05682b77122a5.png" width="459" height="197" alt="web学习之html基础（一）_第58张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <h2>HTML脚本</h2> <ul> <li><p>JavaScript使HTML页面具有更强的动态和交互性。</p></li> <li> <p>HTML script 元素</p> <ul> <li><script>标签用于定义客户端脚本，比如JavaScript。</li> <li>script元素既可包含脚本语句，也可以通过src 属性指向外部脚本文件。</li> <li>必需的 type 属性规定脚本的 MIME 类型。</li> <li>JavaScript最常用于图片操作、表单验证以及内容动态更新。</li> <li>下面的脚本会向浏览器输出"Hello World !"</li> </ul> </li> </ul> <pre><code><script type="text/javascript"> document.write("Hello World!") </script> </code></pre> <ul> <li> <p><noscript>标签</p> <ul> <li><noscript>标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。</li> <li>noscript元素可包含普通 HTML 页面的body元素中能够找到的所有元素。</li> <li>只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript元素的内容：</li> </ul> </li> </ul> <pre><code><script type="text/javascript"> document.write("Hello World!") </script> <noscript>Your browser does not support JavaScript!</noscript> </code></pre> <ul> <li>如何应付老式的浏览器 <ul> <li>如果浏览器压根没法识别<script>标签，那么<script>标签所包含的内容将以文本方式显示在页面上，为了避免这种情况发生，你应该将脚本隐藏在注释标签当中，那些老的浏览器（无法识别<script>标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上，而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。</li> <li>实例 <ul> <li>JavaScript</li> </ul> </li> </ul> </li> </ul> <pre><code><script type="text/javascript"> <!-- document.write("Hello World!") //--> </script> </code></pre> <ul> <li> <ul> <li> <ul> <li>VBScript</li> </ul></li> </ul></li> </ul> <pre><code><script type="text/vbscript"> <!-- document.write("Hello World!") '--> </script> </code></pre> <table> <thead> <tr> <th>标签</th> <th style="text-align:center">描述</th> </tr> </thead> <tbody> <tr> <td><script></td> <td style="text-align:center">定义客户端脚本</td> </tr> <tr> <td><noscript></td> <td style="text-align:center">为不支持客户端脚本的浏览器定义替代内容</td> </tr> </tbody> </table> <h2>HTML头部元素</h2> <ul> <li> <p>HTML <head> 元素</p> <ul> <li><head>元素是所有头部元素的容器，<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息等等。</li> <li>以下标签都可以添加到<head>部分：<title>、<base>、<link>、<meta>、<script>以及<style>。</li> </ul> </li> <li> <p>HTML<title>元素</p> <ul> <li><p><title>标签定义文档的标题</p></li> <li><p>title元素在所有HTML/XHTML文档中都是必需的。</p></li> <li> <p>title 元素能够：</p> <ul> <li>定义浏览器工具栏中的标题</li> <li>提供页面被添加到收藏夹时显示的标题</li> <li>显示在搜索引擎结果中的页面标题</li> </ul> </li> <li><p>一个的简化的HTML文档如下所示：</p></li> </ul> </li> </ul> <pre><code><html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 436px; max-height: 78px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/571eef95b9ee45cea824e9a1b421f3f9.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/571eef95b9ee45cea824e9a1b421f3f9.png" width="436" height="78"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>HTML <base> 元素 <ul> <li><base>标签为页面上的所有链接规定默认地址或默认目标（target）。</li> </ul> </li> </ul> <pre><code><head> <base href="http://www.w3school.com.cn/images/" /> <base target="_blank" /> </head> </code></pre> <ul> <li>HTML <link>元素 <ul> <li><link>标签定义文档与外部资源之间的关系。</li> <li><link>标签最常用于链接样式表：</li> </ul> </li> </ul> <pre><code><head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> </code></pre> <ul> <li>HTML <style>元素 <ul> <li><style>标签用于为HTML文档定义样式信息。</li> <li>你可以在style元素内规定 HTML元素在浏览器中呈现的样式</li> </ul> </li> </ul> <pre><code><head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 437px; max-height: 162px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/d5b335d7a4cb424e8285c8745c49d88b.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/d5b335d7a4cb424e8285c8745c49d88b.png" width="437" height="162" alt="web学习之html基础（一）_第59张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li> <p>HTML <meta>元素</p> <ul> <li><p>元数据（metadata）是关于数据的信息。</p></li> <li><p><meta>标签提供关于HTML文档的元数据，元数据不会显示在页面上，但是对于机器是可读的，典型的情况是，meta元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。<meta>标签始终位于head 元素中，元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。</p></li> </ul> </li> <li> <p>针对搜索引擎的关键词</p> <ul> <li>一些搜索引擎会利用meta元素的name和content属性来索引你的页面，name 和 content 属性的作用是描述页面的内容。</li> <li>下面的 meta 元素定义页面的描述：</li> </ul> </li> </ul> <pre><code><meta name="description" content="Free Web tutorials on HTML, CSS, XML" /> </code></pre> <ul> <li> <ul> <li>下面的meta元素定义页面的关键词：</li> </ul></li> </ul> <pre><code><meta name="keywords" content="HTML, CSS, XML" /> </code></pre> <ul> <li> <p>HTML<script>元素</p> <ul> <li><script>标签用于定义客户端脚本，比如JavaScript。</li> </ul> </li> <li><p>HTML头部元素</p></li> </ul> <table> <thead> <tr> <th>标签</th> <th style="text-align:center">描述</th> </tr> </thead> <tbody> <tr> <td><head></td> <td style="text-align:center">定义关于文档的信息</td> </tr> <tr> <td><title></td> <td style="text-align:center">定义文档标题</td> </tr> <tr> <td><base></td> <td style="text-align:center">定义页面上所有链接的默认地址或默认目标</td> </tr> <tr> <td><link></td> <td style="text-align:center">定义文档与外部资源之间的关系</td> </tr> <tr> <td><meta></td> <td style="text-align:center">定义关于HTML文档的元数据</td> </tr> <tr> <td><script></td> <td style="text-align:center">定义客户端脚本</td> </tr> <tr> <td><style></td> <td style="text-align:center">定义文档的样式信息</td> </tr> </tbody> </table> <h2>HTML字符实体</h2> <ul> <li>HTML中预留的字符必须被替换为字符实体。</li> <li>HTML实体 <ul> <li><p>在HTML中，某些字符是预留的。</p></li> <li><p>在HTML中不能使用小号（<）和（>），这是因为浏览器会误认为它们是标签。</p></li> <li><p>如果希望正确地显示预留字符，我们必须在HTML源代码中使用字符实体（character entities）。</p></li> <li><p>如需显示小于号，我们必须这样写：<code><</code>或 <code><</code></p></li> <li><p>使用实体名而不是数字的好处是，名称易于记忆，不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。</p></li> <li><p>字符实体类似这样：</p></li> </ul> </li> </ul> <pre><code>&entity_name; 或者 &#entity_number; </code></pre> <ul> <li>不间断空格（non-breaking space） <ul> <li>HTML中常用字符实体是不间断空格（<code> </code>）。</li> <li>浏览器总是会截短HTML 页面上的空格，如果你在文本中写10个空格，在显示该页面之前，浏览器会删除它们中的9个，如需在页面中增加空格的数量，你需要使用 <code> </code> 字符实体。</li> </ul> </li> </ul> <h3>HTML 中有用的字符实体（实体名称对大小写敏感！）</h3> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 510px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/957d76dabe754a0d891323f82bb63789.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/957d76dabe754a0d891323f82bb63789.png" width="810" height="510" alt="web学习之html基础（一）_第60张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <h2>HTML统一资源定位器</h2> <ul> <li><p>URL也被称为网址。</p></li> <li><p>URL可以由单词组成，比如"w3school.com.cn"，或者因特网协议（IP）地址：192.168.1.253。大多数人在网上冲浪时，会输入网址的域名，因为名称比数字容易记忆。</p></li> <li> <p>URL-Unifrom Resource Locator</p> <ul> <li>当你点击HTML 页面中的某个链接时，对应的<a>标签指向万维网上的一个地址。</li> <li>统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。</li> <li>网址，比如 http://www.w3school.com.cn/html/index.asp，遵守以下的语法规则：</li> </ul> </li> </ul> <pre><code>scheme://host.domain:port/path/filename </code></pre> <ul> <li> <ul> <li>解释： <ul> <li>scheme：定义因特网服务的类型，最常见的类型是http</li> <li>host：定义域主机（http 的默认主机是www）</li> <li>domain：定义因特网域名，比如w3school.com.cn</li> <li>: port：定义主机上的端口号（http的默认端口号是80）</li> <li>path：定义服务器上的路径（如果设省略，则文档必须位于网站的根目录中）</li> <li>filename：定义文档/资源的名称</li> </ul> </li> </ul></li> <li><p>URL Schemes</p></li> </ul> <table> <thead> <tr> <th>Scheme</th> <th style="text-align:center">访问</th> <th style="text-align:center">用于...</th> </tr> </thead> <tbody> <tr> <td>http</td> <td style="text-align:center">超文本传输协议</td> <td style="text-align:center">以http://开头的普通网页，不加密</td> </tr> <tr> <td>https</td> <td style="text-align:center">安全超文本传输协议</td> <td style="text-align:center">安全网页，加密所有信息交换</td> </tr> <tr> <td>ftp</td> <td style="text-align:center">文件传输协议</td> <td style="text-align:center">用于将文件下载或上传至网站</td> </tr> <tr> <td>file</td> <td style="text-align:center"></td> <td style="text-align:center">你计算机上的文件</td> </tr> </tbody> </table> <h2>HTML URL 字符编码</h2> <ul> <li><p>URL 编码会将字符转换为可通过因特网传输的格式。</p></li> <li> <p>URL-统一资源定位器</p> <ul> <li>Web浏览器通过URL从Web 服务器请求页面。</li> <li>URL是网页的地址，比如http://www.w3school.com.cn。</li> </ul> </li> <li> <p>URL 编码</p> <ul> <li><p>URL只能使用ASCII字符集来通过因特网进行发送。</p></li> <li><p>由于URL常常会包含ASCII集合之外的字符，URL必须转换为有效的ASCII格式</p></li> <li><p>URL编码使用"%"其后跟随两位的十六进制数来替换非ASCII字符</p></li> <li><p>URL不能包含空格，URL编码通常使用"+"来替换空格。</p></li> </ul> </li> </ul> <h3>URL编码示例</h3> <table> <thead> <tr> <th>字符</th> <th style="text-align:center">URL编码</th> </tr> </thead> <tbody> <tr> <td>€</td> <td style="text-align:center">%80</td> </tr> <tr> <td>£</td> <td style="text-align:center">%A3</td> </tr> <tr> <td>©</td> <td style="text-align:center">%A9</td> </tr> <tr> <td>®</td> <td style="text-align:center">%AE</td> </tr> <tr> <td>À</td> <td style="text-align:center">%C0</td> </tr> <tr> <td>Á</td> <td style="text-align:center">%C1</td> </tr> <tr> <td>Â</td> <td style="text-align:center">%C2</td> </tr> <tr> <td>Ã</td> <td style="text-align:center">%C3</td> </tr> <tr> <td>Ä</td> <td style="text-align:center">%C4</td> </tr> <tr> <td>Å</td> <td style="text-align:center">%C5</td> </tr> </tbody> </table> <h2>HTML Web Server</h2> <ul> <li><p>如果希望向世界发布你的网站，那么你必须把它存放在Web服务器上。</p></li> <li> <p>托管自己的网站</p> <ul> <li>在自己的服务器上托管网站始终是一个选项，有几点需要考虑： <ul> <li> <p>硬件支出</p> <ul> <li>如果要运行“真正”的网站，您不得不购买强大的服务器硬件。不要指望低价的 PC 能够应付这些工作。您还需要稳定的（一天 24 小时）高速连接。</li> </ul> </li> <li> <p>软件支出</p> <ul> <li>请记住，服务器授权通常比客户端授权更昂贵。同时请注意，服务器授权也许有用户数量限制。</li> </ul> </li> <li> <p>人工费</p> <ul> <li>不要指望低廉的人工费用。你必须安装自己的硬件和软件。你同时要处理漏洞和病毒，以确保你的服务器时刻正常地运行于一个“任何事都可能发生”的环境中。</li> </ul> </li> </ul> </li> </ul> </li> <li> <p>使用因特网服务提供商（ISP）</p> <ul> <li>从 ISP 租用服务器也很常见，大多数小公司会把网站存放到由 ISP 提供的服务器上。其优势有以下几点： <ul> <li>连接速度 <ul> <li>大多数 ISP 都拥有连接因特网的高速连接。</li> </ul> </li> <li>强大的硬件 <ul> <li>ISP 的 web 服务器通常强大到能够由若干网站分享资源。你还要看一下 ISP 是否提供高效的负载平衡，以及必要的备份服务器。</li> </ul> </li> <li>安全性和可靠性 <ul> <li>ISP 是网站托管方面的专家。他们应该提供 99% 以上的在线时间，最新的软件补丁，以及最好的病毒防护。</li> </ul> </li> </ul> </li> </ul> </li> <li> <p>选择ISP时的注意事项：</p> <ul> <li> <p>24小时支持</p> <ul> <li>确保 ISP 提供 24 小时支持。不要使自己置于无法解决严重问题的尴尬境地，同时还必须等待第二个工作日。如果你不希望支付长途电话费，那么免费电话服务也是必要的。</li> </ul> </li> <li> <p>每日备份</p> <ul> <li>确保 ISP 会执行每日备份的例行工作，否则你有可能损失有价值的数据。</li> </ul> </li> <li> <p>流量</p> <ul> <li>研究一下 ISP 的流量限制。如果出现由于网站受欢迎而激增的不可预期的访问量，那么你要确保不会因此支付额外费用。</li> </ul> </li> <li> <p>带宽或内容限制</p> <ul> <li>研究一下 ISP 的带宽和内容限制。如果你计划发布图片或播出视频或音频，请确保你有此权限。</li> </ul> </li> <li> <p>E-mail 功能</p> <ul> <li>请确保 ISP 支持你需要的 e-mail 功能。</li> </ul> </li> <li> <p>数据库访问</p> <ul> <li>如果你计划使用网站数据库中的数据，那么请确保你的 ISP 支持您需要的数据库访问。</li> </ul> </li> <li><p>在您选取一家 ISP 之前，请务必阅读 W3School 的 Web 主机教程。</p></li> </ul> </li> </ul> <h2>HTML颜色</h2> <ul> <li><p>大多数的浏览器都支持颜色名集合</p></li> <li><p>提示：仅仅有16种颜色名被W3C的HTML4.0标准所支持。它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。</p></li> <li> <p>如果需要使用其它的颜色，需要使用十六进制的颜色值。</p> <br> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 239px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/73371ffb770a46c898c7ff49a85e4231.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/73371ffb770a46c898c7ff49a85e4231.png" width="811" height="239" alt="web学习之html基础（一）_第61张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> </li> <li> <p>Web安全色</p> <ul> <li>数年以前，当大多数计算机仅支持256种颜色的时候，一系列216种Web标准被建议使用，其中的原因是，微软和Mac操作系统使用了40种不同的保留的固定系统颜色（双方大约各使用20种）。</li> </ul> </li> <li> <p>216跨平台色</p> <ul> <li> <p>最初，216跨平台Web安全色被用来确保：当计算机使用256色调板时，所有的计算机能够正确地显示所有的颜色。</p> <br> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 684px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/9304a5a4fe8641b39b313310ddf358bd.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/9304a5a4fe8641b39b313310ddf358bd.png" width="806" height="684" alt="web学习之html基础（一）_第62张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> </li> </ul> </li> </ul> <h2>HTML颜色名</h2> <ul> <li>颜色列表 <ul> <li> <p>单击一个颜色名或者16进制值，就可以查看与不同文字颜色搭配的背景颜色。</p> <br> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 3737px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/2c886195d1d44ceaa1b85f83b51c8669.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/2c886195d1d44ceaa1b85f83b51c8669.png" width="809" height="4319" alt="web学习之html基础（一）_第63张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> </li> </ul> </li> </ul> <h2>HTML<!DOCTYPE></h2> <ul> <li><!DOCTYPE>声明 <ul> <li><!DOCTYPE>声明帮助浏览器正确地显示网页。</li> <li>Web世界中存在许多不同的文档，只有了解文档的类型，浏览器才能正确地显示文档。</li> <li>HTML也有多个不同的版本，只有完全明白页面中使用的确切HTML版本，浏览器才能完全正确地显示出HTML页面，这就是<!DOCTYPE>的用处。</li> <li><!DOCTYPE>不是HTML标签，它为浏览器提供一项信息（声明），即HTML是用什么版本编写的。</li> <li>实例</li> </ul> </li> </ul> <pre><code><!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 457px; max-height: 77px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/b48adecfe65c4a169fbda6205d61c87f.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/b48adecfe65c4a169fbda6205d61c87f.png" width="457" height="77"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li> <p>HTML版本</p> <ul> <li> <p>从Web诞生早期至今，已经发展出多个HTML版本。</p> <br> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 271px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/8d273468f7c340ba9decae84699e9b14.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/8d273468f7c340ba9decae84699e9b14.png" width="811" height="271" alt="web学习之html基础（一）_第64张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> </li> </ul> </li> <li> <p>常用的声明</p> <ul> <li>HTML5</li> </ul> </li> </ul> <pre><code><!DOCTYPE html> </code></pre> <ul> <li> <ul> <li>HTML4.01</li> </ul></li> </ul> <pre><code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> </code></pre> <ul> <li> <ul> <li>XHTML 1.0</li> </ul></li> </ul> <pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </code></pre> <h2>HTML 4.01快速参考</h2> <ul> <li><p>来自W3School的HTML快速参考，可以打印它，以备日常使用。</p></li> <li><p>HTML Basic Document</p></li> </ul> <pre><code><html> <head> <title>Document name goes here</title> </head> <body> Visible text goes here </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 336px; max-height: 70px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/a8b0b4596e5043f58ea211a095e41992.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/a8b0b4596e5043f58ea211a095e41992.png" width="336" height="70"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>Text Elements</li> </ul> <pre><code><p>This is a paragraph</p> <br> (line break) <hr> (horizontal rule) <pre>This text is preformatted</pre> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 467px; max-height: 182px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/ede1641921b24e87ab41093000f2f8b6.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/ede1641921b24e87ab41093000f2f8b6.png" width="467" height="182" alt="web学习之html基础（一）_第65张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>Physical Styles</li> </ul> <pre><code><b>This text is bold</b> <i>This text is italic</i> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 345px; max-height: 64px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/9002d6694c79416784f0b633eea25419.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/9002d6694c79416784f0b633eea25419.png" width="345" height="64"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>Links, Anchors, and Image Elements</li> </ul> <pre><code><a href="http://www.example.com/">This is a Link</a> <a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a> <a href="mailto:webmaster@example.com">Send e-mail</a>A named anchor: <a name="tips">Useful Tips Section</a> <a href="#tips">Jump to the Useful Tips Section</a> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 465px; max-height: 95px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/87b64e915a294523b13f2df6d53bd331.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/87b64e915a294523b13f2df6d53bd331.png" width="465" height="95"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>Unordered list</li> </ul> <pre><code><ul> <li>First item</li> <li>Next item</li> </ul> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 410px; max-height: 71px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/a1cd757aab34465aa7406876fb0d29b3.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/a1cd757aab34465aa7406876fb0d29b3.png" width="410" height="71"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>Ordered list</li> </ul> <pre><code><ol> <li>First item</li> <li>Next item</li> </ol> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 366px; max-height: 80px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/12317e6412f74f5eb5b0c32def8daf40.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/12317e6412f74f5eb5b0c32def8daf40.png" width="366" height="80"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>Definition list</li> </ul> <pre><code><dl> <dt>First term</dt> <dd>Definition</dd> <dt>Next term</dt> <dd>Definition</dd> </dl> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 368px; max-height: 116px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/14156081fd784f7c8d6909285ff6d1d3.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/14156081fd784f7c8d6909285ff6d1d3.png" width="368" height="116" alt="web学习之html基础（一）_第66张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>Tables</li> </ul> <pre><code>border="1"> <tr> <th>someheader</th> <th>someheader</th> </tr> <tr> <td>sometext</td> <td>sometext</td> </tr> </table> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 377px; max-height: 124px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/be4f9a47430a43db8d94cbff938a75a3.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/be4f9a47430a43db8d94cbff938a75a3.png" width="377" height="124" alt="web学习之html基础（一）_第67张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>Frames</li> </ul> <pre><code><frameset cols="25%,75%"> <frame src="page1.htm"> <frame src="page2.htm"> </frameset> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 468px; max-height: 403px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/97feb29f88d94fac827395e7c2a14062.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/97feb29f88d94fac827395e7c2a14062.png" width="468" height="403" alt="web学习之html基础（一）_第68张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>Forms</li> </ul> <pre><code><form action="http://www.example.com/test.asp" method="post/get"> <input type="text" name="lastname" value="Nixon" size="30" maxlength="50"> <input type="password"> <input type="checkbox" checked="checked"> <input type="radio" checked="checked"> <input type="submit"> <input type="reset"> <input type="hidden"> <select> <option>Apples <option selected>Bananas <option>Cherries </select> <textarea name="Comment" rows="60" cols="20"></textarea> </form> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 686px; max-height: 398px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/ff3b01b34d4e48c0adbfcd4fbdfbd455.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/ff3b01b34d4e48c0adbfcd4fbdfbd455.jpg" width="650" height="377" alt="web学习之html基础（一）_第69张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>Entities</li> </ul> <pre><code> the same as < > is the same as > © is the same as © </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 426px; max-height: 59px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/765a8b3a235a4bed823a98bea482cf1f.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/765a8b3a235a4bed823a98bea482cf1f.png" width="426" height="59"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>Other Elements</li> </ul> <pre><code><!-- This is a comment --> <blockquote> Text quoted from some source. </blockquote> <address> Address 1<br> Address 2<br> City<br> </address> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 377px; max-height: 116px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/b4af82bec4824cedb644f2c14c02eed0.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/b4af82bec4824cedb644f2c14c02eed0.png" width="377" height="116" alt="web学习之html基础（一）_第70张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <h2>HTML表单</h2> <ul> <li>HTML表单用于搜集不同类型的用户输入。</li> <li><from>元素 <ul> <li>HTML表单用于收集用户输入。</li> <li><from>元素定义HTML 表单。</li> <li>实例</li> </ul> </li> </ul> <pre><code><form> . form elements . </form> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 320px; max-height: 78px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/c2d67c5275844c5da476320bf090e376.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/c2d67c5275844c5da476320bf090e376.png" width="320" height="78"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>HTML 表单包含表单元素 <ul> <li><p>表单元素指的是不同类型的input元素、复选框、单选按钮、提交按钮等等。</p></li> <li> <p><input>元素</p> <ul> <li><input>元素是最重要的表单元素。</li> <li><input>元素有很多形态，根据不同的type属性。</li> <li>这是本章中使用的类型：</li> </ul> </li> </ul> </li> </ul> <table> <thead> <tr> <th>字符</th> <th style="text-align:center">URL编码</th> </tr> </thead> <tbody> <tr> <td>text</td> <td style="text-align:center">定义常规文本输入</td> </tr> <tr> <td>radio</td> <td style="text-align:center">定义单选按钮输入（选择多个选择之一）</td> </tr> <tr> <td>submit</td> <td style="text-align:center">定义提交按钮（提交表单）</td> </tr> </tbody> </table> <ul> <li>文本输入 <ul> <li><p><input type="text">定义用于文本输入的单行输入字段。</p></li> <li><p>实例</p></li> </ul> </li> </ul> <pre><code><!DOCTYPE html> <html> <body> <form> First name:<br> <input type="text" name="firstname"> <br> Last name:<br> <input type="text" name="lastname"> </form> <p>请注意表单本身是不可见的。</p> <p>同时请注意文本字段的默认宽度是 20 个字符。</p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 447px; max-height: 185px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/e151c853591e4d868140614b919dba6a.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/e151c853591e4d868140614b919dba6a.png" width="447" height="185" alt="web学习之html基础（一）_第71张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>单选按钮输入 <ul> <li><input type="radio">定义单选按钮</li> <li>单选按钮允许用户在有限的数量的选项中选择其中之一。</li> <li>实例</li> </ul> </li> </ul> <pre><code><!DOCTYPE html> <html> <body> <form> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </form> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 367px; max-height: 110px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/1efa432066c842fe911068e988b04bbc.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/1efa432066c842fe911068e988b04bbc.png" width="367" height="110" alt="web学习之html基础（一）_第72张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>提交按钮 <ul> <li><input type="submit">定义用于向表单处理程序（form-handler）提交表单的按钮。</li> <li>表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。</li> <li>表单处理程序在表单的action属性中指定：</li> <li>实例</li> </ul> </li> </ul> <pre><code> <!DOCTYPE html> <html> <body> <form action="/demo/demo_form.asp"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form> <p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 463px; max-height: 213px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/c074ac33c61d4f9fb82b05a223750013.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/c074ac33c61d4f9fb82b05a223750013.png" width="463" height="213" alt="web学习之html基础（一）_第73张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>Action属性 <ul> <li>Action属性定义在提交表单时执行的动作，向服务器提交表单的通常做法是使用提交按钮，通常，表单会被提交到Web服务器上的网页，在上面的例子中，指定了某个服务器脚本来处理被提交表单，如果省略action属性，则action会被设置为当前页面。</li> </ul> </li> </ul> <pre><code><form action="action_page.php"> </code></pre> <ul> <li> <p>Method属性</p> <ul> <li>method属性规定在提交表单时所用的 HTTP方法（GET或POST）：</li> </ul> </li> </ul> <pre><code><form action="action_page.php" method="GET"> </code></pre> <p>或</p> <pre><code><form action="action_page.php" method="POST"> </code></pre> <ul> <li>何时使用GET？ <ul> <li>如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息，当你使用GET时，表单数据在页面地址中是可见的。GET最适合少量的数据提交，浏览器会设定容量限制。</li> </ul> </li> </ul> <pre><code>action_page.php?firstname=Mickey&lastname=Mouse </code></pre> <ul> <li> <p>何时使用POST？</p> <ul> <li>如果表单正在更新数据，或者包含敏感信息（例如密码），POST的安全性更佳，因为在页面地址栏中被提交的数据是不可见的。</li> </ul> </li> <li> <p>Name属性</p> <ul> <li>如果要正确地被提交，每个输入字段必须设置一个name属性，本例只会提交"Last name"输入的字段：</li> </ul> </li> </ul> <pre><code><!DOCTYPE html> <html> <body> <form action="/demo/demo_form.asp"> First name:<br> <input type="text" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form> <p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p> <p>first name 不会被提交，因为此 input 元素没有 name 属性。</p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 455px; max-height: 263px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/28e76d2a57b04eb294923c69333a5c13.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/28e76d2a57b04eb294923c69333a5c13.png" width="455" height="263" alt="web学习之html基础（一）_第74张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>用<fieldset>组合表单数据 <ul> <li><fieldset>元素组合表单中的相关数据</li> <li><legend>元素为<fieldset>元素定义标题</li> <li>实例</li> </ul> </li> </ul> <pre><code><!DOCTYPE html> <html> <body> <form action="/demo/demo_form.asp"> <fieldset> <legend>Personal information:</legend> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </fieldset> </form> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 459px; max-height: 197px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/80a4ed9f033e474d891d251acee2afaf.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/80a4ed9f033e474d891d251acee2afaf.png" width="459" height="197" alt="web学习之html基础（一）_第75张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>HTML Form 属性 <ul> <li>HTML<form>元素，已设置所有可能的属性，是这样的：</li> <li>实例</li> </ul> </li> </ul> <pre><code><form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8" ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate> . form elements . </form> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 341px; max-height: 77px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/f7754af23ba34a6eb10f445ee884ebf7.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/f7754af23ba34a6eb10f445ee884ebf7.png" width="341" height="77"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li>下面是<form>属性的列表</li> </ul> <table> <thead> <tr> <th>属性</th> <th style="text-align:center">描述</th> </tr> </thead> <tbody> <tr> <td>accept-charset</td> <td style="text-align:center">规定在被提交表单中使用的字符集（默认：页面字符集）。</td> </tr> <tr> <td>action</td> <td style="text-align:center">规定向何处提交表单的地址（URL）（提交页面）。</td> </tr> <tr> <td>autocomplete</td> <td style="text-align:center">规定浏览器应该自动完成表单（默认：开启）。</td> </tr> <tr> <td>enctype</td> <td style="text-align:center">规定被提交数据的编码（默认：url-encoded）。</td> </tr> <tr> <td>method</td> <td style="text-align:center">规定在提交表单时所用的 HTTP 方法（默认：GET）。</td> </tr> <tr> <td>name</td> <td style="text-align:center">规定识别表单的名称（对于 DOM 使用：document.forms.name）。</td> </tr> <tr> <td>novalidate</td> <td style="text-align:center">规定浏览器不验证表单。</td> </tr> <tr> <td>target</td> <td style="text-align:center">规定 action 属性中地址的目标（默认：_self）。</td> </tr> </tbody> </table> <h2>HTML 表单元素</h2> <ul> <li> <p><input>元素</p> <ul> <li>最重要的表单元素是<input>元素，<input>元素根据不同的type属性，可以变化为多种形态。</li> </ul> </li> <li> <p><select>元素（下拉列表）</p> <ul> <li><select>元素定义下拉列表。</li> <li>实例</li> </ul> </li> </ul> <pre><code><!DOCTYPE html> <html> <body> <form action="/demo/demo_form.asp"> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> <br><br> <input type="submit"> </form> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 394px; max-height: 130px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/74ee3b1cda2c4e3d8267d100018d8249.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/74ee3b1cda2c4e3d8267d100018d8249.png" width="394" height="130" alt="web学习之html基础（一）_第76张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li> <ul> <li><p><option>元素定义待选择的选项，列表通常会把首个选项显示为被选选项。你能够通过添加selected属性来定义预定义选项。</p></li> <li><p>实例</p></li> </ul></li> </ul> <pre><code><!DOCTYPE html> <html> <body> <p>您可以通过 selected 属性预选择某些选项。</p> <form action="/demo/demo_form.asp"> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected>Fiat</option> <option value="audi">Audi</option> </select> <br><br> <input type="submit"> </form> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 353px; max-height: 164px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/e495cc44a9a643279cab6c15b5d0b4c8.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/e495cc44a9a643279cab6c15b5d0b4c8.png" width="353" height="164" alt="web学习之html基础（一）_第77张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li> <p><textarea>元素</p> <ul> <li><textarea>元素定义多行输入字段（文本域）。<br> -实例</li> </ul> </li> </ul> <pre><code><html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> <p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 388px; max-height: 349px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/2256947dd702437e92bc8cd824c36282.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/2256947dd702437e92bc8cd824c36282.png" width="388" height="349" alt="web学习之html基础（一）_第78张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <ul> <li><button>元素 <ul> <li><button>元素定义可点击的按钮。</li> <li>实例</li> </ul> </li> </ul> <pre><code><!DOCTYPE html> <html> <body> <button type="button" onclick="alert('Hello World!')">点击我！</button> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 377px; max-height: 103px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/718c91da693543e2a6abbec689768641.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/718c91da693543e2a6abbec689768641.png" width="377" height="103" alt="web学习之html基础（一）_第79张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> </article> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1214039296437227520"></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">你可能感兴趣的:(web学习之html基础（一）)</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> <span class="text-muted">白心之岂必有为</span> <div>很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响</div> </li> <li><a href="/article/1835514464028422144.htm" title="情绪觉察日记第37天" target="_blank">情绪觉察日记第37天</a> <span class="text-muted">露露_e800</span> <div>今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得</div> </li> <li><a href="/article/1835514335561084928.htm" title="芦花鞋一四" target="_blank">芦花鞋一四</a> <span class="text-muted">许叶晗</span> <div>又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花</div> </li> <li><a href="/article/1835514307744460800.htm" title="QQ群采集助手，精准引流必备神器" target="_blank">QQ群采集助手，精准引流必备神器</a> <span class="text-muted">2401_87347160</span> <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/1835513803861749760.htm" title="机器学习与深度学习间关系与区别" target="_blank">机器学习与深度学习间关系与区别</a> <span class="text-muted">ℒℴѵℯ心·动ꦿ໊ོ꫞</span> <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> <span class="text-muted">随风至</span> <div>69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但</div> </li> <li><a href="/article/1835513570171908096.htm" title="底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说" target="_blank">底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说</a> <span class="text-muted">造命者说</span> <div>底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡</div> </li> <li><a href="/article/1835513571501502464.htm" title="2020-01-25" target="_blank">2020-01-25</a> <span class="text-muted">晴岚85</span> <div>郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什</div> </li> <li><a href="/article/1835513568917811200.htm" title="随笔 \| 仙一般的灵气" target="_blank">随笔 \| 仙一般的灵气</a> <span class="text-muted">海思沧海</span> <div>仙岛今天，我看了你全部，似乎已经进入你的世界我不知道，这是否是梦幻，还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求，这样才能够符合人生的梦想，生活才能够充满着阳光与快乐我不知道，我为什么会这样的感叹，是在感叹自己的人生，还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴，每天活在自己的梦中，活在一个不真实的世界是在逃避自己，还是在逃避周围的一切有时候我嘲笑自己，嘲笑自己如此的虚无，</div> </li> <li><a href="/article/1835513567663714304.htm" title="想家" target="_blank">想家</a> <span class="text-muted">爆米花机</span> <div>也许不同于大家对家乡的思念，我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福，我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女，我贪恋家的安逸。刚刚踏出大学校门，初出茅庐，无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气，是无法适应工作的节奏，是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志，选择再次踏上征程。图片发自App</div> </li> <li><a href="/article/1835513551624695808.htm" title="【iOS】MVC设计模式" target="_blank">【iOS】MVC设计模式</a> <span class="text-muted">Magnetic_h</span> <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> <span class="text-muted">Magnetic_h</span> <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> <span class="text-muted">巨木擎天</span> <div>唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也</div> </li> <li><a href="/article/1835513424734416896.htm" title="UI学习——cell的复用和自定义cell" target="_blank">UI学习——cell的复用和自定义cell</a> <span class="text-muted">Magnetic_h</span> <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> <span class="text-muted">软件技术NINI</span> <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> <span class="text-muted">Tracy的小书斋</span> <div>本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便</div> </li> <li><a href="/article/1835512542735200256.htm" title="C语言宏函数" target="_blank">C语言宏函数</a> <span class="text-muted">南林yan</span> <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> <span class="text-muted">校师学</span> <div>相信校长们在做地推的时候经常遇到这种情况：市场专员反馈家长不接单，咨询师反馈难以邀约这些家长上门，校区地推疲软，招生难。为什么？仅从地推层面分析，一方面因为家长受到的信息轰炸越来越多，对信息越来越“免疫”；而另一方面地推人员的专业能力和营销话术没有提高，无法应对家长的拒绝，对有意向的家长也不知如何跟进，眼睁睁看着家长走远；对于家长的疑问，更不知道如何有技巧地回答，机会白白流失。由于回答没技巧和专业</div> </li> <li><a href="/article/1835512178023690240.htm" title="谢谢你们，爱你们！" target="_blank">谢谢你们，爱你们！</a> <span class="text-muted">鹿游儿</span> <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> <span class="text-muted">小九格物</span> <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/1835511912843014144.htm" title="理解Gunicorn：Python WSGI服务器的基石" target="_blank">理解Gunicorn：Python WSGI服务器的基石</a> <span class="text-muted">范范0825</span> <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> <span class="text-muted">玲玲54321</span> <div>小丽发现，即使她好不容易调整好自己的心态下一秒总会有不确定的伤脑筋的事出现，一个接一个的问题，人生就没有停下的时候，小问题不断出现。不过她今天看的书，她接受了人生就是不确定的，厉害的人就是不断创造确定性，在Ta的领域比别人多的确定性就能让自己脱颖而出，显示价值从而获得的比别人多的利益。正是这样的原因，因为从前修炼自己太少，使得她现在在人生道路上打怪起来困难重重，她似乎永远摆脱不了那种无力感，有种习</div> </li> <li><a href="/article/1835511542284644352.htm" title="学点心理知识，呵护孩子健康" target="_blank">学点心理知识，呵护孩子健康</a> <span class="text-muted">静候花开_7090</span> <div>昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果</div> </li> <li><a href="/article/1835511163450912768.htm" title="2021年12月19日，春蕾教育集团团建活动感受——黄晓丹" target="_blank">2021年12月19日，春蕾教育集团团建活动感受——黄晓丹</a> <span class="text-muted">黄错错加油</span> <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> <span class="text-muted">尐尐呅</span> <div>结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌（Mycobacteriumtuberculosis,Mtb）感染引起，获得性免疫缺陷综合症（艾滋病）由人免疫缺陷病毒（Humanimmunodeficiencyvirustype1,HIV-1）感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队，共同研究得出单细胞测序</div> </li> <li><a href="/article/1835510909070569472.htm" title="瑶池防线" target="_blank">瑶池防线</a> <span class="text-muted">谜影梦蝶</span> <div>冥华虽然逃过了影梦的军队，但他是一个忠臣，他选择上报战况。败给影梦后成逃兵，高层亡尔还活着，七重天失守......随便一条，即可处死冥华。冥华自然是知道以仙界高层的习性此信一发自己必死无疑，但他还选择上报实情，因为责任。同样此信送到仙宫后，知道此事的人，大多数人都认定冥华要完了，所以上到仙界高层，下到扫大街的，包括冥华自己，全都准备好迎接冥华之死。如果仙界现在还属于两方之争的话，冥华必死无疑。然而</div> </li> <li><a href="/article/1835510656011431936.htm" title="爬山后遗症" target="_blank">爬山后遗症</a> <span class="text-muted">璃绛</span> <div>爬山，攀登，一步一步走向制高点，是一种挑战。成功抵达是一种无法言语的快乐，在山顶吹吹风，看看风景，这是从未有过的体验。然而，爬山一时爽，下山腿打颤，颠簸的路，一路向下走，腿部力量不够，走起来抖到不行，停不下来了！第二天必定腿疼，浑身酸痛，坐立难安！</div> </li> <li><a href="/article/1835510025561403392.htm" title="《投行人生》读书笔记" target="_blank">《投行人生》读书笔记</a> <span class="text-muted">小蘑菇的树洞</span> <div>《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好</div> </li> <li><a href="/article/1835509898507546624.htm" title="《策划经理回忆录之二》" target="_blank">《策划经理回忆录之二》</a> <span class="text-muted">路基雅虎</span> <div>话说三年变六年，飘了，飘了……眨眼，2013年5月，老吴回到了他的家乡——油城从新开启他的工作幻想症生涯。很庆幸，这是一家很有追求，同时敢于尝试的，且实力不容低调的新星房企——金源置业(前身泰源置业)更值得庆幸的是第一个盘就是油城十路的标杆之一:金源盛世。2013年5月，到2015年11月，两年的陪伴，迎来了一场大爆发。2000个筹，5万/筹，直接回笼1个亿！！！这……让我开始认真审视这座看似五线</div> </li> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/31.htm" title="312个免费高速HTTP代理IP（能隐藏自己真实IP地址）" target="_blank">312个免费高速HTTP代理IP（能隐藏自己真实IP地址）</a> <span class="text-muted">yangshangchuan</span> <a class="tag" taget="_blank" href="/search/%E9%AB%98%E9%80%9F/1.htm">高速</a><a class="tag" taget="_blank" href="/search/%E5%85%8D%E8%B4%B9/1.htm">免费</a><a class="tag" taget="_blank" href="/search/superword/1.htm">superword</a><a class="tag" taget="_blank" href="/search/HTTP%E4%BB%A3%E7%90%86/1.htm">HTTP代理</a> <div>    124.88.67.20:843 190.36.223.93:8080 117.147.221.38:8123 122.228.92.103:3128 183.247.211.159:8123 124.88.67.35:81 112.18.51.167:8123 218.28.96.39:3128 49.94.160.198:3128 183.20</div> </li> <li><a href="/article/158.htm" title="pull解析和json编码" target="_blank">pull解析和json编码</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/pull%E8%A7%A3%E6%9E%90/1.htm">pull解析</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a> <div>n.json文件: [{name:java,lan:c++,age:17},{name:android,lan:java,age:8}]   pull.xml文件 <?xml version="1.0" encoding="utf-8"?> <stu>     <name>java</div> </li> <li><a href="/article/285.htm" title="[能源与矿产]石油与地球生态系统" target="_blank">[能源与矿产]石油与地球生态系统</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E8%83%BD%E6%BA%90/1.htm">能源</a> <div>       按照苏联的科学界的说法,石油并非是远古的生物残骸的演变产物,而是一种可以由某些特殊地质结构和物理条件生产出来的东西,也就是说,石油是可以自增长的....       那么我们做一个猜想: 石油好像是地球的体液,我们地球具有自动产生石油的某种机制,只要我们不过量开采石油,并保护好</div> </li> <li><a href="/article/412.htm" title="类与对象浅谈" target="_blank">类与对象浅谈</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%9F%BA%E7%A1%80/1.htm">基础</a> <div>        类，字面理解，便是同一种事物的总称，比如人类，是对世界上所有人的一个总称。而对象，便是类的具体化，实例化，是一个具体事物，比如张飞这个人，就是人类的一个对象。但要注意的是：张飞这个人是对象，而不是张飞，张飞只是他这个人的名字，是他的属性而已。而一个类中包含了属性和方法这两兄弟，他们分别用来描述对象的行为和性质（感觉应该是</div> </li> <li><a href="/article/539.htm" title="新站开始被收录后，我们应该做什么？" target="_blank">新站开始被收录后，我们应该做什么？</a> <span class="text-muted">IT独行者</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/seo/1.htm">seo</a> <div>新站开始被收录后，我们应该做什么？         百度终于开始收录自己的网站了，作为站长，你是不是觉得那一刻很有成就感呢，同时，你是不是又很茫然，不知道下一步该做什么了？至少我当初就是这样，在这里和大家一份分享一下新站收录后，我们要做哪些工作。       至于如何让百度快速收录自己的网站，可以参考我之前的帖子《新站让百</div> </li> <li><a href="/article/666.htm" title="oracle 连接碰到的问题" target="_blank">oracle 连接碰到的问题</a> <span class="text-muted">文强chu</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>Unable to find a java Virtual Machine－－安装64位版Oracle11gR2后无法启动SQLDeveloper的解决方案作者：草根IT网来源：未知人气：813标签：导读：安装64位版Oracle11gR2后发现启动SQLDeveloper时弹出配置java.exe的路径，找到Oracle自带java.exe后产生的路径“C:\app\用户名\prod</div> </li> <li><a href="/article/793.htm" title="Swing中按ctrl键同时移动鼠标拖动组件（类中多借口共享同一数据）" target="_blank">Swing中按ctrl键同时移动鼠标拖动组件（类中多借口共享同一数据）</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/%E7%BB%A7%E6%89%BF/1.htm">继承</a><a class="tag" taget="_blank" href="/search/swing/1.htm">swing</a><a class="tag" taget="_blank" href="/search/%E6%8E%A5%E5%8F%A3/1.htm">接口</a><a class="tag" taget="_blank" href="/search/%E7%9B%91%E5%90%AC/1.htm">监听</a> <div>        都知道java中类只能单继承，但可以实现多个接口，但我发现实现多个接口之后，多个接口却不能共享同一个数据，应用开发中想实现：当用户按着ctrl键时，可以用鼠标点击拖动组件，比如说文本框。编写一个监听实现KeyListener,NouseListener,MouseMotionListener三个接口，重写方法。定义一个全局变量boolea</div> </li> <li><a href="/article/920.htm" title="linux常用的命令" target="_blank">linux常用的命令</a> <span class="text-muted">aichenglong</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/1.htm">常用命令</a> <div>1 startx切换到图形化界面 2 man命令:查看帮助信息 man 需要查看的命令,man命令提供了大量的帮助信息,一般可以分成4个部分 name:对命令的简单说明 synopsis:命令的使用格式说明 description:命令的详细说明信息 options:命令的各项说明 3 date:显示时间语法：date [OPTION]... [+FORMAT] </div> </li> <li><a href="/article/1047.htm" title="eclipse内存优化" target="_blank">eclipse内存优化</a> <span class="text-muted">AILIKES</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a> <div>一基本说明      在JVM中，总体上分2块内存区,默认空余堆内存小于 40%时，JVM就会增大堆直到-Xmx的最大限制；空余堆内存大于70%时，JVM会减少堆直到-Xms的最小限制。     1)堆内存(Heap memory):堆是运行时数据区域，所有类实例和数组的内存均从此处分配,是Java代码可及的内存，是留给开发人</div> </li> <li><a href="/article/1174.htm" title="关键字的使用探讨" target="_blank">关键字的使用探讨</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E5%85%B3%E9%94%AE%E5%AD%97/1.htm">关键字</a> <div>//关键字的使用探讨/访问关键词private 只能在本类中访问public 只能在本工程中访问protected 只能在包中和子类中访问默认的只能在包中访问//final   类方法变量 final 类不能被继承 final 方法不能被子类覆盖，但可以继承 final 变量只能有一次赋值，赋值后不能改变 final 不能用来修饰构造方法///this()</div> </li> <li><a href="/article/1301.htm" title="JS中定义对象的几种方式" target="_blank">JS中定义对象的几种方式</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div>    1. 基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)： <html> <head> <title>基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)</title> </head> <script> var obj = new Object(); </div> </li> <li><a href="/article/1428.htm" title="表驱动法实例" target="_blank">表驱动法实例</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E9%A9%B1%E5%8A%A8%E6%B3%95/1.htm">表驱动法</a><a class="tag" taget="_blank" href="/search/TDD/1.htm">TDD</a> <div>获得月的天数是典型的直接访问驱动表方式的实例，下面我们来展示一下： MonthDaysTest.java package com.study.test; import org.junit.Assert; import org.junit.Test; import com.study.MonthDays; public class MonthDaysTest { @T</div> </li> <li><a href="/article/1555.htm" title="LInux启停重启常用服务器的脚本" target="_blank">LInux启停重启常用服务器的脚本</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>启动，停止和重启常用服务器的Bash脚本，对于每个服务器，需要根据实际的安装路径做相应的修改   #! /bin/bash Servers=(Apache2, Nginx, Resin, Tomcat, Couchbase, SVN, ActiveMQ, Mongo); Ops=(Start, Stop, Restart); currentDir=$(pwd); echo</div> </li> <li><a href="/article/1682.htm" title="【HBase六】REST操作HBase" target="_blank">【HBase六】REST操作HBase</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/hbase/1.htm">hbase</a> <div>HBase提供了REST风格的服务方便查看HBase集群的信息，以及执行增删改查操作   1. 启动和停止HBase REST 服务 1.1 启动REST服务前台启动（默认端口号8080） [hadoop@hadoop bin]$ ./hbase rest start   后台启动 hbase-daemon.sh start rest   启动时指定</div> </li> <li><a href="/article/1809.htm" title="大话zabbix 3.0设计假设" target="_blank">大话zabbix 3.0设计假设</a> <span class="text-muted">ronin47</span> <div>What’s new in Zabbix 2.0? 去年开始使用Zabbix的时候，是1.8.X的版本，今年Zabbix已经跨入了2.0的时代。看了2.0的release notes，和performance相关的有下面几个：          :: Performance improvements::Trigger related da</div> </li> <li><a href="/article/1936.htm" title="http错误码大全" target="_blank">http错误码大全</a> <span class="text-muted">byalias</span> <a class="tag" taget="_blank" href="/search/http%E5%8D%8F%E8%AE%AE/1.htm">http协议</a><a class="tag" taget="_blank" href="/search/javaweb/1.htm">javaweb</a> <div>响应码由三位十进制数字组成，它们出现在由HTTP服务器发送的响应的第一行。响应码分五种类型，由它们的第一位数字表示： 1）1xx：信息，请求收到，继续处理 2）2xx：成功，行为被成功地接受、理解和采纳 3）3xx：重定向，为了完成请求，必须进一步执行的动作 4）4xx：客户端错误，请求包含语法错误或者请求无法实现 5）5xx：服务器错误，服务器不能实现一种明显无效的请求 </div> </li> <li><a href="/article/2063.htm" title="J2EE设计模式-Intercepting Filter" target="_blank">J2EE设计模式-Intercepting Filter</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>Intercepting Filter类似于职责链模式有两种实现其中一种是Filter之间没有联系，全部Filter都存放在FilterChain中，由FilterChain来有序或无序地把把所有Filter调用一遍。没有用到链表这种数据结构。示例如下： package com.ljn.filter.custom; import java.util.ArrayList;</div> </li> <li><a href="/article/2190.htm" title="修改jboss端口" target="_blank">修改jboss端口</a> <span class="text-muted">chicony</span> <a class="tag" taget="_blank" href="/search/jboss/1.htm">jboss</a> <div>修改jboss端口   %JBOSS_HOME%\server\{服务实例名}\conf\bindingservice.beans\META-INF\bindings-jboss-beans.xml   中找到 <!-- The ports-default bindings are obtained by taking the base bindin</div> </li> <li><a href="/article/2317.htm" title="c++ 用类模版实现数组类" target="_blank">c++ 用类模版实现数组类</a> <span class="text-muted">CrazyMizzz</span> <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a> <div>最近c++学到数组类，写了代码将他实现，基本具有vector类的功能 #include<iostream> #include<string> #include<cassert> using namespace std; template<class T> class Array { public: //构造函数 </div> </li> <li><a href="/article/2444.htm" title="hadoop dfs.datanode.du.reserved 预留空间配置方法" target="_blank">hadoop dfs.datanode.du.reserved 预留空间配置方法</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/%E9%A2%84%E7%95%99%E7%A9%BA%E9%97%B4/1.htm">预留空间</a> <div>对于datanode配置预留空间的方法为：在hdfs-site.xml添加如下配置  <property>     <name>dfs.datanode.du.reserved</name>     <value>10737418240</value>   &nbsp</div> </li> <li><a href="/article/2571.htm" title="mysql远程访问的设置" target="_blank">mysql远程访问的设置</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E9%98%B2%E7%81%AB%E5%A2%99/1.htm">防火墙</a> <div>第一步: 激活网络设置你需要编辑mysql配置文件my.cnf. 通常状况，my.cnf放置于在以下目录： /etc/mysql/my.cnf (Debian linux) /etc/my.cnf （Red Hat Linux/Fedora Linux) /var/db/mysql/my.cnf (FreeBSD) 然后用vi编辑my.cnf，修改内容从以下行： [mysqld] 你所需要: 1</div> </li> <li><a href="/article/2698.htm" title="ios 使用特定的popToViewController返回到相应的Controller" target="_blank">ios 使用特定的popToViewController返回到相应的Controller</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/controller/1.htm">controller</a> <div>1、取navigationCtroller中的Controllers NSArray ctrlArray = self.navigationController.viewControllers; 2、取出后，执行， [self.navigationController popToViewController:[ctrlArray objectAtIndex:0] animated:YES</div> </li> <li><a href="/article/2825.htm" title="Linux正则表达式和通配符的区别" target="_blank">Linux正则表达式和通配符的区别</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a><a class="tag" taget="_blank" href="/search/%E9%80%9A%E9%85%8D%E7%AC%A6%E5%92%8C%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E7%9A%84%E5%8C%BA%E5%88%AB/1.htm">通配符和正则表达式的区别</a><a class="tag" taget="_blank" href="/search/%E9%80%9A%E9%85%8D%E7%AC%A6/1.htm">通配符</a> <div>转载请出自出处：http://eksliang.iteye.com/blog/1976579 首先得明白二者是截然不同的通配符只能用在shell命令中,用来处理字符串的的匹配。判断一个命令是否为bash shell(linux 默认的shell)的内置命令 type -t commad 返回结果含义 file  表示为外部命令 alias  表示该</div> </li> <li><a href="/article/2952.htm" title="Ubuntu Mysql Install and CONF" target="_blank">Ubuntu Mysql Install and CONF</a> <span class="text-muted">gengzg</span> <a class="tag" taget="_blank" href="/search/Install/1.htm">Install</a> <div>http://www.navicat.com.cn/download/navicat-for-mysql Step1: 下载Navicat ，网址：http://www.navicat.com/en/download/download.html Step2：进入下载目录，解压压缩包：tar -zxvf navicat11_mysql_en.tar.gz </div> </li> <li><a href="/article/3079.htm" title="批处理，删除文件bat" target="_blank">批处理，删除文件bat</a> <span class="text-muted">huqiji</span> <a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/dos/1.htm">dos</a> <div>@echo off ::演示：删除指定路径下指定天数之前（以文件名中包含的日期字符串为准）的文件。 ::如果演示结果无误，把del前面的echo去掉，即可实现真正删除。 ::本例假设文件名中包含的日期字符串（比如：bak-2009-12-25.log） rem 指定待删除文件的存放路径 set SrcDir=C:/Test/BatHome rem 指定天数 set DaysAgo=1</div> </li> <li><a href="/article/3206.htm" title="跨浏览器兼容的HTML5视频音频播放器" target="_blank">跨浏览器兼容的HTML5视频音频播放器</a> <span class="text-muted">天梯梦</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>HTML5的video和audio标签是用来在网页中加入视频和音频的标签，在支持html5的浏览器中不需要预先加载Adobe Flash浏览器插件就能轻松快速的播放视频和音频文件。而html5media.js可以在不支持html5的浏览器上使video和audio标签生效。   How to enable <video> and <audio> tags in </div> </li> <li><a href="/article/3333.htm" title="Bundle自定义数据传递" target="_blank">Bundle自定义数据传递</a> <span class="text-muted">hm4123660</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/Serializable/1.htm">Serializable</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%95%B0%E6%8D%AE%E4%BC%A0%E9%80%92/1.htm">自定义数据传递</a><a class="tag" taget="_blank" href="/search/Bundle/1.htm">Bundle</a><a class="tag" taget="_blank" href="/search/Parcelable/1.htm">Parcelable</a> <div>      我们都知道Bundle可能过put****()方法添加各种基本类型的数据，Intent也可以通过putExtras(Bundle)将数据添加进去，然后通过startActivity()跳到下一下Activity的时候就把数据也传到下一个Activity了。如传递一个字符串到下一个Activity   把数据放到Intent</div> </li> <li><a href="/article/3460.htm" title="C＃：异步编程和线程的使用（.NET 4.5 ）" target="_blank">C＃：异步编程和线程的使用（.NET 4.5 ）</a> <span class="text-muted">powertoolsteam</span> <a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B/1.htm">线程</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B/1.htm">异步编程</a> <div>异步编程和线程处理是并发或并行编程非常重要的功能特征。为了实现异步编程，可使用线程也可以不用。将异步与线程同时讲，将有助于我们更好的理解它们的特征。本文中涉及关键知识点 1. 异步编程 2. 线程的使用 3. 基于任务的异步模式 4. 并行编程 5. 总结异步编程什么是异步操作？异步操作是指某些操作能够独立运行，不依赖主流程或主其他处理流程。通常情况下，C＃程序</div> </li> <li><a href="/article/3587.htm" title="spark 查看 job history 日志" target="_blank">spark 查看 job history 日志</a> <span class="text-muted">Stark_Summer</span> <a class="tag" taget="_blank" href="/search/%E6%97%A5%E5%BF%97/1.htm">日志</a><a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a><a class="tag" taget="_blank" href="/search/history/1.htm">history</a><a class="tag" taget="_blank" href="/search/job/1.htm">job</a> <div>SPARK_HOME/conf 下: spark-defaults.conf 增加如下内容 spark.eventLog.enabled true spark.eventLog.dir hdfs://master:8020/var/log/spark spark.eventLog.compress true spark-env.sh 增加如下内容 export SP</div> </li> <li><a href="/article/3714.htm" title="SSH框架搭建" target="_blank">SSH框架搭建</a> <span class="text-muted">wangxiukai2015eye</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/struts/1.htm">struts</a> <div>MyEclipse搭建SSH框架 Struts Spring Hibernate 1、new一个web project。 2、右键项目，为项目添加Struts支持。    选择Struts2 Core Libraries -<MyEclipes-Library>      点击Finish。src目录下多了struts</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>

web学习之html基础（一）

前言

一、HTML简介

HTML标签

标题

HTML文档 = 网页

实例

我的第一个标题。

与

，以及一个结束标签

二、HTML编辑器

三、四个最常使用的标签

HTML标题

这是标题1

这是标题2

这是标题3

这是标题4

这是标题5

这是标题6

到

等标签进行定义的，

定义最大的标题，

定义最小的标题。

hr 标签定义水平线

HTML段落

春晓

HTML链接

HTML图像

HTML元素

HTML元素语法

嵌套的HTML元素

不要忘记结束标签

空的HTML元素

HTML属性

This is heading 1

请看：改变了颜色的背景。

HTML样式

Look! Style and Colors

This is a heading

A heading

This is a heading

HTML格式化