菜鸟教程
刷题内容：
freecodecamp：https://chinese.freecodecamp.org/learn/?messages=success%5B0%5D%3Dflash.signin-success（免费）
强烈安利freecodecamp，因为该网站除了前端以外，还有信息安全相关的知识！！！
内容
img图像标签（src，alt，title，width，height）
表格（tr，th，td）
列表（有序无序自定义，ul，ol，li，dl，dt，dd）
table（input-label，select，textarea）
accesskey设置页面快捷键
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action=""></form>
username: <input type="text" name="username" accesskey="n">
<br>
password: <input type="password" name="pwd" accesskey="p">
</body>
</html>
这里直接按住alt+n和alt+p就可以快速定位
contenteditable
hidden
如果加上hidden属性，那么标签会被隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p contenteditable="true">test for a</p>
<br>
<br>
<p dir='rtl' hidden>test right -> left</p>
<p dir='ltr'>test left -> right</p>
</body>
</html>
插件中文，open in brower，auto rename tag，js-css-html
<!DOCTYPE html> //文档类型声明标签
<html lang="en"> //语言是英语
<head>
<meta charset="UTF-8"> //字符集是utf-8
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>prompt(1)</script>
</body>
</html>
<h1></h1> <h2></h2>
<p></p>
<br />
<link rel="stylesheet" type="text/css" href="style.css"></link>
1. 内联 <a style="xxxx">
2. link stylesheet，外联
3. @import导入
4. 之间欸在style标签里定义
<div></div>
<span></span>
<img src="" alt="test"/> //当图片显示不出来时，用alt后显示
type file 文件上传
标签
为搜索引擎定义关键词
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
注释
<!--test-->
标签 表格的头部区域、
标签 表格的主体区域. 这样可以更好的分清表格结构
1. input输入表单元素
2. select下拉表单元素
3. textarea 文本域元素
框架-frameset ,有cols和rows两个属性
-----------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<frameset>
<frame src="https://batmanfuture.cn/">
</frameset>
<body>
</body>
</html>
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
这里iframe框架直接嵌入
使用 iframe 来显示目标链接页面
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
--------------------------
1.https://player.bilibili.com/player.html?bvid=BV号
2.https://player.bilibili.com/player.html?aid=av号
在<iframe>s安全性方面，您可以*将服务器配置为发送适当的X-Frame-Options 标题，防止点击劫持，防止其他网站在其网页中嵌入您的内容
video标签
<video src="rabbit320.webm" controls>
<p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
这里video标签里，src是视频链接，可以是相对路径或者绝对路径，controls是允许回放，p标签是当我们加载视频失败时展示的内容
<video controls>
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
这里我们也可以把视频放在source标签里面，后面的type就是视频的格式
其他标签
width 和 height 定义了宽度和高度
autoplay 打开网页时会自动播放
loop 默认循环播放
poster 这个图像会在视频播放前显示
<video controls poster="/images/w3html5.gif">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
audio标签
JavaScript可以直接在HTML输出
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
JavaScript事件响应
当浏览器载入HTML文档，他就会成为document对象。document对象是html文档的根节点，可以使我们在脚本中对所有html页面中对所有元素进行访问。getElementById()是document中的一个方法document.getElementById()方法可返回对拥有指定 ID 的第一个对象的引用。如果没有指定 ID 的元素返回 null
<script>
function myFunction(){
x
}
</script>
<button type="button" onclick="myFunction()">点我</button>
JavaScript处理 HTML 样式
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.style.color="#ff0000"; // 改变样式
document.getElementById("demo").innerHTML = "hello world!";
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
URL - 统一资源定位器
http,https,ftp,file