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


目录
相关文章
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
3月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
68 6
|
3月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
88 5
|
3月前
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
3月前
|
缓存 安全 前端开发
构建高效Web应用的五大关键技术
【10月更文挑战第42天】在数字化浪潮中,Web应用已成为企业与用户互动的重要桥梁。本文将深入探讨提升Web应用性能和用户体验的五项核心技术,包括前端优化、后端架构设计、数据库管理、安全性增强以及API开发的最佳实践。通过这些技术的应用,开发者可以构建出更快、更稳定且更安全的Web应用,满足现代网络环境的需求。
|
3月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
84 3
|
2月前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南
|
3月前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
55 7
|
3月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
66 2
|
3月前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
158 62

热门文章

最新文章

  • 1
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 5
    详解智能编码在前端研发的创新应用
  • 6
    巧用通义灵码,提升前端研发效率
  • 7
    智能编码在前端研发的创新应用
  • 8
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 9
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 10
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 1
    Burp Suite Professional 2025.2 (macOS, Linux, Windows) - Web 应用安全、测试和扫描
    24
  • 2
    AppSpider Pro 7.5.015 for Windows - Web 应用程序安全测试
    19
  • 3
    【02】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-2月12日优雅草简化Centos stream8安装zabbix7教程-本搭建教程非docker搭建教程-优雅草solution
    54
  • 4
    部署使用 CHAT-NEXT-WEB 基于 Deepseek
    328
  • 5
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 6
    java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
    39
  • 7
    零基础构建开源项目OpenIM桌面应用和pc web- Electron篇
    28
  • 8
    【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
    20
  • 9
    FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
    53
  • 10
    springSecurity学习之springSecurity过滤web请求
    60