第4章创建简单网页-优快云博客

本文链接：https://blog.youkuaiyun.com/StarPlatinum2/article/details/144906039

创建网页的步骤

从内容开始
HTML文档结构化
确定文本元素
添加图像
使用样式改变外观

bistro.txt文件

Black Goose Bistro

  

The Restaurant

The Black Goose Bistro offers casual lunch and dinner fare in a relaxed atmosphere. The menu changes regularly to highlight the freshest local ingredients.

  

Catering

You have fun. We'll handle the cooking. Black Goose Catering can handle events from snacks for a meetup to elegant corporate fundraisers.

  

Location and Hours

Seekonk, Massachusetts;

Monday through Thursday 11am to 9pm; Friday and Saturday, 11am to midnight.

第1步：从内容开始

![[Pasted image 20241224134443.png]]

创建bistro.html文件，并在浏览器中打开。

HTML文件必须以.html或.htm结尾。

![[Pasted image 20241224134543.png]]

由结果可知，浏览器忽略了源文件中的换行。

第2步 : HTML文档结构化

html元素剖析
![[Pasted image 20241224135016.png]]

元素是由内容及其标记(开始标签和结束标签)组成的。

基本文档结构
![[Pasted image 20241224135750.png]]

第一行并不是一个元素，它只是一个文档声明(document type declaration，也叫DOCTYPE声明)，可以让如今的浏览器知道使用哪个HTML规范来解释文档。
html元素被称为根元素，因为它包含文档中的所有元素，并且不能被其他元素所包含。
head元素包含与文档相关的元素。
meta元素提供了文档的元数据，也就是这个文档本身的信息。
title元素文档的标题
body元素包含所有我们想显示到浏览器窗口中的东西

现在将该文档结构化

<!DOCTYPE html>

<html>

  

<head>

    <title>Black Goose Bistro</title>

    <meta charset="UTF-8">

</head>

<body>
    Black Goose Bistro

  

    The Restaurant

    The Black Goose Bistro offers casual lunch and dinner fare in a relaxed atmosphere. The menu changes regularly to

    highlight the freshest local ingredients.

  

    Catering

    You have fun. We'll handle the cooking. Black Goose Catering can handle events from snacks for a meetup to elegant

    corporate fundraisers.

  

    Location and Hours

    Seekonk, Massachusetts;

    Monday through Thursday 11am to 9pm; Friday and Saturday, 11am to midnight.

</body>

  

</html>

显示效果
![[Pasted image 20241224141426.png]]

第3步 : 确定文本元素

语义标记
HTML的目的是给内容增加意义和结构，但往往不能描述如何改善外观。
标记内容时的任务是选择合适的HTML元素，为当前的内容提供最有意义的描述，这叫作语义标记(semantic markup)。
除了增添内容的意义外，标记还使文档结构化。

用HTML元素来标记内容

<!DOCTYPE html>

<html>

  

<head>

    <title>Black Goose Bistro</title>

    <meta charset="UTF-8">

</head>

  

<body>

  

    <h1>Black Goose Bistro</h1>

  

    <h2>The Restaurant</h2>

    <p>

        The Black Goose Bistro offers casual lunch and dinner fare in a relaxed atmosphere. The menu changes regularly

        to

        highlight the freshest local ingredients.

    </p>

    <h2>Catering</h2>

    <p>You have fun. <em>We'll handle the cooking.</em> Black Goose Catering can handle events from snacks for a meetup

        to

        elegant

        corporate fundraisers.

    </p>

    <h2>Location and Hours</h2>

    <p>Seekonk, Massachusetts;

        Monday through Thursday 11am to 9pm; Friday and Saturday, 11am to midnight.

    </p>

</body>

  

</html>

浏览器中打开
![[Pasted image 20241224144208.png]]

块元素和内联元素

标题和段落元素都是从新行开始的，没有像之前一样挤在一起。这是因为标题和段落都是块元素(block element)的实例。浏览器处理块元素时，把它们当作位于矩形盒子中，在网页中堆叠。每个块元素都是从新行开始的。
在来看看em元素，em元素中的内容并没有从新行开始，因为em元素是内联元素(inline element，也成为文本级语义元素或短语元素)。

默认样式

h1元素的内容字体很大，浏览器是如何来确定h1的外观的呢？它使用样式表来判断，所有的浏览器都有自己内置的样式表(用户代理样式表)，内置样式表可以描述元素的默认显示方式。

第4步 : 添加图像

空元素

少数元素没有内容，因为它们只是用来提供一些简单的指令，这些元素被称为空元素。图像元素(img)就是空元素，它告诉浏览器，从服务器获取一个图像文件并插入文本流中的某个位置。

![[Pasted image 20241224145528.png]]

属性

属性是用来阐明或修改元素的指令。属性的语法如下 : attributename="value"。
属性跟在元素名的后面，使用一个空格分隔，在一个非空元素中，属性只能在开始标签中出现 :
![[Pasted image 20241224175116.png]]

将图片添加到html文件中

<!DOCTYPE html>

<html>

  

<head>

    <title>Black Goose Bistro</title>

    <meta charset="UTF-8">

</head>

  

<body>

  

    <h1><img src="blackgoose.png" alt="大鹅"><br> Black Goose Bistro</h1>

  

    <h2>The Restaurant</h2>

    <p>

        The Black Goose Bistro offers casual lunch and dinner fare in a relaxed atmosphere. The menu changes regularly

        to

        highlight the freshest local ingredients.

    </p>

    <h2>Catering</h2>

    <p>You have fun. <em>We'll handle the cooking.</em> Black Goose Catering can handle events from snacks for a meetup

        to

        elegant

        corporate fundraisers.

    </p>

    <h2>Location and Hours</h2>

    <p>

        Seekonk, Massachusetts;<br>

        Monday through Thursday 11am to 9pm; <br>

        Friday and Saturday, 11am to midnight. <br>

    </p>

</body>

  

</html>

文档的效果
![[Pasted image 20241224175840.png]]

第5步 : 使用样式表改变外观

添加简单的样式表规则

<!DOCTYPE html>

<html>

  

<head>

    <title>Black Goose Bistro</title>

    <meta charset="UTF-8">

    <style>

        body {

            background-color: #faf2e4;

            margin: 0 10%;

            font-family: sans-serif;

        }

        h1 {

            text-align: center;

            font-family: serif;

            font-weight: normal;

            text-transform: uppercase;

            border-bottom: 1px solid #57b1dc;

            margin-top: 30px;

        }

        h2 {

            color: #d1633c;

            font-size: 1em;

        }

    </style>

</head>

  

<body>

  

    <h1><img src="blackgoose.png" alt="大鹅"><br> Black Goose Bistro</h1>

  

    <h2>The Restaurant</h2>

    <p>

        The Black Goose Bistro offers casual lunch and dinner fare in a relaxed atmosphere. The menu changes regularly

        to

        highlight the freshest local ingredients.

    </p>

    <h2>Catering</h2>

    <p>You have fun. <em>We'll handle the cooking.</em> Black Goose Catering can handle events from snacks for a meetup

        to

        elegant

        corporate fundraisers.

    </p>

    <h2>Location and Hours</h2>

    <p>

        Seekonk, Massachusetts;<br>

        Monday through Thursday 11am to 9pm; <br>

        Friday and Saturday, 11am to midnight. <br>

    </p>

</body>

  

</html>