Html基本知识

1.根据WEB标准,将一个网页分成三个部分:
- 结构定义网页的整个的结构html;
- 表现定义整个网页的样式css;
- 行为行为表示浏览器和用户的交互的行为js。

2.主流浏览器厂家、前缀、内核
厂家 内核 前缀
IE trident -ms-
Chrome blink -webkit-
Oprea blink -o-
Safari webkit -webkit-
Fierfox gecko -moz-

3.HTML(超文本标记语言)
- <!DOCTYPE>
- 含义:文档声明,位于文档中的最前面的位置,处于 <html> 标签之前。
- 作用:此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。(重点:告诉浏览器按照何种规范解析页面)
- 意义:IE7及以下,如不书写文档声明会使用<怪异模式>解析网页导致一系列CSS兼容性问题。
  - 怪异模式:怪异模式下,IE 的content部分包含了 border 和 pading
  - 盒模型:IE盒模型、标准W3C盒模型 //渲染模式的不同
    内容(content)、填充(padding)、边界(margin)、 边框(border)
- 两种模式
  - 严格模式的排版和 JS 运作模式是,以该浏览器支持的最高标准运行。
  - 在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
    混合模式产生原因:DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

4.<meat/>
- 编码:计算机在保存字符时需要将字符全都转换为二进制编码
- 解码:计算机在读取一个文件时,需要将二进制编码转换为文字
- 乱码:编码和解码时所采用的规则我们称为 字符集;
  编码和解码所采用的字符集不同,导致乱码。
  <meta charset="utf-8" /> 万国码
- lang与charst的区别于作用
  - lang 设置语言 修改不会导致乱码(lang=en)
    编写与 html 标签内
  - charset 设置编码 修改会导致乱码(charset=‘utf-8‘)
    编写与 meta 标签内

5.图片<img/>
- 两个属性
- src:指向的是一个外部图片的地址
- 引入外部文件(href/src区别)
  - href 异步引入,加载web资源。如果网速慢,会导致网页乱码
    <link href=”common.css” rel=”stylesheet”/>
    浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。
    这也是为什么建议使用link方式来加载css,而不是使用@import方式。

  - Src 同步引入,加载web资源。如果网速慢,会导致白屏
    <script src =”js.js”></script>
    当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,
    图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
- alt:在图片不能显示的时候对图片的描述/可被搜索引擎检索
- alt及title的区别
  - alt是图片的一个属性,是图片的描述。搜索引擎本身是不能识别图片的内容,所以需要添加alt属性。
  (在IE浏览器下会在没有title时把alt当成 tool tip显示)
  - title全局属性,面向用户,给用户现实提示信息。

- 图片的路径
- 相对路径
  - <img src=”img/logo.png”>
    从当前文件所在目录开始。
  - <img src=”/img/logo.png”>
    从项目根目录开始。
- 常见的图片格式
  - jpeg:支持的颜色比较多,可以显示一些鲜艳的图片,一般情况下照片,颜色复杂的图片都使用jpeg/不支持透明
  - gif: 支持的颜色比较少,可以显示一些颜色单一的图片/支持全透明,不支持半透明
  - png: 支持的颜色比较多,功能比较强大/完全支持透明
  - Webp:谷歌(google)开发的一种旨在加快图片加载速度的图片格式。
    图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间。
    在质量相同的情况下,WebP格式图像的体积要比JPEG格式图像小40%

6.实体(转义字符)
- 在HTML中不能直接输入一些特殊字符,往往需要通过实体进行转义
- 实体的语法:&实体名字;
  - 大于号:&gt;
  - 小于号: &lt;
  - 空格: &nbsp;
  - 版权声明:&copy;

7.HTML与XHTML——二者有什么区别?
- 所有的标记都必须要有一个相应的结束标记
- 所有标签的元素和属性的名字都必须使用小写
- 所有的 XML 标记都必须合理嵌套
- 所有的属性必须用引号 "" 括起来
- 把所有 < 和 & 特殊符号用编码表示
- 给所有属性赋一个值
- 不要在注释内容中使用 "--"
- 图片必须有说明文字

8.对网页标准和标准制定机构重要性的理解。
- 网页标准和标准制定机构都是为了能让web发展的更‘健康’,开发者遵循统一的标准,
  降低开发难度,开发成本,SEO也会更好做,也不会因为滥用代码导致各种BUG、安全问题,最终提高网站易用性。

9.对WEB标准以及W3C的理解与认识
- 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、
  文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,
  容易维 护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

10.理解HTML结构的语义化
- 更符合W3C统一的规范标准,是技术趋势。
- 没有样式时浏览器的默认样式也能让页面结构很清晰。
- 对功能障碍用户友好。屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页。
- 对其他非主流终端设备友好。例如机顶盒、PDA、各种移动终端。
- 对SEO友好。

时间: 09-17

Html基本知识的相关文章

MySQL数据库基础知识

day02 MySQL数据库基础知识 一.基础知识概述: 基础决定你这门课程的学习成败!只有学习好这些基础知识以后,你才能真正的运用自如.才能够对数据库有更深入的了解,道路才会越走越远. 二.基础知识: 1.数据库(database):数据库就好比是一个物理的文档柜,一个容器,把我们整理好的数据表等等归纳起来. 创建数据库命令:        create database 数据库名; 2.查看数据库         show databases; 3.打开指定的数据库         use 

前端里移动端到底比pc端多哪些知识?

前端里移动端到底比pc端多哪些知识,为啥面试时好多公司都问h5水平如何? 我做过几年的web前端开发,就简单谈谈自己的感受吧. 首先来看看PC端和移动端在前端开发上的一些区别: (1)PC考虑的是浏览器兼容性,移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器用的都是webkit内核,所以做移动端开发,更多考虑的应该是手机分辨率的适配,和不同操作系统的略微差异化: (2)在部分事件的处理上,移动端自然是偏向于触屏的,所以触屏事件的一些规律要多摸索一下,

linux入门基础知识及简单命令介绍

linux入门基础知识介绍 1.计算机硬件组成介绍 计算机主要由cpu(运算器.控制器),内存,I/O,外部存储等构成. cpu主要是用来对二进制数据进行运算操作,它从内存中取出数据,然后进行相应的运算操作.不能从硬盘中直接取数据. 内存从外部存储中取出数据供cpu运存.内存的最小单位是字节(byte) 备注:由于32的cpu逻辑寻址能力最大为32内存单元.因此32位cpu可以访问的最大内存空间为:4GB,算法如下: 2^32=2^10*2^10*2^10*2^2 =1024*1024*1024

认知,构建个人的知识体系(上)

1.前言 本文将聊聊我对构建个人知识体系的一些想法,主要是为了提升自我认知.从个人经历开始,谈谈对知识的划分,也就是一个是什么,为什么的过程. 2.缘起 把时间回到一年前,那时候我工作快一年了,得益于前面的一些努力,工作比较顺利.特别是技术上,没有遇到太多过无法解决的问题.同时也开始迷茫,工作难道就是这个轻松的样子?三五年之后那不是很无趣,该怎么办? 想找到这个问题的答案,而最好的方式莫过于,亲自去了解那些三五年工作经验的人是怎么的样子. 因此从那时候起,关注了不少来公司面试的人的简历,也有过几

知识汇总都在这里了,赶紧点开看看吧!

微信公众号:Web前端精髓 Web前端技术由html.css和JavaScript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构. Web前端精髓是一个分享前端知识的平台,内容包括HTML.CSS.javascript 等和前端技术相关的一切,如果您想对前端有更多的了解,那就持续关注我们,目的是帮助大家审查自己的知识结构是否完善,希望我的文章对你们有

学习虚拟化技术需要掌握的知识与能力(未完成版)

我从1993年学习计算机,有过短期的C语言开发经历,现在主要从事网络与系统集成的工作.我可以算是学习计算机比较"早"的一批人了. 1993年的时候,我是从MS-DOS 3.30开始,直到最后的MS-DOS 6.22.Windows系统是从Windows 3.1(中文版)开始,再到Windows 3.11.Windows 95.98一直到现在的Windows 10. 组建Windows网络是在1996年河北省国税局全省联网,是从Windows NT 3.51开始,到后来的Windows

CentOS下的路由知识及配置路由

博文目录 简介 上一篇博文已经讲解了IP地址的配置,那么有IP,就准备开始进行通信吧,网络之间的通信主要是依靠路由器,当然生成环境中是拥有路由器的,但是系统中的路由配置也是需要了解一下地,今天讲解一下软路由的显现,与一个路由的小实验 linux下需要启用ip_forword 启用路由功能 echo 1 > /proc/sys/net/ipv4/ip_forword 一.路由表中的接口 到达目标网段从本路由器的那个接口能到达,这个借口就本路由的记录接口 1.如果目标网络和路由器直接相连,网关即是路

javascript必须知道的知识要点(二)

该文章不详细叙述各知识要点的具体内容,仅把要点列出来,供大家学习的时候参照,或者检测自己是否熟练掌握了javascript,清楚各个部分的内容. 内建对象可划分为数据封装类对象.工具类对象.错误类对象,如下. 数据封装类对象: Number对象 String对象 Boolean对象 Array对象 Object Function 工具类对象: Math对象 Date对象 RegExp对象 错误类对象: Error对象  Number对象 JavaScript 只有一种数字类型.Number,包括

关于H5框架之Bootstrap的小知识

浏览器支持 旧的浏览器可能无法很好的支持 Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器 CSS源码研究 我们不是在head里面引入了下面这些文件么 <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> &l

031医疗项目-模块三:药品供应商目录模块——sql补充知识

这个补充知识有一个点很有必要,视屏上的老师提出一点: 内链接关联查询: 如果表A和表B有一个外键关联 ,可以通过外键进行内链接查询 select dictinfo.*, dicttype.typename from dictinfo, dicttype where dictinfo.typecode = dicttype.typecode --不通过外键,通过groupid查询用户类型的代码结果集,只能查询出一条记录,可以使用内链接 select sysuser.*, dictinfo.info