Media elements and forms
1. Media elements
1-1. Picture
image abbreviation empty element
<!--src Picture address (absolute or relative path) source-->
<!--alt Picture alternative text-->
<!--title Mouse hover text-->
<!--width height Width and height of the picture-->
<!--usemap The Image Map element Operate on some contents in the picture-->
<img class="fit-picture"
src="/media/cc0-images/grapefruit-slice-332-332.jpg"
alt="Grapefruit slice atop a pile of other slices">
Supported picture formats:
| abbreviation | file format | MIME type | File extension | Browser compatibility |
|---|
| APNG | Animated Portable Network Graphics | image/apng | .apng | Chrome, Edge, Firefox, Opera, Safari |
| AVIF | AV1 image file format | image/avif | .avif | Chrome, Opera, Firefox (feature flag) |
| BMP | Bitmap file 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 |
Use with a link
<a href="#">
<img src="" alt="">
</a>
Use with map
<map name="infographic">
<!--
shape shape
Round( circ or circle)
Polygon( poly or polygon)
Rectangle( rect or rectangle)
coords
coordinate
Circle: shape="circle"，coords="x,y,r"
there x and y Defines the position of the center of the circle("0,0" Is the coordinate of the upper left corner of the image), r So like The radius of a circle in prime.
Polygon: shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."
Each pair "x,y" Coordinates define a vertex of a polygon("0,0" It's the seat in the upper left corner of the image Defining triangles requires at least three sets of coordinates; high latitude polygons require a greater number of vertices.
Rectangle: shape="rectangle"，coords="x1,y1,x2,y2"
Coordinates of the upper left and lower right corners
The first coordinate is the vertex coordinate of one corner of the rectangle, and the other pair of coordinates is the vertex coordinate of the opposite corner,"0,0" Is the coordinates of the upper left corner of the image. Note that defining a rectangle actually defines a polygon with four vertices A simplified method.
target
How to open a new window
alt
Picture replace text
-->
<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>
<!--use usemap And map Medium name Associate the two-->
<img usemap="#infographic" src="/media/examples/mdn-info2.png" alt="MDN infographic" />
1-2. video
<!--
controls Playback control
width height Width and height
source Source of file (multiple files are written for browser compatibility)
video The text in is the text that failed to load the video
autoplay Auto play
buffered This property can read the time range within which media has been cached. This property contains a TimeRanges Object.
loop Loop Playback
muted Default mute
-->
<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>
| browser | MP4 | WebM | Ogg |
|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES, starting with Firefox 21. Linux starts with Firefox 30 | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES, starting with Opera 25 | YES | YES |
1-3. audio
<!--
figure Usually include pictures, audio, etc. and tell the browser that these belong to the same content
figcaption Control refers to content
The remaining attributes are the same as Video identical
-->
<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>
| browser | 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, subtitle track
<!--Use in video In, track The file that specifies the subtitle address is usually.vtt Format file-->
<video controls
src="/media/cc0-videos/friday.mp4">
<track default
kind="captions"
srclang="en"
/>
Sorry, your browser doesn't support embedded videos.
</video>
2. Form
<!--
label adopt for Values and id The value of will lable And input Associate
input Input box
textarea Multiline text
button Button
method post And get
post The sent value cannot be seen in the address bar
get You can see the value sent in the address bar
-->
<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 | describe | | Spec |
|---|
| button | Buttons without default behavior are displayed above value Property, which is empty by default. | | |
| checkbox | Check box, which can be set to checked or unchecked. | | |
| color | Controls for specifying colors; in supported browsers, the color finder opens when activated. | | HTML5 |
| date | A control for entering a date (year, month, day, excluding time). Opens the date selector or the number wheel of month, year, and day when a supported browser is activated. | | HTML5 |
| datetime-local | A control for entering a date and time, excluding the time zone. Open the date selector or the number wheel of the month, year and day when a supported browser is activated. | | HTML5 |
| email | Area for editing email address. Similar to text input, but there will be confirmation parameters and corresponding keyboard on supported browsers and devices with dynamic keyboard. | | |
| file | Controls that let users select files accept Property specifies the file type that the control can select. | | |
| hidden | For a control that is not displayed, its value will still be submitted to the server. For example, an invisible control is on the right. | | |
| image | submit button with image. The displayed image is specified by src attribute. If src defect, alt The properties are displayed. | | |
| month | Control for entering year and month, no time zone. | | HTML5 |
| number | A control for entering numbers. If supported, scroll buttons are displayed and default validation is provided (that is, only numbers can be entered). A numeric keypad is displayed on devices with a dynamic keyboard. | | |
| password | A single line text area whose value will be masked. Users will be warned if the site is unsafe. | | |
| radio | Radio button that allows you to have the same in multiple name Select one of the options for the value. | | |
| range | This control is used to enter numbers that do not need to be exact. The control is a range component, and the default value is the value in the middle. It is used at the same time htmlattrdefmin and htmlattrdefmax To specify the range of values. | | HTML5 |
| reset | This button resets all the contents of the form to the default values. Not recommended. | | |
| search | A single line text area used to search for strings. Line breaks in input text are automatically removed. In supported browsers, there may be a delete button to clear the entire area. The enter icon on devices with a dynamic keyboard becomes the search icon. | | HTML5 |
| submit | Button to submit the form. | | |
| tel | A control for entering phone numbers. The phone numeric keypad is displayed on devices with a dynamic keyboard. | | HTML5 |
| text | Default. The text area of a single line, and the newline in the input will be automatically removed. | | |
| time | Control for entering time, excluding time zone. | | HTML5 |
| url | Control for entering URL. Similar to text input, but with validation parameters, there is a corresponding keyboard on devices that support dynamic keyboard. | | HTML5 |
| week | Used to enter a date consisting of years and weeks without a time zone. | | |
| Obsolete value | | | |
| datetime | Use to enter a date and time (hour, minute, second, and fractional part of second) based on the UTC time zone. | | |
Supplement: Statistics of js used by front-end html tags
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))