前端与HTML ｜青训营HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签。通过这些标签可以将网络上的文

什么是前端？

解决GUI人机交互问题

跨终端：PC/移动浏览器；客户端/小程序；VR/AR等

Web技术栈

前端技术栈

JavaScript（行为)

CSS（样式）

HTML（内容）

这三者都是通过http网络协议渲染到页面上的

前端应关注哪些方面？

美观、功能、安全、体验、兼容、性能、体验、无障碍

开发环境

浏览器：IE/Edge、chrome、firefox、safari

编译器：vscode、vim、webstorm

HTML是什么？

hypertext markup language

hypertext包括图片、标题、链接、表格

markup language表示标签语言

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>
    
</body>
</html>

标题标签

    <h1>一级标签</h1>  <!-- 一般一级标签只使用一次 -->
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>
    <h6>六级标签</h6>

显示特点：

文字加粗
字号逐渐减小
独占一行（换行）

格式化标签

加粗标签 倾斜标签 下划线标签 ~~删除标签~~

<strong>加粗标签</strong>
    <em>倾斜标签</em>
    <ins>下划线标签</ins>
    <del>删除标签</del>

超链接标签

开发初期，不确定地址用#替代 target="_blank"属性代表在新窗口打开页面

    <a href="https://www.baidu.com/" target="_blank">跳转到百度</a>

标签结构

标签要成对出现，中间包裹内容

<>里面放英文字母（标签名）

结束标签比开始标签多 /

标签分类：双标签和单标签

标签的关系

作用：明确标签的书写位置，让代码格式更整齐

父子关系（嵌套关系）：子级标签换行且缩进（Tab键）

兄弟关系（并列关系）：兄弟标签换行要对齐

注释

概念：注释是对代码的解释和说明，能够提高程序的可读性，方便理解、查找代码。

注释不会再浏览器中显示。

在 VS Code 中，添加 / 删除注释的快捷键：Ctrl + /

路径

概念：路径指的是查找文件时，从起点到终点经历的路线。

路径分类：

相对路径：从当前文件位置出发查找目标文件

绝对路径：从盘符出发查找目标文件

Windows 电脑从盘符出发

Mac 电脑从根目录出发

相对路径

查找方式：从当前文件位置出发查找目标文件

特殊符号：

/ 表示进入某个文件夹里面 → 文件夹名/

**. ** 表示当前文件所在文件夹 → ./

.. 表示当前文件的上一级文件夹 → ../

绝对路径

查找方式：Windows 电脑从盘符出发；Mac 电脑从根目录（/）出发

无序列表

作用：布局排列整齐的不需要规定顺序的区域。

标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  ……
</ul>

有序列表

作用：布局排列整齐的需要规定顺序的区域。

标签：ol 嵌套 li，ol 是有序列表，li 是列表条目。

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  ……
</ol>

定义列表

标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。

<dl>
  <dt>列表标题</dt>
  <dd>列表描述 / 详情</dd>
   ……
</dl>

input 标签

input 标签 type 属性值不同，则功能不同。

<input type="..." >

input 标签占位文本

占位文本：提示信息，文本框和密码框都可以使用。

<input type="..." placeholder="提示信息">

文本域

作用：多行输入文本的表单控件。

<textarea>默认提示文字</textarea>

注意点：

实际开发中，使用 CSS 设置文本域的尺寸

实际开发中，一般禁用右下角的拖拽功能

总结

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

前端与HTML ｜ 青训营

前端与HTML ｜青训营