详细介绍：前端基础-HTML保姆级课程笔记

目录

知识引入

前端页面：

什么是HTML页面？

HTML结构

认识HTML标签

标签形式：

解释：

HTML文件基本结构

解释：

标签层次结构

解释：

查看页面结构

快速生成代码框架

HTML常见标签

注释标签

标题标签：h1-h6

段落标签：p

使用前代码展示：

使用前页面效果：

使用后代码展示：

使用后页面效果：

注意：

换行标签：br

使用后代码展示：

使用后页面效果：

格式化标签

图片标签：img（key=“value”形式）

相对路径：

同级路径（代码和图片在同一文件夹下）：./xxx.png

代码展示：​编辑

页面效果：​编辑

下级路径（在当前img文件夹下的图片）：./img/xxx.png

代码展示：

页面效果：​编辑

上级路径（在上一个文件夹下的图片）：../xxx.png

路径展示：与代码所在文件夹同级

代码展示：

页面效果：

绝对路径

磁盘图片路径

路径展示：​编辑

代码展示：

页面效果：

网络图片资源

代码展示：

页面效果：

img标签的其他属性

alt: 替换文本.

代码展示：​编辑

页面效果：

​编辑

title: 提示文本.

代码展示：

​编辑

页面效果：

​编辑

width/height: 控制宽度高度.

代码展示：

​编辑

页面效果：

​编辑

border: 边框, 参数是宽度的像素.

代码展示：

​编辑

页面效果：

​编辑

​编辑

​编辑

超链接标签：a

href属性

代码展示：

页面效果：

target属性

代码展示：

页面效果：

链接的形式

外部链接: href 引用其他网站的地址

内部链接: 网站内部页面之间的链接. 写相对路径即可

空链接: 使用 # 在 href 中占位

下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)

网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)

锚点链接: 可以快速定位到页面中的某个位置

表格标签

基本使用

表头：thead；表体：tbody

代码展示：

页面效果：

调整格式后代码：​编辑

调整格式后的页面效果：

thead里的内容居中+加粗展示

代码展示：​编辑

页面效果：

合并单元格

代码展示：

页面效果：

列表标签

无序列表

代码展示：

页面效果：

有序列表

代码展示：

页面效果：

自定义列表

代码展示：

页面效果：

表单标签

表单域：form标签

表单控件：

input标签

1.文本框

2.密码框

3.单选框

4.复选框

5.普通按钮

6.提交按钮

7.清空按钮

8.选择文件

label标签

select标签

textarea标签

​编辑

无语义标签

代码展示：

页面效果：

知识引入

前端页面：

1.Web页面

2.PC端程序页面

3.移动端页面

什么是HTML页面？

特点：运行在浏览器里

HTML超文本标记语言

超文本：文本、声音、图片、视频、表格、链接

标记：由许许多多的标签组成

HTML结构

认识HTML标签

标签形式：

hello

解释：

标签名：body

标签内容：hello

双标签：<body>+</body>

单标签：出现的少

hello

标签属性：id属性≈给此标签设置了唯一的标识符（身份证号码）

HTML文件基本结构


    
        第一个页面
    
    
       hello world
    

解释：

html标签：根标签（最顶层标签）

head标签：页面属性

body标签：页面内容

title标签：页面标题

标签层次结构

父子关系+兄弟关系


    
        第一个页面
    
    
       hello world
    

解释：

所有标签都是html标签的子标签

父子：head父-title子

兄弟：head-body

查看页面结构

使用chrome开发者工具

开启开发者工具：F12或右键审查元素，切换到 Elements 标签, 就可以看到页面结构细节：

标签之间的结构关系, 构成-> DOM 树
（ DOM 是 Document Object Mode (文档对象模型) 的缩写）

快速生成代码框架

>
>

    >
    >
    Document

IDEA：！+Tab键

VSCode：！+Enter

细节处（了解即可）：（主要内容已在注释处给出）

HTML常见标签

注释标签

快捷键（生成/取消注释）：ctrl+/

标题标签：h1-h6

hello


hello


hello


hello


hello


hello
六个： h1 - h6. 数字越大, 字体越小、越细

段落标签：p

这是一个段落
使用前代码展示：

使用前页面效果：

使用后代码展示：

使用后页面效果：

注意：
①p 标签之间存在一个空隙
②当前的 p 标签描述的段落, 前面还没有缩进. (未来 CSS 会学)
③自动根据浏览器宽度来决定排版.
④html 内容首尾处的换行, 空格均无效.
⑤在 html 中文字之间输入的多个空格只相当于一个空格.
⑥html 中直接输入换行不会真的换行, 而是相当于一个空格.

换行标签：br

①br 是 break 的缩写. 表示换行.
②br 是一个单标签(不需要结束标签)
③br 标签不像 p 标签那样带有一个很大的空隙.
④<br/>是规范写法. 不建议写成<br>
使用后代码展示：

使用后页面效果：

格式化标签

前者是强调作用：

加粗: strong 标签和 b 标签
倾斜: em 标签和 i 标签
删除线: del 标签和 s 标签
下划线: ins 标签和 u 标签
效果图：

图片标签：img（key=“value”形式）

img 标签必须搭配 src 使用. 表示图片的路径.
相对路径：
同级路径（代码和图片在同一文件夹下）：./xxx.png
代码展示：
页面效果：
下级路径（在当前img文件夹下的图片）：./img/xxx.png
代码展示：

页面效果：
上级路径（在上一个文件夹下的图片）：../xxx.png
路径展示：与代码所在文件夹同级

代码展示：

页面效果：

绝对路径
磁盘图片路径
路径展示：
代码展示：

页面效果：

（注意：浏览器的安全策略会导致图片无法直接加载，如下图）

用绝对路径打开需要使用静态资源的方式去访问html文件：如下图

点击html文件：

最终效果图：

网络图片资源

获取到网路图片的网址：

代码展示：

页面效果：

img标签的其他属性
鲜花
alt: 替换文本.
当文本加载失败时, 会显示一个替换的文字.
代码展示：
页面效果：
title: 提示文本.

鼠标放到图片上, 就会有提示.

代码展示：
页面效果：
width/height: 控制宽度高度.

高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.

代码展示：
页面效果：
border: 边框, 参数是宽度的像素.

但是一般使用 CSS 来设定.

代码展示：
页面效果：

 注意：属性间无固定顺序：

页面效果：一样的

超链接标签：a

href属性

href: 必须具备, 表示点击后会跳转到哪个页面

百度
代码展示：
页面效果：

超链接标签：a的href展示

target属性
target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开
代码展示：
页面效果：

超链接标签：a的target演示

链接的形式
外部链接: href 引用其他网站的地址
百度
内部链接: 网站内部页面之间的链接. 写相对路径即可

我是 1.html
点我跳转到 2.html

我是 2.html
点我跳转到 1.html
空链接: 使用 # 在 href 中占位
空链接
下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)
下载文件
网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)

    
锚点链接: 可以快速定位到页面中的某个位置
第一集
第二集
第三集


   第一集剧情 

   第一集剧情 

   ...




   第二集剧情 

   第二集剧情 

 ...




   第三集剧情 

   第三集剧情 

 ...

表格标签

快速复制粘贴快捷键：shift+alt+↓

基本使用
表头：thead；表体：tbody

代码展示：



    
    
    Document


    

        

            姓名
            性别
            年龄
        

        

            葱源
            男
            20
        

        

            小甘
            男
            20
        

        

            淘宝
            男
            20
        

        

            CoderYanger
            男
            21
页面效果：

调整格式后代码：
调整格式后的页面效果：

thead里的内容居中+加粗展示
代码展示：
页面效果：

合并单元格

跨行合并：rowspan="n"

跨列合并：colspan="n"

代码展示：



    
    
    Document


    >
            

        

                姓名
                性别
                年龄
            

        
        
            
        

            葱源
            男
            20
        

        

            小甘
            
            20
        

        

            淘宝/男
            
            20
        

        

            CoderYanger
            男
            21
页面效果：

注意：不必死记硬背，出现有串行串列的情况时，慢慢调试改就行了

列表标签

VSCode快捷键：快速生成列表

回车后效果：

也可以来HTML参考手册来查找相关细节：HTML参考手册

无序列表
代码展示：



    
    
    Document


    
这是无序列表

    
    
        
  • 这是内容1
    • 
        
  • 这是内容2
    • 
        
  • 这是内容3
    • 
    

    
    
        
        
  • 这是内容1
    • 
        
  • 这是内容2
    • 
        
  • 这是内容3
    • 
    

    
    
        
        
  • 这是内容1
    • 
        
  • 这是内容2
    • 
        
  • 这是内容3
    • 
    

    
    
        
        
  • 这是内容1
    • 
        
  • 这是内容2
    • 
        
  • 这是内容3
    •
页面效果：

有序列表
代码展示：



    
    
    Document


    
这是有序列表

    
    
    
    
        
  1. 这是有序列表1
    2. 
        
  2. 这是有序列表2
    3. 
        
  3. 这是有序列表3
    4. 
        
  4. 这是有序列表4
    5. 
    

    
    
        
  1. 这是有序列表1
    2. 
        
  2. 这是有序列表2
    3. 
        
  3. 这是有序列表3
    4. 
        
  4. 这是有序列表4
    5. 
    

    
    
        
  1. 这是有序列表1
    2. 
        
  2. 这是有序列表2
    3. 
        
  3. 这是有序列表3
    4. 
        
  4. 这是有序列表4
    5. 
    

    
    
        
  1. 这是有序列表1
    2. 
        
  2. 这是有序列表2
    3. 
        
  3. 这是有序列表3
    4. 
        
  4. 这是有序列表4
    5. 
    

    
    
        
  1. 这是有序列表1
    2. 
        
  2. 这是有序列表2
    3. 
        
  3. 这是有序列表3
    4. 
        
  4. 这是有序列表4
    5.
页面效果：

自定义列表
代码展示：



    
    
    Document


    
自定义列表展示

    

        
 我的小弟们
            
咬人猫

            
兔总裁

            
阿叶君
页面效果：

表单标签

用表单标签来完成服务器的一次交互：让用户输入信息二点重要途径

表单域：form标签

包含表单元素的区域


   ... [form 的内容]

表单控件：
input标签

输入框、提交按钮等

1.文本框

代码展示：




    
    
    Document


    

        
        姓名

页面效果：

2.密码框

代码展示：




    
    
    Document


    

        
        姓名
        

        密码

页面效果：

input标签密码框演示

3.单选框
性别:
男
女
注意: 单选框之间必须具备相同的 name 属性, 才能实现 多选一 效果. 
代码展示：



    
    
    Document


    

        
        姓名
        

        密码
        

        
        
        性别男
        女

页面效果：

4.复选框
爱好:
 吃饭  睡觉 
打游戏

代码展示：




    
    
    Document


    

        
        姓名
        

        密码
        

        
        
        性别男
        女
        

        爱好
        吃饭
        睡觉
        玩游戏

页面效果：

5.普通按钮
当前点击了没有反应. 需要搭配 JS 使用(后面会重点研究)

代码展示：




    
    
    Document


    

        
        姓名
        

        密码
        

        
        
        性别男
        女
        

        爱好
        吃饭
        睡觉
        玩游戏

页面效果：

6.提交按钮

    
    

代码展示：




    
    
    Document


    
    

        课程

提交前页面效果：

？后是填写的数据

提交后页面效果：

7.清空按钮

    
    
    
清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置

代码展示：




    
    
    Document


    
    

        课程

页面效果：

8.选择文件

代码展示：




    
    
    Document


    
    

        课程

打开文件页面效果：

选择文件后页面效果：

label标签
搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验
for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)

代码展示：




    
    
    Document

页面效果：

select标签

下拉菜单

option 中定义 selected="selected" 表示默认选中.
代码展示：



    
    
    Document

页面效果：
默认值设置为1993的代码展示：
默认值设置为1993的页面效果：
textarea标签

代码展示：

页面效果：

也是有滚轮的

无语义标签

无语义没有固定的用途，拿这个标签啥都可以干

div 标签, division 的缩写, 含义是 分割
span 标签, 含义是跨度

代码展示：



    
    
    Document


    

        

            吃饭
            睡觉
            玩游戏
            运动
        

        
吃饭

        
睡觉

        
玩游戏

        
运动
页面效果：

posted @ 2025-11-07 15:05  gccbuaa  阅读(22)  评论(0)    收藏  举报