第一个 HTML 页面

浏览 11

课文

### 第一个 HTML 页面 在桌面上新建一个文本,输入以下代码保存。 ![image](https://qiniu.3yya.com/9e37a2fa2ea9517963d4f9d3549fd42c/9e37a2fa2ea9517963d4f9d3549fd42c.png) ```html <h1>三眼鸭yyds</h1> ``` 将文件的后缀改成 `html`, 双击打开。 ![image](https://qiniu.3yya.com/efef63408d8ca63e5dddb602c7b7e6f3/efef63408d8ca63e5dddb602c7b7e6f3.png) 不出意外会显示一个网页,网页上用大号加粗字体显示了 `三眼鸭yyds` .。 ![image](https://qiniu.3yya.com/2d6e00a27b24d1b3635a4a4432c53ec3/2d6e00a27b24d1b3635a4a4432c53ec3.png) 其中 `<h1>` 是一级标题的开始标签, `</h1>` 则是一个结束标签。开始标签与结束标签是一一对应的,它们构成了一个元素。这里则是构成了 `一级标题` 这个元素。 ## HTML 页面 HTML 是 `HyperText Markup Language 超文本标记语言` 的缩写。 以下代码是一个较为完整的 `HTML 页面` 。 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>三眼鸭</title> </head> <body> <h1>三眼鸭yyds</h1> <p>欢迎来三眼鸭学编程</p> </body> </html> ``` - `**<!DOCTYPE html>**` 声明这是一个 HTML 页面 - **`<html>`** HTML 页面的根元素 - **`<head>`** 头部元素,包含一些引入文件,元信息等 - **`<meta charset="utf-8">`** 网页编码格式为 **utf-8** - **`<title>`** 元素描述了文档的标题 - **`<body>`** 页面上的可见元素 - **`<h1>`** 一级标题 - `<p>` 文本段落 代码运行结果如下,**`<title>`** 标签的内容就是浏览器的标题,而只有 **`<body>`** 元素内的内容才会显示在页面上。 ![image](https://qiniu.3yya.com/2b2d85f1f8d8800abd0711f8f4c248e2/2b2d85f1f8d8800abd0711f8f4c248e2.png) 通过上面这个例子我们发现 `HTML` 元素是可以 `嵌套` 的,这是 `HTML` 最大的特点与实用性所在,因为页面中很多元素都是嵌套的,便可以用 `HTML` 轻易地表达出来。 比如三眼鸭的首页元素同样也是一层一层的嵌套关系。 ![image](https://qiniu.3yya.com/3ba91347331239164a10fbd0d425d437/3ba91347331239164a10fbd0d425d437.png)

实战

写一个网页,标题是你的名字,页面内容是你的座右铭。

解析

```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>路飞</title> </head> <body> <p>我是要成为海贼王的男人。</p> </body> </html> ```
点击查看

评论

登录参与讨论

暂无评论

共 0 条
  • 1
前往
  • 1

课程目录

第一课:什么是前端开发 第二课:第一个 HTML 页面

学习遇到困难?微信扫码进入社群与小伙伴一起交流讨论。