HTML网页的基本构成:图片、文字、链接、音频、视频。
5大浏览器内核
Trident--(IE内核);类似汽车发动机
国内很多的双核浏览器的其中一核便是Trident,美其名日"兼容模式"。孤儿,被抛弃,政府企业用的多,仅用于显现。
Gecko--(火狐)
Moilla FireFox(火狐浏览器)采用该内核,Gecko 的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。可惜这几年已经没落 了,比如打开速度慢、升级频繁。猪队友fulaishi。
webkit--(苹果Safari)
Safari是苹果公司开发的浏览器,所用浏览器内核的名称是大名鼎鼎的WebKit。
Chromium/Blink--(谷歌)
在Chromium项目中研发Blink渲染引擎( 即浏览器核心),内置于Chrome浏览器之中。Blink 其实是WebKit的分支。大部分国产浏览器最新版都采用Blink内核。
Presto--(Opera)
Presto是挪威产浏览器opera的"前任"内核,最新的opera浏览器早已将之抛弃从而投入到了谷歌怀抱了。与谷歌合并。
由于浏览器内核不同;导致不同浏览器解析出来的效果可能不一-致,开发 者常常需要为多版本的开发而艰苦工作,,这时候我们应该有一一个标准:
web网页标准样式的好处:1:可以使网站更易于维护 2:让web的发展前景更加广阔 3:提高页面浏览速度
4:降低网站流量费用 5:更容:易被搜索引擎搜索 6:让内容能被更广泛的设备访问
web标准的构成:
web标准不是某一个标准,而是有W3C和其他标准化组织制定的一系列的合集,主要包括:结构(structure)、
表现(presentation)、 行为(behavior)三个方面。
结构标准:结构用于对网页元素进行整理和分类,主要包括XML和XHTML两个部分
样式表准:表现用于设置网页元素的版本,颜色,大小等外观样式,主要指CSS
行为标准 :行为是指网页模型的定义以及交互的编写,主要包括DOM和ECMScript 两个部分
理想状态下我们的源码:HTML CSS JS
直观感受:人的骨骼好比是结构(结构:是内容更清晰,更具逻辑性),衣服鞋子相当于表现(表现:用于修饰内容的样式),行走,奔跑,跳跃就是行为(行为:内容的交互及操作效果)
HTML的骨架格式
日常生活中的书信我们要遵循一个共同的约定同理: HTML有自己的语言语法骨架格式:
<!DOCTYPE html>
<htm1>
<head>
<title> </tit1e>
</head>
<body>
</body>
</htm1>
1.html标签:作用所有的html中标签的一个根节点
2.head标签作用:存放title meta base style scirpt link注意在head中我们必须要设置的标签是title
3.title标签:让页面拥有一个属于自己的标题
4.body标签作用:页面的主体部分,用于存放所有的HTML标签如p,h,a,u,i,s,em,del,ins,strong,img
HTML标签分类
在HTML页面中,带有<>符号的元素被称为HTML标签,如上面提到的<htm1> <head> <body>都
是HTML标签.所谓标签就是放在“<>“标签符中表示某个功能的编码命令。也称为HTML标签或HTM
L元素。
1:双标签
<标签名>内容</标签名>
该语法中“<标签名>"表示改标签的作用开始,一般称为“开始标签(start tag)”,“</标签名>”表
示该标签的作用结束,-般称为“结束标签(end tag)".和开始标签相比结束标签只是在前面加了一个关闭
符”/” 比如 <body>我是文字呀</body>
2:单标签:<标签名/>
单标签也称空标签:是指用一个标签符号即可完整地描述某个功能的标签 比如<br/>、<hr/>;
HTML标签关系
标签的相互关系就分为两种:
1:嵌套关系
父子关系: <head><title> </title></head>
2:并列关系
<head></head>
<body></body>
文档类型<!DOCTPLY>
<!DOCTYPE html>
这句话就是告诉我们使用哪个版本的HTML HTML有很多的版本那我们应该告诉浏览器我们使用的版本号
标签位于文档最前面.用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范必须在开头处使用标签为
所有的XHTML文档指定XHTML版本和类型只有这样浏览器才能够按照指定的文档类型进行解析注意:一些老
的网站可能用的还是来去面本的文档岑型比如XHTML之类的,但是我们学的是HTML5的文档类型。
字符集:
<meat charset="UTF-8">
UTF-8是目前最常用的字符集编码方式, 常使用的字符集编码还有GBK\GB2312;
GB2312简单中文包括6763个汉字;(大陆使用)
BIG5繁体中文港澳台等地使用;
GBK包含全部中文字符是GB2312的扩展加入对繁体字的支持兼容GB2312;
UTF-8包含全世界所有国家需要用到的字符;
记住一点以后我们统统使用“UTF-8”字符集,这样就避免出现字符集不统一而引起乱码的情况了。
HTML标签的语义化:指标签的含义; 为什么要有语义化标签:
1:方便代码的阅读和维护
2:同时让浏览器或网络爬虫可以很好的解析,从更好的的分析内容
3:使用语义化标签会具有更好的搜索引擎优化
核心:合适的地方给一个最为合理的标签
语义是否良好:当我们去掉CSS之后,网页结构依然组织有序并有良好的可读性不管是谁都能看懂这块内容
遵循的原则:先确定语义的HTML在选合适的CSS。
标题标签:<head></head> 头部:标题
为了使页面更具有语义化,我们经常会在页面中用到标题标签HTML提供了6个等级的标题,即<h1><h2>
<h3><h4><h5>和<h6>作为标题依次递减
段落标签:单词缩写:paragraph段落 <p>文本内容</p>
在网页中要把文字有条理的显示出来离不开段落标签如同我们平时写文章一样整个网页也可以分为若干个
段落,而段落标签就是HTML文档中最常见的标签默认情况下文本在一个段落中会根据浏览器窗口的大小自
动换行。
粗体标签:<b></b> <strong></strong>
斜体标签:<i></i><em></em>
删除线标签:<s></s> <del></del>
下划线标签:<u></u><ins></ins>
换行标签(熟记) : break打断 换行
在HTML中, -个段落中的文字会从左到右依次排列,知道浏览器窗口的右端,然后自动换行.如果希望某段
文字强制换行显示,就需要使用换行标签<br />;这时如果还像在word中直接敲回车换行就不起作用了。
div span标签(重点);
div span是没有语义的是我们网页布局主要的2个盒子;
div就是divison的缩写分割,区分的意思其实有很多的div来组合网页span跨度跨距范围。
语法格式:<div>这是头部</div> <span> 今日价格</span>。
标签属性:<标签名 属性1=“属性值1”属性2=“属性值2”><标签名>。
图像标签<img/>以及和它相关的属性 其基本语法格式如下:
该语法中src属性用于指定图像路径和文件名,他是img标签的必须属性
<img src="图像url"/>
<img/>标记属性:
属性 属性值 描述
src URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 数字 设置图像边框的宽度
锚点链接:
<a herf="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
注意:
1:外部链接 需要添加http://www.baidu.com
2:内部链接 直接链接内部页面名称即可。
3:如果当时没有确定链接目标时,通常将链接标签的href属性定义为“#”(即href="#"),表示该链接
暂时为一个空连接。
4:不仅可以创建文本超链接,在网页中各种元素;如:表格、图像、音频、视频等都可以添加超链接。
锚点定位:
通过创建锚点链接 用户能够快速定位到目标内容
创建锚点链接分为两步:
1:使用“a herf=“#id名”"链接文本/a"创建链接文本. a herf="#live"
2:使用相应的id名称注跳转目标的位置 id="live"
base 标签
base可以设置整体链接的打开状态 可以设置所有的都在新窗口打开 写在<head>标签中:
<base target="_blank"/>