第一节 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.网页的结构
<html>
<head> </head> 头部
<body> 身体
<h1> </h1> 标题标签
<p> </p> 段落标签
</body>
</html>
特点:成对出现,有开有闭合,尖括号括住了标签名。结束标签内增加了斜线
7.HTML语法
①“以“<”开头
②接着标签名,中间无空格
③标签名后面有属性的,加空格,然后是 属性名=“”;多个属性的用空格隔开
④属性结束后加一个或多个空格
⑤然后是结束标签“>”,如果是闭合标签在标签名前加“/”,如
⑥单标签,斜线没有意义可有可无
⑦标签中可以嵌套内容
第二节内容笔记
一、HTML常用标签
1、body标签:
<body>用于定义HTML文档所要显示的内容,也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记内,<body>标记中的信息才是最终展示给用户看的。
一个HTML文档只能含有一对<body>标记,且<body>标记必须在<html>标记内,位于<head>头部标记之后,与<head>标记是并列关系。
2、标题标签h1-h6:
H1标题标签是 标注当前页面中的文档最重要的核心主题的文本。
H1到 h6标签,相对于当前文档的重要性依次降低。注意h1标签在整个页面中最多一次(当然可以超过,但是不利于搜索SEO)。
H2以后的这些标签可以在一个页面中有多个,但是不要滥用,滥用会导致网页的SEO受影响,搜索引擎会认为我们作弊。
H1 到H6 标签不是用于 字体大小的样式设置,关键是文档内容的文字的重要性的体现,html是定义文档内容的,而样式由后面我们学的css来设定。
3、段落标签:<p>
4、换行标签 <br/>,水平线标签 hr
5、文本节标签:span
6、定义着重文字,文字以斜体显示:<em>
定义加重语气,文字以粗体形式显示:<strong>
定义下标字:<sub> 定义上标字:<sup>
定义删除字,<del>,s;
•注释标签:<!---注释内容---->
7.超链接和图片
超级链接标签:a
<a href="http://www.itcast.cn">超级链接内容
–href属性,指向跳转的地址
–#页面定位
–target属性:_blank_self
锚点链接:可以然后href属性指向一个页面中的id值,可以让页面跳转到id对应的标签的位 置。
超级链接不仅仅是可以嵌套文本,还可以嵌套图片、表格、标题。
8. 相对路径和绝对路径
--相对路径
图像文件和html文件位于同一文件夹:只需输入图像文件的名称即可,如<img src="logo.gif"/>
图像文件位于html文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,如<
src="img/img01/logo.gif"/>
图像文件位于html文件的上一级文件夹:在文件名之前加入“../” ,如果是上两级,则需要使用 “../ ../”,以此类推,如<img src="../logo.gif"/>
--绝对路径
绝对路径一般是指带有盘符的路径。例如:
“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。