• <legend id='rxlocank'><style id='kdf3n58i'><dir id='puht4pqe'><q id='hyah5bbn'></q></dir></style></legend>

  • <tfoot id='ld9kqpye'></tfoot>

    <small id='vpqit31y'></small><noframes id='hol576gl'>

        <tbody id='qd95azqo'></tbody>

      1. <i id='ochxs0ky'><tr id='w2j951zl'><dt id='oj45i1fz'><q id='szcims6v'><span id='cqditdlo'><b id='3kjsg6il'><form id='rhjf3lx8'><ins id='14c14e96'></ins><ul id='ykt78y3n'></ul><sub id='qc9s87m4'></sub></form><legend id='o9gmwy2j'></legend><bdo id='dr4poycp'><pre id='vmibrd5u'><center id='mxc7m8o3'></center></pre></bdo></b><th id='u7nwo4ct'></th></span></q></dt></tr></i><div id='3te0e2tw'><tfoot id='4zcmu17z'></tfoot><dl id='ff73yl4p'><fieldset id='kctao4uz'></fieldset></dl></div>
        网站建设公司当前位置 : 网站建设公司 > 知识普及

        教你写一个简单的网页(html网页开发入门)

        发布时间:2021-09-03 14:37   浏览次数:次   
        网页的组成
        HTML
        网页的具体内容和结构
         
        CSS
        网页的样式(美化网页最重要的一块)
         
        JavaScript
        网页的交互效果,比如对用户鼠标事件作出响应
         
        HTML
        什么是HTML
        HTML的全称是HyperTextMarkupLanguage,超文本标记语言
        其实它就是文本,由浏览器负责将它解析成具体的网页内容
         
        比如,浏览器会将下面的HTML代码
         
        <ul>
            <li>知乎</li>
            <li>CSDN</li>
            <li>博客园</li>
        </ul>
        1
        2
        3
        4
        5
        转化为
        知乎
        黑马
        CSDN
        的网页内容
         
        HTML的组成
        跟XML类似,HTML由N个标签(节点、元素、标记)组成
         
        HTML语法非常松散
        常见的HTML标签
        标题:h1,h2,h3,h4,h5…
        段落:p
        换行:br
        容器:div,span(用来容纳其他标签)
        表格:table,tr,td
        列表:ul,ol,li
        图片:img
        表单:input
        链接:a
        推荐开发工具(网络三剑客)dreamweawer、flash、fireworks;WebStorm.
        <html>
            <!-- 网页的标题、图标... -->
            <head>
                <mate charset="utf-8">
                <title>第一个网页</title>
            </head>
            <!-- 网页的具体内容 -->
            <body>
                这是网页的内容
                <a href="http://www.baidu.com" target="_blank">百度</a>
         
                <h1>666666666</h1>
                <h2>666666666</h2>
                <h3>666666666</h3>
                <h4>666666666</h4>
                <h5>666666666</h5>
         
                <p>ppppppppppp</p>
         
            <div>
                <p>ppppppppppp</p>
            </div>
         
                <ul>
                    <li>hahaha</li>
                    <li>hahaha</li>
                    <li>hahaha</li>
                </ul>
         
                <ol>
                    <li>ahahah</li>
                    <li>ahahah</li>
                    <li>ahahah</li>
                </ol>
         
            <img src="text.png">
            </body>
        </html>
         
        38
        CSS
        什么是CSS
        CSS的全称是Cascading Style Sheets,层叠样式表
        它用来控制HTML标签的样式,在美化网页中起到非常重要的作用
         
        CSS的编写格式是键值对形式的,比如
        color : red
        background-color : blue
        font-size : 20px
        冒号左边的是属性名,冒号右边的是属性值
         
        CSS三种书写方式
        行内样式:(内联样式)直接在标签的style属性中书写
        <span style="color:red;background-color:red;">123</span>
        1
        内页样式:在本网页的style标签中书写
        <span>123</span>
        <style type="text/css">
            span {
                color:yellow;
                background-color:blue
            }
        </style>
        1
        2
        3
        4
        5
        6
        7
        外部样式:在单独的CSS文件中书写,然后在网页中用link标签引用
        test.css
         
        span {
                color:yellow;
                background-color:blue
            }
        1
        2
        3
        4
        test.html
         
        <span>123</span>
        <link rel="stylesheet" herf="test.css">
        1
        2
        CSS选择器
        选择器的作用
        选择对应的标签,为之添加样式
         
        标签选择器 根据标签名找到标签
        类选择器 标签可以有多个类
        id选择器 id是唯一的,不能一样
        选择器组合 中间不留空格,粘在一起
        后代选择器 中间一个空格,不管嵌套多少层
        相邻兄弟选择器
        属性选择器
        <html>
        <head lang="en">
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                /*标签选择器*/
                p{
                    color:red;
                }
                /*类选择器*/
                .first{
                    color:red;
                }
                .second{
                    color:blue;
                }
                /*id选择器*/
                #first{
                    color:yollew;
                }
                #second{
                    color:green;
                }
                /*群组选择器*/
                .first, #second, h1{
                }
                /*选择器组合*/
                div.first{
                }
                /*后代选择器*/
                div p{
                }
                /*子标签选择器*/
                div > p{
                }
                /*相邻兄弟选择器*/
                div + p{
                }
                /*属性选择器*/
                div[name]{
                }
                div[name][age]{
                }
                div[name="jack"]{
                }
            </style>
         
        </head>
        <body>
            <div>
                <p>p1</p>
                <span>
                    <p>p2</p>
                </span>
            </div>
            <div name="jack">div1</div>
            <div age="10">div2</div>
            <p>与div相邻的p</p>
         
            <div class="first">123</div>
            <div id="first">123</div>
         
            <p class="first second">123</p>
            <p id="second">123</p>
         
            <h1>hhh</h1>
        </body>
        </html>
         
        伪类
        属性 描述
        :active 向被激活的元素添加样式
        :focus 向拥有键盘输入焦点的元素添加样式
        :hover 当鼠标悬浮在元素上方时,向元素添加样式
        :link 向未被访问的链接添加样式
        :visited 向已被访问的链接添加样式
        :first-child 向元素的第一个子元素添加样式
        :lang 向带有指定lang属性的元素添加样式
        :first-letter 向文本的第一个字母添加特殊样式
        :first-line 向文本的首行添加特殊样式
        :before 在元素之前添加内容
        after 在元素之后添加内容
        <html>
        <head lang="en">
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                div {
                    width:100px;
                    height:100px;
                    background-color:red;
                }
                div:hover{
                    background-color:blue;
                }
                div:before{
                    content:"666";
                }
            </style>
         
        </head>
        <body>
            <div>
         
            </div>
        </body>
        </html>
         
        选择器优先级
        针对性越强,优先级越高
        选择器的权值
        通配选择符(*):0
        标签:1
        类:10
        属性:10
        伪类:10
        伪元素:1
        id:100
        important:1000
         
        原则:选择器的权值加到一起,大的优先;如果权值相同,后定义的优先
        important > 内联 > id > 类 > 标签|伪类|属性选择器 > 伪元素 > 通配符 > 继承
         
        CSS标签的类型
        HTML有N多标签,根据显示的类型,主要可以分为2大类
        块级标签,独占一行的标签
        行内标签(内联标签),多个行内标签能同时显示在一行
         
        修改标签的显示类型
        CSS中有个display属性,能修改标签的显示类型
        属性 说明
        none 隐藏标签
        block 块级类型,独占一行,能随时设置宽度和高度
        inline 行内类型(内联类型),多个行内标签可以显示在同一行,宽度和高度取决于内容尺寸
        inline-block 行d内-块级类型(内联-块级类型),多个行内标签可以显示在同一行,能随时设置宽度和高度
        CSS属性
        CSS有N多属性,根据继承性,主要可以分为2大类
         
        可继承属性
        - 父标签的属性值会传递给子标签
        - 一般是文字控制属性
         
        不可继承属性
        - 父标签的属性值不能传递给子标签
        - 一般是区块控制属性
         
        CSS属性-可继承属性
        所有标签可继承
        visibility、cursor
         
        内联标签可继承
        letter-spacing、word-spacing、shite-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
         
        块级标签可继承
        text-indent、text-align
         
        列表标签
        list-style、list-style-type、list-style-position、list-style-image
         
        CSS属性-不可继承属性
        display、margin、border、padding、background
        height、min-height、max-height、width、min-width、max-width
        over-flow、position、left、right、top、bottom、z-index
        float、clear
        table-layout、vertical-align
        page-break-after、page-bread-before
        unicode-bidi
         
        盒子模型
        网页上每一个标签都是一个盒子
        每个盒子都有四个属性
         
        属性 说明
        内容(content) 盒子里装的东西,网页中通常是指文字和图片
        填充(padding,内边距) 怕盒子里装的(贵重的)东西损坏,而添加的泡沫或者其它抗震的辅料
        边框(border) 盒子本身
        边界(margin,外边距) 盒子摆放的时候不能全部堆在一起,盒子之间要留一定空隙保持通风,同时也为了方便取出
        <html>
        <head lang="en">
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                div {
                    width: 100px;
                    height: 100px;
                    background-color: blue;
                    margin-top: 20px;
                    padding-top: 20px;
                    border: 20px solid red;
                    border: 5px dashed red;/*虚线*/
                            }
            </style>
         
        </head>
        <body>
            <div>123</div>
            <div>456</div>
        </body>
        </html>
        1
         
        22
        内容(content)属性
        属性 描述
        height 设置元素高度
        max-height 设置元素的最大高度
        max-width 设置元素的最大宽度
        min-height 设置元素的最小高度
        min-width 设置元素的最小宽度
        width 设置元素的宽度
        填充(padding,内边距)属性
        属性 描述
        padding 在一个声明中设置所有内边距属性
        padding-bottom 设置元素的下内边距
        padding-left 设置元素的做内边距
        padding-right 设置元素的有内边距
        padding-top 设置元素的上内边距
        边框border属性
        属性 描述
        border-width 宽度
        border-style 样式
        border-color 颜色
        border-radius 圆角
        边界margin属性
        属性 描述
        margin 在一个声明中设置所有外边距属性
        margin-bottom 设置元素的下外边距
        margin-left 设置元素的左外边距
        margin-right 设置元素的右外边距
        margin-top 设置元素的上外边距
         
        <legend id='cvbbtuer'><style id='me9o8qee'><dir id='pwpi88uy'><q id='9ijdq4u9'></q></dir></style></legend>
          <tbody id='y5s48fli'></tbody>

            <i id='3hwji211'><tr id='ahzax0j6'><dt id='dj1b75xz'><q id='hg8pja9s'><span id='zbtq2tht'><b id='sp0f41zx'><form id='tlnbqaml'><ins id='3ehlhi5n'></ins><ul id='t35mmxih'></ul><sub id='btu39fxu'></sub></form><legend id='et33k1ga'></legend><bdo id='ieyg29da'><pre id='m9kk7r40'><center id='l96svak5'></center></pre></bdo></b><th id='7as5aj6g'></th></span></q></dt></tr></i><div id='faglphmu'><tfoot id='thhqsl88'></tfoot><dl id='hdyrli1x'><fieldset id='lf4khpvg'></fieldset></dl></div>
            <tfoot id='6ryiuaw7'></tfoot>

            • <small id='ejp6pux4'></small><noframes id='wz5lkawj'>

              本文来源于网络,若有侵权请联系3449817223#qq.com,将在第一时间删除。

              <small id='oaru89ra'></small><noframes id='xidfc24u'>

              <legend id='9gskt3bd'><style id='q4nyauwy'><dir id='gglwmmwp'><q id='hgctb7zq'></q></dir></style></legend>

                <i id='7r0cwitr'><tr id='zsjnabsm'><dt id='1zyew8ye'><q id='n6mpmqvs'><span id='1otd7hsc'><b id='c0cise5c'><form id='9azdoc4a'><ins id='l0t6n63o'></ins><ul id='9futdop6'></ul><sub id='6ym5v8v7'></sub></form><legend id='v9s6bepe'></legend><bdo id='o1ft7qs5'><pre id='r046ozwt'><center id='5k916hi2'></center></pre></bdo></b><th id='p8r6848t'></th></span></q></dt></tr></i><div id='d84oad23'><tfoot id='j39zoszn'></tfoot><dl id='vqrthx85'><fieldset id='g4qewx1d'></fieldset></dl></div>
                <tfoot id='5gyxljcf'></tfoot>
                    <tbody id='k8xh2qmg'></tbody>