网页制作入门

最新推荐文章于 2024-07-11 14:40:11 发布

kingeric

最新推荐文章于 2024-07-11 14:40:11 发布

阅读量78

点赞数

分类专栏： html+css

本文链接：https://blog.csdn.net/kingeric/article/details/81747524

版权

html+css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

####HTML简介
HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。

####HTML的发展史
HTMl本身的发展经历了很多版本，从1.0到xhtml2.0，包括现在非常火热的html5.0。
HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1996年1月14日，W3C推荐标准
HTML 4.0——1997年12月18日，W3C推荐标准
HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
XHTML 1.0——发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布。
XHTML 1.1, 于2001年5月31日发布
(XHTML 2.0, W3C工作草案)
xhtml2.0因为改动过大，学习这个新技术的成本过高而最终胎死腹中。现在最常用的还是XHTML1.0的标准了。

####CSS介绍
CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

第三章再详细介绍……

####各主流浏览器内核介绍

IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。

所谓的“浏览器内核”无非指的是一个浏览器最核心的部分——“Rendering Engine”，直译这个词汇叫做“渲染引擎”，不过我们也常称其为“排版引擎”、“解释引擎”。这个引擎的作用是帮助浏览器来渲染网页的内容，将页面内容和排版代码转换为用户所见的视图。

注：有时候我们所说的“浏览器内核”甚至“渲染引擎”，其实除了渲染引擎，也悄悄包含了javascript引擎，如WebKit，它由渲染引擎WebCore和javascript引擎JSCore组成。

1、IE浏览器内核：Trident内核，也是俗称的IE内核；
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
4、Safari浏览器内核：Webkit内核；
5、Opera浏览器内核：最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核；
6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；
7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
8、百度浏览器、世界之窗内核：IE内核；
9、2345浏览器内核：好像以前是IE内核，现在也是IE+Chrome双内核了；
10、UC浏览器内核：这个众口不一，UC说是他们自己研发的U3内核，但好像还是基于Webkit和Trident，还有说是基于火狐内核。。

下面是来自百度统计流量研究院的浏览器市场份额报告（2016年1月至今）
这里写图片描述

可以看到chrome和IE依然占据了国内浏览器份额的大多半江山，尤其是chrome浏览器，近几年来发展迅速，抢走IE不少份额。另外国内一些浏览器也有不错的成绩，比如QQ、2345还有搜狗等等。

网页查看及排查错误方式

正确预览网页的方式是使用浏览器查看html文档即可。

但是html在外面编写过程中很容易出错，如何排除错误是个难题，推荐使用Google浏览器或者Firefox浏览器的开发者工具进行调试，在浏览器中按‘F12’键即可打开开发者模式。

Elements标签页：查看、编辑页面上的元素，包括HTML和CSS
Resources标签页：可以查看到请求的资源情况，包括CSS、JS、图片等的内容，同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除
Network标签页：对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用，特别是在查看Ajax类请求的时候，非常有帮助。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示的。
Timeline标签页：Timeline的标签页不是指网络请求的时间响应情况哦（这个在Network标签页里查看），这个Timeline指的JS执行时间、页面元素渲染时间
Console标签页：这个除了查看错误信息、打印调试信息（console.log()）、写一些测试脚本以外，还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性，我可以直接在Console中输入"console"并执行

#路径

路径在html中的作用主要是进行外部资源的引入，如css文件，js文件，媒体文件等。而路径本身有分为相对路径和绝对路径。