web前端学习第一天（2.14-2.15)

第一节 HTML基础知识：

1.什么是浏览器？

浏览器帮助用户进行浏览网页的软件，能够让将网页内容呈现给用户查看，并让用户与网页交互。

2.常见到浏览器和内核？

IE内核 Trident

谷歌内核 WebKit / Blink

火狐内核 Gecko

Safarri内核 WebKit

欧朋内核 Presto

3.一些名词解释

-Internet：因特网

-WWW：万维网，世界互联网服务。

-W3C万维网联盟，国际中独立性技术标准机构。

-HTTP：超文本传输协议，浏览器和服务器端网络传输数据的约束和规范。

-Web：互联网服务总称。

-DNS：域名系统。

4.什么是服务器？

–浏览器接受用户操作→浏览器封装HTTP请求→连接服务器：DNS解析→发送请求Request→服务器接收请求→处理请求→返回响应报文→浏览器接收响应报文→渲染页面呈现

5.网页的组成？

－网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。

－HTML：页面结构、CSS：页面样式表现、JavaScript：交互行为

6.网页的结构

    头部

       身体

   

 标题标签

 

 段落标签

 

特点：成对出现，有开有闭合，尖括号括住了标签名。结束标签内增加了斜线

7.HTML语法

①“以“<”开头

②接着标签名，中间无空格

③标签名后面有属性的，加空格，然后是 属性名=“”；多个属性的用空格隔开

④属性结束后加一个或多个空格

⑤然后是结束标签“>”，如果是闭合标签在标签名前加“/”，如

⑥单标签，斜线没有意义可有可无

⑦标签中可以嵌套内容

第二节内容笔记

一、HTML常用标签

1、body标签：

用于定义HTML文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于标记内，标记中的信息才是最终展示给用户看的。

一个HTML文档只能含有一对标记，且标记必须在标记内，位于头部标记之后，与标记是并列关系。

2、标题标签h1-h6：

H1标题标签是 标注当前页面中的文档最重要的核心主题的文本。

H1到 h6标签，相对于当前文档的重要性依次降低。注意h1标签在整个页面中最多一次（当然可以超过，但是不利于搜索SEO）。

H2以后的这些标签可以在一个页面中有多个，但是不要滥用，滥用会导致网页的SEO受影响，搜索引擎会认为我们作弊。

H1 到H6 标签不是用于 字体大小的样式设置，关键是文档内容的文字的重要性的体现，html是定义文档内容的，而样式由后面我们学的css来设定。

3、段落标签：

4、换行标签
，水平线标签 hr

5、文本节标签:span

6、定义着重文字，文字以斜体显示：

定义加重语气，文字以粗体形式显示：

定义下标字：  _{定义上标字：}

定义删除字，，s；

•注释标签：

7.超链接和图片

超级链接标签：a

超级链接内容

–href属性，指向跳转的地址

–#页面定位

–target属性：_blank_self

锚点链接：可以然后href属性指向一个页面中的id值，可以让页面跳转到id对应的标签的位 置。

超级链接不仅仅是可以嵌套文本，还可以嵌套图片、表格、标题。

8. 相对路径和绝对路径

--相对路径

图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如

图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<

src="img/img01/logo.gif"/>

图像文件位于html文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如

--绝对路径

绝对路径一般是指带有盘符的路径。例如:

“D:\HTML+CSS网页制作\chapter02\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。

9 .图片格式和选择

GIF格式

GIF最突出的地方就是他支持动画，同时GIF也是一种无损的图像格式，也就是说修改图片之后，图片质量几乎没有损失。再加上GIF支持透明（全透明或全不透明），因此很适合在互联网上使用。但GIF只能处理256种颜色。在网页制作中，GIF格式常常用于Logo、小图标及其他色彩相对单一的图像。

总结：小、兼容性好、支持透明、色彩太多不行。

PNG格式

PNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）。相对于GIF，PNG最大的优势是体积更小，支持alpha透明（全透明，半透明，全不透明），并且颜色过渡更平滑，但PNG不支持动画。同时需要注意的是IE6是可以支持PNG-8的，但在处理PNG-24的透明时会显示为灰色。通常，图片保存为PNG-8会在同等质量下获得比GIF更小的体积，而半透明的图片只能使用PNG-24

JPG格式

JPEG格式是网络上比较流行的一种格式，其文件扩展名为.jpg或.jpeg。JPEG是一种有损压缩格式，其文件体积非常小，非常有利于网络传输，但由于是有损压缩，所以将一幅图像转换为JPEG格式后图像质量会降低。一般用于广告，大的宣传的图片，照片等

选择：

–jpg

•色彩还原高，适合复杂颜色图片，比如banner

–gif

•色彩效果最低，支持透明，支持动画，适合颜色比较少，不适合渐变色。

–png

•PNG的优点是，清晰，无损压缩，压缩比率很高，可渐变透明，具备几乎所有GIF的优点；缺点是不如JPG的颜色丰富，同样的图片体积也比JPG略大。

•PNG有着另一个优点，那就是逐次逼近显示(progressive display)：传输图像文件的同时，可以先把整个轮廓显示出来，然后逐步显示图像的细节，即先显示低分辨率显示图像，从模糊到清晰，然后逐步提高它的分辨率。这是一个很好的用户体验。

•总结：

•gif和png基本差不多，色彩比较少的直接gif，如果图片动画用gif。对色彩要求高的用jpg。