网页设计——第一次课后练习

小金牛piano

已于 2023-11-24 16:59:04 修改

阅读量479

点赞数 2

文章标签：前端 javascript css

于 2023-11-06 16:51:44 首次发布

本文链接：https://blog.csdn.net/m0_74924408/article/details/134249858

版权

本文详细介绍了HTML文档的基本语法，包括标题、段落、结构、换行、图片、链接、列表、表格、meta标签、注释、角标和缩进等内容，以及如何创建和修改图片链接和下载链接。

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

本次练习了html文档的基本语法，主要内容有html文档的标题、段落、结构、换行、图片、链接、列表、图表等。

html文档：

代码：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Report</title>
    </head>
    <body>
        <h1>这是一个标题</h1>
        <h2>这是一个二级标题</h2>
        <p>这是一个文本标签</p>
        <p>这是一个换行符<br>它的效果如下：</p>
        <p>1<br>36<br>123<br>78912</p>
        <p>恰似人间惊鸿客<br>墨染星辰云水间</p>
        <p>还有一些细节化处理，例如：</p>
        <p>这是<i>斜体</i>,这是<b>粗体</b>,这是<u>下划线</u></p>
        <p>这是一张图片</p>
        <img src="https://n.sinaimg.cn/spider20230302/652/w950h502/20230302/5faa-c51bf98e99783d765c102a5c0f897b85.jpg">
        <p>修改一下图片的大小</p>
        <img src="https://n.sinaimg.cn/spider20230302/652/w950h502/20230302/5faa-c51bf98e99783d765c102a5c0f897b85.jpg" width="400px"></p>
        
        <a href="https://news.sina.com.cn/gov/xlxw/2023-03-03/doc-imyipzuy7321600.shtml">从当前窗口跳转到一个新的链接<br></a>
        <a href="https://news.sina.com.cn/gov/xlxw/2023-03-03/doc-imyipzuy7321600.shtml"target="_blank">新开一个窗口跳转到一个新的链接</a>
        
        <ol>
            <p>这是一个有序列表(ordered list)</p>
            <li>list item1</li>
            <li>list item2</li>
            <li>list item3</li>
        </ol>
 
        <ul>
            <p>这是一个无序列表(unordered list)</p>
            <li>list item1</li>
            <li>list item2</li>
            <li>list item3</li>
        </ul>
 
        <p>这是一个表格：</p>
        <table>
            <thead>
                <tr>行（table row）
                    <td>表头1（table data）</td>
                    <td>表头2</td>
                    <td>表头3</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>111</td>
                    <td>222</td>
                    <td>333</td>
                </tr>
                <tr>
                    <td>111</td>
                    <td>222</td>
                </tr>
            </tbody>
        </table>
        
        <p>给表格加上边框：</p>
        <table border="1">
            <thead>
                <tr>行（table row）
                    <td>表头1（table data）</td>
                    <td>表头2</td>
                    <td>表头3</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>111</td>
                    <td>222</td>
                    <td>333</td>
                </tr>
                <tr>
                    <td>111</td>
                    <td>222</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

运行效果如下：

meta标签：

在HTML中，meta标签一般用于定义页面的特殊信息，如页面关键字、页面描述等。这些信息不是提供给用户看的，而是提供给搜索引擎蜘蛛（如百度蜘蛛、谷歌蜘蛛）看的。

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>网页标题</title>
        <meta name="description" content="Chatgpt4.0是一个好软件">
        <meta name="keywords" content="HTML, meta, 前或后端开发">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
       
        meta name="description" content="Chatgpt4.0是一个好软件"<br/>
        meta name="keywords" content="HTML, meta, 前或后端开发"<br/>
        meta http-equiv="Content-Type" content="text/html; charset=UTF-8"<br/>

    </body>
</html>

运行截图：

注释语句：

格式： ，例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
        <!--这是一个注释-->
        <p>明月松间照</p>
        <!--又是一个注释-->
        <p>清泉石上流</p>
        <!--回忆一下斜体-->
        <i>直上青天揽明月</i>
        <!--回忆一下换行-->
        <br><br>
        <!--回忆一下黑体-->
        <b>欲倾东海洗乾坤</b>
 
    </body>
</html>

运行结果：

角标标签：

简单标签，分为上标和下标。

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
        <!--上标举例-->
        <p>(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>
        <!--下标举例  工业制月亮-->
        <p>Gd+O<sub>2</sub>=Good</p>
    </body>
</html>

运行效果：

缩进：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
        <p>这是一段带有&nbsp;&nbsp;&nbsp;&nbsp;额外缩进的文本。</p>
    </body>
</html>

运行效果：

链接：

<a href="链接">链接文本</a>就是一个完整的html文本链接语句。

例如：

<a href="https://n.sinaimg.cn/spider20230302/652/w950h502/20230302/5faa-c51bf98e99783d765c102a5c0f897b85.jpg">一张图片</a>

图片链接：

格式：<img src="图片">，可以添加一些细节，例如在后面加上宽度（width）、高度（height）等，例如：

<a href="https://n.sinaimg.cn/spider20230302/652/w950h502/20230302/5faa-c51bf98e99783d765c102a5c0f897b85.jpg">
    <img decoding="async" src="https://n.sinaimg.cn/spider20230302/652/w950h502/20230302/5faa-c51bf98e99783d765c102a5c0f897b85.jpg" alt="示例图片">
  </a>

下载链接：

格式：只需要在<a href="文件" download><a>就好了，只是增加了一个download语句。