Web Frontend Basics Overview

HTML简介

HTML 是用来描述网页的一种语言，全称是 Hyper-Text Markup Language，即超文本标记语言。我们浏览网页时看到的文字、按钮、图片、视频等元素，它们都是通过 HTML 书写并通过浏览器来呈现的。这将是我们介绍前端的核心。

2014年10月，HTML5作为稳定W3C推荐标准发布，这意味着HTML5的标准化已经完成。HTML已经是一个非常成熟的语言，他是整个前端的后续介绍的基础。

所有的有浏览器的电脑都可以观看HTML文件，只需要修改后缀后使用浏览器打开，也可以使用一些插件在VSC中修改并预览HTML代码。

HTML基础

HTML基础结构

HTML代码由尖括号中的字符组成，称为HTML元素，每个元素包括一个起始标签和一个结束标签，其中结束标签多一个斜杠。每个HTML元素向浏览器传达标签之间的内容。标签为浏览器提供了渲染内容的结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 声明文档使用的字符编码为 UTF-8，避免中文乱码 -->
    <meta charset="UTF-8">
    <!-- 设置页面在移动设备上的显示效果 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 定义网页的标题，会显示在浏览器标签页上 -->
    <title>我的第一个 HTML 页面</title>
</head>
<body>
    <!-- 一级标题 -->
    <h1>欢迎来到我的网页</h1>
    <!-- 段落 -->
    <p>这是一个简单的 HTML 示例，用于帮助新手学习 HTML 基础。</p>
    <!-- 无序列表 -->
    <ul>
        <li>HTML 是超文本标记语言</li>
        <li>用于创建网页的结构</li>
        <li>由各种标签组成</li>
    </ul>
    <!-- 插入图片，需替换为实际图片路径或 URL -->
    <img src="example.jpg" alt="示例图片" width="300">
    <!-- 创建超链接 -->
    <a href="https://www.example.com">访问示例网站</a>
    <!-- 水平线 -->
    <hr>
    <!-- 版权信息 -->
    <p>&copy; 2025 我的网页版权所有</p>
</body>
</html>

从这一段中就可以理解HTML的基础结构，<html> 元素声明其中全部都是HTML代码。<body> 声明他们是浏览器主窗口中需要呈现的内容。<h1> <p> 声明他们是一级标题或者段落。

<html lang="zh-CN"> 等在HTML标签后面增加一个空格然后再跟上一组赋值的符号是为标签增加特性，为标签提供附加信息。这里的特定约束了后面内容的语言。特性都是预定义的，我们需要了解标签有哪些对应的特性。

<head> 用于声明页面相关信息，不呈现在主窗口中，如<title>就是用于声明页面标题的，会显示在URL地址上方或者小标签处。

至于其他的元素，我们会在后面的叙述中逐步的介绍到，所有的常见元素的作用都需要了解。

基础元素

结构信息

空格：开发人员为了增强代码可读性的选择，大量的空行与空格只当作一个处理。 <h1>--</h1> 标题控制组件，一共六级 <p>--</p> 正文中的段落 <b>,<i> 粗体与斜体 <sup>,<sub> 上标与下标 <br />,<hr /> 换行符号和水平线，这种后面跟斜线的元素通常单个使用表示一定含义

语义信息

语义信息标题不改变网页的结构，但是会增加额外信息，这里简单介绍其中的一部分

<strong>,<em> 用于强调，在默认情况下分别为加粗与斜体 <blackquote cite = "xxx"> 引用到一个超链接，点击块内的内容即跳转 <abbr title = "xxx"> 提供缩写词，正文中是缩写形式，title是全拼形式，悬浮鼠标会提供全拼信息。 <cite> 内部信息是引用的 <dfn> 内部信息是新定义的 <address> 提供联系信息 <ins>,<del>,<s> 下划线、删除线、删除线

列表

HTML5提供三种基本形式的列表 <ol> 用于创建有序列表，其中使用 <li>,</li> 创建列表的项目 <ul> 用于创建无序列表，其中使用 <li>,</li> 创建列表的项目 <dl> 用于创建定义列表，他包含一系列需要被定义的术语以及这个术语所需要的多个定义解释。其中使用 <dt>,</dt> 创建列表的被定义的术语，<dd>,</dd> 用于解释其的定义。由于一个术语可能有多个定义，同一个定义可能符合多个术语，因此他们之间的HTML代码没有包含关系。

列表允许嵌套，在<li>,</li>中创建新的列表即可

链接、图像、表格

链接

链接是网络的主要特定，我们允许在多个网页之间跳转，这是网络浏览的核心。链接包含多种不同的种类来实现不同的功能，HTML以及其他外部软件之间约定了一系列实现链接的规范，使得我们可以轻松的编写相关代码。

基本的链接使用 <a hred = "xxxx"> text </a> 组成，分别包括链接到的网页以及描述文本。链接需要包含完整的URL（网址），可以不指定具体的页面.此时自动进入主页

当我们需要指向同一个网站的其他页面的时候，就无需使用长域名，可以使用简短的URL，只需要使用相对目录结构引入其他的以.html 结尾的页面即可，上级页面也可以使用 .. 实现。

如果想要使用Email 则需要使用下面的结构<a hred = "mailto:hyacehila@outlook.com"> Email Hy </a>

如果需要自动在新窗口打开，则需要设置特性 <a hred = "xxxx" target="_blank"> text </a>

如果需要链接到当前网页的特定位置，首先我们需要这个页面的其他元素中设置特定如<h2 id = "feature"> 此时再将连接处改为 <a href = "#feature"> 此时将会变为页面内部跳转

如果需要链接到其他网页的特定位置（不区分网页在外部还是网站内部，只需要使用对应的链接方式），我们也需要知道他设定的 id 然后使用<a hred = "xxxx/#feature"> text </a>

图像

网站中的图片在引用之前需要以附件的形式存储，因此建议在网站的文件中单独建立一个或者多个文件间存储 images

想要在网站中呈现一个图片，需要使用下面的空元素（没有结束标签的元素） <img src = "images/quokka.jpg" alt = "xxxx" title = "xxxxx"> 他们分别标示了图片的相对位置，当图片无法被查看的时候的替代文本描述（用于无障碍设计），以及图片的标题

如果我们需要手动指定图像大小，可以使用特定 <height = "450",width = "430"> 但是现在这种关于页面布局的内容一般使用CSS文件来指定，包括对齐相关设置

图像块可以被嵌套到其他的块之中，这也是HTML用来实现各种排版方法的核心。把他放到块级元素内或者块级元素外的效果是完全不同的。

新版的HTML5使用 <figure> 块替代原本的空元素 <img> 基本使用方法为 <figure> <img src = "images/quokka.jpg" alt = "xxxx"> <figurecaption> xxx </figurecaption> </figure> 支持了为图片添加说明

HTML目前支持多种广泛的格式图片，包括PNG，JPG，GIF，SVG等

表格

表格可以清楚的解释复杂的信息，这里我们研究如何构造一个表格，HTML按行逐行编写表格

<table> 用于开始一个表格块 <tr> 用于开始表格的每一行 <td> 用于开始每一个单元格 <th> 和 <td> 用法一样，但是实际上是用来表示这是标题，<th scope = "row">,<th scope = "col"> 指定了这是行标题还是列标题

在 <th> 和 <td> 增添加特性 <th colspan = "2"> 可以让他跨越多个列，同样的特性 <th rowspan = "2"> 可以让他跨越多个行

使用 <thead>,<tbody>,<tfoot> 可以将表格划分为多个组成部分，有助于阅读者理解，其中的各个单元格的控制方法不变。

HTML代码只负责控制内容，至于显示的样式，交给CSS控制。

表单

表单是一个提供了一些空白区域的让你填写信息的地方，当我们需要收集访问者的信息的时候，就可以使用。很多浏览器可以提前收集用户的信息，然后自动的根据表单的要求填写。

表单被用户填写，然后通过点击按钮的方式提交信息到服务器，然后服务器据此回复一个新的网页。

一个表单使用 <form action = “URL” methon = "get"> </form> 创建其中 action 决定了服务器接受URL的位置，method 决定了提交方法，一般小的检索使用 get ；上传文件，密码确认使用 post

在表单中增加一个 <input type = "text" name = "username" maxlength = 4> 可以创建一个文本框，其中的 name 是用来和服务器进行对齐的键，maxlength 是允许输入的最大长度；更换text为password则自动隐藏输入的字符

如果希望创建的一个多行的文本框，则应该使用 <textarea name = "xxx"> </textarea> 实现

单选按钮需要使用 <input type = "ratio" name = "xxx" value = "xxx"> 实现，我们需要在一个<form> 中使用多个单选按钮才能实现单选题

复选按钮需要使用 <input type = "checkbox" name = "xxx" value = "xxx"> 实现，和单选一样，我们需要多个复选按钮才能实现多选题

下拉选择使用 <select name ="xx"> </select> 与多个 <option value = "xxx"> </option> 组成

如果希望用户上传文件，则需要使用<input type = "file"> 实现；对应的，如果需要增加一个提交按钮，则需要 <input type = "submit">

HTML5提供了更多常用的表单属性，包括email url search 等，在 <input> 里进行选择即可，这样可以方便使用者填写表单。

其他标记

版本信息

在整个页面的开头，我们可以使用 <!DOCTYPE html> 声明版本

在HTML代码中，我们可以使用  来撰写注释

每个HTML组件都可以使用 <id = "xxx"> 来进行标示，这可以方便后面JS的自动化处理

那些总是另起一行的元素称为块级元素，有 <h1> <p> <ul> <li> 等；相反的的称为内链元素

<div> </div> 元素允许我们把一组元素集中到一个块级元素中来方便管理，当网页区分了很多重要的块的时候，我们就会经常使用它

<iframe> 在网页的一个小窗口中嵌入新的网页

页面meta信息

<meta> 放在 <head> 中，使用 <meta name = "xxx" content = "xxx" /> 组成，可以包含关于网站的设计者 <author> 页面缓存 <pragma> 与过期时间 <expire> 等；

<descirption> 可以介绍页面描述 <kerwords> 可以给出关键词，<robots> 可以给出是否允许爬虫等等

音频与视频

视频与音频是在现代互联网中也非常重要，因此HTML5对此进行了重大的改进。

使用 <video src = "xxx.mp4"> </video> 就可以创建一个视频块给出视频的地址。其中还有非常多的特定可以选择，比如播放情况与封面，在需要的时候调整即可

对应的，如果需要音频，只需要<audio src = "xxx.mp3"> </video> 即可

CSS简介

基础介绍

CSS用于创建规则，指定元素中的内容如何进行显示；在介绍完CSS的基本原理之后，我们只需要了解各种样式就可以了。

为了能够理解CSS，我们需要知道每一个HTML元素都被装在一个盒子中，我们可以对这个盒子中的内容设置元素格式规则，CSS的作用就是选中格子，再给出规则。

一个CSS规则包含两个部分，选择器和规则。如 p,h1 {font-family:Arial,...} 前半部分选择器选中p,h1块，后半部分使用冒号分割设置了字体。

在实际应用中，CSS文件一般单独撰写，此时可以可以在 <head> 中使用空元素 <link> 设置CSS文件的链接位置。

CSS有种类繁多的选择器，允许我们将规则应用于各种位置，主要包括通用选择，类型选择，类选择，ID选择。当同时对一个选择设置不同的CSS规则，那么后出现的选择器优先级更好，更为具体的选择器优先级更高。

颜色

CSS使用代码 <color:> 指定颜色，可以使用RGB值，16进制编码，和预先设定的名称。

除了元素颜色以外，我们可以设置背景颜色 <background-color> 无论是颜色还是背景色，我们都可以通过单独的 <opacity:> 设置透明度

在CSS3以后，我们可以使用HSL色彩和HSLA色彩，类似于RGB，使用三个值来控制颜色，如 <color:hsl(0,0%,78%)> 分别控制色调，饱和度，明度，也可以增加一位控制透明度。

文本

控制文本分为两个大类，直接作用于字体和外观属性的CSS规则，以及无关文本字体的规则。

我们可以使用 font-family: 设置字体，为了避免用户缺少字体，我们可以指定一系列字体，如 font-family: xxx,xxx,xxx; 让计算机根据情况选取。

为了指定字体的大小，我们需要使用 font-size: 允许使用的规则包括 px,%,em 分别是像素大小声明，相对于标准大小的百分比声明，根据字体m的宽度声明。

<font-weight:bold> 设置粗体；font-style:italic 设置斜体；<text-transform:> 设置大小写；<text-decoration:> 设置装饰线；

控制间距，对齐，缩进的代码这里省略介绍。我们在需要使用的时候讨论即可，这里只需要给予基本的认识。

盒子

为了控制盒子的大小，我们可以使用 height:xx;width:xx; 这个盒子可以是块级元素，也可以是使用 <div> </div> 定义的块。

为了适应用户的屏幕大小，很多的HTML设计允许自动的缩放，此时为了缩放的过宽或者过窄，我们可以使用 min-width:450px;max-width;650px;

类似的，我们可以设置最大与最小的高度来控制占用用户屏幕的大小 min-height:450px;max-height;650px; 当此时内容过多发生了溢出了的时候，我们可以使用 overflow 参数，设置为 hidden/scroll 隐藏溢出内容或者允许用户滑动查看。

使用 border-width;border-style;border-color 可以设置盒子边框的粗细，形式与颜色。使用 padding:10px; 可以设置边框内距离；使用 margin:10px; 可以设置边框外距离。

display 可以控制元素的显示方式（可以直接隐藏该元素，只有查看源码才可以发现）； visibility 可以控制盒子的显示方式（保留元素占用的空间但是留白）

列表与表格

list-style-type 允许我们控制列表中的项目符号的样式

list-style-position 允许我们控制列表中的项目符号的位置，是混合到文本中还是要求文本单独缩进

empty-cells 可以帮助我们控制空单元格的边框

border-spacing 用来控制单元格之间的距离；而对应的 border-collaspe 控制是否需要将表格的单元格边框合成到一起。

表单

我们一般建议使用成品的CSS文件来控制表单的各个按钮设计，他们也被常见的前端框架进行封装

关于HTML5的特性

HTML5使用了一套新的定义页面元素的结构，让我们的网页结构更加的标准化，对于设计页面的布局有很大的帮助。可以有效的替代以前用于分块的<div> </div> , 我们以前使用其结合 id,class 来区分页面上的元素.

我们使用 <header> 块和<footer> 块作为主页眉和主页脚; 我们也可以在article 块中使用<header> 块和<footer> 块作为文章的页眉和页脚.

使用 <nav> 块定义整个网站的主导航;

<article> 块构成整个页面的各个成分,他们可以单独使用,也可以进行嵌套使用,这是整个网页构建使用的最广泛的结构.

<aside> 用于提供<article> 块的附属信息,当他不在任何<article> 块中的时候这提供整个页面的附属信息,一般是外部链接.

<section> 用于将页面分割为部分,可以包含许多<article> 块也可以在<article> 块中将文章分割.

<hgroup> 用于构建标题和子标题,将不同层级标题合成.

<div> 我们依旧可以用它来组合整个页面,当前面的方法无法实现我们需要的目的的时候,他依旧可用

我们不需要单独的内容来将页面的主体内容组织起来,除了<header> 块和<footer> 块 <aside> 以外的地方都是页面的主体信息,

以前我们用 <a hred = "xxxx"> text </a> 作为基本的链接;现在HTML5允许其中的 text 内容是一个块,整个块都变为来链接.