HTML小白入门基础_7

最新推荐文章于 2024-07-10 01:10:22 发布

有点东西：）

最新推荐文章于 2024-07-10 01:10:22 发布

阅读量45

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/weixin_52612800/article/details/116953730

版权

写在前面

本篇文章主要对HTML5的一些标签进行介绍。本篇内容是对freecodecamp社区应用辅助功能部分的总结。

正文

第一个是给图片做一个注释，当图片无法显示之后，注释就显得尤为重要。
给 img 标签添加一个 alt 属性就能够给图片添加注释。

<img src="samuraiSwords.jpeg" alt="我也不知道是啥">

在这里插入图片描述
alt 属性是必要出现的，如果你不想让注释出现，就赋给它一个空值即可。

在HTML5中添加了很多的新标签，main 标签就是其中之一，他里面的内容是 body 里面的一个主题，且只能存在一个，关于他的包含关系，它不能够被以下几个标签包含 header footer nav article section 这几个都是新出现的标签，但是 main 标签之中可以包含他们。

下一个标签是 article 标签，这个标签用来包裹一篇独立于上下文的文章。
里面可以存在 header 和 footer 标签

<main>
	<article>
	<h2>标题</h2>
	<p>这是这一篇文章的主要内容，挺短的。</p>
	</article>
</main>

在这里插入图片描述
下一个标签是 header 标签，它是使用在 article 标签里面的用来区分文章的标题内容。也可以一用在整个 body 里面作为 body 的标题。

<main>
	<article>
		<header>
		<h1>文章标题</h1>
		</header>
		<p>这里面就是正文了</p>
	</article>
</main>

在这里插入图片描述
在介绍下一个标签之前，先让我们来了解一下 section 标签，之前我们看过 article 标签，他用来包裹一段独立的片段，section 标签和它的作用类似，也是用来包裹一个片段，article 是一个更加确切的 section。

下一个标签是 nav 标签，我们用它来包含导航栏。

<body>
	<header>
	<h1>下面是导航栏</h1>
	<nav>
		<ul>
		<li><a href="#head">头部</a></li>
		<li><a href="#foot">脚部</a></li>
		</ul>
	</header>
	<section id="head">
	这里是头部
	</section>
	<section id="foot">
	这里是脚部
	</section>
</body>

在这里插入图片描述
有头有尾，下一就是 footer 标签，通常用来包含版权信息啥的。也可以用在 article 或者 section 标签里面作为部分的尾部。

<body>
	<header>
	页面标题
	</header>
	<section>
		<header>
		文章标题
		</header>
		<p>文章内容</p>
		<footer>
		作者：XXX
		</footer>
	</section>
	<footer>&copy;版权所有
	</footer>
</body>

在这里插入图片描述
下一个是音频标签 audio，它的作用是在页面上产生一个带有进度条的一个播放页面，我也说不清楚，看效果吧。

<audio id="meowClip" controls>
  <source src="audio/meow.mp3" type="audio/mpeg">
  <source src="audio/meow.ogg" type="audio/ogg">
</audio>

在这里插入图片描述

source 可以有很多个，页面呈现出来的是第一个符合标准的。type 用来表明音频的类型，备选内容为 MP3，Ogg，Wav。

下一个标签是 figure 和 figcaption，对于第二个标签就我目前所知道的只有在 figure 标签中出现在开头或者结尾（后续可能会补充），figure 中包含的内容是相对独立的一块内容，删除后对整个页面无影响。

<figure>
  <img src="#" alt="图片描述">
  <br>
  <figcaption>
    图片说了阿巴阿巴。
  </figcaption>
</figure>

在这里插入图片描述
之前我们讲过 form 表单，现在要说到的标签是给表单分组的标签 fieldset，在它里面有一个 legend 标签可以给分组加上标题。

<form>
	<fieldset>
	<legend>
	选择你的性别
	</legend>
	<input id="man" type="radio" name="sex">
	<label for="man">男</label>
	<input id="women" type="radio" name="sex">
	<label for="women">女</label>
	</fieldset>
</form>

在这里插入图片描述
下一个是我们熟悉的 input 标签，只不过这次用来获取日期信息，只要将 type 改成 date即可。

<input type="date">

在这里插入图片描述
下一个是 time 标签用法如下，我也不太懂这个标签。

<p>这篇文章是我在<time datetime="2021-07-08">今天</time>发布的

在这里插入图片描述
在页面上并没有显示出什么效果。

下面介绍的是一个属性 accesskey 他可以添加到所有的标签里面，相当于添加一个快捷键，按这个键就能直接触发事件。

<a href="#" accesskey="k">按键盘的k可以进入链接</a>

在这里插入图片描述
值得一提的是似乎ie浏览器并不支持。

下一还是属性 tabindex ，通过给这个属性赋值，可以通过按键盘上的 tab 键快速转跳到标记内容，值越大优先级越高，-1表示被忽略。

<p tabindex="6">转跳到一段文章</p>

在这里插入图片描述

结语

本部分内容到这里就结束了，如有错误还望在评论区指正。

有点东西：）

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML小白入门基础_7

写在前面正文第一个是给图片做一个注释，当图片无法显示之后，注释就显得尤为重要。给 img 标签添加一个 alt 属性就能够给图片添加注释。<img src="samuraiSwords.jpeg" alt="我也不知道是啥">alt 属性是必要出现的，如果你不想让注释出现，就赋给它一个空值即可。在HTML5中添加了很多的新标签，main 标签就是其中之一，他里面的内容是 body 里面的一个主题，且只能存在一个，关于他的包含关系，它不能够被以下几个标签包含 header foot
复制链接

扫一扫