百度360必应搜狗淘宝本站头条
HTML APICSS 语法HTML5 支持CSS 谷歌字体HTML URL 编码
当前位置：网站首页 > 技术文章 > 正文

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

myzbx 2024-12-18 15:45 13 浏览

今天是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)”策略的原因所在。

相关推荐

Django零基础速成指南:快速打造带用户系统的博客平台

#python##服务器##API##编程##学习#不是所有教程都值得你花时间！这篇实战指南将用5分钟带你解锁Django核心技能，手把手教你从零搭建一个具备用户注册登录、文章管理功能的完整...

iOS 17.0 Bootstrap 1.2.9 半越狱来啦!更新两点

这款Bootstrap半越狱工具终于更新，离上一次更新已相隔很久，现在推出1.2.9版本，主要为内置两点功能进行更新，也是提升半越狱的稳定性。如果你正在使用这款半越狱工具的，建议你更新。注意！...

iOS 16.x Bootstrap 1.2.3 发布，支持运行清理工具

本文主要讲Bootstrap半越狱工具更新相关内容。如果你是iOS16.0至16.6.1和17.0系统的，想体验半越狱的果粉，请继续往下看。--知识点科普--Bootstrap...

SpringBoot整合工作流引擎Acticiti系统，适用于ERP、OA系统

今日推荐：SpringBoot整合工作流引擎Acticiti的源码推荐理由：1、SpringBoot整合工作流引擎Acticiti系统2、实现了三级权限结构3、持久层使用了mybatis框架4、流程包...

SpringCloud自定义Bootstrap配置指南

在SpringCloud中自定义Bootstrap配置需要以下步骤，以确保在应用启动的早期阶段加载自定义配置：1.添加依赖（针对新版本SpringCloud）从SpringCloud2020...

Python使用Dash开发网页应用(三)（python网页开发教程）

PlotlyDash开发Web应用示例一个好的网页设计通常都需要编写css甚至js来定制前端内容，例如非常流行的bootstrap框架。我们既然想使用Dash来搭建web应用，很大的一个原因是不熟悉...

Oxygen XML Editor 27.1 中的新功能

OxygenXMLEditor27.1版是面向内容作者、开发者、合作者和出版商的行业领先工具包的增量版本。在27.1版本中，AIPositronAssistant得到了增强，包括用于...

【LLM-多模态】Mini-Gemini:挖掘多模态视觉语言模型的潜力

一、结论写在前面论文提出了Mini-Gemini，一个精简而强大的多模态VLM框架。Mini-Gemini的本质在于通过战略性框架设计、丰富的数据质量和扩展的功能范围，发掘VLM的潜在能力。其核心是补...

谐云课堂 | 一文详解分布式改造理论与实战

01微服务与分布式什么是分布式？首先，我们对上图提到的部分关键词进行讲解。单体，是指一个进程完成全部的后端处理；水平拆分，是同一个后端多环境部署，他们都处理相同的内容，使用反向代理来均衡负载，这种也叫...

基于Abaqus的手动挡换挡机构可靠性仿真

手动挡，也称手动变速器，英文全称为Manualtransmission，简称MT，即用手拨动换挡操纵总成才能改变变速器内的齿轮啮合位置，改变传动比，从而达到变速的目的。家用轿车主要采用软轴连接的换挡...

【pytorch】目标检测:彻底搞懂YOLOv5详解

YOLOv5是GlennJocher等人研发，它是Ultralytics公司的开源项目。YOLOv5根据参数量分为了n、s、m、l、x五种类型，其参数量依次上升，当然了其效果也是越来越好。从2020...

超实用!50个非常实用的PS快捷键命令大全分享

今天，给大家介绍50个非常实用的快捷键命令大全，大家伙都是设计师，关于软件使用那是越快越好啊。一、常用的热键组合1、图层混合模式快捷键：正常(Shift+Option+N)，正片叠底(Shif...

Pohtoshop中深藏不露的小技巧（科目一考试技巧记忆口诀看完必过）

邢帅教育ps教程为大家总结了一些Pohtoshop中深藏不露的小技巧，可以帮助到大家在设计时减少不必要的麻烦，提高工作效率哦~~~1.设置网格线保持像素完美不在1:1分辨率下也能保持像素完美，可以...

Ganglia监控安装总结（监控安装工作总结）

一、ganglia简介：Ganglia是一个跨平台可扩展的，高性能计算系统下的分布式监控系统，如集群和网格。它是基于分层设计，它使用广泛的技术，如XML数据代表，便携数据传输，RRDtool用于数据...

谁说Adobe XD做不出好看的设计?那是你没搞懂这些功能

AdobeXD的美化栏具有将设计视图美化的功能，它能使界面设计和原型设计更漂亮、更吸引眼球。美化栏的7个功能包括竖线布局设计、横线布局设计、重复网格、图形大小和位置设置、响应式调整大小、文字美化以及...

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