web基础知识铺垫

colarlady
481 阅读4分钟

我们写的代码是需要浏览器解析与执行的，首先我们先来了解一下浏览器

浏览器

  • 主流浏览器有chrome,IE,firefox,safria
  • 浏览器分为渲染引擎和JS引擎
    • 渲染引擎是获取网页的内容(HTML,XML图像的内容),整理信息(加入css),计算网页的显示方式,然后显示到显示器上。
    • JS引擎是对JS代码进行解析与执行
  • 常见的渲染引擎
    • Web端
      • Trident内核
            // 这个是IE浏览器的内核，Window10之后浏览器Edge的内核是EdgeHtml
      //主要代表有IE,百度浏览器,360极速浏览器，猎豹浏览器
      • Webkit内核
            //webkit内核是苹果公司开发的
      //主要代表有Safira
      • Gecko内核
          // 主要代表有火狐浏览器
      • Chromium/Blink
            //在Chromium项目中研发Blink渲染引擎，内置于Chrome浏览器中，Blink是Webkit分支
      //国内大部分浏览器最新版是Blink二次开发
    • 移动端
      • Andrioid
            webkit内核二次开发
      • IOS
             Safria的内核webkit
      • WP7
              IE的内核Trident

浏览器的内核不同,工作原理、解析肯定不同，显示就会有差别。所以需要制定一套web的标准。

Web标准

  • 结构标准
    • 结构标准是指对网页元素进行分类与整理
    • 相当于人的骨骼
    • 好的结构使得内容更加清晰，更有逻辑性
  • 表现标准
    • 设置网页的版式，大小，颜色等外观样式
    • 相当于人的衣服
    • 表现越好越让用户赏心悦目
  • 行为标准
    • 网页模型的定义与交互的编写
    • 相当于人的行为
    • 交互越好用户体验越好

HTML是什么

  • Hyper Text Markup Language 超文本标签语言
  • 超文本:超文本是指它不仅仅可以有文本，还可以有图像，超链接，动画，视频，音频
  • 标签语言：标签语言是指HTML语法是一个个标签

HTML基本结构

<!--根标签-->
<HTML> 
    <!--文档头部-->
    <!--文档头部描述了各种文档的属性和信息-->
    <head>    
        <!--文档标题-->
        <title></title>
    </head>
    <!--文档主体-->
    <body>
    </body>
</HTML>

HTML初识

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<hr color="red" width="500" />
	<p></p>
	<div></div>
	<h1></h1>
</body>
</html>
  • <!DOCTYPE html>
    • 告诉浏览器使用的是html的哪个标准规范
    • 这样浏览器才可以按照对应的那个规范进行文档的解析
  • <meta charset="UTF-8" />
    • 指明文档的字符集编码方式
    • 常见的字符集编码有
      • GB2312：简单中文
      • GBK：全部中文字符包括繁体
      • BIG5：繁体中文
      • UTF-8：全世界所有国家用到的字符

WEB签语义化

  • 什么是WEB语义化
    • 标签是有含义的，比如<p></p>代表段落,<h1></h1>代表标题
    • 在合适的地方使用合适的标签就是WEB语义化
  • WEB语义化有什么好处
    • WEB语义化使得HTML结构更加清晰，代码可读性好，便于维护和团队开发
    • 搜索引擎是根据标签含义确定上下文和权重的，所以为了得到搜索引擎的有效爬取，提高网站流量，要尽可能的使标签和内容语义化；
    • 屏幕阅读器会按照语义化的标签来“读”网页，便于无障碍阅读；
  • 在开发中如何实现标签语义化
    • 尽量不使用div,span等无语义的标签,在既可以使用div和p的地方选择使用p
    • 尽量不使用纯样式的标签比如b,u,font改用css设置,需要强调的文本使用em或者strong
    • 使用表格时,标题使用caption,表头使用thead包围,表主体使用tbody包围,尾部使用tfoot包围,表头使用th，其他使用td
    • 表单于要使用fieldset包裹，并且使用legend说明表单用途。每一个input标签的说明都要使用对应的label标签,label标签使用for属性，input标签使用id属性将两者关联起来。
  • 常见的语义化标签 + +
  • 常见的H5新增的语义化标签 + +
  • 如何判断一个网页语义化良好
    • 去掉CSS之后网页结构依然有序，可读性很好
  • 举个栗子
    • 大厂如何实现语义化
    • 一个在线简历
avatar
文章
阅读
粉丝