- Written in front: refer to the tutorial of Bilibili dark horse programmer pink teacher
- Address: https://www.bilibili.com/video/BV14J4114768?t=328&p=26
table of Contents
HTML5
Concept introduction
- The core language of the World Wide Web, the fifth major revision of Hypertext Markup Language (HTML) under the standard universal markup language.
- It is used to replace the new generation standard version of HTML4 and XHTML, so it is called HTML5.
XHTML Extensible Hypertext Markup Language, XHTML is an enhanced HTML, its scalability and flexibility will meet the needs of future network applications HTML5
HTML5 is designed to support multimedia on mobile devices.
It adds new features: a semantic characteristic, a local storage characteristics, compatibility Laid device , connectivity characteristics, web multimedia features, three-dimensional, graphics and special effects Laid properties, performance characteristics and integration, CSS3 characteristics.
Some elements and attributes such as font, center, etc. are discarded...
- HTML5 advantages
- Improve usability and improve user-friendly experience
- Better semantic labeling
- Can bring more multimedia elements (video and audio) to the site
- Can be a good substitute for FLASH and Silverlight
- When it comes to website crawling and indexing, it is very SEO friendly;
- Will be widely used in mobile applications and games
- Good portability
- HTML5 disadvantages
- This standard is not well supported by PC browsers
- HTML in a broad sense : HTM L5 in a broad sense is HTML5 itself + CSS3 + JavaScript
- HTML5 MDN introduction: https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML
H5 adds semantic tags
Semantic labeling
- In the past, we basically used div for layout. For search engines, div has no semantics.
<div class=“header”> </div> <div class=“nav”> </div> <div class=“content”> </div> <div class=“footer”> </div>
Add semantic tags
<header> Header tag <nav> Navigation tab <article> Content label <section> Block label <aside> Sidebar label <footer> Tail tag
- note:
- This semantic standard is mainly for search engines
- These new tab pages can be used multiple times
- In IE9, these elements need to be converted into block-level elements
- In fact, we prefer to use these tags on mobile
H5 adds multimedia tags
- There are two multimedia tags, as follows:
Audio <audio> video <video>
- Using them can easily embed audio and video in the page, instead of using outdated flash and other browser plug-ins.
Audio tag
audioLabel description
- It can natively support the playback of audio format files without using tags,
- But: the playback format is limited
- audio supported audio formats
- audio currently supports three formats
- Case:
<body> <!-- <audio src="media/snow.mp3" controls="controls"></audio> --> <audio controls="controls"> <source src="media/snow.mp3" type="audio/mpeg" /> <source src="media/snow.ogg" type="audio/ogg" /> 您的浏览器不支持播放声音 </audio> </body>
- parameters of audio
Multimedia video tags
- video video tags
- Currently supports three formats
- Grammar format
<video src="./media/video.mp4" controls="controls"></video>
- video parameters
- Case:
<!-- <video src="media/video.mp4" controls="controls"></video> --> <!-- 谷歌浏览器把自动播放功能给禁用了 有解决方案： 给视频添加静音属性 --> <video muted="muted" loop="loop" poster="media/pig.jpg" controls> <source src="media/video.mp4" type="video/mp4" /> <source src="media/video.ogg" type="video/ogg" /> 您的浏览器太low了，不支持播放此视频 </video>
- Multimedia tag summary
- Audio tags and video tags are basically the same
- Multimedia tags are different in different browsers, and there are compatibility issues
- Google Chrome bans the automatic playback of audio and video tags
- Add muted tag to video in Google Chrome and play it by yourself
- Note: Just remember how to use it and autoplay, other attributes can be found in the corresponding manual when using
New input tag
- Case:
<form action=""> <ul> <li>邮箱: <input type="email" /></li> <li>网址: <input type="url" /></li> <li>日期: <input type="date" /></li> <li>日期: <input type="time" /></li> <li>数量: <input type="number" /></li> <li>手机号码: <input type="tel" /></li> <li>搜索: <input type="search" /></li> <li>颜色: <input type="color" /></li> <li> <input type="submit" value="提交"></li> </ul> </form>
New form attributes
- Case:
<form action=""> 用户名: <input type="text" required="required" placeholder="请输入用户名" autofocus="autofocus" name="username" autocomplete="off"> <input type="submit" value="提交"> 上传头像: <input type="file" name="" id="" multiple="multiple"> </form>
