共计 1919 个字符,预计需要花费 5 分钟才能阅读完成。
我使用中英互译的方法来制作本次笔记,课程来自网上精品资源
VSCode 相关快捷键
选择文件夹和拖拽文件夹来打开
使用!加 enter(回车),输入默认模板
Document
常用快捷键列表
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.
Hello World
:Start tag
>:Closing tag
:Self-closing tag(自动关闭标签)
2.Display:block and inline 区块标签和内联标签
block:can take width and height
inline:can not take width and height(如换行符
等 )
3.Common Tags 常见标签
Headings(block):
,
,
,
,
,
,
,
,
,
标题逐渐变小
Paragraphs(block):
…
段落中间只加入内联标签
Divs(block)
分区
Ordered lists
- Item One
- Item Two
UnOrdered lists
- Item One
- Item Two
Line breaks
自动关闭标签,换行
Images(inline)
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
was a way to group related content together(组合内容)…(页眉)
…(页脚)
is a section of page that links to other pages or to parts within the page.(导航)
Often found in the
tag. 示例:
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.
more semantics than (含更多语义)
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
来自密歇根大学的英文课程,这是本人制作的英文笔记,供有需要复习的读者参考
这一部分比较基础,可以通过练习记忆
原文地址: HTML5 入门笔记