Html--CSS--Script--dom--js(day10) 



知识点一、HTML




 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <!---头部-->
 5 <head>
 6     <!--自闭合标签-->
 7     <meta charset="UTF-8">
 8     <!--主动闭合标签-->
 9     <!--浏览器的title-->
10     <title>摩羯座</title>
11 </head>
12 <!-- 身体-->
13 <body>
14     <div>测试</div>
15 </body>
16 </html>








知识点二、<h1></h1><h2></h2>



1、自动补齐的两种方式


    

  • 输入<h1,然后输入>,自动补齐
    • 

  • 输入h2,然后按tab自动补齐
    • 




2、h1,h2标签的效果




 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <!---头部-->
 5 <head>
 6     <!--head中内容不被展示的，是规则也是规范-->
 7     <!--自闭合标签-->
 8     <meta charset="UTF-8">
 9     <!--主动闭合标签-->
10     <!--浏览器的title-->
11     <title>摩羯座</title>
12 </head>
13 <!-- 身体-->
14 <body>
15 <!--标题标签-->
16     <h1>h1</h1>
17     <h2>h2</h2>
18     <h2>h3</h2>
19     <h2>h4</h2>
20     <h2>h5</h2>
21     <h2>h6</h2>
22     <h2>h7</h2>
23 </body>
24 </html>




 




 


 




知识点三、div和 span




 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <!---头部-->
 5 <head>
 6     <!--head中内容不被展示的，是规则也是规范-->
 7     <!--自闭合标签-->
 8     <meta charset="UTF-8">
 9     <!--主动闭合标签-->
10     <!--浏览器的title-->
11     <title>摩羯座</title>
12 </head>
13 <!-- 身体-->
14 <body>
15 
16 <!--块级标签，无论自己多大，都沾满屏幕，伪白版标签-->
17     <div>这是div标签</div>
18 <!--行内标签又叫内联标签，自己有多大就占多大，也叫白板标签-->
19     <span>这是span标签</span>
20 
21 </body>
22 </html>




 






知识点四、标签属性




1 <!--属性:写在标签内部，<>之间的标签名之后，属性和属性之间用空格分隔-->
2 
3 <input type="text" placeholder="请输入用户名1">
4 <!--value是input的默认属性-->
5 <input type="text" value="请输入用户名2" >
6 <input type="password">






知识点五、复选框




 1   <form method="get">
 2 
 3     <span>男</span><input type="radio" name="sex">
 4     <span>女</span><input type="radio" name="sex">
 5     <span>篮球</span><input type="checkbox">
 6     <span>足球</span><input type="checkbox">
 7     <input type="file">
 8     <input type="text">
 9     <input type="reset">
10 </form>




 


　　






知识点六、重置按钮




 1 <form method="get">
 2     <span>男</span><input type="radio" name="sex" checked = checked>
 3     <span>女</span><input type="radio" name="sex">
 4     <span>篮球</span><input type="checkbox" checked = checked>
 5     <span>足球</span><input type="checkbox" checked = checked>
 6     <input type="file">
 7     <input type="text">
 8     <!--重置必须和form连用才起作用-->
 9     <input type="reset">
10 </form>




 






知识点七、sumit




<input type="text" name = "username">
<input type="password" name = "password">
<input type="submit" value = submit--登录>






 




 


 


知识点八、输入框




1 <!--点击用户名获取到输入框大标签-->
2 <span>用户名</span><input type="text">
3 <label for = "user">用户名</label><input type="text" id = "user">




 






知识点九、下拉框




1 <select>
2     <option value="2">篮球</option>
3     <option value="3">足球</option>
4     <option selected = "selected" value="1">兵乓球</option>
5 </select>




 




 


 


知识点十、链接跳转






<a href="http://www.baidu.com">跳转到百度1</a>
<!--原来的页面还在，新打开个页面-->
<a href="http://www.baidu.com"target="_blank" >跳转到百度2</a>




 







点击文字，发生跳转动作




知识点十一、textarea




1 <textarea>多行文字</texxtarea>




 












 


 


知识点二、CSS




 1 <!-- css 样式应用，有3处-->
 2 <!-- 1、标签内部通过style属性，来给标签设置css样式-->
 3 <!-- 2、head中增加style标签，在style标签内部，通过选择器为目标html配置css样式。-->
 4 <!-- 3、通过编写样式表文件 xxx.css 用link引入到当前html中。-->
 5 
 6 1、方式1：
 7 <!DOCTYPE html>
 8 <html lang="en">
 9 <head>
10     <meta charset="UTF-8">
11     <title>Title</title>
12 </head>
13 <body>
14     <div style="background-color: red">背景色</div>
15 </body>
16 </html>




 




 


 2、




 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="background-color: red;height:100px;width:100px">背景色</div>
 9 </body>
10 </html>




 


 




 


 方式2：




 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         /*#表示通过id选择器的方式定位*/
 8         #i1{
 9             background-color: red;
10             height:100px;
11             width:100px;
12         }
13     </style>
14 </head>
15 <body>
16     <div id = "i1">背景色</div>
17 </body>
18 </html>




 




 


 


3、方式3、




 


 


 


 4、三种方式同时存在的优先级：


1、标签中style属性是css的第一优先级--
2、以标签基础，由内到外 由近到远--




 


 


 




 


 3.1 选择器--id选择器--class选择器--标签选择器--属性选择器




 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 <!--    选择器-->
 7     <style>
 8         /*id选择器*/
 9         #i1{
10             background-color: red;
11             width: 100px;
12             height: 100px;
13         }
14         /*class 选择器*/
15         .c1{
16             background-color: green;
17             width: 100px;
18             height: 100px;
19         }
20       
21     </style>
22 
23 </head>
24 <body>
25 <!--id 选择器-->
26     <div id="i1">ID选择器</div>
27 <!--class选择器-->
28 
29     <div class="c1">class选择器</div>
30     <div class="c1">class选择器</div>
31     <div class="c1">class选择器</div>
32     <div class="c1">class选择器</div>
33     
34 </body>
35 </html>




 


 




 


 3.1.1




 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 <!--    选择器-->
 7     <style>
 8         /*id选择器*/
 9         #i1{
10             background-color: green;
11             width: 100px;
12             height: 100px;
13         }
14         /*class 选择器*/
15         .c1{
16             background-color: green;
17             width: 100px;
18             height: 100px;
19         }
20         .wh{
21             width: 100px;
22             height: 100px;
23         }
24         .bc-1{
25             background-color: red;
26         }
27         .bc-2{
28             background-color: blue;}
29     </style>
30 
31 </head>
32 <body>
33 <!--id 选择器-->
34     <div id="i1">ID选择器</div>
35 <!--class选择器-->
36 
37     <!--<div class="c1">class选择器</div>-->
38     <!--不同颜色 相同宽高的正方型 class属性允许有多个，通过空格分隔即可-->
39     <div class="wh bc-1"></div>
40     <div class="wh bc-2"></div>
41 
42 
43 </body>
44 </html>




 




 


 标签选择器




 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 <!--    选择器-->
 7     <style>
 8        
 9          /*标签选择器*/
10         div {
11             background-color: green;
12         }
13     </style>
14 
15 </head>
16 <body>
17     <!--    所有的div都是绿色的-->
18     <div class="wh">1111</div>
19 
20 </body>
21 </html>




 




层级选择器




 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 <!--    选择器-->
 7     <style>
 8         
 9         /*标签选择器*/
10         div {
11             background-color: green;
12         }
13         /*层级选择器 很少用*/
14         div span{
15             background-color: red;
16         }
17         
18     </style>
19 
20 </head>
21 <body>
22     <div>
23         <span>dsx</span>
24     </div>
25 
26 </body>
27 </html>




 




 


 属性选择器：




 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 <!--    选择器-->
 7     <style>
 8         .wh{
 9             width: 100px;
10             height: 100px;
11         }
12 
13          /*属性选择器*/
14         div[dsx="nb"]{
15             background-color: red;
16         }
17     </style>
18 
19 </head>
20 <body>
21     <div dsx = 'nb' class = 'wh'>
22     </div>
23 
24 </body>
25 </html>




 




 块变行，行变块




 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <link rel="stylesheet" href="demo.css">
 8     <style>
 9         #i1{
10             /*宽度允许百分比*/
11             background-color: green;
12             height: 100px;
13             width: 100%;
14         }
15         .wh {
16             width: 100px;
17             height: 100px;
18         }
19 
20         .bc-1 {
21             background-color: red;
22         }
23         .dis-inline {
24             /*由块级标签，变成行内标签*/
25           display: inline;
26         }
27         .dis-block{
28             /*行内转 块*/
29             display: block;
30         }
31         .dis-block-inline{
32             /*既是块也是行内*/
33             display: inline-block;
34         }
35         .c1{
36             border: 1px solid red;
37             width: 100%;
38             height: 200px;
39         }
40         .c2{
41             background-color: blue;
42             width: 100%;
43             height: 48px;
44             /*外边距*/
45             /*margin-top: 0;*/
46             /*内边距*/
47             padding-top: 0;
48 
49         }
50     </style>
51 
52 </head>
53 <body>
54 
55     <!--display-->
56     <div class="dis-inline bc-1">块div 变成行内</div>
57 
58 </body>
59 </html>




 




 


 




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="demo.css">
    <style>
        #i1{
            /*宽度允许百分比*/
            background-color: green;
            height: 100px;
            width: 100%;
        }
        .wh {
            width: 100px;
            height: 100px;
        }

        .bc-1 {
            background-color: red;
        }
        .dis-inline {
            /*由块级标签，变成行内标签*/
          display: inline;
        }
        .dis-block{
            /*行内转 块*/
            display: block;
        }
        .dis-block-inline{
            /*既是块也是行内*/
            display: inline-block;
        }
        .c1{
            border: 1px solid red;
            width: 100%;
            height: 200px;
        }
        .c2{
            background-color: blue;
            width: 100%;
            height: 48px;
            /*外边距*/
            /*margin-top: 0;*/
            /*内边距*/
            padding-top: 0;

        }
    </style>

</head>
<body>

    <!--display-->

    <span class="dis-block bc-1">123</span

</body>
</html>




 




 


 




 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <link rel="stylesheet" href="demo.css">
 8     <style>
 9         #i1{
10             /*宽度允许百分比*/
11             background-color: green;
12             height: 100px;
13             width: 100%;
14         }
15         .wh {
16             width: 100px;
17             height: 100px;
18         }
19 
20         .bc-1 {
21             background-color: red;
22         }
23         .dis-inline {
24             /*由块级标签，变成行内标签*/
25           display: inline;
26         }
27         .dis-block{
28             /*行内转 块*/
29             display: block;
30         }
31         .dis-block-inline{
32             /*既是块也是行内*/
33             display: inline-block;
34         }
35         .c1{
36             border: 1px solid red;
37             width: 100%;
38             height: 200px;
39         }
40         .c2{
41             background-color: blue;
42             width: 100%;
43             height: 48px;
44             /*外边距*/
45             /*margin-top: 0;*/
46             /*内边距*/
47             padding-top: 0;
48 
49         }
50     </style>
51 
52 </head>
53 <body>
54 
55     <!--行内标签必须自己有内容，无法应用宽、高、外边距、内边距-->
56     <span style="height: 100px;width: 100px;background-color: red">123</span>
57 
58 </body>
59 </html>




 




 


 




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="demo.css">
    <style>
        #i1{
            /*宽度允许百分比*/
            background-color: green;
            height: 100px;
            width: 100%;
        }
        .wh {
            width: 100px;
            height: 100px;
        }

        .bc-1 {
            background-color: red;
        }
        .dis-inline {
            /*由块级标签，变成行内标签*/
          display: inline;
        }
        .dis-block{
            /*行内转 块*/
            display: block;
        }
        .dis-block-inline{
            /*既是块也是行内*/
            display: inline-block;
        }
        .c1{
            border: 1px solid red;
            width: 100%;
            height: 200px;
        }
        .c2{
            background-color: blue;
            width: 100%;
            height: 48px;
            /*外边距*/
            /*margin-top: 0;*/
            /*内边距*/
            padding-top: 0;

        }
    </style>

</head>
<body>

    <!--行内标签必须自己有内容，无法应用宽、高、外边距、内边距-->
    <!--<span style="height: 100px;width: 100px;123</span>-->

    <span class="dis-block-inline wh bc-1"></span>
</body>
</html>




 




 


 




 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <link rel="stylesheet" href="demo.css">
 8     <style>
 9         #i1{
10             /*宽度允许百分比*/
11             background-color: green;
12             height: 100px;
13             width: 100%;
14         }
15         .wh {
16             width: 100px;
17             height: 100px;
18         }
19 
20         .bc-1 {
21             background-color: red;
22         }
23         .dis-inline {
24             /*由块级标签，变成行内标签*/
25           display: inline;
26         }
27         .dis-block{
28             /*行内转 块*/
29             display: block;
30         }
31         .dis-block-inline{
32             /*既是块也是行内*/
33             display: inline-block;
34         }
35         .c1{
36             border: 1px solid red;
37             width: 100%;
38             height: 200px;
39         }
40         .c2{
41             background-color: blue;
42             width: 100%;
43             height: 48px;
44             /*外边距*/
45             margin-top: 0;
46             /*内边距*/
47             padding-top: 0;
48 
49         }
50     </style>
51 
52 </head>
53 <body>
54     <div class="c1">
55         <div class="c2"></div>
56     </div>
57 
58 </body>
59 </html>




 




 知识点4、DOM（Document Object Model 文档对象模型）,课件：http://www.imdsx.cn/index.php/2017/07/27/html2/


一个web页面的展示，是由html标签组合成的一个页面，dom对象实际就是将html标签转换成了一个文档对象。可以通过dom对象中js提供的方法，找到html的各个标签。通过找到标签就可以操作标签使页面动起来，让页面动起来。


打开链接：http://ui.imdsx.cn/js/，检查，选择Console,输入document




 


 


 获取标签




 


 


 


1、鼠标定位想要获取的区域：




 


 


 


输入内容，显示结果：


1、id




 


 


 2、classname


 


 


 


 修改内容：innerText




修改innerHtml:




 


 


 


 


 innerText 和innerHtml之间也是有区别的，innerHtml:传入是符合Html标签规则的字符串，会被解析成标签




 


 


 


 


 


 


点击跳转到百度会跳转到百度页面，页面刷新后，返回再输入element 定义会被清空


 


修改输入框的内容


 


 


 


 


 


 


 


 


 


 


操作样式：




 


 




 


 




 


 


 


 


 


 


 


 


 


 


 


 


 


 


 知识点5、JS：课件：http://www.imdsx.cn/index.php/2017/07/27/html4/




 


 






 


 




 


 


 


 






 


 


 


 


 


 


 


数组循环： 


第一种for循环：




 


 


 


第二种for循环




 


 




 


 字典循环：




 


 


 


 字符串循环：




 


 




 


 switch 判断




 


 


 




 


 


定义选择器，通过选择器的方式，隐式绑定方法，稍微安全一点


 匿名函数：




 


 




 


函数作用域：和python一样


 


 




 


 定义变量的方式：


const age = 18;  // 常量不能修改


声明常量，不能更改：




 


 


 


 第二种定义变量：


预解析：


先把var student= undefined




 


 




 


 


 






            

            
posted @ 
2019-12-01 17:32 
洛歆陌离 
阅读(143) 
评论(0) 
编辑 
收藏 
举报