HTML基础知识点大全

一、什么是HTML

HyperText Markup Language，即超文本标记语言

二、第一个HTML

<！doctpye html>

三、常用的标签️️️

1⃣️p 标签 ，段落标签，占整行

 2⃣️img 图片标签：

①src   图片路径：绝对路径http://xxx.xx/xx/x.jpg

相对路径：./x.jpg   同级

                   ../x.jpg  上一级

本地硬盘物理路径，很少使用file:/// D:/abc/x/y.jpg

②alt  错误替换文本

③title  悬停提示

④width/height   图片的宽高

3⃣️h1~h6 标题标签，占整行， 包含 其他块 和 行内元素

4⃣️br  换行标签

5⃣️ul>li  无序列表，块元素，占整行

6⃣️ol>li 有序列表，块元素，占整行

7⃣️ dl>dt+dd 定义列表 ，块元素，占整行

8⃣️  b / strong  加粗

9⃣️i / em  倾斜

font  字体  属性：颜色color    大小size

sub / sup  上下标

hr  水平线  属性： 宽度width  颜色 color

marquee 滚动文本 属性： 方向direction   运动方式behavior

四、网页图片

1. jpeg/jpg   有损压缩，不支持透明，颜色丰富

2. png 无损压缩，支持透明，颜色丰富
3. gif 支持动画，支持透明，颜色范围256色

4. webp  有损压缩与无损压缩的图片文件格式
 

五、颜色

RGB：red   0～255；green  0～255；blue 0～255

#FFFFFF 十六进制的等值转换

六、标签的显示类型

1⃣️块block

p h1-h6 hr ul ol li dl dd dt form 

①支持宽高，自上而下排列

②不受空格影响

③一般用于其他标签的容器

④默认宽度为100%（独占一行）。

2⃣️行内块 inline-block

1、img，用于定义HTML页面中的图像；

2、textarea，用于定义一个多行的文本输入控件；

3、input，用于规定用户可以在其中输入数据的输入字段。

3⃣️行内inline

span i a b strong em sub sup u label br font

①不支持宽高（宽高根据内容大小自动撑开），自左向右排列

②受空格影响

③不独占一行

备注：标签元素之间的转换

display：inline（转为行内元素）

inline-block（转为行内块元素）

block（转为块元素）

none（隐藏 不显示）

注意：当元素浮动（float）时会转化成行内块元素特点。

七、特殊字符（常用）

1⃣️<   <

2⃣️>  >

3⃣️  空格

4⃣️能字符输入法打印识别的就直接使用

八、超链接

1. 跳转html页面

例： 去百度

去task1

2. 跳转图片，音频，视频等可识别文件类型，直接打开

例： 打开图片

3. 跳转未知类型的文件，根据浏览器情况，大部分浏览器下载

例子： xmind 文件

4. 移动端 可以实现 跳转 拨号界面

去拨号

5. 跳转邮件应用方式

发邮件

九、超链接的跳转方式

1⃣️target属性 跳转  _self 当前页面 , _blank 新页面

2⃣️步骤一： 设置锚点   为标签 添加 id 属性值

      步骤二：  跳转锚点   #锚点名

十、框架iframe

1⃣️一个html页面嵌套展示多个html页面，实现分模块开发的方式，属于行内块类型

2⃣️