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

html教程 第5页

HTML 超链接

HTML超链接 超链接为HTML提供了基础，用户可以通过HTML在同一文档内和跨页面浏览内容。 您可以使用 a 元素创建超链接。 属性 a 元素具有局部属性: href，hreflang，media，rel，target，type 。 href – 指定a元素引用的资源的URL。 hreflang – 指定链接资源的语言。 media – 指定链接内容用于的设备。此属性与头元素元素使用相同的设备和特征值。 rel – 指定文档和链接资源之间的关系类型。此属性使用与链接元素的rel属性相同的值。 target – 指定应在其中打开链接资源的浏览上下文。 type – 指定链接资源的MIME类型，例如text/html。 id，coords，shape，urn，charset，methods 和 rev 属性已过时。 外部超链接 您可以通过将元素中的href属性设置为以http://开头的URL来创建指向其他HTML文档的超链接。 当用户单击超链接时，浏览器将加载指定的页面。 以下代码显示用于链接到外部内容的a元素。 <!DOCTYPE HTML> <html> <body> I like <a href="http://www.w3cschool.cn">w3cschool</a>. </body> </html> 注意 并非所有网址都必须引用其他网页。 浏览器还支持其他协议，如 https 和 ftp 。如果要引用电子邮件地址，可以使用 mailto 协议; 例如， mailto:info@example.com 。 相对网址 如果 href 属性的值不以start开头识别的协议，例如 http:// 那么浏览器将超链接视为相对引用。 以下代码给出了相对URL的示例。 <!DOCTYPE HTML> <html> <body> I like <a href="index.html">w3cschool</a>. </body> </html> 代码将 href 属性设置为 index.html 。 当用户单击链接时，浏览器使用的URL当前文档以确定如何加载链接的页面。 内部超链接 您可以创建超链接，使浏览器窗口中的另一个元素进入视图。 您可以使用CSS样式ID选择器#id创建内部超链接，如以下代码所示。 <!DOCTYPE HTML> <html> <body> <a href="#w3cschool">here</a>. <br /> <br /> <br /> <br /> <br /> <br /> <p id="w3cschool">This is a test.</p> </body> </html> 上面的代码用 href 创建了一个超链接 #tutorial 的值。 当用户单击链接时，浏览器将在文档中查找元素其 id 属性的值为 tutorial 。如果元素不可见屏幕，浏览器将滚动文档以显示它。 如果浏览器不能找到具有所需...

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

HTML figure

HTML figure figure 和 figcaption 元素 figure标签规定独立的流内容（图像、图表、照片、代码等等）。 figure元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。 figcaption元素被用来为figure元素定义标题。 例子 你可以在下面的代码中看到一起使用的 figure 和 figcaption 元素。 <!DOCTYPE HTML> <html> <body> I like XML and CSS. <figure> <figcaption>Listing 01. Using the code element</figcaption> <code> var fruits = ["CSS", "HTML", "CSS", "Javascript"];<br> document.writeln("I like " + fruits.length + " fruits"); </code> </figure> </body> </html> 上面的代码渲染如下:

HTML 脚本

HTML脚本 script元素可以包括您的页面中的脚本，在文档中内联定义或引用外部文件。 最常用的脚本类型是JavaScript。 对每个脚本使用一个script元素。 script元素具有局部属性: type，src，defer，async，charset 。 script 元素的开始和结束标记是必需的；即使引用外部JavaScript库时，也不允许使用自关闭标记。 在HTML5中， type 属性是可选的。在HTML5中添加了 async 和 defer 属性。 type – 指定引用或定义的脚本的类型。对于JavaScript脚本，可以省略此属性。 src – 指定外部脚本文件的URL。 defer – 指定如何执行脚本。这些属性只能与src属性结合使用。 async – 指定如何执行脚本。这些属性只能与src属性结合使用。 charset – 指定外部脚本文件的字符编码。此属性只能与src属性结合使用。 内联脚本 HTML页面中的JavaScript语句包含内联脚本。 <!DOCTYPE HTML> <html> <head> <script> document.write("This is from the script"); </script> </head> <body> <p>This is a test.</p> <a href="http://www.w3cschool.cn">Visit www.w3cschool.cn</a> </body> </html> 默认情况下，脚本在页面中遇到时立即执行。您通常使用 head 元素中的 script 元素，但您可以在HTML文档中的任何位置使用它。 外部脚本 您可以将脚本分成单独的文件，并使用script元素加载它们。 假设我们有一个名为 simple.js 的文件，其内容如下面代码所示。 document.write("This is from the external script"); 该文件包含单个语句。然后，我们可以使用script元素中的 src 属性来引用此文件。 如果使用 src 属性，则脚本元素必须为空。您不能使用相同的脚本元素来定义内联脚本和外部脚本。 以下代码显示如何使用外部脚本。 <!DOCTYPE HTML> <html> <head> <script src="simple.js"></script> </head> <body> <p>This is a test.</p> <a href="http://www.w3cschool.cn">Visit www.w3cschool.cn</a> </body> </html> src 属性的值是要加载的脚本文件的URL。 simple.js 文件与HTML文件位于同一目录中。 需要脚本元素的结束标记，即使元素没有内容。如果在引用外部脚本时使用自动关闭标记，浏览器将忽略该元素，而不加载文件。 延迟脚本 你可以通过使用 async 和 defer 属性来控制脚本的执行。 defer 属性指示浏览器在页面加载和解析之前不执行脚本。 要了解defer属性的好处，让我们看看它解决的问题。 假设 simple2.js 脚本文件具有如下所列的单个语句。 document.getElementById("myID").innerText = "myValue"; 当此脚本运行时，它将找到一个 id 属性值为 myID 的元素，并将该元素的内部文本更改为...

HTML CSS百科及常用嵌入方式-国外主机测评 - 国外VPS，国外服务器，国外云服务器，测评及优惠码

HTML CSS百科及常用嵌入方式

HTML样式- CSS CSS（Cascading Style Sheet）可译为“层级样式表”或“层叠样式表 ”，它决定如何显示HTML元素，用于控制网页界面的外观。通过使用CSS实际页面的内容与表格形式分离，极大提高了工作效率。样式存储在样式表中，通常释放于<head>部分或存储在外部CSS文件中。作为网页标准设计的趋势，CSS得了渗透浏览器厂商的广泛支持，正越来越多被应用到网页设计中去。 网页现在的新标准是W3C。目前的模式是Html + Css + Javascript ，怎么理解呢，就是Html是网页的结构，CSS是网页的样式，Javascript是行为。结构就是盖房子先要把结构建出来，然后用CSS来装饰。其实你在用Dreamweaver做网页的时候就已经用到了CSS，比你用DW的属性面板来设置一个字体、颜色和大小，当你选好后，就会自动生成一个。 style1红色代码，在 <style></style> 之间不知道你注意到没有，这就是 CSS。 CSS (Cascading Style Sheets) 使用于渲染 HTML 元素标签的样式。 看！款式和颜色 操纵文本 颜色，  盒子 和更多… 尝试一下 » 尝试一下 – 实例 HTML 使用样式 本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行样式化。 本例演示如何使用类型属性做一个没有下线的链接。 如何使用类型属性做一个没有下线的链接。 链接到一个外部样式 显示示例如何显示 标记链接到一个外部样式显示。 如何使用 CSS CSS 是在 HTML 4 开始使用的，是为了更好的染 HTML 元素而引入的。 CSS 可以通过以下方式添加到 HTML 中： 内联样式- HTML 元素中使用”style”属性 内部样式表 – HTML 文档头部 <head> 区域使用 <style>元素 来包含 CSS 外部引用 – 使用外部 CSS文件 最好的方式是通过外部引用CSS文件。 在本站的HTML教程中我们使用了内联CSS样式来介绍实例，这是为了简单化的实例，也使你能够足够容易更多在线编辑代码并在线运行实例。 你可以通过本站的 CSS 教程CSS 教程学习更多的 CSS 知识，或者学习者学习更容易理解的  CSS 微课 。 内联式 当特殊的样式需要应用到个别元素时，就可以使用内部样式，你可以在<head>部分通过<style>标签确定内部样式表。内部连接样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示如何更改部分分解下的颜色。 例子 <p style=”color:blue;margin-left:20px;”>这是一个段落。</p> 学习更多样式，请访问CSS教程 。 HTML样式实例 – 背景颜色 背景颜色属性（background-color）定义一个元素的背景颜色： 例子 <!DOCTYPE html> <html> <body style=”background-color:yellow;”> <h2 style=”background-color:red;”>This is a heading</h2> <p style=”background-color:green;”>This is a paragraph.</p> </body> </html> 试一试 » 早期背景颜色（background-color）是使用 bgcolor 属性指定。...

HTML 头部

HTML <head> HTML 头部元素包含关于文档的概要信息，也被称为元信息（meta-information）。 查看在线实例 <title> – 定义了HTML文档的标题 使用 <title> 标签定义HTML文档的标题 <base> – 定义了所有链接的URL 使用 <base> 定义页面中所有链接默认的链接目标地址。 <meta> – 提供了HTML文档的meta标记 使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。 HTML <head> 元素 <head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta 信息。 可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。 <head> 元素描述了文档的各种属性和信息，其中包括文档的标题、在 Web 中的位置以及和其他文档的关系等。 HTML <title> 元素 <title> 标签定义了不同文档的标题。 title 在 HTML/XHTML 文档中是必须的。 title 元素: 定义了浏览器工具栏的标题 当网页添加到收藏夹时，显示在收藏夹中的标题 显示在搜索引擎结果页面的标题 一个简单的 HTML 文档: 实例 <!DOCTYPE html>       <html>         <head>         <title>编程狮(w3cschool.cn)</title>         </head>                 <body>        w3cschool随时随地学编程！          </body>                 </html> 尝试一下 » HTML <base> 元素 <base> 标签描述了基础的链接地址/链接目标，该标签作为HTML文档中所有的链接 规定默认地址或默认目标（target）： <head>        <base href=”//www.w3cschool.cn/images/” target=”_blank”>       </head> 提示：在 HTML 中，<base> 标签没有绑定标签；在 XHTML 中，<base> 标签必须被正确关闭。 HTML <link> 元素 <link> 标签确定了文档与外部资源之间的关系。 <link> 标签通常用于链接到样式表： <head>        <link rel=”stylesheet” type=”text/css” href=”mystyle.css”>         </head> HTML <style> 元素 <style> 标记定义了HTML文档的样式文件引用地址。 在<style>元素中你需要指定格式的文件来自流染HTML文件： 实例 <head>         <style type=”text/css”>         body {background-color:yellow}         p {color:blue}         </style>         </head>...

HTML 文本格式化-国外主机测评 - 国外VPS，国外服务器，国外云服务器，测评及优惠码

HTML 文本格式化

HTML 文本格式化 HTML中存在一些格式化文本的标签，它们可以被直接使用，而不用您再去写格式进行调整。 实例 <b>加粗文本</b><br><br> <i>斜体文本</i><br><br> <code>电脑自动输出</code><br><br> 这是 <sub> 下标</sub> 和 <sup> 上标</sup> 试一试 » HTML 格式化标签 HTML 使用标签 <b>(“bold”) 与 <i>(“italic”) 对输出的文本进行格式，如：粗体 或 斜体 这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）。 常用标签 <strong> 替换加粗标签 <b> 来使用， <em> 替换 <i> 标签使用。 然而，这些标签的含义是不同的： <b> 与 <i> 确定义粗体或斜体文本。 < strong> 或者 <em> 意思着你要现在的文本是重要的，所以要突显出来。 现在所有主要浏览器都能够冲洗各种效果的字体。不过，未来浏览器具可能会支持更好的冲洗效果。 本站实例 文本格式化 此示例如何在一个HTML文件中对文本进行格式化进行说明 预期格式文本 此示例演示如何使用 pre 标签对空行和空行控制。 “计算机输出”标记 此示例显示不同的”计算机输出”标记的显示效果。 地址 此示例如何在 HTML 文件中写入地址。 缩写和首字母缩写 此示例演示如何实际缩写或首字母缩写。 文字方向 这个例子说明如何改变文字的方向。 块引用 这个例子说明如何实际长短不一的引用语言。 删除字符效果和插入字符效果 此示例演示如何标记删除文本和插入文本。 HTML 格式化标签 标签 描述 <b> 定义粗体文本 <em> 定义着重文字 <i> 定义斜体字 <small> 定义小号字 <strong> 定义加重语气 <sub> 定义下标字 <sup> 定义上标字 <ins> 定义插入字 <del> 定义删除字 HTML “计算机输出” 标签 标签 描述 <code> 定义计算机代码 <kbd> 定义键盘码 <samp> 定义计算机代码样本 <var> 定义变化量 <pre> 定义预测式文本 HTML 引文, 引用, 及标签指定义 标签 描述 <abbr> 定义缩小写 <address> 定义地址 <bdo> 定义文字方向 <blockquote> 定义长的引用 <q> 定义短的引用语 <cite> 定义引用、引证 <dfn> 定义一个定义项目。

精选多个程序员都想要的免费HTML模板下载-国外主机测评 - 国外VPS，国外服务器，国外云服务器，测评及优惠码

精选多个程序员都想要的免费HTML模板下载

近几年来，随着互联网的不断急剧发展，建站需求量激增，越来越多的个人和是企业都开设建设属于自己的网站，用来做电商营销或个人网站博客等用途。我们都知道正儿八经建设一个网站是耗时耗力的，所以，与其花费大量时间码出一个网站不如套用一个HTML模板再做修改就可以速成一个高逼格的网站，对于小型企业和不懂设计网站的个人来说使用HTML模板是最方便快捷的建站方式，下面w3cschool就给大家推荐一些设计优秀的HTML模板，供君参考。 THOMSOON 适合个人或工作到作品展示的响应式模板  下载地址 SeFolio 一个单页模板，透明设计风格，若搭配一个漂亮的全屏背景图像，一定会很有感觉。  下载地址   Finec 宫格式布局，用来展示作品、照片的个人网站比较适合。  下载地址 Lithium 网页布局很好的一个模板，UI设计可以用作自己的作品集展示，而且修改简单，把几个作品替换一下，写个简介神马的。 下载地址 Halcyon Days 一个流行时尚的网页模板，CSS3动画渐显效果很棒。 下载地址 Directive 一个由HTML5+CSS3编写的网页模板，网页的头部设计很好看。 下载地址 Dashgum 配色美丽的管理后台界面模板。 下载地址 Ophiuchus HTML5/CSS3 Template 这网页无论是视觉设计还是交互设计都非常棒！完美把握设计趋势，是一个不错的HTML模板。 下载地址 Linear 下载地址 Iridum 下载地址 Infusion 这模板除了包含HTML源码外，还附有该网页的PSD文件，新手们可以下载来学习学习啦。 下载地址 Magnetic 导航固定在左侧的网站模板，适合展示图像、作品集。 下载地址 Sssoon Coming soon、网站建设中类型模板，全屏背景，很有Feel，基于Bootstrap 3框架制作。这个免费的网站制作中模板有多个配色方案以及4个背景选择，每个都很漂亮，有的是全屏视屏背景，很不错！ 下载地址 Woo woo是一个干净、时尚的着陆页模板，全屏屏的设计，兼容流行的浏览器和移动端设备，适合用于APP、服务类网站。 下载地址 图书介绍模板 如果你正在推一本新书，那么这个图标介绍类模板就很适合你了 下载地址 美食餐饮模板：MEAT KING 现在流行使用微信订餐，美食餐饮类等餐厅的网站都火起来，都想做一个兼容手机浏览的网站，这个模板就非常适合了。 下载地址 Office 一个欧美简约风格的企业站模板，响应式设计，兼容手机端浏览。 下载地址 Eco Travel 适用于旅游类的网站模板 下载地址 使用HTML模板的优势？ 1、您可以轻松地修改网站模板，然后套用上自己的内容和图片变成自己的项目 2、网站模板一般都建好了专业的HTML和CSS编码。任何人都可以轻松地设置自己的网站而不需要聘请专业的设计师和开发人员 3、一些设计师也可以使用这些模板来为他们的客户创建具有专业外观的网站 4、使用网站模板后的成本效益是最高的 如何在Dreamweaver中使用网页模板 不是每个模板都能在Dreamweaver中使用的!   模板基本分为四大类:   1、psd模版 2、flash模版 3、html模版 4、PNG模版   PSD模版需要专业的软件打开，不能像html模版那样直接使用。后缀名是.psd;这种类型的模版是最好的，也是我们重点推荐的。因为他把模版上的元素分为一个一个的层，设计起来十分方便。同时也可以任意切割成自己喜欢的布局！常用的打开软件fireworks、photoshop。   flash模版如果包含.fla源文件，那么打开就需要flash软件。   html模版就是平常的模版了,直接使用Frontpage或者Dreamweaver打开即可，这里就不介绍了。 PNG模版的处理方法跟PSD模版类似，推荐使用Fireworks处理。

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

HTML 简介

HTML 简介 现在您可以通过如下的一个 HTML 实例来建立一个简单的 HTML 页面，以此来简单了解一下 HTML 的结构。 HTML 实例 <!DOCTYPE html> <html> <head>     <title>页面标题(w3cschool.cn)</title> </head> <body>     <h1>我是第一个标题</h1>         <p>我是第一个段落。</p> </body> </html> 尝试一下 » 点击“尝试一下”按钮查看在线实例 实例解析 DOCTYPE声明了文档的类型 <html>标签是 HTML 页面的根元素，该标签的结束标志为</html> <head>标签包含了文档的元数据（meta），如<meta charset="utf-8">定义网页编码格式为utf-8。 <title>标签定义文档的标题 <body>标签定义文档的主体，即网页可见的页面内容，该标签的结束标志为</body> <h1>标签作为一个标题使用，该标签的结束标志为</h1>，–　HTML标题 <p>标签作为一个段落显示，该标签的结束标志为</p>— p标签用法 <!DOCTYPE html> 在 HTML5 中也是描述了文档类型。 什么是 HTML? HTML 语言用于描述网页。 HTML 是指超文本标记语言: Hyper Text Markup Language HTML 不是一种编程语言，而是一种标记语言 标记语言是一套标记标签 ( markup tag ) HTML 使用标记标签来描述网页 HTML 文档包含了 HTML 标签及文本内容 HTML 文档也叫做 web 页面 HTML 标签 HTML 标记标签通常被称为 HTML 标签 ( HTML tag )。您可以在 W3Cschool 的编程实战部分开始学习 HTML 标签。 HTML 标签是由 尖括号 包围的关键词，比如<html> HTML 标签通常是 成对出现 的，比如<b>和</b> 标签对中的第一个标签是开始标签，第二个标签是 结束标签 开始和结束标签也被称为开放标签 和 闭合标签 <标签>内容</标签> HTML 元素 “HTML 标签” 和 “HTML 元素” 通常都是描述相同的意思。 但是严格来讲，一个 HTML元素包含了开始标签与结束标签，如下实例: HTML 元素: <p>这是一个段落。</p> Web 浏览器 Web 浏览器（如谷歌浏览器、Internet Explorer、Firefox 和 Safari ）是用于读取 HTML 文件，并将其作为网页显示。 Web 浏览器不会直接显示 HTML 标签，而是通过使用标签来决定如何向用户展现 HTML 页面的内容： HTML 网页结构...

HTML 教程导读

HTML 教程导读- （HTML5标准） HTML（英语：Hyper Text Markup Language，简称：HTML ）也叫作超文本标记语言，是一种使用结构化 Web 网页及其内容的标记语言，您可以使用 HTML 来建立自己的 WEB 站点。 通过学习本教程，您可以使用 HTML 来创建站点。 HTML 是非常容易学习的！相信您可以很快学会它！  HTML 实例 在本教程中的每个章节中都会提供一定量的实例，使用本站的编辑器，在线运行并修改这些实例，您可以深入掌握 HTML ！ 实例 <!DOCTYPE html> <html>     <title>页面标题(w3cschool.cn) </title> <body>     <h1>我的第一个标题</h1>     <p>我的第一个段落。</p> </body> </html> 尝试一下» 点击“尝试一下”按钮查看在线实例 HTML 实战闯关 我们为学习者准备逐步的 HTML 编程实战练习，供大家通过亲自编程实验来熟练编程操作。 开始HTML编程闯关 HTML 实例 在HTML手册中包含了数千个在线实例，您可以在线编辑并查看运行结果。 查看HTML实例！ HTML 参考手册 在 W3Cschool 教程中，我们提供了完整的 HTML 参考手册，其中包括标签，属性，颜色，实体等等。 HTML标签参考手册

HTML 文件路径

路径 描述 <img src=”logo.jpg”> logo.jpg 位于与当前网页相同的文件夹 <img src=”logo/logo.jpg”> logo.jpg 位于当前文件夹的 logo文件夹中 <img src=”/logo/logo.jpg”> logo.jpg 位于当前站点根目录的 logo 文件夹中 <img src=”../logo.jpg”> logo.jpg 位于当前文件夹的上一级文件夹中 HTML 文件路径 文件路径描述了网站文件夹结构中某个文件的位置。 文件路径会在链接外部文件时被用到： 网页 图像 样式表 JavaScript 绝对文件路径 绝对文件路径是指向一个因特网文件的完整 URL： 实例 <img src="https://www.w3cschool.cn/statics/img/logo/indexlogo@2x.png" alt="Logo"> <img> 标签以及 src 和 alt 属性在 HTML 图像这一章做了讲解。 相对路径 相对路径指向了相对于当前页面的文件。 在本例中，文件路径指向了位于当前网站根目录中 logo 文件夹里的一个文件： 实例 <img src="/statics/img/logo/indexlogo@2x.png" alt="Logo"> 在本例中，文件路径指向了位于当前文件夹中 logo 文件夹里的一个文件： 实例 <img src="statics/img/logo/indexlogo@2x.png" alt="Logo"> 在本例中，文件路径指向了位于当前文件夹的上一级文件夹中 logo 文件夹里的一个文件： 实例 <img src="../statics/img/logo/indexlogo@2x.png" alt="Logo"> 好习惯 使用相对路径是个好习惯（如果可能）。 如果使用了相对路径，那么您的网页就不会与当前的基准 URL 进行绑定。所有链接在您的电脑上 (localhost) 或未来的公共域中均可正常工作。