前端开发实战第二天-HTML网页模板

鸡叔学开发
141 阅读1分钟

在上一节中我们实现了网易新闻首页的标题部分，接下来了解一下其中所用到的前端知识点。HTML 5页面有一些固定的内容，我们可以将它作为模板，在开发任何一个HTML 5页面时都可以直接拿来使用，甚至一些IDE或现代编辑器都已经能够自动创建这个模板了。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站标题</title>

</head>
<body>

</body>
</html>

上面的代码中有几个地方需要注意：

  1. HTML 5标签不区分字母大小写，head与HEAD的作用相同。

  2. 第1行<!DOCTYPE html>表明该文档符合HTML 5标准。

  3. 第2行中lang="zh"属性通知浏览器该网页内容为中文，如果当前浏览器为英文环境，会弹出是否需要翻译的询问框。

  4. 第4行<meta charset="UTF-8">说明该文档采用UTF-8字符编码。

  5. 网页的可视化元素必须位于<body>与</body>之间。

  6. HTML标签可以分为单标签和双标签。meta和img属于典型的单标签，html、head、title、body和header等均属于双标签。

因此没有添加CSS样式的网易新闻标题部分的HTML代码为：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易新闻</title>

</head>
<body>
    <header>
        <img src="assets/image/logo.png" alt="网易Logo">
        <img src="assets/image/harm.jpg" alt="有害信息举报">
    </header>
</body>
</html>

有3中方式将CSS样式与HTML文档内容关联：

  1. 嵌入式，将样式写入标签的style属性值。

  2. 内联式，通过<style>标签引入样式。

  3. 外联式，通过<link>标签引入外部样式。

在本教程的示例中，从简单的角度出发，我们采用内联式，即通过<style>标签引入合适的样式。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易新闻</title>
    <style>
        header {
            width: 960px;
            height: 51px;
            padding-top: 35px;
            margin: 0 auto;
            border-bottom: 2px #ff3333 solid;
        }

        img:last-child {
            float: right;
        }
    </style>
</head>
<body>
    <header>
        <img src="assets/image/logo.png" alt="网易Logo">
        <img src="assets/image/harm.jpg" alt="有害信息举报">
    </header>
</body>
</html>

嵌入式引入的样式优先级较另外两种方式所引入的样式优先级高。<style>标签可以位于<head>或<body>标签之间的任意一个位置。

在<style>标签中引入的CSS样式里有几个知识点需要了解一下：

  1. header、img:last-child等均属于CSS选择器，用于指定文档中需要添加样式属性的标签。

  2. CSS样式由选择器和花括号（{}）内的属性组成。

  3. 属性是由冒号（:）分隔的属性和属性值组成的键值对。

  4. 属性对必须使用分号（;）结尾。

  5. img:last-child是一个伪类选择器，表示选择文档中全部位于所在父标签的最后一个子标签的img元素。

扩展

网站标题或Logo图片一般都占据了显眼的位置，如果只是单纯的展示企业形象，略显奢侈。因此一般会为网站标题或Logo图片增加抵达网站首页的链接。而“有害信息举报”图片则链接到国家相关部门。我们对上面的代码进行一些调整，使它能够支持这两个链接。

<header>
    <a href="https://www.163.com">
        <img src="assets/image/logo.png" alt="网易Logo">
    </a>
    <a href="https://www.12377.cn" target="_blank">
        <img src="assets/image/harm.jpg" alt="有害信息举报">
    </a>
</header>

在不调整CSS代码的情况下，显示结果发生了变化：

2022-07-08-22-44-39-image.png

这可不是我们所要的效果——两个图片链接全部显示在网页的右侧。原因是我们调整了HTML结构后，这两个img标签都成为了各自a标签的唯一子元素，自然也是最后一个子元素了。因此全部被img:last-child选择器所选中，从而设置了float: right属性，导致浮动到网页右侧。为了正确显示网页内容，我们需要在调整HTML结构后，对CSS选择器做出对应的调整。

a:last-child {
    float: right;
}

将img:last-child选择器改为a:last-child选择器后，网页恢复正常显示。

2022-07-08-23-02-57-image.png

默认情况下，子标签的内容会随着父标签移动。因此当a标签向右浮动时，它包裹的img也会随之浮动。

完整代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易新闻</title>
    <style>
        header {
            width: 960px;
            height: 51px;
            padding-top: 35px;
            margin: 0 auto;
            border-bottom: 2px #ff3333 solid;
        }

        a:last-child {
            float: right;
        }
    </style>
</head>
<body>
    <header>
        <a href="https://www.163.com">
            <img src="assets/image/logo.png" alt="网易Logo">
        </a>
        <a href="https://www.12377.cn" target="_blank">
            <img src="assets/image/harm.jpg" alt="有害信息举报">
        </a>
    </header>
</body>
</html>
avatar
文章
阅读
粉丝