HTML基础、重点和难点

林剑河

已于 2022-04-07 10:49:08 修改

阅读量1.2k

点赞数 1

分类专栏：前端文章标签： html

于 2020-05-15 14:07:27 首次发布

本文链接：https://blog.csdn.net/ljhljh1/article/details/106135530

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

一、基础

<!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> 标签提供了元数据：

为搜索引擎定义关键词: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. 字符实体：&nbsp；表示空格， &copy：表示版权

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通信