今天继续接着昨天给大家分享昨天继续的HTML的基础知识

今天的课堂结构在简单的说一下：

1 HTML的代码的基本使用

2 HMTL的常用基本标记

3 浏览器控制台的使用：

4 CSS样式对HTML的修改

1 HTML的代码的基本使用：

在普通的html代码里面，用<>约束代码的符号叫做“标记”，标记根据开闭的形式不同分为成对标记和单独标记两种。

例如下面的结构：

someblock（网页标题代码块）

someblock（网页主体代码块）

成对标记以如下方式写：

注意成对标记必须要成对存在，同时注意后面的标签不能少了/这个符号。

head和body标记包含在HTML标签内部才能正常显示，html是网页的初始标签，head标记里包含网页的标题等信息，body标记包含网页的相关主体信息。

单独标记以如下形式去写<...>

还可以给标签加上参数，注意参数要加在开始标记里： <... arg1="" arg2="" arg3=""> 不同的标记里面可以设置不同的参数，这些参数也是又W3C约定好的，一般我们只需要记忆常用的就可以了。

2 HMTL的常用基本标记：

1 ，，如此设置后，网页的标题就可以在用户访问的时候，显示出来，为自己定义的样子

2

，

标记一般放在body标记内，一般是网页的正文

百度一下 你就知乎

简单的网页的大段的文字内容就可以在这里显示出来

3

，

标记 也是body标记内，用来显示文章的标题。

HMTL基础知识入门

h1是文章的一级标题，与此相对应的，还有文章的二级标题

，还有文章的三级标题

等。

4 ，代码的注释，为了后期维护方便，任何的代码都要写注释，HTML也不例外，

5 图片的引用标记，通过这样的代码可以显示图片，在标记内的图片的路径，可以是绝对路径也可以是相对路径。

绝对路径：绝对路径就是你的主页上的文件或目录，在硬盘根目录上的真正的路径。

相对路径：相对与某个基准文件的目录的路径。这里的基准文件也就是相对于Web文件的相对路径（HTML中的相对目录）

接下来综合上面的几个标签 ，进行一个案例展示

欢迎来到知乎 高端知识问答专区！

这就是一个最简单的网页，包括了网页标题，网页主体，图片引用和相关的参数，无论多么复杂的网页都是由这几个简单的版块组成。

其中，和这个设置参数相关的div标记和meta标记我们之前没有单独的讲过，就是一些在标记里面，起到限定参数的字符

1 div标记：其实没有什么实际作用，只是分区的作用，在body主体里对网页进行分区，是网页的结构看起来更加的合理

2 meta标记：则是设定一些显示效果，不可见的东西，比如本项目中设置编码格式，UTF-8就是网页的字符编码，如果不设置这个，网页出来会是乱码

三 浏览器控制台的使用：

我们可以随意打开一个HTML网页，点击鼠标右键，会出现一个选择菜单，我们可以点击最下方的检查、审查元素、开发人员工具等不同的按钮，均可以打开HTML代码调试控制台，除此之外还有好几种方式可以将控制台的页面调出，比如我们都比较熟悉的F12按键，还有在Mac的苹果系统中使用⌘-Option-J或⌘-Option-I都可以将控制台呼唤出来。

1 点击这个按钮可以总览页面中的前端代码元素

2 这按钮可以将视图切换到 移动端的显示（大部分网页的移动端和PC端的代码是分开的）

3 3个小点的符号是调整控制台的显示效果

Elements按钮：这个按钮是调试台的核心功能，主要用来调试HTML和CSS代码的样式，点击这我们可以清晰的看出HTML的不同层级关系，又可以临时性的调试和添加删除CSS样式，因为这里的修改只是在浏览器本地的缓存进行修改，没有去服务器对代码进行修改，刷新后就会恢复原样，修改的意义是可以得到实时的修改反馈，大家可以在这里将调试完的合格HTML代码复制到服务器进行替换，在这个版块的最下方还可以看到所有元素的盒模型。

Console按钮: 这里是Javascript相关代码的控制台，也是前端代码中重要的部分，因为现在的页面需要实现很多的特效和逻辑功能，这些全部依靠脚本代码。其他的功能比如查看错误信息、打印调试信息、对一些脚本代码进行测试，除此之外还有一个比较顺手的附加功能可以当Javascript API手册使用，随时查阅非常方便，另外提一嘴，JAVA和Javascript几乎没有任何的关系，起的名字比较像是因为JAVA如日中天的时候，很多蹭热点起名的。

Source按钮：这是资源调试区，我们平常使用的Script脚本代码的调试就集中在这里。除此之外需要强调的是，由于浏览器的版本不同，其标签的分割的样式也不相同。有的版本的浏览器的Script脚本区也许是独立的。但这不妨碍我们正常使用，原理都是相通的。

Network标签页：这个部分查看不同元素的加载速度，可以以此对代码进行优化，还可以查看某一请求的请求头和响应头，以及响应的内容，除此之外在出现ajax请求时，我们也可以看的非常清楚。

Timeline标签页：这个按钮的作用是查看页面的综合性能，比如页面渲染速度的，当然这是非常复杂的网页才需要，一般的普网页是用不到的。一般是用来给专业的前端测试人员可以查看，其中会展示一些相关的性能参数。比如JS执行时间和相关页面元素的渲染时间。

Profile标签页：这个按钮用来测试相关文件的加载速度，可以在此处上传我们相关的测试文件。测试方法是点击 Load上传即可，一般不用。还可以查看加载页面所用的资源，链接的数据库信息，该域名下保存的cookie信息都可以查看，相关的图片可以在这里扒下来。

四：CSS样式对HTML的修改

CSS全称叫层叠样式表，其主要标准在1999年开始修订，其技术的升级版本是 CSS3，在2001年5月23日W3C完成了CSS3的初始标准，标准的主要内容包括了多栏布局、盒子模型、语言模块、背景和边框、文字特效、列表模块、超链接方式、等一系列的模块 。

如果用一句话进行概括，css的主要功能就是用来集中美化和排版html代码，设置相关尺寸放置的图片或文字等功能。