Hi, 请登录     我要注册     找回密码

html教程 第7页

HTML 实例

HTML 实例 HTML 基础 非常简单的HTML文档HTML 标题HTML 段落HTML 链接HTML 图片 实例解析 HTML 标题 HTML 标题在html源码中插入注释插入水平线 实例解析 HTML 段落 HTML 段落更多段落本例演示在 HTML 文档中折行的使用。 HTML 格式化的某些问题。 实例解析 HTML 文本格式化 文本格式化此例演示如何使用 pre 标签对空行和空格进行控制。此例演示不同的”计算机输出”标签的显示效果。此例演示如何在 HTML 文件中写地址。此例演示如何实现缩写或首字母缩写。此例演示如何改变文字的方向。此例演示如何实现长短不一的引用语。文本下划线与删除线 实例解析 HTML 样式 HTML Style 元素 背景色样式字体样式，颜色，大小文本对齐样式设置文本字体设置文本字体大小设置文本字体颜色设置文本字体，字体大小，字体颜色HTML使用不同样式没有下划线的链接链接到一个外部样式表 实例解析 HTML 链接 创建超级链接将图像作为链接在新的浏览器窗口打开链接链接到同一个页面的不同位置跳出框架创建电子邮件链接创建电子邮件链接 2 实例解析 HTML 图像 插入图像从不同的位置插入图片排列图片本例演示如何使图片浮动至段落的左边或右边。制作图像链接创建图像映射 实例解析 HTML 表格 简单的表格没有边框的表格表格中的表头带有标题的表格跨行或跨列的表格单元格表格内的标签单元格边距(Cell padding)单元格间距(Cell spacing) 实例解析 HTML 列表 无序列表有序列表不同类型的有序列表不同类型的无序列表嵌套列表嵌套列表 2定义列表 实例解析 HTML Forms 和 Input 创建文本域(Text fields)创建密码域复选框单选按钮简单的下拉列表预选下拉列表本例演示如何创建一个文本域（多行文本输入控件）。创建一个按钮本例演示如何在数据周围绘制一个带标题的框。带有文本域与输入域的表单带有复选框与提交按钮的form表单带有单选框与提交按钮的表单发送邮件表单 实例解析 HTML iframe 内联框架 (HTML页面中插入框架) 实例解析 HTML 头部元素 描述了文档标题HTML页面中默认的URL链接提供文档元数据 实例解析 HTML 脚本 插入一个脚本使用 <noscript> 标签 实例解析

HTML 简介

HTML简介 HTML是用于创建网页的语言。我们通过使用HTML标记标签创建html文档来创建网页。HTML代表超文本标记语言。HTML是一种标记语言，它具有标记标签的集合。 HTML标签是由尖括号括起来的词，如<html>， <body>。标签通常成对出现，例如<html>和</html>。 一对中的第一个标签是开始标签;第二个标签是结束标签。在上面的示例中，<html>是开始标签，而</html>是结束标签。 我们还可以将开始标签称为起始标签，结束标签称为闭合标签。

HTML object

HTML object object元素实现与 embed 元素相同的结果。 它具有局部属性:data，type，height，width，usemap，name，form。 object 元素也可以有零个或多个参数元素。 表单属性是HTML5中的新属性。 archive，classid，code，codebase，codetype，declare，standby，align，hspace，vspace和border属性都已过时。 以下代码显示了如何使用对象元素嵌入相同的YouTube视频。 <!DOCTYPE HTML> <html> <body> <object width="560" height="349" data="http://www.youtube.com/v/qzA60hHca9s" type="application/x-shockwave-flash"> <param name="allowFullScreen" value="true" /> </object> </body> </html> 注意 data属性提供了内容的位置。 type，width和height属性的含义与embed元素的含义相同。 您可以使用 param 元素定义要传递给插件的参数。 您需要为每个需要定义的参数使用一个 param 元素。 param 元素使用属性名称和值来定义参数。 Fallback内容 使用对象元素，您可以包括如果您指定的内容不可用将显示的内容。 <!DOCTYPE HTML> <html> <body> <object width="560" height="349" data="//www.w3cschool.cn/myimaginaryfile"> <param name="allowFullScreen" value="true" /> <b>Sorry!</b> We can"t display this content </object> </body> </html> 上面的代码使用 data 属性来引用不存在的文件。 浏览器将显示 object 元素内的内容。将忽略 param 元素。 image object 您可以使用 object 元素来嵌入图像。 <!DOCTYPE HTML> <html> <body> <object data="http://www.www.w3cschool.cn/style/download.png" type="image/png"> </object> </body> </html> Image Maps 您可以使用 object 元素创建客户端图像映射。 usemap 属性可用于将map元素与 objext 元素相关联。 <!DOCTYPE HTML> <html> <body> <map name="mymap"> <area href="a.html" shape="rect" coords="3,5,68,62" alt="A" /> <area href="b.html" shape="rect" coords="70,5,130,62" alt="B" /> <area href="c.html" shape="default" alt="default" /> </map> <object data="http://www.www.w3cschool.cn/style/download.png" type="image/png"...

HTML 表单验证

HTML表单验证 HTML5引入了对输入验证的支持。您通过属性管理输入验证。 以下列表显示了哪些元素和输入类型支持不同的验证属性。 验证属性: required 元素: textarea, select, input (text, password, checkbox, radio, file, datetime,datetime-local, date, month, time, week, number, email, url, search, 和 tel 类型) 验证属性: min, max 元素: input (datetime, datetime-local, date, month, time, week, number, 和 range 类型) 验证属性: pattern元素: input (text, password, email, url, search, 和 tel 类型) required输入 最简单的输入验证是确保用户提供一个值。您使用必需属性执行此操作。 在提供值之前，用户不能提交表单。 以下代码显示了正在使用的必需属性。 <!DOCTYPE HTML> <html> <body> <form method="post" action="http://example.com/form"> <p> <label for="name"> Name: <input type="text" required id="name" name="name" /> </label> </p> <p> <label for="password"> Password: <input type="password" required placeholder="Min 6 characters" id="password" name="password" /> </label> </p> <p> <label for="accept"> <input type="checkbox" required id="accept" name="accept" /> Accept Terms & Conditions </label> </p> <input type="submit" value="Submit" /> </form> </body> </html> bounded输入 您可以使用 min 和 max 属性来确保数值和日期值在特定范围内。 您不需要应用这两个属性。 min...

HTML 表单选择

HTML表单选择 select 元素创建用户选择的选项列表。 select 具有局部属性: name，disabled，form，size，multiple，autofocus，required 。它可以包含 contentsoption和 optgroup 元素。 HTML5中的form，autofocus 和 required属性是新增的。 name，disabled，form，autofocus 和 required 属性与输入元素的工作方式相同。 size 属性指定要向用户显示的选项数。 multiple属性允许用户选择多个值。 您可以使用option元素来定义要向用户显示的选项。 例1 以下代码显示如何使用select和option元素。 <!DOCTYPE HTML> <html> <body> <form method="post" action="http://example.com/form"> <p> <label for="fave"> Favorite Fruit: <select id="fave"name="fave"> <option value="A" selected label="Apples">Apples</option> <option value="B" label="Batch">Batch</option> <option value="C" label="C">C</option> <option value="S" label="SQL">SQL</option> </select> </label> </p> <input type="submit" value="Submit" /> </form> </body> </html> 例2 您可以使用select元素上的size属性向用户显示多个选项，并使用multiple属性允许用户选择多个选项。 <!DOCTYPE HTML> <html> <body> <form method="post" action="http://example.com/form"> <p> <label for="fave" style="vertical-align: top"> Favorite Fruit: <select id="fave" name="fave" size="5" multiple> <option value="a" selected label="Apples">Apples</option> <option value="o" label="Oracle">Oracle</option> <option value="c" label="C">C</option> <option value="p" label="Pascal">Pascal</option> </select> </label> </p> <input type="submit" value="Submit" /> </form> </body> </html> 选择结构 您可以使用select元素上的 size 属性向用户显示多个选项，以及允许用户的多个属性以选择多个选项。… 它具有局部属性:label，disabled和包含option元素。 您可以使用 optgroup 元素将option元素分组在一起。 label 属性允许您为已分组的选项创建标题。 disabled 属性使选项元素不可选。 以下代码显示正在使用的optgroup元素。 <!DOCTYPE HTML> <html>...

HTML 表单编码

HTML表单编码 enctype 属性指定浏览器如何编码数据并将其呈现给服务器。 此属性有三个允许值。 application/x-www-form-urlencoded默认编码。此编码无法用于将文件上传到服务器。 multipart/form-data此编码用于将文件上传到服务器。 text/plain此编码因浏览器而异。 要理解不同编码的工作原理，我们创建了以下形式。 <!DOCTYPE HTML> <html> <body> <form method="post" action="http://example.com/form"> <input name="fave" /> <input name="name" /> <button>Submit Vote</button> </form> </body> </html> application/x-www-form-urlencoded 如果使用 application / x-www-form-urlencoded 编码，每个数据项的名称和值都使用用于编码URL的相同方案进行编码。这是编码应用于示例形式的数据的方式： fave=Apples&name=FiratName+LastName 特殊字符将替换为其HTML实体对应部分。数据项的名称和值由等号（=）分隔，数据/值元组由＆符号（＆）分隔。 multipart/form-data multipart / form-data 编码往往仅用于上传文件。下面是示例表单中的数据如何编码: ------WebKitFormBoundary2desQWER543CDFGF Content-Disposition: form-data; name="fave" YourName ------WebKitFormBoundary2desQWER543CDFGF Content-Disposition: form-data; name="name" www.w3cschool.cn ------WebKitFormBoundary2desQWER543CDFGF-- fave=Apple name=www.w3cschool.cn multipart/plain 主流浏览器以不同的方式对该编码进行编码。 Google Chrome以与application / x-www-form-urlencoded方案相同的方式对数据进行编码，而Firefox对数据进行编码的方式如下： fave=xml name=www.w3cschool.cn 每个数据项都放在一行上，不会对特殊字符进行编码。

HTML 表边框

 HTML表格边框 table 元素定义 border 属性。 大多数浏览器在表和每个单元格周围绘制边框。 例子 以下代码显示了 border 元素的应用。 <!DOCTYPE HTML> <html> <body> <table border="1"> <tbody> <tr> <th>Favorite:</th> <td>A</td> <td>G</td> <td>M</td> <td>500</td> </tr> <tr> <th>2nd Favorite:</th> <td>O</td> <td>O</td> <td>L</td> <td>450</td> </tr> </tbody> </table> </body> </html> 注意 分配给 border 属性的值必须为1或空字符串(“”)。此属性不会控制边框的样式。 边框的样式由CSS控制。

HTML 表跨度

HTML表格跨度 colspan – 列跨度 要将单元格跨多个列，请使用 colspan 属性。 分配给 colspan 的值必须是整数。 您还必须删除展开后的单元格将覆盖的单元格元素。 <!DOCTYPE HTML> <html> <head> </head> <body> <table border="1"> <thead> <tr> <th>Rank</th> <th>Name</th> <th>Color</th> <th colspan="2">Size & Votes</th> </tr> </thead> <tbody> <tr> <th>2nd Favorite:</th> <td>HTML</td> <td>HTML</td> <td>Oracle</td> <td>MySQL</td> </tr> <tr> <th>3rd Favorite:</th> <td>XML</td> <td colspan="2" rowspan="2">This is a test.</td> <td>203</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> </tbody> <tfoot> <tr> <th colspan="5">&copy; 2011 www.w3cschool.cn Enterprises</th> </tr> </tfoot> </table> </body> </html> rowspan – 行跨度 要将单元格跨多行，您可以使用 rowspan 属性。您分配给此属性的值是要跨越的行数。 分配给 rowspan 的值必须为整数。 如果希望中间列中的一个单元格跨越所有三行，您将 rowspan 属性应用于单元格2。 您还必须删除展开后的单元格将覆盖的单元格元素。 以下代码将单元格扩展为覆盖多行。 <!DOCTYPE HTML> <html> <head> <style> td { border: thin solid black; padding: 5px; font-size: x-large } </style> </head> <body> <table border="1"> <tr> <td>1</td> <td rowspan="3">2</td> <td>3</td> </tr> <tr> <td>4</td> <td>6</td> </tr> <tr> <td>7</td> <td>9</td> </tr> </table> </body>...

HTML 表列

HTML表列 colgroup – 表列组 HTML表是面向行的。将单元格的定义放在 tr 中元素中，并逐行构建表。 要将样式应用于列，我们可以使用 colgroup 和 col 元素。 具有局部属性 span 的colgroup 元素表示一组列。 colgroup 元素可以包含零个或多个 col 元素。 width，char，charoff 和 valign 属性已过时。 以下代码显示了 colgroup 元素的使用。 <!DOCTYPE HTML> <html> <head> <style> #colgroup1 { background-color: red } #colgroup2 { background-color: green; font-size: small } </style> </head> <body> <table> <colgroup id="colgroup1" span="3" /> <colgroup id="colgroup2" span="2" /> <thead> <tr> <th>Rank</th> <th>Name</th> <th>Color</th> <th colspan="2">Size & Votes</th> </tr> </thead> <tbody> <tr> <th>Favorite:</th> <td>XML</td> <td>HTML</td> <td>CSS</td> <td>500</td> </tr> <tr> <th>2nd Favorite:</th> <td>CSS</td> <td>Java</td> <td>Javascript</td> <td>450</td> </tr> </tbody> </table> </body> </html> 上面的代码定义了两个 colgroup 元素。 span 属性指定 colgroup 元素应用于多少列。 列表中的第一个 colgroup 应用于表中的前三列，其他元素应用于后两列。 全局 id 属性是为每个 colgroup 元素定义的，CSS样式通过使用 id 值作为选择器来定义。 col – 表单个列 您可以使用 col 元素而不是 colgroup 元素的 span 属性定义组。 col 元素具有局部属性: span 。 align，width，char，charoff 和...

HTML 图标

HTML图标 link元素可以定义与您的页面相关联的图标。不同的浏览器以不同的方式处理图标，但通常图标显示在页面选项卡上，以及用户将页面添加到收藏夹列表时。 Favicon图标通常是 .ico 格式的32像素乘32像素的图像文件。浏览器普遍支持此格式。 例子 您可以通过向页面中添加链接元素来使用此图标。 <!DOCTYPE HTML> <html> <head> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> </head> <body> <p>This is a test.</p> <a href="http://www.w3cschool.cn">Visit www.w3cschool.cn</a> </body> </html> 加载HTML页面时，浏览器将加载并显示图标。 如果图标位于网站的根目录，则不必使用link元素。大多数浏览器会在加载网页时自动请求此文件，即使没有link元素。