“常用标签”的版本间的差异
来自CloudWiki
| 第3行： | 第3行： | ||
*<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的'''头部'''和'''主体'''。 | *<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的'''头部'''和'''主体'''。 | ||
*正如你所了解的那样，文档的'''头部'''由 <head> 标签定义，而'''主体'''由 <body> 标签定义。 | *正如你所了解的那样，文档的'''头部'''由 <head> 标签定义，而'''主体'''由 <body> 标签定义。 | ||
| − | * | + | *'''动手实践'''：将以下代码粘贴到[http://www.w3school.com.cn/tiy/t.asp?f=html_intro W3C]在线测试器上: |
<nowiki><!doctype html> | <nowiki><!doctype html> | ||
<html> | <html> | ||
| 第15行： | 第15行： | ||
*<nowiki><body></body></nowiki>标签定义文档的主体。 | *<nowiki><body></body></nowiki>标签定义文档的主体。 | ||
*body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。） | *body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。） | ||
| − | * | + | *'''动手实践'''：在[http://www.w3school.com.cn/tiy/t.asp?f=html_intro W3C]在线测试器上，为刚才的代码添加head和body标签: |
*注意:编写网页标签的时候，内层标签最好向里缩进两格，以方便阅读。 | *注意:编写网页标签的时候，内层标签最好向里缩进两格，以方便阅读。 | ||
<nowiki><!doctype html> | <nowiki><!doctype html> | ||
| 第33行： | 第33行： | ||
*<nowiki><p></p></nowiki>标签定义段落。 | *<nowiki><p></p></nowiki>标签定义段落。 | ||
*p 元素会自动在其前后创建一些空白，以使得页面均匀好看。 | *p 元素会自动在其前后创建一些空白，以使得页面均匀好看。 | ||
| − | * | + | *'''动手实践'''：在[http://www.w3school.com.cn/tiy/t.asp?f=html_intro W3C]在线测试器上，为刚才的代码添加title和p元素: |
<nowiki><!doctype html> | <nowiki><!doctype html> | ||
<html> | <html> | ||
| 第46行： | 第46行： | ||
===h1系列标签=== | ===h1系列标签=== | ||
| − | *<nowiki><h1></h1>………<h6></h6></nowiki> | + | *<nowiki>真正在页面上充当标题的是h系列标签，<h1></h1>………<h6></h6></nowiki>。 |
*<nowiki><h1></nowiki> 定义最大的标题。<nowiki><h6></nowiki> 定义最小的标题。 | *<nowiki><h1></nowiki> 定义最大的标题。<nowiki><h6></nowiki> 定义最小的标题。 | ||
| − | |||
===hr标签=== | ===hr标签=== | ||
*<nowiki><hr /></nowiki><hr> 标签在 HTML 页面中创建一条水平线。 | *<nowiki><hr /></nowiki><hr> 标签在 HTML 页面中创建一条水平线。 | ||
*水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。 | *水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。 | ||
| − | * | + | *hr标签只有一个，不是成对出现的。 |
| − | == | + | |
| − | * | + | ==本节最终代码== |
| − | <nowiki><! | + | *'''动手实践'''：以下是本节的最终代码，又添加了h标签和hr标签 |
| − | < | + | *你可以在[http://www.w3school.com.cn/tiy/t.asp?f=html_intro W3C]在线测试器上试一试: |
| − | < | + | <nowiki><!doctype html> |
| − | <title> | + | <html> |
| − | </head> | + | <head> |
| − | <body> | + | <title>我的项目</title> |
| − | + | </head> | |
| − | + | <body> | |
| − | + | <h2>我的项目</h2> | |
| − | </body> | + | <hr /> |
| − | </html></nowiki> | + | <p>欢迎来到我的项目，欢迎各位大神洽谈合作！</p> |
| − | * | + | </body> |
| + | </html></nowiki> | ||
| + | * 从以上代码可以看出 | ||
| + | **遇有标签嵌套的情况，子标签最好在父标签基础上向里缩进两格，以方便阅读； | ||
| + | **而对于同一级的标签，如h2和hr，他们头部对齐就可以了； | ||
返回 [[网页设计与开发]] | 返回 [[网页设计与开发]] | ||
2017年10月1日 (日) 03:28的版本
常用标签
html标签
- <html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。
- 正如你所了解的那样，文档的头部由 <head> 标签定义，而主体由 <body> 标签定义。
- 动手实践：将以下代码粘贴到W3C在线测试器上:
<!doctype html> <html> </html>
head标签
- <head></head>标签用于定义文档的头部
- head标签是所有头部元素的容器。
body标签
- <body></body>标签定义文档的主体。
- body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
- 动手实践：在W3C在线测试器上，为刚才的代码添加head和body标签:
- 注意:编写网页标签的时候，内层标签最好向里缩进两格，以方便阅读。
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
title标签
- <title></title>可定义文档的标题。
- title标签一般放置在head标签里面，是它的子标签。
- 浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。
p标签
- <p></p>标签定义段落。
- p 元素会自动在其前后创建一些空白，以使得页面均匀好看。
- 动手实践：在W3C在线测试器上，为刚才的代码添加title和p元素:
<!doctype html>
<html>
<head>
<title>我的项目</title>
</head>
<body>
<p>欢迎来到我的项目，欢迎各位大神洽谈合作！</p>
</body>
</html>
- 正如你们所见到的，title标签在页面上不可见，它实际上显示在浏览器窗口的标题栏或状态栏。
h1系列标签
- 真正在页面上充当标题的是h系列标签，<h1></h1>………<h6></h6>。
- <h1> 定义最大的标题。<h6> 定义最小的标题。
hr标签
- <hr />
标签在 HTML 页面中创建一条水平线。 - 水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。
- hr标签只有一个，不是成对出现的。
本节最终代码
- 动手实践：以下是本节的最终代码，又添加了h标签和hr标签
- 你可以在W3C在线测试器上试一试:
<!doctype html>
<html>
<head>
<title>我的项目</title>
</head>
<body>
<h2>我的项目</h2>
<hr />
<p>欢迎来到我的项目，欢迎各位大神洽谈合作！</p>
</body>
</html>
- 从以上代码可以看出
- 遇有标签嵌套的情况，子标签最好在父标签基础上向里缩进两格，以方便阅读；
- 而对于同一级的标签，如h2和hr，他们头部对齐就可以了；
返回 网页设计与开发
