首页 > 前端开发 > 正文

web前端开发html标签 web前端学习HTML的格式标记都有哪些?

2023-09-18 07:41:37 | 我爱编程网

今天,我爱编程网小编为关注前端开发的同学们准备了web前端开发html标签 web前端学习HTML的格式标记都有哪些?,下面一起来看一下吧。

web前端开发html标签 web前端学习HTML的格式标记都有哪些?

web前端中html,css和JavaScript这三个的关系是怎么样的?

我们说,Web前端三剑客:HTML、CSS、JavaScript,它们看上去是三种不同的技术,但在实际中却是相互搭配使用的。

HTML是用来标记内容的(重在内容组织上)

HTML是超文本标记语言的简称,它是一种不严谨的、简单的标识性语言。它用各种标签将页面中的元素组织起来,告诉浏览器该如何显示其中的内容。

为什么说HTML是不严谨的呢?因为HTML标签即使不闭合,也并不会影响页面内容的组织。

CSS是用来修饰内容样式的(重在内容样式美化展示上)

CSS是层叠样式表的简称,它用来表现HTML文件样式的,简单说就是负责HTML页面中元素的展现及排版。

JavaScript是用来做交互的

JavaScript是一种脚本语言,即可以运行在客户端也能运行在服务器端。JavaScript的解释器就是JS引擎,JS引擎是浏览器的一部分。而JavaScript主要是用来扩展文档交互能力的,使静态的HTML具有一定的交互行为(比如表单提交、动画特效、弹窗等)。

HTML与CSS及JS的关系

这三者99%的情况下都是搭配使用的,但也不是绝对的,具体关系是:

HTML与CSS、JS是不同的技术,可以独立存在;

HTML一般需要CSS和JS来配合使用,否则单一HTML文档无论是功能还是展示上效果都不理想;

CSS一般是不能脱离HTML或XML的,如果CSS脱离了HTML和XML,那就没有存在的必要的;

JS可以脱离HTML和CSS而独立存在;

JS可以操作HTML和CSS。

总结:如果把HTML比做身体,那CSS就好比是衣服,而JavaScript则意味着人能做的一些高级动作。

以上就是我的观点,对于这个问题大家是怎么看待的呢?欢迎在下方评论区交流~我是科技领域创作者,十年互联网从业经验,欢迎在线咨询

web前端开发html标签 web前端学习HTML的格式标记都有哪些?

HTML是什么意思?

HTML简单理解,他就是一个网页文件

详细一点:

HTML是用来描述网页的一种语言。

HTML指的是超文本标记语言 (Hyper Text Markup Language)

HTML不是一种编程语言,而是一种标记语言 (markup language),标记语言是一套标记标签 (markup tag)

HTML使用标记标签来描述网页

HTML文档 = 网页

HTML文档描述网页

HTML文档包含 HTML 标签和纯文本

HTML文档也被称为网页

Web浏览器的作用是读取 HTML文档,并以网页的形式显示出它们。浏览器不会显示 HTML标签,而是使用标签来解释页面的内容:

<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>

这个就是一个简单的网页,是HTML做的网页,所以HTML就是网页!

上述代码解释:

<html> 与 </html> 之间的文本描述网页

<body> 与 </body> 之间的文本是可见的页面内容

<h1> 与 </h1> 之间的文本被显示为标题

<p> 与 </p> 之间的文本被显示为段落

HTML标签是由尖括号包围的关键词,比如 <html>

HTML标签通常是成对出现的,比如 <b> 和 </b>

标签对中的第一个标签是开始标签,第二个标签是结束标签,开始和结束标签也被称为开放标签和闭合标签!

HTML是web前端工程师必须要学的

HTML和CSS还有JavaScript都是前端必学的,学完这三个还要学框架,例如:vue.js、jQuery、react、node、es6、mysql、backbone、angular.js等等框架都是做前端工程师需要学习的!

web前端的发展方向及前景

web前端的发展方向就是做网页,不管是电脑看到的网页,还是手机浏览的网页都是前端做的,现在是互联网高速发展的时间,很多企业都在线下转线上,那么他想在线上有一个好的平台就需要前端为他搭建一个平台,2016年前端被称呼为最有发展的程序工程师的行业!

web前端的学习路线:

学好前端不容易,前端一开始需要学HTML和CSS做为基础,掌握了HTML和CSS,会写静态页面后就是继续学JavaScript,有了HTML和CSS为基础,学JavaScript是快速的,当然自学肯定会遇到问题,自己学得自己自学速度慢,效率不高,自控能力不强等等问题,那可以的报班学,系统学习比自学快更加容易快速掌握前端技术,那么这个班在哪里找呢? 我给大伙退键一个学习的新手叩群,号一开始是66壹,然后就是473,最后面的也就是一零八,加起来一起就可以了,前端学习不易,不是真心的就不要来了!前端学完前面的HTML和CSS还有JavaScript,就到前面我刚刚说的前端框架,ue.js、jQuery、react、node、es6、mysql、backbone、angular.js等等框架都是做前端工程师需要学习的!

入门

在我理解下的基础知识,就是我们可以写一些基本的样式,并能对页面的元素进行操作。举例来说,就是我们用Spring和JSP写了一个博客,然后我们可以用jQuery来对页面进行一些简单的操作,并可以调用一些API。因此,我们需要基本的HTML / CSS知识。只是要写好CSS并不是一件简单的事,这需要很多实战经验。随后,我们还需要有JavaScript的经验,要不怎么做前端呢?

同时,我们还需要对DOM有一些基础的了解,才能做一些基本的操作,如修改颜色等等。在这种情况下,最简单的方案就是使用jQuery这样的工具。不过,如果可以自己操作DOM是再好不过的了。

中级篇

中级篇就更有意思了,现在我们就需要对页面进行更复杂的操作。Ajax和JSON这两个技能是必须的,当我们要动态的改变页面的元素时,我们就需要从远程获取最新的数据结果。并且我们也需要提交表单到服务器,RESTful就是必须要学会的技能。未来我们还需要Fetch API,ReactiveX这些技能。

除此我们还需要掌握好HTML的语义化,像DIV / CSS这也会必须会的技能,我们应该还会使用模板引擎和SCSS / SASS。而这个层面来说,我们开始使用Node.js来完成前端的构建等等的一系列动作,这时候必须学会使用命令行这类工具。并且,在这时候我们已经开始构建单页面应用了。

高级篇 我爱编程网

JavaScript是一门易上手的语言,也充满了相当多的糟粕的用法。几年前人们使用CoffeeScript编成成JavaScript来编写更好的前端代码,现在人们有了ES6、TypeScript和WebPack来做这些事。尽管现在浏览器支持不完善,但是他们是未来。同样的还有某些CSS3的特性,其对于某些浏览器来说也是不支持的。而这些都是基于语言本来说的,要写好代码,我们还需要掌握面向对象编程、函数式编程、MVC / MVVM / MV*这些概念。作为一合格的工程师,我们还需要把握好安全性(如跨域),做好 授权(如HTTP Basic、JWT等等)。

工程化

这个标题好像是放错了,这部分的内容主要都是自动构建的内容。首先,我们需要有基本的构建工具,无论你是使用gulp、grunt,还是只使用npm,这都不重要。重要的是,你可以自动化的完成构建的工具,编译、静态代码分析(JSLint、CSS Lint、TSLint)、对代码质量进行分析(如Code Climate,可以帮你检测出代码中的Bad Smell)、运行代码中的测试,并生成测试覆盖率的报告等等。这一切都需要你有一个自动构建的工作流。

兼容性

虽然我们离兼容IE6的时代已越来越远了,但是我们仍然有相当多的兼容性工作要做。基本的兼容性测试就是跨浏览器的测试,即Chrome,IE,Firefox,Safari等等。除此还有在不同的操作系统上对同一浏览器的测试,某些情况下可能表现不一致。如不同操作系统的字体大小,可能会导致一些细微的问题。

而随着移动设备的流行,我们还需要考虑下不同Android版本下的浏览器内核的表现不致,有时候还要一下不成器的Windows Phone。除此,还有同一个浏览器的不同版本问题,常见于IE。

前端特定

除了正常的编码之外,前端还有一些比较有意思的东西,如CSS3和JavaScript动画。使用Web字体,可惜这个不太适合汉字使用。还有Icon字体,毕竟这种字体是矢量的。不过Icon字体还有一些问题,如浏览器对其的抗锯齿优化,还有一个痛是你得准备四种不同类型的字体文件。因此,产生了一种东西SVG Sprite,在以前这就是CSS Sprite,只是CSS Sprite不能缩放。最后,我们还需要掌握一些基本的图形和图表框架的使用。

软件工程

这一点上和大部分语言的项目一样,我们需要使用版本管理软件,如git、svn,又或者是一些内部的工具。总之你肯定要有一个,而不是zip这种文件。然后,你还需要一些依赖管理工具,对于那些使用Webpack、Browserify来将代码编写成前端代码的项目来说,npm还是挺好用的。不过就个人来说,对于传统的项目来说我总觉得bower有些难用。我们还需要模块化我们的源码文件,才能使其他人更容易开始项目。

调试

作为一个工程师来说,调试是必备的技能。大部分浏览器都自带有调试工具,他们都不错——如果你使用过的话。在调试的过程中,直接用Console就可以输出值、计算值等等。如果你的项目在构建的过程中有一些问题,你就需要debugger这一行代码了。

在一些调用远程API的项目里,我们还需要一些更复杂的工具,即抓包工具。在调试移动设备时,像Wireshark、Charles这一类的工具,就可以让我们看到是否有一些异常的请求。当然在这个时候,还有一个不错的工具就是像Chrome自带的远程设备调试。对于移动网站来说,还要有Responsive视图。

测试

我遇到的很多前端工程师都是不写测试的,于是我便把它单独地抽了出现。对于一个前端项目来说,正常情况下,我们要有单元测试、功能测试,还有要一些UI测试来验证页面间是否可以跳转。对于依赖于第三方服务的应用来说,还要有一个Mock的服务来方便我们测试。如果是前后端分离的项目,我们还需要有集成测试。

性能与优化

要对Web应用进行性能优化,可能不是一件容易的事,有时候我们还知道哪些地方可以优化。这时候人们就可以使用Yahoo的YSlow,或者我最喜欢的Google PageSpeed来检测页面的一些问题,如有没有开启GZip、有没有压缩、合并、Minify JS代码等等。

我们还应该借助于NetWork这一类的工具,查看页面加载时,一些比较漫的资源文件,并对其进行优化。在一些情况下,我们还需要借助如Chrome的Timline、Profiel等工具来查看可以优化的地方。

设计

前端工程师还需要具备基本的UI技能。多数情况下拿到的只是一张图,如果是一个完整的页面,我们就需要快速分割页面布局。而依赖于不同的页面布局,如响应式、网格、FlexBox布局也会有不同的设计。而有些时候,我们就需要自己规划,制作一个基本的线框图(Wireframe)等等。

SEO

如果以搜索引擎作为流量来源,我们还需要考虑页面的内容,除非你用的是竞争排名。像Sitemap可能就不是我们考虑的内容,而我们还要考虑很多点。首先,我们需要保证页面的内容是对于搜索引擎是可见的,并且对应的页面还要有基本的Title、Description和Keyword。然后在一些关键的字体,如栏目标题等等可以用H2之类的大字的地方就不要放过。同时在页面设计的过程中,我们还需要考虑一些内部链接的建设。

它即可以提供页面的可见度,又可以提高排名。最后,如果你是面向的是Google等支持结构化数据的搜索引擎,你还需要考虑一下MicroData / MicroFormat这一类东西。

web前端开发html标签 web前端学习HTML的格式标记都有哪些?

web前端学习HTML的格式标记都有哪些?

  1. <br>:换行标记,让后面的信息显示在下一行

  2. <p>:段落标记

  3. <center>:居中标记,让段落或者文字相对于父标记居中显示

  4. <pre>:预格式化标记

  5. <li> :列表项目标记,每一个列表使用一个<li>标记

  6. <ul>:无序列表标记

  7. <ol>:有序列表标记

  8. <hr>:水平分割线标记

  9. <div>:分区显示标记,也称为层标记

  10. <!--->:注释标记,定义注释。

以上就是HTML常用的格式标记。望采纳!

以上就是我爱编程网小编为大家带来的web前端开发html标签 web前端学习HTML的格式标记都有哪些?,希望对大家有帮助,了解更多相关资讯请关注我爱编程网。
与“web前端开发html标签 web前端学习HTML的格式标记都有哪些?”相关推荐
web前端开发的表格标签 web前端学习HTML的格式标记都有哪些?
web前端开发的表格标签 web前端学习HTML的格式标记都有哪些?

前端开发如何实现横纵均有表头1、HTML中创建表格,使用thead标签定义横向表头,th标签定义纵向表头。2、使用CSS样式设置表头的外观。3、使用JavaScript实现表头的固定功能,通过position属性将表头固定在页面中的位置。web前端学习HTML的格式标记都有哪些?&lt;br&gt;:换行标记,让后面的信息显示在下一行&lt;p&gt;:段落标记

2023-09-25 04:24:28
web前端开发常用标签 web前端学习HTML的格式标记都有哪些?
web前端开发常用标签 web前端学习HTML的格式标记都有哪些?

web前端学习HTML的格式标记都有哪些?&lt;br&gt;:换行标记,让后面的信息显示在下一行&lt;p&gt;:段落标记&lt;center&gt;:居中标记,让段落或者文字相对于父标记居中显示&lt;pre&gt;:预格式化标记&lt;li&gt;:列表项目标记,每一个列表使用一个&lt;li&gt;标记&lt;ul&gt;:无

2023-09-10 12:28:26
web前端开发有几种标签 web前端学习HTML的格式标记都有哪些?
web前端开发有几种标签 web前端学习HTML的格式标记都有哪些?

小白转行学前端需要学什么?求大神指导!!对于零基础的小白,小蜗这里整理了一份web前端系统的学习路线,不知道如何学习的可参照这份大纲进行学习规划:第一阶段:专业核心基础阶段目标:1.熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。2.熟练运用HTML+CSS特性完成页面布局。4.熟练应用CSS3技术,动画、弹性盒模型设计。5.熟

2023-09-23 12:07:59
web前端开发中定义图像标记 web前端学习HTML的格式标记都有哪些?
web前端开发中定义图像标记 web前端学习HTML的格式标记都有哪些?

web前端img是什么标签?img标签定义HTML页面中的图像,标签有两个必需的属性:src和alt,图像并不会插入HTML页面中,而是链接到HTML页面上。作用:向网页中嵌入一幅图像。说明:&lt;img&gt;标签并不会在网页中插入图像,而是从网页上链接图像。&lt;img&gt;标签创建的是被引用图像的占位空间。&lt;img&gt;标签有两个必需的属性:src属性和alt属性

2023-10-14 08:31:37
web前端开发中换行 web前端学习HTML的格式标记都有哪些?
web前端开发中换行 web前端学习HTML的格式标记都有哪些?

转行学习web前端很难,那到底是自学还是应该去培训?关于这个问题,其实我们更应该关注的是自身。我一直都特别佩服那些自学成才的人,并且我也认为他们是真的值得学习的。并且,大量的大神证明,靠看书、查资料、自学是完全可以成为很牛逼的人的。但是,自学枯燥、无人点播、知识不系统、走弯路、难坚持等等这些一系列的障碍,又有几人能克服?所以培训就有了必要,我认为培训机构和义务教育在

2023-09-13 21:51:25
web前端开发的图像标签 web前端学习HTML的图像标记有哪些?
web前端开发的图像标签 web前端学习HTML的图像标记有哪些?

web前端开发需要掌握哪些知识?一.基础学习主要就是html、css、JavaScript。建议直接从html5、css3、ES5入手进行来学习。由于该部分是web前端开发中的基础部分,因此建议大家基础一定要打牢固。二.与美工相关、后端开发、设计相关的学习优秀的web前端开发工程师,将熟知自己工作界面的各种布局。因此,这也将是你工作中的重点。根据公司的不同,大家可扩大知识面,加

2023-10-03 01:38:29
web前端开发网页如何分区 web前端学习HTML的格式标记都有哪些?
web前端开发网页如何分区 web前端学习HTML的格式标记都有哪些?

web前端学习HTML的格式标记都有哪些?&lt;br&gt;:换行标记,让后面的信息显示在下一行&lt;p&gt;:段落标记&lt;center&gt;:居中标记,让段落或者文字相对于父标记居中显示&lt;pre&gt;:预格式化标记&lt;li&gt;:列表项目标记,每一个列表使用一个&lt;li&gt;标记&lt;ul&gt;:无

2023-10-09 10:11:19
Web前端开发表格代码 web前端学习HTML表格的属性标记有哪些?
Web前端开发表格代码 web前端学习HTML表格的属性标记有哪些?

web前端学习HTML表格的属性标记有哪些?HTML表格的基本结构包括&lt;table&gt;、&lt;caption&gt;、&lt;tr&gt;、&lt;td&gt;、&lt;th&gt;等标记1:&lt;table&gt;标记有以下属性①width属性:表示表格的宽度②height属性:表示表格的高度③border属性:表示表格外边框的宽度④align属性表示表格

2023-09-27 03:23:19