“HTML 教程”的版本间差异

本页内容
Neo讨论 | 贡献
(文本替换 - 替换“试试看效果”为“尝试一下”)
 
(未显示同一用户的8个中间版本)
第1行: 第1行:
[[Category:HTML教程|1]]
超文本标记语言(英语:'''H'''yperText '''M'''arkup '''L'''anguage,简称:HTML)是一种用于创建网页的标准标记语言。HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。浏览器可以读取HTML文件,并将其渲染成可视化网页。
超文本标记语言(英语:'''H'''yperText '''M'''arkup '''L'''anguage,简称:HTML)是一种用于创建网页的标准标记语言。HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。浏览器可以读取HTML文件,并将其渲染成可视化网页。


== HTML 实例 ==
== HTML 实例 ==
使用我们的“试试看效果”可以打开在线编辑器,然后编辑 HTML 代码并查看结果:shi
“尝试一下”可以打开在线编辑器,然后编辑 HTML 代码并查看结果:
<sample title="" desc="" hererun="s1">
<sample title="" desc="" hererun="s1">
<!DOCTYPE html>
<!DOCTYPE html>
第32行: 第33行:
* <nowiki><p> 元素定义了一个段落</nowiki>
* <nowiki><p> 元素定义了一个段落</nowiki>


== HTML 标签 ==
{{HTML元素基本知识}}
HTML 元素由开始标签、内容和结束标签组成:
{{HTML页面基本结构}}
 
<syntaxhighlight lang="python" line>
<标签名> 内容在这里... </标签名>
 
</syntaxhighlight>
<blockquote>
<nowiki>
一些 HTML 标签不需要内容(如 <br> 换行标签)。这些元素称为空元素。空元素没有结束标签!</nowiki>
</blockquote>
 
== HTML页面结构 ==
 
<html>
<div class="ws-grey" style="width:99%;border:1px solid grey;padding:3px;margin:0;"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">&lt;html&gt;
</font></font><div style="width:90%;border:1px solid grey;padding:3px;margin:20px"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">&lt;head&gt;
</font></font><div style="width:90%;border:1px solid grey;padding:5px;margin:20px"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">&lt;title&gt;页面标题&lt;/title&gt;
</font></font></div><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
&lt;/head&gt;
</font></font></div>
<div class="ws-grey" style="width:90%;border:1px solid grey;padding:3px;margin:20px;"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">&lt;body&gt;
</font></font><div class="w3-white" style="width:90%;border:1px solid grey;padding:3px;margin:20px;">
<div style="width:90%;border:1px solid grey;padding:5px;margin:20px"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">&lt;h1&gt;这是一个标题&lt;/h1&gt;</font></font></div>
<div style="width:90%;border:1px solid grey;padding:5px;margin:20px"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">&lt;p&gt;这是一个段落。&lt;/p&gt;</font></font></div>
<div style="width:90%;border:1px solid grey;padding:5px;margin:20px"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">&lt;p&gt;这是另一段。&lt;/p&gt;</font></font></div>
</div><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
&lt;/body&gt;
</font></font></div><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
&lt;/html&gt;
</font></font></div>
</html>

2022年8月25日 (四) 11:37的最新版本

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。浏览器可以读取HTML文件,并将其渲染成可视化网页。

HTML 实例

“尝试一下”可以打开在线编辑器,然后编辑 HTML 代码并查看结果:

示例

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>浏览器标签栏Tab显示标题</title>
</head>
<body>

<h1>大标题</h1>
<p>这里是一个段落文本</p>

</body>
</html>

HTML 文件后缀

后缀为.html,.htm 。你可以讲上面的实例保存为test.html然后记事本打开将内容贴进去,然后再右键使用浏览器打开。即可看见效果。

示例解释

  • 声明定义<!DOCTYPE html>文档是 HTML5 文档
  • <html>元素是 HTML 页面的根元素
  • <head>元素包含有关 HTML 页面的元信息
  • <title>元素指定 HTML 页面的标题(显示在浏览器的标题栏或页面的选项卡中)
  • 元素定义了文档的<body>正文,是所有可见内容的容器,例如标题、段落、图像、超链接、表格、列表等。
  • 该<h1>元素定义了一个大标题
  • <p> 元素定义了一个段落

HTML 元素

HTML 元素由开始标签、内容和结束标签组成:

<标签名> 内容在这里... </标签名>

一些 HTML 标签不需要内容(如 <br> 换行标签)。这些元素称为空元素。空元素没有结束标签!

HTML页面结构

<html>
<head>
<title>页面标题</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另一段。</p>
</body>
</html>

此页面最后编辑于2022年8月25日 (星期四) 11:37。