https://494025a8.myblog-3v5.pages.dev/posts/Recent content in Posts on 我的博客Hugozh-cnSat, 17 Oct 2026 17:46:34 +0800https://494025a8.myblog-3v5.pages.dev/posts/html%E7%AC%94%E8%AE%B0/Sat, 17 Oct 2026 17:46:34 +0800https://494025a8.myblog-3v5.pages.dev/posts/html%E7%AC%94%E8%AE%B0/<h2 id="html">HTML</h2> <h3 id="1什么是html">1.什么是HTML？</h3> <p>HTML是HypeText Mark-up Language的简称，即超文本标记语言，是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的网页，HTML 运行在浏览器上，由浏览器来解析。它不是一种编程语言（如java、C语言等），标记：就是标签。&lt;标签名称&gt;&lt;/标签名称&gt;。</p> <p>白话：用<strong>来写网页的一门语言，有很多标签组成</strong></p> <blockquote> <p>所谓的超文本：</p> <p>1、因为网页可以放图片、视频、音频等内容（超越文本限制）</p> <p>2、还可以在网页中跳转到另一个网页中（超链接文本）</p> </blockquote> <h3 id="2html的作用">2.HTML的作用</h3> <p>用来开发<strong>网页</strong></p> <ul> <li>许多网络攻击（如 <strong>XSS（跨站脚本）、SQL 注入、CSRF（跨站请求伪造）</strong>）都针对 HTML 和 Web 技术。</li> <li>攻击者利用 HTML 结构注入恶意代码</li> <li><strong>HTML 是 Web 安全的底层基础</strong>，学习它不仅能帮助理解攻击手法，还能提升防御能力。无论是漏洞挖掘、渗透测试还是安全开发，HTML 知识都是必备技能。</li> </ul> <h3 id="3网页的组成部分">3.网页的组成部分</h3> <ul> <li>HTML：负责网页的架构；(骨架)</li> <li>CSS：负责网页的样式，美化；（衣服）</li> <li>JavaScript（JS）：负责网页的行为；（动作）</li> </ul> <h3 id="4工具介绍">4.工具介绍</h3> <p>这里我们使用工具，phpstorm</p> <p><img alt="image-20260408132925899" loading="lazy" src="https://gitee.com/lao-jiang-next-door/images/raw/master/image-20260408132925899.png"></p> <h4 id="html文件的命名">HTML文件的命名</h4> <ul> <li>HTML文件的文件后缀名为.html</li> <li>文件名中不要包含特殊符号，如空格、$等。</li> </ul> <h3 id="5结构介绍">5.结构介绍</h3> <p>这个尖括号 就叫标签</p> <ol> <li>生成结构</li> </ol> <p>phpstorm会自动帮我们生成html结构</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#75715e">&lt;!DOCTYPE html&gt;</span> </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">html</span> <span style="color:#a6e22e">lang</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;en&#34;</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">head</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">meta</span> <span style="color:#a6e22e">charset</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;UTF-8&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">title</span>&gt;Title&lt;/<span style="color:#f92672">title</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">head</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">body</span>&gt; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">body</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">html</span>&gt; </span></span></code></pre></div><p>什么叫标签</p> <ol start="2"> <li>结构详情介绍</li> </ol> <ul> <li>html由标签和属性构成。</li> <li>标签：长在尖角号后面的第一个单词就是标签</li> <li>属性：长在标签后面的并且用空格隔开的，称作 属性</li> <li>结构标签介绍</li> </ul> <p><img alt="企业微信截图_17159486448134" loading="lazy" src="https://gitee.com/lao-jiang-next-door/images/raw/master/%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_17159486448134.png"></p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- 声明文档类型为 HTML5，告诉浏览器按标准 HTML 解析 --&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!DOCTYPE html&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- 根标签，整个网页所有内容都要写在里面 --&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- lang=&#34;en&#34; 表示网页语言为英文 --&gt;</span> </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">html</span> <span style="color:#a6e22e">lang</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;en&#34;</span>&gt; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- 头部标签，存放网页配置信息，不在页面上显示 --&gt;</span> </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">head</span>&gt; </span></span><span style="display:flex;"><span> <span style="color:#75715e">&lt;!-- 设置网页字符编码为 UTF-8，防止中文乱码 --&gt;</span> </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">meta</span> <span style="color:#a6e22e">charset</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;UTF-8&#34;</span>&gt; </span></span><span style="display:flex;"><span> <span style="color:#75715e">&lt;!-- 网页标题，显示在浏览器标签栏上 --&gt;</span> </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">title</span>&gt;Title&lt;/<span style="color:#f92672">title</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">head</span>&gt; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- 身体标签，网页所有可见内容（文字、图片、按钮等）都写在这里 --&gt;</span> </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">body</span>&gt; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">body</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">html</span>&gt; </span></span></code></pre></div><h3 id="6网页中常见的标签">6.网页中常见的标签</h3> <ol> <li><strong>标题标签</strong></li> </ol> <ul> <li>h1标签</li> <li>h2标签</li> <li>h3标签</li> <li>h4标签</li> <li>h5标签</li> <li>h6标签</li> </ul> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">body</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">h1</span>&gt;hello word&lt;/<span style="color:#f92672">h1</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">h2</span>&gt;hello word&lt;/<span style="color:#f92672">h2</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">h3</span>&gt;hello word&lt;/<span style="color:#f92672">h3</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">h4</span>&gt;hello word&lt;/<span style="color:#f92672">h4</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">h5</span>&gt;hello word&lt;/<span style="color:#f92672">h5</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">h6</span>&gt;hello word&lt;/<span style="color:#f92672">h6</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">body</span>&gt; </span></span></code></pre></div><p>2.<strong>段落标签</strong></p>https://494025a8.myblog-3v5.pages.dev/posts/hello/Fri, 16 Oct 2026 10:00:00 +0800https://494025a8.myblog-3v5.pages.dev/posts/hello/<p>这是我的第一篇 Hugo 博客文章。</p> <p>我是ZZC。</p> <p>本界面由Hugo(在本地把md 文档变成完整的网页文件)和cloudflare(提供免费域名，把 Hugo 生成的结果发布到公网)支持，谢谢两位嘉宾！</p>