html5教程———基础、重点和难点 前段大G > 首页 > 轮播图 >
一、基础
<!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通信
这篇html5教程———基础、重点和难点，文章就结束了，有不懂的地方可以联系站长。希望每个前端人员都有可以找到一个好工作，谢谢观看，祝您生活愉快。
2023-12-04 10:03
文章点击量：
作者：【前端大G】
文章标签：
html,培训,教程,—,HTML,基础,、,重点,和,难点
