前端笔记--HTML | 青训营笔记

100 阅读2分钟

image.png

这是我参与「第四届青训营」笔记创作活动的的第一天

什么是HTML

HTML是一种相当简单的、由不同元素组成的标记语言,它可以被应用于文本片段,使文本在文档中具有不同的含义(它是段落吗?它是项目列表吗?它是表格吗?),将文档结构化为逻辑块(文档是否有头部?有三列内容?有一个导航菜单?),并且可以将图片,影像等内容嵌入到页面中。

学习 HTML

创建第一个HTML元素 —— hello world

一个HTML元素包含是三个部分:即开始标签内容结束标签

  • 开始标签 :包含标签的名称
  • 内容 : 标签中所要输入的内容
  • 结束标签 :与开始标签几乎一致,只是在标签的名称后加一个斜杠 示例:
<p> hello world </p> 

该 HTML 语句中<p>是开始标签,hello world是内容,</p>是结束标签

常用标签

h1~h6 :创建不同字体大小的标题的标签 从h1h6逐级递减
p : 创建段落标签
a : 创建超链接的标签
span :创建行内元素
div : 最常见的容器标签
img : 引用图片的标签
input : 输入标签
ul : 无序列表
ol : 有序列表
li : 列表项\

构建第一个网站

image.png

由上面的HTML页面构成图可知: 一个简单的网站要包含声明、头部元素( head ) 和 可见的页面内容( body ) ,HTML 语句主要写在 body 标签之间
下面我们来创建一个最简单的网页
代码如下:

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <h1>hello world</h1>
</body>
</html>

显示效果:

image.png

总结

本篇文章主要是对HTML语句的构成,常见的标签进行一个简单的讲解,以及介绍了如何实现一个最简单的网站。
本文仅仅是自己对HTML语言的部分理解,讲解内容不全还望谅解。

参考

MDN中的开始学习 HTML