HTML基本知识点

工具的使用方法

新建一个html文件使用网页开发工具Visual Studio Code 打开
若要经常使用可以打开一个文件夹将你写的代码放进去
可以有多个文件,直接点击在添加就可以了
在这里插入图片描述

然后进入界面
输入英文的!然后选择第一个就会出来原始的
在这里插入图片描述<!DOCTYPE>文档声明类标签(不属于html标签里的)


声明用的html是哪个版本的

lang 是语言种类
1 en定义语言为英语
2 zh-CN定义为语言为中文

一定要记住如果没写可能会导致乱码 但vscode 会自动生成前面的几行代码不需要我们再重写 ![在这里插入图片描述](https://img-blog.csdnimg.cn/38ff3772a8b84f69bbd292bae8e4ee4d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAemJianlh,size_20,color_FFFFFF,t_70,g_se,x_16)

HTML语义标签

标题标签

每个标题独占一行,加了标题的文字会变粗,字号也会依次变大

-

(重要)

一级标题

2级标题

3级标题

4级标题

5级标题

6级标题

会随着数字的增大而变小,标题的重要性慢慢递减 ![在这里插入图片描述](https://img-blog.csdnimg.cn/bb4aa848433945e19a8dba91fc060270.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAemJianlh,size_20,color_FFFFFF,t_70,g_se,x_16)

段落标签

段落标签,意为段落,paragraph 会根据浏览器 的页面自动换行 并且段落和段落之间保持有空隙
换行标 签 强制换行,可直接打断它

文本格式化标签

粗体,斜体或下划线等效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊方式显示,
|加粗|| |
|倾斜||
| 删除线 |
|
|下划线||

标签

没有语义类似于盒子是用来装内容的

单独占一行可以用来做一个大盒子 小盒子一行可以放好几个

图像标签

在HTML标签用于定义HTML页面中的图像
src 是标签的必须属性,它用于指定图像文件的路径和文件名
所谓属性:简单的理解就是属于这个图像标签的特性
图像的url

alt文本;替换文本,图像不能显示的文字
title文本;提示文本将鼠标放在图像上,显示文字
width像素;设置图像的宽度
border设置图像的边框粗细
height像素;设置图像的高度

在这里插入图片描述图片要放在同一目录下
属性要在img 要在标签后面,属性不分先后,以空格分隔开

路径

目录文件夹;普通文件夹里面可以放一下文件夹,html文件或者图片
打开目录文件夹最外面的那一层为根目录
**相对路径 以引用的文件所在位置为参考,而建立的目录路径,类似于图片相对于HTML中的页面位置

下一级路径 /图像文件位于HTML文件下一级
上一级路径 …/

绝对路径D:\信息可视化\html 类似于这种

超链接标签

文本或图像
单词 anchor 意为锚

href作用于指定链接目标的url地址(必须属性)当为标签应用href属性时,它就具有了超链接的功能
target用于指定链接页面的打开方式,其中_self为默认值,_blank为在新窗口中打开方式

内部链接;网站内部之间的相互链接
同一级直接写名字就好了
空连接用#来代替<a href="#"
下载链接 地址链接的是文件
网页元素链接
锚点链接:点击我们点击链接可以快速定位到页面的那个位置跟我们这个csdn的这个标题差不多的意思
在链接文本的href属性中,设置属性值为#名字的形式,第二集

找到目标位置标签,里面添加一个id属性=刚才的名字

第二集介绍

注释标签和特殊字符

注释语句 快捷键:ctrl+/ <>这样括号里面一个感叹号四个杠在中间写要注释的就好,给自己看的,不显示

特殊字符例如 空格是  
在这里插入图片描述

表格标签

在这里插入图片描述在这里插入图片描述表格属性
在这里插入图片描述放在

标签中 知道怎么用就成

表格结构标签

表头的头部区域 表格的主体区域 更好区分结构将使用在标签里面在不是在其中

合并单元格

合并方式
跨行合并:rowspan="合并单元格的个数"以上面的那个为标
跨列合并:colspan="合并单元格的个数"以左边那个为标
确定要删除的单元格就将要合并的在写完要合并的单元格之后将多余的单元格删掉

列表标签

无序列表

在这里插入图片描述

有序列表

在这里插入图片描述

自定义列表

在这里插入图片描述

表单标签

类似于一个复杂的注册页面那种
大页面为表单域
框框里要填的为表单控件
框框前面告诉你要填的信息是提示信息

在这里插入图片描述在这里插入图片描述在这里插入图片描述lable 注释标签input定义的

select 标签控件之中定义下拉列表
在这里插入图片描述selectd="selected"即为默认选中项

textarea
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值