Leading plan Day003Html

Posted by johnnyk on Thu, 04 Nov 2021 23:46:18 +0100

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"
     alt="Grapefruit slice atop a pile of other slices">

Supported picture formats:

abbreviationfile formatMIME typeFile extensionBrowser compatibility
APNGAnimated Portable Network Graphicsimage/apng.apngChrome, Edge, Firefox, Opera, Safari
AVIFAV1 image file formatimage/avif.avifChrome, Opera, Firefox (feature flag)
BMPBitmap file bitmap fileimage/bmp.bmpChrome, Edge, Firefox, Internet Explorer, Opera, Safari
GIFGraphics Interchange Formatimage/gif.gifChrome, Edge, Firefox, Internet Explorer, Opera, Safari
ICOMicrosoft Iconimage/x-icon.ico, .curChrome, Edge, Firefox, Internet Explorer, Opera, Safari
JPEGJoint Photographic Expert Group imageimage/jpeg.jpg, .jpeg, .jfif, .pjpeg, .pjpChrome, Edge, Firefox, Internet Explorer, Opera, Safari
PNGPortable Network Graphicsimage/png.pngChrome, Edge, Firefox, Internet Explorer, Opera, Safari
SVGScalable Vector Graphicsimage/svg+xml.svgChrome, Edge, Firefox, Internet Explorer, Opera, Safari
TIFFTagged Image File Formatimage/tiff.tif, .tiffSafari
WebPWeb Picture formatimage/webp.webpChrome, Edge, Firefox, Opera, Safari

Use with a link

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

Use with map

<map name="infographic">
			shape shape
				Round( circ or circle)
				Polygon( poly or polygon)
				Rectangle( rect or rectangle)
					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.
				How to open a new window
				Picture replace text
    <area shape="poly" coords="130,147,200,107,254,219,130,228"
          target="_blank" alt="HTML" />
    <area shape="poly" coords="130,147,130,228,6,219,59,107"
          target="_blank" alt="CSS" />
    <area shape="poly" coords="130,147,200,107,130,4,59,107"
          target="_blank" alt="JavaScript" />
<!--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"

    <source src="/media/cc0-videos/flower.mp4"
    Sorry, your browser doesn't support embedded videos.
Internet ExplorerYESNONO
FirefoxYES, starting with Firefox 21. Linux starts with Firefox 30YESYES
OperaYES, starting with Opera 25YESYES

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
    <figcaption>Listen to the T-Rex:</figcaption>
            Your browser does not support the
            <code>audio</code> element.
Internet Explorer 9+YESNONO
Firefox 3.6+YESYESYES

1-4, subtitle track

<!--Use in video In, track The file that specifies the subtitle address is usually.vtt Format file-->
<video controls
    <track default
    Sorry, your browser doesn't support embedded videos.

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">
    <label for="name">Name:</label>
    <input type="text" id="name">
    <label for="mail">E-mail:</label>
    <input type="email" id="mail">
    <label for="msg">Message:</label>
    <textarea id="msg"></textarea>
  <div class="button">
  	<button type="submit">Send your message</button>


buttonButtons without default behavior are displayed above value Property, which is empty by default.
checkboxCheck box, which can be set to checked or unchecked.
colorControls for specifying colors; in supported browsers, the color finder opens when activated.HTML5
dateA 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-localA 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
emailArea 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.
fileControls that let users select files accept Property specifies the file type that the control can select.
hiddenFor a control that is not displayed, its value will still be submitted to the server. For example, an invisible control is on the right.
imagesubmit button with image. The displayed image is specified by src attribute. If src defect, alt The properties are displayed.
monthControl for entering year and month, no time zone.HTML5
numberA 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.
passwordA single line text area whose value will be masked. Users will be warned if the site is unsafe.
radioRadio button that allows you to have the same in multiple name Select one of the options for the value.
rangeThis 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
resetThis button resets all the contents of the form to the default values. Not recommended.
searchA 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
submitButton to submit the form.
telA control for entering phone numbers. The phone numeric keypad is displayed on devices with a dynamic keyboard.HTML5
textDefault. The text area of a single line, and the newline in the input will be automatically removed.
timeControl for entering time, excluding time zone.HTML5
urlControl for entering URL. Similar to text input, but with validation parameters, there is a corresponding keyboard on devices that support dynamic keyboard.HTML5
weekUsed to enter a date consisting of years and weeks without a time zone.
Obsolete value
datetimeUse 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
  return acc
}, {})
var list = []
for(let k in obj) list.push({tag: k, times: obj[k], ratio: (obj[k] * 100 / total).toFixed(2) + '%'})
console.table(list.sort((a, b) => b.times - a.times))

Topics: Front-end Firefox html chrome