前端基础知识之HTML
[1: What does a doctype do?]
1: doctype是html文件的第一行代码,意味着它的前面有注释都不行。所以要要写在<html>标签前面,而且它不属于html标签。
2: doctype的作用是告诉浏览器以哪种模式去渲染当前的这个html文件
3: doctype可能的取值有哪些?目前来说总共有8种:
1: HTML5
<!doctype html>
2: HTML 4.01 Scrict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
3: HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4: HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
5: XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
6: XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
7: XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
8: XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
那么以上不用的doctype之间的差别有哪些呢?我总结了一张表:
[2: What's the difference between full standards mode, almost standards mode and quirks mode?]
1: 三者的差别
1: full standards mode
HTML和CSS的行为完全(几乎是完全)按照W3C制定的标准。
2: quirks mode
HTML和CSS的行为不按照W3C的标准,就跟在Netscape Navigator 4和Internet Explorer 5一样
3: almost standards mode
HTML和CSS的行为几乎按照W3C制定的标准,但是有极少部分的行为与quirks mode一样
2: 三种模式产生的历史原因
在W3C标准制定之前,就已经有很多网站跑在Netscape Navigator 和Internet Explorer上了,如果浏览器都按照W3C的标准去实现的话,以前的那些网站就会坏掉。为了兼容以前的网站,所以产生了quirks mode,浏览器会按照W3C标准以前的简析方式去工作。
3: 浏览器怎么知道按哪种模式去解析
浏览器根据doctype
来确定处于哪种模式!引发不同模式的doctype在不同的浏览器下面会不一样。但是有一条相同的就是:没有doctype,在任何浏览器下面都会引发quirks模式。所以千万不要那样做,just don't
!
不同的浏览器的不同模式引发的原因可以参考:
https://hsivonen.fi/doctype/#...
3: What's the difference between HTML and XHTML?
4: Are there any problems with serving pages as application/xhtml+xml?
5: How do you serve a page with content in multiple languages?
6: What kind of things must you be wary of when design or developing for multilingual sites?
7: What are data- attributes good for?
8: Consider HTML5 as an open web platform. What are the building blocks of HTML5?
9: Describe the difference between a cookie, sessionStorage and localStorage.
1: 先直观地感受一下三者的用法
1:cookie
//定义一个cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2019 12:00:00 UTC; path=/";
//定义第二个cookie
document.cookie = "age=16; expires=Thu, 18 Dec 2019 12:00:00 UTC; path=/";
//获取cookie
document.cookie; //"username=John Doe; age=16"
cookie的定义和获取都是字符串,当定义了多个cookie的时候,document.cookie会把所有的cookie放在一个字符串里面返回,以分号分隔。
2: localStorage
//往localStorage里面创建第一个item
localStorage.setItem('name', 'rose');
//往localStorage里面创建第二个item
localStorage.setItem('age', 15);
//读取第一个item
localStorage.getItem('name'); //'rose'
//读取第二个item
localStorage.getItem(''age); //15
3: sessionStorage
//往sessionStorage里面创建第一个item
sessionStorage.setItem('name', 'rose');
//往localStorage里面创建第二个item
sessionStorage.setItem('age', 15);
//读取第一个item
sessionStorage.getItem('name'); //'rose'
//读取第二个item
sessionStorage.getItem(''age); //15
从以上可以看出,localStorage和sessionStorage的用法是一样的。但是他们在过期时间上有区别:
10: Describe the difference between <script>, <script async> and <script defer>.
11: Why is it generally a good idea to position CSS <link>s between <head></head> and JS <script>s just before </body>? Do you know any exceptions?
12: What is progressive rendering?
13: Why you would use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.
14: Have you used different HTML templating languages before?
前端基础知识之HTML的更多相关文章
- web前端基础知识及快速入门指南
web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
- web前端基础知识学习网站推介
内容:一.基础知识及学习资料1. HTML入门学习:http://www.w3school.com.cn/html/index.aspHTML5 入门学习:http://www.w3school.co ...
- 前端基础知识之html和css全解
前端回顾 目录 前端回顾 基础知识 HTTP协议 认识HTML HTML组成 HTML标签 div和span标签 特殊的属性 常用标签 认识css 选择器 属性 前端就是展示给用户并且与用户进行交互的 ...
- web前端基础知识-(八)Ajax
Ajax即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,AJAX = 异步 Ja ...
- web前端基础知识总结
上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 ...
- 前端基础知识-----HTML
一.HTML基础概述 HTML:超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准语言.也就是一般我们在浏览器里看到的东西的书写格式,与 ...
- web前端基础知识
#HTML 什么是HTML,和他ML... 网页可以比作一个装修好了的,可以娶媳妇的房子. 房子分为:毛坯房,精装修 毛坯房的修建: 砖,瓦,水泥,石头,石子.... 精 ...
- web前端基础知识-(八)Django进阶之数据库对象关系映射
Django ORM基本配置 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去 ...
- web前端基础知识-(七)Django进阶
通过上节课的学习,我们已经对Django有了简单的了解,现在来深入了解下~ 1. 路由系统 1.1 单一路由对应 url(r'^index$', views.index), 1.2 基于正则的路由 u ...
- web前端基础知识-(六)jQuery-补
一.JS正则 1.定义正则表达式 JavaScript种正则表达式有两种定义方式,定义一个匹配类似 <%XXX%> 的字符串: 1)构造函数 var reg=new RegExp('< ...
随机推荐
- 研究NLP100篇必读的论文---已整理可直接下载
100篇必读的NLP论文 100 Must-Read NLP 自己汇总的论文集,已更新 链接:https://pan.baidu.com/s/16k2s2HYfrKHLBS5lxZIkuw 提取码:x ...
- android ijkplayer简单使用
class VideoPlayer : FrameLayout, TextureView.SurfaceTextureListener{ private var url:String? = null ...
- jquery JavaScript如何监听button事件
下面的html页面中有两个按钮 <div class="layui-tab-item layui-show"> <form class="layui-f ...
- BZOJ 2318: Spoj4060 game with probability Problem (概率dp)(博弈论)
2318: Spoj4060 game with probability Problem Description Alice和Bob在玩一个游戏.有n个石子在这里,Alice和Bob轮流投掷硬币,如果 ...
- Excel-DNA项目只用1个文件实现Ribbon CustomUI和CustomTaskpane定制【VB.Net版】
Excel-DNA项目中的自定义功能区和自定义任务窗格需要用到各种命名空间.添加所需文件,才能实现.后来我发现可以把所有代码都写在Class1.vb这个默认文件中. 大家可以在Visual Studi ...
- spring boot 测试插件使用及result风格实例1&打包启动
本节主要内容: 1:spring boot 小插件使用 2:构建第一个简单的result风格的实例并访问 3:将项目打成jar包后启动并访问. 一:添加boot devtools插件: 执行完成后,查 ...
- HTTP-web服务器接收到client请求后的处理过程(很详细)
1. 客户发起情况到服务器网卡: 2. 服务器网卡接受到请求后转交给内核处理: 3. 内核根据请求对应的套接字,将请求交给工作在用户空间的Web服务器进程 4. Web服务器进程根据用户请求,向内核进 ...
- ASP.NET ASHX 一般处理程序教程
你不想创建一个普通ASP.NET的Web窗体页.而又要通过一个查询字符串返回一个动态的图片.XML或者非HTML网页.这是一个用C#编程语言编写的使用ASHX(一般处理程序)的简单教程. 简介 首先, ...
- OpenCV 霍夫线变换
#include "opencv2/highgui/highgui.hpp" #include "opencv2/imgproc/imgproc.hpp" #i ...
- 第十六届“二十一世纪的计算”学术研讨会 密西根州立大学教授Anil K. Jain主题演讲
Biometrics---How Do I Know Who You Are? 密西根州立大学教授Anil K. Jain主题演讲" title="第十六届"二十一世纪的 ...