tw4ld6 发表于 2024-6-29 14:13:08

前端三剑客 HTML、CSS、JavaScript 入门到上手


    <h2 style="color: black; text-align: left; margin-bottom: 10px;">一. HTML<span style="color: black;">基本</span><span style="color: black;">运用</span></h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML：超文本标记语言，是一种用于创建网页的标准标记语言。</p>HTML 代码<span style="color: black;">是由于</span> “标签” <span style="color: black;">形成</span>的整体的 HTML 代码<span style="color: black;">是由于</span>一对 &lt;html&gt; &lt;/html&gt; 包裹的&lt;head&gt; &lt;/head&gt; 标签是页面的头部，标签中写页面的属性&lt;body&gt; &lt;/body&gt; 标签是页面的主体，标签中写的是页面<span style="color: black;">表示</span>的内容&lt;title&gt; &lt;/title&gt; 标签中写的是页面的标题<h2 style="color: black; text-align: left; margin-bottom: 10px;">1.HTML 入门实例</h2>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;第⼀个⻚⾯&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
      hello world
      &lt;/body&gt;
      &lt;/html&gt;</div>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-958836986b4f55c4357a670ac3115ff1_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;">这三个标签组<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>标签和结束标签，是成对<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>为 DOM 树（DOM Document Objective Model 文档对象模型）</p>生成一个默认的页面模板： 输入 !, 并且按 tab，就<span style="color: black;">能够</span>生成一组默认的页面模板。<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-7a056eacf0b1e3bf1aea938db28955df_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;">解释一下这个模板：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;!DOCTYPE html&gt; : 这一行是声明了文档类型，描述了当前文件是 html 文件</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;html lang="en"&gt; : <span style="color: black;">暗示</span>当前网页<span style="color: black;">运用</span>的语言是 english。→ <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;head&gt;标签里面放的内容<span style="color: black;">重点</span>是页面的<span style="color: black;">有些</span>属性，和页面展示的内容<span style="color: black;">无</span>太大关系。&lt;meta charset="UTF-8"&gt;声明<span style="color: black;">咱们</span>这个页面的字符编码是 UTF-8，&lt;tatle&gt; 里面包裹的是浏览器标签页的默认标题。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;body&gt;里面<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>介绍 HTML <span style="color: black;">详细</span>的语法细节了，值得一提的是，前端<span style="color: black;">这儿</span><span style="color: black;">触及</span>的 HTML、CSS、JS 这三门语言，<span style="color: black;">然则</span><span style="color: black;">实质</span>上，<span style="color: black;">仅有</span> JS 是一个可编程的语言，其他两个都只是<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>一个页面上的元素，<span style="color: black;">亦</span><span style="color: black;">便是</span> HTML 语言的主体——标签。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">2 HTML <span style="color: black;">平常</span>标签</h2>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">① 注释标签</h3>ctrl + / 快捷键<span style="color: black;">能够</span>快速注释/取消注释。<div style="color: black; text-align: left; margin-bottom: 10px;">&lt;!-- 我是注释 --&gt;</div>
    <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>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">② 标题标签</h3>标题标签有6个：&lt;h1&gt;...&lt;h6&gt; 数字越大，字体越小




很甜的橙橙橙子 发表于 2024-9-6 23:15:20

说得好啊！我在外链论坛打滚这么多年，所谓阅人无数，就算没有见过猪走路，也总明白猪肉是啥味道的。

4lqedz 发表于 2024-10-2 23:42:26

祝福你、祝你幸福、早日实现等。

1fy07h 发表于 2024-11-7 09:49:39

太棒了、厉害、为你打call、点赞、非常精彩等。
页: [1]
查看完整版本: 前端三剑客 HTML、CSS、JavaScript 入门到上手