A: audio and video audio video
<audio src = '' '' > // mp3, m4a, avi ...
Note: The default audio and video controls are hidden
controls: display controls
loop: through a bad player
autoplay: // Autoplay now many browser user experience to prohibit automatic playback, video playback will automatically mute plus, plus audio mute does not play automatically
muted: silent
If you want to make music with buttoned same effect: audio label + hide the control (default the style controls with HTML css plus analog) + javaScript to implement interactive features
Note: By default, the video can not be stretched too, only proportional to
object-fit: cover; covering operation, so that the video can cover the entire parent container
source:
In order to support the adaptation issue multiple files, you can use the tag source
II: New form controls
type = INPUT "" In Email ""
INPUT type = "URL"
INPUT type = "Number"
INPUT type = '' Range '' minLength = "" MAXLENGTH = "" value = "" STEP = ""
// minimum length, maximum length, the current value of each step movement distance
INPUT type = '' DATE ''
INPUT type = "month the"
INPUT type = "Week"
input type = '' search '' when behind after you have written the contents of an x button
input type = "color" color of the control
input type = "tel" phone number input box (the difference with the normal frame, the mobile terminal will since tone soft keyboard with numbers)
the INPUT of the type = "time" time control
Form how it values passed to the back end of the
name- card
value- money
back-end based on name to get the value
of new property of the form: autocomplete = "off" to close the form default message alert (Tip history entered a user name)
The autofocus: Automatic Get cursor
required: the value can not be null
pattern: regular authentication (js content)
Transmission: method: data transmission
GET:
POST:
Transmission type:
the enctype: data transfer type
application / x-www-form- urlencoded: The default text is transmitted
multipart / form-data file transfer
III: Columns layout
column-count: 3; the number of columns of
column-width: 110px; width of the columns of
the number and width do not write with
column-gap: 50px; columns spacing
column-rule: 1px solid pink ; columns sideline
column-span: merge num bar | all
IV: pseudo-class dummy elements
#elem: {} After
#elem: hover {}
In css2.1 time: elem: after {} √
in css3 when #elem: After #elem × {} {} :: After √
#elem: hover {} {} √ × #elem :: hover
pseudo-class: single colon: hover: link ... pseudo class will only act on elements operating
pseudo-elements: the double-colon - :: after :: before acting to create a virtual container out, the equivalent of style added to the virtual container
Five: Extended Learning link tags
<link rel="dns-prefetch" href="//static.360buyimg.com">
提前去进行域名的dns解析
<link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">
给头标签页添加小图标
Six: Extended meta tags, meta-information (additional information)
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="大连美团网精选大连美食餐厅,酒店预订,电影票,旅游景点,外卖订餐,大连团购信息,您可查询商家评价店铺信息。大连生活,下载美团官方APP ,吃喝玩乐1折起。">
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">
注：网页的描述信息，有助于搜索引擎搜索。
<meta name="renderer" content="webkit">
已哪个引擎去渲染页面。有的浏览器可能有多个引擎，chrome : webkit blink ..
<meta http-equiv="X-UA-Compatible" content="ie=edge">
ie浏览器已什么方式渲染edge最新版进行渲染，ie9 ie10 -> edge
<meta http-equiv="refresh" content="3" url="">
每个多长时间可以对浏览器进行刷新
<meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT">
在指定的时间内，请求资源会走缓存。
Seven: CSS Hack?
We have been using is the chrome browser, but there are many other browsers, of course, these browsers can be called advanced browser.
CSS Hack 解决那些古老的浏览器兼容性问题。
Hack分类
下载：ieTester工具 , 测试在服务器环境下。
1. CSS属性前缀法
_ + * \9 \0 ...
2. 选择器前缀法
*html
3. IE条件注释法
<!--[if IE]>…<![endif]-->
IE6 BUG 非常多：
1. IE6高度的最小值是19px ,解决 overflow:hidden;
2. IE6双边距问题margin和float，解决 display:inline;
