html教程 第6页 HTML 是所有网页制作技术的核心和基础，也是每个网页制作者必须掌握的基本知识，而 html 标签是 html 语言中最基本的单位，是 HTML 最重要的组成部分。 初学者首先要知道 HTML 标签的一些特点： HTML 标签是与大小写无关的，例如“<BODY>”跟<body>表示的意思是一样的，推荐使用小写。类似“<p>”这样由尖括号包关键字组成，例如： 实例 <P>P 是段落标签,HTML标签不区分大小写</P> <p>意思是一样的，推荐使用小写。</p> 尝试一下 » 注：HTML 标签对大小写不敏感，但推荐使用小写！ HTML 标签一般是成对出现的，由开始标签如<h1>，左边标签一般叫开始标签，右边</h1>叫结束标签，有始有终，除了一些个别是单闭合标签的，下面列举 HTML 单闭合标签。 单闭合标签 标签 功能 <br /> 插入一个换行简单的换行符 <hr /> 定义水平线 <area /> 定义图像映射内部的区域 <base /> 定义页面中所有链接的默认地址或默认目标 <img /> 定义图像 <input /> 定义输入控件 <link /> 定义文档与外部资源的关系 <meta /> 定义关于 HTML 文档的元信息 <basefont /> 不建议使用。定义页面中文本的默认字体、颜色或尺寸 <param /> 定义对象的参数 <col /> 定义表格中一个或多个列的属性值 <frame /> 定义框架集的窗口或框架 <embed /> 定义外部交互内容或插件 字体效果 标签 功能 <h1>…</h1> 标题字(最大) <h6>…</h6> 标题字(最小) <b>…</b> 粗体字 <strong>…</strong> 粗体字(强调) <i>…</i> 斜体字 <em>…</em> 斜体字(强调) <dfn>…</dfn> 斜体字(表示定义) <u>…</u> 底线 <ins>…</ins> 底线(表示插入文字) <strike>…</strike> 横线 <s>…</s> 删除线 <del>…</del> 删除线(表示删除) <kbd>…</kbd> 键盘文字 <tt>…</tt> 打字体 <xmp>…</xmp> 固定宽度字体(在文件中空白、换行、定位功能有效) <plaintext>…</plaintext> 固定宽度字体(不执行标记符号) <listing>…</listing> 固定宽度小字体 <font color=00ff00>…</font> 字体颜色 <font size=1>…</font> 最小字体 <font style =font-size:100 px>…</font> 无限增大 区断标记 标签 功能 <hr> 水平线...
2024-04-03
在 HTML 中使用表情符号 表情符号（Emoji）是来自 UTF-8 字符集的字符： 什么是 Emoji？ 表情符号（Emoji）类似图像或图标，但它们并不是。 它们是来自 UTF-8 (Unicode) 字符集的字母（字符）。 提示：UTF-8 几乎涵盖世界上所有字符和符号。 HTML charset 属性 为了正确显示 HTML 页面，Web 浏览器必须知道页面中使用的字符集。 这是在 <meta> 标签中规定的： <meta charset="UTF-8"> 提示：如果未规定，UTF-8 则是 HTML 中的默认字符集。 UTF-8 字符 很多 UTF-8 字符无法在键盘上键入，但始终可以使用数字（被称为实体编号）来显示它们： A 是 65 B 是 66 C 是 67 实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <p>我将显示 A B C</p> <p>我将显示 A B C</p> </body> </html> 尝试一下 例子解释 <meta charset="UTF-8"> 元素定义字符集。 字符 A、B、C 由数字 65、66 以及 67 来显示。 为了让浏览器了解您正在显示字符，您必须以 &# 开头并以 ;（分号）结束实体编号。 Emoji 字符 表情符号也是来自 UTF-8 字母的字符： 是 128516 是 128525 是 128151 实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h1>我的第一个 Emoji</h1> <p>😀</p> </body> </html> 尝试一下 由于表情符号是字符，因此可以像 HTML 中的其他任何字符一样复制、显示和调整它们的大小。 实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h1>放大的表情符号</h1> <p style="font-size:48px"> 😀 😄...
2024-04-03
为了正确显示 HTML 页面，Web 浏览器必须知道要使用哪个字符集。 从 ASCII 到 UTF-8 ASCII 是第一个字符编码标准。ASCII 定义了 128 种可以在互联网上使用的字符：数字（0-9）、英文字母（A-Z）和一些特殊字符，比如：! $ + – ( ) @ < >。 ISO-8859-1 是 HTML 4 的默认字符集。此字符集支持 256 个不同的字符代码。HTML 4 同时支持 UTF-8。 ANSI（Windows-1252）是原始的 Windows 字符集。 ANSI 与 ISO-8859-1 相同，不同之处在于 ANSI 具有 32 个额外的字符。 HTML5 规范鼓励 Web 开发人员使用 UTF-8 字符集，该字符集涵盖了世界上几乎所有的字符和符号！ HTML charset 属性 为了正确显示 HTML 页面，Web 浏览器必须了解页面中使用的字符集。 这在 <meta> 标签中指定： <meta charset="UTF-8"> 字符集之间的差异 下表展示了上述字符集之间的区别： Numb ASCII ANSI 8859 UTF-8 Description 32 space 33 ! ! ! ! exclamation mark 34 “ “ “ “ quotation mark 35 # # # # number sign 36 $ $ $ $ dollar sign 37 % % % % percent sign 38 & & & & ampersand 39 ‘ ‘ ‘ ‘ apostrophe 40 ( ( ( (...
2024-04-03
HTML 字符实体 HTML 中的预留字符必须被替换为字符实体。 一些在键盘上找不到的字符也可以使用字符实体来替换。 HTML 实体 在 HTML 中，某些字符是预留的。您不能使用包含这些字符的文本。 在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 字符实体类似这样： &entity_name; 或 &#entity_number; 如需显示小于号，我们必须这样写：< 或 < 或 < 提示： 使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。 不间断空格 (Non-breaking Space) HTML 中的常用字符实体是不间断空格( )。 浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 字符实体。 结合音标符 发音符号是加到字母上的一个”glyph(字形)”。 一些变音符号, 如 尖音符 ( ̀) 和 抑音符 ( ́) 。 变音符号可以出现字母的上面和下面，或者字母里面，或者两个字母间。 变音符号可以与字母、数字字符的组合来使用。 以下是一些实例: 音标符 字符 Construct 输出结果 ̀ a à à ́ a á á ̂ a â â ̃ a ã ã ̀ O Ò Ò ́ O Ó Ó ̂ O Ô Ô ̃ O Õ Õ HTML 字符实体 实体名称对大小写敏感！ 显示结果 描述 实体名称 实体编号 空格 < 小于号 < < > 大于号 > > & 和号 & & “ 引号 " "...
2024-04-03
HTML <div> 和<span> HTML 可以通过 <div> 和 <span> 将元素组合起来。 HTML 区块元素 大多数 HTML 元素被定义为块级元素或内联元素。 块级元素在浏览器显示时，通常会以新行来开始（和结束）。 实例: <h1>, <p>, <ul>, <table> HTML 内联元素 内联元素在显示时通常不会以新行开始。 实例: <b>, <td>, <a>, <img> HTML <div> 元素 <div> 标签可以把文档分割为独立的、不同的部分。 HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。 <div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。 如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。 <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。 如果要熟悉 <div> 元素是如何进行文档布局的，您可以在编程测试中进行练习使用 <div> 元素组合其他 HTML 元素！ HTML <span> 与元素 HTML <span> 元素是内联元素，可用作文本的容器 <span> 元素也没有特定的含义。 当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。 HTML 分组标签 标签 描述 <div> 定义了文档的区域，块级 (block-level) <span> 用来组合文档中的行内元素， 内联元素(inline) <span>实例 HTML <span> 实例 <p>我有一双 <span style=”color:gold”>金色</span> 的 <span style=”font-size:50px”>大眼睛</span>和 <span style=”color:blue”>蓝色的头发</span>。 </p> 尝试一下 » <div>实例 HTML <div> 实例 <p>这是一些文本。</p> <div style=”color:#00FFFF”> <h3>这是一个在 div 元素中的标题。</h3> <p>这是一个在 div 元素中的文本。</p> </div> <p>这是一些文本。</p> 尝试一下 »
2024-04-03
HTML 框架 <iframe>标签规定一个内联框架。 一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。 iframe 语法： <iframe src=”URL”></iframe> 该URL指向不同的网页，将窗口内容显示为URL地址指向页面。 Iframe – 设置高度与宽度 height和width属性用来定义iframe标签的高度与宽度。 属性默认以像素为单位, 但是你可以指定其按比例显示 (如：”80%”). 实例 <iframe src=”demo_iframe.htm” width=”80%” height=”80%”></iframe> 尝试一下 » Iframe – 移除边框 frameborder属性用于定义iframe表示是否显示边框。 设置属性值为 “0” 移除iframe的边框: 实例 <iframe src=”demo_iframe.htm” frameborder=”0″></iframe> 尝试一下 » 使用 iframe 来显示目录链接页面 iframe可以显示一个目标链接的页面 目标链接的属性必须使用iframe的属性，如下实例： 实例 <iframe src=”demo_iframe.htm” name=”iframe_a”></iframe> <p><a href=” http://www.w3cschool.cn” target=”iframe_a”>W3CSCHOOL.CN</a></p> 尝试一下 » HTML iframe 标签 标签 说明 <iframe> 定义一个内联的 iframe iframe 标准属性 属性 说明 class 规定元素的类名（classname） id 规定元素的唯一 id style 规定元素的行内样式（inline style） title 规定元素的额外信息（可在工具提示中显示） HTML <frameset>标签 – HTML5 不支持 <frameset>标签在一个页面中设置一个或多个框架，用<frameset></frameset>代替了<body></body>，不能出现在body标签里。 <frameset> 语法： <frameset> <frame src=”menu.html”> <frame src=”content.html”> </frameset> frameset– 建立框架的标记，将在其中定义各个框架。 frame src– 指示框架显示内容URL地址。 <frameset> – 设置行列比例 <frameset>标签中我们使用rows设置行的占页面的百分比；cols设置列的所占百分比。 实例 <frameset rows=”20%,*”> <frame src=”title.html”> <frameset cols=”30%,*”> <frame src=”menu.html”> <frame src=”content.html”> </frameset> </frameset> 尝试一下 » frameset cols– 确定每个框架列所占百分比。在前面的示例中，我们已经确定第一框架将占据所示区域的 30％，并且我们使用“*”符号来指示剩余百分比。 frameset rows– 确定将显示的每个框架行所占百分比。在前面的示例中，我们选择第一框架为 20％，剩下的剩余空间将在menu.html和content.html之间划分。 <frameset> – 设置边框 框架有一些边框线，大多数时候都不需要。<frameset>标签中我们使用frameborder和framespacing属性可以擦除它们。 注意：frameset和frameborder是相同的属性。 实例...
2024-04-03
<!DOCTYPE> 声明 Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。 HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。 <!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。 doctype 元素是唯一的，并且在它自己的类别中。 实例 带有 HTML5 DOCTYPE 的 HTML 文档： <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html> HTML 版本 从 Web 诞生早期至今，已经发展出多个 HTML 版本： 版本 年份 HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 1.0 2000 HTML5 2012 XHTML5 2013 常用的声明 HTML5 <!DOCTYPE html> HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html 元素 html 元素或根元素表示 HTML 的开始。 html 元素有一个 head 元素和一个 body 元素。 以下代码显示了正在使用的 html 元素。 <!DOCTYPE HTML> <html> ...content and elements omitted... </html>...
2024-04-03
以下代码显示了一个应用于某些文本的 HTML 元素的简单示例。 I like <code>web</code> and CSS. 起始标记为<code>，结束标记为</ code>。标签之间是元素的内容，即 web。标签和内容一起形成代码元素。 HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。 开始标签 元素内容 结束标签 <p> This is a paragraph </p> <a href=”default.htm” > This is a link </a> <br /> 注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。 注意 1 我们使用元素来执行以下操作： HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容（empty content） 空元素在开始标签中进行关闭（以开始标签的结束而结束） 大多数 HTML 元素可拥有属性 注意 2 元素名称不区分大小写。 浏览器会识别 <CODE> 和 <code>，甚至 <CoDe> 作为代码元素的起始标签。 一般来说，惯例是采用单一案例格式并坚持。更常见的样式是使用小写字符。 注意 3 HTML 定义了在 HTML 文档中实现各种角色的不同类型的元素。 代码元素是语义元素的示例。语义元素允许我们定义我们的内容的意义以及内容的不同部分之间的关系。 空元素 您不需要在开始和结束标签之间放置任何内容。 如果你没有，你创建一个空元素，如下面代码所示。 I like <code></code> HTML and CSS. 并非所有元素都是空的，但即使如此，这仍然是有效的 HTML。 自闭合标签 您可以使用单个标记更简洁地表达空元素，如下面的代码所示。 I like <code/> HTML and CSS. 您将开始和结束标记组合成一个笔划字符(/)它用于表示结束标记的开始。 上面的代码与以下代码具有相同的含义。 I like <code></code> HTML and CSS. 单个标签是表达空元素的更简洁的方式。 空元素 有一些元素必须使用单个标签表示。这些被称为空元素。 一个这样的元素是 hr 。 hr 是一个分组元素，用于表示一个段落级别的内容。 您可以使用以下两种方式之一使用 void 元素 – 第一种方法是仅指定开始标记，如以下代码所示。 I like HTML. <hr> I like CSS. 浏览器知道 hr 是一个...
2024-04-03
HTML表头 —— headers <td>和<th>元素定义 headers 属性，可用于使用屏幕阅读器和其他技术更容易地处理表。 headers 属性的值是一个或多个单元的 ID 属性值。 以下代码显示了如何使用此属性。 <!DOCTYPE HTML> <html> <head> <title>HTML 表头(w3cschool.cn)</title> <style> thead th, tfoot th { text-align: center; background: #FE6A00; color: white } tbody th { text-align: center; background: lightgrey; color: grey; } tbody td { text-align: center; } thead [colspan], tfoot [colspan] { text-align: center; } #first, #second { background: #FAEBD7; color: #FE6A00; } </style> </head> <body> <table> <thead> <tr> <th id="time">时间</th> <th id="weather">天气</th> <th id="temperature">温度/℃</th> <th id="wind">风向</th> </tr> </thead> <tbody> <tr> <th id="first">7月24日</th> <td headers="weather first">多云</td> <td headers="temperatire first">26~37</td> <td headers="wind first">南风</td> </tr> <tr> <th id="second">7月25日</th> <td headers="weather second">多云</td> <td headers="temperatire second">26~36</td> <td headers="wind second">南风</td> </tr> </tbody> <tfoot> <tr> <th colspan="4">© 2020 www.w3cschool.cn 编程狮</th> </tr> </tfoot> </table> </body> </html> 尝试一下 全局id属性被添加到tbody...
2024-04-03
嵌套错误可能引起的问题 在我们使用各种浏览器时，时常发现即使不按照标准去嵌套也不会有大的错误问题，这就给我们带来了一个思考：嵌套错误到底会不会有问题？ 举个栗子1：开始与结束标签嵌套错误 <div><h2>内容</div></h2> 测试结果： 举个栗子2：<p>元素嵌套<div>元素 <p><div>内容</div></p> 测试结果： 举个栗子3：列表元素<li>兄弟元素为<div> <ul><li>内容</li><div>内容</div></ul> 测试结果： 举个栗子4：<h2>元素嵌套<div>元素 <h2><div>内容</div></h2> 测试结果： 举个栗子5：<a>元素嵌套<a>元素 <a href=""><a href="">内容</a></a> 测试结果： 通过上述栗子，我们总结如下： 元素开始与结束标签嵌套错误，页面可以在大部分浏览器被正常解析，IE9会出现解析错误 在<p>元素内嵌入<div>等元素造成所有浏览器的解析错误 在<h1>~<h6>元素内嵌入<div>等元素所有浏览器可以解析正常 在<a>元素内嵌入<a>元素会导致所有浏览器的解析错误 在列表元素<li><dt><dd>等插入非列表兄弟元素会导致IE6\IE7的解析错误 其实，这里说解析错误并不是很合理，应该是说浏览器解析出来的结果和我们期望的结果不一致，但任何的嵌套错误都不会导致页面呈现有很大的出错。 我们知道JS代码如果写的有语法错误，浏览器的JS解释器就会拒绝执行并且报错，而浏览器在遇到不符合语法规定的HTML代码时则会千方百计将其呈现出来。 严格嵌套约束、语义嵌套约束 通过上面的示例我们发现在<p>元素里嵌套<div>元素或者<a>元素里<a>元素会导致所有的浏览器都解析错误，这其实是W3C规范的严格嵌套约束，严格嵌套约束要求必须去遵守，不然就会导致所有浏览器的解析错误。 严格嵌套约束规则： a元素里不可以嵌套交互式元素(<a>、<button>、<select>等) <p>里面不可以嵌套<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等 暂时没有发现更多，有的欢迎告诉我 语义嵌套约束： 每个元素基本都有自己的嵌套规则（即父元素可以是什么，子元素可以是什么），除了严格嵌套约束之外的一些规则就是语义嵌套约束，对于语义嵌套约束，如果不遵守，页面可能正常，但也可能解析错误，这和下面要讲的容错机制有关。 浏览器的容错机制 并不是每位同学在写完页面后去做合法性检查，因此浏览器厂商不得不让它们的浏览器以尽可能宽松的方式去处理网页，每个浏览器内核中都有相当一部分代码专门用来处理那些含糊不清的html标记及嵌套，并且会去猜测前端们到底想如何呈现网页，这是浏览器的容错机制。 这其实在告诉我们，我们写出来的HTML代码不符合W3C规范可能最终呈现出来没有异样，但那其实是浏览器的一种容错机制，我们没有理由让自己以一个随性的态度去coding，对待自己的代码应该一丝不苟，即使HTML5的胸襟很宽广。 拥抱WEB标准 原本我们认为从HTML4到XHTML是一个时代，现在又从XHTML跨到了HTML5，新时代新标准的诞生，我们应该敞开胸怀去拥抱，而不是排斥。 你关注或不关注，标准就在那里，只增不减。我们应该感谢W3C这样一个组织，让各个浏览器厂商抛开彼此的敌意共同制定新的标准。不然，也许你会像90年代那样，JS引用一个元素都需要为某个浏览器写一套自己的代码。 WEB标准只会使我们吃饭变得更香，睡眠变得更好，新的技术或标准会推动我们去富有热情的coding，而不是每天在重复劳动。 补充一些标准的常用链接： W3C国际站：http://www.w3.org/ W3C中国：http://www.chinaw3c.org/ W3C HTML5：http://www.w3.org/TR/html5/
2024-04-03
国外主机测评 - 国外VPS，国外服务器，国外云服务器，测评及优惠码
