一、基础
<!DOCTYPE html>
<html>
<head>
<meta>
<link>
<title>123</title>
<style>
<script>
</head>
<body>
<h1>我的第一个标题</h1>
</body>
</html>
1. <link> 标签用于外链资源
2. <style type="text/css"> 用于内部样式
3. <script>标签用于加载脚本文件,如: JavaScript。
4. <meta> 标签提供了元数据:
<meta charset="UTF-8"> 可以解决中文乱码问题,
为搜索引擎定义关键词:name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"
为网页定义描述内容:<meta name="description" content="Free We on HTML and CSS">
定义网页作者:<meta name="author" content="Hege Refsnes">
每30秒钟刷新当前页面:<meta http-equiv="refresh" content="30">
5. html页面注释用法:<!--...-->
6. a标签的链接文档会在原有的窗口中打开,如果将 target 属性设置为 "_blank" 则文档就会在新窗口打开
7. img标签的title属性是鼠标放上去后会有提示,alt属性是当图片意外无法加载出来而替换图片的文字
8. table表格:th、tr、td,colspan合并多列为一列,rowspan合并多行为一行
9.<iframe>
标签规定一个内联框架,可以用来显示另外一个html页面
10. 字符实体: ;表示空格 , ©:表示版权
11. 块级元素:div、h1~h6、p、ul、table、form
块级元素特点:
①、每个块级元素都从新的一行开始,并且其后的元素也另起一行
②、元素的高度、宽度、行高以及顶和底边距都可设置,左右边距可以设置。
③、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设 定一个宽度。
12. 行内元素:span、a、br
内联元素特点:
①、和其他元素都在一行上;
②、元素的高度、宽度及顶部和底部边距不可设置,左右边距可以设置; 可设置line-height
③、元素的宽度就是它包含的文字或图片的宽度,不可改变。
13. 内联-块状元素(inline-block):input、img、button
inline-block元素特点:
①、和其他元素都在一行上;
②、元素的高度、宽度、行高以及顶和底边距都可设置。
14. 空标签:br、img、input、link、meta
15. html5新增:canvas 、video、audio 、localStorage、sessionStorage 、websockt等
16.控制移动端缩放:<meta name="viewport" content="width=device-width, initial- scale=1.0,maximum-scale=1.0, user-scalable=no"/>
二、难点
1. doctype作用:声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档
2. 导入样式时link和@import区别:
区别1:link是HTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
区别3:link是HTML标签,无兼容问题;@import是在CSS2.1提出,低版本的浏览器不支持。
区别4:link支持使用Javascript控制DOM去改变样式;而@import不支持
3.script的defer和async
defer:异步下载并指示浏览器在文档解析后执行脚本,多个的话按代码顺序执行
async:异步加载并在异步执行,多个的话谁先加载完谁先执行
4.html的生命周期
DOMContentLoaded:只加载完了dom
load:不仅dom,连所有的外部资源例如css和图片等都加载完了
beforeunload:常用于提醒有未保存的操作
5.父窗口与iframe:
获取父子元素的dom:
父获得子
// 第一种方法
document.getElementById('iframeId').contentWindow.document.getElementById('子页中元素ID')
// 第二种方法
iframeName.window.document.getElementById('子页面中的元素ID')
// 第三种方法
window.frames["iframeName"].document.getElementById('子页面中的元素ID')
子获得父
parent.window.document.getElementById('父页面中的元素ID')
父子通信:
①:otherWindow.postMessage(message, targetOrigin, [transfer])
父发送消息
document.getElementById('child').contentWindow.postMessage("主页面消息", "http://b.com/iframepage.html")
子接收
window.addEventListener('message',function(event){
console.log(event);
document.getElementById('message').innerHTML = "收到"
+ event.origin + "消息:" + event.data;
}, false)
②:可以通过取巧,改变iframe的href后面的参数来给iframe通信