前端的初学习 -- 第一章 -- HTML
什么是HTML
HTML 指的是超文本标记/标签语言 (Hyper Text Markup Language) 专门制作网页的计算机语言
使用记事本写一个网页
<html>
<head> <!-- 头部 -->
<title>第一个网站</title>
</head>
<body> <!-- 身体 -->
hello.网页主体
</body>
</html>
注意:
- 标签它代表当前页面是一个HTML
- 标签中可以声明HTML页面的相关信息
- 标签中它主要是用于显示页面信息
- 标签要有开始,有结束,成双成对
- 开始标签与结束标签中的内容是标签的内容,如果没有标签内容,可以让标签自关闭
- 大多数标签它具有属性,属性值要使用引号引起来。
- HTML它本身是不区分大小写的。
使用vscode开发第一个网页
- https://code.visualstudio.com/,傻瓜式安装即可
- 安装vscode之后,在界面的左侧,选择安装中文插件。
安装完中文插件后,重启即是中文
- vscode本身没有新建项目的选项,所以要先创建一个空的文件夹,如: vscode目录
- 然后打开vscode软件,在vscode软件中选择 File -> Open Folder 打开刚才创建的文件夹
右键目录 - 创建文件,在代码编辑区,最上面输入!回车(一个!的,不是三个!那个) - 运行需要再装一个插件, open in browser,安装完插件,右键想要运行的页面文件,或者 使用快捷键 alt+b(启动前要保存一下代码)
认识HTML
文件标签
<html> 标签: 代表当前书写的是一个HTML文档
<head>标签:存储的本页面的一些重要的信息,它不会显示
<head>标签:有一个子标签<title>它是用于定义页面的标题的
<body>标签:书写的内容会显示出来
<body>标签的属性
1. text 用于设置文字颜色
2. bgcolor 用于设置页面的背景色
3. background 用于设置页面的背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body text="white" bgcolor="black" background="img/1.jpg">
这是我的第一个网站
</body>
</html>
排版标签
HTML注释
<!-- 这是一个注释 -->
换行标签
<br/>
<br>
<!-- 这两个没有任何区别 -->
段落标签
align属性:left(默认)、right(右对齐)、center(水平居中)
<p>这是默认对其的段落标签</p>
<p align="center">这是一个水平居中对其的段落标签</p>
<p align="right">这是一个右对齐的段落标签</p>
水平线标签
<hr> <!-- 普通的水平线标签 -->
<hr size="10" color="white"> <!-- 高(粗)为10像素、颜色为白的水平线标签 -->
<hr size="10" width="50%" color="white"> <!-- 高(粗)为10像素、宽为总长的50%、颜色为白的水平线标签 -->
<hr size="10" width="20" align="left" color="white"> <!-- 高(粗)为10像素、宽为20像素、左对齐、颜色为白的水平线标签 -->
<hr size="10" width="20" align="center" color="white">
<hr size="10" width=