第一次web作业（常用标记+项目列表+表格）

最新推荐文章于 2024-06-18 12:34:12 发布

书生小兰

最新推荐文章于 2024-06-18 12:34:12 发布

阅读量2.3k

点赞数 1

分类专栏： web前端开发文章标签： web html 标签项目列表表格标签

本文链接：https://blog.csdn.net/a3665407/article/details/45719695

版权

web前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用HTML进行网页制作，包括设置网页标题、加粗和斜体文字、创建链接、理解不同<a>标签的target属性，以及表格的创建和使用，特别是rowspan和colspan属性的应用。

摘要由CSDN通过智能技术生成

以下代码使用Sublime3编写，支持纯手写，切勿偷懒！

一、请将下面文字放在网页正文，要求设置网页标题为“了不起的盖茨比”，将所有的盖茨比设置为粗体，将1925设置为斜体，并制作一个详细信息的链接，指向http://baike.baidu.com/subview/369308/5222935.htm，效果如图所示

我的理解：第一步，我们可以先把文本打上去；第二步，使用Ctrl+H使用Sublime的替换功能，将“盖茨比”替换成“盖茨比”，加快控制速度；第三步，尽量使用代替（强调，加粗）,代替（强调，倾斜）。

href的值指向某一个地址，例如：<a href="www.baidu.com"></a>这个就是指向百度首页。

target的取值有以下几种，有兴趣的可以参看一下：

_blank
浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self
这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。
_parent
这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
_top
这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

我的答案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>了不起的盖茨比</title>
</head>
<body>
<h1>了不起的盖茨比</h1>
<p>
    《了不起的<strong>盖茨比</strong>》为那个奢靡年代的缩影。<strong>盖茨比</strong>怀揣着对"美国梦"的期翼，投身到那个年代的灯红酒绿之中，却在名利场中看尽世态炎凉，以及浮华背后一切终将逝去的空虚怅惘。<em>1925</em>年《了不起的<strong>盖茨比</strong>》问世。</p><br/>
<p>
    菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p><br/>
<a href="http://baike.baidu.com/subview/369308/5222935.htm">详细信息</a>
</body>
</html>

360浏览器显示效果：

二、项目列表

我的理解：

注意，第三个项目是无序列表，但是它是属于有序列表中第二项的子项。不要另起一行，像这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目列表</title>
</head>
<body>
    <ol>
        <li>Windows Me</li>
        <li>Windows 2003</li>
    </ol>
    <ul type="circle">
            <li>Windows Server 2003 Web</li>
            <li>Windows Server 2003 standard</li>
            <li>Windows Server 2003 Enterprise</li>
            <li>Windows Server 2003 Dataceter</li>
    </ul> 
</body>
</html>

这样造成的结果是：

对比要求的，明显多了一行，所以要理清这个关系，这是有区别的。

我的答案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目列表</title>
</head>
<body>
    <ol>
        <li>Windows Me</li>
        <li>Windows 2003</li>
        <ul type="circle">
            <li>Windows Server 2003 Web</li>
            <li>Windows Server 2003 standard</li>
            <li>Windows Server 2003 Enterprise</li>
            <li>Windows Server 2003 Dataceter</li>
    </ul>     
    </ol>
</body>
</html>

360浏览器显示效果：

三、表格

我的理解：表格的控制，需要注意几个重要的属性：<table border="1" width="400px" height="200px"> border属性是用来调边框的，默认是0，也就是没有边框，但是不同的浏览器显示的效果不一样，我们可以分别测试一下。当然最重要就是“rowspan”，“colspan”翻译过来就是“跨行”，“跨列”。顾名思义，就是占多少行，多少列，这两个属性对复杂的结构非常有用，多试几次就行了。360浏览器显示效果如下：有宽度是因为我设置了width="400px" height="200px"，这并不是必须的，起码跟题目无关，大家可以不用管。

我的答案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用表格</title>
</head>
<body>
    <table border="1" width="400px" height="200px">
        <tr>
            <td rowspan="2">阿里巴巴旗下网站</td>
            <td>我要买</td>
                    <td>我要买</td>
                    <td>我淘宝</td>
        </tr>
        <tr>
            <td colspan="3">您好，欢迎来淘宝</td>
        </tr>
    </table>
</body>
</html>