HTML基础知识点大全

一、什么是HTMLHyperText Markup Language，即超文本标记语言二、第一个HTML<！doctpye html><html><head></head><body></body><html>三、常用的标签🀄️🀄️🀄️1⃣️p 标签，段落标签，占整行2⃣️img 图片标签：①src图片路径

码农阿茹

6415人浏览 · 2022-05-04 18:32:59

码农阿茹 · 2022-05-04 18:32:59 发布

一、什么是HTML

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

二、第一个HTML

<！doctpye html>

<html>

<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页面

例：<a href = ' http：//www.baidu.com '> 去百度</a >

<a href = ' '> 去task1</a >

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

例：<a href = ' '> 打开图片</a >

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

例子：<a href = ' '> xmind 文件</a >

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

5. 跳转邮件应用方式

九、超链接的跳转方式

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

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

步骤二：跳转锚点 <a href=" ">#锚点名</a >

十、框架iframe

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

2⃣️<iframe>

1. src 页面地址

2. frameborder 边框

3. scrolling 滑动条

4. width/height 宽高

5. name 框架名

3⃣️单页面框架跳转

步骤一：设置导航 a 超链接的 target 指向对应页面iframe 的name值

步骤二：主页面使用iframe嵌套其他页面，局部刷新iframe添加name属性和导航a超链接 target 对应

十一、表格

1⃣️<table>

1. border 表格四边宽度

2.frame 表格四边的显示

属性：above 上 below 下 rhs 右 lhs 左

vsides 左右 hsides 上下 void 不显示

border 默认显示四边

3.rules 表格间隔线设置

rows单线显示行

cols单线显示列

all单线显示行列

4.width/height 宽高

5.cellspacing 单元格外间距

6.cellpadding 单元格内填充

7.align 表格对齐方式

8. bordercolor 边框颜色

2⃣️<tr> <td>

1.width/height 一半高度由行设置，单元格只设置宽度

2.align水平对齐

属性：left center right

3.valign垂直对齐

属性 top middle bottom

4.bgcolor 背景色

5.rowspan行合并

6.colspapn列合并

3⃣️表格布局

新手知道行和列的合并与嵌套表格

1.静态布局(固定宽高)
2.弹性布局(flex)————常用
3.圣杯布局
flex：flex-group、flex-shrink、flex-basis
flex：auto/none/负数/一个长度或百分比/两个非负数/一个非负数和一个长度或百分比等
A，flex-group：当父元素有剩余空间时，子元素占据剩余空间的量
B，flex-shrink：当父元素的空间不足以展示所有的子元素，父元素没设置flex-wrap，子元素需要进行收缩的量
C，flex-basis：表示该子元素的初始宽度
4.自适应布局(为不同的屏幕分辨率定义的布局 @media媒体查询技术)
5.流式布局：(宽高用百分比，按屏幕分辨率调整，布局不发生变化)
6.响应式布局(使用meta标签，宽高随窗口调整自动适配，适应布局和流式布局的综合方式)
7.栅格布局
1).栅格(网格划分)：在一个特定区域内划分出有规律的格子，依靠这些格子进行有规律的版面布局。
使用栅格布局：bootstrap(12列)，element(24栏)，antDesign
2).栅格布局
container：栅格系统容器；rows：行；cols：列；gutters：各列间的空隙
3).栅格布局实现响应式布局
8.table布局(使用表格进行页面排版和样式设置)
1).用法
display:table
display:table-cell，相当于td元素
display:table-row，相当于tr元素
table-layout:fixed | auto(默认)：table-layout 属性用于显示表格单元格、行、列；auto, 自动表格布局，列的宽度由单元格中最大内容的宽度决定；fixed ,固定表格布局。