美文网首页
HTML网页整体结构

HTML网页整体结构

作者: TinyTank | 来源:发表于2018-07-21 14:13 被阅读0次
    以下是钟琳天才的杰作
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title> 网页结构搭建 </title>
    </head>
    <body>
        <!-- 头部内容 -->
        <div>
            <!-- logo -->
            <div><img src="resources/1.jpg" width="300px" /></div>
            <!-- 导航 -->
            <div>
                <ul>
                    <li>
                    <a href="http://www.imooc.com"> 语文 </a>
                    </li>
                    <li>
                    <a href="http://www.imooc.com"> 数学 </a>
                    </li>
                    <li>
                    <a href="http://www.imooc.com"> 英语 </a>
                    </li>
                </ul>
            </div>
            <!-- banner图 -->
            <div><img src="resources/1.jpg" width="300px" /></div>
        </div>
        <!-- 主体内容 -->
        <div>
            <!-- 文章内容 -->
            <div>
                <h1> 如何成为一个天才? </h1>
                <h2> 想都别想!不要以为每个人都能叫钟琳好吧!清醒点!!! </h2>
            </div>
            <!-- 链接区 -->
            <div><h6> 假装我是一个链接谢谢 </h6></div>
        </div>
        <!-- 页脚内容 -->
        <div><h1> 钟琳是最棒的!不允许任何反驳!! </h1></div>
        
    </body>
    </html>
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title> 网页结构搭建 </title>
    </head>
    <body>
        <!-- 头部内容 -->
        <div>
            <!-- logo -->
            <div><img src="img/logo.jpg"/></div>
            <!-- 导航 -->
            <div>
                <ul>
                    <li>
                    <a href="http://www.imooc.com"> HTML5 </a>
                    </li>
                    <li>
                    <a href="http://www.imooc.com"> JavaScript </a>
                    </li>
                    <li>
                    <a href="http://www.imooc.com"> CSS </a>
                    </li>
                    <li>
                    <a href="http://www.imooc.com"> PHP </a>
                    </li>
                    <li>
                    <a href="http://www.imooc.com"> IOS </a>
                    </li>
                    <li>
                    <a href="http://www.imooc.com"> Android </a>
                    </li>
                    <li>
                    <a href="http://www.imooc.com"> Photoshop </a>
                    </li>
                </ul>
            </div>
            <!-- banner图 -->
            <div><img src="img/banner.jpg"/></div>
        </div>
        <!-- 主体内容 -->
        <div>
            <!-- 文章内容 -->
            <div>
                <h1> 如何成长为一名优秀“web前端开发工程师” </h1>
                <h6> 2天前&nbsp;&nbsp;308浏览&nbsp;&nbsp;1评论 </h6>
                <p>前端工程师,也叫Web前端开发工程师。一位好的Web前端开发工程师在知识体系上既要有广度,又要有深度,所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。现在说的重点不在于讲解技术,而是更侧重于对技巧的讲解。技术非黑即白,只有对和错,而技巧则见仁见智。以前会Photoshop和Dreamweaver就可以制作网页,现在只掌握这些已经远远不够了。无论是开发难度上,还是开发方式上,现在的网页制作都更接近传统的网站后台开发,所以现在不再叫网页制作,而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要,而且需要专业的前端工程师才能做好,这方面的专业人才近两年来备受青睐。Web前端开发是一项很特殊的工作,涵盖的知识面非常广,既有具体的技术,又有抽象的理念。简单地说,它的主要职能就是把网站的界面更好地呈现给用户。</p>
                <p>Web前端开发技术主要包括三个要素:HTML、CSS和JavaScript!</p>
                    <ul>
                        <li>HTML 甚至不是一门语言,他仅仅是简单的标记语言!</li>
                        <li>CSS 只是无类型的样式修饰语言。当然可以勉强算作弱类型语言。</li>
                        <li>Javascript 的基础部分相对来说不难,入手还算快。</li>
                    </ul>
                <p>如何才能做得更好呢?</p>
                    <ul>
                        <li>必须掌握基本的Web前端开发技术,其中包括:CSS、HTML、DOM、BOM、Ajax、JavaScript等,在掌握这些技术的同时,还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。</li>
                        <li>学会运用各种工具进行辅助开发。</li>
                        <li>除了掌握技术层面的知识,还要掌握理论层面的知识,包括代码的可维护性、组件的易用性等等。</li>
                    </ul>
                <p>可见,看似简单的网页制作,如果要做得更好、更专业,真的是不简单。这就是前端开发的特点,也是让很多人困惑的原因。如此繁杂的知识体系让新手学习起来无从下手,对于老手来说,也时常不知道下一步该学什么。 代码质量是前端开发中应该重点考虑的问题之一。例如,实现一个网站界面可能会有无数种方案,但有些方案的维护成本会比较高,有些方案会存在性能问题,而有些方案则更易于维护,而且性能也比较好。这里的关键影响因素就是代码质量。CSS、HTML、JavaScript这三种前端开发语言的特点是不同的,对代码质量的要求也不同,但它们之间又有着千丝万缕的联系。</p>
                <h6>作者: Jush&nbsp;&nbsp;时间:2016-8-29</h6>
            </div>
            <!-- 链接区 -->
            <div>
                <!-- html -->
                <dl>
                    <dt> HTML标记语言 </dt>
                    <dd><img src="img/HTML1.jpg"/></dd>
                    <dd> 超文本标记语言或超文本链接标示语言HTML是一种制作万维网页面的标准语言 </dd>
                </dl>
                <!-- css -->
                <dl>
                    <dt> CSS层叠样式表 </dt>
                    <dd><img src="img/css3.jpg"/></dd>
                    <dd> CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言 </dd>
                </dl>
                <!-- javascript -->
                <dl>
                    <dt> 什么是javascript </dt>
                    <dd><img src="img/js.jpg"/></dd>
                    <dd> JavaScript一种脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型 </dd>
                </dl>
            </div>
        </div>
        <!-- 页脚内容 -->
        <div>
            <p> 慕课网只学有用的 </p>
        </div>
        
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:HTML网页整体结构

          本文链接:https://www.haomeiwen.com/subject/eubirftx.html