css+html+js学习笔记---html

阅读量：3925 次

发布时间：2019-05-23

本文共 5981 字，大约阅读时间需要 19 分钟。

CSS+HTML+JS中关于HTML

关于连接css或者js文件

css/common.css是css文件夹的文件名称。而在hbuilderX中，只要打出link即可弹出提示，推荐把link写在中。

css行内样式的写法如上：可以直接在某个标签容器中添加属性style=" "，然后直接在这个属性里面写css样式即可，这种写法不推荐

js/main.js是js文件夹的文件名称。

js的页面级使用，script>标签直接写js代码简单的文本输入。

关于HTML结构

其中中间是放置的网页的头部，放置的是网页的标题，放置网页的主题部分。

DOCTYPE元素：如果浏览器支持h5，就强制使用h5风格，如果不支持，就不使用。

在使用hbuilderX书写html语言时，可以使用div#wrapper再加上tab键来生成

，其中wrapper是自己定义的一个id名称。同样的，可以使用div.logo再加上tab键来生成

。

当使用这样的快捷生成时，div#wrapper > div.logo可生成：此类包含的结构；

而使用，div.logo + div.nav 可生成：此类平级的结构；

HTML的一些实例

导航栏


    
    首页 
    编程开发 
    人生旅程 
    摄影摄像 
    电脑技巧 
    编程创造城市

此处是创建导航栏操作，使用 a加上tab键就可以生成，#是填写链接网址的地方。

插入图片

创建一个点击按钮

iframe

iframe就是一个html框架，里面可以承载一个网页。iframe标签可以用在表单提交处理信息，可以用在访问其他网址，内容可以呈现html显示出来的风格。

表单

表单的作用，主要功能：用来存放需要提交给服务器的元素。form表单提交的是，内部带有name标签的元素给服务器页面，action对应的页面。数据提交方式method的值为post的时候可以提交大量的数据，如果数据较少，就使用get

表单中可以存放：input，type各种类型；select，option下拉列表；textarea 文本域，可以多行；button 按钮。

contextmenu右键菜单

		
   
    			好好学习

Menu标签type=“context”；

Menuitem项label=“项目内容”；

注意menu的ID要对应contextmenu的值；

右键菜单必须采用menu标签模块，每一项的内容必须使用menuitem

注意：contextmenu右键菜单目前只支持火狐浏览器，右键菜单的书写模式非常严格，便签不能随便使用，能修改的就是label的内容。

contenteditable文本编辑

	
   
    学习编程
   
	
   
    		这里可以编辑		
    			
     网页设计
			
     VB

contenteditable的值是一个布尔类型的true表示可以编辑，false表示不能编辑。默认情况下contenteditable=true后的子容器可以被编辑，例如ul；如果说子容器中有contenteditable=false的容器标签，那么这子容器不能被编辑。

简单的文本编辑效果可以使用h5的全局属性contenteditable，这个属性的编辑效果，可以直接在word复制进去看到效果，可以用在简单的文章编辑效果中。

data-属性，自定义数据

	
   
    编程数据

dom数据的存取在h5中直接使用data-自定义属性来存储数据的值，数据的获取需要配合js来获取，dom中存储数据一般都是临时使用的数据。

table表格

		
   		
   
			    			    				           					      序号       					      兴趣 					      班级 					      姓名 				     
			    
			    				     					      1       					      撸猫 					      一 					      王子 				     
				     					      2 					      LOL 					      二 					      吴世

序号	兴趣	班级	姓名
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){}——表格的第五行。

html的滚动标签：marquee

如上代码，是marquee鼠标事件，鼠标经过(悬停)事件‘onmouseover’让图片停止运动 js的stop方法，鼠标离开事件 ‘onmouseout’让图片开始运动 js的start方法。其中：

behavior="alternate" 上下或左右循环运动；

behavior="scroll" 一个方向的运动；

behavior="slide" 一个方向运动一次。

而scrolldelay="1" scrollamount="40"用来控制速度的联动效果，表示每隔一毫秒，运动40像素。loop表示运动循环的次数。

网页自适应各个设备

width=device-width:宽度等于当前设备的宽度；

height=device-height:高度等于当前设备的高度；

initial-scale=1:初始的缩放比例(默认的设备为100%)；

minimum-scale=1 允许用户缩放到的最小比例。

maximum-scale=1 允许用户缩放到的最大比例。

user-scalable=no 用户是否可以手动缩放(默认设置为no，用户不能放大缩小页面)。

快捷方式打出viewport。

H5中的布局标签

		
   			
    标题、LOGO
		
   
		
   		
   			
    			
    				
     Vue
			
    
		
   
		
   			
    			
    				
     
      				
      					
      						
       
					
      					
      					
      						
       						
       						
       
					
      
				
     
			
    
			
    			
    
     				噢噢			
    
		
   
		
   
    			©zkzkzkzkzk

弹性框架-box

#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 。