百度360必应搜狗淘宝本站头条
HTML5 标签标签HTML5 标签 (已废弃)HTML 简介键盘快捷键
当前位置：网站首页 > 技术文章 > 正文

前端学习之路--重学开始 (一) 前端学习路线

zhezhongyun 2024-12-29 07:18 33 浏览

今天是2022年第一天，站在2022年的开始回首整个2021年并没有发现自己有很大的进步。2022年一定要行动起来，丰富自己。

2022年给自己定几个目标：

  1. 重新学习前端之路
  2. 搭建一个自己的博客网站 ---每周发送一至两篇文章记录自己重新学习前端之路
  3. 培养自己一个爱好
  4. 减肥
  5. 带老婆出去旅游一趟
  6. 每月读一本书

重学之路从HTML开始

HTML简介

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等 HTML历史上有如下版本： ①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。 ②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。 ③HTML 3.2：1997年1月14日，W3C推荐标准。 ④HTML 4.0：1997年12月18日，W3C推荐标准。 ⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。 ⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持 `

HTML 标记标签通常被称为 HTML 标签 (HTML tag) <标签>内容</标签>

HTML 元素包含了开始标签与结束标签，元素的内容是开始标签与结束标签之间的内容，元素属性是 HTML 元素提供的附加信息。

HTML基础结构

文档声明头

<!DOCTYPE html> 声明为 HTML5 文档

页面的根元素

<html> 元素是 HTML 页面的根元素

头部标记

<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。

浏览器标签名

<title> 元素描述了文档的标题，浏览器标签名，通常放到head里面

页面主体

<body> 元素包含了可见的页面内容

常见的标签

块级元素

块级元素只能出现在 <body> 元素内。

格式

默认情况下，块级元素会新起一行。

内容模型

一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。 HTML 标准中块级元素和行内元素的区别至高出现在 4.01 标准中。在 HTML5，这种区别被一个更复杂的内容类别 (en-US)代替。”块级“类别大致相当于 HTML5 中的流内容 (en-US)类别，而”行内“类别相当于 HTML5 中的措辞内容 (en-US)类别，不过除了这两个还有其他类别。

标签与描述

标签名

描述

address

联系方式信息

article (HTML5)

文章内容

aside (HTML5)

伴随内容

blockquote

块引用

dd

定义列表中定义条目描述

div

定义列表中定义条目描述

dl

文章内容

fieldset

表单元素分组

figcaption (HTML5)

图文信息组标题

figure (HTML5)

可附标题内容元素

footer (HTML5)

区段尾或页尾

form

表单

h1~h6

标题

header (HTML5)

页头

hgroup (HTML5)

标题组

hr

分割线

nav (HTML5)

导航

noframes

针对不支持框架的用户的替代内容

noscript

针对不支持客户端脚本的用户的替代内容

ol

有序列表

p

段落

section (HTML5)

一个页面区段

table

表格

tbody

表格中的主体内容

td

表格中的单元

tfoot

表格中的表注内容（脚注）

th

表格中的表头单元格

thead

表格中的表头内容

time

日期/时间

tr

表格中的行

ul

无序列表


行内元素

一般情况下，行内元素只能包含数据和其他行内元素。

格式

默认情况下，行内元素不会以新行开始，而块级元素会新起一行。

标签与描述

标签名

描述

a

锚

abbr

缩写

acronym

只取首字母的缩写

b

粗体

bdo

文字方向

big

大号文本

br

简单的折行

button

按钮 (push button)

cite

引用(citation)

code

计算机代码文本

command

命令按钮

dfn

项目

del

被删除文本

em

强调文本

embed

外部交互内容或插件

i

斜体字

img

图像

input

输入控件

kbd

键盘文本

label

input 元素的标注

map

图像映射

mark

有记号的文本

objec

内嵌对象

progress

任何类型的任务的进度

q

短的引用

samp

计算机代码样本

select

选择列表（下拉列表）

small

小号文本

span

文档中的节

strong

强调文本

sub

下标文本

sup

上标文本

textarea

多行的文本输入控件

time

日期/时间

tt

打字机文本

var

文本的变量部分

video

视频

wbr

可能的换行符

行内块元素

行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。

格式 默认情况下，行内元素不会以新行开始，能够识别宽高

标签与描述

标签名

描述

img

图片

input

输入框

textarea

多行文本

相互之间的转换

  1. 块级标签转换为行内标签：display:inline;
  2. 行内标签转换为块级标签：display:block;
  3. 转换为行内块标签：display：inline-block;

常?的meta标签

meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。

常用的meta标签：

  1. charset，用来描述HTML文档的编码类型：
<meta charset="UTF-8" >
  1. keywords，页面关键词：
<meta name="keywords" content="关键词" />
  1. description，页面描述：
<meta name="description" content="页面描述内容" />
  1. refresh，页面重定向和刷新：
<meta http-equiv="refresh" content="0;url=" />
  1. viewport，适配移动端，可以控制视口的大小和比例：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  1. 搜索引擎索引方式：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

相关面试题

HTML5有哪些更新

  1. 新增语义化标签：nav、header、footer、aside、section、article
  2. 音频、视频标签：audio、video
  3. 数据存储：localStorage、sessionStorage
  4. canvas（画布）、Geolocation（地理定位）、websocket（通信协议）
  5. input标签新增属性：placeholder、autocomplete、autofocus、required
  6. history API：go、forward、back、pushstate

移除的元素有

纯表现的元素：basefont，big，center，font, s，strike，tt，u;

对可用性产生负面影响的元素：frame，frameset，noframes；

对HTML语义化的理解

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。 语义化的优点如下：

  1. 有利于SEO，有利于搜索引擎爬虫；
  2. 增强了可读性，结构更加清晰，便于团队的开发与维护。

常?的meta标签有哪些

参考上文

行内元素有哪些？块级元素有哪些？

参考上文

head 标签有什么作用，其中什么标签必不可少？

head 标签用于定义文档的头部，它是所有头部元素的容器。 head 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。 文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 下面这些标签可用在 head 部分：base, link, meta, script, style, title 其中 title 定义文档的标题，它是 head 部分中唯一必需的元素。

DOCTYPE(?档类型) 的作?

DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚? JavaScript 脚本的解析。它必须声明在HTML?档的第??。 浏览器渲染页面的两种模式（可通过document.compatMode获取，比如，语雀官网的文档类型是CSS1Compat）：

  1. CSS1Compat：标准模式（Strick mode），默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。
  2. BackCompat：怪异模式(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。

src和href的区别

src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。

src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。 href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果在文档中添加

Canvas和SVG的区别

  1. SVG： SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。 其特点如下：
  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
  • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
  • 不适合游戏应用
  1. Canvas： Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。 其特点如下：
  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘 注：矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。

渐进增强和优雅降级之间的区别

  1. 渐进增强（progressive enhancement): 主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验。
  2. 优雅降级 (graceful degradation)： 一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。

两者区别：

  • 优雅降级是从复杂的现状开始的，并试图减少用户体验的供给；而渐进增强是从一个非常基础的，能够起作用的版本开始的，并在此基础上不断扩充，以适应未来环境的需要；
  • 降级（功能衰竭）意味着往回看，而渐进增强则意味着往前看，同时保证其根基处于安全地带。

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。 在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

“渐进增强”观点则认为应关注于内容本身。内容是建立网站的诱因，有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

相关推荐

不看必后悔!15个三星GoodLock隐藏小技巧~(上)

很多刚用三星手机的星粉们，一定对三星GoodLock这个宝藏App还不是很了解，今天就带大家一起详细去看看GoodLock这个大家族究竟有多少宝藏功能及成员呢？让我们一起来看看吧~由于Good...

惊魂幻象理智值监控WA!大字体+范围提示一目了然

一个WA助你轻松监控大幻象理智值，不再错过恢复时机这个WA用大字体实时同步我们的理智值下面的图标提示恢复宝珠的剩余次数上面的图标高亮则意味着我们在宝珠的恢复范围内我们可以将图标随意移动到适合自己观察的...

盘点十个超炫的jQuery插件（jquery插件是干什么的）

“DevExpress14.2新版发布会”即将推出。心动不如行动，赶快报名吧！我们期待与您相约。今天小编为大家搜罗了十个超酷的jQuery插件，这可以使你的网站界面更加友好。jQuery创造了令人难...

Google官方梳理，Android 多返回栈技术详解

用户通过系统返回按钮导航回去的一组页面，在开发中被称为返回栈(backstack)。多返回栈即一堆"返回栈"，对多返回栈的支持是在Navigation2.4.0-alpha0...

说三星手机系统不好用，因为没有玩明白三星，三星Diy功能超强大

都说三星手机系统不好用，其实真正用起来，挺好用的三星手机系统像块没打磨的玉，默认设置是基础款，用着普通。但你要是肯花点时间，它能变得特别顺手。关键就在一个叫GoodLock的工具，它是三星自家出的...

Sam Helper三星手机用户必装神器（三星手机必装app）

SamHelper这款软件集合了三星手机主题工具当前主题o主题路径o主题安装系统设置屏幕模式o状态栏o文件o频段o暗码Lock&LabsGoodLockoGalaxyLa...

外卖套餐搭配的探索和应用（外卖套餐搭配技巧）

本文系外卖美食知识图谱系列的第三篇文章，从技术层面我们会介绍外卖套餐搭配的技术方案，包括离线、实时的套餐搭配的迭代，套餐质量评估方案，同时会介绍套餐搭配的业务应用。1.背景让用户更方便快捷地选购到满...

用几行原生JS就可以实现丝滑的元素过渡效果

作者：ConardLi大家可以看下下面这个应用的页面切换体验，是不是很丝滑～做过体验优化的朋友应该都清楚，如果用原生的CSS或者JS动画去实现，想要实现出类似的效果，不会特别简单，而且也要考...

速腾车主RNS315固件及2016年6月地图升级详细教程

本来打算买个大众原厂的地图卡，后来在网上看其实不需要原厂地图卡也可以升级，于是开始在网上收集资料，开始天真的以为只要有密匙文件修改一下就可以免费升级了，其实最主要的还是破解的固件，不知道为什么，网上找...

学习一个母词act，一次解析一串关联、复合、衍生词族

首先形义解读一下act的原始意象，A是力量与行动的开始C是范围的覆盖T是目标目的的接触与刻度合在一起，行动行为艺术力量的复合行为以下是关于act的复合词、词根词缀衍生词及其变形后的词根衍生词的详细...

优迈系统(一体化控制柜)快车调试(八)

逻辑故障和驱动故障分析段码管上显示警告码和故障码对照表警告码操作模式故障码操作模式或驱动故障AL000EPC（紧急电源管制模式）ER100DTC（门在设定时间内不能关到位）AL001COR（复位模式）...

Layui简单实现左侧菜单和Tab选项卡动态操作

<!DOCTYPEhtml><html><head><metacharset="utf-8">...

码农如何快速打造一个有设计感的网站

像我这样的程序员来说经常被“设计”这个词吓到，因为我是一名程序员而不是设计师，我拥有的是计算机学位证，另外我对ComicSans字体并不介意。（注：ComicSans字体是Win95附带...

vue3 新特性 computed、watch、watchEffect 看完就会

1、watchEffectwatchEffect侦听器是一个副作用函数，不需要指定监听的某个属性，监视的回调中用到哪个属性，就会监听哪个属性，一旦运行就会立即执行。watchEffect与com...

10个冷门但非常实用前端开发者很少用的CSS规则

许多开发者只学了基础——比如修改颜色、设置字体或创建弹性布局——就止步不前。但CSS是一门精深而多用途的语言，掌握后能帮你构建优雅、高效且无障碍的界面。无论你是从零搭建还是微调设计系统，掌握一些高...

一周热门
最近发表
标签列表