HTML5入门笔记

我使用中英互译的方法来制作本次笔记,课程来自网上精品资源


VSCode相关快捷键

选择文件夹和拖拽文件夹来打开

使用!加enter(回车),输入默认模板

cpp 复制代码
<!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...
< &lt
> &gt
© &copy
blank space &nbsp
& &amp

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.

示例:

html 复制代码
<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


来自密歇根大学的英文课程,这是本人制作的英文笔记,供有需要复习的读者参考

这一部分比较基础,可以通过练习记忆

相关推荐
li35741 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj1 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel2 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel2 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
梁小憨憨2 小时前
zotero扩容
人工智能·笔记
Hello_Embed3 小时前
STM32HAL 快速入门(十九):UART 编程(二)—— 中断方式实现收发及局限分析
笔记·stm32·单片机·嵌入式硬件·学习
西陵3 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld3 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
笑鸿的学习笔记3 小时前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5