html最全知识点(超级详细)
一、网页基础知识
1.认识网页(了解)

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

各浏览器的市场份额
查看网站: http://tongji.baidu.com/data/browser

浏览器内核

3.Web标准(记忆)
为什么会有web标准

Web 标准构成

图解Web标准
把一个页面看成一个人
**结构标准:**决定是否有一个好的身体。

**样式标准:**决定是否化妆的美丽漂亮。

**行为标准:**决定是否有吸引人的行为。

二、HTML基础概念
1.HTML初识(了解)
HTML的概念

HTML骨架架构




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

使用 sublime 新建页面的过程

sublime 快捷键

3.HTML的其他介绍(了解)
标签的关系


HTML的标签分类

三、HTML中的标签(熟练)
用<>包裹的英文单词
1.h 系列的标签 (Header) : 标题标签

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

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

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

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

四、标签的属性(了解)
属性为 HTML 元素提供附加信息。(让同一种标签有不同的显示效果)


五、图片标签(重点)

六、路径问题(难点)
1.当前文件找目标文件的过程

2.绝对路径

3.相对路径
用的很多,可移植性很好
同级目录

下级目录

上级目录

七、链接标签(重点)
1.a 标签 (Anchor ) : 超链接(锚)
超链接在页面中起到跳转或定位的作用(超链接、锚链接、a链接、a标签)
2. a标签的跳转功能

3.a 标签的属性

4.a 标签的其他用法

5.a标签的定位功能
a标签可以快速定位到当前页面或者其他页面的目标内容(百度百科)
在当前页面进行定位

在跳转的页面进行定位

八、结构中每个标签的含义(了解)
1.DOCTYPE : 文档类型

2. html 标签

3. head 标签

4.body 标签

5.meta 标签

6.title 标签

九、SEO与标签语义化(了解)
1.title标签与h1标签的权重
2.SEO : 搜索引擎优化

3.标签语义化的好处

十、列表(熟练)
1.无序列表 ul (Unordered List)

2.有序列表 ol(了解)

3.自定义列表 dl(了解)
一列格式自定义的列表(几乎不用)


十一、 HTML中的特殊字符(记忆)
有时候需要在页面中显示空格、<、>等特殊字符
1.HTML的空格合并现象

十二、表格table(难点)

1.创建表格

2.表格的属性

3.表格中的其他标签

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

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

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

2.文本框 text 、 密码框 password

3.单选框 radio 、多选框 checkbox
单选框 radio

多选框 checkbox

4.文件选择框 file

5.表单按钮

提交按钮submit

重置按钮reset

普通按钮button

图片按钮image

6.select 下拉菜单

7.textarea文本域

8.Form 表单域

9.label 标签(记忆)



十四、没有语义的布局标签(记忆)
div和span是没有语义的标签,一般用于页面布局使用(项目中会经常使用到)
1.div:div盒子

2.span

十五、HTML5新标签与特性(了解)
1.HTML5新增语义标签(记忆)


注意:html5标签有兼容性问题(老浏览器没效果),所以为了客户群多,会少用。
2.其他表单新属性(记忆)

3.多媒体标签—audio 音频

4.多媒体标签—video 视频
