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


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

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

相关推荐
Summer不秃3 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰7 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye13 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm15 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x42 分钟前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚44 分钟前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生1 小时前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
baiduopenmap2 小时前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图