首页 > 其他分享 >HTML学习第三天:探索语义化标签与响应式设计

HTML学习第三天:探索语义化标签与响应式设计

时间:2023-12-24 21:31:35浏览次数:27  
标签:网页 标签 语义 响应 HTML 设计

在今天的HTML学习中,我进一步了解了语义化标签和响应式设计的重要性。

早上,我开始学习语义化标签。这些标签不仅可以定义网页的结构,还能为搜索引擎和辅助技术提供信息。例如,<header>标签用于定义页面的头部,<nav>标签用于定义导航菜单。这些标签不仅提高了代码的可读性,还有助于提高网页的可访问性。

午后,我开始了响应式设计的探索。响应式设计是一种使网页能够适应不同设备和屏幕尺寸的方法。通过使用媒体查询和弹性布局,我们可以使网页在不同的屏幕尺寸下呈现不同的样式。这让我意识到,作为前端开发者,我们需要考虑的不仅仅是页面的结构和内容,还要关注页面的可读性和用户体验。

为了实践响应式设计,我尝试为我的网页添加了一些媒体查询。我根据不同的屏幕尺寸,调整了元素的布局和样式。虽然一开始有些困难,但是在不断尝试和调试的过程中,我逐渐掌握了响应式设计的基本技巧。

今天的学习让我深刻认识到HTML不仅仅是构建网页的工具,更是一种艺术。通过使用语义化标签和响应式设计,我们可以创造出结构清晰、易于访问、用户体验良好的网页。

明天,我将继续深入学习HTML的其他高级特性,并尝试为我的网页添加更多的交互功能。我相信,只要不断学习和实践,我一定能够成为一名优秀的前端开发者。

标签:网页,标签,语义,响应,HTML,设计
From: https://blog.51cto.com/20214843/8957133

相关文章

  • 【论文精读#1】SPGAN-DA:用于领域自适应遥感图像语义分割的语义保留生成对抗网络
    作者:YanshengLi发表年代:2023使用的方法:无监督领域自适应(UDA)、GAN、ClassMix、边界增强来源:IEEETGRS方向:语义分割期刊层次:CCFB;工程技术1区;IF8.2文献链接:https://doi.org/10.1109/TGRS.2023.3313883LiY,ShiT,ZhangY,etal.SPGAN-DA:Semantic-Pres......
  • 前端学习笔记DAY3 HTML5基础(3)(b站pink老师)
    ​二.HTML标签6.表格标签1.1表格的主要作用表格不是用来布局页面的,而是用来展示数据的。1.2表格的基本语法<table><tr><td>单元格内的文字</td>...</tr>...</table>(1).<table></table>是用于定义表格的标签。(2).<tr></tr>标签用于定义表格中的行,必须嵌套在......
  • html表格的用法
    基本用法<!--border外边框最外面那一层width表格宽度height表格高度align布局center、right、left--><tablewidth="500px"height="400px"border="6"align="center"><!--表头默认会加粗、居中--><tr>......
  • html列表标签
    一、无序标签基本语法<ul><li>芊嵛</li><li>流年</li><li>依诺</li></ul>前面的符号设置方法一ul{/*去除none实心小圆点disc默认空心圆circle空心正方形square*/list-style:none;}方法二<!--......
  • obsidian dataview写年报:按标签分类汇总
    原文地址:https://www.cnblogs.com/liqinglucky/p/ob-dataview.html使用场景上次我们讲过用dataview写周报obsidiandataview写周报:统计一周内的文件-liqinglucky-博客园(cnblogs.com)。现在考虑另一个场景,年底要写年报,将一年的工作汇总。但通常不是像周报那样只是简单的罗......
  • HTML+CSS使用
    一、旋转太极图<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>旋转太极图</title>......
  • HTML学习第二天:深入探索与实践
    继昨天对HTML的初步了解之后,今天我进一步深入了这门语言的学习,对HTML有了更加全面和深入的认识。早上,我首先复习了昨天学习的基本元素,确保自己对这些基础知识掌握得扎实。然后,我开始学习一些更加高级的HTML元素和属性,如表格、列表、表单等。这些元素在网页设计中非常常见,掌握它们对......
  • HTML基础入门学习
    基本框架:HTML(HypertextMarkupLanguage)是一种用于创建网页结构的标记语言。下面是一个简单的HTML文档的基本结构和写法: <!DOCTYPEhtml> <htmllang="en"> <head>   <metacharset="UTF-8">   <metaname="viewport"content="width=device......
  • HTML对接PUSDN富文本编辑器 - 编辑文档
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>yuque编辑器</title> <linkrel="stylesheet"type="text/css" href="https://gw.alipayobjects.com/render/p/yuyan_npm/@......
  • HTML学习首日体验
    当我第一次接触到HTML,我的第一感觉是它像是一种神秘的代码,能够构建出我们日常浏览的五彩斑斓的网页。之前,我只是一个纯粹的互联网使用者,浏览着各种网页,从未想过背后的技术是如何实现的。现在,我踏出了了解这项技术的第一步。HTML的全称是超文本标记语言,是一种用于创建网页的标准标记......