“常用标签”的版本间的差异

来自CloudWiki
跳转至： 导航， 搜索
（→‎head标签）
 
（未显示3个用户的16个中间版本）
第1行： 第1行：
−
==常用标签==
+
==最简单的网页==
−
=== html标签===
+
 
 +
*[[文件:1-13.png|40%]]
 +
 
 +
 
 +
== 文档类型标签 ==
 +
*DOCTYPE是Document Type（文档类型）的简写，在页面中，用来指定页面所使用的XHTML（或者HTML）的版本。只有确定了一个正确的DOCTYPE，XHTML里的标识和CSS才能正常生效。
 +
*<!DOCTYPE html>------声明HTML 5,现在主流浏览器都用这个声明
 +
*<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“-----声明 HTML4.01，有3种DTD（文档类型定义）声明可以选择：过渡的（Transitional）、严格的（Strict）和框架的（Frameset）。过渡型标准下，浏览器对文档的解析比较宽松。该段代码Dreamveaver中可自动生成。
 +
<br>
 +
== html标签==
 
*<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的'''头部'''和'''主体'''。
 
*<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的'''头部'''和'''主体'''。
 
*正如你所了解的那样，文档的'''头部'''由 <head> 标签定义，而'''主体'''由 <body> 标签定义。
 
*正如你所了解的那样，文档的'''头部'''由 <head> 标签定义，而'''主体'''由 <body> 标签定义。
 +
*'''动手实践'''：将以下代码粘贴到[http://www.w3school.com.cn/tiy/t.asp?f=html_intro W3C]在线测试器上:
 +
<nowiki><!doctype html>
 +
<html> 
 +
</html></nowiki>
  
 +
== 头部标签 ==
 
===head标签===
 
===head标签===
−
*<nowiki><head></head></nowiki>标签用于定义文档的头部，它是所有头部元素的容器。
+
*<nowiki><head></head></nowiki>标签用于定义文档的头部
 +
*head标签是所有头部元素的容器。
  
 
===title标签===
 
===title标签===
−
<nowiki><title></title></nowiki>
+
*<nowiki><title></title></nowiki>可定义文档的标题。
 +
*title标签一般放置在head标签里面，是它的子标签。
 +
*浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。
 +
*正如你们所见到的，title标签在页面上不可见，它实际上显示在浏览器窗口的标题栏或状态栏。
 +
=== meta标签（高级内容） ===
 +
*<meta />用于定义页面中的信息，这些信息并不显示在浏览器中，该标记能够提供文档的关键字、作者及描述等多种信息，在头部可以包含任意数量的<meta />标记
 +
*更多介绍请看 [[meta标记详解]]
 +
 
 +
===link标签===
 +
一个页面允许使用多个<nowiki><link /></nowiki>标记引用多个外部文件。例如：
 +
 
 +
<nowiki><link rel="stylesheet" href="public/css/liMarquee.css">
 +
<link href="/Templets/mode3/images/style.css" rel="stylesheet" type="text/css" >
 +
<link href="/Templets/mode3/images/slideshow.css"  rel="stylesheet" /></nowiki> 
 +
 
 +
==主体标签==
 
===body标签===
 
===body标签===
−
<nowiki><body></body></nowiki>  
+
*<nowiki><body></body></nowiki>标签定义文档的主体。
−
===p标签===
+
*body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
−
<nowiki><p></p></nowiki>
+
*'''动手实践'''：在[http://www.w3school.com.cn/tiy/t.asp?f=html_intro W3C]在线测试器上，为刚才的代码添加head和body标签:
 +
*注意:编写网页标签的时候，内层标签最好向里缩进两格，以方便阅读。
 +
<nowiki><!doctype html>
 +
<html>
 +
    <head>
 +
    </head>
 +
    <body>
 +
    </body>
 +
</html></nowiki>
 
===h1系列标签===
 
===h1系列标签===
−
<nowiki><h1></h1>………
+
*<nowiki>真正在页面上充当标题的是h系列标签，<h1></h1>………<h6></h6></nowiki>。
−
<h6></h6></nowiki>
+
*<nowiki><h1></nowiki> 定义最大的标题。<nowiki><h6></nowiki> 定义最小的标题。
 +
 
 
===hr标签===
 
===hr标签===
−
<nowiki><hr /></nowiki>
+
*<nowiki><hr /></nowiki><hr> 标签在 HTML 页面中创建一条水平线。
 +
*水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。
 +
*hr标签只有一个，不是成对出现的。
 +
 
 +
===p标签===
 +
*<nowiki><p></p></nowiki>标签定义段落。
 +
*p 元素会自动在其前后创建一些空白，以使得页面均匀好看。
 +
*'''动手实践'''：在[http://www.w3school.com.cn/tiy/t.asp?f=html_intro W3C]在线测试器上，为刚才的代码添加title和p元素:
 +
<nowiki><!doctype html>
 +
<html>
 +
    <head>
 +
        <title>我的项目</title>
 +
    </head>
 +
    <body>
 +
        <p>欢迎来到我的项目，欢迎各位大神洽谈合作！</p>
 +
    </body>
 +
</html></nowiki>
 +
 
 +
 
 +
 
 +
 
 +
==实训任务==
 +
参照以下代码，使用记事本和HbuilderX分别尝试建立HTML页面
 +
 
  
−
==示例代码==
+
  <nowiki><!DOCTYPE html>
−
*以下的示例代码里以上标签几乎都使用了:
+
<html>
−
  <nowiki><!DOCTYPE html >
+
<head>
−
<head>
+
<meta charset="utf-8">
−
<meta charset=“utf-8”/>
+
<title>第一个HTML页面</title>
−
<title>第一个HTML页面</title>
+
</head>
−
</head>
+
<body>
−
<body>
+
  <h2 style="text-align:center; color:blue" >这是HTML页面</h2>
−
  <h2>这是HTML页面</h2>
+
<hr />         
−
  <hr />         
+
  <p style="color:red">我们在学习HTML+CSS+JavaScript。</p>
−
  <p>我们在学习HTML+CSS+JavaScript。</p>
+
</body>
−
</body>
 
 
</html></nowiki>
 
</html></nowiki>
−
 
−
返回 [[网页设计与开发]]
 

2020年10月21日 (三) 10:17的最新版本

最简单的网页

  • 40%


文档类型标签

  • DOCTYPE是Document Type（文档类型）的简写，在页面中，用来指定页面所使用的XHTML（或者HTML）的版本。只有确定了一个正确的DOCTYPE，XHTML里的标识和CSS才能正常生效。
  • <!DOCTYPE html>------声明HTML 5,现在主流浏览器都用这个声明
  • <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“-----声明 HTML4.01，有3种DTD（文档类型定义）声明可以选择：过渡的（Transitional）、严格的（Strict）和框架的（Frameset）。过渡型标准下，浏览器对文档的解析比较宽松。该段代码Dreamveaver中可自动生成。


html标签

  • <html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。
  • 正如你所了解的那样，文档的头部由 <head> 标签定义，而主体由 <body> 标签定义。
  • 动手实践：将以下代码粘贴到W3C在线测试器上:
<!doctype html>
 <html>  
 </html>

头部标签

head标签

  • <head></head>标签用于定义文档的头部
  • head标签是所有头部元素的容器。

title标签

  • <title></title>可定义文档的标题。
  • title标签一般放置在head标签里面，是它的子标签。
  • 浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。
  • 正如你们所见到的，title标签在页面上不可见，它实际上显示在浏览器窗口的标题栏或状态栏。

meta标签（高级内容）

  • <meta />用于定义页面中的信息，这些信息并不显示在浏览器中，该标记能够提供文档的关键字、作者及描述等多种信息，在头部可以包含任意数量的<meta />标记
  • 更多介绍请看 meta标记详解

link标签

一个页面允许使用多个<link />标记引用多个外部文件。例如： 

<link rel="stylesheet" href="public/css/liMarquee.css">
<link href="/Templets/mode3/images/style.css" rel="stylesheet" type="text/css" >
<link href="/Templets/mode3/images/slideshow.css"  rel="stylesheet" />

主体标签

body标签

  • <body></body>标签定义文档的主体。
  • body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
  • 动手实践：在W3C在线测试器上，为刚才的代码添加head和body标签:
  • 注意:编写网页标签的时候，内层标签最好向里缩进两格，以方便阅读。
<!doctype html>
 <html>
    <head>
    </head>
    <body>
    </body>
 </html>

h1系列标签

  • 真正在页面上充当标题的是h系列标签，<h1></h1>………<h6></h6>。
  • <h1> 定义最大的标题。<h6> 定义最小的标题。

hr标签

  • <hr />
    标签在 HTML 页面中创建一条水平线。
  • 水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。
  • hr标签只有一个，不是成对出现的。

p标签

  • <p></p>标签定义段落。
  • p 元素会自动在其前后创建一些空白，以使得页面均匀好看。
  • 动手实践：在W3C在线测试器上，为刚才的代码添加title和p元素:
<!doctype html>
 <html>
    <head>
        <title>我的项目</title>
    </head>
    <body>
        <p>欢迎来到我的项目，欢迎各位大神洽谈合作！</p>
    </body>
 </html>



实训任务

参照以下代码，使用记事本和HbuilderX分别尝试建立HTML页面 


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个HTML页面</title>
	</head>
	<body>
   		<h2 style="text-align:center; color:blue" >这是HTML页面</h2>
 		<hr />        
  		<p style="color:red">我们在学习HTML+CSS+JavaScript。</p>
	</body>
</html>
取自“http://www.openbrains.net/mediawiki/index.php?title=常用标签&oldid=23022”