h5语义化标签与背景图片截取方法

最新推荐文章于 2024-04-30 19:51:10 发布

Lemon

最新推荐文章于 2024-04-30 19:51:10 发布

阅读量458

点赞数 2

分类专栏：学习

本文链接：https://blog.csdn.net/weixin_43314846/article/details/96364551

版权

学习专栏收录该内容

80 篇文章 0 订阅

订阅专栏

h5语义化标签

注意：h5的标志是<!DOCTYPE html>

1. 结构化标签

<header></header> <nav></nav> <section></section> <article></article> <aside></aside> <footer></footer>

完整h5以及携带结构化标签结构

<！DOCTYPE HTML>
<html>
	<head>
		<title></title>
	</head>
	<body>
		<header></header>	<!--页面的头部-->
		<nav></nav>	<!--导航栏-->
		<section>
			<article></article>		<!--文章详细内容-->
			<aside></aside>		<!--文章概括内容/其他文章部分-->
		</section>
		<footer></footer><!--底部->
	</body>
</html>

图例：

在这里插入图片描述

2. 新标签

新标签	描述	注意事项
`<figure></figure>`	在figure标签中的所有元素是一组，可理解为所有元素在一个div中
`<figcaption></figcaption>`	`<figcaption></figcaption>`内的内容是`<figure></figure>`标签的标题	① `<figcaption>`标签和`<figure>`标签同时使用才有效 ② `<figcaption></figcaption>`标签内的内容独占一行
`<details><summary></summary></details>`	在details中可为在summary中的内容进行详细解释，当使用这两个标签时会出现一个小三角
`<mark></mark>`	被mark标记的内容会出现高亮
`<progress></progress>`	进度条，有两个属性:value max	value为当前进度条值，max是进度条的最大值。如果value大于max，则浏览器依旧显示max对应的进度条
`<meter></meter>`	l六个属性值：value(当前进度值) optimum(最优值) high(进度的最大有效值) low(进度的最小有效值) max(进度最大值) min(进度最小值)	① 当最优值大于最大有效值时，value越大越好（即value大于最大有效值时进度条为绿色，小于最小有效值时进度条为红色；② 当最优值小于最小有效值时，value越小越好（即value小于最小有效值时进度条为绿色，大于最大有效值时进度条为红色）
`<menu><li></li></menu>`	将列表放到一个菜单里
`<ul><li></li></ul>`
`<ol><li></li></ol>`
`<cite></cite>`	cite内的内容会变为斜体
`<small></small>`	small内的内容会变小
`<form><input type="file" ></form>`	上传文件

3. 视频音频

h5支持的视频格式：ogg、webm、mp4
h5支持的音频格式：ogg、mp3、wav

① 视频

包含一个视频

<video src=" " ></video>

包含多个视频

<video>
	<source src="" type=""/>
	<source src="" type=""/>
	<source src="" type=""/>
	若前三个浏览器都不能解析，则会显示这句话
</video>

属性	描述
`type`	视频对应的格式；可取值：`video/ogg`;`video/webm`;`video/mp4`	可写也可不写
`controls`	控件，即播放视频的开始按钮以及进度条相关东西
`width`	视频的宽
`height`	视频的高
`autoplay`	设置视频是否自动播放，默认否;若想让视频自动播放，则在video标签上直接加该属性即可
`poster`	加载等待时显示的画面图片（autoplay和poster不可同时使用）
`src`	视频路径
`loop`	设置是否循环；默认为否了若想让其循环播放，则在video标签上加`loop="loop"`或者直接加`loop`
`preload`	是否在页面加载后载入视频	该属性和`autoplay`属性不可同时设置。当有`autoplay`属性时自动忽略该属性

JS中API方法

方法	描述
play()	播放
pause()	暂停
currentTime()	当前播放时间
muted()	是否静音
playbackRate()	播放倍速
volume()	音量

② 音频

一个音频内容

<audio src=" "></audio>

多个音频内容

<audio>
	<source src=" "/>
	<source src=" "/>
	<source src=" "/>
	当浏览器无法解析上面那个文件时，显示这句话
</audio>

属性	描述
`autoplay`	自动播放
`src`	音频来源
`loop`	是否循环播放
`controls`	控件
`preload`	是否在页面加载后载入视频	该属性和`autoplay`属性不可同时设置。当有`autoplay`属性时自动忽略该属性

form表单

注意：
1. 若想要将form和与form相关的内容关联起来，可给form加一个`id=" "`属性，在与它相关的元素上加一个`form=" "`属性，其中id与form取值相同
2. 下面表格的内容浏览器会进行验证，是在点击确认提交按钮时验证

标签	说明	注意
`<form id=" " action=" " method="get">`	若form与下面的所有标签都是相关的，则form的id以及下面所有标签的form值都相同
`<input type="email" form=" ">`	该标签会进行邮箱验证，若所填写内容不符合邮箱的格式，则会提示
`<input type="url" form=" ">`	会进行网址验证，同上
`<input type="date" form=" ">`	会出现日期表
`<input type="time" form=" ">`	出现时间选择表/上下增减器
`<input type="month" form=" ">`	月，同上
`<input type="week" form=" ">`	周，同上
`<input type="number" form=" ">`	年龄，同上	只可输入e或者数字
`<input type="range" form=" ">`	比例，同上
`<input type="search" form=" ">`	查找，同上
`<input type="color" form=" ">`	可选择字体颜色

表单或标签新属性

① 标签属性

属性	描述	取值
`required`	在按下提交按钮时该标签必须要有值	`required="required"`/`required`
`autocomplete`	当设置该值为on时（此时设置该属性的标签应有id/name,否则浏览器无法记忆），浏览器会对之前用户输入的内容进行记忆，当用户再次输入时，浏览器会予以提示	`autocomplete="on"`（开启自动记忆）/`autocomplete="off"`(关闭自动记忆)
`autofocus`	设置该属性的标签会自动聚焦（即浏览打开时处于准备输入状态）	`autofocus="autofocus"` / `autofocus`
`pattern`	正则匹配。设置了正则匹配的标签会进行正则匹配验证

② 表单属性

属性	描述
`novalidate`	禁止浏览器对标签自动验证，以type=“url”为例：此时用户输入的值不是网址，当点击提交按钮时，浏览器不会提醒错误，而是直接提交

背景图片截取

background:颜色背景图片的url 背景图片是否重复横向位置纵向位置

注意：
1. 背景图片默认是放置左上角的
2. 横向位置可取left  center   right / 像素 / 百分比（百分比是以所设背景图片的元素的宽减去背景图片的宽为参考的）
3. 纵向位置可取top  center  bottom / 像素 / 百分比（百分比是以所设背景图片的元素的高减去背景图片的高为参考的）
4. 若以像素来设置横向位置，则是以默认位置为参考点，向左向右移动；同理，设置纵向位置时，以默认位置为参考点，向上向下移动