【新人入门】HTML——前端纯小白新手入门

  随着网络世界的愈渐成熟，用户对网络愈加依赖，作为将机器语言转化为人类语言的码农们在市场上也继续保持着旺盛的需求量。正如渴望通过学习俄语、日语与其他民族沟通一样，笔者也渴望通过学习机器语言参与到数字化的时代中，形成顺畅的人机互动。出于旺盛的好奇心以及世俗的赚钱欲望，本人开启自学编程之旅。本文主要留作学习纪念，同时也希望可以为其他自学者提供参考。由于编者知识有限，所写代码或程序认知可能存在缺陷，欢迎各位批评指正。

一、超文本标记语言-HTML

（一）HTML 介绍

1、背景

  前端和后端的区别在哪里？如果把人看作产品，前端是显露在外的静态，比如骨骼、血肉、人的肢体器官摆放组合；后端则是偏向操作和逻辑，更具动态，比如动作、思考、记忆等。

  在 Web 网页制作中，前端开发人员需要写出代码，然后通过浏览器转成普通用户使用的界面。Web 页面由三个部分组成：HTML 结构、CSS 表现和 JS 行为，分别对应人的骨架、血肉和动作。

  在 Web 开发中，一部分代码运行于客户端（常见为浏览器），还有一部分运行于服务端。运行于客户端的部分被称为前端，而 HTML+CSS+JS 是最常见的前端语言组合。PHP 是运行在服务端的，只需要简单学习就能使用 PHP 建立一个可以交互的 Web。

HTML 创建了网页，然后使用 CSS 美化，JS 的交互性让它动起来；
PHP 自己在后端处理数据和操作数据，增删改查；
简单来说：肉眼可见的是 HTML、CSS、JS，不可见的是 PHP。

  如果把 Web 当成一个人来看的话，那么 HTML 是人的身体，CSS 是人的外表，JS 是人的动作，那么 PHP 就是人的大脑。外表、动作、大脑都无法离开人的身体运行，离开外表、动作、大脑的身体是丑陋的空壳。而 JS 和 PHP 之间的关系就更耐人寻味了：只有动作而不思考，那就是行尸走肉，没有任何的意义；只思考而没有动作，那就是植物人。由此可见，JS 和 PHP 是相辅相成的。
——CSDN 博主「叫我 PP」

2、定义

  HTML 是超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。

  页面内可以包含图片、链接，甚至音乐、程序等非文字元素，结构包括“头”（head）和“主体”（Body）部分。其中“头”部提供关于网页的信息，“主体提供网页的具体内容。

3、hello world

快来试试实操！

新建记事本

-修改文档名称为“hello world”
-文档内输入：hello world
-修改笔记本文档后缀“txt”为“html”
-用浏览器打开 -接受来自机器的问候（左侧）

新建记事本

-修改文档名称为“hello world” -文档内输入：

hello world
-修改笔记本文档后缀“txt”为“html”
-用浏览器打开 -接受来自机器的问候（居中）

4、工具

  笔记本修改代码和展示结果之前的文档后缀修改过于繁琐，因此我们选择更专业的代码软件进行编写。网络随便搜索就能找到各种编程开发工具不再赘述，笔者在此推荐VSCode（Visual Studio Code），一款免费开源的轻量级代码编辑器。它是一款简单易用的代码编辑器，但通过安装各种插件，可以将其打造为适用于开发一切编程语言的强大 IDE（集成开发环境）。

插件推荐：
① 中文切换：Chinese（simplified）
② 自动修正：Auto Rename Tag
③ 网页预览：view-in-browser
④ 动态刷新：Live Server
⑤ 双标修改：html tag wrap

（二）HTML 常用标签

1、文本标题（h1-h6）

h1-h6，字号从大到小：

<h1>百日梦想家h1>
<h2>百日梦想家h2>
<h3>百日梦想家h3>
<h4>百日梦想家h4>
<h5>百日梦想家h5>
<h6>百日梦想家h6>

百日梦想家

百日梦想家

百日梦想家

百日梦想家

百日梦想家

百日梦想家

2、段落标签（p）

p 标签让段落分离：

<p>白日梦想家p><P>天天发发发p>

白日梦想家

天天发发发

3、换行（br）

br 标签让文字另起一行：

百日梦想家<br />每天发发发

百日梦想家
每天发发发

4、水平线（hr）

hr 标签显示分隔线，支持边框属性：

<hr />

---

<hr color="“red”" width="“300”" align="“left”" />

---

5、加粗（b/strong）

<b>百日梦想家b>

百日梦想家

<strong>百日梦想家strong>

百日梦想家

6、倾斜（i/em）

<i>百日梦想家i>

百日梦想家

<em>百日梦想家em>

百日梦想家

7、删除线（s/del）

<s>百日梦想家s>

百日梦想家

<del>百日梦想家del>

百日梦想家

8、下划线（u）

<u>百日梦想家u>

百日梦想家

9、小标记（sup/sub）

百日梦想家<sup>[1]sup>

百日梦想家^[1]

百日梦想家<sub>[1]sub>

百日梦想家_[1]

（三）HTML 特殊符号

1、尖角

左尖角：<

左尖角：<

右尖角：>

右尖角：>

2、空格

不换行空格（space 键）： ；
半角空格：&ensp；
全角空格：&emsp；

百日梦想家，每天顶呱呱
  百日梦想家，每天顶呱呱
  百日梦想家，每天顶呱呱
  百日梦想家，每天顶呱呱
百日梦想家，每天顶呱呱

百日梦想家，每天顶呱呱
  百日梦想家，每天顶呱呱
  百日梦想家，每天顶呱呱
  百日梦想家，每天顶呱呱
百日梦想家，每天顶呱呱

3、版权

©

©

5、商标

™

™

®

®

2022.05.17 资料来源：B 站千峰前端（p1-14）

（四）HTML 列表

1、有序列表（ol/li）

① ol 内仅支持 li 标注，li 内可以添加其他标注；
② type 定义序列共五种：

1（默认）：数字
a：小写字母
A：大写字母
i：小写罗马数字
I：大写罗马数字

③ start 用数字定义初始值位置

3. 锄禾日当午
4. 汗滴禾下土
5. 谁知盘中餐
6. 粒粒皆辛苦

<ol type="a" start="3">
    <li>锄禾日当午li>
    <li>汗滴禾下土li>
    <li>谁知盘中餐li>
    <li>粒粒皆辛苦li>
ol>

2、无序列表（ul/li）

① 实心圆点（默认）：disc
② 空心圆点：circle
③ 实心方块：square
④ 无：none

<ul type="square">
    <li>锄禾日当午li>
    <li>汗滴禾下土li>
    <li>谁知盘中餐li>
    <li>粒粒皆辛苦li>
ul>    

• 锄禾日当午
• 汗滴禾下土
• 谁知盘中餐
• 粒粒皆辛苦

3、自定义列表（图文混排—dl/dd/dt）

① dl内仅支持dd、dt标注，dd、dt内可以添加其他标注；
② dd：图片；
③ dt：文字

<dl>
    <dd><img src="image.gif" width="150">dd>
    <dt>生气气dt>
dl>

生气气

（五）HTML 图片标签

1、插入图片

① 绝对路径：文件在硬盘上存在的位置，实际开发使用较少，“/”或“\”作为目录分隔符
② 相对路径：相对自己目标文件的位置
./ ：当前路径
…/ ：跳出当前文件夹，返回上一级文件

<img src="./image.gif" width="150" />
<img src="../20220517/img.gif" width="150" />

2、图片属性

① src：图片路径
② title：鼠标悬停后的提示信息
③ alt：图片加载失败后提示信息
④ width：图片宽度，单位 px（默认）
⑤ height：图片宽度，单位 px（默认）

（六）超链接

超链接属性

① herf：hypertext reference，超链接路径；
② title：鼠标悬停后的提示信息；
③ target：规定在哪个窗口打开文档

_self：本页面跳转（默认值）
_blank：新页面打开

<a
  href="https://www.baidu.com/"
  title="百度搜索"
  alt="页面不见啦"
  target="_blank"
>
  百度搜索
a>

百度搜索

（七）table 表格

1、基本结构（table/tr/td）

① table：整体表格
② tr（table row）：表格行
③ td（table data cell）：表格列，单元格

<table>
  <tr>
    <td>td>
  tr>
table>

2、表格属性

① width：单位 px（默认）、百分比（相对整个 body）
② height：单位 px（默认）、百分比（body 为 0，相对内容整体）
③ border：表格外边框
④ bordercolor：表格外边框颜色
⑤ bgcolor：表格底色
⑥ align：表格对齐（left、center、right）
⑦ cellspacing：单元格与单元格的间隙
⑧ cellpadding：单元格与内容的间隙

<table
  width="300"
  height="100"
  border="5"
  bordercolor="pink"
  bgcolor="lightblue"
  align="left"
  cellspacing="0"
  cellpadding="0"
>
  <tr>
    <td>1td>
    <td>2td>
  tr>
  <tr>
    <td>3td>
    <td>4td>
  tr>
table>

1	2
3	4

3、表格合并

① colspan（Colum span）：合并单元格列，必在 td 内
② rowspan（Row span）：合并单元格行，必在 td 内
③ align：文字水平对齐（left、center、right）
④ valign：文字垂直对齐（top、middle、bottom）

<table
  align="left"
  border="1"
  bordercolor="pink"
  cellspacing="0"
  cellpadding="0"
>
  <tr bgcolor="#eee">
    <td width="50" height="30" align="center">姓名td>
    <td width="100" align="center">td>
    <td width="150" align="center">出生日期td>
    <td width="200" align="center">td>
  tr>
  <tr>
    <td height="30">所在籍贯td>
    <td colspan="1" align="left" bgcolor="e3e3e3">1td>
  tr>
  <tr>
    <td height="30">身份证号td>
    <td colspan="2" align="center" bgcolor="d9d9d9">2td>
  tr>
  <tr>
    <td height="30">是否婚配td>
    <td colspan="3" align="right" bgcolor="c9c9c9">3td>
  tr>
table>

姓名		出生日期
所在籍贯	1
身份证号	2
是否婚配	3

（八）表单标签

1、基本结构

① form：表单标签
② method：get（从服务器获取数据）、post（向服务器传输数据）
③ action：向何处发送表单数据

<form action="" method="post">form>

2、表单属性

① type：text、password、submit、button、reset
② placeholder：输入框提示词
③ name：必设属性，否则提交表单时用户输入数据不发送服务器
④ vale：修改按钮上显示的字

<form action="https://www.baidu.com/" method="post">
  用户信息：<input
    type="text"
    placeholder="请输入用户名，区分大小写"
    name="username"
  />
  <br />
  密码：<input type="password" placeholder="请输入密码" name="passwor" />
  <br />
  <input type="submit" vaule="快点登录啦" />
  <input type="reset" value="全部清除啦" />
form>

用户信息：
密码：

2022.05.18 资料来源：B站千峰前端（p1-14）

二、层叠样式表——CSS

（一）CSS 样式表

1、CSS 内部样表
2、CSS 外部样表
3、CSS 行内样表
4、CSS 样表优先级

（二）CSS 选择器

元素选择器
类选择器
id 选择器
通配符选择器
群组选择器
包含/后代选择器
伪类选择器（超链接）

（三）CSS 属性

1、文本
2、列表
3、背景
4、边框
5、浮动

三、JavaScript

（一）JS 基础

（二）JS 进阶