HTML简介与常用标签

缺乏、安全感 2022-11-18 04:54 418阅读 0赞

**声明**：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址：

1.  H5C3+移动布局：[ 黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩][_pink_ HTML5_CSS3_-flex_rem_-]
2.  JavaScript系列 ：[JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新）][JavaScript_-dom_bom-es6-jQuery-_echarts-_pink]

### 文章目录 ###

*  HTML简介与常用标签
 *   *  1.网页相关概念
     *  2.HTML语法规范
     *  3.HTML基本结构标签
     *  4.VSCode开发工具的使用
     *  5.HTML常用标签
     *  6.HTML中的注释和特殊字符

--------------------

# HTML简介与常用标签 #

## 1.网页相关概念 ##

**网页**是由图片、链接、文字、声音、视频等**元素**组成，其实就是一个html文件（后缀名为html）

网页生成制作：由前端人员书写HTML文件，然后浏览器打开，就能看到网页了。

HTML指的是**超文本标记语言**，是用来描述网页的一种语言。

超文本的2层含义：

*  它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。
 *  他还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

**浏览器内核（渲染引擎）**：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

**Web标准**是由W3C（万维网联盟）组织和其他标准化组织制定的一系列标准的集合 。

Web标准的构成：主要包括**结构、表现和行为**三个方面。

结构写到HTML文件中，表现写到CSS文件中，行为写到 JavaScript文件中。

<table> 
 <thead> 
  <tr> 
   <th align="center">标准</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">结构</td> 
   <td align="left">结构用于对<strong>网页元素</strong>进行整理和分类，现阶段主要学的是HTML</td> 
  </tr> 
  <tr> 
   <td align="center">表现</td> 
   <td align="left">表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS</td> 
  </tr> 
  <tr> 
   <td align="center">行为</td> 
   <td align="left">行为是指网页模型的定义机交互的编写，现阶段主要学的是Javascript</td> 
  </tr> 
 </tbody> 
</table>

## 2.HTML语法规范 ##

*  基本语法概述：

1.  HTML标签是由尖括号包围的关键词，例如<html>;
2.  HTML标签通常是成对出现的，例如<html>（开始标签）和</html>（结束标签），称为双标签。
3.  有些特殊的标签必须是单个标签（极少情况）例如<br/>称为单标签。

*  标签关系  
    双标签关系可以分为两类：包含关系（head和title）、并列关系（head和body）。

## 3.HTML基本结构标签 ##

每个网页都会有一个基本的结构标签（骨架标签），页面内容也是在这些基本标签上书写。

<table> 
 <thead> 
  <tr> 
   <th>标签名</th> 
   <th>定义</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt;html&gt;&lt;/html&gt;</td> 
   <td>HTML标签</td> 
   <td>页面中最大的标签，成为根标签</td> 
  </tr> 
  <tr> 
   <td>&lt;head&gt;&lt;/head&gt;</td> 
   <td>文档头部</td> 
   <td>注意head标签中我们要设置的标签是title</td> 
  </tr> 
  <tr> 
   <td>&lt;title&gt;&lt;/title&gt;</td> 
   <td>文档标题</td> 
   <td>让页面拥有一个属于自己的网页标题</td> 
  </tr> 
  <tr> 
   <td>&lt;body&gt;&lt;/body&gt;</td> 
   <td>文档主体</td> 
   <td>元素包含文档的所有内容，页面内容基本都是放在body里面的</td> 
  </tr> 
 </tbody> 
</table>

## 4.VSCode开发工具的使用 ##

*  VSCode生成骨架结构的快捷键：！
 *  注意保存文件格式为.html文件
 *  VSCode工具生成骨架标签新增代码：
    
    1.<!DOCTYPE html>：文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页
    
    注意：<!DOCTYPE>标签声明位于文档中最前面的位置；它不是一个HTML标签，只是文档类型声明标签。
    
    2.html lang=“en”：用来定义当前文档显示的语言，en为英文，zh-CN为中文，告诉浏览器或搜索引擎采用英文或中文来显示；
    
    3.meta charset=“UTF-8”：识别和存储各种文字，统一使用UTF-8（万国码），这句必须写，否则可能引起乱码。

## 5.HTML常用标签 ##

**5.1 语义标签**：根据标签的语义，在合适的地方给一个最合理的标签，可以让页面结构更加清晰。

**5.2 标题标签<h1>-<h6>(重要)**：作为标题使用，并且根据重要性递减（一级~六级标题）

**5.3 段落和换行标签(重要):**

<p> </p> 段落标签，文本在一个段落中会根据浏览器窗口大小自动换行，段落与段落之间保有空隙；（paragraph缩写）

<br/> 单标签，标签语义为强制换行（break缩写）

**5.4 文本格式化标签：**

<strong></strong> //加粗
    <em></em> //倾斜
    <dei></dei> //删除线
    <ins></ins> //下划线

**5.5 <div>和<span>标签**：没有语义，只是一个盒子，用来装内容

*  div用来布局，表示分割，分区，但是一行只能放一个（大盒子）
 *  span用来布局，表示跨度、跨距，一行上可以放多个（小盒子）

**5.6 图像标签（重点）**：

*  <img>标签用来定义HTML页面中的图像（单标签）
 *  src是标签的必须属性，他用于指定图像文件的路径和文件名

<img src = "图像URL" width="图片的宽度", height="图片的高度", boder="给图片设定边框"/>   //高度宽度一般修改其中一个就会实现等比缩放

*  使用图像标签的注意点
    
     *  图像标签可以拥有多个属性，但必须写在标签名的后面
     *  属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开
     *  属性采取键值对的格式，即key=“value”的格式，属性=“属性值”。

**5.7 路径（重点）**

*  目录文件夹：普通文件夹，用于存放做页面所需要的素材，比如html文件、图片等
 *  根目录：打开目录文件夹的第一层目录就是根目录

**1.相对路径**：以引用文件所在位置为参考基础，而建立出的目录路径（图片相对于HTML页面的位置）

同一级路径<img src = “baidu.gif"/>；下一级路径<img src = “images/baidu.gif"/>;上一级路径<img src = “…/baidu.gif"/>。

**2.绝对路径**：是指目录下的绝对位置，通常从盘符开始的路径（注意反斜杠方向相反）

例如“C:\\Users\\lp\\Desktop\\前端基础练习\\images”，或完整的网络地址“https://img2.baidu.com/it/u=1052468425,3707178953&fm=26&fmt=auto&gp=0.jpg”

**5.8 超链接标签（重点）**

1.  a：用于定义超链接，作用是从一个页面链接到另一个页面

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

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>href</td> 
   <td>用于链接目标地址的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能</td> 
  </tr> 
  <tr> 
   <td>target</td> 
   <td>用于指定链接页面的打开方式，其中__self为默认值， _blank为在新窗口中打开方式</td> 
  </tr> 
 </tbody> 
</table>

**2.链接分类**：外部链接、内部链接、空链接、下载链接、网页元素链接（以下为依次举例）

<a href="#"> 首页 </a>   //如果当时没有确定链接目标时

*  **锚点链接**：点我们的点击链接，可以快速定位到页面中的某个位置
    
     *  在链接文本的href属性中，设置属性值为\#名字的形式，如
        
            <a href="#mingzi"> 第二季 </a>
     *  找到目标位置标签，里面添加一个id属性=刚才的名字，如
        
            <h3 id="mingzi"> 第二季介绍 </h3>

## 6.HTML中的注释和特殊字符 ##

1.以“<!–”开头，以“–>”结束，快捷键：ctrl+/

2.特殊字符（常用）：  
![\[外链图片转存中...(img-zOLXE4BX-1618219560775)\]][..._img-zOLXE4BX-1618219560775]

[_pink_ HTML5_CSS3_-flex_rem_-]: https://www.bilibili.com/video/BV14J4114768?spm_id_from=333.788.b_636f6d6d656e74.6
[JavaScript_-dom_bom-es6-jQuery-_echarts-_pink]: https://www.bilibili.com/video/BV1Sy4y1C7ha?spm_id_from=333.788.b_636f6d6d656e74.7
[..._img-zOLXE4BX-1618219560775]: /images/20221022/e81ae89f859940e18b57a5697662feed.png