HTML5入门笔记

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


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...
<&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.

示例:

<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


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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/771643.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

go的Job Scheduling

背景 司内线上服务有很多异步脚本,大量冗余代码,管理很不方便 急需一个美丽的框架,让代码变得美好 包 go get github.com/go-co-op/gocron/v2 介绍 gocron is a job scheduling package which lets you run Go functions at pre-determined intervals. 概念 Job Job封…

linux查看usb是3.0还是2.0

1 作为device cat /sys/devices/platform/10320000.usb30drd/10320000.dwc3/udc/10320000.dwc3/current_speed 或 /sys/class/udc/10320000.dwc3/current_speed 如下 high-speed usb2.0 super-speed usb3.0 2 作为host linux下使用以下命令查看 &#xff0c;如果显示 速率为…

python关于字符串基础学习

字符串 python字符串是不可改变的 Python不支持单字符类型&#xff0c;单字符也是作为一个字符串使用的。 字符串编码 python3直接支持Unicode,可以表示世界上任何书面语言的字符 python3的字符默认就是16位Unicode编码&#xff0c;ASCII是Unicode的子集 使用内置函数 ord()…

c++初步

作业&#xff1a; 定义自己的命名空间&#xff0c;其中有string类型的变量&#xff0c;再定义两个函数&#xff0c;一个函数完成字符串的输入&#xff0c;一个函数完成求字符串长度&#xff0c;再定义一个全局函数完成对该字符串的反转 #include <iostream> #include &…

MySQL数据库索引失效的常见情况

MySQL数据库索引失效的常见情况 01 索引失效负面后果 在MySQL数据库中&#xff0c;当索引失效时&#xff0c;可能会导致以下后果&#xff1a; 全表扫描&#xff1a;如果索引失效&#xff0c;MySQL 可能会选择执行全表扫描来检索数据&#xff0c;这将导致性能下降&#xff0c;…

vue2 配置@指向src

使用的是vue cli创建的项目。 1.安装 path 如果在 Node.js 环境中运行代码&#xff0c;path 模块默认是可用的&#xff0c;则不需要单独安装&#xff0c;否则输入下面命令安装path npm i path -S 2.找到vue.config.js文件&#xff1a; const { defineConfig } require(vu…

辽渤湾海现已加入2024第七届燕窝天然滋补品博览会

参展企业介绍 大连辽渤湾海产品有限公司&#xff0c;是一家主营海参、鲍鱼、海胆等大连海产品的加工和销售的综合型水产企业&#xff0c;拥有国内精良的整条加工流水线&#xff0c;拥有上千平米的现代化加工办公场地的现代化企业。现已发展成为大连海参产品的主导型深加工基地。…

SpringBoot 三种拦截http请求方式Filter,Interceptor和AOP

1 Filter Filter常被叫做过滤器&#xff0c;filter的调用周期大致如下 也就是说filter在servlet之前&#xff0c;没有办法在filter中获取springboot中的java bean对象。 Filter生命周期方法 init:在服务器启动后&#xff0c;会创建Filter对象&#xff0c;然后调用init方法。…

Leetcode第27题:移除元素

代码实现 class Solution:def removeElement(self, nums: List[int], val: int) -> int:ent_removeTruewhile(ent_remove):if val in nums:nums.remove(val)else:ent_removeFalsereturn len(nums)思路:重复判断列表中是否存在目标值&#xff0c;存在则删除&#xff0c;直到…

无货源违规又现,现在还能做抖音小店吗?无货源商家该怎么调整?

大家好&#xff0c;我是电商花花。 最近好像又有很多人的店铺被查无货源违规&#xff0c;店铺还被扣12分&#xff0c;也申诉不了。 如果想要长期的做下去&#xff0c;就不要秀那些花里胡哨的操作&#xff0c;也不要为了短暂的自然流量而进行违规操作&#xff0c;为什么你的店…

【网络爬虫】(1) 网络请求,urllib库介绍

各位同学好&#xff0c;今天开始和各位分享一下python网络爬虫技巧&#xff0c;从基本的函数开始&#xff0c;到项目实战。那我们开始吧。 1. 基本概念 这里简单介绍一下后续学习中需要掌握的概念。 &#xff08;1&#xff09;http 和 https 协议。http是超文本传输&#xf…

leetcode mt simple

Leetcode-MT-Simple 文章实际写于2021年&#xff0c;那个炎热的夏天。 Leet Code 美团题库简单类总结&#xff0c;题目按照解法可大致分为数学法、计数法、位运算、双指针法、字符串、哈希表、栈、递归/迭代、排序法、匹配法、记忆化法、二分法、分治法、摩尔投票法、前缀和、…

基于nodejs+vue家装一体化平台python-flask-django-php

提高现下家装一体化平台的准确度&#xff0c;同时降低经济波动带来的不良影响&#xff0c;希望本文能对广大学者的研究提供参考。 前端技术&#xff1a;nodejsvueelementui, Express 框架于Node运行环境的Web框架, 语言 node.js 框架&#xff1a;Express 前端:Vue.js 数据库&am…

喜获千万元价值补贴,探索 AI 领域新应用:Zilliz 全力支持 AI 初创企业

价值 1000 万元的大额补贴&#xff01;得到领先全行业的向量数据库团队支持&#xff01;尽享独家生态资源&#xff01;「Zilliz AI 初创计划」正式开启&#xff01; 「Zilliz AI 初创计划」是 Zilliz 面向 AI 初创企业推出的一项扶持计划&#xff0c;预计提供总计 1000 万元的 …

书生·浦语大模型实战营——两周带你玩转微调部署评测全链路

引言 人工智能技术的发展日新月异&#xff0c;其中大模型的发展尤其迅速&#xff0c;已然是 AI 时代最炙手可热的当红炸子鸡。 然而&#xff0c;大模型赛道对于小白开发者来说还是有不小的门槛。面对内容质量参差不齐的课程和实际操作中遇到的问题&#xff0c;许多开发者往往…

2核4g服务器能支持多少人访问?阿里云2核4g服务器在线人数

阿里云2核4G服务器多少钱一年&#xff1f;2核4G配置1个月多少钱&#xff1f;2核4G服务器30元3个月、轻量应用服务器2核4G4M带宽165元一年、企业用户2核4G5M带宽199元一年。可以在阿里云CLUB中心查看 aliyun.club 当前最新2核4G服务器精准报价、优惠券和活动信息。 阿里云官方2…

C++语言学习(三)—— 文件操作

目录 一、文件操作 1.1 打开文件 1.2 关闭文件 1.3 读取文件 1.4 写入文件 1.5 文件指针 1.6 文件状态 1.7 其他文件操作 二、文件操作函数 2.1 打开文件函数 2.2 关闭文件函数 2.3 写入文件函数 2.4 读取文件函数 2.5 读取一行函数 2.6 获取文件大小函数 2.7 …

Java监听器模式在实际中的应用

监听器模式是一种行为型设计模式&#xff0c;它允许对象之间通过监听和触发事件的方式实现解耦&#xff0c;提高代码的灵活性和可维护性。在监听器模式中&#xff0c;存在两类角色&#xff1a;事件源&#xff08;Event Source&#xff09;和监听器&#xff08;Listener&#xf…

【PCL】mac下安装PCL的安装与配置

【PCL】mac下安装PCL的安装与配置 PCL PCL官方文档 PCL&#xff08;Point Cloud Library&#xff09;是在吸收了前人点云相关研究基础上建立起来的大型跨平台开源C编程库&#xff0c;它实现了大量点云相关的通用算法和高效数据结构&#xff0c;涉及到点云获取、滤波、分割、配…

从静态到动态化,Python数据可视化中的Matplotlib和Seaborn

​​本文分享自华为云社区《Python数据可视化大揭秘&#xff1a;Matplotlib和Seaborn高效应用指南》&#xff0c;作者&#xff1a; 柠檬味拥抱。 安装Matplotlib和Seaborn 首先&#xff0c;确保你已经安装了Matplotlib和Seaborn库。如果没有安装&#xff0c;可以使用以下命令…