技术 | Web前端开发(2)持续更新

简介: 接着​上一篇技术| Web前端开发(1)持续更新html常用标签:标签:  代码浏览器显示效果这里我们对比一下发现:标签和标签,以及标签和标签显示的效果是一样的。
img_d82fb2035a3672032a4eb1eb7fe99b11.png


接着​上一篇技术| Web前端开发(1)持续更新

html常用标签:

标签:  <b></b><i></i>

img_bb0d26f82e28510ce76fdd3629c76048.jpe
代码
img_5677428e9d5d40113df269e28220f490.jpe
浏览器显示效果

这里我们对比一下发现:

标签和标签,以及标签和标签显示的效果是一样的。那么有什么区别呢,回答是没有区别,哪个好记用哪个,比如很多人习惯用word,那么肯定知道b就是加粗,但是现在html更趋进去语义化,从表面意思就可以看出来是加粗的意思,也是极为容易记住的。

标签:<del></del>

img_e90a994e7fed16faa31bacc763500ff0.jpe
代码

img_d9b75f36e901fdba39f6b7e879a498a8.jpe
浏览器显示效果

​通过浏览器中显示,我们可以看到:标签可以在文字上显示出横线删除效果,比如某电商网站三星手机原价6888,现价多少多少。但是,这里会有这么一个问题,就是编程越界。咱们的html就是用来结构化代码,样式用css,但是这里html标签越界了。这样就没办法让我们的html和css分离。所以就有了css:style那一行代码,同样可以实现。我们后面会讲css。

标签:&;      <>

img_592808c7f203c29c9e65c612aadee31d.jpe
代码

img_53063e55a58ea436580018f37e206969.jpe
浏览器中显示效果

我们可以看到,我在代码里打了很多个空格,可是在浏览器中显示出来的仅仅只有一个空格,这是为什么呢,当然不是因为没用谷歌或者火狐浏览器导致的,这个空格在代码中表示的含义是文字分割符,因此无论在代码中打了多少的空格,浏览器都只能分割字符。那么要怎么才能在代码中打出空格的效果来呢?再看下面代码:

img_e1b4db833e56d7d851ee66245194b2f9.jpe
代码

img_6a3eedb469589de97afef51447c99d39.jpe
浏览器中显示效果

​我们可以看到,通过 ;可以实现空格的效果,同时这里的代码中还出现了<和>  它们分别代表小于号和大于号,因为小于号和大于号在html代码中是标签的一部分,因此不能直接使用,要用代码转译。

同时,上面的代码中还出现了<br>,注意,<br>是单标签,它的作用是换行。

​标签:<ol></ol>  <li></li>

我们先写代码,看一下在浏览器中的效果:

img_1baf7811a9622bfa2d2d8acce61b472b.jpe
代码

img_c971644edae90dfb45257103036b6414.jpe
浏览器中显示效果


不难看出,这是一个列表标签。并且是有序列表,很明显,前面有数字嘛!

img_8fbd6d128b982a2ef8d7858953bf230e.jpe
代码
img_56be67d15e4ed268dc61141d0b4964c1.jpe
浏览器中显示效果

中有type=""这个属性,中间可以写上a,这个时候,浏览器中就显示为a,b,c这种字母小标。

当然有人会问,能不能让排序倒着,我们可以在type后再加上:reversed="reversed"​;就可以了。这时候总有好事网友会问,那能不能让排序方式从2或者3开始,我不想从1开始。这时候,我告诉你,当然可以的!只要在type属性后加上:start="2";  这个时候排序方式就可以从2开始了

​标签:<ul></ul>  <li></li>

img_d7b2b9eb1f23eb9e2a98fbe31663dae7.jpe
代码

img_2abca107000e84fa45b7e635c35cc758.jpe
浏览器中显示效果

不难看出,这个也是一个列表,只是变成了无序的,那么它有属性么?当然是有的,

type=“spuare”带上这个属性时,前面的黑色圆圈就变成了正方形的方块。当然,你还可以换成空形圆。但是,你想在网站中看到这样丑的方式,恐怕也是很难的,那么有没有用呢,当然没用。但是,往往越没有用的东西,越是很重要。

为什么说无序列表很重要,下面来具体解释一下。几乎每个网站都有<ul></ul>    <li></li>
,那么它们在哪儿呢?不卖关子了,网站的导航栏几乎都是这玩意做到。后面我们在写网站导航栏的时候会具体讲到怎么用它来写网站导航栏。(因为还没有讲css,所以后面再讲)

标签:<img src="">

<img src="">是一个单标签,代表意思是图片,后面的属性src是指向图片路径,用来引入图片。

路径有三种:第一种是网站上的url,第二种是本地的相对路径,第三种是本地的绝对路径。

<img>还有两个属性,alt="",这是为了占位用的,比如当网页加载不出来图片时(图片丢失),会实现占位功能,还有一个属性叫title=“”,这个是图片提示符,为了可以增加图片的可读信息。


目录
相关文章
|
9天前
|
编解码 前端开发 JavaScript
构建高效响应式Web界面:现代前端框架的比较
【4月更文挑战第9天】在移动设备和多样屏幕尺寸盛行的时代,构建能够适应不同视口的响应式Web界面变得至关重要。本文深入探讨了几种流行的前端框架——Bootstrap、Foundation和Tailwind CSS,分析它们在创建响应式设计中的优势与局限。通过对比这些框架的栅格系统、组件库和定制化能力,开发者可以更好地理解如何选择合适的工具来优化前端开发流程,并最终实现高性能、跨平台兼容的用户界面。
|
10天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
11天前
|
编解码 前端开发 JavaScript
Web 前端开发中的最佳实践
本文将介绍 Web 前端开发中的最佳实践,包括代码组织、性能优化、响应式设计和用户体验等方面。通过遵循这些实践,开发人员可以提高开发效率,优化用户体验,并减少潜在的问题和错误。
|
3天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
13 1
|
4天前
|
前端开发 JavaScript vr&ar
前端新技术探索:WebAssembly、Web Components与WebVR/AR
【4月更文挑战第12天】WebAssembly、Web Components和WebVR/AR正重塑Web应用的未来。WebAssembly允许C/C++等语言在Web上高效运行,提供接近原生的性能,如游戏引擎。Web Components通过Custom Elements和Shadow DOM实现可复用的自定义UI组件,提升模块化开发。WebVR/AR(现WebXR)则让VR/AR体验无需额外应用,直接在浏览器中实现。掌握这些技术对前端开发者至关重要。
11 3
|
6天前
|
前端开发 算法 JavaScript
如何优化前端性能:探索图片压缩与延迟加载技术
本文深入探讨了前端性能优化中的关键问题:图片压缩与延迟加载技术。通过介绍图片压缩的原理和方法,并结合实例说明了如何有效减少图片大小、提升加载速度;同时,详细解析了延迟加载技术的实现原理及其在提高页面加载性能中的作用,为前端开发者提供了实用的优化方案。
|
15天前
|
监控 JavaScript 前端开发
《理解 WebSocket:Java Web 开发的实时通信技术》
【4月更文挑战第4天】WebSocket是Java Web实时通信的关键技术,提供双向持久连接,实现低延迟、高效率的实时交互。适用于聊天应用、在线游戏、数据监控和即时通知。开发涉及服务器端实现、客户端连接及数据协议定义,注意安全、错误处理、性能和兼容性。随着实时应用需求增加,WebSocket在Java Web开发中的地位将更加重要。
|
25天前
|
Web App开发 前端开发 开发工具
介绍Web开发的基础知识
介绍Web开发的基础知识
26 7
|
1月前
|
存储 资源调度 应用服务中间件
浅谈本地开发好的 Web 应用部署到 ABAP 应用服务器上的几种方式
浅谈本地开发好的 Web 应用部署到 ABAP 应用服务器上的几种方式
24 0
|
1月前
|
存储 前端开发 JavaScript
从前端到后端,探索现代Web开发技术
本文探索了现代Web开发技术的各个方面,包括前端和后端开发以及多种编程语言的应用。通过对JavaScript、Java、Python、C、PHP和Go等语言的介绍,深入探讨了前端和后端开发的基本原理和常用工具。同时,还涵盖了数据库技术在Web开发中的重要性和应用场景。无论你是初学者还是有经验的开发者,本文都能为你提供全面的视角和实用的知识,帮助你在Web开发领域取得更好的成果。