html知识点总结

最新推荐文章于 2024-11-12 23:16:45 发布

ai_moe

最新推荐文章于 2024-11-12 23:16:45 发布

阅读量280

点赞数 1

分类专栏：前端文章标签： html 前端 css

本文链接：https://blog.csdn.net/ai_moe/article/details/122978031

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文概述了HTML的基本骨架结构，包括<head>和<body>标签，以及标题、段落、图像、音频、视频等元素的使用。同时介绍了VSCode中的一些常用快捷键，如自动补全、保存文件、预览网页等，帮助前端开发者提高效率。此外，还强调了HTML语义化的意义，如正确使用标题标签和语义化标签。

摘要由CSDN通过智能技术生成

前言

总结一下自己在黑马学前端时HTML的知识点

一、HTML骨架结构

<html>
    <head>
        <title>网页的标题</title>
    </head>
    <body>
        自己的代码
    </body>
</html>

二、VS Code的基本快捷键

Tab 自动补全
保存文件：ctrl + s
　注意1：写完文件之后务必需要保存文件，否则网页无变化
　注意2：可以设置自动保存省去每次保存的麻烦
快速查看网页效果：右击 → Open in Default Browser
　快捷键：alt + b
　注意：必须安装了open in browser 插件
快速生成结构标签：! + tab
　注意1：!必须是英文的，中文!无效
　注意2：必须保证当前文件后缀名是.html，否则无效

三、HTML的基本语法

标题标签

h系列标签
语义：标题
代码：h1~h6
显示特点：
　1、文字都有加粗
　2、文字都有变大，但是从h1~h6逐渐减小
　3、独占一行
注意点：
　h1不能乱用，一般只用于新闻的标题或者网页的logo
　因为h1标签对于SEO比较重要

段落标签

p标签
语义：段落
显示特点：
1、段落之间有默认的间隙
2、独占一行

水平线标签

hr标签
单标签
作用：在网页中显示一条水平线

换行标签

br标签
单标签
作用：强制换行

标签语义化

b或strong：加粗
u或ins：下划线
i或em：倾斜
s或del：删除线

图片标签

img标签
作用：在网页中显示一张图片
属性
　1、src：图片的路径
　2、alt：替换文本　
　　只有当图片加载失败时，才会显示的文字
　3、title：图片的标题
　　鼠标悬停在图片上时，才会显示的文字
　4、width宽度/height高度
　如果只设置了其中的一个，另一个会等比例缩放
注意点
　一般只会设置width或者height中的一个，如果同时设置了两个，图片可能会拉伸变形

音频标签

audio标签
作用：在网页中插入音频
属性
　　 1、src：音频的路径
　　2、controls：播放的控件
　　3、autoplay：自动播放
　　 4、loop：循环播放

视频标签

video标签
作用：在网页中插入视频
属性
　 1、src：视频的路径
　 2、controls：播放的控件
　 3、autoplay：自动播放
　 4、loop：循环播放

链接标签

href：告诉浏览器点击之后去哪一个网页
取值：就是一个路径
　1、外部链接：直接写网址即可（网址需要写完整，https://）
　2、本地网页：直接写路径
htarget：设置跳转方式
取值
　 _self　在当前窗口中进行跳转，原网页不在了
　_blank　在新窗口中进行跳转，原网页还在

无序列表

整体　ul
每一项　li
显示的效果　每一项前面默认有小圆点
注意点
　1、每一项是没有顺序的
　2、ul标签中只能放li标签
　3、li标签里面可以放任意的标签

有序列表

整体　ol
每一项　li
显示的效果
每一项前面有默认的序号
注意点
　 1、每一项都是有顺序的
　 2、ol标签中只能放li标签
　 3、li标签可以放任意的标签

自定义列表

整体　dl
小标题　dt
每一项　dd
注意点
1、dl标签中只能放dt或者dd
2、dt或者dd中可以放任意标签

表格的基本标签

整体　table
每一行　tr
每一个单元格　td
属性　border
边框　1
宽度　width　
高度　height

表格的其他标签

caption　表格整体的大标题
　写在：table标签开始标签的下面
th　表头标签（表格一列的小标题）
　写在：用来替换td
表格的结构标签
　表格的头部　thead
　表格的身体　tbody
　表格的底部　tfoot
　写在：用来包裹tr

合并属性

1、确定合并哪几个单元格
2、通过左上原则确定保留谁删除谁
　如果是上下合并　保留最上面的，删除其他
　如果是左右合并　保留最左边的，删除其他
3、确定是跨行还是跨列
如果是跨行合并
rowspan=“合并的个数”　给保留的单元格设置
如果是跨列合并
colspan=“合并的个数”　给保留的单元格设置

input标签

文本框　text
属性
　 1、value　用户输入的数据
　如果提前在代码中设置好了，相当于是内容的默认值
　最后value属性值会发送给后台
　 2、name　告诉后台发送出去的数据是什么含义
　 3、placeholder　占位符
密码框　password
单选框　radio
属性
　 checked　默认选中
　针对于单选框，一组中只能设置一个
多选框　checkbox
文件选择框　file
多文件选择　multiple　
提交按钮　submit
重置按钮　reset
普通按钮　button
注意点：如果需要使用功能：需要配合form标签一起使用（使用form标签把表单标签一起包裹起来即可）

button标签

默认的功能：提交按钮

type　提交
submit　重置
reset　普通
button　下拉菜单
　整体　select
　每一项　option
文本域标签　textarea
　作用：用于输入大段文字
label标签
作用：绑定文本和表单标签的关系
　方法一
　　1、使用label标签把文本包裹起来
　　 2、在表单标签上添加id属性
　　 3、在label标签的for属性中设置id属性值
　方法二
　　 1、直接使用label标签把文本和表单标签一起包裹起来
　　注意点：需要把label标签的for属性删除