HTML 简介

HTML 实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)title> head> <body> <h1>我的第一个标题h1> <p>我的第一个段落。p> body> html>

尝试一下 »

实例解析

  • 声明为 HTML5 文档
  • 元素是 HTML 页面的根元素
  • 元素包含了文档的元(meta)数据,如 定义网页编码格式为 utf-8
  • </strong> 元素描述了文档的标题</li> <li><strong><body></strong> 元素包含了可见的页面内容</li> <li><strong><h1></strong> 元素定义一个大标题</li> <li><strong><p></strong> 元素定义一个段落</li> </ul> <p><strong>注:</strong>在浏览器的页面上使用键盘上的 <span class="marked">F12</span> 按键开启调试模式,就可以看到组成标签。</p> <p><img decoding="async" src="https://sitesbucket.oss-cn-beijing.aliyuncs.com/chaojiit/docs/202602091608108762.png"></p> <br> <hr><h2>什么是 HTML?</h2> <p>HTML 是用来描述网页的一种语言。</p><ul> <li>HTML 指的是超文本标记语言: <b>H</b>yper<b>T</b>ext <b>M</b>arkup <b>L</b>anguage</li> <li>HTML 不是一种编程语言,而是一种<b>标记</b>语言</li> <li>标记语言是一套<b>标记标签</b> (markup tag)</li> <li>HTML 使用标记标签来<b>描述</b>网页</li> <li>HTML 文档包含了HTML<b> 标签</b>及<b>文本</b>内容</li> <li>HTML文档也叫做<b> web 页面</b></li> </ul> <hr><h2>HTML 标签</h2><p>HTML 标记标签通常被称为 HTML 标签 (HTML tag)。</p> <ul> <li>HTML 标签是由<em>尖括号</em>包围的关键词,比如 <html></li> <li>HTML 标签通常是<em>成对出现</em>的,比如 <b> 和 </b></li> <li>标签对中的第一个标签是<em>开始标签</em>,第二个标签是<em>结束标签</em></li> <li>开始和结束标签也被称为<em>开放标签</em>和<em>闭合标签</em></li> </ul> <div style="width:610px;border:1px solid lightgray;font-size:20px;padding:10px"> <span style="color:#98bf21"><标签></span>内容<span style="color:#98bf21"></标签></span></div> <br> <hr><h2>HTML 元素</h2> <p>"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.</p> <p>但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例: </p> <p>HTML 元素:</p> <div style="width:610px;border:1px solid lightgray;font-size:20px;padding:10px;"> <span style="color:#98bf21"><p></span>这是一个段落。<span style="color:#98bf21"></p></span></div> <br> <hr><h2>Web 浏览器</h2> <p>Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)是用于读取HTML文件,并将其作为网页显示。</p> <p>浏览器并不是直接显示的HTML标签,但可以使用标签来决定如何展现HTML页面的内容给用户:</p> <p> <img decoding="async" src="//www.runoob.com/wp-content/uploads/2013/06/html-first.png"> </p> <hr><h2>HTML 网页结构</h2> <p>下面是一个可视化的HTML页面结构:</p> <div style="width:99%;border:1px solid grey;padding:3px;margin:0;background-color:#ddd"><html> <div style="width:90%;border:1px solid grey;padding:3px;margin:20px"><head> <div style="width:90%;border:1px solid grey;padding:5px;margin:20px"><title>页面标题