自己实现一个web前端分页

项目开发过程中，分页是少不了的，之前封装了一个分页组件，样式是基于bootstrap的样式，当然也可以自己来修改；

别的不说，上图上代码；

bootstrap样式分页

以下是相关代码：

/***=======================分页样式==================================***/  
/*分页样式*/  
.page{  
  display:inline-block;  
  width:100%;  
  text-align:center;  
  height:35px;  
  line-height:35px;  
  background-color:none;  
}  
.page  .pagination{  
  margin:0px  !important;  
}  
.page  .pagination  li  a{  
  /*修改按钮样式*/  
  border:none  !important;  
  background-color:transparent;  !important;  
  color:#555;  
  cursor:pointer;  
}  
.page  .pagination  li  a:hover,.page  .pagination  li  a:focus,.page  .pagination  li  a:active{  
  background-color:#ccc;  
}  
.page  .pagination  li.active  a,.page  .pagination  li.active  a:hover,.page  .pagination  li  a:active,.page  .pagination  li  a:focus{  
  color:#0099ff;  
  cursor:default;  
  background-color:none;  
}  
.pageinfo{
  display:none  !important;
}
/*隐藏分页信息*/  
.clickmore{  cursor:pointer;  }  
.pagination>.action>a:hover,.pagination>.action>a:focus{  color:#0099ff  !important;  cursor:default;  } 
 /****======================分页样式结束============================***/

上面是自己写的分页样式，可自行修改之，下面是分页组件代码：

/**  
   * bootstrap 对应的独立分析组件  
    * @demo 
    * pagination.init({  
    *   selector : '.page', //选择器，作为渲染目标,默认为 '.page.pagination',非必须  
    *   count : 120, //为总记录数，必须  
    *   isTransform : false,//是否转换为符合后台需要的参数begin /end  
    *   page : 1, //为当前页码，非必须  
    *   pagesize : 10, //为每页条数，默认10，非必须  
    *   increment : 10, //为页面存在的分页增量，比如只显示5个页码，非必须  
    *   pageArray : [], //可以进行生成下拉框，比如 10，20，50 ，选择不同的页码进行分页，非必须  
    *   previousTitle : '点击查看',//为上一页的title显示，未实现；  
    *   callback : function(pageObject){//为分页点击回调函数，必须  
    *     console.log(pageObject);//pageObject={page : 1,pagesize:10};回调函数返回值，包括下一个页码和每页条数  
    *   }  
    * });  
    * @since 2016年2月15日 15:18:36  
    * @author lixun  
    * @version 1.0  
    * @edited by lixun ,增加多实例；一个页面多个分页 ；  
    * 处理思路：  
    * 1\. 对应的每个selector有一个pagination,然后在调用的时候根据selector进行查找  
    * 2\. 处理的内容：1）分页加载；2）事件绑定 3）回调函数 
    * 3\. 处理原则：平滑处理，原有的可继续使用；  
    */ 
var pagination={
    _defaultSelector : '.page .pagination',    //默认选择器
    _defaultPagesize : 20,                    //默认分页条数
    _defaultIncrement : 10,                    //默认分的页码数
    _defaultPageArray : [10,20,50,100],        //默认的条码下拉框
    _map : {    //用户处理多实例增加的容器，不可覆盖
        //selector : {私有属性}
        //".page .column" : {}
    },
    //通用属性
    lastSelector : '',//上一个选择器，用于开发者不传递参数的时候，去查找上一个选择器用的。
    previousTitle : '上一页',
    nextTitle : '下一页',
    previousContent : '上一页',
    nextContent : '下一页',
    //获得分页实例
    _getPagination : function(selector){
        if(null !=selector && selector !='' && $(selector).length > 0){
            return pagination._map[selector];
        }else{
            console.error('selector 传参错误或$('+selector+')不存在!');
        }
        return null;
    },
    //获得返回的字符串
    pageArrayStr : function(selector,ps){
        var pa=pagination._map[selector].pageArray;
        if(null !=pa && pa.length > 0){
            var concatStr='<select onchange="pagination.changePagesize(\''+(selector)+'\',event)" style="height:20px;line-height:20px;padding:0px;margin-top:-2px;">';
            var i=0,max=pa.length;
            for(;i<max;i++){
                var v=pa[i];
                concatStr +='<option value="'+v+'" '+(v==ps ? 'selected="true"' : '')+'>'+v+'</option>';
            }
            concatStr +='</select>';
            return concatStr;
        }
        return "";
    },

    //绑定事件
    bindEvent : function(selector){
        if(selector && selector !=''){
            var _tempPaginationInstance=pagination._map[selector] || {};
            var _bindE=_tempPaginationInstance.bindE==true ? true : false;
            if(_bindE==false){
                _tempPaginationInstance.bindE=true;
                pagination._map[selector]=_tempPaginationInstance;
                //跳转页面
                $(selector).delegate('li.unselect','click',pagination.clickpage);
                //绑定上一页事件
                $(selector).delegate('li.pageup','click',pagination.pageup);
                //绑定下一页事件
                $(selector).delegate('li.pagedown','click',pagination.pagedown);
                //绑定前面页面事件
                $(selector).delegate('a.previous','click',pagination.previouspage);
                //绑定后面页面事件
                $(selector).delegate('a.next','click',pagination.nextpage);
            }
        }
    },
    //分页初始化
    init : function(params){
        //处理传参数据
        params=params || {};
        params.count=params.count || 0;
        params.pagesize=params.pagesize || pagination._defaultPagesize;
        var paramSelector=pagination._defaultSelector;
        if(params.selector){
            paramSelector=params.selector;
        }
        //获得选择器后，进行实例处理
        var paginationInstance=pagination._getPagination(paramSelector);
        //传参获取最新配置
        var tempPaginationInstance={
            selector : paramSelector,
            page : params.page ? params.page : (paginationInstance && paginationInstance.action==true ? (paginationInstance.page ? paginationInstance.page : 1) : 1),
            count : params.count || 0,
            action : false,
            bindE : false,//是否绑定事件
            pagesize : params.pagesize,
            callback : params.callback || $.noop,
            pagenumber : (parseInt((params.count || 0)/(params.pagesize||pagination._defaultPagesize),10)+((params.count||0)%(params.pagesize||pagination._defaultPagesize)==0 ? 0 : 1)),//根据总数和一页条数获得页码数量
            increment :  params.increment || pagination._defaultIncrement,
            pageArray : params.pageArray || pagination._defaultPageArray
        };
        if(paginationInstance && undefined !=paginationInstance){
            //存在实例,进行更新。
            tempPaginationInstance.bindE=true;//如果存在的话，肯定绑定了
            pagination._map[paramSelector]=$.extend(paginationInstance,tempPaginationInstance);
        }else{
            pagination._map[paramSelector]=tempPaginationInstance;//重新赋值
            pagination.bindEvent(paramSelector);//绑定事件
        }
        pagination.loadPage(paramSelector);
        pagination.lastSelector=paramSelector;
    },
    //点击页面数直接跳转
    clickpage : function(){
        var $a=$(this).find('a');
        var selector=$a.attr('selector');
        var gonumber=parseInt($a.html(),10);
        $(selector+' li.active').addClass('unselect').removeClass('active');
        $(this).addClass('active').removeClass('unselect');
        pagination.gopage(selector,gonumber);
    },
    //向上翻页
    pageup :  function(){
        var $a=$(this).find('a');
        var selector=$a.attr('selector');
        var _tempInstance=pagination._map[selector];
        if(_tempInstance){
            //得到当前页面，然后翻页，如果在边界，那么就要进行触发一次翻页事件
            var  $actel=$(selector+' li.active a');
            var nownumber=parseInt($actel.html(),10);
            if(nownumber==1){
                return false;
            }else{
                pagination.gopage(selector,nownumber-1);
            }
        }
    },
    //向下翻页
    pagedown : function(){
        var $a=$(this).find('a');
        var selector=$a.attr('selector');
        var _tempInstance=pagination._map[selector];
        if(_tempInstance){
            var pagenumber=_tempInstance.pagenumber;
            //获得该实例的分页码数
            var  $actel=$(selector+' li.active a');
            var nownumber=parseInt($actel.html(),10);
            if(nownumber==pagenumber){
                return false;
            }else{
                pagination.gopage(selector,nownumber+1);
            }
        }
    },
    //前面页面
    previouspage : function(){
        var selector=$(this).attr('selector');
        var _tempInstance=pagination._map[selector];
        if(_tempInstance){
            var increment=_tempInstance.increment,
            page=_tempInstance.page;
            //判断当前是第几个，比如16，那么就以10的倍数向前翻页
            var $nowobj=$(selector+' a.previous').parent();
            var nextnumber=parseInt($nowobj.next().children().html(),10);
            var end=(nextnumber-1)%increment > 0 ? parseInt((nextnumber/increment),10)*increment : parseInt((nextnumber/increment-1),10)*increment;
            pagination.gopage(selector, end+1);
        }
    },
    //后面页面
    nextpage : function(){
        //判断当前点击的哪些，比如：现在是5，点击生成6...
        var selector=$(this).attr('selector');
        var _tempInstance=pagination._map[selector];
        if(_tempInstance){
            var increment=_tempInstance.increment;
            var $nowobj=$(selector+' a.next').parent();
            var prenumber=parseInt($nowobj.prev().children().html(),10);
            if(parseInt(prenumber/5,10)==1){//说明在第一页，要从5加载5个，直到结束
                pagination.addPage(selector,$nowobj,5);
            }else{
                //第二次 增加页面数量了，应该是从10开始了...
                pagination.addPage(selector,$nowobj,increment);
            }
        }
    },
    addPage : function(selector,domobj,size){
        var _tempInstance=pagination._map[selector];
        if(_tempInstance){
            var pagenumber=_tempInstance.pagenumber,
            increment=_tempInstance.increment;
            var start=parseInt(domobj.prev().children().html(),10);
            pagination.gopage(selector, start+1);
        }
    },
    loadPage : function(selector){
        //根据selector获得count,pagesize,page
        var _tempInstance=pagination._map[selector];
        if(!_tempInstance){
            console.log('error : _tempInstance is null now ,check pagination params please!');
            return null;
        }
        var count=_tempInstance.count,
            pagesize=_tempInstance.pagesize,
            page=_tempInstance.page,
            increment=_tempInstance.increment,
            pageArrayStr=pagination.pageArrayStr(selector,pagesize),
            pagenumber=_tempInstance.pagenumber;
        var $page=$(selector);
        //清空内容
        $page.html('');
        var pageno=pagenumber;
        page=page > pageno ? 1 : page;    //如果当前页码树大于总页码数则置为1，否则为当前页码数；

        //如果页数超过10，则增...,以5个数字递增，
        //显示到page页面的下一个5的倍数上。
        var endpage=(parseInt(page/increment,10))*increment > pageno ? pageno : (parseInt(page/increment,10)+(page%increment==0 ? 0 : 1))*increment;
        if(pageno<=increment){
            endpage=pageno;
        }
        var pageHtml='';
        if(pageArrayStr==''){
        }else if(pagination._map[selector].pageArray.length==1){
            pageHtml='<li class="pageinfo">共'+count+'条 </li>';
        }else{
            pageHtml='<li class="pageinfo">共'+count+'条 , 每页'+pageArrayStr+'条</li>';
        }
        $page.append(pageHtml);
        $page.append('<li class="prev pageup '+(page==1 ? 'disabled' : '')+'"><a title="'+pagination.previousTitle+'" href="javascript：;" selector="'+(selector)+'">'+pagination.previousContent+'</a></li>');
        //判断第几页
        var start=0;
        if(page > increment && page <=pageno){
            $page.append('<li><a class="previous" href="javascript：;" selector="'+(selector)+'">...</a></li>');
            //给一个自定义增长数量，比如5个，每次增长五个，当前页面6页面，增长5个为10个，start page为 6
            start=parseInt((page%increment==0 ? (page-1) : page)/increment,10)*increment;
            endpage=(start+increment ) > pageno ? pageno : (start+increment);//如果开始页面加上增加页面大于最大页码数，则等于最大页码数
            if(endpage-page <increment){
                start=endpage-increment;
            }
        }
        for(var i=start;i<(endpage==0?1:endpage);i++){
            var listr='<li class="unselect"><a href="javascript：;" selector="'+(selector)+'">'+(i+1)+'</a></li>';
            //在第page页面增加样式
            if((page-1)==i){
                listr='<li class="active"><a selector="'+(selector)+'">'+(i+1)+'</a></li>';
            }
            $page.append(listr);
        }
        if(pageno > 5 && endpage !=pageno){
            $page.append('<li><a class="next" href="javascript：;" selector="'+(selector)+'">...</a></li>');
        }
        $page.append('<li class="next pagedown '+(page==pageno ? 'disabled' : '')+'"><a title="'+pagination.nextTitle+'" href="javascript：;" selector="'+(selector)+'">'+pagination.nextContent+'</a></li>');
    },
    //跳转页面
    gopage : function(selector,page){
        var _tempInstance=pagination._map[selector];
        if(_tempInstance){
            _tempInstance.page=page;
            _tempInstance.action=true;
            _callback=_tempInstance.callback;
            _pagesize=_tempInstance.pagesize;
            pagination._map[selector]=_tempInstance;
            _callback(pagination.transform({
                page : page,
                rows : _pagesize
            }));
        }
    },
    /*返回现在的页面*/
    getNowPage : function(selector){
        selector=selector || (pagination.lastSelector || pagination._defaultSelector);//获取上一个选择器
        var _tempInstance=pagination._map[selector];
        if(_tempInstance){
            _tempInstance.action=true;
            var _page=_tempInstance.page,
                _pagesize=_tempInstance.pagesize;
            pagination._map[selector]=_tempInstance;
            return pagination.transform({
                page : _page,
                rows : _pagesize
            });
        }
        return null;
    },
    transform : function(paginationParams){
        if(pagination.isTransform && pagination.isTransform==true){
            var p=paginationParams.page || 1;
            var rows=paginationParams.pagesize || 10;
            return {
                begin : (p-1)*rows+1,
                end : p*rows
            };
        }
        return paginationParams;
    },
    //返回分页参数，以供列表页面加载数据使用
    getParams :function(selector){
        selector=selector || (pagination.lastSelector || pagination._defaultSelector);//获取上一个选择器
        var _tempInstance=pagination._map[selector];
        if(_tempInstance){
            var _pagesize=_tempInstance.pagesize;
            return pagination.transform({
                //第几页，一页有多少条记录
                page:1,
                rows : _pagesize
            });
        }
        return null;
    },
    changePagesize : function(selector,ev){
        var t=ev.currentTarget || ev.target || ev.srcElement,
            $t=$(t),
            v=$t.find('option:selected').val();
//            selector=$t.attr('selector');
        var _tempInstance=pagination._map[selector];
        if(_tempInstance){
            _tempInstance.pagesize=v;
            var _callback=_tempInstance.callback;
            pagination._map[selector]=_tempInstance;
            //重新调用callback方法
            _callback(pagination.transform({
                page : 1,
                rows : v
            }));
        }
    }
};

文章首发于 BUG集散地 ,https://chrunlee.cn/article/pagination-web-javascript.html

级元素与内联元素的概念与区别

在HTML中，大多数元素都被定义为块级元素或内联元素。

块级元素通常会独立成行，而内联元素会并排显示。

在我们学过的元素中，

块级元素如：<h> <p> <table>这些。

内联元素如<td><a><img>

下面我们通过练习来直观看看他们的区别。

块级元素展示，代码如下：

<body>
  <h1>第一个网页</h1><hr><h2>表格元素</h2><hr>
  <p>块级元素与内联元素</p>
  <p>零基础自学网页制作</p>
  <table border="1" width="50%">
  <thead>
  <tr>
  <td colspan="2">表格的头部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的脚部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格标题</caption>
  <colgroup>
  <col span="1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年龄</th>
  </tr>
  <tr>
  <td>
  <table border="1" width="100%">
  <tr>
  <td>1</td>
  <td>2</td>
  </tr>
  </table>
  </td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body>

如图：

内联元素展示如下

示例代码：这段代码被我放在了</table>后面。

<a href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin">歼20战斗机</a>
<img src="img/战斗机/image3.jpg" width="200px"/>

效果如图：

其中，<img>标签中的width属性规定了图片的宽度为200px，也就是200像素。

HTML中，如果只对图片的宽或高进行数值指定，那么未指定的数值会随着指定数值进行等比例缩放！

熟知html元素是块级还是内联对以后进行页面布局有一定的指导意义。

<div>与<span>标签

为了方便开发者对页面内容进行布局和调整，html开发者为html加入了专门的区块元素<div></div>。

<div></div>是一个块级元素，大家可以把它理解为一个容器，它本身是不会显示在页面上的。

比如这个！

笔者第一个漫画作品

如果抛开画面内容，我们看到的是一堆对画面进行分割的方格子。像这样

<div></div>元素的作用就是对页面进行了这样的分割。

实际上我们的页面布局都是基于这样思路进行分割的，只是页面上不会像漫画一样显示外边框而已。例如：

强制为其添加边框分割：

大家看明白了吗？<div></div>就是用来对页面进行分割划区域的。

通过给<div>标签设置不同的id属性，可以在css文件中对不同<div>区块中的所有信息进行统一调整样式的操作。

这是对块级元素整体改变样式的方法。

但是，如果我们想对一个块级元素中的不同文字或图片这些内联元素进行单独操作怎么做呢？

html开发者为我们提供了<span></span>这样的内联标签。比如我们对<p>我有一个梦想</p>这个段落元素中的"梦想"两个字进行变化颜色的操作，我们可以这样写：

通过对<span>指定不同的id或class属性在CSS文件中对"梦想"二字进行改变颜色的操作而不会影响段落元素中的其他文字。

今天的内容结束了，下一次我们建立一个新的页面来简单看看<div>元素的基本用法。

喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

序列表

经过之前关于表格、表单的学习后，再来学习列表，就显得非常的简单和容易理解了。

学习是构建知识体系的过程，没有形成体系的知识学习再多也是碎片，是很难形成技能或深刻理解的，因此，如果您是零基础的初学者，第一次看我的教程，如果时间允许的话，请务必从目录中找寻第一篇，循序渐进的学习。

列表分为有序列表、无序列表和定义列表，同时列表之中还能嵌套列表，和表格非常相似。

首先介绍有序列表

要用<ol></ol>标签告诉浏览器这里是列表。

然后在里面添加<li></li>标签，在这个标签中添加内容即可。

示例代码如下

<p>我喜欢的水果</p>
<ol>
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ol>

大家可以把它放到一个新的html框架中看看效果。

完整代码如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>列表</title>
  </head> 
  <body>
  <h>有序列表</h>
  <p>我喜欢的水果</p>
  <ol> 
    <li>葡萄</li> 
    <li>西瓜</li> 
    <li>苹果</li> 
    <li>桃子</li>
    </ol>
  </body> 
  </html>

页面效果如下：

通过修改<ol>标签中的type属性我们可以改变序号显示的样式，默认的是数字，大家看一下不同的type值的不同效果吧！示例代码如下：

<ol type="A">
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ol>
<ol type="a"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
  、</ol><ol type="I"> <li>葡萄</li> <li>西瓜</li> <li>苹果</li> <li>桃子</li></ol>

页面效果如下：

下面给大家介绍一下搜狗输入法中如何输入罗马数字。

step1.点击"输入方式"

step2.点击"特殊符号"后选择数字序号，找到罗马数字即可

除此之外我们还可以使用CSS的方法为有序列表的序号提供更多样式。在<ol>标签中修改style属性可以直接调用这些css中的属性。写法是style="list-style-type:属性值；"

示例代码如下：(使用日语中的片假名表示序号)

<ol style="list-style-type:hiragana;"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ol>

页面效果如图所示：

是不是很有趣，这里的测试就不一一做了。为大家奉上list-style-type的值的列表与说明，大家自己课下去尝试，这个列表中既有有序列表的值也有无序列表的值。

如图：

资料来自w3school

无序列表

无序列表与有序列表的区别在于最外层的标签，它的写法是这样的：<ul></ul>。

有一个记忆的小技巧，有序的英文是order，故有序列表为order list（列表），缩写为ol。

无序为unorder，无序列表为unorder list，缩写为ul。

无序列表<ul>标签的type属性用来控制列表前的标记显示演示。

示例代码如下：

<h>无序列表</h>
<p>我喜欢的水果</p>
<ul> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ul>
<ul type="disc"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ul>
<ul type="circle"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ul>
<ul type="square"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ul>

页面效果如下：

通过图片我们可知，无序列表默认的列表标识就是type="disc"。

style属性的话大家自己试试吧，这里就不啰嗦了。

定义列表

这个列表比较特殊，也比较不常见，主要就是显示名词定义的。

首先要写入<dl></dl>标签。这是告诉浏览器这里是个定义列表，和<ol>或<ul>一样。

定义的英文是definition，定义列表就是definition list，缩写是dl。

下面在<dl></dl>标签中间写入定义的名称<dt></dt>,即definition title（标题）。

与定义名称标签并列的是定义描述<dd></dd>,即definition describe（描述）。

示例代码如下：

<dl> 
  <dt>计算机</dt> 
  <dd>用来计算的仪器 ... ...</dd> 
  <dt>显示器</dt> 
  <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

页面效果如下：

今天的内容结束了！

列表嵌套列表的测试大家自己试试吧，学到现在，相信你们都可以完成了！

如果您喜欢我的教程请关注我，点赞也能让我充满动力！

如果您有任何疑问请给我留言，如有问题或错误请予以斧正！

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

在线咨询

上一篇：2020青骄第二课堂禁毒网平台官网登录入口青骄第二
下一篇：基于Django+mysql的点餐系统设计-第五篇(

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

自己实现一个web前端分页

级元素与内联元素的概念与区别

HTML完整学习目录

HTML完整学习目录

您的项目需求