【前端web入门第一天】01 开发环境、HTML基本语法文本标签

文章目录:

[1. 准备开发环境](#1. 准备开发环境)
- [1.1 vs Code基本使用](#1.1 vs Code基本使用)
2.HTML文本标签
- [2.1 标签语法](#2.1 标签语法)
- [2.2 HTML基本骨架](#2.2 HTML基本骨架)
- [2.3 标签的关系](#2.3 标签的关系)
- [2.4 注释](#2.4 注释)
- [2.5 标题标签](#2.5 标题标签)
- [2.6 段落标签](#2.6 段落标签)
- [2.7 换行与水平线标签](#2.7 换行与水平线标签)
- [2.8 文本格式化标签](#2.8 文本格式化标签)

1. 准备开发环境

VSCode与谷歌浏览器离线版,安装包评论区自提.

VSCode默认安装位置:C:\Users\hp\AppData\Local\Programs\Microsoft VS Code

1.1 vs Code基本使用

打开文件夹
- 任意文件夹→拖拽至vs Code空白位置即可安装插件
安装插件
- 左边栏选择扩展→搜索插件→安装→重启Vs Code·
安装两种插件名
- 汉化菜单插件:Chinese
- 打开网页插件: open in browser

2.HTML文本标签

HTML超文本标记语言一―HyperText Markup Language。

超文本是什么? 链接
标记是什么? 标记也叫标签，带尖括号的文本

2.1 标签语法

标签成对出现，中间包裹内容<>
里面放英文字母(标签名)
结束标签比开始标签多/

例子:加粗文字(双标签,要包裹内容所以是双标签)

html 复制代码

<strong>加粗的文字</strong>

加粗的文字

例子:水平线(单标签,不需要包裹内容所以是单标签)

html 复制代码

<hr>

2.2 HTML基本骨架

HTML基本骨架是网页模板.

html 复制代码

<html>
	<head>
		<title>网页标题</title>
	</head>
	<body>
		网页主体
	</body>
</html>

html:整个网页
head:网页头部，存放给浏览器看的代码，例如CSS
body:网页主体，存放给用户看的代码，例如图片、文字
title:网页标题

vs code 快速生成骨架:

在HTML文件(.html)中，!(英文)配合Enter / Tab键

2.3 标签的关系

作用:明确代码的书写位置

标签的两种关系:

父子关系(嵌套关系)
兄弟关系（并列关系)

上面的图片和文字是兄弟关系,他们与整个大方框是父子关系

2.4 注释

注释就是对代码的解释和说明，其目的是让人们能够更加轻松地了解代码。注释是编写程序时，写程序的人给一个语句、程序段、函数等的解释或提示，能提高程序代码的可读性。

在编写HTML代码时，我们经常要在一些关键代码旁做一下注释，这样做的好处很多，比如:方便理解、方便查找或方便项目组里的其它程序员了解你的代码，而且可以方便以后你对自己代码进行修改。学习和工作中，关键代码都要加注释

html 复制代码

<!--..-->注释标签用来在源文档中插入注释，注释不会在浏览器中显示。
<!--注释标签用来在源文档中插入注释，注释不会在浏览器中显示。-->

2.5 标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。

标签名: h1 ~h6（双标签)

显示特点:
- 文字加粗
- 字号逐渐减小
- 独占一行（换行)

html 复制代码

<html>
    <head>
        <title>
            凡界每日一报
        </title>
    </head>
    <body>
        <h1>
            一级标题
        </h1>
        <h2>
            二级标题
        </h2>
        <h3>
            三级标题
        </h3>
    </body>
</html>

经验分享:

h1标签在一个网页中只能用一次，用来放新闻标题或网页的logo.
h2~ h6没有使用次数的限制

2.6 段落标签

显示效果:

标签名:p（双标签)

显示特点:独占一行
段落之间存在间隙

html 复制代码

<html>
    <body>
     	<p>
     	这里写段落
     	</p>
    </body>
</html>

2.7 换行与水平线标签

都是单标签,因为不需要包裹内容

html 复制代码

 换行: <br>(单标签)
 水平线: <hr>(单标签)

注意:

代码中敲回车,浏览器显示是不会换行的

2.8 文本格式化标签

作用:为文本添加特殊格式，以突出重点。常见的文本格式:加粗、倾斜、下划线、删除线等。