zoukankan      html  css  js  c++  java
  • 九、html基础、CSS基础、DOM基础

    (一)HTML基础标签

    1、页面由三部分组成:HTML标签(页面有样式)、CSS样式(页面更好看)、JS代码(页面可操作)

    2、HTML标签:

    (1)打开pycharm,新建一个html文件

    (2)HTML:能够被浏览器所识别的代码,我们称之为HTML标签。

    (3)一个页面由一个一个的html标签所组成。

    (4)每个标签所代表的含义不同。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        普通的字符串
        <h1>被h1包裹的字符串</h1>
        <h2>被h1包裹的字符串</h2>
        <h3>被h1包裹的字符串</h3>
        <h4>被h1包裹的字符串</h4>
        <h5>被h1包裹的字符串</h5>
    <!-- 一对h1标签 -->
    </body>
    </html>

    3、HTML标签分别有哪些及解析样式:

    (1)标签的组成:

    lang 是标签的属性
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <!--  字符集  -->
        <meta charset="UTF-8">
    <!--  浏览器的Tab -->
        <title>Learning</title>
    </head>
    <body>
        普通的字符串
        <h1>被h1包裹的字符串</h1>
        <h2>被h1包裹的字符串</h2>
        <h3>被h1包裹的字符串</h3>
        <h4>被h1包裹的字符串</h4>
        <h5>被h1包裹的字符串</h5>
    <!-- 一对h1标签 -->
    </body>
    </html>

    (2)自闭合标签和主动闭合标签

    <meta charset="UTF-8">      自闭合标签
    <title>Learning</title>     主动闭合标签

    (3)head标签特点

    <head></head>     在head标签中写的内容,大部分是不会在页面中被看到的。

    (4)body标签特点:

    <body></body>     页面中展示的样子,主要在body标签中进行开发。

    (5)在head标签内添加图标:link rel ="shortcut icon" href="XXXXXX"

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <!-- 描述当前网站的基本信息 -->
        <meta name="description" content="hello world">
        <!--  检索信息-关键词  -->
        <meta name="keywords" content="hooray">
        <!--  浏览器的Tab -->
        <title>Learning</title>
        <!--  Tab的图标  -->
        <link rel="shortcut icon" href="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2314218918,543343578&fm=26&gp=0.jpg">
    </head>

    (6)在head标签中添加样式表stylesheet

    <!--  样式表stylesheet  -->
        <link rel="stylesheet" href="">

    (7)在head标签中添加style标签

     <!--  写样式  -->
        <style></style>

    (8)在head标签中添加script标签

    <!--  写JS  -->
        <script></script>

    (9)在body中添加段落标签:<p></p>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <!-- 段落标签 -->
    <p>举头望明月,低头思故乡!</p>
    <p>锄禾日上午,汗滴禾下土;谁知盘中餐,粒粒皆辛苦。</p>
    </body>
    </html>

    (10)在body中添加换行标签:<br>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>古诗</title>
    </head>
    <body>
    <!-- 段落标签  换行标签-->
    <p>窗前明月光,疑是地上霜。<br>举头望明月,低头思故乡!</p>
    <p>锄禾日上午,汗滴禾下土。<br>谁知盘中餐,粒粒皆辛苦。</p>
    </body>
    </html>

    (11)在body标签中添加空格符:&nbsp

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>古诗</title>
    </head>
    <body>
    <!-- 段落标签  换行标签-->
    <p>窗前明月光,&nbsp&nbsp&nbsp疑是地上霜。<br>举头望明月,&nbsp&nbsp&nbsp低头思故乡!</p>
    <p>锄禾日上午,&nbsp&nbsp&nbsp汗滴禾下土。<br>谁知盘中餐,&nbsp&nbsp&nbsp粒粒皆辛苦。</p>
    </body>
    </html>

    (12)在body中,进行添加(&ltp&gt&lt/p&gt)展示段落标签

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>古诗</title>
    </head>
    <body>
    <!-- 段落标签  换行标签-->
    <p>窗前明月光,&nbsp&nbsp&nbsp疑是地上霜。<br>举头望明月,&nbsp&nbsp&nbsp低头思故乡!</p>
    <p>锄禾日上午,&nbsp&nbsp&nbsp汗滴禾下土。<br>谁知盘中餐,&nbsp&nbsp&nbsp粒粒皆辛苦。</p>
    <p></p> 段落标签
    &ltp&gt&lt/p&gt段落标签
    </body>
    </html>

     (13)在body中,添加h1~h6标签

        <h1>h1标签</h1>
        <h2>h2标签</h2>
        <h3>h3标签</h3>
        <h4>h4标签</h4>
        <h5>h5标签</h5>
        <h6>h6标签</h6>

    (14)body中,div标签和span标签:区别是div标签占满一整行,span标签根据自己多大占多大(块级标签和行内标签)

    <!--div是伪白板标签:块级标签,无论内容多大,均占满一整行-->
    <div>我是div标签</div>
    
    <!--span是白板标签:行内标签,自己有多大,就占多大-->
    <span>我是span标签</span>
    • 关于div是伪白板标签,截图所示:

    •  关于span是白板标签,截图所示:

    (15)body中,input标签

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>古诗</title>
    </head>
    <body>
    
    <form action="https://www.baidu.com" method="post">
    <input type="text" placeholder="请填写用户名" value="小明" name="username">
    <!--password 密码框-->
    <input type="password" placeholder="请输入密码" value="" name="password">
    <!--button 按钮类型-->
    <input type="button" value="button登录">
    <!--form表单的方式提交-->
    <input type="submit" value="submit登录">
    </form>
    
    </body>
    
    </html>
    • 浏览器打开方式:post请求方式(截图一)

    •  浏览器打开方式:get请求方式(截图二)

     (16)form提交和ajax(代指一类,异步提交)提交

    • form提交已经被废弃很久了,用户体验非常差,每次提交都会刷新页面,以前录入的信息都会消失;
    • 大多数用的都是异步提交,当触发登录按钮(click事件)时,前端悄悄发送一个请求给后端,页面无感知,等后端返回信息后,通过判断后端的字段,来决定是否要跳转到下一个页面。

    (17)button和submit区别登录

    <form action="https://www.baidu.com" method="get">
    <input type="text" placeholder="请填写用户名" value="小明" name="username">
    <!--password 密码框-->
    <input type="password" placeholder="请输入密码" value="" name="password">
    
    <!--button 按钮类型-->
        <!--使用JS,通过button按钮,进行click事件绑定:来触发异步登录-->
    <input type="button" value="button登录">
    
    <!--form表单的方式提交-->
        <!--submit 属性 可以和 form标签连用:拥有提交操作-->
    <input type="submit" value="submit登录">
    </form>

    (18)其他标签的使用:(如reset、checkbox、radio、file)

     <!--重置属性:必须和form标签连用才有用效果-->
        <input type="reset">
    
        <!--多选框--><input type="checkbox" name="sex" value="1" checked="checked"><input type="checkbox" name="sex" value="2">
    
        <!--单选框-->
        中国<input type="radio" checked="checked" name="nationality">
        美国<input type="radio" name="nationality">
        
        <!--文件:file-->
        <input type="file">

     (19)label标签使用:

    <form action="https://www.baidu.com" method="get">
    
        <!--通过label标签扩大input的聚焦范围 通过for属性绑定 input的id属性-->
        <label for="u1">用户名:</label><input id="u1" type="text" placeholder="请填写用户名" value="小明" name="username">

    (20)多行文本textarea

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>古诗</title>
    </head>
    <body>
    
        <textarea name="t1">多行文本</textarea>
    
    </body>
    </html>

    如截图所示:

     (21)下拉框标签selected

    <!--下拉框标签-->
    <select name="city">
    
        <option value="1">北京</option>
        <option value="2" selected="selected">上海</option>
        <option value="3">广州</option>
    
    </select>

    如图所示:

    请问:select中option为什么要以枚举的方式定义?

    1 代表 北京

    2 代表 上海

    3 代表 广州

    A:信息若是敏感信息,不了解1 2 3的含义。

    B:中文算2个字符,数字和英文算1个字符,提高效率。

    (22)在select标签中,添加分组标签optgroup

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>古诗</title>
    </head>
    <body>
    
    <select name="" >
        <optgroup label="北京">
            <option>东城区</option>
            <option>西城区</option>
            <option>海淀区</option>
        </optgroup>
    
        <optgroup label="河北">
            <option>石家庄</option>
            <option>唐山</option>
            <option>秦皇岛</option>
        </optgroup>
    </select>
    
    </body>
    </html>

    如图所示:

     (23)超链接a标签

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>古诗</title>
    </head>
    <body>
    
    <!--a超链接标签   target="_blank"打开新标签页面-->
    
    <a href="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2586890322,1270380610&fm=26&gp=0.jpg" target="_blank">图像地址
    </a>
    
    </body>
    </html>

    如图所示:

     (24)img图片标签

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>古诗</title>
    </head>
    <body>
    
    <!--img 图片标签-->
    <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=584858828,3339321933&fm=26&gp=0.jpg" title="鼠标悬浮显示的文字" alt="图片加载失败显示的字段">
    
    </body>
    </html>

    (25)ul li 和 ol li形式的列表标签

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>古诗</title>
    </head>
    <body>
    
    <ul>
        <li>参数1</li>
        <li>参数2</li>
        <li>参数3</li>
    </ul>
    
    <ol>
        <li>参数1</li>
        <li>参数2</li>
        <li>参数3</li>
    </ol>
    
    </body>
    </html>

    如图所示:

     (26)分层标签:dl dt dd

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>古诗</title>
    </head>
    <body>
    
    <!--dl dt dd 分层标签-->
    <dl>
        <dt>北京</dt>
        <dd>西城</dd>
        <dd>东城</dd>
        <dt>天津</dt>
        <dd>和平区</dd>
        <dd>武清区</dd>
       </dl>
    
    </body>
    </html>

    如图所示:

     (27)table表格标签

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>古诗</title>
    </head>
    <body>
    
    <!--tr 行-->
    <!--th 表头的列-->
    <!--td body的列-->
    <table border="1">
        <thead>
            <tr>
                <th>id</th>
                <th>method</th>
                <th>uri</th>
                <th colspan="2">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td rowspan="3">post</td>
                <td>/api/interface</td>
                <td>edit</td>
                <td>delete</td>
            </tr>
    
            <tr>
                <td>2</td>
                <td>/api/interface</td>
                <td>edit</td>
                <td>delete</td>
            </tr>
    
            <tr>
                <td>3</td>
                <td>/api/interface</td>
                <td>edit</td>
                <td>delete</td>
            </tr>
        </tbody>
    </table>
    
    </body>
    </html>

    (二)CSS样式基础

    1、在HTML页面中,有几处可以写CSS样式?

    答:有3处,分别为:

    (1)div的style属性

    (2)head的style标签中,可以写CSS属性

    (3)可以通过link标签,引入样式表对HTML进行样式附着

    2、css练习:

    demo.css

    #i2{
        background-color: pink;
    }

    HTML代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 样式表 stylesheet -->
        <link rel="stylesheet" href="demo.css">
        <!-- 写样式 -->
        <style>
            #i1{
                background-color: greenyellow;
            }
        </style>
    
    </head>
    <body>
        <div style="background-color: purple">one</div>
        <div id="i1">two</div>
        <div id="i2">three</div>
    </body>
    </html>

    截图如下:

     3、选择器

    (1)id选择器:

    • id选择器, 特殊符号:#
    • id是唯一的,理论上整个html中不允许出现重复,在编码时会有报错提示,如图:

    • 正确编码如下:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 样式表 stylesheet -->
        <link rel="stylesheet" href="demo.css">
        <!-- 写样式 -->
        <style>
            /*#i1{*/
                /*background-color: greenyellow;*/
            /*}*/
            /*选择器*/
            /*id选择器 关键符号 # */
            #i3,#i4{
                background-color: deepskyblue;
            }
        </style>
    
    </head>
    <body>
    
        <div id="i3">Jungle Bell</div>
        <div id="i4">Jungle Bell</div>
    
    
    </body>
    </html>

     (2)class选择器(常用)

    • class选择器,特殊符号.(英文.)
    • class允许重复,
    • 一个标签可以拥有多个class
    <div class="c1 c3">good good study</div>

    编码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 样式表 stylesheet -->
        <link rel="stylesheet" href="demo.css">
        <!-- 写样式 -->
        <style>
    
            /*class 选择器*/
            .c1{
                background-color: orangered;
            }
    
    </style>
    
    </head>
    <body>
    
        <div class="c1">Animals</div>
        <div class="c1">Plants</div>
        <div class="c1">Vegetables</div>
        <div class="c1">Fruits</div>
    
    </body>
    </html>

     (3)标签选择器

    • 直接写标签名称
    • 特性:所有标签都受影响
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 样式表 stylesheet -->
        <link rel="stylesheet" href="demo.css">
        <!-- 写样式 -->
        <style>
           
            /* 标签选择器*/
            div{
                background-color: yellow;
            }
        </style>
    
    </head>
    <body>
        <div>标签选择器</div>
        <div>标签选择器</div>
        <div>标签选择器</div>
        <div>标签选择器</div>
    
    </body>
    </html>

    (4)属性选择器

    编码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 样式表 stylesheet -->
        <link rel="stylesheet" href="demo.css">
        <!-- 写样式 -->
        <style>
      
            /*属性选择器*/
            div[name="label"]{
                background-color: darkseagreen;
            }
        </style>
    
    </head>
    <body>
    
        <div name="label">selected</div>
    
    </body>
    </html>

    4、CSS优先级

    (1)div上的style属性,优先级最高

    (2)以div为基础,由近到远去找CSS样式

    (3)编码如下:

    demo.css

    #i1{
        background-color: pink;
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>优先级</title>
    
        <link rel="stylesheet" href="demo.css">
        
    <style>
            #i1{
                background-color: greenyellow;
            }
        </style>
    
    </head>
    
    <body>
        <div id="i1" style="background-color: red">one</div>
    </body>
    
    </html>

    如图所示:

     5、高度height和宽度width

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 样式表 stylesheet -->
        <link rel="stylesheet" href="demo.css">
        <!-- 写样式 -->
        <style>
    
            .c1{
                background-color: yellow;
    
                /*height高度理论上不能用100%*/
                /*实际上如果父标签,有高度,那么子标签就可以用100% == 父标签的高度*/
                height: 100px;
                width: 100px;
    
                /*自适应布局,占满屏幕:100%*/
                /* 100%;*/
            }
        </style>
    
    </head>
    <body>
    
        <div class="c1"></div>
    
    </body>
    </html>

    6、字体大小:font-size           字体加粗:font-weight

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 样式表 stylesheet -->
        <link rel="stylesheet" href="demo.css">
        <!-- 写样式 -->
        <style>
    
            .c2{
                /*字体大小可以写默认的*/
                /*font-size: larger;*/
                /*字体大小可以写像素的*/
                font-size: 100px;
                font-weight: bolder;
    
            }
        </style>
    
    </head>
    <body>
    
        <div class="c2">字体大小</div>
        <div>字体大小</div>
    
    </body>
    </html>

    7、水平文本对齐方式:text-align

    left:文本左对齐;right:文本右对齐;center:中间对齐;inherit:父类继承

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 样式表 stylesheet -->
        <link rel="stylesheet" href="demo.css">
        <!-- 写样式 -->
        <style>
      
            /*!*class 选择器*!*/
    
            .c1{
                background-color: yellow;
                border:1px red solid;
                height: 100px;
                width: 100px;
            }
    
            .c3{
                /*水平居中*/
                text-align:center;
            }
    
        </style>
    
    </head>
    <body>
    
        <div class="c1 c3">good good study</div>
    
    </body>
    </html>        

    8、垂直文本对齐方式:line-height

    line-height的属性直接对应外层div的宽度就可以

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 样式表 stylesheet -->
        <link rel="stylesheet" href="demo.css">
        <!-- 写样式 -->
        <style>
                
            .c1{
                /*background-color: yellow;*/
                border:1px red solid;
    
            }
    
            .c3{
                /*水平居中*/
                text-align:center;
                /*垂直居中*/
                line-height: 100px;
            }
    
        </style>
    
    </head>
    <body>
    
        <div class="c1 c3">study</div>
    
    </body>
    </html>

    9、浮动:float(块级标签浮动后,相当于分层)

    • 通过浮动可以将块及标签放到一行,相当于不同层,但超过100%的宽度就会换行,超过100%的宽度,相对于外层div来判断;
    • none:默认不浮动     
    • inherit:父类继承
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 样式表 stylesheet -->
        <link rel="stylesheet" href="demo.css">
        <!-- 写样式 -->
        <style>
           
            .c1{
                /*background-color: yellow;*/
                border:1px red solid;
                height: 100px;
                width: 100px;
            }
    
            .c4{
                float: left;
            }
    
            .c5{
                float: right;
            }
    
        </style>
    
    </head>
    <body>
    
    <div class="c1 c4"></div>
    <div class="c1 c4"></div>
    <div class="c1 c5"></div>
    
    </body>
    </html>

    10、分层:position

    • position:fixed 固定在窗口的某个位置   top:距离顶部多少像素  left right bottom 
    • position:relative   与 position:absolute(绝对定位)组合使用,单个使用没有作用

    绝对定位:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>分层</title>
    
        <style>
            .header{
                height: 48px;
              background-color: aquamarine;
                line-height: 48px;
                text-align: center;
                /*绝对定位*/
                position: fixed;
                top:0;
                right:0;
                left:0;
            }
        </style>
    </head>
    <body>
        <div class="header">HTML</div>
        <div style="height: 1000px; 100px">模拟body</div>
    </body>
    </html>

    相对定位:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>分层</title>
    
        <style>
            .header{
                height: 4px;
              background-color: aquamarine;
                line-height: 48px;
                text-align: center;
                /*绝对定位*/
                position: fixed;
                top:0;
                right:0;
                left:0;
            }
    
            .c2{
                height: 400px;
                width: 400px;
                border: 1px red solid;
                /*相对定位*/
                position: relative;
            }
    
            .c3{
                background-color: red;
                width: 100px;
                height: 100px;
                position:absolute;
            }
        </style>
    </head>
    <body>
        <div class="header">HTML</div>
        <div style="height: 48px; 100px">模拟body</div>
        <div class="c2">
            <div class="c3" style="top:0;left:0"></div>
            <div class="c3" style="top:0;right:0"></div>
            <div class="c3" style="bottom:0;left:0"></div>
            <div class="c3" style="bottom:0;right:0"></div>
        </div>
    </body>
    </html>

    11、外边距:margin,自己针对外围的div产生变化,外边距撑大外层(top left right bottom)

      内边距:padding,自身的边距增加;top:自上到下增加;bottom:从下增加;left:从左增加;right:从右增加;

           层级关系:z-index,分层后,z-index来记录层级关系,越大越在前面

    (1)外边距:

    <!--外边距 自己相对父标签 进行位移 不改变自身-->
    
    <div class="c1" style=" 100%">
        <div style=" 100%;height:20px;background-color: greenyellow;margin-top: 10px"></div>
    </div>

    (2)内边距

    <!--内边距 改变自身-->
    <div class="c1" style=" 100%">
        <div style=" 100%;height: 20px;background-color: greenyellow;padding-top: 10px"></div>
    </div>

    (3)样例:解决分层优先级(z-index)和分层上方隐藏被遮盖问题(margin-top):

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>分层</title>
    
        <style>
            .header{
                height: 48px;
              background-color: aquamarine;
                line-height: 48px;
                text-align: center;
                /*绝对定位*/
                position: fixed;
                top:0;
                right:0;
                left:0;
                /*解决优先级问题*/
                z-index: 999;
            }
            .c2{
                height: 1000px;
                width: 400px;
                border: 1px red solid;
                /*相对定位*/
                position: relative;
                /*加外边距,解决上方分层隐藏被遮盖的问题*/
                margin-top: 48px;
            }
            .c3{
                background-color: red;
                width: 100px;
                height: 100px;
                position:absolute;
            }
        </style>
    </head>
    <body>
        <div class="header">HTML</div>
        <!--<div style="height: 48px; 100px">模拟body</div>-->
        <div class="c2">
            <div class="c3" style="top:0;left:0"></div>
            <div class="c3" style="top:0;right:0"></div>
            <div class="c3" style="bottom:0;left:0"></div>
            <div class="c3" style="bottom:0;right:0"></div>
        </div>
    </body>
    </html>

     12、display:展示属性

    (1)块级标签和行内标签之间切换的属性

    • display:inline,块级标签转换为行内标签display
    • display:block,行内标签转换为块级标签

    (2)行内标签无法设置高度、宽度、padding、margin

    (3)通过display的display:inline-block,行内标签的自己多大就占多大的特性,又有块级标签使用宽、高、内外边距的属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 样式表 stylesheet -->
        <link rel="stylesheet" href="demo.css">
        <!-- 写样式 -->
        <style>
           
             .c1{
                /*background-color: yellow;*/
                border:1px red solid;
    
        </style>
    
    </head>
    <body>
    
        <!--让一个标签变为块级标签 display:block-->
        <!--让一个标签变为行内标签 display:-->
        <!--行内标签 是不能 应用 宽 高 外边距 内边距 这几种属性的-->
        <!--既是行内标签 又是块级标签-->
        <div class="c1" style="display: inline-block">hello</div>
    </body>
    </html>

    (4)隐藏元素   display:none  

    <!--display:none 隐藏元素-->
        <div class="c1" style="display: none"></div>

    如图所示:

    13、cursor:一些不同的光标

    (1)cursor:pointer 鼠标的小手

    (2)cursor:move 元素移动

    <input type="button" value="登录" style="cursor: pointer">

    14、overflow:overflow属性设置,当div内的内容溢出div高度时,会默认出现在元素框之外

    • hidden:溢出部分截取掉
    • scroll:超出就出现滚动条
    • auto:自动判断是否出现滚动条
    <!--overflow 滚动条 overflow:auto 自动判断是否出现滚动条  overflow:hidden 截取-->
        <div class="c1" style="overflow: auto">
            <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2690869028,3052745899&fm=15&gp=0.jpg" alt="">
        </div>

    15、hover属性:当鼠标移动到上面后,设置其样式

    16、background:针对背景一些样式设置

    (1)background-image:背景图片,图片大小如果小于div大小,则无限堆叠,水平垂直都堆叠;

    (2)background-repeat:对是否堆叠进行设置

    • no-repeat:不堆叠
    • repeat-y:纵向堆叠
    • repeat-x:横向堆叠

    (3)background-position:针对div设置图片展示的位置

    • background-position-y:10px 纵向移动图片
    • background-position-x:10px 横向移动图片

    注:可以不写x或y,默认第一个为x的值,第二个位y的值:background-position:10px 10px

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 样式表 stylesheet -->
        <link rel="stylesheet" href="demo.css">
        <!-- 写样式 -->
        <style>
     
            .b1 {
                border: 1px red solid;
                height: 500px;
                width: 100%;
            }
    
            .b2{
                background-image: url('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=916869868,3965009630&fm=11&gp=0.jpg');
                /*background-repeat:repeat-y;*/
                /*background-repeat:repeat-x;*/
                background-repeat:no-repeat;
            }
    
    
        </style>
    </head>
    <body>
    
    <div class="b1 b2" style=""></div>
    
    </body>
    </html>

    17、background-position 背景图片分层发生变化

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 样式表 stylesheet -->
        <link rel="stylesheet" href="demo.css">
        <!-- 写样式 -->
        <style>
    
            .b3{
                height: 1000px;
                width: 1000px;
                background-image: url('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2400404501,1602002277&fm=26&gp=0.jpg');
                background-position: 600px 600px;
            }
    
    
        </style>
    
    </head>
    <body>
    
    <div class="b3"></div>
    
    </body>
    </html>

    (三)DOM基础

    1、DOM:Document Object Model(文档对象模型)

    • 文档对象模型,这个对象里面提供操作页面的API
    • 一个web页面的展示,是由HTML标签组合的一个页面,DOM对象实际就是将HTML标签转换成一个文档对象。可以通过DOM对象中js提供的方法,找到HTML的各个标签。通过找到标签就可以操作标签使页面动起来。

    2、DOM和JS关系

    • JS:JavaScript (和Java无关,都是一种语言,可以直接被浏览器所解析运行的。)
    • 用JS写一些逻辑,调用DOM操作页面,从而实现有逻辑的操作页面。

    3、HTML DOM节点树,如图:

     通过HTML DOM,树中的所有节点均可通过JavaScript进行访问。

    4、获取标签:

    // 直接获取标签
    document.getElementById('i1');   //获取id为i1的标签
    document.getElementsByTagName('div'); //根据标签名称获得标签数组
    document.getElementsByClassName('c1'); //根据class属性获取标签的数组
    document.getElementsByName('dsx'); //根据name属性获取标签数组
    
    //间接获取标签
    var tmp = document.getElementById('h-test');
    tmp.parentElement; //父节点标签元素
    tmp.children; //所有子标签
    tmp.firstElementChild; //第一个子标签元素
    tmp.lastElementChild; //最后一个子标签元素
    tmp.nextElementSibling; //下一个兄弟标签元素
    tmp.previousElementSibling; //上一个兄弟标签元素

    document.getElementById('inner1') :绝对定位

    5、操作标签:

    (1)文本内容操作:

    A:innerHTML 与 innerText
    tmp.innerText;                        //获取标签中的文本内容
    tmp.innerText = 'HelloWorld';   //更改标签内文本内容
    tmp.innerHTML;                     //获取标签中的所有内容,包含HTML代码
    tmp.innerHTML='<a href="https://www.baidu.com">搜索</a>' //innerHTML 可以将含有HTML代码的字符串变为标签
    
    B:input、textarea标签
    tmp.value;                          //获取input、textarea参数
    tmp.value = '内容'               //对input、textarea的内容进行赋值
    
    C:select 标签
    tmp.value;                        //获取select标签的value参数
    tmp.value = '选项'            //修改select选项
    tmp.selectedIndex;         //获取select标签的选项下标
    tmp.selectedIndex = 1   //通过下标更改select的选项

    (2)Inner Text 和 Inner Html针对div标签的区别:

    • InnerText修改的是div标签中间的数据。<div>XXXXXX</div>
    • InnerHtml同时也是修改div中间的数据,和InnerText的区别是,当赋值能够被浏览器解析的标签字符串时,会直接渲染到页面上。 

    (3)事件:

            直接绑定

      直接在标签中绑定事件

     
    温故而知新
  • 相关阅读:
    基于google Zxing实现二维码、条形码扫描,仿微信二维码扫描效果(转)
    javascript中call、apply、argument、callee、caller
    Google Analytics10条有用教程(转)
    小问题
    MySQL exists的用法介绍
    warning C4005: “AF_IPX”: 宏重定义的解决办法
    /MT、/MD编译选项,以及可能引起在不同堆中申请、释放内存的问题
    _mkdir
    文件读写操作总结
    Distinct
  • 原文地址:https://www.cnblogs.com/krystal-xiao/p/14433443.html
Copyright © 2011-2022 走看看