本文共 5981 字,大约阅读时间需要 19 分钟。
css/common.css是css文件夹的文件名称。而在hbuilderX中,只要打出link即可弹出提示,推荐把link写在中。
css行内样式的写法如上:可以直接在某个标签容器中添加属性style=" ",然后直接在这个属性里面写css样式即可,这种写法不推荐
js/main.js是js文件夹的文件名称。
js的页面级使用,script>标签直接写js代码简单的文本输入。
其中中间是放置的网页的头部,
DOCTYPE元素:如果浏览器支持h5,就强制使用h5风格,如果不支持,就不使用。
练习中
在使用hbuilderX书写html语言时,可以使用div#wrapper再加上tab键来生成
,其中wrapper是自己定义的一个id名称。同样的,可以使用div.logo再加上tab键来生成 。当使用这样的快捷生成时,div#wrapper > div.logo可生成: 此类包含的结构;
而使用,div.logo + div.nav 可生成: 此类平级的结构;
此处是创建导航栏操作,使用 a加上tab键就可以生成,#是填写链接网址的地方。
>
iframe就是一个html框架,里面可以承载一个网页。iframe标签可以用在表单提交处理信息,可以用在访问其他网址,内容可以呈现html显示出来的风格。
注册信息
表单的作用,主要功能:用来存放需要提交给服务器的元素。form表单提交的是,内部带有name标签的元素给服务器页面,action对应的页面。数据提交方式method的值为post的时候可以提交大量的数据,如果数据较少,就使用get
表单中可以存放:input,type各种类型;select,option下拉列表;textarea 文本域,可以多行;button 按钮。
好好学习
Menu标签type=“context”;
Menuitem项label=“项目内容”;
注意menu的ID要对应contextmenu的值;
右键菜单必须采用menu标签模块,每一项的内容必须使用menuitem
注意:contextmenu右键菜单目前只支持火狐浏览器,右键菜单的书写模式非常严格,便签不能随便使用,能修改的就是label的内容。
学习编程这里可以编辑
- 网页设计
- VB
contenteditable的值是一个布尔类型的true表示可以编辑,false表示不能编辑。默认情况下contenteditable=true后的子容器可以被编辑,例如ul;如果说子容器中有contenteditable=false的容器标签,那么这子容器不能被编辑。
简单的文本编辑效果可以使用h5的全局属性contenteditable,这个属性的编辑效果,可以直接在word复制进去看到效果,可以用在简单的文章编辑效果中。
编程数据
dom数据的存取在h5中直接使用data-自定义属性来存储数据的值,数据的获取需要配合js来获取,dom中存储数据一般都是临时使用的数据。
序号 | 兴趣 | 班级 | 姓名 |
---|---|---|---|
1 | 撸猫 | 一 | 王子 |
2 | LOL | 二 | 吴世 |
用css来渲染table:
table tr td:nth-child(odd){}
——nth-child()伪类:用来选择第几项,参数中可以填写数字或者奇偶。此处为选择表格中的基数项,如果是even则为偶数项。table tr:first-child{}
——表格的第一项。table tr td:last-child{}
——表格的最后一项。table tr:nth-child(5){}
——表格的第五行。如上代码,是marquee鼠标事件,鼠标经过(悬停)事件‘onmouseover’让图片停止运动 js的stop方法,鼠标离开事件 ‘onmouseout’让图片开始运动 js的start方法 。其中:
behavior="alternate"
上下或左右循环运动;behavior="scroll"
一个方向的运动;behavior="slide"
一个方向运动一次 。而scrolldelay="1" scrollamount="40"
用来控制速度的联动效果,表示每隔一毫秒,运动40像素。loop表示运动循环的次数。
快捷方式打出viewport。
标题、LOGO
#wrapper{ /* 最大宽度为960px */ max-width: 960px; display: -moz-box; display: -webkit-box; /* 改变box弹性框布局中内部元素的排列方式,orient表示方向,vertical表示纵向,horizontal表示横向(默认) */ -webkit-box-orient: vertical; -moz-box-orient: vertical; /* 让box弹性框内部元素100%显示,box-flex表示按比例显示,1就是一份,2就是两份,但0表示固定宽度,不是0就表示可变 */ -moz-box-flex: 1; -webkit-box-flex: 1; /*元素宽度的计算公式=border边框大小+padding内边距大小+width宽度+margin外边距大小 在使用box-sizing:border-box;之后,新的元素宽度计算公式=width宽度+margin外边距大小。 */ box-sizing: border-box; /* 兼容谷歌,苹果的浏览器 chrome,safari*/ -webkit-box-sizing: border-box; /* 兼容火狐的浏览器firebox */ -moz-box-sizing: border-box;}body{ /* 在body中,让整个内部框架居中的方式——弹性框的布局 */ display: -moz-box; display: -webkit-box; /*水平居中 */ -moz-box-pack: center; -webkit-box-pack: center; /*垂直居中 */ -moz-box-align: center; -webkit-box-align: center; /* 自适应 */ -webkit-box-pack: justify; -moz-box-pack: justify; /*居左*/ -webkit-box-pack: start; -moz-box-pack: start; /* 居右*/ -webkit-box-pack: end; -moz-box-pack: end; /* 排版逆向 */ -webkit-box-direction:reverse;}#wrapper .box3 { /* 数字代表先后顺序,越大越排在后面 */ -webkit-box-ordinal-group:2 ;}#wrapper>section article:hover{ /* 使用box-shadow至少要使用三个值,分别是颜色,水平偏移距离,垂直偏移距离 ——偏移值如果是负值就是反方向偏移*/ /* box-shadow一共有五个值——box-shadow:颜色,水平偏移距离,垂直偏移距离,模糊像素值,内部(inset)或外部阴影(不用写这个值,默认就是外部) */ box-shadow: gray 5px 5px 30px; padding: 10px; border-radius: 10px;}
box中默认子容器横向排列,box:相当于块级元素,类似于block ;inline-box 同一行的元素,类似于inline-block。
主流浏览器的前缀: -moz- firebox火狐; -webkit- safari和chrome ; -o- opera;-khtml- koqueror;-ms- IE; -chrome- chrome 。
<strong>赞</strong>
——可以使其中的写入的内容加粗。<li>aaaaaa</li>
——在输入的内容前面加上圆点。<br/>
——换行符号 。
——代表空格。<select></select>
——创建下拉框外壳。<option></option>
——创建下拉框内容。placeholder=""
——是写在input标签中的,显示在文本框里的提示信息。dblclick
——双击事件。<textarea></textarea>
——多行文本。<input></input>
——单行文本。<input type="checkbox">
——单个复选框。<input type="radio">
——单选按钮。<mark></mark>
——突出显示特殊重要文字,给字体一个背影颜色;用于被浏览器收录后的快照 。<em><em>
——表示强调,字体变成斜体了,易于被搜索引擎收录,代替以前的<i>
。<b></b>
——用于其他情况的加粗。<small></small>
——最后版权声明使用。<cite></cite>
——用于显示作品标题,一般还要带书名号。<address></address>
——这个元素应该包含在<footer>
标签中,表示合同信息。<time datetime="2019-10-12" pubdate="true">发布于2019-10-12</time>
——时间标签,datetime表示机器可读时间戳,pubdate表示属性值得出版日期。<div class="btn btns1">登 录</div>
——在html元素中的class属性,可以写多个css样式,依次从左到右的各个样式,用空格隔开,右边的css样式,会覆盖css左边的相同的css样式属性的值。转载地址:http://kmugn.baihongyu.com/