ikkhksvu 发表于 2024-6-29 17:48:49

HTML零基本入门教程(仔细)


    <h2 style="color: black; text-align: left; margin-bottom: 10px;">1 什么是HTML</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上<span style="color: black;">运用</span>的通用标记语言。HTML <span style="color: black;">准许</span>你格式化文本,添加<span style="color: black;">照片</span>,创建链接、输入表单、框架和表格等等,并可将之存为文本文件,浏览器<span style="color: black;">就可</span>读取和<span style="color: black;">表示</span>。</p>HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言,而是一种标记语言标记语言是一套标记标签 (markup tag)HTML <span style="color: black;">运用</span>标记标签来描述网页HTML 文档<span style="color: black;">包括</span>了HTML 标签及文本内容HTML文档<span style="color: black;">亦</span>叫做 web 页面<h3 style="color: black; text-align: left; margin-bottom: 10px;">2 入门实例</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">新建一个test.html文件,内容如下</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;ZONGXP&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;

      &lt;h1&gt;我的<span style="color: black;">第1</span>个标题&lt;/h1&gt;
      &lt;p&gt;我的<span style="color: black;">第1</span>个段落。&lt;/p&gt;

      &lt;/body&gt;
      &lt;/html&gt;</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">其中:</p>&lt;!DOCTYPE html&gt; 声明为 HTML5 文档&lt;html&gt; 元素是 HTML 页面的根元素&lt;head&gt; 元素<span style="color: black;">包括</span>了文档的元(meta)数据,如 &lt;meta charset="utf-8"&gt; 定义网页编码格式为 utf-8(<span style="color: black;">因为</span>在大部分浏览器中直接输出中文会<span style="color: black;">显现</span>乱码,<span style="color: black;">因此</span>要在头部将字符声明为UTF-8)&lt;title&gt; 元素描述了文档的标题&lt;body&gt; 元素<span style="color: black;">包括</span>了可见的页面内容&lt;h1&gt; 元素定义一个大标题&lt;p&gt; 元素定义一个段落<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">保留</span>后运行,<span style="color: black;">就可</span>在浏览器中打开如下界面</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-fc6c4f738134b4a6edda909f06ec68e5_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">3 各部分详解</h2>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">3.1 标题</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML 标题(Heading)是<span style="color: black;">经过</span>&lt;h1&gt; - &lt;h6&gt; 标签来定义的.</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;ZONGXP&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;

      &lt;h1&gt;这是标题 1&lt;/h1&gt;
      &lt;h2&gt;这是标题 2&lt;/h2&gt;
      &lt;h3&gt;这是标题 3&lt;/h3&gt;
      &lt;h4&gt;这是标题 4&lt;/h4&gt;
      &lt;h5&gt;这是标题 5&lt;/h5&gt;
      &lt;h6&gt;这是标题 6&lt;/h6&gt;

      &lt;/body&gt;
      &lt;/html&gt;</div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">3.2 段落</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML 段落是<span style="color: black;">经过</span>标签 &lt;p&gt; 来定义的</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;ZONGXP&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;

      &lt;p&gt;这是一个段落。&lt;/p&gt;
      &lt;p&gt;这是一个段落。&lt;/p&gt;
      &lt;p&gt;这是一个段落。&lt;/p&gt;

      &lt;/body&gt;
      &lt;/html&gt;</div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">3.3 链接</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML 链接是<span style="color: black;">经过</span>标签 &lt;a&gt; 来定义的</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;ZONGXP&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;

      &lt;a &gt;这是一个链接<span style="color: black;">运用</span>了 href 属性&lt;/a&gt;

      &lt;/body&gt;
      &lt;/html&gt;</div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">3.4 图像</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML 图像是<span style="color: black;">经过</span>标签 &lt;img&gt; 来定义的。<span style="color: black;">重视</span>: 图像的名<span style="color: black;">叫作</span>和尺寸是以属性的</p>




qzmjef 发表于 2024-10-8 09:06:48

太棒了、厉害、为你打call、点赞、非常精彩等。

m5k1umn 发表于 2024-11-11 09:04:48

软文发布平台 http://www.fok120.com/
页: [1]
查看完整版本: HTML零基本入门教程(仔细)