HTML标签总结

目录

1.HTML文件的编译

2.HTML标签汇总

2.1.注释标签:

 2.2.标题标签

2.3.段落标签

2.4.换行标签(单标签)

 2.5.格式化标签

2.6 图片标签

2.7 超链接标签

2.8 表格标签

3.帮助文档


1.HTML文件的编译

使用VsCode打开html页面所在文件就可以直接在进行编译,然后就可以在浏览器上看到效果了

HTML是以标签为单位进行页面的操作,每一个html必备的标签有<html></html>

<head></head>和<body></body>三者标签,其中分别代表了文件格式描述,默认设定信息和主体内容,html大部分以成对的标签作为开始和结束,只有在一些设置默认属性的开始标签里以单个出现,

其中单个出现的标签一般的信息都是以键值对的形式,键值对之间以空格隔开,键和值之间用=相连,表示这个信息要设为赋予怎样的初始值

 用 ! 快捷键可以输出以上初始信息和必备标签,第一行表示html文件格式,第二行表示网页默认语言是英文,meta则表示页面属性,包括使用utf8字符集以及初始的名字,宽度等信息

2.HTML标签汇总

2.1.注释标签:<!--  -->

<!--这是注释-->

 2.2.标题标签

h1-h6,数字越小,标题越粗,具体大小是浏览器默认的样式

需要手动调节的话需要用到CSS标签2.

2.3.段落标签

p标签,需要给段落输入段落内容显示效果的话.可以输入lorem会生成一段随机文字

如果需要多段同时进行输入,需要用到vscode"列编辑"模式,针对多个列同时进行编辑,按住alt键,鼠标左键点击要编辑的段落,文本开始位置就是你鼠标所点的位置,每次点击就会多一个光标

 (每个段落可以选择不同的起点,不一定与图中相同),展示如下:

2.4.换行标签(单标签)

<br>

 2.5.格式化标签

令字体倾斜,下划线,删除线等,不拓展讲

特别的就是格式化标签属于行内标签(不独占一行),上面的标签属于块级标签(独占一行)

2.6 图片标签

单标签,src为必填项,填的一般是相对路径,如果是和html文件同级目录的话 直接写文件名即可,不建议写绝对路径,也可以在网上搜图片填写相对应的网址

alt后面填写的内容表示图片无法加载时所附带的文字说明,图片正常加载则不会显示

title表示当鼠标移到图片的位置时会出现的文字说明

width和heigth则表示宽度和高度,px是单位(像素)

显示器每个光点就代表一个像素,光点越多,像素越高,图片越清晰

光点越少,图片越模糊

平时的720p,1080p,2k,4k就是表示描述分辨率的大小

2.7 超链接标签

 可以在页面上显示一个链接名,点进去就可以自动跳到输入的链接里

可以在href输入#,表示不做跳转,也可以写一个文件名或者相对路径,这是只会在同一个页面跳转

2.8 表格标签

table表示输入的是表格类型

tr表示输入表格的一行数据

td表示输入一个单元格数据,所以td一般在tr里面

th表示对一个单元格的字体加粗用来表示表头

可以在table中输入属性,表示整个表格的大小

3.帮助文档

记不住标签时,怎么查询具体用法

mdn + 标签名

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值