HTML基础二

参考来源: MDN文档: developer.mozilla.org/zh-CN/docs/…

千古壹号的项目: github.com/qianguyihao…

<cite>常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题</cite>
复制代码

link标签

html中元素规定了外部资源与当前文档的关系, 该元素较多的被应用于链接一个样式表

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
复制代码

实现网站换肤功能

参考来源

www.zhangxinxu.com/wordpress/2… www.ibm.com/developerwo…

1. 一个全局class控制样式切换, 如果换肤样式很多, 代码不利于维护
2. 改变皮肤link元素的href地址, JS改变href属性会带来加载延迟, 样式切换不流畅
3. 借助link元素rel属性的alternate属性值实现

<link href = "reset.css" rel="stylesheet" type="text/css" />
<link href="default.css" rel="stylesheet" type="text/css" title="默认"/>
<link href="red.css" rel="alternate stylesheet" type="text/css" title="红色" />
<link href="blue.css" rel="alternate stylesheet" type="text/css" title="蓝色" />
复制代码

• 没有title属性, rel属性值只是stylesheet的link无论如何都会加载并渲染
• 有title属性, rel属性值只是stylesheet的link作为默认样式加载并渲染, 可控制不渲染
• 有title属性, rel属性值为"alternate stylesheet"的link作为备选样式加载, 默认不渲染

Web存储

cookie

• cookie指的就是浏览器里能永久存储的一种数据, 仅仅是浏览器实现的一种数据存储功能.
• 它由服务器生成, 附着在http请求上, 浏览器把cookie以键值对形式保存在某个目录下的文本文件内
• 可以携带用户信息, 当服务器检查cookie的时候, 便可以获取到客户端的状态.

cookie的应用场景:

记住密码, 下次自动登录. 购物车功能. 记录用户浏览数据, 进行广告推荐.

cookie的生成方式:

http response header中的set-cookie

js通过document.cookie读写cookie

cookie的缺陷

• cookie不够大, cookie的大小限制在4KB左右
• 过多的cookie会带来巨大的性能浪费
• 在http请求中cookie是明文传输的, 不安全

LocalStorage

保存的数据长期存在, 下一次访问该网站的时候, 网页可以直接读取以前保存的数据

大小为5M左右, 保存的数据以键值对形式存在.

仅在客户端使用, 不与服务端进行通信

应用场景

图片内容丰富的电商网站会用它来存储base64图片

SessionStorage

保存的数据用于浏览器的一次会话, 当会话结束(通常是关闭窗口), 数据被清空. 即使是相同域名下的两个页面, 只要它们不在同一个浏览器窗口中打开, 那么它们的sessionStorage内容便无法共享. localStorage在所有同源窗口中都是共享的.

大小为5M左右, 仅在客户端使用

sessionStorage.setItem(name, value) // 保存数据

let myName = sessionStorage.key(index) // 根据索引获取数据名称

sessionStorage.getItem(myName) // 根据名称获取数据内容

sessionStorage.removeItem(myName)

sessionStorage.clear() // 清除全部数据
复制代码

HTML5

语义化标签

<header>头部</header>
<nav>导航</nav>
<article>
	<section>区块</section>
</article>
<aside>侧栏</aside>
<footer>页脚</footer>

<!-- main标签需要IE10以上才兼容 -->
复制代码

表单控件

<input type="range" />
<input type="color" />
复制代码

canvas

移动网页相关

<meta name="viewport" content="width=device-width, initial-scale=1.0">
复制代码

width=device-width 宽度等于设备宽度

height=device-height 高度等于设备高度

initial-scale 初始缩放比例

minimum-scale 允许用户缩放的最小比例

maximum-scale 允许用户缩放的最大比例

user-scalable 是否允许用户缩放