html、css、javaScript演练题

作者: 韦德国际1946国际网址  发布:2019-05-28

1.HTML 指的是?               <超文本标识语言(Hyper Text 马克up Language)>

       javaScript作为壹种脚本语言能够直接嵌入到html网页里面由浏览器解释实践,在html页面运营javaScript有三种艺术,当中有二种方式是一直在html页面中编辑javaScript代码,第二种方法是独自将javacript代码生成叁个*.js文件保留在二个索引中由<script>标签的src属性导入到当前页面,上边就那二种艺术分别作以下讲授:

HTML文档 html,html5,css,css3,

HTML 各类标签及简单利用:

http://www.w3school.com.cn

 1 <p><p>
 2 <br/>
 3 <hr/>横线 
 4 <pre><pre>   保留了标签内的空格和换行
 5 <code>Computer code</code>
 6 <br />
 7 <kbd>Keyboard input</kbd>
 8 <br />
 9 <tt>Teletype text</tt>
10 <br />
11 <samp>Sample text</samp>
12 <br />
13 <var>Computer variable</var>
14 <br />
15 地址<address></address>
16 显示缩略词<abbr title="etcetera">etc.</abbr>
17 <acronym title="World Wide Web">WWW</acronym>
18   
19 <del></del>删除  
20 <ins></ins>插入  
21 <b></b> 加粗  
22  <strong></strong >加重语气 
23 <i></i>斜体  
24 <small></small>小字体  
25 <q></q>加引号
26 <blockquote></blockquote>长引用 
27  <a href="" targer="_blank"></a>  链接在新的窗口打开 
28   <a href="mailto:[email protected]?subject=hh again></a>   代替空格号

 1 &nbsp;空格 
 2 <h></h>标题 
 3 <tr><td></td><td></td></tr>  
 4 <table cellpadding="10"></table> 内边距  
 5  <table cellspacing="10"></table> 外边距
 6 bgcolor="red"  background=""  
 7  <table  frame="box“></table> above below  hsides(上和下)   vsides  (左和右) 
 8  <ul><li></li></ul>无序列表 左边有黑原点
 9 <ol start="50"><li><li></ol>左边有序号从50开始   
10 <dl><dt></dt><dd></dd><dd><dd></dl>
11 <form>
12 <input type="text" name="dd"/>
13 <input type="checkbox" name="cc" value="male"/>
14 <input type="checkbox" name="cc" value="female"/>
15 <select name="bb">
16 <option value="volvo">volvo</option>
17 <option value="f">f</option>
18 </select>
19 <textarea rows="10" cols="30">
20 ddddd
21 </textarea >
22 <fieldset>
23 <legend>ddd</legend>
24 </fieldset> 使表单周围有框
25 <input type="reset" value="重置"/>重置
26 </form>
27 <frameset cols="25%,50%,25%">
28     <frame src="dd.html">
29     <frame src="dd.html">
30     <frame src="dd.html">
31 </frameset>实现在一个页面内垂直展示三个页面内容—------网页
32 <frameset rows="25%,50%,25%">
33     <frame src="dd.html">
34     <frame src="dd.html">
35     <frame src="dd.html">    html5不支持了
36 </frameset>实现在一个页面内水平展示三个页面内容
37 <iframe src=""></iframe>内嵌的
38 <noscript></noscript>里面的显示不支持Js的文本
39 <video controls="controls">
40     <source src="movie.ogg" type="video/ogg">
41     <source src="movie.mp4" type="video/mp4">
42 </video>
43 
44 
45  

 

 1 <style type="text/css">
 2 #div1, #div2
 3 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
 4 </style>
 5 <script type="text/javascript">
 6 function allowDrop(ev)
 7 {
 8 ev.preventDefault();
 9 }
10 
11 function drag(ev)
12 {
13 ev.dataTransfer.setData("Text",ev.target.id);
14 }
15 
16 function drop(ev)
17 {
18  
19 var data=ev.dataTransfer.getData("Text");
20 ev.target.appendChild(document.getElementById(data));
21 }
22 </script>
23 </head>
24 <body>
25 
26 <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
27   <img src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
28 </div>
29 <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
30 移动图片到另一个盒子里  ---拖放  (event 是固定的变量)
31 
32 <script  type=”text/javascript”>
33 Function d(e)
34 {
35     X=e.clientX;
36     Y=e.clientY;
37     Document.getElementById(“cc”).innerHTML=”ddd:(“ x ”,” y ”)”;
38 }
39 Function c()
40 {
41     Document.getElementById(“cc”).innerHTML=””;
42 }
43 </script>
44 <div id=”dd” onmousemove=”d(event)” onmousemove=”c”></div>
45 <div id=”cc” ></div>
46 显示坐标
47 
48 画画
49 <canvas id=”cc”>
50 
51 </canvas>
52 <script type=”text/javascript”>
53  Var cl=document.getElementId(“cc”);
54  Var dddd=cl.getContent(“2d”);
55 dddd.moveTo(10,10);
56 dddd.lineTo(150,50);
57 dddd.lineTo(10,50);
58 dddd.stroke();
59     
60 </script>
61 
62 绘制圆、渐变、把一幅图像放置到画布上
63 内联 SVG

新成分HTML5<input>等标签及事件

  1 •    email
  2 •    url
  3 •    number
  4 •    range
  5 •    Date pickers (date, month, week, time, datetime, datetime-local)
  6 •    search
  7 •    color
  8 <input type="number" name="points" min="0" max="10" step="3" value="6" />
  9 <input type="range" name="points" min="1" max="10" />
 10 •    date - 选取日、月、年
 11 •    month - 选取月、年
 12 •    week - 选取周和年
 13 •    time - 选取时间(小时和分钟)
 14 •    datetime - 选取时间、日、月、年(UTC 时间)
 15 •    datetime-local - 选取时间、日、月、年(本地时间)
 16 Date: <input type="date" name="user_date" />
 17 
 18 
 19 <form action="/example/html5/demo_form.asp" method="get">
 20 Webpage: <input type="url" list="url_list" name="link" />
 21 <datalist id="url_list">
 22     <option label="W3School" value="http://www.w3school.com.cn" />
 23     <option label="Google" value="http://www.google.com" />
 24     <option label="Microsoft" value="http://www.microsoft.com" />
 25 </datalist>
 26 <input type="submit" />
 27 </form>
 28 
 29 
 30 keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。
 31 <keygen name="security" />
 32 
 33 <script type="text/javascript">
 34 function resCalc()
 35 {
 36 numA=document.getElementById("num_a").value;
 37 numB=document.getElementById("num_b").value;
 38 document.getElementById("result").value=Number(numA) Number(numB);
 39 }
 40 </script>
 41 </head>
 42 <body>
 43 <p>使用 output 元素的简易计算器:</p>
 44 <form onsubmit="return false">
 45  <input id="num_a" />  
 46  <input id="num_b" /> =
 47  <output id="result" onforminput="resCalc()"></output>
 48 </form>
 49 User name: <input type="text" name="user_name"  autofocus="autofocus" />
 50 自动获得焦点
 51 <form action="demo_form.asp" method="get" id="user_form">
 52 First name:<input type="text" name="fname" />
 53 <input type="submit" />
 54 </form>
 55 Last name: <input type="text" name="lname" form="user_form" />
 56 form 属性规定输入域所属的一个或多个表单。
 57 
 58 
 59 <form action="demo_form.asp" method="get" id="user_form">
 60 E-mail: <input type="email" name="userid" /><br />
 61 <input type="submit" value="Submit" />
 62 <br />
 63 <input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
 64 <br />
 65 <input type="submit" formnovalidate="true" value="Submit without validation" />
 66 <br />
 67 </form>
 68 创建不同的提交按钮
 69 
 70 height 和 width 属性只适用于 image 类型的 <input> 标签
 71 
 72 <input type="file" name="img" multiple="multiple" />----选择文件
 73 
 74 <form action="demo_form.asp" method="get" novalidate="true">让不验证
 75 
 76 Country code: <input type="text" name="country_code"
 77 pattern="[A-z]{3}" title="Three letter country code" />   插入正则表达式
 78 placeholder 提示(hint)会在输入域为空时显示出现,会在输入域获得焦点时消失:
 79 
 80 required="required"  (不能为空)
 81  
 84 <canvas id="myCanvas">your browser does not support the canvas tag </canvas>
 85 
 86 <script type="text/javascript">
 87 
 88 var canvas=document.getElementById('myCanvas'); 
 89 var ctx=canvas.getContext('2d');
 90 ctx.fillStyle='#FF0000';
 91 ctx.fillRect(0,0,80,100);
 92 
 93 </script>
 94 
 95  标签
 96 <embed src="/i/helloworld.swf" />                  flash
 97 <article></article>标记文章
 98 <header><section></section></header>头
 99 <nav><a></a></nav>中间放连接
100 <footer><address></address></footer>
101 <audio src="someaudio.wav">
102 您的浏览器不支持 audio 标签。
103 </audio>声音
104 <video></video>视频
105 
106 事件
107 <input type=”email url  number range color “/>
108 <body onload="load()">
109 onblur
110 onfocus 当元素失去焦点
111 onchange 
112 onselect
113 onsubmit     提交表单时
114 onclick
115 onbclick  双击
116  
117 http://www.w3school.com.cn/tags/html_ref_canvas.asp 画布

CSS种种质量及选用;

 1 body {
 2     
 3 }
 4 
 5 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:
 6 body 
 7   {
 8   background-image:url(/i/eg_bg_02.gif);
 9   background-repeat:no-repeat;
10   background-attachment:fixed
11   }
12 p {text-indent: -5em; padding-left: 5em;}首行缩进
13 justify 水平对齐  text-align 
14 a {text-decoration: none;}格式下划线取消啥的
15 
16 a:link {color:#FF0000;}        /* 未被访问的链接 */
17 a:visited {color:#00FF00;}    /* 已被访问的链接 */
18 a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
19 a:active {color:#0000FF;}    /* 正在被点击的链接 */
20  
21 •    Serif 字体
22 •    Sans-serif 字体
23 •    Monospace 字体
24 •    Cursive 字体
25 •    Fantasy 字体
26 border-style:dotted solid double dashed; 
27 上边框是点状
28 右边框是实线
29 下边框是双线
30 左边框是虚线
31 body {font-family: sans-serif;}---字体
32 
33 white-space 设置为 pre-wrap,那么该元素中的文本会保留空白符序列,但是文本行会正常地换行。如果设置为这个值,源文本中的行分隔符以及生成的行分隔符也会保留。pre-line 与 pre-wrap 相反,会像正常文本中一样合并空白符序列,但保留换行符。
34 
35 ul {list-style-type : square}
36 ul li {list-style-image : url(xxx.gif)}
37 li {list-style : url(example.gif) square inside}列表样式
38 img[alt] {border: 5px solid red;} 带有 alt 属性的图像应用样式
39 
40 *[lang|="en"] {color: red;}
41 上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素
42   
43 ul
44 {
45 list-style-type:none;
46 margin:0;
47 padding:0;
48 }
49 li
50 {
51 display:inline;         
52 }                                ---块

html、css、javaScript演练题。CSS3

  1 border-radius:25px;
  2 -moz-border-radius:25px; /* 老的 Firefox */
  3  加圆角
  4 
  5 box-shadow: 10px 10px 5px #888888;         加阴影

 11 div
 12 {
 13 border:15px solid transparent;
 14 width:300px;
 15 padding:10px 20px;
 16 }
 17 
 18 #round
 19 {
 20 -moz-border-image:url(/i/border.png) 30 30 round;    /* Old Firefox */
 21 -webkit-border-image:url(/i/border.png) 30 30 round;    /* Safari and Chrome */
 22 -o-border-image:url(/i/border.png) 30 30 round;        /* Opera */
 23 border-image:url(/i/border.png) 30 30 round;
 24 }
 25 
 26 #stretch
 27 {
 28 -moz-border-image:url(/i/border.png) 30 30 stretch;    /* Old Firefox */
 29 -webkit-border-image:url(/i/border.png) 30 30 stretch;    /* Safari and Chrome */
 30 -o-border-image:url(/i/border.png) 30 30 stretch;    /* Opera */
 31 border-image:url(/i/border.png) 30 30 stretch;
 32 }
 33 </style>
 34 </head>
 35 <body>
 36 
 37 <div id="round">在这里,图片铺满整个边框。</div>
 38 <br>
 39 <div id="stretch">在这里,图片被拉伸以填充该区域。</div>
42 
 43 background-size:63px 100px;   背景图片缩小
 44 
 45 background-position:left;
 46 background-origin:border-box;
 47 background-origin:content-box;    背景定位
 48 background-clip:content-box;   颜色背景定位
 49 div.boxx
 50 {
 51 box-sizing:border-box;
 52  
 53 width:50%;
 54 border:1em solid red;
 55 float:left;
 56 }
 59 text-shadow: 5px 5px 5px #FF0000; 文本阴影
 60 
 61 允许对长单词进行拆分,并换行到下一行:
 62 p {word-wrap:break-word;}
 63 
 64 font-family:myFirstFont; 定义字体
 65 font-weight:bold; 
 66 
 67 transform:rotate(9deg);   旋转  
 68 transform:translate(50px,100px);  移动
 69 transform:scale(2,4); 横着放大2倍  竖着放大4倍
 70 transform: skew(30deg,20deg);   水平旋转 垂直旋转
 71 
 72 transform-origin:20% 80%;  定位
 73  
 74 transition:width  10s;
 75 div:hover
 76 {
 77 width:1000px;
 78 }   渐变效果
 79 
 80 
 81 .newspaper
 82 {
 83 -moz-column-count:3; /* Firefox */
 84 -webkit-column-count:3; /* Safari and Chrome */
 85 column-count:3;
 86 }                                  三列
 87 规定列之间 40 像素的间隔:
 88 div
 89 {
 90 -moz-column-gap:40px;        /* Firefox */
 91 -webkit-column-gap:40px;    /* Safari 和 Chrome */
 92 column-gap:40px;
 93 }
 94 规定列之间的宽度、样式和颜色规则:
 95 div
 96 {
 97 -moz-column-rule:3px outset #ff0000;    /* Firefox */
 98 -webkit-column-rule:3px outset #ff0000;    /* Safari and Chrome */
 99 column-rule:3px outset #ff0000;
100 }        
101 column-span:all;  横跨所有列
102 
103 
104 规定 div 元素可由用户调整大小:
105 div
106 {
107 resize:both;
108 overflow:auto;
109 }
110 
111 text-shadow: 5px 5px 5px #FF0000;  水平阴影、垂直阴影、模糊距离,以及阴影的颜色:
112 允许对长单词进行拆分,并换行到下一行:
113 p {word-wrap:break-word;}

学习心得,可供参照他事他说加以考察;

html,html5,css,css三, HTML种种标签及轻松利用: 韦德国际1946国际网址, 一 pp 二 br/ 三 hr/横线 四 prepre 保留了标签内的空格和换行 5 codeComputer...

HTML 种种标签及简单利用:

2.Web 标准的制定者是?               <万维网联盟(W3C)>

一:使用超链接方式

      在h5中负有具备超链接属性的标签都能够一贯推行Javascript所定义的作用;格式为Src="javascript:********",下边实例定义了2个<a></a>标签,当进入页面时点击标签内容“第二种格局”就会实行Javacript:alert('hello world');

韦德国际1946国际网址 1

代码实例一

       实践结果如下:

韦德国际1946国际网址 2

实行结果

http://www.w3school.com.cn

 1 <p><p>
 2 <br/>
 3 <hr/>横线 
 4 <pre><pre>   保留了标签内的空格和换行
 5 <code>Computer code</code>
 6 <br />
 7 <kbd>Keyboard input</kbd>
 8 <br />
 9 <tt>Teletype text</tt>
10 <br />
11 <samp>Sample text</samp>
12 <br />
13 <var>Computer variable</var>
14 <br />
15 地址<address></address>
16 显示缩略词<abbr title="etcetera">etc.</abbr>
17 <acronym title="World Wide Web">WWW</acronym>
18   
19 <del></del>删除  
20 <ins></ins>插入  
21 <b></b> 加粗  
22  <strong></strong >加重语气 
23 <i></i>斜体  
24 <small></small>小字体  
25 <q></q>加引号
26 <blockquote></blockquote>长引用 
27  <a href="" targer="_blank"></a>  链接在新的窗口打开 
28   <a href="mailto:someone@microsoft.com?subject=hh again></a>   代替空格号

 1 &nbsp;空格 
 2 <h></h>标题 
 3 <tr><td></td><td></td></tr>  
 4 <table cellpadding="10"></table> 内边距  
 5  <table cellspacing="10"></table> 外边距
 6 bgcolor="red"  background=""  
 7  <table  frame="box“></table> above below  hsides(上和下)   vsides  (左和右) 
 8  <ul><li></li></ul>无序列表 左边有黑原点
 9 <ol start="50"><li><li></ol>左边有序号从50开始   
10 <dl><dt></dt><dd></dd><dd><dd></dl>
11 <form>
12 <input type="text" name="dd"/>
13 <input type="checkbox" name="cc" value="male"/>
14 <input type="checkbox" name="cc" value="female"/>
15 <select name="bb">
16 <option value="volvo">volvo</option>
17 <option value="f">f</option>
18 </select>
19 <textarea rows="10" cols="30">
20 ddddd
21 </textarea >
22 <fieldset>
23 <legend>ddd</legend>
24 </fieldset> 使表单周围有框
25 <input type="reset" value="重置"/>重置
26 </form>
27 <frameset cols="25%,50%,25%">
28     <frame src="dd.html">
29     <frame src="dd.html">
30     <frame src="dd.html">
31 </frameset>实现在一个页面内垂直展示三个页面内容—------网页
32 <frameset rows="25%,50%,25%">
33     <frame src="dd.html">
34     <frame src="dd.html">
35     <frame src="dd.html">    html5不支持了
36 </frameset>实现在一个页面内水平展示三个页面内容
37 <iframe src=""></iframe>内嵌的
38 <noscript></noscript>里面的显示不支持Js的文本
39 <video controls="controls">
40     <source src="movie.ogg" type="video/ogg">
41     <source src="movie.mp4" type="video/mp4">
42 </video>
43 
44 
45  

3.在下列的 HTML 中,哪个是最大的标题?<h一>

二:使用<script></script>标签

      这种办法是当页面运维时一贯实践JavaScript内容,示比方下(因为实例代码内部尚未别的标签,当试行代码时浏览器就能一向试行<script>标签内容):

韦德国际1946国际网址 3

代码实例2

韦德国际1946国际网址 4

运作结果

 

肆.在下列的 HTML 中,哪个能够插入折行?<br>

三:导入javascrip代码

      这种办法可以完结将javascript代码与html代码分离的效率,需求用到<script></script>标签的src属性,下边实例在当前目录下创办了一个test.js文件,浏览器执行到<script></script>内容时就能够依照src属性内容导入text.js文件同不经常间施行,实比方下:

韦德国际1946国际网址 5

test.js文件内容

韦德国际1946国际网址 6

html代码内容

韦德国际1946国际网址 7

运行结果

 1 <style type="text/css">
 2 #div1, #div2
 3 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
 4 </style>
 5 <script type="text/javascript">
 6 function allowDrop(ev)
 7 {
 8 ev.preventDefault();
 9 }
10 
11 function drag(ev)
12 {
13 ev.dataTransfer.setData("Text",ev.target.id);
14 }
15 
16 function drop(ev)
17 {
18  
19 var data=ev.dataTransfer.getData("Text");
20 ev.target.appendChild(document.getElementById(data));
21 }
22 </script>
23 </head>
24 <body>
25 
26 <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
27   <img src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
28 </div>
29 <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
30 移动图片到另一个盒子里  ---拖放  (event 是固定的变量)
31 
32 <script  type=”text/javascript”>
33 Function d(e)
34 {
35     X=e.clientX;
36     Y=e.clientY;
37     Document.getElementById(“cc”).innerHTML=”ddd:(“ x ”,” y ”)”;
38 }
39 Function c()
40 {
41     Document.getElementById(“cc”).innerHTML=””;
42 }
43 </script>
44 <div id=”dd” onmousemove=”d(event)” onmousemove=”c”></div>
45 <div id=”cc” ></div>
46 显示坐标
47 
48 画画
49 <canvas id=”cc”>
50 
51 </canvas>
52 <script type=”text/javascript”>
53  Var cl=document.getElementId(“cc”);
54  Var dddd=cl.getContent(“2d”);
55 dddd.moveTo(10,10);
56 dddd.lineTo(150,50);
57 dddd.lineTo(10,50);
58 dddd.stroke();
59     
60 </script>
61 
62 绘制圆、渐变、把一幅图像放置到画布上
63 内联 SVG

5.在下列的 HTML 中,哪个能够增进背景颜色?<body bgcolor="yellow">

小结:三种方法各有最适用的景况,当JavaScript代码量十分的少而且无需JavaScript代码与HTML代码分离时可利用第三种艺术,当JavaScript代码量相比多而且没有要求JavaScript代码与HTML代码分离时可选取第2种方法,当必要JavaScript代码与HTML代码分离时使用第二种办法相比适用;

新成分HTML伍<input>等标签及事件

6.请采取爆发粗体字的 HTML 标签:      <b>

  1 •    email
  2 •    url
  3 •    number
  4 •    range
  5 •    Date pickers (date, month, week, time, datetime, datetime-local)
  6 •    search
  7 •    color
  8 <input type="number" name="points" min="0" max="10" step="3" value="6" />
  9 <input type="range" name="points" min="1" max="10" />
 10 •    date - 选取日、月、年
 11 •    month - 选取月、年
 12 •    week - 选取周和年
 13 •    time - 选取时间(小时和分钟)
 14 •    datetime - 选取时间、日、月、年(UTC 时间)
 15 •    datetime-local - 选取时间、日、月、年(本地时间)
 16 Date: <input type="date" name="user_date" />
 17 
 18 
 19 <form action="/example/html5/demo_form.asp" method="get">
 20 Webpage: <input type="url" list="url_list" name="link" />
 21 <datalist id="url_list">
 22     <option label="W3School" value="http://www.w3school.com.cn" />
 23     <option label="Google" value="http://www.google.com" />
 24     <option label="Microsoft" value="http://www.microsoft.com" />
 25 </datalist>
 26 <input type="submit" />
 27 </form>
 28 
 29 
 30 keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。
 31 <keygen name="security" />
 32 
 33 <script type="text/javascript">
 34 function resCalc()
 35 {
 36 numA=document.getElementById("num_a").value;
 37 numB=document.getElementById("num_b").value;
 38 document.getElementById("result").value=Number(numA) Number(numB);
 39 }
 40 </script>
 41 </head>
 42 <body>
 43 <p>使用 output 元素的简易计算器:</p>
 44 <form onsubmit="return false">
 45  <input id="num_a" />  
 46  <input id="num_b" /> =
 47  <output id="result" onforminput="resCalc()"></output>
 48 </form>
 49 User name: <input type="text" name="user_name"  autofocus="autofocus" />
 50 自动获得焦点
 51 <form action="demo_form.asp" method="get" id="user_form">
 52 First name:<input type="text" name="fname" />
 53 <input type="submit" />
 54 </form>
 55 Last name: <input type="text" name="lname" form="user_form" />
 56 form 属性规定输入域所属的一个或多个表单。
 57 
 58 
 59 <form action="demo_form.asp" method="get" id="user_form">
 60 E-mail: <input type="email" name="userid" /><br />
 61 <input type="submit" value="Submit" />
 62 <br />
 63 <input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
 64 <br />
 65 <input type="submit" formnovalidate="true" value="Submit without validation" />
 66 <br />
 67 </form>
 68 创建不同的提交按钮
 69 
 70 height 和 width 属性只适用于 image 类型的 <input> 标签
 71 
 72 <input type="file" name="img" multiple="multiple" />----选择文件
 73 
 74 <form action="demo_form.asp" method="get" novalidate="true">让不验证
 75 
 76 Country code: <input type="text" name="country_code"
 77 pattern="[A-z]{3}" title="Three letter country code" />   插入正则表达式
 78 placeholder 提示(hint)会在输入域为空时显示出现,会在输入域获得焦点时消失:
 79 
 80 required="required"  (不能为空)
 81  
 84 <canvas id="myCanvas">your browser does not support the canvas tag </canvas>
 85 
 86 <script type="text/javascript">
 87 
 88 var canvas=document.getElementById('myCanvas'); 
 89 var ctx=canvas.getContext('2d');
 90 ctx.fillStyle='#FF0000';
 91 ctx.fillRect(0,0,80,100);
 92 
 93 </script>
 94 
 95  标签
 96 <embed src="/i/helloworld.swf" />                  flash
 97 <article></article>标记文章
 98 <header><section></section></header>头
 99 <nav><a></a></nav>中间放连接
100 <footer><address></address></footer>
101 <audio src="someaudio.wav">
102 您的浏览器不支持 audio 标签。
103 </audio>声音
104 <video></video>视频
105 
106 事件
107 <input type=”email url  number range color “/>
108 <body onload="load()">
109 onblur
110 onfocus 当元素失去焦点
111 onchange 
112 onselect
113 onsubmit     提交表单时
114 onclick
115 onbclick  双击
116  
117 http://www.w3school.com.cn/tags/html_ref_canvas.asp 画布

7.请选用爆发斜体字的 HTML 标签:      <i>

CSS种种品质及运用;

捌.在下列HTML 中,哪个能够发生超链接?<a href=";

 1 body {
 2     
 3 }
 4 
 5 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:
 6 body 
 7   {
 8   background-image:url(/i/eg_bg_02.gif);
 9   background-repeat:no-repeat;
10   background-attachment:fixed
11   }
12 p {text-indent: -5em; padding-left: 5em;}首行缩进
13 justify 水平对齐  text-align 
14 a {text-decoration: none;}格式下划线取消啥的
15 
16 a:link {color:#FF0000;}        /* 未被访问的链接 */
17 a:visited {color:#00FF00;}    /* 已被访问的链接 */
18 a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
19 a:active {color:#0000FF;}    /* 正在被点击的链接 */
20  
21 •    Serif 字体
22 •    Sans-serif 字体
23 •    Monospace 字体
24 •    Cursive 字体
25 •    Fantasy 字体
26 border-style:dotted solid double dashed; 
27 上边框是点状
28 右边框是实线
29 下边框是双线
30 左边框是虚线
31 body {font-family: sans-serif;}---字体
32 
33 white-space 设置为 pre-wrap,那么该元素中的文本会保留空白符序列,但是文本行会正常地换行。如果设置为这个值,源文本中的行分隔符以及生成的行分隔符也会保留。pre-line 与 pre-wrap 相反,会像正常文本中一样合并空白符序列,但保留换行符。
34 
35 ul {list-style-type : square}
36 ul li {list-style-image : url(xxx.gif)}
37 li {list-style : url(example.gif) square inside}列表样式
38 img[alt] {border: 5px solid red;} 带有 alt 属性的图像应用样式
39 
40 *[lang|="en"] {color: red;}
41 上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素
42   
43 ul
44 {
45 list-style-type:none;
46 margin:0;
47 padding:0;
48 }
49 li
50 {
51 display:inline;         
52 }                                ---块

玖.怎么塑造电子邮件链接?                <a href="mailto:xxx@yyy">

CSS3

10.哪些在新窗口张开链接?               <a href="url" target="_blank">

  1 border-radius:25px;
  2 -moz-border-radius:25px; /* 老的 Firefox */
  3  加圆角
  4 
  5 box-shadow: 10px 10px 5px #888888;         加阴影

 11 div
 12 {
 13 border:15px solid transparent;
 14 width:300px;
 15 padding:10px 20px;
 16 }
 17 
 18 #round
 19 {
 20 -moz-border-image:url(/i/border.png) 30 30 round;    /* Old Firefox */
 21 -webkit-border-image:url(/i/border.png) 30 30 round;    /* Safari and Chrome */
 22 -o-border-image:url(/i/border.png) 30 30 round;        /* Opera */
 23 border-image:url(/i/border.png) 30 30 round;
 24 }
 25 
 26 #stretch
 27 {
 28 -moz-border-image:url(/i/border.png) 30 30 stretch;    /* Old Firefox */
 29 -webkit-border-image:url(/i/border.png) 30 30 stretch;    /* Safari and Chrome */
 30 -o-border-image:url(/i/border.png) 30 30 stretch;    /* Opera */
 31 border-image:url(/i/border.png) 30 30 stretch;
 32 }
 33 </style>
 34 </head>
 35 <body>
 36 
 37 <div id="round">在这里,图片铺满整个边框。</div>
 38 <br>
 39 <div id="stretch">在这里,图片被拉伸以填充该区域。</div>
42 
 43 background-size:63px 100px;   背景图片缩小
 44 
 45 background-position:left;
 46 background-origin:border-box;
 47 background-origin:content-box;    背景定位
 48 background-clip:content-box;   颜色背景定位
 49 div.boxx
 50 {
 51 box-sizing:border-box;
 52  
 53 width:50%;
 54 border:1em solid red;
 55 float:left;
 56 }
 59 text-shadow: 5px 5px 5px #FF0000; 文本阴影
 60 
 61 允许对长单词进行拆分,并换行到下一行:
 62 p {word-wrap:break-word;}
 63 
 64 font-family:myFirstFont; 定义字体
 65 font-weight:bold; 
 66 
 67 transform:rotate(9deg);   旋转  
 68 transform:translate(50px,100px);  移动
 69 transform:scale(2,4); 横着放大2倍  竖着放大4倍
 70 transform: skew(30deg,20deg);   水平旋转 垂直旋转
 71 
 72 transform-origin:20% 80%;  定位
 73  
 74 transition:width  10s;
 75 div:hover
 76 {
 77 width:1000px;
 78 }   渐变效果
 79 
 80 
 81 .newspaper
 82 {
 83 -moz-column-count:3; /* Firefox */
 84 -webkit-column-count:3; /* Safari and Chrome */
 85 column-count:3;
 86 }                                  三列
 87 规定列之间 40 像素的间隔:
 88 div
 89 {
 90 -moz-column-gap:40px;        /* Firefox */
 91 -webkit-column-gap:40px;    /* Safari 和 Chrome */
 92 column-gap:40px;
 93 }
 94 规定列之间的宽度、样式和颜色规则:
 95 div
 96 {
 97 -moz-column-rule:3px outset #ff0000;    /* Firefox */
 98 -webkit-column-rule:3px outset #ff0000;    /* Safari and Chrome */
 99 column-rule:3px outset #ff0000;
100 }        
101 column-span:all;  横跨所有列
102 
103 
104 规定 div 元素可由用户调整大小:
105 div
106 {
107 resize:both;
108 overflow:auto;
109 }
110 
111 text-shadow: 5px 5px 5px #FF0000;  水平阴影、垂直阴影、模糊距离,以及阴影的颜色:
112 允许对长单词进行拆分,并换行到下一行:
113 p {word-wrap:break-word;}

11.之下选项中,哪个全部是表格标签?   <table><tr><td>

学习心得,可供参照他事他说加以考察;

1二.请选用能够使单元格中的内容开展左对齐的不错 HTML 标签:<td align="left">

一三.哪些发生带有数字列表符号的列表?     <ol>

1四.怎么产生带有圆点列表符号的列表?     <ul>

一伍.在下列的 HTML 中,哪个能够发生复选框?<input type="checkbox">

1六.在下列的 HTML 中,哪个能够发生文本框?<input type="text">

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:html、css、javaScript演练题

关键词: 伟德 程序员 编程笔记 html html5

上一篇:没有了
下一篇:没有了