【网页开发教程】基本标签1——文本与列表

front【网页开发教程】网页开发初探——从零开始编写你的第一个网页专栏网页开发教程_ZJ_Soft的博客-CSDN博客本章介绍几种常用的文本标签与列表标签并给出实例1.文本标签文本标签用于定义和格式化网页中的文本内容使其具有语义和结构。以下是常见的HTML文本标签及其用途定义结构h1到h6定义标题h1为最高级标题h6为最低级标题。实例h1一级标题/h1 h2二级标题/h2 h3三级标题/h3 h4四级标题/h4 h5五级标题/h5 h6六级标题/h6p定义段落用于包裹段落文本。实例p这是一个段落文本用于展示段落标签的用法。/pbr插入换行符强制文本换行。实例第一行文本br 第二行文本br 第三行文本hr插入水平分隔线用于内容分隔。实例p上面的内容/p hr p下面的内容/p格式化文本strong或b加粗文本strong表示重要性b仅样式加粗。实例strong重要内容/strong b加粗文本/bem或i斜体文本em表示强调i仅样式斜体。实例em强调内容/em i斜体文本/iu为文本添加下划线。实例u带下划线的文本/us或del删除线文本del表示删除的内容。实例s过时价格/s del已删除内容/delsup和sub分别表示上标和下标文本。实例asup2/sup bsup2/sup csup2/sup Hsub2/subO 是水的化学式语义化文本code表示代码片段通常以等宽字体显示。实例p使用 codeconsole.log()/code 在控制台输出信息。/ppre保留文本中的空格和换行常用于显示代码块。实例pre function hello() { console.log(Hello World!); return true; } /preblockquote和q引用文本blockquote用于长引用q用于短引用。实例blockquote p这是长引用内容通常用于引用大段的文字。/p /blockquote p网页说q这是一个短引用。/q/pabbr表示缩写可通过title属性提供完整解释。实例pabbr titleHyperText Markup LanguageHTML/abbr 是网页的基础语言。/pmark高亮显示文本通常为黄色背景。实例p请特别注意 mark这个重要信息/mark它会被高亮显示。/pkbd表示键盘输入通常用于表示用户需要按下的键。实例p按 kbdCtrl/kbd kbdC/kbd 复制选中的内容。/psamp表示程序或系统的示例输出。实例p程序运行后输出sampHello, World!/samp/pvar表示变量或数学表达式中的变量。实例p设变量 varx/var 的值为 10则 vary/var varx/var 5。/pdfn表示术语的定义实例通常用于首次定义术语。实例pdfnHTML/dfn 是一种用于创建网页的标准标记语言。/pcite表示作品如书籍、文章、电影等的标题引用。实例p我最喜欢的书是 cite《JavaScript高级程序设计》/cite。/p特殊字符在HTML中有一些字符不能直接键入否则会导致错误这时就需要转义。以下是一些常见的需要转义的HTML特殊字符及其对应的实体编码字符描述HTML实体编码示例小于号标签开始lt;lt;divgt;显示为div大于号标签结束gt;gt;spanlt;显示为span和号实体引用开始amp;ATamp;T显示为ATT双引号quot;quot;Helloquot;显示为Hello单引号或撇号apos;或#39;Itapos;s显示为Its不换行空格nbsp;Hellonbsp;World显示为Hello World©版权符号copy;copy; 2025显示为© 2025®注册商标符号reg;Microsoftreg;显示为Microsoft®™商标符号trade;Googletrade;显示为Google™€欧元符号euro;100euro;显示为100€£英镑符号pound;50pound;显示为50£¥日元/人民币符号yen;1000yen;显示为1000¥§章节符号sect;参见sect;1.2显示为参见§1.2¶段落符号para;注意para;3显示为注意¶3使用注意事项必须转义的字符、、、在属性值中必须转义否则会破坏HTML结构。推荐转义的字符在属性值中与需要保留空格时建议转义。特殊符号版权、商标等符号可以使用实体编码或直接输入Unicode字符。代码示例在HTML代码中显示HTML标签时必须转义lt;divgt;Hellolt;/divgt;2.列表标签列表标签用于在网页中创建各种类型的列表使内容更加结构化、易于阅读。HTML提供了三种主要的列表类型无序列表、有序列表和定义列表。无序列表Unordered List无序列表使用ul标签定义列表项使用li标签。列表项前通常显示为项目符号如圆点、方块等。基本语法ul li列表项1/li li列表项2/li li列表项3/li /ul实例ul li苹果/li li香蕉/li li橙子/li /ul显示效果苹果香蕉橙子有序列表Ordered List有序列表使用ol标签定义列表项同样使用li标签。列表项前显示为数字、字母或罗马数字等有序标记。基本语法ol type... li第一步/li li第二步/li li第三步/li /ol实例ol type1 li准备食材/li li清洗食材/li li切配食材/li li烹饪食材/li /ol显示效果准备食材清洗食材切配食材烹饪食材定义列表Definition List定义列表用于展示术语及其定义使用dl标签定义包含dt术语和dd定义标签。基本语法dl dt术语1/dt dd术语1的定义或描述/dd dt术语2/dt dd术语2的定义或描述/dd /dl实例dl dtHTML/dt dd超文本标记语言用于创建网页结构/dd dtCSS/dt dd层叠样式表用于控制网页的样式和布局/dd dtJavaScript/dt dd脚本语言用于实现网页的交互功能/dd /dl显示效果HTML超文本标记语言用于创建网页结构CSS层叠样式表用于控制网页的样式和布局JavaScript脚本语言用于实现网页的交互功能列表嵌套列表可以相互嵌套创建多级结构这在展示层次化信息时非常有用。实例ul li水果 ul li苹果/li li香蕉/li li橙子/li /ul /li li蔬菜 ol li胡萝卜/li li西红柿/li li黄瓜/li /ol /li /ul显示效果水果苹果香蕉橙子蔬菜胡萝卜西红柿黄瓜列表属性列表标签支持多种属性来控制显示样式type属性有序列表指定列表标记类型type1数字默认typeA大写字母typea小写字母typeI大写罗马数字typei小写罗马数字start属性有序列表指定列表起始编号reversed属性有序列表倒序显示列表style属性无序列表通过CSS控制项目符号样式实例ol typeA start3 li第三项C/li li第四项D/li li第五项E/li /ol ul stylelist-style-type: square; li方块项目符号/li li方块项目符号/li /ul使用注意事项语义化使用根据内容选择合适的列表类型无序列表用于无顺序的项目有序列表用于有顺序的步骤定义列表用于术语定义。避免过度嵌套嵌套层级不宜过深一般建议不超过3层否则会影响可读性。CSS样式控制可以通过CSS自定义列表样式如项目符号、编号样式、缩进等。无障碍访问确保屏幕阅读器能正确识别列表结构不要滥用列表进行布局。列表项内容li标签内可以包含其他HTML元素如段落、图片、链接等。总结文本标签与列表标签是HTML中重要的元素合理使用标签可以使网页内容更加清晰、有条理提升用户体验和可访问性。温馨提示学习网页开发最好的方式就是动手实践。尝试修改上面的代码看看会发生什么变化温馨提示2请留下点赞next【网页开发教程】基本标签2——多媒体与超链接