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

html教程 第3页

HTML 文档类型

<!DOCTYPE> 声明帮助浏览器正确地显示网页。 <!DOCTYPE> 声明 Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。 HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。 <!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。 实例 带有 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 链接 如何在 HTML 文档中创建链接。 (可以在本页底端找到更多实例) HTML 超链接（链接） HTML使用标签 <a>来设置超文本链接，是可以从一个页面指向另一个目的端的链接。 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。 在标签 <a> 中使用了 href 属性来描述链接的地址。 默认情况下，链接将以以下形式出现在浏览器中： 一个未访问过的链接显示为蓝色字体并带有下划线 访问过的链接显示为紫色并带上下划线 点击链接时，链接显示为红色并带上下划线 注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定来显示 HTML 空链接 HTML 空链接：指指向链接后，鼠标变成手形，但单击后仍停留在当前页面。 临时加的空链接，主要为了能更好的看到最终的效果。 基本语法： <a href=”#”>链接文字</a> 其中“ # ”表示空链接。 实例 <a href=”#”>W3CSchool</a> HTML 链接语法 链接的 HTML 代码很简单。它类似这样： <a href=”url”>Link text</a> href 属性描述了链接的目标。. 实例 <a href=”//www.w3cschool.cn/”>Visit W3Cschool</a> 上面这行代码显示为：: Visit W3Cschool 点击这个超链接会把用户带到 W3Cschool 的首页。 提示: “链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。 HTML 链接 – target 属性 使用 Target 属性，你可以定义被链接的文档在何处显示（在新的窗口打开，还是在原有的窗口中打开）。 下面的这行会在新窗口打开文档： 实例 <a href=”https://www.w3cschool.cn/” target=””>访问W3Cschool教程!</a> <p>如果你将 target 属性设置为 “_blank”, 链接将在新窗口打开。</p> 尝试一下 » 提示：默认的被链接文档会在原有的窗口中打开的。如果将 target 属性设置为 “_blank” 则文档就会在新窗口打开。 HTML 链接 – id 属性 id 属性可用于在一个 HTML 文档中创建书签标记。 提示: 书签是不以任何特殊的方式显示，在 HTML 文档中是不显示的，所以对于读者来说是隐藏的。 实例 在 HTML 文档中插入 ID： <a id=”tips”>Useful Tips Section</a> 在 HTML 文档中创建一个链接到”有用的提示部分 (id=”tips”）”： <a href=”#tips”>Visit the Useful Tips Section</a> 或者，从另一个页面创建一个链接到”有用的提示 (id=”tips”）部分”： <a href=”//www.w3cschool.cn/html_links.html#tips”> Visit the Useful Tips Section</a> 基本的注意事项 – 有用的提示 Note: 请始终将正斜杠添加到子文件夹。假如这样书写链接：href=”//www.w3cschool.cn/html”，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=”//www.w3cschool.cn/html/”。 更多实例 图片链接...

HTML id

HTML ​id​ 属性用于 为HTML 元素指定唯一的 id。 一个 HTML文档中不能存在多个有相同 id 的元素。 使用 id 属性 ​id​ 属性指定 HTML 元素的唯一 ID。 ​id​ 属性的值在 HTML 文档中必须是唯一的。 ​id​ 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。 id 的语法是：写一个井号 (#)，后跟一个 ​id​ 名称。然后，在花括号 {} 中定义 CSS 属性。 下面的例子中我们有一个 ​<h1>​ 元素，它指向 ​id​ 名称 “myHeader”。这个 ​<h1>​ 元素将根据 head 部分中的 ​#myHeader​ 样式定义进行样式设置： 实例 <!DOCTYPE html> <html> <head> <style> #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } </style> </head> <body> <h1 id="myHeader">My Header</h1> </body> </html> 尝试一下 注释：id 名称对大小写敏感！ 注释：id 必须包含至少一个字符，且不能包含空白字符（空格、制表符等）。 Class 与 ID 的差异 同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用： 实例 <style> /* 设置 id 为 "myHeader" 的元素的样式 */ #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } /* 设置类名为 "city" 的所有元素的样式 */ .city { background-color: tomato; color: white; padding: 10px; } </style> <!-- 拥有唯一 id 的元素 --> <h1 id="myHeader">My Cities</h1>...

HTML 注释

本章为大家带来的是HTML注释标签 ​<!--​ 与 ​--> ​用于在 HTML 插入注释。 HTML 注释标签 您能够通过如下语法向 HTML 源代码添加注释： 实例 <!-- 在此处写注释 --> 注释：在开始标签中有一个惊叹号，但是结束标签中没有。 浏览器不会显示注释，但是能够帮助记录您的 HTML 文档。 您可以利用注释在 HTML 中放置通知和提醒信息： 实例 <!-- 这是一段注释 --> <p>这是一个段落。</p> <!-- 记得在此处添加信息 --> 注释对于 HTML 纠错也大有帮助，因为您可以一次注释一行 HTML 代码，以搜索错误： 实例 <!-- 此刻不显示图片： <img border="0" src="/i/tulip_ballade.jpg" alt="Tulip"> --> 条件注释 您也许会在 HTML 中偶尔发现条件注释： <!--[if IE 8]> .... some HTML here .... <![endif]--> 条件注释定义只有 Internet Explorer 执行的 HTML 标签。 软件程序标签 各种 HTML 软件程序也能够生成 HTML 注释。 例如 <!–webbot bot–> 标签会被包围在由 FrontPage 和 Expression Web 创建的 HTML 注释中。 作为一项规则，这些标签的存在，有助于对创建这些标签的软件的支持。

HTML iframe

HTML iframe iframe 元素在现有元素中嵌入另一个HTML文档。 它有局部属性: src，srcdoc，name，width，height，sandbox，seamless 。 HTML5中的 sandbox 和seamless属性是新增的。 longdesc，align，allowtransparency，frameborder，marginheight，marginwidth 和scrolling属性已过时。 以下代码显示如何使用iframe元素。 <!DOCTYPE HTML> <html> <body> <a href="http://www.w3cschool.cn" target="myframe">Tutorial</a> <iframe name="myframe" width="300" height="300"> </iframe> </body> </html> 注意 将创建名称属性值为 myframe 的 iframe 。这将创建一个名为 myframe 的浏览上下文。 然后，这个浏览上下文在其他元素的目标属性中使用 – 特别是a，form，button，input和base。 a 元素来创建一对超链接，这些超链接会将其href属性中指定的网址加载到iframe中。 width和height属性指定大小(以像素为单位)。src属性指定应最初加载并显示在iframe中的网址。 srcdoc属性允许您定义一个内嵌显示的HTML文档。 seamless属性设置浏览器显示iframe，如同它们是主HTML文档的组成部分。 否则，默认情况下会应用边框，如果内容大于width和height属性，则会出现滚动条。 iframe sandbox sandbox 属性对HTML文档应用限制。当应用没有值的属性时，如下所示： ... <iframe sandbox name="myframe" width="300" height="100"> </iframe> ... 以下是禁用: scripts forms plugins 定位其他浏览上下文的链接 您可以通过为sandbox属性定义值来启用各个功能，如下所示： ... <iframe sandbox="allow-forms" name="myframe" width="300" height="100"> </iframe> ... 可以使用的值的集合在下面的列表中描述。 allow-forms – 启用表单 allow-scripts – 启用脚本 allow-top-navigation – 允许定位到顶级浏览上下文的链接，这样可以将整个文档替换为另一个文档，也可以创建新的标签页或窗口 allow-same-origin – 允许将iframe中的内容视为来自与文档其余部分相同的位置

HTML 速查列表

HTML 速查列表 HTML 速查列表. 你可以打印它，以备日常使用。 HTML 基本文档 <!DOCTYPE html> <html> <head> <title>文档标题</title> </head> <body> 可见文本… </body> </html> 基本标签（Basic Tags） <h1>最大的标题</h1>  <h2> . . . </h2>  <h3> . . . </h3>  <h4> . . . </h4>  <h5> . . . </h5>  <h6>最小的标题</h6>    <p>这是一个段落。</p>  <br> （换行）  <hr> （水平线）  <!– 这是注释 –> 文本格式化（Formatting） <b>粗体文本</b> <code>计算机代码</code> <em>强调文本</em> <i>斜体文本</i> <kbd>键盘输入</kbd>  <pre>预格式化文本</pre> <small>更小的文本</small> <strong>重要的文本</strong>   <abbr> （缩写） <address> （联系信息） <bdo> （文字方向） <blockquote> （从另一个源引用的部分） <cite> （工作的名称） <del> （删除的文本） <ins> （插入的文本） <sub> （下标文本） <sup> （上标文本） 链接（Links） 普通的链接：<a href=”链接地址”>链接文本</a> 图像链接： <a href=”http://www.example.com/” rel=”external nofollow” target=”_blank” ><img src=”URL” alt=”替换文本”></a>  邮件链接： <a href=”mailto:webmaster@example.com”>发送e-mail</a> 书签： <a id=”tips”> 提示部分</a> <a href=”#tips”>跳到提示部分</a> 图片（Images） <img src=”URL” alt=”替换文本” height=”42″ width=”42″> 样式/区块（Styles/Sections） <style type=”text/css”> h1 {color:red;} p {color:blue;}  </style>     <div>文档中的块级元素</div>  <span>文档中的内联元素</span> 无序列表 <ul>    <li>项目</li>    <li>项目</li>  </ul> 有序列表 <ol>    <li>第一项</li>    <li>第二项</li>  </ol> 定义列表 <dl>    <dt>项目 1</dt>      <dd>描述项目 1</dd>    <dt>项目 2</dt>      <dd>描述项目 2</dd>  </dl> 表格（Tables） <table border=”1″>    <tr>      <th>表格标题</th>      <th>表格标题</th>    </tr>    <tr>      <td>表格数据</td>      <td>表格数据</td>    </tr>  </table> 框架（Iframe） <iframe src=”demo_iframe.htm”></iframe> 表单（Forms） <form action=”demo_form.php” method=”post/get”> <input type=”text” name=”email” size=”40″ maxlength=”50″>  <input type=”password”>  <input type=”checkbox” checked=”checked”>  <input type=”radio” checked=”checked”>  <input type=”submit” value=”Send”>  <input type=”reset”>  <input type=”hidden”>  <select>  <option>苹果</option>  <option selected=”selected”>香蕉</option>  <option>樱桃</option>  </select> <textarea name=”comment” rows=”60″ cols=”20″> </textarea>  </form> 实体（Entities） < 等同于 &lt; > 等同于 &gt; © 等同于 &copy;

HTML 表单-国外主机测评 - 国外VPS，国外服务器，国外云服务器，测评及优惠码

HTML 表单

HTML 表单和输入 HTML 表单用于收集不同类型的用户输入。 在线实例 创建文本字段 (Text field) 本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。 创建密码字段 本例演示如何创建 HTML 的密码域。 （在本页底端可以找到更多实例。） HTML 表单 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中输入内容，比如：文本域 (textarea)、下拉列表、单选框 (radio-buttons)、复选框 (checkboxes)等等。 表单使用表单标签 <form> 来设置: <form> .    input elements         . </form> HTML 表单 – 输入元素 多数情况下被用到的表单标签是输入标签（<input>）。<input> 元素是最重要的表单元素。 输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下： 文本域（Text Fields） 文本域通过 <input type=”text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。您可以在编程测试中创建文本输入框！ 实例 <form> 姓名: <input type=”text” name=”firstname”><br>        电话号码: <input type=”text” name=”lastname”>       </form> 尝试一下 » 浏览器显示如下： 姓名: 电话号码: 注意:表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是 20 个字符。 密码字段 密码字段通过标签 <input type=”password”> 来定义: 实例 <form>         密码: <input type=”password” name=”pwd”>         </form> 尝试一下 » 浏览器显示效果如下: 密码: 注意:密码字段字符不会明文显示，而是以星号或圆点替代。 单选按钮（Radio Buttons） <input type=”radio”> 标签定义了表单单选框选项。在编程测试中练习使用单选按钮！ 实例 <form>         <input type=”radio” name=”sex” value=”male”>男<br>       <input type=”radio” name=”sex” value=”female”>女        </form> 尝试一下 » 浏览器显示效果如下: 男 女 复选框（Checkboxes） <input type=”checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。在实战测试中学习使用复选框！ 实例 <form>       <input type=”checkbox” name=”vehicle” value=”Bike”>我有自行车<br>   ...

HTML URL-国外主机测评 - 国外VPS，国外服务器，国外云服务器，测评及优惠码

HTML URL

HTML 统一资源定位器 (Uniform Resource Locators) URL 是一个网页地址。 URL 可以由字母组成，如 “w3cschool.cn”，或互联网协议（IP）地址： 120.79.88.157。大多数人进入网站使用网站域名来访问，因为名字比数字更容易记住。 URL – 统一资源定位器 Web 浏览器通过 URL 从 Web 服务器请求页面。 当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。 一个统一资源定位器 (URL) 用于定位万维网上的文档。 一个网页地址实例: //www.w3cschool.cn/html/html-tutorial.html 语法规则: scheme://host.domain:port/path/filename  说明: scheme – 定义因特网服务的类型。最常见的类型是 http host – 定义域主机（http 的默认主机是 www ） domain – 定义因特网域名，比如 w3cschool.cn :port – 定义主机上的端口号（http 的默认端口号是 80 ） path – 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。 filename – 定义文档 / 资源的名称 常见的 URL Schemes 以下是一些 URL scheme： Scheme 访问 用于… http 超文本传输协议 以 http:// 开头的普通网页。不加密。 https 安全超文本传输协议 安全网页，加密所有信息交换。 ftp 文件传输协议 用于将文件下载或上传至网站。 file   您计算机上的文件。 URL 字符编码 URL 只能使用 ASCII 字符集。 URL 编码会将字符转换为可通过因特网传输的格式。来通过因特网进行发送，由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。 URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。 URL 不能包含空格。URL 编码通常使用 + 来替换空格。 在线实例 实例 如果您点击”提交”按钮，浏览器会在发送输入之前对其进行 URL 编码。服务器上的页面会显示出接收到的输入。 <form name=”input” target=”_blank” action=”form_action.php” method=”get”>...

HTML 编程实战闯关

HTML5 & CSS 课程列表 为了帮助广大学习者，做到学以致用，我们为大家准备了大量的 HTML 编程实战题，通过这些实战题，您可以一边学习一边操作，来达到巩固学习的作用。 请选择你喜欢的实战提，开始进行编程闯关。 开始学习HTML标签 HTML 学习H2标签 HTML p标签实战 清楚HTML的注释 HTML注释语句学习 HTML用占位符文本填补空白 删除HTML标签 HTML 更换文本的颜色 使用CSS选择器定义标签 使用一个CSS Class去给标签定义Style HTML 为多个元素使用CSS类定义样式 HTML 设置标签的字体大小 HTML 设置标签的字体样式 引入Google字体 HTML 处理多个字体降级 HTML 给页面添加图片 HTML 调整网页里图片大小 HTML 给标签增加边框 HTML 给标签增加圆角边框 HTML 给图像设置圆角边框 HTML 设置链接锚元素外部页面 HTML 在p标签内设置锚链接 HTML 使用#符合设置固定链接 HTML 为图片设置超链接 HTML 为图片添加alt描述 HTML 创建项目符号无序列表 HTML 创建有序列表 HTML 创建文本输入框 HTML 为文本输入框设定预定值 HTML 添加表单 HTML 为表单添加提交按钮 HTML 使用HTML5技术把表单设置为必填 HTML 添加单选框 HTML 添加复选框 HTML 使用checked属性设置复选按钮和单选按钮默认被选中 HTML 在div元素中嵌套多个元素 HTML 为div元素设置背景颜色 HTML 为标签添加ID属性 HTML 使用ID属性设置标签样式 HTML 使用padding布局页面标签 HTML 使用margin布局页面标签 HTML 使用负值设置页面元素的margin属性 HTML 为不同方向padding设置不同的值 HTML 为不同方向margin设置不同的值 HTML CSS中padding简写 HTML CSS中margin简写 CSS 样式的继承 CSS 继承Body元素样式 CSS 样式的覆盖 CSS 多个class处理样式覆盖 CSS 通过ID的样式属性覆盖class类的声明 CSS 通过内联样式覆盖class类的声明 CSS 通过使用Important覆盖所有其他样式 CSS 通过使用十六进制代码设置特定的颜色 CSS 十六进制白色表达方式 CSS 十六进制RGB红色表达方式 CSS 十六进制RGB绿色表达方式 CSS 十六进制RGB蓝色表达方式 CSS 十六进制RGB混合颜色 CSS...

HTML 脚本-国外主机测评 - 国外VPS，国外服务器，国外云服务器，测评及优惠码

HTML 脚本

HTML 脚本 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 使 HTML 页面具有更强的动态和交互性。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 在线实例 插入一段脚本 如何将脚本插入 HTML 文档。 使用 <noscript> 标签 如何应对不支持脚本或禁用脚本的浏览器。 HTML <script> 标签 <script> 标签用于定义客户端脚本，比如 JavaScript。 <script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。 JavaScript 最常用于图片操作、表单验证以及内容动态更新。 下面的脚本会向浏览器输出 “Hello World!”： 实例 <script> document.write(“Hello World!”) </script> 尝试一下 » 注释：如果使用 “src” 属性，则 <script> 元素必须是空的。 Tip: 学习更多关于 Javascript 教程，请查看 JavaScript 教程! HTML<noscript> 标签 <noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。 <noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。 只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容： 实例 <script> document.write(“Hello World!”) </script> <noscript>Sorry, your browser does not support JavaScript!</noscript> 尝试一下 » Tip: <noscript> 标签支持全局属性，查看完整属性表 HTML全局属性！ JavaScript 体验(来自本站 JavaScript 教程) JavaScript 实例代码: JavaScript 可以直接在 HTML 输出: document.write(“<p>This is a paragraph</p>”); 尝试一下 » JavaScript 事件响应: <button type=”button” onclick =”myFunction()”>Click Me!</button> 尝试一下 » JavaScript 处理 HTML 样式: document.getElementById(“demo”).style.color =”#ff0000″; 尝试一下 » 如何应付老式的浏览器 如果浏览器压根没法识别 <script> 标签，那么...