01html基础案例实践04

shink      2022-02-10     151

关键词:

day04

案例实践
html有五个部分构成:
logo
导航栏
banner图
内容(文章内容,链接区)
页脚

 

案例代码(index4.html):

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>html案例</title>
 6 </head>
 7 <body>
 8     <!-- 头部部分 -->
 9     <div>
10         <!-- logo -->
11         <div>
12             <img src="img/logo.jpg" alt="logo">
13         </div>
14         <!-- 导航 -->
15         <div>
16             <ul>
17                 <li><a herf="#">HTML5</a></li>
18                 <li><a herf="#">JS</a></li>
19                 <li><a herf="#">CSS</a></li>
20                 <li><a herf="#">IOS</a></li>
21                 <li><a herf="#">Android</a></li>
22                 <li><a herf="#">Photoshop</a></li>
23             </ul>
24         </div>
25         <!-- banner图 -->
26         <div>
27             <img src="img\banner.jpg" alt="banner图">
28         </div>
29     </div>
30     <!-- 主体部分 -->
31     <div>
32         <!-- 文章内容 -->
33         <div>
34             <h1>如何成长为一名优秀“web前端开发工程师”</h1>
35             <h6>2天前&nbsp;&nbsp;308浏览&nbsp;&nbsp;1评论</h6>
36             <p>
37                 前端工程师,也叫Web前端开发工程师。一位好的Web前端开发工程师在知识体系上既要有广度,又要有深度,所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。现在说的重点不在于讲解技术,而是更侧重于对技巧的讲解。技术非黑即白,只有对和错,而技巧则见仁见智。以前会Photoshop和Dreamweaver就可以制作网页,现在只掌握这些已经远远不够了。无论是开发难度上,还是开发方式上,现在的网页制作都更接近传统的网站后台开发,所以现在不再叫网页制作,而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要,而且需要专业的前端工程师才能做好,这方面的专业人才近两年来备受青睐。Web前端开发是一项很特殊的工作,涵盖的知识面非常广,既有具体的技术,又有抽象的理念。简单地说,它的主要职能就是把网站的界面更好地呈现给用户。
38             </p>
39             <p>Web前端开发技术主要包括三个要素:HTML、CSS和JavaScript!</p>
40             <ol>
41                 <li>HTML 甚至不是一门语言,他仅仅是简单的标记语言!</li>
42                 <li>CSS 只是无类型的样式修饰语言。当然可以勉强算作弱类型语言。</li>
43                 <li>Javascript 的基础部分相对来说不难,入手还算快。</li>
44             </ol>
45             <p>如何才能做得更好呢?</p>
46             <ol>
47                 <li>必须掌握基本的Web前端开发技术,其中包括:CSS、HTML、DOM、BOM、Ajax、JavaScript等,在掌握这些技术的同时,还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。</li>
48                 <li>学会运用各种工具进行辅助开发。</li>
49                 <li>除了要掌握技术层面的知识,还要掌握理论层面的知识,包括代码的可维护性、组件的易用性等等。</li>
50             </ol>
51             <p>可见,看似简单的网页制作,如果要做得更好、更专业,真的是不简单。这就是前端开发的特点,也是让很多人困惑的原因。如此繁杂的知识体系让新手学习起来无从下手,对于老手来说,也时常不知道下一步该学什么。 代码质量是前端开发中应该重点考虑的问题之一。例如,实现一个网站界面可能会有无数种方案,但有些方案的维护成本会比较高,有些方案会存在性能问题,而有些方案则更易于维护,而且性能也比较好。这里的关键影响因素就是代码质量。CSS、HTML、JavaScript这三种前端开发语言的特点是不同的,对代码质量的要求也不同,但它们之间又有着千丝万缕的联系。</p>
52             <h6>作者: Jush&nbsp;&nbsp;时间:2016-8-29</h6>
53         </div>
54         <!-- 链接区 -->
55         <div>
56             <dl>
57                 <dt>HTML标记语言</dt>
58                 <dd>
59                     <img src="img\HTML1.jpg" alt="HTML1">
60                 </dd>
61                 <dd>超文本标记语言或超文本链接标示语言HTML是一种制作万维网页面的标准语言</dd>
62             </dl>
63             <dl>
64                 <dt>CSS层叠样式表</dt>
65                 <dd><img src="img/css3.jpg" alt="css3"></dd>
66                 <dd>CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言
67                 </dd>
68             </dl>
69             <dl>
70                 <dt>什么是javascript</dt>
71                 <dd><img src="img/js.jpg" alt="js"></dd>
72                 <dd>JavaScript一种脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型</dd>
73             </dl>
74         </div>
75     </div>
76     <!-- 页脚部分 -->
77     <div>
78         <p>慕课网只学有用的</p>
79     </div>
80 </body>
81 </html>

 

图示:

axure案例及基础部件

Axure案例及基础部件:0、AxureShop  后台模板(PC端同步01—TC_ZY出品)手机端查看在另个作品  https://www.axureshop.com/a/379376.html  14.1元(推荐!!!) 1、WebPPD   电商后台管理系统   查看详情

apt案例之点击事件

...ethod类好消息博客笔记大汇总【16年3月到至今】,包括Java基础及深入知识点,Android技术博客,Python学习笔记等等,还包括平时开发中遇到的bug汇总,当然也在工作之余收集了大量的面试题,长期更新维护并且修正,持续完善&hell... 查看详情

2021-10-04wpf上位机55-mvvm手写基础框架案例

案例界面:1.登录界面和逻辑2.首页界面和逻辑案例源码:https://download.csdn.net/download/aa2528877987/27718037 查看详情

redis入门到精通系列:redis操作的两个实践案例

...sh)、集合类型(set)、有序集合类型(sorted_set)。学完基础语法操作后下一步就是通过几个案例来实践操作一下redis。在这里不会采用任何其他语言,单纯使用redis进行模拟操作。redis的基础操作看这一篇:redis入门到精通系列 查看详情

redis入门到精通系列:redis操作的两个实践案例

...sh)、集合类型(set)、有序集合类型(sorted_set)。学完基础语法操作后下一步就是通过几个案例来实践操作一下redis。在这里不会采用任何其他语言,单纯使用redis进行模拟操作。redis的基础操作看这一篇:redis入门到精通系列 查看详情

vuetodolist案例---脚手架基础案例示意(代码片段)

欢迎学习交流!!!持续更新中…文章目录TodoList案例总结TodoList案例TodoList案例结果演示:main.js文件://引入VueimportVuefrom'vue'//引入AppimportAppfrom'./App.vue'//关闭Vue的生产提示Vue.config.prod 查看详情

html5-基础-svg实践

关于svgHTML页面常用加载svg图片方式:HTML//data和type至少指定一项<objectdata=‘./public/icon.svg‘width=‘20‘height=‘20‘name=‘svg‘type=‘image/svg+xml‘usemap="#nameOfMap"></object>HTML元素(不推荐)iframe<iframesrc=". 查看详情

微服务架构案例(05):springcloud基础组件应用设计

...数据设计规划04:中间件集成,公共服务管理05:SpringCloud基础组件应用设计一、组件应用规划1、注册中心Eureka组件是Netflix开发的,用于定位服务,基于RESTFul方式实现服务注册与发现。包括一个EurekaServ 查看详情

现代中小企业it基础平台建设-完整案例实战(04_网络平台)

4配置指南-(网络平台)...........................................................................................................................34.1分支路由器..................................................................................................................................... 查看详情

01班04组白盒测试实践作业进展

开会完成静态评审代码:选择邹欣老师在讲义“现代软件工程讲义3代码规范与代码复审”中所提到的部分内容作为代码评审标准10.1  代码风格规范 10.1.1  缩进 是用Tab键好,还是2、4、8个空格? 结论:4... 查看详情

01班04组白盒测试实践任务分配

今日开始完成任务分工,具体分工如下:第三次小组作业分工1)小李:使用白盒测试方法设计测试用例,使用测试管理工具或者excel来记录测试用例,至少40个;2)小司和小林:负责并组织静态评审,完成评审会议纪要和评审结... 查看详情

大前端一html(代码片段)

...片07列表四、表格标签01表格标签02行03列例如:04表格案例五、表单01表单标签02input03select04textarea 查看详情

大前端一html(代码片段)

...片07列表四、表格标签01表格标签02行03列例如:04表格案例五、表单01表单标签02input03select04textarea 查看详情

books新手实践xpath

...scrapy中使用css和xpath,遇到实际应用无法实现,只能做到基础的功能于是笔者摆脱scrapy框架,按照requests这些基础知识来重做项目,发现运行速度远远低于scrapy框架!下面是代码,代码也存在较多冗余,加剧了时间复杂度,导致... 查看详情

js0基础学习笔记

     为了须要,最近開始学习JS相关知识。基本的方式是通过看视频以及查阅相关手冊。并动手实践,亲手写出每一个小案例,以下是相关代码(每一个案例用分隔线隔开)。<!DOCTYPEhtml><html> <head> ... 查看详情

黑盒测试实践——day01

一.任务进展情况小组成员讨论了测试案例的选取以及测试工具的选取,目前正在设计合理的测试方法,研究待测试系统的功能需求和缺陷。二.存在的问题测试工具的使用还是不很清楚。三.解决方法通过上网搜集了解测试工具的... 查看详情

现代中小企业it基础平台建设-完整案例实战(09_附录a)

附录A..........................................................................................................................................................2A01.测试终端设置....................................................................................................................... 查看详情

现代中小企业it基础平台建设-完整案例实战(09_附录c)

附录C..........................................................................................................................................................2C01.虚拟机模板.......................................................................................................................... 查看详情