资源描述
网页设计知识点合集.docx
《网页设计知识点合集.docx》由会员分享，可在线阅读，更多相关《网页设计知识点合集.docx（15页珍藏版）》请在冰豆网上搜索。
网页设计知识点合集.docx
网页设计知识点合集
网页设计知识点
第一部分：
HTML
1、html基本结构：
第一个HTML示例
HTML的基本结构
2、html常用标签：
HTML主体标签双标签
定义和用法
body元素定义文档的主体。
body元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。
）
可选属性：
backgroundbgcolortextleftmargintopmarginrightmarginbottommargin
文字与段落
HTML标签双标签
定义和用法
规定文本的字体、字体尺寸、字体颜色。
可选的属性colorfacesize
HTML
到
标签双标签
定义和用法
......
备注：

-

标签可定义标题。

定义最大的标题。

定义最小的标题。
可选的属性align（leftrightcenter）
HTML
标签可单独使用也可以成对使用
定义和用法
......
标签定义段落
可选的属性align（leftrightcenter）
HTML~~标签双标签~~
定义和用法
~~.......~~
定义文档中已被删除的文本。
粗体标签文字用于以粗体方式显示标签内的文字。
斜体标签文字用于以斜体方式显示标签内的文字。
下划线标签文字用于在标签内的文字下加下划线。
HTML下标_{标签双标签}
定义和用法
例如：
x1-x₁
HTML上标^{标签双标签}
定义和用法
例如：
x的平方--x₂
HTML
标签双标签
定义和用法
请在此添加地址信息
可定义一个地址（比如电子邮件地址）。
HTML
标签单标签
定义和用法
可插入一个简单的换行符。
HTML
标签双标签
定义和用法
..........
对其所包括的文本进行水平居中。
HTML
标签双标签
定义和用法
pre元素可定义预格式化的文本。
HTML
标签双标签
定义和用法
标签定义块段落缩进。
一个
相当于5个 
HTML
标签
定义和用法
标签在HTML页面中创建一条水平线。
可选的属性align（leftrightcenter）sizewidth
建立和使用列表
HTML定义列表
标签双标签
定义和用法
标签定义了定义列表（definitionlist）。
标签用于结合（定义列表中的项目）和
（描述列表中的项目）。
实例
计算机
用来计算的仪器......
显示器
以视觉方式显示信息的装置......
HTML有序列表
标签双标签
定义和用法
标签定义无序列表。
可选属性type（discsquarecircle）
实例
无序HTML列表：
Coffee
Tea
Milk
HTML无序列表
标签双标签
定义和用法
标签定义有序列表。
可选属性starttype（AaIi1）
实例
有序HTML列表：
Coffee
Tea
Milk
超链接
超链接标签双标签
格式：
超链接文字
网页中插入图片标签
格式：
设置图像映射
设置名称时,名称前面不能忘记#
表格的建立和使用
HTML
标签
定义和用法
标签定义HTML表格。
简单的HTML表格由table元素以及一个或多个tr、th或td元素组成。
可选属性：
widthheightbordercellpaddingcellspacingalignbgcolorframerulesbackground
HTML
标签
定义和用法
标签定义HTML表格中的行。
tr元素包含一个或多个th或td元素。
可选的属性
Align（leftrightcenter）bgcolorvalign（topmiddlbottom）
HTML
标签
定义和用法
定义表格内的表头单元格。
可选的属性
Align（leftrightcenter）bgcolorvalign（topmiddlbottom）
Colspanrowspanheightwidth
HTML 标签
定义和用法
标签定义HTML表格中的标准单元格。
Align（leftrightcenter）bgcolorvalign（topmiddlbottom）
Colspanrowspanheightwidthbackground
HTML标签
定义和用法
标签定义滚动文字
可选的属性
Bgcolordirection（updownleftright）behavior（scrollslidealternate）scrollmountwidthheight
HTML标签
定义和用法标签定义多媒体文件
基本语法：
HTML标签
定义和用法标签定义背景音乐
基本语法
用在，，，，之间
表单的应用
HTML表单标记标签双标签
基本语法：
注意：
一般使用最多的是name，method，action3个属性，其它的现在知道就可以了
HTML信息输入标签
基本语法：
标签的属性：
文本框--text；密码框--password；文件域--file；复选框--checkbox；单选按钮--radio；标准按钮--button；提交按钮--submit；重置按钮--reset；图像域--image；隐藏域--hidden（一般很少用）
文本框--text基本语法：
”>
密码框--password基本语法：
”>
文件域--file基本语法：
备注：
如果需要在一个表单中添加一个文件时，如发送邮件，添加附件时可以使用file属性
复选框--checkbox基本语法：
备注：
id和value可以不记，考试不考；
单选按钮--radio基本语法：
备注：
id可以不记，考试不考，value必须加上
标准按钮--button基本语法：
备注：
id可以不记，考试不考，value=”标准按钮”必须加上，注意是标准按钮
提交按钮--submit基本语法：
提交按钮”>
备注：
id可以不记，考试不考，value=”提交按钮”必须加上，注意是提交按钮
重置按钮--reset基本语法：
重置按钮”>
备注：
id可以不记，考试不考，value=”重置按钮”必须加上，注意是重置按钮
图像域--image基本语法：
HTML插入文字域标签双标签</p><p>基本语法：</p><p><formname=””action=””><textareaname=”textarea”rows=”文本域的行数”cols=”文本域的列数”></form></p><p>HTML插入下拉列表<select>和列表项<option>标签双标签</p><p>基本语法：</p><p><formname=””action=””><selectname=”下拉列表的名称”size=”设置下拉列表初始化的显示数目，默认数值：</p><p>1”></p><p><optionvalue=””></p><p><optionvalue=””></p><p>.......</p><p></select></p><p></form></p><p>第二部分：</p><p>CSS</p><p>一、Css基本语法：</p><p>Selector{property:</p><p>value;.........property:</p><p>value}</p><p>例如：</p><p>table{font-size:</p><p>4;color:</p><p>red}</p><p>注意：</p><p>属性与属性值之间要用:</p><p>隔开，每个属性之间要用；隔开</p><p>备注：</p><p>Selector代表选择符，property代表属性，value代表属性值，其中选择符包括多种形式，所有的HTML的标签都可以是选择符，如body，p，table等等</p><p>CSS选择符类型</p><p>1、类选择符基本语法：</p><p>在<head><styletype=”text/caa”>....</style></head>中定义</p><p>标记名.类命{样式属性：</p><p>取值；.......样式属性：</p><p>取值}</p><p>例如：</p><p>.p1{font-size:</p><p>2;text-align:</p><p>center}</p><p>.p2{font-family:</p><p>宋体;color:</p><p>red}</p><p>在<body>....</body>调用类选择符</p><p><pclass=p1>......</p></p><p>2、Id选择符基本语法：</p><p>在<head><styletype=”text/caa”>....</style></head>中定义</p><p>例如：</p><p>#p1{font-size:</p><p>2;text-align:</p><p>center}</p><p>在<body>....</body>调用类选择符</p><p><pid=p1>......</p></p><p>备注:</p><p>要分清两种选择符的定义符号.与#id选择符一般只用来定义唯一的标示符</p><p>3、包含选择符基本语法在<head><styletype=”text/caa”>....</style></head>中定义</p><p>例如：</p><p>Tableb{font-size:</p><p>2;color:</p><p>red}</p><p>备注:</p><p>定义过后<b>...</b>只能在table标签中使用</p><p>4、伪类基本语法在<head><styletype=”text/caa”>....</style></head>中定义</p><p>a:</p><p>link{color:</p><p>red}--未连接时超链接部分处于红色</p><p>a:</p><p>visited{color:</p><p>blue}--已连接时超链接部分处于蓝色</p><p>a:</p><p>{color:</p><p>white}--指针悬浮在连接上时超链接部分处于白色</p><p>a:</p><p>active{color:</p><p>yellow}--点击连接时超链接部分处于黄色</p><p>备注:</p><p>该类是与超链接组合使用的</p><p>二、编写CSS文件编写CSS文件分4种样式</p><p>1、编写头部的CSS：</p><p>在<head><styletype=”text/caa”>....</style></head>中定义</p><p>例如：</p><p><html></p><p><head></p><p><title>编写头部的CSS</title></p><p><styletype=”text/css”></p><p>.p1{font-size:</p><p>2;text-align:</p><p>center}</p><p>.p2{font-family:</p><p>宋体;color:</p><p>red</p><p></style></p><p></head></p><p><body></p><p><pclass=p1>喜欢你！</p><p>！</p><p>！</p><p>！</p><p>！</p><p>！</p><p>！</p></p><p></body></p><p></html></p><p>2、链入样式表：</p><p>将样式表保存在一个单独的文件中，然后在Html文件中调用</p><p>例如：</p><p>先将<styletype=”text/css”></p><p>.p1{font-size:</p><p>2;text-align:</p><p>center}</p><p>.p2{font-family:</p><p>宋体;color:</p><p>red</p><p></style>这部分写到一个单独的文件中，注意该文件的的拓展名一定要改成.css假如文件名为”4—”</p><p>然后在一个Html文件里写入<html></p><p><head></p><p><title>链入样式表</title></p><p><linkrel=”stylesheet”type=”text/css”href=””></p><p></head></p><p><body></p><p><pclass=p1>我爱你！</p><p>！</p><p>！</p><p>！</p></p><p></body></p><p></html></p><p>3、嵌入样式表：</p><p>在<body>。</p><p>。</p><p>。</p><p>。</p><p></body>里直接定义</p><p>4、例如：</p><p><html></p><p><head></p><p><title>嵌入样式表</title></p><p></head></p><p><body></p><p><pstyle=font-size:</p><p>2px;font-family:</p><p>宋体;color：</p><p>red>我爱你</p></p><p></body></p><p></html></p><p>4、导入样式表：</p><p>因为有的浏览器识别不出来导入样式表的代码，所以一般很少用，想掌握的话可以自己看看书（P140）</p><p>三、CSS文件中字体的设置（以定义段落<p>标签为例）</p><p>1、设置文字字体：</p><p>font-family</p><p>用法：</p><p>p{font-family:</p><p>宋体}</p><p>2、这只字体大小：</p><p>font-size</p><p>用法：</p><p>p{font-size：</p><p>20cm}</p><p>备注：</p><p>font-size后面可以跟绝对尺寸，相对尺寸，关键字，百分比，绝对尺寸的单位有：</p><p>px像素、in英寸、cm厘米、mm毫米、pt点、pc皮卡；相对尺寸的单位是em；绝对尺寸的关键字有7个：</p><p>xx-small极小、x-small较小、small小、medium、large大、x-large较大、xx-large极大；相对尺寸的关键字有2个：</p><p>larger、smaller</p><p>3、设置字体样式font-style</p><p>用法：</p><p>p{font-style：</p><p>normal正常显示|italic斜体|oblique歪体}</p><p>4、设置字体粗细font-weight</p><p>用法：</p><p>p{font-weight：</p><p>normal正常|bold粗体|bolder加粗|lighter细体|数字}</p><p>备注：</p><p>font-weight后可以跟数字单数字只有9个级别--100到900如p{font-Weight：</p><p>100}</p><p>5、设置字体变体font-variant</p><p>用法：</p><p>p{font-variant：</p><p>normal正常|small-caps}</p><p>备注：</p><p>small-caps属性值的意思是将英文字母显示成小型的大写字母</p><p>6、组合设置字体属性font</p><p>用法：</p><p>p{font：</p><p>font-style|font-variant|font-weight|font-size|font-family}</p><p>例如：</p><p>p{font:</p><p>italicbold20px宋体}</p><p>备注：</p><p>属性与属性之间一定要用空格隔开；</p><p>特别需要注意的是使用组合设置font是一定要注意属性的顺序，即font：</p><p>font-style字体样式font-variant字体变体font-weight字体粗细font-size字体大小font-family字体类型</p><p>顺序一旦出现混乱，便没有了任何效果</p><p></p>
		</div>
           <div class="readmore" onclick="showmore()" style="background-color:transparent; height:auto; margin:0px 0px; padding:20px 0px 0px 0px;"><span class="btn-readmore" style="background-color:transparent;"><em style=" font-style:normal">展开</em>阅读全文<i></i></span></div>
        
            <script> 
                function showmore() 
                {
                    $(".readmore").hide();
                    $(".detail-article").css({ 
                        "height":"auto",
                        "overflow": "hidden"
                    });
                }
                $(document).ready(function() {
                    var dh = $(".detail-article").height();
                    if(dh >100)
                    {  
                        $(".detail-article").css({ 
                            "height":"100px",
                            "overflow": "hidden"
                        });
                    }
                    else
                    {
                        $(".readmore").hide(); 
                    } 
                    
            }); 
        </script>  
    </div>  
    <script>
        var defaultShowPage = parseInt("5"); 
        var id = "23902209";
        var total_page = "15";
        var mfull = false;
        var mshow = false;
        function DownLoad() {
            window.location.href='https://m.bdocx.com/down/23902209.html';
        } 
        
        function relate() {
            var reltop = $('#relate').offset().top-50; 
            $("html,body").animate({ scrollTop: reltop }, 500); 
        }
    </script> 
    
        <script> var pre = "https://file1.bdocx.com/fileroot1/2023-5/22/4e3a1c2d-2c73-41d3-9ba6-5ca90ca29f03/4e3a1c2d-2c73-41d3-9ba6-5ca90ca29f03";  
            var freepage = parseInt('15'); 
            var total_c = parseInt('15');
            var start = defaultShowPage;
            var adcount = 0; 
            var adindex = 0;
            var adType_list = ";0;1;2;3;4;5;6;7;8;9;10;11;12;13;14;";
            var end = start;
            function ShowSvg() {
                end = start + defaultShowPage;
                if (end > freepage) end = freepage;  
                for (var i = start; i < end; i++) {
                    var imgurl = pre + (i + 1) + '.gif';
                
                    var html = "<img  src='" + imgurl + "' onerror=\"this.src='/images/s.gif'\"  alt=\"网页设计知识点合集.docx_第" + (i + 1) + "页\"   width='100%'/>";
                
                 
                $("#page").append("<div class='page'>" + html + "</div>"); 
                $("#page").append("<div class='pageSize'>第" + (i + 1) + "页 / 共" + total_c + "页</div>"); 
                if(adcount > 0 && adType_list.indexOf(";"+(i+1)+";")>-1)
                {
                    if(adindex > (adcount-1)) adindex = 0; 
                    $("#page").append("<div class='pagead' id='addiv"+(i + 1)+"'></div>");  
                    document.getElementById("addiv"+(i + 1)+"").innerHTML =document.getElementById("adpre" + adindex).outerHTML;
                    adindex += 1;
                }  
            } 
            start = end; 
            if (start > (freepage - 1)) {
                if (start < total_c)
                {
                    $("#pageMore").removeClass("btnmore");
                    $("#pageMore").html("亲，该文档总共" + total_c + "页，到这儿已超出免费预览范围，如果喜欢就下载吧！");
                }
                else
                {
                    $("#pageMore").removeClass("btnmore");
                    $("#pageMore").html("亲，该文档总共" + total_c + "页全部预览完了，如果喜欢就下载吧！");
                }
            } 
        } 
        //$(document).ready(function () {
        //     ShowSvg(); 
        //}); 
    </script>   
    <div id="relate" class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8">
        <div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">相关资源</div>
        <div id="relatelist" style="padding-left:5px;">
        <ul>
    
    
            <li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/30864400.html" title="功能材料课件.ppt">功能材料课件.ppt</a> 
                    </li><li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/30864399.html" title="9、我们的影子.ppt">9、我们的影子.ppt</a> 
                    </li><li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/30864398.html" title="光功能材料PPT.ppt">光功能材料PPT.ppt</a> 
                    </li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30864397.html" title="危险与可操作性分析(HAZOP)方法介绍PPT.pptx">危险与可操作性分析(HAZOP)方法介绍PPT.pptx</a> 
                    </li><li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/30864396.html" title="中国制造网账号优化攻略.ppt">中国制造网账号优化攻略.ppt</a> 
                    </li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30864395.html" title="部编版五年级语文下册第17课《跳水》精品课件(统编).pptx">部编版五年级语文下册第17课《跳水》精品课件(统编).pptx</a> 
                    </li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30864394.html" title="部编版五年级语文下册第17课《跳水》优秀PPT课件.pptx">部编版五年级语文下册第17课《跳水》优秀PPT课件.pptx</a> 
                    </li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30864393.html" title="行政事业单位内部控制培训课件.pptx">行政事业单位内部控制培训课件.pptx</a> 
                    </li><li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/30864392.html" title="专题七采购成本与价格管理.ppt">专题七采购成本与价格管理.ppt</a> 
                    </li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30864391.html" title="燃气经营安全重大隐患判定标准解读课件.pptx">燃气经营安全重大隐患判定标准解读课件.pptx</a> 
                    </li>
        </ul>
		</div>
    </div>
        
    <div class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8">
        <div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">猜你喜欢</div>
        <div  id="relatelist" style="padding-left:5px;">
		<ul>
    
    
            <li><em class="docx"></em>
                <a href="https://m.bdocx.com/doc/21124520.html" target="_parent" title="反比例函数和一次函数交点问题习题及详解docWord文件下载.docx">反比例函数和一次函数交点问题习题及详解docWord文件下载.docx</a></li>
        
            <li><em class="docx"></em>
                <a href="https://m.bdocx.com/doc/21124521.html" target="_parent" title="有关人体身体部位地英文谚语习语Word格式.docx">有关人体身体部位地英文谚语习语Word格式.docx</a></li>
        
            <li><em class="docx"></em>
                <a href="https://m.bdocx.com/doc/21124522.html" target="_parent" title="甘肃省张掖市届高三第三次诊断考试文综试题Word文档格式.docx">甘肃省张掖市届高三第三次诊断考试文综试题Word文档格式.docx</a></li>
        
            <li><em class="docx"></em>
                <a href="https://m.bdocx.com/doc/21124523.html" target="_parent" title="安全生产管理制度全文文档格式.docx">安全生产管理制度全文文档格式.docx</a></li>
        
            <li><em class="docx"></em>
                <a href="https://m.bdocx.com/doc/21124524.html" target="_parent" title="htc t7373刷机教程Word文件下载.docx">htc t7373刷机教程Word文件下载.docx</a></li>
        
            <li><em class="docx"></em>
                <a href="https://m.bdocx.com/doc/21124525.html" target="_parent" title="LYO3冷冻真空干燥机性能验证方案Word文档格式.docx">LYO3冷冻真空干燥机性能验证方案Word文档格式.docx</a></li>
        
            <li><em class="docx"></em>
                <a href="https://m.bdocx.com/doc/21124526.html" target="_parent" title="14安全生产目标监测记录表Word格式文档下载.docx">14安全生产目标监测记录表Word格式文档下载.docx</a></li>
        
            <li><em class="docx"></em>
                <a href="https://m.bdocx.com/doc/21124527.html" target="_parent" title="最新XX中药养生美容创业项目商业计划书Word文档下载推荐.docx">最新XX中药养生美容创业项目商业计划书Word文档下载推荐.docx</a></li>
        
            <li><em class="docx"></em>
                <a href="https://m.bdocx.com/doc/21124528.html" target="_parent" title="职业技能鉴定管理办法Word文档下载推荐.docx">职业技能鉴定管理办法Word文档下载推荐.docx</a></li>
         
        </ul>
		</div>
    </div>
      
         <div style=" font-size: 16px; background-color:#e5f0f7; margin-top:20px;  font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px; margin-bottom:10px;">
             相关搜索</div> 
    <div class="widget-box pt0" style="border: none; padding:0px 5px;">   
        <ul class="taglist--inline multi">
         <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e7%bd%91%e9%a1%b5">网页</a></li>      <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e8%ae%be%e8%ae%a1">设计</a></li>      <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e7%9f%a5%e8%af%86%e7%82%b9">知识点</a></li>      </ul>
    </div>  
        <br />  
        <div >
            当前位置：<a target="_parent" href="https://m.bdocx.com/">首页</a>  > 
            <a href="https://m.bdocx.com/booklist-00002.html">经管营销</a><span> > </span><a href="https://m.bdocx.com/booklist-0000200001.html">经济市场</a>
        </div>
        
     
        <br />  
    
    
    <div class="cssnone">
        <iframe title="来源" src="https://m.bdocx.com/BookRead.aspx?id=EH2b5xSeTjz30gX69R5Znw%3d%3d&parto=XydFcz6Nt1z2MQw2GDB%2ffO%2f9eg266hm9j3nNRtUBESkvQNvJOfa536FvvEGeiykpgTnjX7F3t4aoCDFw3JySwBrBDxv9a9KfHATuiV6mvAT8oZi6yLE5V7n1IlrVimv9iV%2fZidaJgB6bYNSfn%2bbWzXZHCJNx9Hhv3%2fpeu9mcXtwsK%2bIobo9A6pDfeBBOTIIMGb5ThIPS0Q8dEE1W2ghEauA4U7VSzJui" frameborder="0" style="width: 0px; height: 0px">
        </iframe>
    </div> 
    
        <span id="LabelScript"></span>
        <script src="https://mstatic.bdocx.com/JS/bootstrap-collapse.js"></script>
    </form>
    
    <div class="siteInner_bg" style="margin-top: 40px; border: solid 0px red; margin-left: 0px; margin-right: 0px;">
           
        <div class="siteInner"> 
          <p style="text-align: center;">copyright@ 2008-2022 冰豆网网站版权所有</p><p style="text-align: center;">经营许可证编号:<a href="http://beian.miit.gov.cn/" target="_blank">鄂ICP备2022015515号-1</a></p><script>var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?2e77bd3f6fe91b0e21d3f22267249ee3";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();</script><script>(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?81476e42bf626128cf29544ee216a8ed7deb9487dce7ed62313212129c4244a219d1c501ebd3301f5e2290626f5b53d078c8250527fa0dfd9783a026ff3cf719";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)</script>
           
        </div>
    </div> 
    <div class="trnav clearfix" id="navcontent" style="display: none; background-color:#3a71b1; ">
        <div class="trlogoside" id="navlogo" style="display: none;">
            <a href="https://m.bdocx.com/" title="冰豆网"><img src="https://www.bdocx.com/images/logo_bd.png" alt="冰豆网"></a>
            <div class="trnavclose" id="navclose">
                <span></span>
            </div>
        </div>
        <div class="navcontainer">
            <div class="row">
                <ul class="nav navbar-nav trnavul headercontent" id="navigation" style="margin:20px 0 0px;"> 
                     
<li><a  target="_parent"href="https://m.bdocx.com/login.aspx">登录</a></li>  
 
<li><a  target="_parent"href="https://m.bdocx.com/">首页 </a></li>  
 
<li><a  target="_parent"href="https://m.bdocx.com/booklist-0.html">资源分类 </a></li>  
 
<li><a  target="_parent"href="https://m.bdocx.com/UserManage/Recharge.aspx?f=0"><img src="https://m.bdocx.com/images/s.gif" alt="new"  class="hottip1">升级会员 <img src="https://www.bdocx.com/FileUpload/Images/48520fea-bc98-41ae-b183-84689c7075c9.gif" alt="new"  class="hottip"></a></li>  
 
<li><a  target="_parent"href="https://m.bdocx.com/newslist.html">通知公告 </a></li>  
 
<li><a  target="_parent"href="https://m.bdocx.com/h-0.html">帮助中心 </a></li>  

                </ul>
            </div>
        </div>
    </div>   
    <script type="text/javascript">
        function stopPropagation(e) {
            var ev = e || window.event;
            if (ev.stopPropagation) {
                ev.stopPropagation();
            }
            else if (window.event) {
                window.event.cancelBubble = true;//兼容IE
            }
        }
        $("#navmore").click(function (e) {
            $("#navcontent").show();
            $("#navlogo").show();
            stopPropagation(e);
            var navcontentwidth = $("#navcontent").width();
            $('#navcontent').css({ 'right': '-' + navcontentwidth + 'px' });
            $("#navcontent").show().animate({ "right": 0 }, 300);
        });
        $(document).bind('click', function () {
            var navcontentwidth = $("#navcontent").width();
            $("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); });
            $("#navlogo").fadeOut(300);
        });
        $("#navcontent").click(function (e) {
            stopPropagation(e);
        });
        $("#navclose").click(function (e) {
            var navcontentwidth = $("#navcontent").width();
            $("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); });
            $("#navlogo").fadeOut(300);
        });
    </script>


<script> 
    function BaseShare(title, desc, imgUrl) {
        var link = "https://m.bdocx.com/doc/23902209.html";
        if (wx) {
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: 'wx4f717640abfd1120', // 必填，公众号的唯一标识
                timestamp: '1719113923', // 必填，生成签名的时间戳
                nonceStr: 'D947BF06A885DB0D477D707121934FF8', // 必填，生成签名的随机串
                signature: '6b48a9d1bcc2ed3e21311b961424022573d80881',// 必填，签名，见附录1
                jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems']  // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                //openTagList: ["wx-open-launch-weapp"]//H5打开小程序
            });
            wx.ready(function () {      //需在用户可能点击分享按钮前就先调用
                wx.hideMenuItems({// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
                    menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand']
                });
                var shareData = {
                    title: title, // 分享标题
                    desc: desc,//这里请特别注意是要去除html
                    link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: imgUrl, // 分享图标
                };
                wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
                wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
            });
        }
    }
    function BaseShare(title, desc, imgUrl, link) {
        if (link=="")
            link = "https://m.bdocx.com/doc/23902209.html";
        if (wx) {
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: 'wx4f717640abfd1120', // 必填，公众号的唯一标识
                timestamp: '1719113923', // 必填，生成签名的时间戳
                nonceStr: 'D947BF06A885DB0D477D707121934FF8', // 必填，生成签名的随机串
                signature: '6b48a9d1bcc2ed3e21311b961424022573d80881',// 必填，签名，见附录1
                jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems']  // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                //openTagList: ["wx-open-launch-weapp"]//H5打开小程序
            });
            wx.ready(function () {      //需在用户可能点击分享按钮前就先调用
                wx.hideMenuItems({// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
                    menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand']
                });
                var shareData = {
                    title: title, // 分享标题
                    desc: desc,//这里请特别注意是要去除html
                    link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: imgUrl, // 分享图标
                };
                wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
                wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
            });
        }
    }
</script>

<script>
    $(document).ready(function () {
        var arr = $(".headercontent");
        for (var i = 0; i < arr.length; i++) {
            (function (index) {
                var url = "https://m.bdocx.com/header.aspx";
                $.get(url + "?t=" + (new Date()).valueOf(), function (d) {
                    try {
                        arr.eq(index).empty().html(d);
                    } catch (e) { }
                    try {
                        arr.html(d);
                    } catch (e) { }
                });
            })(i);
        }
    });
</script>


<script  src="https://mstatic.bdocx.com/js/jquery.lazyload.js"></script>
<script charset="utf-8">
    $("img.lazys").lazyload({
        threshold: 200,
        effect: "fadeIn"
    });
</script>
</body>
</html>
网页设计知识点合集.docx

标签双标签定义和用法......备注：

-

标签可定义标题。

定义最大的标题。

标签双标签
定义和用法
......
备注：
