html最全知识点(超级详细)

发布时间:2024-02-27 15:01

html最全知识点(超级详细)

一、网页基础知识

1.认识网页(了解)

\"html最全知识点(超级详细)_第1张图片\"

2.五大浏览器介绍(记忆)

概述

\"html最全知识点(超级详细)_第2张图片\"

各浏览器的市场份额

查看网站: http://tongji.baidu.com/data/browser
\"html最全知识点(超级详细)_第3张图片\"

浏览器内核

\"html最全知识点(超级详细)_第4张图片\"

3.Web标准(记忆)

为什么会有web标准

\"html最全知识点(超级详细)_第5张图片\"

Web 标准构成

\"html最全知识点(超级详细)_第6张图片\"

图解Web标准

把一个页面看成一个人
**结构标准:**决定是否有一个好的身体。
\"html最全知识点(超级详细)_第7张图片\"
**样式标准:**决定是否化妆的美丽漂亮。
\"html最全知识点(超级详细)_第8张图片\"
**行为标准:**决定是否有吸引人的行为。
\"html最全知识点(超级详细)_第9张图片\"

二、HTML基础概念

1.HTML初识(了解)

HTML的概念

\"html最全知识点(超级详细)_第10张图片\"

HTML骨架架构

\"html最全知识点(超级详细)_第11张图片\"
\"html最全知识点(超级详细)_第12张图片\"
\"html最全知识点(超级详细)_第13张图片\"
\"html最全知识点(超级详细)_第14张图片\"

2.开发工具的基本使用(操作)

\"html最全知识点(超级详细)_第15张图片\"

使用 sublime 新建页面的过程

\"html最全知识点(超级详细)_第16张图片\"

sublime 快捷键

\"html最全知识点(超级详细)_第17张图片\"

3.HTML的其他介绍(了解)

标签的关系

\"html最全知识点(超级详细)_第18张图片\"
\"html最全知识点(超级详细)_第19张图片\"

HTML的标签分类

\"html最全知识点(超级详细)_第20张图片\"

三、HTML中的标签(熟练)

用<>包裹的英文单词

1.h 系列的标签 (Header) : 标题标签

\"html最全知识点(超级详细)_第21张图片\"

2.p 标签 (Paragraph) : 段落标签

\"html最全知识点(超级详细)_第22张图片\"

3.hr 标签 (Horizontal Rule):水平线标签

\"html最全知识点(超级详细)_第23张图片\"

4.br 标签 (break row=行):换行标签

\"在这里插入图片描述\"

5.(4组)文本格式化标签

\"html最全知识点(超级详细)_第24张图片\"

四、标签的属性(了解)

属性为 HTML 元素提供附加信息。(让同一种标签有不同的显示效果)
\"html最全知识点(超级详细)_第25张图片\"
\"html最全知识点(超级详细)_第26张图片\"

五、图片标签(重点)

\"html最全知识点(超级详细)_第27张图片\"

六、路径问题(难点)

1.当前文件找目标文件的过程

\"html最全知识点(超级详细)_第28张图片\"

2.绝对路径

\"html最全知识点(超级详细)_第29张图片\"

3.相对路径

用的很多,可移植性很好

同级目录

\"html最全知识点(超级详细)_第30张图片\"

下级目录

\"html最全知识点(超级详细)_第31张图片\"

上级目录

\"html最全知识点(超级详细)_第32张图片\"

七、链接标签(重点)

1.a 标签 (Anchor ) : 超链接(锚)

超链接在页面中起到跳转或定位的作用(超链接、锚链接、a链接、a标签)

2. a标签的跳转功能

\"html最全知识点(超级详细)_第33张图片\"

3.a 标签的属性

\"html最全知识点(超级详细)_第34张图片\"

4.a 标签的其他用法

\"在这里插入图片描述\"

5.a标签的定位功能

a标签可以快速定位到当前页面或者其他页面的目标内容(百度百科)

在当前页面进行定位

\"在这里插入图片描述\"

在跳转的页面进行定位

\"html最全知识点(超级详细)_第35张图片\"

八、结构中每个标签的含义(了解)

1.DOCTYPE : 文档类型

\"html最全知识点(超级详细)_第36张图片\"

2. html 标签

\"在这里插入图片描述\"

3. head 标签

\"在这里插入图片描述\"

4.body 标签

\"在这里插入图片描述\"

5.meta 标签

\"html最全知识点(超级详细)_第37张图片\"

6.title 标签

\"在这里插入图片描述\"

九、SEO与标签语义化(了解)

1.title标签与h1标签的权重

2.SEO : 搜索引擎优化

\"html最全知识点(超级详细)_第38张图片\"

3.标签语义化的好处

\"在这里插入图片描述\"

十、列表(熟练)

1.无序列表 ul (Unordered List)

\"html最全知识点(超级详细)_第39张图片\"

2.有序列表 ol(了解)

\"html最全知识点(超级详细)_第40张图片\"

3.自定义列表 dl(了解)

一列格式自定义的列表(几乎不用)

\"html最全知识点(超级详细)_第41张图片\"
\"html最全知识点(超级详细)_第42张图片\"

十一、 HTML中的特殊字符(记忆)

有时候需要在页面中显示空格、<、>等特殊字符

1.HTML的空格合并现象

\"html最全知识点(超级详细)_第43张图片\"

十二、表格table(难点)

\"在这里插入图片描述\"

1.创建表格

\"html最全知识点(超级详细)_第44张图片\"

2.表格的属性

\"html最全知识点(超级详细)_第45张图片\"

3.表格中的其他标签

\"html最全知识点(超级详细)_第46张图片\"

4.合并单元格 (左上原则)

\"html最全知识点(超级详细)_第47张图片\"

十三、表单系列标签(重点)

\"在这里插入图片描述\"

1.input (输入框系列) 基本表单控件

\"html最全知识点(超级详细)_第48张图片\"

2.文本框 text 、 密码框 password

\"html最全知识点(超级详细)_第49张图片\"

3.单选框 radio 、多选框 checkbox

单选框 radio

\"html最全知识点(超级详细)_第50张图片\"

多选框 checkbox

\"html最全知识点(超级详细)_第51张图片\"

4.文件选择框 file

\"html最全知识点(超级详细)_第52张图片\"

5.表单按钮

\"在这里插入图片描述\"

提交按钮submit

\"在这里插入图片描述\"

重置按钮reset

\"在这里插入图片描述\"

普通按钮button

\"在这里插入图片描述\"

图片按钮image

\"在这里插入图片描述\"

6.select 下拉菜单

\"html最全知识点(超级详细)_第53张图片\"

7.textarea文本域

\"html最全知识点(超级详细)_第54张图片\"

8.Form 表单域

\"html最全知识点(超级详细)_第55张图片\"

9.label 标签(记忆)

\"html最全知识点(超级详细)_第56张图片\"
\"html最全知识点(超级详细)_第57张图片\"
\"html最全知识点(超级详细)_第58张图片\"

十四、没有语义的布局标签(记忆)

div和span是没有语义的标签,一般用于页面布局使用(项目中会经常使用到)

1.div:div盒子

\"html最全知识点(超级详细)_第59张图片\"

2.span

\"html最全知识点(超级详细)_第60张图片\"

十五、HTML5新标签与特性(了解)

1.HTML5新增语义标签(记忆)

\"html最全知识点(超级详细)_第61张图片\"
\"html最全知识点(超级详细)_第62张图片\"
注意:html5标签有兼容性问题(老浏览器没效果),所以为了客户群多,会少用。

2.其他表单新属性(记忆)

\"html最全知识点(超级详细)_第63张图片\"

3.多媒体标签—audio 音频

\"html最全知识点(超级详细)_第64张图片\"

4.多媒体标签—video 视频

\"html最全知识点(超级详细)_第65张图片\"

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号