前端复习:html-创新互联

1 认识什么是纯文本文件txt

  • windows中自带有一个软件,叫做记事本。记事本保存的文档格式就是txt格式,就是英语text的缩写。术语上称这个文件叫做“纯文本文件”。
  • txt文件,只能够保存文本内容,是无法记录文本样式的。(相对于doc文件而言,doc文件是可以存储文本的内容和样式,所以doc和txt存储同样的内容,doc比txt要大)
  • 纯文本文件具有如下特点:1、只有文本,没有样式;2、用记事本等纯文本编辑器可读,不是乱码。
  • html、css、js都是纯文本文件。

    2 HTML是负责描述文档语义的语言

  • html是英语HyperText Markup Language的缩写,即超文本标记语言。.html就是网页的格式。
  • 纯文本txt文件是不能够描述文档的语义的,如文档中不知道谁是主标题,谁是副标题,谁是段落。所以html应运而生。即通过html标签对,来给文本增加语义。
  • 现在业界的标准,网页技术严格的三层分离:html就是负责描述页面的语义;css负责描述页面的样式;js负责描述页面的动态效果的。
  • 所以,html不能够让文字居中,不能够更改文字字号、字体、颜色。因为这些都是属于css样式范畴;html不能够让盒子运动起来,这些属性属于js行为范畴。

    3 html中,除了语义,其他什么都没有

  • html是一个纯文本文件(可以由txt文件更改后缀名而来),用一些标签来描述文字的语义,这些标签在浏览器页面中是看不到的,所以称之为“超文本”。
  • html只能做一件事,即通过标签对,给文本增加语义,这是html唯一能做的。

    4 sublime

  • 任何的纯文本编辑器都能够编辑html,比如说记事本、editplus、notepad++。
  • 比较有名的专门制作网页的工具有:
    1、DreamWeaver (Adobe公司的产品,这个东西已经过时);2、Sublime (高效率的程序书写工具);3、WebStorm (更高级的项目级别编程工具)。
  • sublime的中文意思是“华丽的”,是2011年开始流行的代码编译器,可以编辑java、c、php等多门语言。对html、css、js支持非常好,界面也非常漂亮,安装简单、小巧、插件多。
    • sublime3已集成常用插件网盘下载:https://pan.baidu.com/s/1sugysbl7Wpm1mTpcE6JzJg
  • sublime中的常用快捷键:
  • ctrl+滚轮:放大缩小文字;ctrl+shift+d:复制当前行;ctrl+shift+k:删除当前行;ctrl+shift+↑:上移当前行;ctrl+shift+↓:下移当前行;
  • 1、键入u,后加上tab键可生成标签;
  • 2、键入html:xt,后按ctrl+E,然后按下enter键,sublime可生成一个标准版本的html格式的骨架。
    
    
    
    
    
    
    
    
    
    
  • 3、按住ctrl键,点击所要编辑的多行,可同时进行编辑。
  • 4、li*10,后按tab键可生成多行li标签。(需要注意的是,在编辑页面的时候需要先保存页面)

    5 html骨架

    5.1 文档声明头

  • 任何一个标准的HTML页面,第一行一定是一个以开头的语句,这一行,就是文档声明头,DocType Declaration。此标签可告知浏览器文档使用的是哪种HTML或者是XHTML规范。
  • 使用sublime的快捷键html:xt生成的html骨架是HTML4.01这个版本,这个版本是IE6开始兼容的。而HTML5是IE9开始兼容的。但IE6/7/8这些浏览器还不能够过早的淘汰,所以这几年网页还是应该使用HTML4.01来制作。而手机、移动端的网页开发,就可以使用HTML5了。
  • HTML4.01里面有两大规范,每大规范里面又各有3种小规范,所以一共有6种规范。(为什么定义两大规范,其原因是因为HTML觉得有些规定不够严谨,比如说标签是否可以使用大写字母等,所以HTML把一些规范严格的标准,有制定了一个XHTML1.0.在XHTML中的字母X,就表示“严格的”。
大规范 大规范里的小规范
HTML4.011、Strict:严格的,体现在一些标签不能使用,比如u;2、Transitional:普通的;3、Frameset:带有框架的页面
XHTML1.0 (其严格体现在小写标签、闭合、引号)1、Strict:严格的,体现在一些标签不能使用,比如u;2、Transitional 普通的(使用sublime的快捷键html:xt生成的html骨架,x表示xhtml,t表示transitional);3、Frameset:带有框架的页面
  • strict表示“严格的”,这种严格体现在有一些标签不能够使用。比如说u标签,就是可以让一个文本加上下划线,但是这和HTML的本质有冲突,即HTML只能够负责语义,不能够负责样式,而u这个下划线就是样式,所以在strict中是不能够使用u标签的。
  • 一般页面中偶尔要使用一些类似u这种标签(当做css钩子使用),所以选择XHTML1.0中的transitional版本最为合适。

    5.2 字符集

  • 字符集用meta标签定义,meta表示“元配置”,就是表示基本的配置项目。charset就是charactor set“字符集”的意思。
  • 中文能够使用的字符集有两种:
  • 第一种:UTF-8,即
  • 第二种:gb2312,即,第二种也可以写成gbk,即
  • UTF-8是国际通用字库,里面涵盖了所有地球上所有人类的语言文字,比如阿拉伯文、汉语、韩文等;而gb2312是国标,是中国的字库,里面仅仅涵盖了汉字和一些常用外文,以及一些常用的符号。
  • 在字库规模方面,由于UTF-8里面保存了世界上所有人类语言,所以描述一个汉字需要的码更多,即UTF-8里面存储了一个汉字3个字节,而gb2312中存储一个汉字2个字节。保存大小:UTF-8(更臃肿、加载更慢) > gb2312(更小巧、加载更快)。
  • 需要注意,浏览器就是通过meta配置来看网页是属于什么字符集的,比如你保存时候的meta配置,和保存时编码格式不一致,那么浏览器就会出现乱码现象。
    前端复习:html

    5.3 关键字和页面描述

  • meta除了可以设置字符集,还可以设置关键字和页面描述。
  • 设置页面描述:
  • 只要设置Description页面配置,那么百度搜索结果中就能够显示这些语句,这个技术叫做SEO,即search engine optimization,搜索引擎优化。
    前端复习:html
  • 定义关键字:
  • 这些关键字,就是告诉搜索引擎,这个网页是干什么的,能够提高搜索命中率。

    6 HTML的基本语法特性

    6.1 HTML对换行不敏感,对tab不敏感

  • HTML只在乎标签的嵌套结构,嵌套的关系,即谁嵌套了谁,谁被谁嵌套了,和换行、tab无关。换不换行、tab不tab,都不影响页面的结构。
  • HTML不是依靠缩进来表示嵌套的,就是看标签的包裹关系,但是,有良好的缩进,代码更易读。
  • 空格、tab和换行都会占据字节,百度为了追求极致的显示速度,所以HTML标签都没有换行、也没有缩进,HTML和换不换行没有关系,标签的层次依然清晰,只不过程序员不可读而已。

    6.2 空白折叠现象

  • HTML中所有的文字之间,如果有空格、换行或者是tab都将被折叠为一个空格显示。
  • 即如下代码:

    热热 爱爱

  • 显示的是后被折叠了:
    前端复习:html

    6.3 标签必须要求严格封闭

  • 标签不封闭是灾难性的结果:
    欢迎<title></code></pre>
    <h2>7 html标签上的说明</h2><h3>7.1 html标签等级分类</h3></li><li>html标签是分等级的,html将所有的标签分为两种:容器级和文本级。</li><li>顾名思义,容器级的标签,里面理论上可以放置任何东西(如h是容器级的标签。理论上里面可以放置p、ul,语法上的允许,在语义上,不要这么写。);</li><li>而文本级标签里面,只能放置文字、图片、表单元素等。(如p标签是一个文本级标签,p里面只能够放置文字、图片、表单元素等)</li><li>正确写法:<br/>```<img src="/upload/otherpic36/210932.jpg" alt="前端复习:html"><br/><h4>个人签名</h4><br/><p><br/>何处不流浪,归途是故乡<br/></p>
    <pre><code></code></pre></li><li>错误写法:
    <pre><code><p>
    <h4>个人签名</h4>何处不流浪,归途是故乡
    </p></code></pre></li><li>错误写法使用Chrome的F12审查,你会发现,浏览器自己把p封闭掉了,不让去包裹h2。<br/><img src="/upload/otherpic36/210933.jpg" alt="前端复习:html"></li><li>附加说明:Chrome浏览器是世界上对HTML5支持最好的浏览器,提供了非常好的开发工具,非常适合开发人员使用。(审查元素功能的快捷键是F12)
    <h3>7.2 img标签</h3></li><li>HTML页面中不能够直接插入图片,而是插入图片的引用地址,所以也要把图片上传到服务器中。插入方法为:<img src="baby.jpg" alt="可爱小宝宝" />,src是英文source“资源”的简写。</li><li>alt是英文中“alternate”替代的意思,就表示不管发生什么原因,当这个图片无法被显示的时候,出现的替代文字(有的浏览器不支持)。</li><li>关于src属性值相对路径的问题,../表示可以为上一层文件夹,../../表示为上一层的上一层的文件夹。(相对路径不会出现以下这种情况:aaa/../bbb/1.jpg。即../要么不写,要么就写在开头。)</li><li>面试题:如下有个文件层次图,能在index.html页面中,插入图片1.png的语句为:<img src="../../photo/1.png" />。<br/><img src="/upload/otherpic36/210935.jpg" alt="前端复习:html"></li><li>解释:document为顶级文件夹,里面有两个文件夹work和photo。work中又有一个文件夹叫做myweb。myweb文件夹中有index.html。所以index.html在myweb文件夹中,上一级就是work文件夹,上两级就是document文件夹。通过document文件夹当做一个中转站,进入photo文件夹,就可以找到1.png。
    <h3>7.3 超级链接的基本语法</h3></li><li>一个网站,是由很多html网页组成的,html网页之间能够通过超级链接相互跳转,从而形成“网”。语法为:<a href="1.html" title="悬停文本" target="_blank">链接的内容</a>。</li><li>a是英文anchor“锚”的意思,是一个文本级的标签;</li><li>href属性是英文hypertext reference超文本地址的缩写;target属性表示是否在新窗口中打开,blank为“空白”的意思,表示新建一个空白窗口;title属性表示悬停文本。
    <h3>7.4 页面中的锚点</h3></li><li>页面当中可以有锚点,所谓的锚点,就是一个小标记,这个小标记是用户不可察觉的,用户不知道这里有一个标记。</li><li>锚点用name属性进行设置,一个a标签如果有name属性(或者是id属性),就说明是页面中的一个锚点。
    <pre><code><a name="wdzp">我的作品</a> 或者是 <a id="wdzp">我的作品</a></code></pre></li><li>那么页面地址栏上写#wdzp就能够让这个锚点置于页面最顶端显示。</li><li>这里也可以使用超级链接,指向页面中的锚点,那么就是:<a href="#wdzp">点击我就查看我的作品</a>。(也可以从一个页面中使用a标签链接到另一个页面中标记的锚点)
    <h3>7.5 无序列表</h3></li><li>无序列表,用来表示一个列表的语义,并且每个项目与每个项目之间,是不分先后的。</li><li>ul就是英文中unordered list,“无序列表”的意思;li就是英文list item,“列表项”的意思。</li><li>无序列表时一个“组标签”,即要么不写,要么就写一组。(也就是说,li不能够单独存在,必须包裹在ul里面;反过来也是,ul的直接子标签不能是别的东西,只能是li)
    <pre><code><ul>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
    </ul></code></pre></li><li><p>以下写法错误,li必须用ul包裹:</p><p><img src="/upload/ad_content/xuanchuantu-30.jpg"></p><a href="https://www.cdcxhl.com/" target="_blank">创新互联公司</a>是一家集网站建设,青山企业网站建设,青山品牌网站建设,网站定制,青山网站建设报价,网络营销,网络优化,<a href="https://www.cdcxhl.com/seo/qingshan.html" target="_blank">青山网站推广</a>为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。<pre><code><li>北京</li>
        <li>上海</li>
        <li>广州</li></code></pre>
    </li><li>下面写法也错误,ul里面直接子标签只能有li标签,而不能有其他:(但是li是一个容器级标签,li里面什么都能放,甚至于li标签中可以包含ul标签)
    <pre><code><ul>
        <h4>中国主要城市</h4>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
    </ul></code></pre></li><li>浏览器会给默认的无序列表项添加小圆点的“先导符号”,这里强调,ul的作用,并不是给文字添加小圆点,而是添加无序列表的“语义”。
    <h3>7.6 有序列表</h3></li><li>order list,有序列表,用ol表示。
    <pre><code><ol>
        <li>体面</li>
        <li>下一秒</li>
        <li>她说</li>
    </ol></code></pre></li><li>ol和ul只是语义上的不一样,怎么使用都是一样的。(ol这个东西用的不多,如果想表达顺序,一般也是用ul)
    <h3>7.7 定义列表</h3></li><li>定义列表也是一个组标签,不过比较复杂,出现了三个标签:<br/>1、dl表示definition list,定义列表;2、dt表示definition title,定义标题;3、dd表示definition description,表示定义描述词。</li><li>dt、dd只能在dl中;而且dl的直接子标签只能有dt、dd。
    <pre><code><dl>
        <dt>广州</dt>
        <dd>中国南大门,有珠江、小蛮腰</dd>
        <dt>上海</dt>
        <dd>魔都,有外滩、东方明珠塔、黄浦江</dd>
    </dl></code></pre></li><li>表达语义是两个层面的:1、是一个列表,列出了北京、上海、广州三个项;2、每个词都有自己的描述项。(即,dd是用于描述dt的)</li><li>定义列表用法可以非常灵活,可以一个dt配多个dd:
    <pre><code><dl>
        <dt>广州</dt>
        <dd>中国南大门,有珠江、小蛮腰</dd>
        <dd>人特别多</dd>
        <dt>上海</dt>
        <dd>魔都,有外滩、东方明珠塔、黄浦江</dd>
    </dl></code></pre></li><li>还可以拆分开,让每一个dl里面只有一个dt和dd,这样子感觉会清晰一些:
    <pre><code><dl>
        <dt>广州</dt>
        <dd>中国南大门,有珠江、小蛮腰</dd>
        <dd>人特别多</dd>
    </dl>
    <dl>
        <dt>上海</dt>
        <dd>魔都,有外滩、东方明珠塔、黄浦江</dd>
    </dl></code></pre></li><li>此外,dt、dd都是容器级标签,想放什么都可以。(页面编辑时,用什么标签,不是根据样子决定的,而是语义决定。)
    <h3>7.8 div和span</h3></li><li><p>div和span是非常重要的标签,div的语义是division“分割”;而span的语义就是span”范围、跨度”。在css设计样式时,这两个标签,都是最重要的“盒子”。</p><pre><code><div>
        <h4>中国主要城市</h4>
        <ul>
            <li>北京</li>
            <li>上海</li>
            <li>广州</li>
        </ul>
    </div>
    
    <div>
        <h4>美国主要城市</h4>
        <ul>
            <li>纽约</li>
            <li>洛杉矶</li>
            <li>西雅图</li>
        </ul>
    </div></code></pre>
    </li><li>在浏览器中,div默认是不会增加任何的效果改变的,但是语义改变了,div中的所有元素就是一个小区域。div是一个容器级标签,里面什么都能够放置,甚至于可以放置div本身。</li><li>span也是表达“小区域、小跨度”的意思,但是是一个文本级标签。也就是说,span只能够放置文字、图片、表单元素。(即span里面是放置小元素的,而div里面是放置大东西的。)</li><li>div标签也称之为布局标签,如下:
    <pre><code><div class="header">
        <div class="logo"></div>
        <div class="nav"></div>
    </div>
    <div class="content">
        <div class="guanggao"></div>
        <div class="dongxi"></div>
    </div>
    <div class="footer"></div></code></pre></li><li>我们称呼这种模式叫做“div+css”,div标签负责布局,负责结构,负责分块,而css负责样式。
    <h3>7.8 表单元素:文本框架、密码框、单选按钮、复选框</h3></li><li>表单就是收集用户信息的。就是让用户填写、选择的。
    <pre><code><div>
        <h4>欢迎注册本网站</h4>
        <form>
            所有的表单内容,都要写在form标签里面
        </form>
    </div></code></pre></li><li>form是英文表单的意思。form标签里面有action属性和method属性。action属性表示表单提交至哪里。method属性表示用什么HTTP方法提交,有get、post两种方式。</li></ul><hr /><ul><li>文本框:<input type="text" value="默认有的值" />;input表示“输入”,指的是一个“输入小部件”,“type”属性表示所要选择的类型,text值表示类型是一个文本框的输入小部件。</li><li>value属性表示“值”。value值的填写表示默认有的值。<br/><img src="/upload/otherpic36/210937.jpg" alt="前端复习:html"></li></ul><hr /><ul><li>密码框:<input type="password" /></li><li>单选按钮:也是input标签,type为radio;name属性值相同的单选框只能选其一。
    <pre><code><input type="radio" name="gender" /> 男
    <input type="radio" name="gender" /> 女</code></pre></li><li>默认被选择,就应该书写checked=”checked”。</li></ul><hr /><ul><li>复选框:也是input标签,type为checkbox。(name属性值相同)
    <pre><code><p>
    请选择你的爱好:
    <input type="checkbox" name="hobby"/> 睡觉
    <input type="checkbox" name="hobby"/> 吃饭
    <input type="checkbox" name="hobby"/> 足球
    <input type="checkbox" name="hobby"/> 篮球
    </p></code></pre>
    <h3>7.9 下拉列表和文本域</h3></li><li>select就是“选择”, option为”选项“。</li><li>select标签和ul、ol、dl一样,都是组标签:
    <pre><code><select>
    <option>北京</option>
    <option>河北</option>
    <option>河南</option>
    </select></code></pre></li><li>多行文本框(文本域):<textarea cols="30" rows="10"></li></ul><p align=center>另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、<a href="https://www.cdcxhl.com/gaofang/" target="_blank">高防服务器</a>、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。</p>            <br>
                分享题目:前端复习:html-创新互联            <br>
                URL分享:<a href="http://lszwz.com/article/dcpieh.html">http://lszwz.com/article/dcpieh.html</a>
            </div>
        </div>
        <div class="other">
            <h3>其他资讯</h3>
            <ul>
                <li>
                        <a href="/article/dgccoio.html">css样式库有哪些 加载css样式的方式有哪些</a>
                    </li><li>
                        <a href="/article/dgccodo.html">华为linux容器命令的简单介绍</a>
                    </li><li>
                        <a href="/article/dgccoce.html">mysql怎么查条数的简单介绍</a>
                    </li><li>
                        <a href="/article/dgccocp.html">电脑卡屏怎么解锁快捷键 电脑卡屏怎么解锁快捷键</a>
                    </li><li>
                        <a href="/article/dgccocd.html">包含html5触发事件的词条</a>
                    </li>        </ul>
        </div>
    </div>
    <div class="f_service_con">
        <div class="h_fumin">
            <div class="h_fumin_lei">
                <div class="h_fumin_lei_tu"><img src="/Public/Home/images/f_service01.png"></div>
                <p>售后响应及时</p><span>7×24小时客服热线</span>
            </div>
            <div class="h_fumin_lei">
                <div class="h_fumin_lei_tu"><img src="/Public/Home/images/f_service02.png"></div>
                <p>数据备份</p><span>更安全、更高效、更稳定</span>
            </div>
            <div class="h_fumin_lei">
                <div class="h_fumin_lei_tu"><img src="/Public/Home/images/f_service03.png"></div>
                <p>价格公道精准</p><span>项目经理精准报价不弄虚作假</span>
            </div>
            <div class="h_fumin_lei">
                <div class="h_fumin_lei_tu"><img src="/Public/Home/images/f_service04.png"></div>
                <p>合作无风险</p><span>重合同讲信誉,无效全额退款</span>
            </div>
        </div>
    </div>
    <div class="footerbar">
        <div class="footer-t">
            <div class="f-box">
                <div class="f-1">
                    <div class="f-t">
                        <h2>联系我们</h2>
                        <span>TEL</span>
                    </div>
                    <div class="f-b">
                        <h1><a href="tel:13518219792" rel="nofollow">135-1821-9792</a></h1>
                        <h1><a href="tel:028-86922220" rel="nofollow">028-86922220</a></h1>
                        <p>地址:乐山市太升南路288号锦天国际</p>
    
                    </div>
                </div>
                <div class="f-2">
                    <div class="f-t">
                        <h2>快捷导航</h2>
                        <span>Shortcut</span>
                    </div>
                    <div class="f-b">
                        <ul >
                        </ul>
                        <ul >
                            <li><a href="/jianshe" title="乐山网站建设">乐山网站建设</a></li>
                            <li><a href="/jianshe#ym_websiteBox2" title="品牌网站建设">品牌网站建设</a></li>
                            <li><a href="/jianshe#ym_websiteBox1" title="企业网站建设">企业网站建设</a></li>
                            <li><a href="/jianshe#ym_websiteBox4" title="集团网站建设">集团网站建设</a></li>
                            <li><a href="/jianshe#ym_websiteBox4_2" title="外贸网站建设">外贸网站建设</a></li>
                            <li><a href="/jianshe#ym_websiteBox4_5" title="企业宣传视频">企业宣传视频</a></li>
                        </ul>
                        <ul >
                            <li><a href="/weixin" title="微信开发">微信开发</a></li>
                            <li><a href="/weixin#item1" title="公众号开发">公众号开发</a></li>
                            <li><a href="/weixin#item2" title="微商城建设">微商城建设</a></li>
                            <li><a href="/weixin#item3" title="微官网建设">微官网建设</a></li>
                            <li><a href="/weixin#item4" title="小程序开发">小程序开发</a></li>
                        </ul>
                        <ul>
                            <li><a href="/case/" title="网站作品案例">网站作品案例</a></li>
                            <li><a href="/case/" title="品牌网站案例">品牌网站案例</a></li>
                            <li><a href="/case/" title="集团网站案例">集团网站案例</a></li>
                            <li><a href="/case/" title="企业网站案例">企业网站案例</a></li>
                            <li><a href="/case/" title="外贸网站案例">外贸网站案例</a></li>
                            <li><a href="/case/" title="营销网站案例">营销网站案例</a></li>
                        </ul>
                        <ul style="margin:0;">
                            <li><a href="/about/">小谭建站</a></li>
                            <li><a href="/about/">公司简介</a></li>
                            <li><a href="/about#ab_item3">企业文化</a></li>
                            <li><a href="/contact">联系我们</a></li>
                            <li><a href="/Pay.html">付款方式</a></li>
                            <li><a href="/jianshe#ym_websiteBox8">售后服务</a></li>
                        </ul>
                        <div style="clear:both;"></div>
                    </div>
                </div>
                <div class="f-3">
                    <div class="f-t">
                        <h2>二维码</h2>
                        <span>QR CODE</span>
                    </div>
                    <div class="f-b">
                        <ul>
                            <li><img src="/Public/Home/images/fewm.png">
                                <p>微信公众号</p>
                            </li>
                            <li style="margin: 0"><img src="/Public/Home/images/fewm2.png">
                                <p>手机端网站</p>
                            </li>
                            <div style="clear:both;"></div>
                        </ul>
                    </div>
                </div>
                <div style="clear:both;"></div>
            </div>
        </div>
        <div class="footer-about">
            <div class="w1200">乐山小谭建站工作室是一家专注从事于高品质视觉体验及互联网设计开发,<a href="/" target="_blank">乐山网站建设</a>,<a
                    href="/jianshe" target="_blank">乐山网站设计</a>,<a href="/jianshe" target="_blank">乐山网页设计</a>,<a
                    href="/jianshe" target="_blank">乐山网站制作</a>,<a href="/jianshe#ym_websiteBox2"
                                                                  target="_blank">品牌网站建设</a>,<a href="/jianshe#ym_websiteBox3" target="_blank">营销网站建设</a>,<a
                    href="/jianshe#ym_websiteBox4" target="_blank">集团网站建设</a>,<a href="/jianshe#ym_websiteBox1"
                                                                                 target="_blank">企业网站建设</a>,<a href="/jianshe#ym_websiteBox4_2" target="_blank">外贸网站建设</a>,<a
                    href="/jianshe#ym_websiteBox4_3" target="_blank">响应式网站建设</a>,<a href="/weixin#item4"
                                                                                    target="_blank">小程序开发</a>,<a href="/weixin" target="_blank">微信开发</a>,<a
                    href="/jianshe#ym_websiteBox4_4" target="_blank">企业形象设计</a>,<a href="/jianshe#ym_websiteBox4_5"
                                                                                   target="_blank">企业宣传视频</a>等服务,小谭建站位于乐山市龙岗区大运软件小镇,小谭建站拥有经验丰富的高级网站建设工程师和一流的网页高端设计人员,具备各种规模与类型网站建设的雄厚实力,在网站建设领域树立了自己独特的设计风格。
            </div>
            <div class="friend-links">
                <h6 class="clearfix">
                    <span class="tilte">友情链接</span>
                    <a class="exchagne" href="http://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes">交换友情链接</a>
                </h6>
                <div class="link-list clearfix">
                    <div class="link-slider">
                        <a href="http://www.teliergzn.com/" title="特丽尔硅藻泥" target="_blank">特丽尔硅藻泥</a>   <a href="https://www.scvps.cn/" title="注册域名" target="_blank">注册域名</a>   <a href="http://www.wjzwz.com/" title="温江网站建设" target="_blank">温江网站建设</a>   <a href="http://m.cdxwcx.com/xibuxinxi.html" title="西部信息中心" target="_blank">西部信息中心</a>   <a href="http://www.cdxwcx.cn/tuoguan/nanchong.html" title="南充电信机房托管" target="_blank">南充电信机房托管</a>   <a href="https://www.cdxwcx.com/city/shuangliu/" title="双流网站建设" target="_blank">双流网站建设</a>   <a href="http://www.sczitong.cn/" title="梓潼网站建设" target="_blank">梓潼网站建设</a>   <a href="http://www.cdfuwuqi.com/zuyong/" title="服务器租用" target="_blank">服务器租用</a>   <a href="https://www.cdcxhl.com/xiyun.html" title="移动服务器托管" target="_blank">移动服务器托管</a>   <a href="https://www.cdxwcx.com/tuiguang/" title="网站seo优化" target="_blank">网站seo优化</a>                   </div>
                </div>
            </div>
        </div>
        <div class="footer-b">
            <div class="f-box">
                <ul>
                    <li><a href="/jianshe#ym_websiteBox6" target="_blank">服务流程</a></li>
                    <li><a href="/jianshe#ym_websiteBox8" target="_blank">售后服务</a></li>
                    <li><a href="/about/" target="_blank">联系我们</a></li>
                    <li><a href="#" target="_blank">付款方式</a></li>
                    <li><a href="#" target="_blank">网站地图</a></li>
                    <li><a href="#" target="_blank">sitemap</a></li>
                    <li>
                        <p>
                            <script data-cfasync="false" src="/Public/Home/js/email-decode.min.js"></script>
                        </p>
                    </li>
                    <div style="clear:both;"></div>
                </ul>
                <p class="copy">Copyright © 2022 青羊区小谭信息技术咨询服务工作室 乐山建站工作室 All Rights Reserved   <a href="http://www.miibeian.gov.cn/" target="_blank" rel="nofollow">蜀ICP备2021004003号-25</a>
                    <a style="display:none" target="_blank" href="###"><img style="vertical-align:middle" border="0" src="" width="65" height="25" /></a>
    
                </p>
                <div style="clear:both;"></div>
            </div>
        </div>
        <div class="sj_footer">
            <div class="f-box">
                <ul>
                    <li><a href="/jianshe" target="_blank">网站建设</a></li>
                    <li><a href="/jianshe#ym_websiteBox6" target="_blank">服务流程</a></li>
                    <li><a href="/jianshe#ym_websiteBox8" target="_blank">售后服务</a></li>
                    <li><a href="#" target="_blank">付款方式</a></li>
                    <li><a href="/about/" target="_blank">关于我们</a></li>
                    <li><a href="#" target="_blank">网站地图</a></li>
                    <div style="clear:both;"></div>
                </ul>
                <p class="copy">Copyright © 2022 青羊区小谭信息技术咨询服务工作室 乐山建站工作室 </p>
                <p class="copy"> <a href="http://www.miibeian.gov.cn/" target="_blank" rel="nofollow">蜀ICP备2021004003号-25</a>  <a
                        href="###" target="_blank"><img src="/Public/Home/images/govicon.gif" width="20" height="28" border="0" style="border-width:0px;border:hidden; border:none;"></a></p>
                <div style="clear:both;"></div>
            </div>
        </div>
    </div>
    <script type='text/javascript' src='/Public/Home/js/qqkefu.js'></script>
    <div class="qqkefu">
        <ul>
            <li class="qq_czaa" id="130"><b class="a"></b>135-1821-9792</li>
            <li class="qq_czaa" id="130"><a href="tencent://message/?uin=1683211881"><b class="b"></b>业务咨询QQ</a></li>
            <li class="qq_czaa" id="130"><a href="javascript:showDiv()"><b class="f"></b>提交合作意向表</a></li>
            <li class="qq_czb">
                <b class="c"></b>
                <div class="erweima">
                    <p><img src="/Public/Home/images/right_erweima.png"></p>
                </div>
            </li>
            <li class="top"><span></span></li>
        </ul>
    </div>
    <div id="popDiv" class="mydiv" style="display:none;">
        <a class="mydiv_clk" href="javascript:closeDiv()">X</a>
        <div class="mydiv_list">
            <div class="c_f_title"><span class="c_f_t">合作意向表</span></div>
            <div class="c_f_con">
                <form id="form1" name="form1" class="mess_form" method="post" action="/post_order">
                    <input name='enews' type='hidden' value='AddFeedback'>
                    <input name="bid" value="1" type="hidden">
                    <input type="hidden" name="ecmsfrom" value="9">
                    <input type="hidden" name='title' value="客户提交需求">
                    <li class="c_n"><span>公司名称</span>
                        <dl><input name='gsname' id='gsname' type="text"></dl>
                    </li>
                    <li class="c_n"><span>邮箱</span>
                        <dl><input name='gemail' id='gemail' type="text"></dl>
                    </li>
                    <li class="c_n xmm">
                        <div class="xmm_01"><span>姓名</span>
                            <dl class="c_n_i"><input name='name' id='name' type="text"></dl>
                        </div>
                        <div class="xmm_01"><span style="text-align:center">电话</span>
                            <dl class="c_n_i"><input name="tel" type="text"></dl>
                        </div>
                    </li>
                    <li class="c_tser">您需要的服务</li>
                    <li class="clearfix">
                        <dd><label><input type="radio" name='hobby' id='hobby' value="高端网站建设"><span>高端网站建设</span></label></dd>
                        <dd><label><input type="radio" name='hobby' id='hobby' value="我需要做微信营销"><span>我需要做微信营销</span></label></dd>
                        <dd><label><input type="radio" name='hobby' id='hobby' value="要找长期合作,需要年度服务"><span>要找长期合作,需要年度服务</span></label></dd>
                        <dd><label><input type="radio" name='hobby' id='hobby' value="我需要做购物商城"><span>我需要做购物商城</span></label></dd>
                        <dd><label><input type="radio" name='hobby' id='hobby' value="我需要网站改版"><span>我需要网站改版</span></label></dd>
                        <dd><label><input type="radio" name='hobby' id='hobby' value="其他"><span>其他</span></label></dd>
                    </li>
                    <li class="c_tser">您关注的地方</li>
                    <li class="clearfix">
                        <dd><label><input type="radio" name='hobby2' id='hobby2' value="对功能要求比较高"><span>对功能要求比较高</span></label></dd>
                        <dd><label><input type="radio" name='hobby2' id='hobby2' value="对设计创意要求比较高"><span>对设计创意要求比较高</span></label></dd>
                        <dd><label><input type="radio" name='hobby2' id='hobby2' value="需要可以购物支付"><span>需要可以购物支付</span></label></dd>
                        <dd><label><input type="radio" name='hobby2' id='hobby2' value="搜索引擎排名"><span>搜索引擎排名</span></label></dd>
                    </li>
                    <li class="c_tser">预算</li>
                    <li class="clearfix clearfix2">
                        <dd><label><input type="radio" name='hobby3' id='hobby3' value="一万以内"><span>一万以内</span></label>
                        </dd>
                        <dd><label><input type="radio" name='hobby3' id='hobby3' value="1-3万"><span>1-3万</span></label>
                        </dd>
                        <dd><label><input type="radio" name='hobby3' id='hobby3' value="3-5万"><span>3-5万</span></label>
                        </dd>
                        <dd><label><input type="radio" name='hobby3' id='hobby3' value="5万以上"><span>5万以上</span></label>
                        </dd>
                        <dd><label><input type="radio" name='hobby3' id='hobby3' value="需招投标"><span>需招投标</span></label>
                        </dd>
                    </li>
                    <li class="c_n" style="border-top:1px solid #eee; padding-top:10px"><span>验证码</span>
                        <dl class="c_n_i yzmm"><input type="text" name='code' id='code' value=""></dl><span
                                style="text-align:center"><img src="/Public/Home/images/1661eb19783442c38063791555cd0d80.gif"
                                                               onclick="this.src=this.src + '?'" width="100" height="40"></span>
                    </li>
                    <li class="clearfix">
                        <dd class="submit"><input name='submit' type="submit" value="提交需求"></dd>
                    </li>
                </form>
            </div>
        </div>
    </div>
    <div id="bg" class="bg" style="display:none;"></div>
    <div id='popIframe' class='popIframe' frameborder='0'></div>
    <script>
        //提交需求选项
        $(document).ready(function (e) {
            $(".mess_form").submit(function () {
                if ($("#gsname").val() == "") {
                    alert("请填写您的公司名称!");
                    $("#gsname").focus();
                    return false;
                }
                if ($("#gemail").val() == "") {
                    alert("请填写您的邮箱");
                    $("#gemail").focus();
                    return false;
                }
                if ($("#name").val() == "") {
                    alert("请填写您的姓名!");
                    $("#name").focus();
                    return false;
                }
                if ($("#tel").val() == "") {
                    alert("请填写您的电话!");
                    $("#tel").focus();
                    return false;
                }
                if ($("#hobby").val() == "") {
                    alert("请选择您需要的服务!");
                    $("#hobby").focus();
                    return false;
                }
                if ($("#hobby2").val() == "") {
                    alert("请选择您关注的地方!");
                    $("#hobby2").focus();
                    return false;
                }
                if ($("#hobby3").val() == "") {
                    alert("请选择您的预算!");
                    $("#hobby3").focus();
                    return false;
                }
                if ($("#code").val() == "") {
                    alert("请填写正确的验证码!");
                    $("#code").focus();
                    return false;
                }
            });
        });
    </script>
    <script language="javascript" type="text/javascript">
        //提交需求窗口
        function showDiv() {
            document.getElementById('popDiv').style.display = 'block';
            document.getElementById('popIframe').style.display = 'block';
            document.getElementById('bg').style.display = 'block';
        }
        function closeDiv() {
            document.getElementById('popDiv').style.display = 'none';
            document.getElementById('bg').style.display = 'none';
            document.getElementById('popIframe').style.display = 'none';
        }
    </script>
    <script type="text/javascript" src="/Public/Home/js/scrolltopcontrol.js"></script>
    <script type="text/javascript" src="/Public/Home/js/su_new.js"></script>
    </body>
    </html>
    <script>
        $(".con img").each(function(){
            var src = $(this).attr("src");    //获取图片地址
            var str=new RegExp("http");
            var result=str.test(src);
            if(result==false){
                var url = "https://www.cdcxhl.com"+src;    //绝对路径
                $(this).attr("src",url);
            }
        });
        window.onload=function(){
            document.oncontextmenu=function(){
                return false;
            }
        }
    </script>