219mze 发表于 2024-6-30 01:52:08

简单地认识一下 HTML


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">简单复盘一下 HTML。</p>
    <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 是 Hyper Text Markup Language 的简写，译成中文是「超文本标记语言」。</p>
    <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>等等都<span style="color: black;">能够</span>，说到底<span style="color: black;">便是</span>一种特殊的文档。HTML 构建了一个网页的基本骨架，TA 是用来描述网页的一种语言。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">2、HTML 有多简单？</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML 简单到只<span style="color: black;">必须</span>一个记事本就能编写。新建一个 msunh.txt 文档，输入「我是玖柒后」<span style="color: black;">保留</span>，将扩展名改为 .html ，浏览器打开就能直接看到左侧内容，F12 进入 Elements 看到如右侧内容：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-850620d3b08b33aef2985f4157cb338b_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">红框内的 html、head、body 标签都是浏览器自动加上的，右键查看源代码<span style="color: black;">或</span>编辑 msunh.html 文档，你会<span style="color: black;">发掘</span>除了「我是玖柒后」这五个字之外并<span style="color: black;">无</span>其他内容。</p>
    <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>用记事本进行<span style="color: black;">研发</span>的，这是为了你的生命安全<span style="color: black;">思虑</span>（人生苦短）。<span style="color: black;">意见</span><span style="color: black;">运用</span> Visual Studio Code，舒服的一批。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">3、HTML 的基本<span style="color: black;">构成</span></h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一个简单的网页<span style="color: black;">构成</span>如下：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;!Doctype html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;我是玖柒后&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
      「我是玖柒后」
      &lt;/body&gt;
      &lt;/html&gt;</div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">4、<span style="color: black;">各样</span>各样的零件</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">上面说的 html、head、title、body 被<span style="color: black;">叫作</span>之为 HTML 元素，<span style="color: black;">亦</span><span style="color: black;">便是</span><span style="color: black;">各样</span>各样的零件、器官。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">除了 &lt;br/&gt; 、&lt;hr/&gt;、&lt;img/&gt;、&lt;input/&gt; 等少部分自闭合标签外，元素的<span style="color: black;">起始</span>标签和结束标签<span style="color: black;">必要</span>成对<span style="color: black;">显现</span>，例如：&lt;html&gt;&lt;/html&gt;。</p>
    <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>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">关于 HTML <span style="color: black;">更加多</span>的介绍，<span style="color: black;">能够</span>去看一下网上的文档。<span style="color: black;">这儿</span>给<span style="color: black;">大众</span>介绍一个网站：MDN。不吹不擂，看了你就<span style="color: black;">晓得</span>了。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">MDN 传送门：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;"><span style="color: black;"><span style="color: black;">HTML（超文本标记语言）</span><span style="color: black;"><span style="color: black;">​</span>developer.mozilla.org/zh-CN/docs/We</span></span></a>b/HTML<span style="color: black;"><img src="https://pic4.zhimg.com/v2-72382e605ce3eba8154aa310a712c403_ipico.jpg" style="width: 50%; margin-bottom: 20px;"></span></div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">5、head 标签</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;head&gt; 标签被看做是网页的头。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">TA 里面<span style="color: black;">一般</span>会有 title、meta、style、link、script 这几种标签，title 比较简单，<span style="color: black;">便是</span>在窗口处<span style="color: black;">表示</span>网页的名<span style="color: black;">叫作</span>。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-d2980860a08dc202bbf625e61bafa5df_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">meta 是比较<span style="color: black;">要紧</span>的一个辅助标签，有点类似于个人档案，正常浏览<span style="color: black;">咱们</span>是不会在网页中看到的，<span style="color: black;">一块</span><span style="color: black;">认识</span>一下 meta 标签<span style="color: black;">平常</span>形式：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">// 定义页面的编码方式，国内<span style="color: black;">一般</span>都是用 UTF-8
      <span style="color: black;">&lt;</span><span style="color: black;">meta</span> <span style="color: black;">charset</span><span style="color: black;">=</span><span style="color: black;">"UTF-8"</span><span style="color: black;">&gt;</span>
      // 向搜索引擎说明网页的<span style="color: black;">重要</span>词
      <span style="color: black;">&lt;</span><span style="color: black;">meta</span> <span style="color: black;">name</span><span style="color: black;">=</span><span style="color: black;">"keywords"</span> <span style="color: black;">content</span><span style="color: black;">=</span><span style="color: black;">"我是玖柒后"</span><span style="color: black;">&gt;</span>
      // 向搜索引擎说明站点的<span style="color: black;">重点</span>内容
      <span style="color: black;">&lt;</span><span style="color: black;">meta</span> <span style="color: black;">name</span><span style="color: black;">=</span><span style="color: black;">"description"</span> <span style="color: black;">content</span><span style="color: black;">=</span><span style="color: black;">"我是玖柒后"</span><span style="color: black;">&gt;</span>
      // <span style="color: black;">暗示</span>页面的可见区域
      <span style="color: black;">&lt;</span><span style="color: black;">meta</span> <span style="color: black;">name</span><span style="color: black;">=</span><span style="color: black;">"viewport"</span> <span style="color: black;">content</span><span style="color: black;">=</span>
    </div>




qzmjef 发表于 2024-9-29 18:49:16

我赞同你的看法，你的智慧让人佩服，谢谢分享。

qzmjef 发表于 2024-10-13 07:21:08

对于这个问题，我有不同的看法...

1fy07h 发表于 2024-10-15 17:41:11

楼主果然英明！不得不赞美你一下！
页: [1]
查看完整版本: 简单地认识一下 HTML