HTML+CSS培训教案（二）

最新推荐文章于 2021-06-29 03:29:48 发布

原创最新推荐文章于 2021-06-29 03:29:48 发布 · 355 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #CSS #教程

HTML/CSS 同时被 2 个专栏收录

17 篇文章

订阅专栏

HTML+CSS培训教案

16 篇文章

订阅专栏

本文深入讲解HTML中的标题、字体、段落、换行、列表等基础元素的使用方法及属性，帮助初学者快速掌握HTML页面布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

三、标题和字体

代码

<html>
    <head>
        <meta content="text/html;charset=utf-8">
        <title>标题标记</title>
    </head>
    <body>
        <h1>h1 标题大小</h1>
        <h2>h2 标题大小</h2>
        <h3>h3 标题大小</h3>
        <h4>h4 标题大小</h4>
        <h5>h5 标题大小</h5>
        <h6 color="blue">h6 标题大小</h6>
    </body>
<html>

知识点

HTML有6中大小不同的标题：h1~h6，数字越大，标题越小
标记是有属性的，属性是有值的



标记属性值
<\font>控制字体属性：color-颜色，face-字体，size-字号
颜色的表示方法：(1)单词表示：black（黑）、gray（深灰）、silver（浅灰）、green（绿）、purple（紫）、yellow（黄）、red（红）、white（白）

扩展

在<\font>后添加<!–你能看见我吗？–>

答案：(1)多行注释文本，类似于C++中的/**/

(2)注释在网页中不可显，但在源中可显

四、空格、段落和换行

代码

<html>
    <head>
        <meta content="text/html;charset=utf-8">
        <title>空格、段落和换行</title>
    </head>
    <body>
        <p>锄禾日当午   ，
        汗滴<br>禾<br>下<br>土。</p>
        <p>谁知盘中餐，
        粒粒皆辛苦。</p>
    </body>
<html>

知识点

html文件中多个空格当一个空格处理
html文件中换行不做处理
段落标记，将内容以一段话的形式显示出来，两行间距为段落间距
强制换行，两行间距为行间距。这是一个单标记
段落间距大于行间距

扩展

在第一个前插入如下内容：
<center>悯农</center>

答案：<center></center>中心标记，将内容居中显示

五、列表

代码

<html>
    <head>
        <meta content="text/html;charset=utf-8">
        <title>列表</title>
    </head>
    <body>
        <ul>
            <li>列表</li>
            <li>列表</li>
            <li>列表</li>
        </ul>
        <ol>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
        </ol>
    </body>
<html>