技术 | 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=“”,这个是图片提示符,为了可以增加图片的可读信息。


目录
相关文章
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
56 6
|
2月前
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
74 5
|
2月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
70 3
|
2月前
|
缓存 安全 前端开发
构建高效Web应用的五大关键技术
【10月更文挑战第42天】在数字化浪潮中,Web应用已成为企业与用户互动的重要桥梁。本文将深入探讨提升Web应用性能和用户体验的五项核心技术,包括前端优化、后端架构设计、数据库管理、安全性增强以及API开发的最佳实践。通过这些技术的应用,开发者可以构建出更快、更稳定且更安全的Web应用,满足现代网络环境的需求。
|
3月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
217 3
|
2月前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
138 62
|
1月前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南
|
2月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
238 45
|
2月前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
45 7