我使用中英互译的方法来制作本次笔记，课程来自网上精品资源
VSCode相关快捷键
选择文件夹和拖拽文件夹来打开
使用！加enter（回车），输入默认模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>常用快捷键列表
1.代码格式化：Shift+Alt+F
2.将一行代码向上或下移动一行：Alt+Up或Alt+Down
3.快速复制一行代码：Shift+Alt+Up或Shift+Alt+Down
4.快速保存：Ctrl+S
5.快速查找：Ctrl+F
6.快速替换：Ctrl+H
HTML5 Tags and Syntax 标签和语法
1.Tags have a beginning and an end.
<h1>Hello World</h1>
< >:Start tag
</ >:Closing tag
<img src="x.gif"/>:Self-closing tag（自动关闭标签）
2.Display:block and inline 区块标签和内联标签
block:can take width and height
inline:can not take width and height(如换行符<hr>等)
3.Common Tags 常见标签
Headings(block):
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>
标题逐渐变小
Paragraphs(block):
<p>...</p>
段落中间只加入内联标签
Divs(block)
<div>...</div>
分区
Ordered lists
<ol>
<li> Item One</li>
<li> Item Two</li>
</ol>
UnOrdered lists
<ul>
<li> Item One</li>
<li> Item Two</li>
</ul>
Line breaks
<br>
自动关闭标签，换行
Images(inline)
<img src="myPicture.jpg" alt="Image of Jason"/>
src:Image filename
alt:Info for screen readers文件编辑器显示的内容（一种属性）
title:Diaplays on hover
class:Extra formatting(height,width,position,etc.)
4.Attributes 属性
Always specified in the start tag
Attribute come in name/value pairs.
下面展示含属性的标签
Some apply to any tag(万用属性，每个起始标签都可以放)
1.class
2.id
3.style
4.accesskey:a shortcut key to activate an element.(启用）
5.tabindex:the order elements will come into focus using the tab key.（进入顺序）
5.Special Entities 特殊符号
| If you want... | The use... |
|---|---|
| < | < |
| > | > |
| © | © |
| blank space |   |
| & | & |
Semantic Tags 语义标签
We need to design our pages
In the beginning there was div
<div> was a way to group related content together（组合内容）
<div class="header">...</div>（页眉）
<div class="section">...</div>
<div class="footer">...</div>（页脚）
<nav> is a section of page that links to other pages or to parts within the page.（导航）
Often found in the <header> tag.
示例：
<nav>
<ul>
<li><a href="#overview">Overview</a></li>
<li><a href="#history">History</a></li>
<li><a href="#development">Development</a></li>
<ul>
</nav><footer> is a section that contains info such as copyright data,related document,and links to social media.（页脚附录）
Typically at the bottom of the page,but not required.
<figure> more semantics than <img>（含更多语义）
Can include :
caption 图标签
multiple multi-media resources
Other New Tags
1.Structure Elements（结构元素，例如文章，摘要，章节）
article,aside,main,menuitem,summary,section
2.Form Elements（创建表单时使用）
datalist,keygen,output
3.Input Types（输入类型，例如弹出不同键盘）
color,data,email,list
4.Graphic Elements（画布等图形元素）
canvas,svg
5.Media Elements（媒体元素，可以放入电影和音乐等）
audio,embed,source,track,video
来自密歇根大学的英文课程，这是本人制作的英文笔记，供有需要复习的读者参考
这一部分比较基础，可以通过练习记忆
