快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

html5默认值,html5标签默认值

HTML5初学者笔记

HTML5记录

创新互联专业为企业提供泸水网站建设、泸水做网站、泸水网站设计、泸水网站制作等企业网站建设、网页设计与制作、泸水企业网站模板建站服务,十多年泸水做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

一、VS code引入插件后运行,终端执行

二、引入外部js文件:

1、js的exports.a = a;方式暂时不知道怎么做

2、直接引入,script之后可以直接使用。参照html-vue项目

3、数据类型

String、Number、Boolean、Null、undefined、symbol、Object、Array、Function

三、 JS显示数据方式:

window.alert()

document.write()

innerHTML=‘’

console.log()

四、 let、const、var

五、全局变量、局部变量注意点

如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。

六、事件:

onchange、onclick、onmouseover、onmouseout、onkeydown、onload…

html dom onclick之类的直接使用,vue是@click,小程序是bindTap

七、 this关键字:

1、在对象方法中, this 指向调用它所在方法的对象。

2、单独使用 this,它指向全局(Global)对象。

3、函数使用中,this 指向函数的所属者。

4、严格模式下函数是没有绑定到 this 上,这时候 this 是 undefined。

5、在 HTML 事件句柄中,this 指向了接收事件的 HTML 元素。

6、apply 和 call 允许切换函数执行的上下文环境(context),即 this 绑定的对象,可以将 this 引用到任何对象。

八、 箭头函数:

1、有的箭头函数都没有自己的 this 。 不适合定义一个 对象的方法。

2、当我们使用箭头函数的时候,箭头函数会默认帮我们绑定外层 this 的值,所以在箭头函数中 this 的值和外层 的 this 是一样的。

3、箭头函数是不能提升的,所以需要在使用之前定义。

4、使用 const 比使用 var 更安全,因为函数表达式始终是一个常量。

九、闭包:

闭包是一种保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不受外界干扰。

直观的说就是形成一个不销毁的栈环境。

闭包会持有父方法的局部变量和参数并且不会随父方法销毁而销毁

不必要的闭包只会增加内存消耗

十、 事件

body事件:onload、onunload

元素事件:onclick、onmouseover、onmouseout、onmousedown、onmouseup、onfocus

事件捕获

document.getElementById(‘demo’).addEventListener(‘事件名’, 方法名, 是否捕获传递)

方法名:如果是相应事件,则只可写方法名methodName,写成methodName()则会自动执行

如果方法需要传递参数,则只可以使用匿名函数, function( { methodName(p1, p2) } );

是否捕获传递:默认false,即冒泡传递

IE8和更早版本: x.attachEvent("onclick", myFunction) ;

十一、Window加载,页面声明周期入口

window.onload = function () { }

十二、数据存储

localStorage不会被自动删除,

sessionStorage 网页关闭会自动删除

cookie

sql

manifest文件

区别:

localStorage只要在相同的协议、相同的主机名、相同的端口下,就能读取/修改到同一份localStorage数据。

sessionStorage比localStorage更严苛一点,除了协议、主机名、端口外,还要求在同一窗口(也就是浏览器的标签页)下。

十三、 CSS声明权重(选择器)

内联ID伪类属性类元素/类型通用

!important会改变优先级

十四、 元素隐藏/显示

1、dispatch:none 隐藏 不占用空间

2、visibility:hidden 隐藏,仍然占用空间

3、v-if 存在/不存在

4、v-show 只生成一次,占用内存

十五、 Position

static 默认方式,没有定位

fixed 相对于浏览器窗口固定定位,不占用文档流,其他元素会相对位移

absolute 相对于最近的已定位父元素定位,不占用文档流,其他元素会相对位移

relative 相对于自身的定位

sticky 粘滞定位,基于用户的滚动位置定位

十六、 float

1、只能左右浮动

2、左右浮动,直到外边缘碰到另一个浮动元素

3、浮动之后的元素将围绕它

4、浮动之前的元素不受影响

5、如果是图像浮动,下面的文本流将环绕它

6、clear声明的元素, 属性指定元素两侧不能出现浮动元素。

推荐使用flex布局

十七、 文字显示…

单行

任意行

十八、 box-shadow顺序

十九、 flex布局

容器属性:

属性 / 说明可选值

f方向: lex-direction

换行:flex-wrap

简写:flex-flow

主轴上的对齐方式:justify-content

交叉轴上如何对齐:align-items

多根轴线的对齐方式:align-content。

如果项目只有一根轴线,该属性不起作用

项目item属性:

order:排列顺序,越小越靠前

flex-grow:放大比例,2比1占用的空间大一倍

flex-shrink:缩小比例,默认1,当空间不足时等比例缩小。如果一个项目的属性为0,其他项目都为1,则空间 不足时,前者不缩小

flex-basis:定义了在分配多余空间之前,项目占据的主轴空间

flex :简写

align-self:允许单个项目与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

html 里select 下拉列表中设置默认值怎么写?

设置下拉列表框的默认值:使用关键字selected

select name = "pronvince"

option value ="SH"上海/option

option value ="BJ"北京/option

option value ="JS"江苏/option

option value ="HB" selected="selected"湖北/option

option value ="ZJ"浙江/option

/select

如果希望设置默认值,在option 的标签里加入:selected = "selected"即在展示时,为默认值。

html 有一个selected属性,selected=‘true’时,即选中,selected=‘false’则未选中。在html5中则将selected=‘true’可以缩写为selected,因为selected=‘false’是默认属性,比如: Volvo Saab Opel Audi 那么第4个option就是被选中的元素。

meter标签是什么?'>HTML5>meter标签是什么?

meter 标签是HTML5新增的标签,定义度量衡。仅用于已知最大和最小值的度量。也就是必须定义度量的范围,既可以在元素的文本中,也可以在 min/max 属性中定义。

meter min="0" max="20"5/meter

meter2 out of 10/meter

meter30%/meter

high    number    定义度量的值位于哪个点,被界定为高的值。    

low    number    定义度量的值位于哪个点,被界定为低的值。    

max    number    定义最大值。默认值是 1。    

min    number    定义最小值。默认值是 0。    

optimum    number    定义什么样的度量值是最佳的值。如果该值高于 "high" 属性,则意味着值越高越好。如果该值低于 "low" 属性的值,则意味着值越低越好。    

value    number    定义度量的值。

可以用CSS的伪元素对默认的显示方式处理下(因为很可能各个浏览器的显示方式不一):

!doctype html

html lang="en"

head

meta charset="UTF-8"

titleCoolwp.net Demo/title

style

.deal meter { -webkit-appearance: none; }

.deal ::-webkit-meter-bar {

height: 1em;

background: white;

border: 1px solid black;

}

.deal ::-webkit-meter-optimum-value { background: green; } /* 好 */

.deal ::-webkit-meter-suboptimum-value { background: orange; } /* 凑合 */

.deal ::-webkit-meter-even-less-good-value { background: blue; } /* 糟糕 */

.deal ::-moz-meter-bar {

background: rgba(0,96,0,.6);

}/style

/head

body

p

默认的:meter low="69" high="80" max="100" optimum="100" value="92"A/meter

meter low="69" high="80" max="100" optimum="100" value="72"C/meter

meter low="69" high="80" max="100" optimum="100" value="52"E/meter

/p

p class="deal"

处理后的:meter low="69" high="80" max="100" optimum="100" value="92"A/meter

meter low="69" high="80" max="100" optimum="100" value="72"C/meter

meter low="69" high="80" max="100" optimum="100" value="52"E/meter

/p

/body

/html

实际显示效果:


分享文章:html5默认值,html5标签默认值
网站链接:http://6mz.cn/article/dsdspop.html

其他资讯