参考文档:https://blog.csdn.net/caseywei/article/details/81105544

*)DOCTYPE的作用

如:<!DOCTYPE html>  标志当前所用的HTML的版本

*)行内元素、块级元素

*)对浏览器内核的理解(网页的加载方式):

主要分成两部分:渲染引擎(Layout Engine或Rendering Engine)和JS引擎。

渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。

JS引擎:解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎。
*)常见的浏览器内核:

IE内核

webkit内核(开源):如:Chrome,猎豹。

Opera内核

*)HTML语义化的理解:以前标签是:div+CSS,语义化标签是通过标签的名字就能看出元素存放的什么内容。比如新增的语义化标签:<article> <section> <nav> <aside>、<header> <footer>

*)iframe的优缺点:

iframe能够原封不动的把嵌入的网页展现出来。

如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。

网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。

如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。

缺点:

搜索引擎的爬虫程序无法解读这种页面

框架结构中出现各种滚动条

使用框架结构时,保证设置正确的导航链接。

iframe页面会增加服务器的http请求
*)元素的alt和title的不同:

在alt和title同时设置的时候,alt作为图片的替代文字出现,title是图片的解释文字。

*)displsy:inline-block; 行内块

inline-block主要的用处是用来处理行内非替换元素的高宽问题的!
行内非替换元素,比如span、a等标签,正常情况下士不能设置宽高的,加上该属性之后,就可以触发让这类标签表现得如块级元素一样,可以设置宽高。
注意IE6不支持inline-block属性,可以用hack来解决:*display:inline;zoom:1;

具有行内元素的特征:不换行,能设置宽高。

img、input在默认情况下即为行内块状元素。

行内块状元素的特点是:
既能够设置宽高,又不独自占据一行
(块元素,如div、p等,默认情况下能设置宽高,但独自占据一行
行元素,如span、strong等,默认能够和其他行元素处于同一行,但是不能设置宽高)

*)本地存储(Local Storage )和cookies(储存在用户本地终端上的数据)之间的区别是什么?

Cookies:服务器和客户端都可以访问;大小只有4KB左右;有有效期,过期后将会删除;

本地存储:只有本地浏览器端可访问数据,服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器;每个域5MB;没有过期数据,它将保留知道用户从浏览器清除或者使用Javascript代码移除。

localStorage.setItem('userCode','123');

localStorage.getItem('userCode');

*)你能描述一下渐进增强和优雅降级之间的不同吗?

渐进增强:从基础的功能版本做起,不断扩充,以适应未来环境的需要

优雅降级:针对最高级最完善的浏览器来设计,而将那些被认为过时的、或者功能缺失的浏览器的测试工作,安排在开发周期的最后。在这种设计理念下,对那些被认为过时的、不够好的浏览器,做一些调整去适应、兼容他们。

H5和CSS的更多相关文章

  1. 个人音乐博客 h5、css和js等

    浅说一下吧 这个小项目由h5和css还有js和jq写的 主题内容为个人音乐 博客等 首页一级导航栏 以及侧边栏 整合部分图标(侧边栏未添加收起操作 时间原因 会的朋友们可以自行添加一个动画就可以 在m ...

  2. H5教程(二),CSS入门(一)选择器

    这是我的第二篇博客,H5教程CSS入门,适合刚开始学习H5的新手,让我们共同进步. 1.  CSS简介 1.1  CSS是什么? CSS称为样式层叠表,是用于增强或控制网页样式,并允许将样式信息与网页 ...

  3. CSS实现:标题两侧画线效果

    如图: html代码: <div class="detail-news"> <h5 class="detail-news-title"> ...

  4. 教你判断一个APP页面是原生的还是H5页面 。(还没看)

    来源:https://www.25xt.com/appdesign/11851.html 刚好是周末,无意之间学堂君在收集相关资料的时候,发现有部分童鞋在问<如何判断一个APP页面是不是H5页面 ...

  5. Tornado--基于H5图片的上传

    日记 好久没有分享过东西,一直在学习状态,学的并不好很多东西都没有,也写了很多demo,后续整理出来在分享,就不分享了,不为什么因为今天周六,好不容易双休,大早上的一个人醒来,刷刷知乎,听音乐.分享一 ...

  6. HTML5&CSS挑战

    地址:https://www.w3cschool.cn/codecamp/list?pename=html5_and_css_camp 开始学习HTML标签:欢迎来到编程训练营的第一个编程挑战!你可以 ...

  7. H5(一)H5与HTML、XHTML的不同

    一.基本概念 html:超文本标记语言 (Hyper Text Markup Language) xhtml:可扩展超文本标记语言,是一种置标语言,表现方式与超文本标记语言(HTML)类似,不过语法上 ...

  8. H5视频播放小结(video.js不好用!!!)

    近期在做一个H5的视频课堂,遇到了H5播放的需求,因为原生的video的样式不太理想,尤其是封面无法压住控制条,这就需要我们自定义播放控件. 于是,找了很近的插件,找到了用户比较多的video.js插 ...

  9. Taro 开发踩坑指南 (小程序,H5, RN)

    Taro 开发踩坑指南 (小程序,H5, RN) css taro 如何展示多行文本省略号 https://www.cnblogs.com/xgqfrms/p/12569057.html UI 设计稿 ...

随机推荐

  1. 工作经验-类型转换[ java.lang.String]

    错误代码: logger.info("1"); Map<String,String> zxmap = (Map) zxList.get(0); ybty.setFyze ...

  2. ModuleNotFoundError: No module named '_sqlite3' -- python2.7 问题

    ModuleNotFoundError: No module named '_sqlite3' 运行python 工程出现上面这个问题,以为python安装中缺少这个依赖, 注python 2.7 首 ...

  3. django反向解析传参

    这两天写代码总是有反向解析传参顺带复习了一下反向解析,以下是简单的反向解析 以下是我最近写的很多的反向解析传参  想要实现点击修改将这些从数据库读取的内容传到另一个页面就要通过id来查询,那么我们就需 ...

  4. spring中用到哪些设计模式?

    设计模式作为工作学习中的枕边书,却时常处于勤说不用的尴尬境地,也不是我们时常忘记,只是一直没有记忆. Spring作为业界的经典框架,无论是在架构设计方面,还是在代码编写方面,都堪称行内典范.好了,话 ...

  5. Set集合(scala)

    特点 Set集合最大的特点是:无序 不可重复 定长Set集合 无序 scala> val set = Set(1,5,4,3,7) set: scala.collection.immutable ...

  6. vue-cli 打包编译 -webkit-box-orient: vertical 被删除解决办法

    前言 -webkit-box-orient: vertical在本地开发环境运行都没问题,一旦打包以后就会丢失 正文 原因: -webkit-box-orient: vertical  这个属性被 o ...

  7. C# .Net List<T>中Remove()、RemoveAt()、RemoveRange()、RemoveAll()的区别,List<T>删除汇总

    在List<T>中删除主要有Remove().RemoveAt().RemoveRange().RemoveAll()这几个方法.下面一一介绍使用方法和注意点. 我们以List<st ...

  8. Main Thread Checker 问题解决

    1. without a return value https://developer.apple.com/documentation/code_diagnostics/main_thread_che ...

  9. vue在jsx中使用for循环

    return <div domPropsInnerHTML="titles" style={{ color: 'red', fontSize: '14px' }}> { ...

  10. pandas合并merge-【老鱼学pandas】

    本节讲述对于两个数据集按照相同列的值进行合并. 首先定义原始数据: import pandas as pd import numpy as np data0 = pd.DataFrame({'key' ...