• 常用H标签的补充：html5

    目录

    一、语义化结构标签：

    header：网页头部

    main：网页主体

    footer：网页底部

    nav：网页导航

    aside：和主体相关的内容

    artice：文章之类的

    section：独立的区块，上边标签都不适合就用这个

    二 、details标签

     progress标签

    常用属性

    meter标签 ：

    常用属性

    示图：

    一、语义化结构标签：

    header：网页头部

    main：网页主体

    footer：网页底部

    aside：和主体相关的内容

    artice：文章之类的

    section：独立的区块，上边标签都不适合就用这个

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		
    9. 		<header>
    10. 			<h1>大标题h1>
    11. 			<p>段落标签p>
    12. 		header>
    13. 		
    14. 		<nav>
    15. 			<a href="#">首页a>
    16. 			<a href="#">上一页a>
    17. 			<a href="#">下一页a>
    18. 			<a href="#">尾页a>
    19. 		nav>
    20. 		
    21. 		<section>
    22. 			<h1>section标签h1>
    23. 			<p>section元素用于对网站或应用程序中页面的内容进行分块，表示一段专题性的内容，一般会带有标题p>
    24. 		section>
    25. 		
    26. 		<article>
    27. 			<header>
    28. 				<h1>article标签h1>
    29. 				<p>发布期日：2022-10-24p>
    30. 			header>
    31. 			<p>发布的内容p>
    32. 		article>
    33. 		
    34. 		<aside>
    35. 			<nav>
    36. 				<ul>
    37. 					<li><a href="#">首页a>li>
    38. 					<li><a href="#">目的地a>li>
    39. 					<li><a href="#">酒店a>li>
    40. 					<li><a href="#">机票a>li>
    41. 				ul>
    42. 			nav>
    43. 		aside>
    44. 		
    45. 		
    46. 		<footer>
    47. 			<p>互联网药品信息服务资格证书 （粤）—非营业性—2017-0153 | 互联网宗教信息服务许可证：粤（2022）0000011p>
    48. 			
    49. 		footer>
    50. 		
    51. 		
    52. 		
    53. 		<article>
    54. 			<header>
    55. 				<h1>article页面独立区块h1>
    56. 				<p>评论发表日期p>
    57. 			header>
    58. 			
    59. 			<section>
    60. 				<h2>评论h2>
    61. 				
    62. 				
    63. 				<article>
    64. 					<header>
    65. 						<h3>评论人:Ah3>
    66. 						<p>1小时前p>
    67. 					header>
    68. 					<p>评论的内容p>
    69. 				article>
    70. 				
    71. 				<article>
    72. 					<header>
    73. 						<h3>评论人:Bh3>
    74. 						<p>2小时前p>
    75. 					header>
    76. 					<p>评论的内容p>
    77. 				article>
    78. 				
    79. 				
    80. 			section>
    81. 			
    82. 		article>
    83. 		
    84. 		
    85. 	body>
    86. html>

    二 、details标签

    details标签

    1. <details>
    2.     <summary>summary>
    3. details>


           details元素用于描述文档或文档某个部分的细节。summary元素经常与details 元素配合使

    用，作为details 元素的第一个子元素，用于为details定义标题。在默认情况下，标题可见，不显示

    details中的内容；当用户点击标题时，会显示或隐藏details中的其他内容。

    示图：

     progress标签

    progress标签

    1. <h2>项目正在进行中h2>
    2. <p><progress>progress>p> 
    3. <h2>当前项目进度h2>
    4. <p><progress max="100" value="80">progress> p>

    示图： 


         progress标签是行内元素，不会独占一行，一般用来定义运行中的任务进度（进程）。如

    Windows系统中软件的安装、文件的复制等场景的进度。

    常用属性

    progress标签的常用属性有两个

    （ 1 ） value ：已经完成的工作量。不设置此属性时，此进度条为“不确定”型，无具体进度信息，

    只是表示进度正在进行，但是不清楚还有多少工作量没有完成。

    （2） max ：总共有多少工作量。可以自行设置max 值。 value 的默认取值范围为 0.01~1 ，无

    max 属性时，如果value 值为 0.5 则表示当前进度为 50% 。( value和max属性的值必须大于0 )

    示图：

    1. <h2>当前项目进度h2>
    2. <p><progress max="100" value="80">progress> p>

     

    meter标签 ：

    1. <h2>我的周考成绩h2>
    2. <p>
    3.   第一周：<meter value="50" min="0" max="100" high="80" low="60" optimum="100">meter>
    4.   第二周：<meter value="70" min="0" max="100" high="80" low="60" optimum="100">meter>
    5.   第三周：<meter value="90" min="0" max="100" high="80" low="60" optimum="100">meter>
    6. p>


             meter标签是行内元素，不会独占一行，一般用于表示指定范围内的数值。如磁盘使用情况、查询结果、周考成绩或投票比例等。

    常用属性

    （1）value：定义度量的值。

    （2）min：定义最小值，默认值是 0。

    （3）max：定义最大值，默认值是 1。

    （4）high：定义度量的值位于哪个点被界定为高的值。

    （5）low：定义度量的值位于哪个点被界定为低的值。

    （6）optimum：定义什么样的度量值是最佳的值。如果该值高于high属性，则意味着值越高越好；如果该值低于low属性的值，则意味着值越低越好。

    示图：

     

  • 相关阅读:
    警惕！新增1本SCI被标记“On Hold”！
    最好的PDF压缩:ImageGear PDF 25.2.NET
    linux第四课：改变文件的权限和属性(内含：1.修改权限命令chmod+2.临时切换用户用 sudo+3.chowm:改变文件所有者)
    VMware设置共享文件夹
    zookeeper安装部署和操作
    黄金代理这么多，怎么选？
    关系数据库是个啥
    【教师资格证考试综合素质——法律专项】教育法笔记以及练习题
    Windows环境安装dmPython（WHL方式）
    java的面向对象基础（4）——多态
  • 原文地址：https://blog.csdn.net/ydc222/article/details/127656761