web和html初识

一、认识WEB
「网页」主要是由 文字 、 图 像 和 超 链 接 等元素构成,当然除了这些元素,网页中还可以 
包括音频、视频以及F l a sh等。
「浏览器」是网页显示、运行的平台。
「浏览器内核」(排版引擎、解释引擎、渲染引擎) 
负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。

浏览器内核备注
IE TridentI E、猎豹安全、360极速浏览器、百度浏览器
firefox Geko 可惜这几年已经没落了,打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
Safariwebkit现在很多人错误地把 webkit 叫做 chrome内核(即使 chrome 内核已经是 blink了)。苹果感觉像被别人抢了媳妇,都哭晕在 厕所里面了。
chromeChromium\Blink在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心), 内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。 大部分国产浏览器最新版都采用Blink内核。二次开发
Operablink现在跟随chrome用bl ink内核。


web标准
「构成」结构标准,表现标准和行为标准

  • 结构标准用于对网页元素进行整理和分类(HTML)
  • 表现标准用于设置网页元素的版式
  • 行为标准用于对网页模型的定义及交互的编写(JavaScript)

「web标准的优点」

  • 易于维护:只需要更改CSS文件,就可以改变整站的样式
  • 页面响应快:HTML文档体积变小,响应时间短
  • 可访问性:语义化的HTML(结构和表现相分离的HTML)编写的网页文件,更容易被屏幕阅读器识别
  • 设备兼容性:不同的样式表可以让网页在不同的设备上呈现不同的样式
  • 搜索引擎:语义化的HTML能更容易被搜索引擎解析,提升排名

二、HTML初始
「HTML」(Hype r Te x t Ma r kup L anguage ):超文本标记语言 
「所谓超文本,有2层含义:」 

  • 因为它可以加入图片、声音、动画、多媒体等内容(超越文本限制)
  • 不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本)

「HTML骨架格式」 

「团队约定大小写」 

  • HTML标签名、类名、标签属性和大部分属性值统一用小写

「H TML元素标签分类」

  • 常规元素(双标签)

「H TML标签关系」

  • 嵌套关系父子级包含关系
  • 并列关系兄弟级并列关系
  1.     如果两个标签之间的关系是嵌套关系,子元素最好缩进一个tab键身位(一个tab是4个空格)。如果是并列关系,最好上下对齐。

文档类型<!DOCTYPE >
「文档类型」用来说明你用的XHTML或者HTML是什么版本。<!DOCTYPE html>告诉浏览器按照HTML5标准解析页面。
页面语言lang
lang指定该html标签内容所用的语言

「lang的作用」

  • 告诉根据lang属性来设定不同语言的css样式,或者字体
  • 告诉搜索引擎做到精确的识别
  • 让语法检查程序做语言识别
  • 帮助翻译工具做识别
  • 帮助网页阅读程序做识别

字符集
「字符集」(Chrarcter set)是多个字符的集合,计算机要准确的处理各种字符集文字,需要进行字符编码,以便计算机能够识别和存储各种文字。

  • UTF-8是目前最常用的字符集编码方式
  • 让html文件是以UTF-8编码保存的,浏览器根据编码去解码对应的html内容。

「meta viewport的用法」
        通常viewport是指视窗、视口。浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。在移动端和pc端视口是不同的,pc端的视口是浏览器窗口区域,而在移动端有三个不同的视口概念:布局视口、视觉视口、理想视口meta有两个属性name 和 http-equiv
name属性的取值

  • keywords(关键字) 告诉搜索引擎,该网页的关键字
  • description(网站内容描述) 用于告诉搜索引擎,你网站的主要内容。
  • viewport(移动端的窗口)
  • robots(定义搜索引擎爬虫的索引方式) robots用来告诉爬虫哪些页面需要索引,哪些页面不需要索引
  • author(作者)
  • generator(网页制作软件)
  • copyright(版权)

http-equiv有以下参数

http-equiv 相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容

  • content-Type 设定网页字符集(Html4用法,不推荐)
  • Expires(期限) ,可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。
  • Pragma(cache模式) ,是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出
  • Refresh(刷新) ,自动刷新并指向新页面。
  • cache-control (请求和响应遵循的缓存机制)


HTML标签的语义化

  • 方便代码的阅读和维护,样式丢失的时候能让页面呈现清晰的结构。
  • 有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
  • 方便其他设备解析,如盲人阅读器根据语义渲染网页

 

「拓展」 标签:规定页面上所有链接的默认 URL 和设置整体链接的打开状态

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值