领跑计划Day003Html

Posted 2021-12-05 师兄白泽

文章目录

• 媒体元素和表单
• • 1.媒体元素
  • • 1-1.图片
    • • image缩写 空元素
      • 支持的图片格式：
      • 与a链接连用
      • 与map连用
    • 1-2.视频video
    • 1-3.音频audio
    • 1-4，字幕track
  • 2.表单
  • • input

媒体元素和表单

1.媒体元素

1-1.图片

image缩写 空元素

<!--src 图片地址（绝对或者相对路径）source-->
<!--alt 图片替代文字-->
<!--title 鼠标悬浮文字-->
<!--width height 图片的宽高-->
<!--usemap The Image Map element 对图片中部分内容操作-->
<img class="fit-picture"
     src="/media/cc0-images/grapefruit-slice-332-332.jpg"
     alt="Grapefruit slice atop a pile of other slices">

支持的图片格式：

缩写	文件格式	MIME 类型	文件拓展名	浏览器兼容性
APNG	Animated Portable Network Graphics 动态便携式网络图像	image/apng	.apng	Chrome, Edge, Firefox, Opera, Safari
AVIF	AV1 Image File Format AV1 图像文件格式	image/avif	.avif	Chrome, Opera, Firefox (feature flag)
BMP	Bitmap file 位图文件	image/bmp	.bmp	Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
GIF	Graphics Interchange Format 图像互换格式	image/gif	.gif	Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
ICO	Microsoft Icon 微软图标	image/x-icon	.ico, .cur	Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
JPEG	Joint Photographic Expert Group image 联合影像专家小组图像	image/jpeg	.jpg, .jpeg, .jfif, .pjpeg, .pjp	Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
PNG	Portable Network Graphics 便携式网络图像	image/png	.png	Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
SVG	Scalable Vector Graphics 可缩放矢量图形	image/svg+xml	.svg	Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
TIFF	Tagged Image File Format 标签图像文件格式	image/tiff	.tif, .tiff	Safari
WebP	Web Picture format 万维网图像格式	image/webp	.webp	Chrome, Edge, Firefox, Opera, Safari

与a链接连用

<a href="#">
    <img src="" alt="">
</a>

与map连用

<map name="infographic">
  	<!--
			shape 形状
				圆形（circ 或 circle）
				多边形（poly 或 polygon）
				矩形（rect 或 rectangle）
			coords 
				坐标 
					圆形：shape="circle"，coords="x,y,r"
						这里的 x 和 y 定义了圆心的位置（"0,0" 是图像左上角的坐标），r 是以像						 素为单位的圆形半径。
					多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."
						每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐								标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。
					矩形：shape="rectangle"，coords="x1,y1,x2,y2"
						左上角和右下角的坐标
						第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，"0,0" 						是图像左上角的坐标。请注意，定义矩形实际上是定义带有四个顶点的多边形的							一种简化方法。
			target
				打开新窗口的方式
			alt
				图片替换文字
		-->
    <area shape="poly" coords="130,147,200,107,254,219,130,228"
          href="https://developer.mozilla.org/docs/Web/html"
          target="_blank" alt="HTML" />
    <area shape="poly" coords="130,147,130,228,6,219,59,107"
          href="https://developer.mozilla.org/docs/Web/CSS"
          target="_blank" alt="CSS" />
    <area shape="poly" coords="130,147,200,107,130,4,59,107"
          href="https://developer.mozilla.org/docs/Web/javascript"
          target="_blank" alt="JavaScript" />
</map>
<!--使用usemap与map中的name将两者关联-->
<img usemap="#infographic" src="/media/examples/mdn-info2.png" alt="MDN infographic" />

1-2.视频video

<!--
controls 播放控件
width height 宽高
source 文件的源（之所以写多个是为了浏览器兼容）
video中的文字是视频加载失败的文字
autoplay 自动播放
buffered 这个属性可以读取到哪段时间范围内的媒体被缓存了。该属性包含了一个TimeRanges 对象。
loop 循环播放
muted 默认静音
-->
<video controls width="250">
    <source src="/media/cc0-videos/flower.webm"
            type="video/webm">

    <source src="/media/cc0-videos/flower.mp4"
            type="video/mp4">
    Sorry, your browser doesn't support embedded videos.
</video>

浏览器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES 从 Firefox 21 版本开始 Linux 系统从 Firefox 30 开始	YES	YES
Safari	YES	NO	NO
Opera	YES 从 Opera 25 版本开始	YES	YES

1-3.音频audio

<!--
figure 通常把图片 音频等包含起来，告诉浏览器这些都属于同一个内容
figcaption 控件指代内容
其余属性与Video相同
-->
<figure>
    <figcaption>Listen to the T-Rex:</figcaption>
    <audio
        controls
        src="/media/cc0-audio/t-rex-roar.mp3">
            Your browser does not support the
            <code>audio</code> element.
    </audio>
</figure>

浏览器	MP3	Wav	Ogg
Internet Explorer 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	YES	YES	YES
Safari 5+	YES	YES	NO
Opera 10+	YES	YES	YES

1-4，字幕track

<!--使用在video中，track 指定了字幕的地址 字幕的文件通常为.vtt格式文件-->
<video controls
       src="/media/cc0-videos/friday.mp4">
    <track default
           kind="captions"
           srclang="en"
           />
    Sorry, your browser doesn't support embedded videos.
</video>

2.表单

<!--
label 通过for的值和id的值将lable与input进行关联
input 输入框
textarea 多行文本
button 按钮
method post与get
	post 地址栏中不可以看到发送的值
	get 地址栏中可以看到发送的值
-->
<form action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name">
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail">
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea id="msg"></textarea>
  </div>
  <div class="button">
  	<button type="submit">Send your message</button>
	</div>
</form>

input

Type	描述		Spec
button	没有默认行为的按钮，上面显示 value 属性的值，默认为空。
checkbox	复选框，可设为选中或未选中。
color	用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。		HTML5
date	输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。		HTML5
datetime-local	输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。		HTML5
email	编辑邮箱地址的区域。类似 text 输入，但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘。
file	让用户选择文件的控件。使用accept属性规定控件能选择的文件类型。
hidden	不显示的控件，其值仍会提交到服务器。举个例子，右边就是一个隐形的控件。
image	带图像的 submit 按钮。显示的图像由 src 属性规定。如果 src 缺失，alt 属性就会显示。
month	输入年和月的控件，没有时区。		HTML5
number	用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。
password	单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。
radio	单选按钮，允许在多个拥有相同 name 值的选项中选中其中一个。
range	此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用htmlattrdefmin 和 htmlattrdefmax来规定值的范围。		HTML5
reset	此按钮将表单的所有内容重置为默认值。不推荐。
search	用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。		HTML5
submit	用于提交表单的按钮。
tel	用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。		HTML5
text	默认值。单行的文本区域，输入中的换行会被自动去除。
time	用于输入时间的控件，不包括时区。		HTML5
url	用于输入 URL 的控件。类似 text 输入，但有验证参数，在支持动态键盘的设备上有相应的键盘。		HTML5
week	用于输入以年和周数组成的日期，不带时区。
废弃的值
datetime	用于输入基于UTC时区的日期和时间（时、分、秒及秒的小数部分）。

补充：统计前端html标签使用的js

var total = 0
var obj = Array.prototype.reduce.call(document.querySelectorAll('*'), (acc, cur) => {
  let tag = cur.tagName.toLowerCase()
  acc[tag]= acc[tag] || 0
  acc[tag]++
  total++
  return acc
}, {})
var list = []
for(let k in obj) list.push({tag: k, times: obj[k], ratio: (obj[k] * 100 / total).toFixed(2) + '%'})
console.clear()
console.table(list.sort((a, b) => b.times - a.times))