前端html学习笔记(自用)

原创已于 2025-02-18 17:17:58 修改 · 694 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #学习

于 2025-02-18 16:35:30 首次发布

笔记专栏收录该内容

1 篇文章

订阅专栏

1 VS Code基本使用

1.1 打开文件夹

任意文件夹–>拖拽至 VS Code 空白位置即可

1.2 安装插件

汉化菜单插件：Chinese
打开网页插件：open in browser

2 标签语法

	<strong>加粗的文字</strong>

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

<>里面放英文字母（标签名）
结束标签比开始标签多 /
拓展
- 双标签：成对出现的标签
- 单标签：只有开始标签，没有结束标签

3 基本骨架

VS Code 快速生成骨架：
在 HTML 文件（.html）中，!（英文）配合 Enter / Tab 键

<html>
<head>
    <title>Document</title>
</head>
<body>
    
</body>
</html>

html：整个网页
head：网页头部，用来存放给浏览器看的信息，例如CSS
- title：网页标题
body：网页主体，用来存放给用户看的信息，例如图片、文字

4 标签的关系

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

父子关系（嵌套关系）
兄弟关系（并列关系）
代码格式
- 父子关系：子级标签换行且缩进（Tab键）
- 兄弟关系：兄弟标签换行要对齐

5 注释

	<!-- -->

注释标签用来再原文档中插入注释，注释不会再浏览器中显示
在VS Code中，添加 / 删除注释的快捷键：Ctrl + /

6 标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。
标签名：h1 ~ h6（双标签）

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

显示特点：

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

经验分享：

h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo
h2 ~ h6 没有使用次数的限制

7 段落标签

一般用在新闻段落、文章段落、产品描述信息等等。
标签名：p（双标签）

	<p></p>

显示特点：

独占一行
段落之间存在间隙

8 换行标签与

标签名：br（单标签）
浏览器不识别代码中的 Enter 键换行

	<br>

9 水平线标签

标签名：hr（单标签）

	<hr>

10 文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。
加粗标签：strong
倾斜标签：em
下划线标签：ins
删除线标签：del

    <strong></strong>
    <em></em>
    <ins></ins>
    <del></del>

11 图像标签

作用：在网页中插入图片
标签名：img
属性

src：用于指定图像的位置和名称，是必须属性。
alt：替换文本，图片无法显示的时候显示的文字
title：提示文本，鼠标悬停在图片上面的时候显示的文字

12 路径

12.1 相对路径

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

/ 表示进入某个文件夹里面
. 表示当前文件所在文件夹
… 表示当前文件的上一级文件夹

12.2 绝对路径

从盘符出发查找目标文件

Windows 电脑从盘符出发
Mac 电脑从根目录（/）出发
Windows 默认是 \ ，其他系统是 /，建议统一写为 /
绝对路径的应用场景：友情链接

13 超链接

作用：点击跳转到其他页面。
标签名：a

<a href=""></a>

属性

href：跳转地址
target：窗口打开方式
- _self：在当前窗口打开页面
- _black：在新窗口打开页面

14 音频标签

标签名：audio
属性

src：音频URL（必须属性）
controls：显示音频控制面板
loop：循环播放
autoplay：自动播放（为了提升用户体验，浏览器一般会禁用自动播放功能）

15 视频标签

标签名：video
属性
- src：视频URL（必须属性）
- controls：显示视频控制面板
- loop：循环播放
- muted：静音播放
- autoplay：自动播放（为了提升用户体验，浏览器支持在静音状态自动播放）

16 列表

作用：布局内容排列整齐的区域。
列表分类：无序列表、有序列表、定义列表。

16.1 无序列表

作用：布局排列整齐的不需要规定顺序的区域。
标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。

 	<ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

注意事项：

ul 标签里面只能包裹 li 标签
li 标签里面可以包裹任何内容

16.2 有序列表

作用：布局排列整齐的需要规定顺序的区域。
标签：ol 嵌套 li，ol 是有序列表，li 是列表条目。

    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>

注意事项：

ol 标签里面只能包裹 li 标签
li 标签里面可以包裹任何内容

16.3 定义列表

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

	<dl>
        <dt></dt>
        <dd></dd>
        <dd></dd>
    </dl>

dl 里面只能包含dt 和 dd
dt 和 dd 里面可以包含任何内容

17 表格

17.1 基本使用

作用：网页中的表格与 Excel 表格类似，用来展示数据。
标签：table 嵌套 tr，tr 嵌套 td / th。
table：表格
caption：表格大标题
tr：行
th：表头单元格
td：内容单元格

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

提示：在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线。

17.2 表格结构标签

作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。
标签：
thead：表格头部
tbody：表格主体
tfoot：表格底部

        <thead>
            <tr>
                <th></th>
            </tr>
        </thead>
       
        <tbody>
            <tr>
                <td></td>
            </tr>
        </tbody>
        
        <tfoot>

        </tfoot>
    </table>

提示：

表格结构标签可以省略

17.3 合并单元格

作用：将多个单元格合并成一个单元格，以合并同类信息。
属性：
rowspan：跨行合并
colspan：跨列合并
合并单元格的步骤：

明确合并的目标
保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
- 跨行合并，保留最上单元格，添加属性 rowspan
- 跨列合并，保留最左单元格，添加属性 colspan
删除其他单元格

注意：不能跨表格结构标签合并单元格（thead、tbody、tfoot）

18 表单

作用：收集用户信息。
标签：input

18.1 input 标签基本使用

input 标签 type 属性值不同，则功能不同。
type属性值：
text：文本框
password：密码框
radio：单选框
checkbox：多选框
file：上传文件

    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <input type="radio" name="" id="">
    <input type="checkbox" name="" id="">
    <input type="file" name="" id="">

18.2 input 标签占位文本

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

    <input type="text" name="" id="" placeholder="提示信息">

18.3 radio 常用属性

属性：
name：控件分组，同组只能选中
checked：默认选中

    <input type="radio" name="sex" id="">男
    <input type="radio" name="sex" id="" checked>女

18.4 多文件上传属性

属性：
multiple：文件多选

    <input type="file" name="" id="" multiple>

18.5 多选框默认属性

属性：
checked：默认选中

<input type="checkbox" name="" id="" checked>

18.6 下拉菜单

标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。
属性：
selected：默认选中

    <select name="" id="">
        <option value="">北京</option>
        <option value="" selected>上海</option>
    </select>

18.7 文本域

作用：多行输入文本的表单控件。
标签：textarea
提示：用css设置文本域大小和禁用拖拽功能
属性：
width：宽
height：高
resize: none ：禁用拖拽

18.8 label标签

18.8.1 基本写法

作用：网页中，某个标签的说明文本。
常用：用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围。
标签：label

<label for="">文字</label>

18.8.2 label 标签增大点击范围

写法一
- label 标签只包裹内容，不包裹表单控件
- 设置 label 标签的 for 属性值和表单控件的 id 属性值相同

    <input type="radio" name="" id="man"> <label for="man">男</label>

写法二
- 使用 label 标签包裹文字和表单控件，不需要属性

    <label> <input type="radio" name="" id="">男 </label>

提示：支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。

18.9 按钮标签

标签：button，根据type值不同，实现不同功能
type属性值：
submit：提交按钮
reset：重置按钮
button：普通按钮，配合js使用
注意：按钮需配合 form 标签（表单区域）才能实现对应的功能

    <form action="">
        <input type="text">
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button">普通按钮</button>
    </form>