Web前端开发学习笔记，零基础入门到精通，收藏这篇就够了

原创于 2025-12-23 09:24:24 发布 · 490 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #学习 #笔记

计算机同时被 3 个专栏收录

1938 篇文章

订阅专栏

程序员

1937 篇文章

订阅专栏

前端

112 篇文章

订阅专栏

Web前端开发学习笔记

Web前端开发学习笔记
- 一、Web前端的标准
- - 1. W3C万维网联盟（w3.org）
  - 2. Web网页的组成部分
- 二、HTML
- - 1. HTML文件的基本结构及注释
  - 2. 常规标记（双标记）
  - 3. 空标记也叫单标记
  - 4. HTML编辑工具 VSCODE
  - - (1). 点击添加插件
    - (2). 直接创建基础的html文件
    - - (3). html编辑技巧
      - 创建双标签并且键入文件
        创建多个标签
        上述的方法可以组合使用
        创建标签和子标签
        创建标签和多个子标签
        创建标签和多个子标签，并在子标签中添加内容
        创建标签和多钟子标签
  - 5. html中常用标签
  - - (1). 标题标签
    - (2). 段落修饰的标签
    - - p标签(段落文本)
      - br标签（文本换行）
      - hr标签（水平线）
    - (3). 文本修饰标签
    - - 加粗标签（两种推荐strong）
      - 倾斜标签（两种推荐em）
      - 删除标签（两种推荐del）
      - 其他文本标签
    - (4). 特殊符号
    - - 尖角号`<>`
      - 空格（推荐` `，不过更加推荐使用css技术来处理）
      - ps: 快速生成一段文本文字：`lorem`+`回车`
      - 版权符号和商标符号
    - (5). 容器标签
    - - div标签（分割划块的标签）
      - span标签
    - (6). 列表标签
    - - 无序列表
      - 有序列表
      - 自定义列表
    - (7). 图片标签
    - (8). 链接标签
    - (9). 表格标签
    - - 表格的基本结构
      - 表格的属性
      - `tr`的属性(表格一行的属性)
      - `td`的属性(一个单元格的属性)
    - (10). 表单标签
    - (11).
- 三、

Web前端开发学习笔记

一、Web前端的标准

1. W3C万维网联盟（w3.org）

2. Web网页的组成部分

在这里插入图片描述

二、HTML

超文本标记语言（Hyper Text Markup Language）是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

1. HTML文件的基本结构及注释

<!--注释-->  <p>键入"<!--" 或者 选中要注释的文本并键入“ctrl”+“/” 添加注释</p>
<html>
	<head>
		<title>我的第一个网页</title>
	</head>
	<body>
		<center>
			欢迎来到LemonXue的主页，<br/> welcom!
		</center>
	</body>
</html>

2. 常规标记（双标记）

<标记 ></标记>
<标记属性=“属性值” 属性=“属性值”></标记>
标记也可叫标签或叫元素
例如

<head>
</head>

3. 空标记也叫单标记

<标记 />
<标记属性=“属性值” />
例如: <br />

4. HTML编辑工具 VSCODE

(1). 点击添加插件

在这里插入图片描述

chinese插件: 中文支持
Auto Rename Tag：标记头尾同时重命名
Live Server：右键html文件，选择右键选择框中的Open with Live Server. 即可在浏览器中默认打开可以实时预览的网页。
htmltagwrap：选中文本段落，键入alt+w, 自动添加<p>选中的文本</p> 标签

在这里插入图片描述

(2). 直接创建基础的html文件

在vscode新建一个.html的文件之后，在该文件中输入!+回车键即可创建出一个基础的html文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我在vscode 创建的页面</title>
</head>
<body>
    
    <center>罗生一习，<br/>黄金一响</center>
</body>
</html>

<!DOCTYPE html>是一个文档声明标签，指定html格式（html5），用于告知浏览器解析格式。
<html lang="en"> 中lang表示语言（language）其中包含的语言是英文（en）的，日文（ja-jp），中文（zh-CN）

(3). html编辑技巧

创建双标签并且键入文件

这里以p标签为例
p{你好} ==>

		<p>你好</p>

创建多个标签

这里以p标签为例，创建3个
p*3 ==>

		<p></p>
        <p></p>
        <p></p>

上述的方法可以组合使用

p{你好}*3 ==>

		<p>你好</p>
        <p>你好</p>
        <p>你好</p>

创建标签和子标签

例如：创建一个div标签，div标签中还包含p标签
div>p ==>

    <div>
        <p></p>
    </div>

创建标签和多个子标签

例如：创建一个div标签，div标签中还包含3个p标签
div>p*3 ==>

    <div>
        <p></p>
        <p></p>
        <p></p>
    </div>

创建标签和多个子标签，并在子标签中添加内容

例如：创建一个div标签，div标签中还包含3个p标签，每个p标签中还包含内容
div>p{内容}*3 ==>

    <div>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
    </div>

创建标签和多钟子标签

例如：创建一个div标签，div标签中还包含p标签和h2标签
div>p+h2 ==>

    <div>
        <p></p>
        <h2></h2>
    </div>

5. html中常用标签

(1). 标题标签

独占一行

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

其中<h1>标签，一般会被爬虫识别，一般一个网页中只有一个。

(2). 段落修饰的标签

p标签(段落文本)

标识一个段落（段落与段落之间有段间距）

<p>段落文本</p>

br标签（文本换行）

单标签，强制换行

<br />

hr标签（水平线）

<hr />

(3). 文本修饰标签

标签可以嵌套使用

加粗标签（两种推荐strong）

<b>加粗内容</b> 只是显示加粗
<strong>加粗内容</strong> 突出的文本（爬虫喜欢）

倾斜标签（两种推荐em）

<em>倾斜内容</em> 强调作用（爬虫喜欢）
<i>倾斜内容</i>

删除标签（两种推荐del）

<s>倾斜内容</s>
<del>倾斜内容</del>

其他文本标签

<u>文本内容</u> 下划线
<sub>文本内容</sub> 下标
<sup>文本内容</sup> 上标

(4). 特殊符号

尖角号`<>`

在html文本中使用如下方式标示尖角号：
<：左尖角号
>：右尖角号

空格（推荐`&emsp;`，不过更加推荐使用css技术来处理）

在html文本中使用如下方式标示空格：
 ：生成一个空格，但是其占据的宽度受到字体的影响。
&emsp;：生成一个空格，但是其占据的宽度是一个中文字体的宽度，基本不受字体的影响。

ps: 快速生成一段文本文字：`lorem`+`回车`

版权符号和商标符号

©: © 版权符号
™ ™ 商标符号：表示商标正在国家商标局提供申请了，有优先使用权但是可能注册失败。
®: ® 商标符号：表示商标已经在国家商标局注册成功了
😀: 😀
😁: 😁
😂: 😂
😃: 😃
😄: 😄

(5). 容器标签

div标签（分割划块的标签）

div标签在没有控制的情况下默认独占一行，（可以通过css来进行控制）

		<div>
            <h2>我的父亲</h2>
            <p>我的父亲是一个很爱很爱我的人</p>
        </div>
		<div>
            <h2>我的母亲</h2>
            <p>我的母亲是一个很爱很爱我的人</p>
        </div>

span标签

主要用于独立修饰一段文本，文本有多宽，就占用多远的距离。结合css和样式可以更好地修饰文本

	<h2>我的父亲&emsp;<span style="color: green; font-size: 1px;">my father</span></h2>

效果如下：
在这里插入图片描述

(6). 列表标签

无序列表	有序列表	自定义列表
无序号	有序号	一般用于图文混合的情况

无序列表

注意：ul标签中只能放置li标签；
li标签中可以随意放置标签；
ul默认以黑丝实心圆打头
ul中可以使用属性type改变打头的符号
type属性的值可以取：disk(默认，实心圆), circle(空心圆), square(实心正方形), none(什么都没有)

    <ul type="none">
        <li>
            静静
        </li>
        <li>
            川川
        </li>
    </ul>

在这里插入图片描述

有序列表

注意：ol标签中只能放置li标签；
li标签中可以随意放置标签；
ol默认会按照顺序生成序号： 1、2、3 ……
其中序号的类型和起始可以通过属性type和start进行修饰
type属性的值可以取1, a, A, i, I中的一个
start属性的值可以取数字

   <ol type="A" start="1">
        <li>
            把冰箱门打开
        </li>
        <li>
            把大象放进去
        </li>
        <li>
            把冰箱门关上
        </li>
    </ol>

在这里插入图片描述

自定义列表

    <dl>
        <dt>可以是文字也可以是图片</dt>
        <dd>文字</dd>
    </dl>

(7). 图片标签

<img>标签有如下几个比较常用的属性：
src属性用于指定图片的来源（路径）
alt属性是图片加载失败后才会显示的提示信息
titile属性是当鼠标放置在图片上时提示的信息
width属性用于简单地调整图片的宽度px
height属性用于简单地调整图片的高度px

当只使用width、height其中一个属性时，那么另一个属性会按照图片原始的尺寸自适应调整。
当同时指定width、height时，如果指定的尺寸与图片原始尺寸的比例不一致时，图片会失真。

当然更好的办法是使用CSS来对图片的尺寸进行修饰。

    <img src="./3.gif" alt="图片无法显示，请重新刷新" title="搞笑图片" width="100">
    <img src="./3.gif" alt="图片无法显示，请重新刷新" title="搞笑图片" height="100">
    <img src="./3.gif" alt="图片无法显示，请重新刷新" title="搞笑图片" width="100" height="100">

(8). 链接标签

<a>标签有如下几个比较常用的属性：
href: 指定跳转路径
target: 指定在当前标签页跳转"_self"，还是在新标签页跳转"_blank"；
title: 鼠标放置在超链接处之后的提示信息
a标签可以使用图片进行超链接跳转

    <!-- 默认当前页面打开 -->
    <a href="http://www.baidu.com">百度</a>
    <!-- 当前页面打开 -->
    <a href="http://www.baidu.com" target="_self">百度</a>
    <!-- 在新标签页中打开 -->
    <a href="http://www.baidu.com" target="_blank">百度</a>
    <!-- 在新标签页中打开 -->
    <a href="http://www.baidu.com" title="百度" target="_blank">百度</a>
    <!-- 通过图片进行跳转 在新标签页中打开 -->
    <a href="http://www.baidu.com" title="百度" target="_blank"><img src="./3.gif" alt="显示失败，请刷新" height="50"></a>

(9). 表格标签

表格的基本结构

表格一般由行和列组成；在html中则将表格按照行和单元格组合得到。
table标签中只能包含子标签tr;
tr：表示表格的一个行，有几个行则有几组tr标签。（table row）
tr标签中只能包含子标签td;
td：表示当前行中的一个单元格; 该标签中可以随便放置标签（table data）
例如生成2行3列的表格：table>tr*2>tr*3+回车：

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

表格的属性

从上述的例子中发现生成的表格没有边框，这些都可以通过表格的属性来进行控制：
width：表格的宽度，可以用数值表示如100或者100px, 还可以用百分比（相对于父标签的百分比）如50%
height：表格的高度，可以用数值表示如100或者100px, 还可以用百分比（相对于父标签的百分比）如50%（注意这里父元素的高度可能默认是由内容撑开的，所以从现象上来看百分比没有效果）
border：表格的最外边框的宽度：数值如1、2、3……
bordercolor：边框的颜色
bdcolor：背景颜色
align：水平对齐：left、right、center, 表示整个表格在父元素（父标签）中的对齐方式，而不是单元格的对齐方式。
cellspacing：单元格之间的间距
cellpadding：单元格与内容之间的空隙

`tr`的属性(表格一行的属性)

height：一行的高度，数值
bgcolor：一行的背景色
align：控制一行内文本的水平对齐方式left、right、center
valign：控制一行内文本的垂直对齐方式top、bottom、middle

`td`的属性(一个单元格的属性)

width：单元格的宽度，影响的是一整列的宽度。
height：单元格的高度，数值，影响的是一整行的高度。
bgcolor：本单元格的背景色
align：本单元格内文本的水平对齐方式left、right、center
valign：本单元格内文本的垂直对齐方式top、bottom、middle

   <table border="1" width="600" align="center"
        bordercolor="green"
        bgcolor="yellow"
        cellspacing="0"
        cellpadding="10">     <!-- 创建表格 -->
        <tr bgcolor="orange"
            align="center"
            valign="middle">    <!-- 创建一行 -->
            <td width="100">会员姓名</td> <!-- td 表示单元格 -->
            <td width="200"></td>
            <td width="100">出生日期</td>
            <td width="200"></td>
        </tr>
        <tr align="center"
        valign="middle">
            <td  width="100">身份证号</td>
            <td colspan="3" width="500"></td>
        </tr>
        <tr align="center"
        valign="middle">
            <td  width="100">通信地址</td>
            <td colspan="3" width="500"></td>
        </tr>
        <tr align="center"
        valign="middle">
            <td  width="100">联系电话</td>
            <td colspan="3" width="500"></td>
        </tr>
        <tr align="center"
        valign="middle">
            <td  width="100">会员卡号</td>
            <td colspan="3" width="500"></td>
        </tr>
    </table>

(10). 表单标签

<!-- <form method="GET或者POST" action="向何处发送表单数据">
        <input type="text">
        A   属性type定义输入框的类型
            a) 文本框 type = "text"     密码框 type = "password"
            b) 提交框 type = "submit" 和 <button>提交按钮</button> 一样
            c) 按钮框 type = "button" 单纯的按钮
            d) 重置框 type = "reset" 清空的效果
        B   属性 placeholder 输入框的提示信息。 IE8以上
        C   属性 name 必须设置，否则在提交表单时，用户在其中输入的数据不会发送给服务器
        D   属性 value 
    </form> -->

    <form method="POST" action="https://www.jd.com/">
        <p>
            用户名：<input type="text" name="username" placeholder="输入用户名">
        </p>
        
        <div>
            密&emsp;码：<input type="password" name="username" placeholder="输入密码，请注意大小写！">
        </div>
        <div>
            <input type="reset" value="重新输入">
            <input type="submit" value="登  录">
        </div>

    </form>