lol小米和谁做的视频网站,怎么样建设自己网站,wordpress 注释代码,网站建设规划文档前言
防止一个页面中全部都是div#xff0c;或者ul li#xff0c;在html5推出了很多语义化标签 提示#xff1a;以下是本篇文章正文内容#xff0c;下面案例可供参考
常用语义化案例
一般我用的多的是header#xff0c;main#xff0c;footer 这些标签不难理解#x…前言
防止一个页面中全部都是div或者ul li在html5推出了很多语义化标签 提示以下是本篇文章正文内容下面案例可供参考
常用语义化案例
一般我用的多的是headermainfooter 这些标签不难理解你只要理解为他们都是div的性质就好了只为了在页面上区分模块内容让浏览器理解你这一段divfooter是底部信息。 你这段divheader是头部栏内容这样理解就好很多了。 他们本身没有任何附加样式跟div没有任何区别所以在开发中遇到相对应的情况用对应的语义化标签。
!DOCTYPE html
html
headtitleHTML5语义化标签示例/title
/head
bodyheaderh1网页标题/h1nav!-- 导航链接 --/nav/headermainsectionh2第一部分/h2p这是第一部分的内容.../ptime2023年9月5日16:22:51/time/sectionsectionh2第二部分/h2articleh3重要文章/h3p这是一篇重要的文章使用了lt;articlegt;标签包裹。/pfooter作者John Doe/footer/article/section/mainasideh2侧边栏/h2!-- 侧边栏内容 --/asidefooterpcopy; 2023 网页作者/p/footersectionh2示例标记/h2p在这个段落中mark这里的文字被标记为重要/mark以突出显示。/p/sectionfigureimg srcexample.jpg alt示例图片figcaption这是示例图片的说明/figcaption/figuresectionh2可折叠内容/h2detailssummary点击展开/折叠内容/summaryp这是可折叠的内容.../p/details/section
/body
/html通过一些帖子的学习发现了很多没用过的语义化标签案例如下
1、b和strong加粗
!-- 非语义化 --
pThis is bbold/b text./p!-- 语义化 --
pThis is strongimportant/strong text./p2、i与em斜体
!-- 非语义化 --
pThis is iitalic/i text./p!-- 语义化 --
pThis is ememphasized/em text./p3、u和ins下划线
!-- 非语义化 --
pThis is uunderlined/u text./p!-- 语义化 --
pThis is insunderlined/ins text./p4、s和del删除线
!-- 非语义化 --
pThis is sdeleted/s text./p!-- 语义化 --
pThis is deldeleted/del text./p另外一些案例
5、mark标签
p这是一段包含mark重要信息/mark的文本。/p6、details 和 summary
detailssummary点击展开/折叠内容/summaryp这是可折叠的内容.../p
/details7、figure 和 figcaption
figure用于包含与文档内容相关的媒体元素figcaption用于为媒体元素添加标题。例如一张图片可以用这两个标签包裹 figureimg srcexample.jpg alt示例图片figcaption这是示例图片的说明/figcaption/figure样式就是图片在上文字在下不贴图了基本不会用到
