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


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

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

相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
IMPYLH5 小时前
Python 的内置函数 reversed
笔记·python
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689976 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽7 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头7 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全8 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing8 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript