HTML人生苦短, 快卷快卷第二课 HTML 基础

Posted 2022-02-03 我是小白呀

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML人生苦短, 快卷快卷第二课 HTML 基础相关的知识，希望对你有一定的参考价值。

【html】⭐️人生苦短, 快卷快卷⭐️ 第二课 HTML 基础

概述
软件安装
HTML 界面元素
HTML 标签

概述

HTML (Hyper Text Markup Language) 即超文本标记语言, 由各种标签组成. HTML 语言在网页设计中有广泛的应用. 从今天开始, 小白我就带大家来一起了解一下 HTML.

软件安装

因为后续会推出 php & HTML 结合的教程, 所以这边我们使用的软件是 PhpStorm.

PhpStorm 下载地址:

https://www.jetbrains.com/phpstorm/

安装:

HTML 界面元素

首先还是来看我们上一节展示的 Hello World.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

<!DOCTYPE html>: 声明为 HTML5 文档
<html>: HTML 页面的根元素
<head>: 定义文档的头部, 是所有头部元素的容器
- <meta>: 指定了 HTML 文档的元数据 (描述, 关键词, 最后修改时间)
- <title>: HTML 文档的标题
<body>: 可见的页面内容

HTML 标签

HTML 标签 (Tag) 为我们提供了丰富的标签, 可以给文本添加不同的语意.

标签	含义
`<h1>...</h1>` `<h2>...</h2>` `<h3>...</h3>` `<h4>...</h4>` `<h5>...</h5>` `<h6>...</h6>`	标题
`<p>...</p>`	段落
`<a herf="https://iamarookie.blog.csdn.net/">...</a>`	链接
`<img src="文件路径", alt="图形错误时显示">`	图片

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>我是小白呀的博客</h1>
    <p>个人简介：吾本布衣, 出自纽约, 四周大山. 箪瓢屡空, 环堵萧然, 不弊风日. 吾好读书, 滴水石穿, 笨鸟先飞, 求知不断, 方能立足.<br>
        不羡孔北海之座上客常满, 但求吾辈架上书常在. 涸辙遗鲋, 暮成枯, 人而无志, 与彼何殊. <br>
        Self-study Computer Science. 愿为 open source 自效微力. 天高地阔，欲往观之. 因为啥也不会, 默默做一只小白</p>
    <a href="https://iamarookie.blog.csdn.net/">博客链接<br><br></a>
    <img src="../data/img.PNG" alt="图片" width="600" height="350">
</body>
</html>

效果: