HTML5学习日志 --html5新增属性和语义化标签

最新推荐文章于 2022-09-21 22:27:21 发布

学习一直在路上

最新推荐文章于 2022-09-21 22:27:21 发布

阅读量235

点赞数 1

文章标签：前端 html5

本文链接：https://blog.csdn.net/weixin_38204966/article/details/121514188

版权

学习目标：

1、html5新增属性
2、语义化标签

学习内容：

结构化元素：

HTML5新的属性语法：

`<section>`

定义文档中的主体部分的节、段。
当我们描述一件具体的事物的时候，通常鼓励使用article来代替section;当一个容器需要被直接定义样式或听过脚本定义行为时，推荐使用div元素而非section。
在这里插入图片描述

`<article>`

一个特殊的section标签，比section有更明确的语义。定义来自外部的一个独立的、完整的内容块，例如什么论坛的文章，博客的文本。
在这里插入图片描述

`<aside>`

用来装载页面中非正文的内容，独立于其他模块。例如广告、成组的链接、侧边栏。
在这里插入图片描述

`<header>`

定义文档、页面的页眉。通常是一些引导和导航信息，不局限于整个页面头部，也可以用在内容里。
在这里插入图片描述

		<style type="text/css">
			*{padding: 0;margin: 0 ;}
			body{width: 62.5rem;margin: 0 auto;}
			header{height: 7.5rem; background: #096;}
			header h1{text-align: center; line-height: 7.5rem;}
		</style>
	</head>
	<body>
		<header>
			<h1>这里是头部信息</h1>
		</header>
	</body>

`<footer>`

定义了文档、页面的页脚，和header类似。
在这里插入图片描述
代码实现：

<footer>这里是页脚信息</footer>

footer{
height:12.5rem ;
background-color: orange;
}

`<nav>`

定义了一个链接组组成的导航部分，其中的链接可以链接到其他网页或者当前页面的其他部分。
在这里插入图片描述
代码实现：

		<nav>
			<p>
				<a href="#">首页</a>
				<a href="#">无屏纸巾机</a>
				<a href="#">有屏环保袋机</a>
				<a href="#">新闻中心</a>
				<a href="#">加盟合作</a>
				<a href="#">关于我们</a>
			</p>
		</nav>

`<hgroup>`

于对网页或区段(section)的标题元素(h1~h6)进行组合。
在这里插入图片描述
代码实现：

<section>
	<aside>
		<p>这里是边栏</p>
	</aside>
	<article>
		<hgroup>
			<h1>大标题</h1>
			<h2>小标题</h2>
	<p>hgroup对网页或区段(section)的标题元素(h1~h6)进行组合。	
	</p>
		</hgroup>
	</article>
</section>

`<figure>`

用于对元素进行组合。

<figcaption>
为figure元素加标题。一般放在figure第一个子元素或者最后一个。
本身不带有默认样式，可以使用css使其带有样式

代码实现：

<figure>
	<img src="images.1.png" alt"学生">
</figure>

`<details>`

定义元素的细节，用户可以点击查看或者隐藏。

`<summary>`

和details连用，用来包含details的标题。

<details>
	<summary>学生</summary>
	<p><img src="images.1.png" alt"学生"></p>
</details>

`<mark>`-记号文本

在视觉上向用户展现出那些想要突出的文字。比如搜索结果中向用户高亮显示搜索关键词。
对原文内容不会产生影响

`<progress>`

进度条，运行中的进度。
与javaScript一同使用，来显示任务的进度。

<time>
定义日期或者时间。
datetime
pubdate

以便于将时间更好的分开来

<p>发布日期<time datetime="2021-11-23" pubdate=>2021-11-23 09:19</p>
<p>关于<time datetime=2021-11-24>11月24日</time>更正通知"</p>

`<command>`

定义命令行为。

`<meter [min/max/low/high/optimum/value]>`

定义度量衡，仅用于已知最大和最小值的度量。
一般用来显示磁盘用量所占结果百分比的值
form 定义它所属的表单
high 表示最高值
low 表示最低值
max 指定最大值
min 表示最小值
optimum 最佳值，必须介于min和max之间，但是可以大于high属性值
value 表示他的当前值
在这里插入图片描述
代码实现：

<meter value="3" min="0" max="10">十分之三</meter>
<meter value="0.6">60%</meter>

学习时间：

11月24日14:00-16:00

学习一直在路上

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5学习日志 --html5新增属性和语义化标签

学习目标：1、html5新增属性2、语义化标签学习内容：结构化元素：HTML5新的属性语法：<section>定义文档中的主体部分的节、段。当我们描述一件具体的事物的时候，通常鼓励使用article来代替section;当一个容器需要被直接定义样式或听过脚本定义行为时，推荐使用div元素而非section。<article>一个特殊的section标签，比section有更明确的语义。定义来自外部的一个独立的、完整的内容块，例如什么论坛的文章，博客的文本。
复制链接

扫一扫