前端入门笔记
1 HTML5
一个典型的web网页，header常常出现在web页面的最上方，包含logo、网站名称、网站导航等信息；nav的作用是提供导航。
article是一个独立的内容快，可以看做是一个文章；section是一个内容区域或页面区域，和div相似，但不可以用作通用封装器。section和article可以互相嵌套。aside标记用于创建侧边栏。
footer元素常常位于web页面底部，包含作者、版权等数据。
Visual Studio Code（简称 VS Code）是一个由微软开发，同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器，编辑器中内置了扩展程序管理的功能。
https://code.visualstudio.com/
<html>
<head>
<!-- 字符集声明 -->
<meta charset="UTF-8">
<title>HTML5 </title>
<!-- js连接 -->
<script src="./javascript-file.js"></script>
<!-- css连接 -->
<link rel="stylesheet" href="./css-file.css">
</head>
<body>
<header>
<!-- 导航 -->
<nav>
<ul><li></li></ul>
</nav>
</header>
<section>
<!-- 独立内容 -->
<article></article>
<!-- 侧边栏 -->
<aside></aside>
</section>
<footer>
<small>© HTML 2020</small>
</footer>
</body>
</html>
HTML5流程图：
图片来自：http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.header{
height: 100px;
width: 1000px;
background-color: #66ccff;
}
.main{
width: 1000px;
margin: 5px 0px;
}
.left{
height: 500px;
width: 300px;
background-color: #66ccff;
float: left;
}
.right{
height: 500px;
width: 695px;
background-color: #ccf;
margin-left:5px;
float: left;
}
.footer{
height: 80px;
width: 1000px;
background-color: #66ccff;
margin-top:5px;
float: left;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
</html>
2 CSS3
2.1 引入CSS样式的三种方式
2.1.1 内嵌式
在style标签中书写CSS代码。style标签写在head标签中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内嵌式</title>
<style>
div{
width:100px;
height:100px;
background-color:#ff0000;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2.1.2 行内式
使用style属性引入CSS样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内式</title>
</head>
<body>
<div style="width:100px; height:100px; background-color:#0000ff"></div>
</body>
</html>
2.1.3 外链式
CSS代码保存在扩展名为.css的样式表中，HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外链式</title>
<link rel="stylesheet" href="01.css">
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外链式</title>
<style type="text/css">
@import url("01.css");
</style>
</head>
<body>
<div></div>
</body>
</html>
div{
width:100px;
height:100px;
background-color:#00ff00;
2.2 常用css样式
/* 高度 */
hight：xxpx；
/* 宽度 */
width：xxpx；
/* 字体 */
font-size: 100px;
font-family: 'Times New Roman', Times, serif;
font: italic bold 36px "楷体";
/* 简写不能乱序 */
/* 边框 */
/* 边框宽度 */
border-width
/* 边框类型 */
border-style
/* 边框颜色 */
border-color
border: 5px solid red;
三、引入JS的三种方式
3.1 行内JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内JS</title>
</head>
<body>
<body>
<input type="button" value="111" onclick="javascript:alert('111')">
<!--onclick:点击触发一个事件，alert：弹出一个对话框-->
</body>
</body>
</html>
3.2 外链JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外链</title>
<script src="01.js" type="text/javascript" ></script>
</head>
<body>
<div></div>
</body>
</html>
3.3 内嵌JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内嵌</title>
<script type="text/javascript">
//声明一个函数(整个文档都可以使用)
function surprise() {
alert('1')/*弹出框*/
}
</script>
</head>
<body>
<div></div>
</body>
</html>