前端学习之HTML篇

前端学习之HTML

什么是HTML?

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

学习目标：

• HTML+前端编程环境
  • 基础标签
  • 编辑器vscode等
    • 熟悉基本使用
  • 浏览器使用
    • 熟悉开发者工具

---

学习内容：

1.熟悉HTML基础标签

  1.标题标签

   标签语义：1.作为标题使用，并且依据重要性递减

   特点：  1.加了标题的文字会加粗，字号也会依次改变

           2.一个标题独占一行

<h1> 嗨，这里是h1标题！</h1>
<h2> 嗨，这里是h2标题！</h2>
...........................
<h6> 嗨，这里是h6标题！</h3>

  2.段落与换行标签

   段落标签

    标签语义：用于定义段落，把整个网页分为若干个段落

   特点：  1.文本在一个段落中会根据浏览器窗口的大小自动换行

           2.段落和段落之间保有空隙

<p> 这是一个段落 ! </p>
<p> 这里是另一个段落！</p>

   换行标签

    标签语义：用于在某段文本强制换行显示

   特点：  1.是单标签

           2.标签只是简单的开始新的一行，与段落不一样，段落之间会插入一些垂直的间距

 <p>这是一个段落 ! </p><br/>
<p> 这里是另一个段落！</p><br/>

  3.链接标签

    标签语义：用于定义超链接，从一个页面链接到另一个页面

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像</a>

  4.图像标签

    标签语义：用于定义HTML页面中的图像

<img src="图像URL" width="xxx" height="xxx" />
//src是标签的必须属性，它用于指定图像文件的路径和文件名

2.熟悉vscode基本使用

  1.前往vscode官网:地址安装正版vscode

  2.创建专属的文件夹，创建第一个html文件

  3.使用方便快捷的vscode快捷键

    1.键入“!”，即感叹号

注：(请勿在中文模式下输入感叹号，或输入中文的感叹号，请务必使用英文的感叹号)

    2.按[tab]或[enter]键，生成一段标准的HTML代码

  4.安装插件，使用更完美的vscode

    1.前往拓展，准备安装插件

    2.搜索所需插件并一键安装

注：某些插件许重启vscode而正确运行

    3.一些推荐的插件

        1.

        2.

        3.

        4.

3.熟悉浏览器的使用之开发者工具

  1.使用快捷键F12 打开开发者工具

  2.熟悉各工具作用