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.网页的结构

<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。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,542评论 6 504
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,822评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,912评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,449评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,500评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,370评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,193评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,074评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,505评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,722评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,841评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,569评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,168评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,783评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,918评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,962评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,781评论 2 354

推荐阅读更多精彩内容

  • 第一部分HTML&CSS整理答案1.什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HTML5...
    Programmer客栈阅读 2,013评论 0 12
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,114评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,103评论 4 62
  • 遇见一个人,会偷偷翻他微博无数次,却始终不敢关注他 遇见一个人,会偷偷在背后注视他,却始终不敢与他正面相遇 遇见一...
    一笑师妹阅读 222评论 0 0
  • “重感情的人啊 日子终究不会好过 信任 依赖 念旧 分分钟把你虐的万劫不复” ​​​ ​​​​
    陈沫可阅读 141评论 0 0