qzmjef 发表于 2024-6-29 11:04:39

HTML零基本入门教程， 零基本学习HTML网页制作（HTML 标签）


    <h2 style="color: black; text-align: left; margin-bottom: 10px;">颜值即正义！HTML 标签<span style="color: black;">怎样</span>让网页更好看？</h2>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-df7bb9f58ad65b96a54b01b6ed188887_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;">hi~<span style="color: black;">大众</span>好！本<span style="color: black;">咱们</span>来学习 HTML 的常用标签。</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>书写一个完整的 HTML 骨架了（PS：还未<span style="color: black;">把握</span>该项技能的萌新，可移步 HTML <span style="color: black;">基本</span>部分其他文 get <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>给网页添加内容呢？</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这就<span style="color: black;">必须</span>除 HTML 骨架标签之外其他标签的辅助， 即本门文中讲解的 HTML 常用标签。</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>效果呢？</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">其类似于<span style="color: black;">咱们</span>都接触过的 Word 文档的排版，<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>学习下列标签： </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（1）标题标签：顾名思义<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;">（2）段落标签与换行标签：对<span style="color: black;">文案</span>分段，文案换行； </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（3）文本格式化标签：为了<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;">（4）图像标签：向网页中<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;">（5）&lt;div&gt;标签与&lt;span&gt;标签：网页<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>相信学完本门文，你将会有如下收获： </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（1）理解标签语义化的含义 </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（2）<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;">（3）<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;">（4）<span style="color: black;">运用</span>文本格式化标签设置文字格式； </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（5）<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;">（6）理解&lt;div&gt;标签与&lt;span&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><span style="color: black;">起始</span>本文的学习吧！</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">第1</span>关 标签语义</h2>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">标签语义</h3>
    <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>了 HTML 的骨架标签，这些标签并不难，<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>：标签语义！</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">标签语义，简单的理解<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>让页面的结构更加的清晰。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">图1为未添加标签的网页，图2为已添加标签的网页，如下图所示：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-0d5a396f65e080a7bc63d8ea8b57e02d_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>




页: [1]
查看完整版本: HTML零基本入门教程， 零基本学习HTML网页制作（HTML 标签）