Web前端基础应用

1.HTML基础 
在网络如此发达的今天,大家的生活、学习和工作基本上都离不开网络。大家经常浏览的新闻页面、微博和微信等各种从网上获得信息的途径,不论是PC终端,还是移动客户端,基本上都是以Web为基础来呈现的,因此Web页面呈现信息已成为各种信息共享和发布的主要形式。而HTML(Hyper Text Markup Language,超文本标记语言,在有些书籍中也翻译为超文本标签语言)则是创建Web页面的基础。本书将从HTML文件的基本结构是什么,到使用HTML标签制作简单的网页,一直到最后使用DIV+CSS制作精美的商业网站,以这样一个循序渐进的讲解过程,帮助大家完成不会→会→熟练→精通网页制作的蜕变。学习完本门课程后,大家都能够掌握网页制作的精髓,快速而熟练地制作网页。 本章将讲解网页制作中的基础内容,给大家打下一个牢固的基础,即本章的重点内容是HTML文件的基本结构和W3C标准,以及制作网页常用的基本标签。 
2.列表、表格与框架 
列表在网页制作中占据着重要的位置,许多精美、漂亮的网页中都使用了列表。本章将向大家介绍列表的概念及相关的使用方法,通过练习掌握列表应用的技巧,从而可 以制作出精美的网页。同时,在制作网页时,表格是一种不可或缺的数据展示工具,使用表格可以灵活地实现数据展示,表格在很多页面中还发挥着页面排版的作用。对于页面的排版和设计,框架也是网页制作过程中一种普遍采用的方式,使用框架可以极大地提高页面的复用程度,减少重复开发,因此掌握框架技术也是网页制作人员应该具备的基本技能。

3.表单 
表单是实现用户与网页之间信息交互的基础,通过在网页中添加表单可以实现诸如会员注册、用户登录、提交资料等交互功能。本章将主要讲解如何在网页中制作表单,并使用表单元素创建表单。为了能够提供对当前互联网搜索引擎的支持,还讲解如何制作符合语义化规范要求的表单。 
4.初识CSS 
本章将介绍为什么使用CSS、CSS基本语法、CSS的选择器,以及如何在网页中应用CSS样式,最后讲解CSS复合选择器和CSS的继承特性。重点是掌握CSS基本语法、它的3种基本选择器,以及在HTML页面添加CSS的方式。 
5.CSS美化网页元素 
本章从基础的文字样式设置开始,详细讲解使用CSS设置文字的各种效果,文字与图片的混排效果,试用CSS设置超链接各种方式,最后讲解网页中背景颜色、背景图片的各种设置方法和列表样式的设置方法。 通过本章的学习,可以对网页的文本、图片、列表、超链接设置各种各样的效果,使网页看起来美观大方、赏心悦目。  
6.盒子模式 
会用到盒子模型的知识。所以掌握了盒子模型的属性及用法,才能真正地控制好页面中的各个元素。 本章主要介绍盒子模型的基本概念,盒子模型的边框、内边距和外边距,以及它们在网页中的实际应用,最后介绍标准文档流和display属性在网页中的用法。相信学完本章以后,大家在网页制作的水平上会有一个很大的提升。 
7.浮动 
使用DIV+CSS进行网页布局实际上是使用CSS定位、排版网页元素,这是一种很新的排版理念,完全有别于传统的排版习惯,它首先对<div>标签进行分类,然后使用CSS对各个<div>进行CSS定位,最后在各个<div>中编辑页面内容,这样就实现了表现与内容分离,在后期维护CSS十分容易,那么如何使用CSS定位网页元素呢? 这就是本章重点要讲解的内容——浮动,使用浮动定位网页元素,并且根据网页布局需要对浮动进行清除或处理溢出内容,因此本章主要学习的内容有3点。  
(1)使用float属性定位网页元素。 (2)使用clear属性清除浮动。  (3)使用overflow属性进行溢出处理。 
8.定位网页元素 
在前面的章节中讲解了浮动的概念,以及使用浮动布局网页、定位网页元素,本章将要讲解网页制作中另一个重要属性position,介绍使用position定位网页元素,以及设置元素堆叠顺序的z-index属性。 通过本章的学习,将能够完成网页中更为复杂的布局和元素定位。本章主要学习的内容有以下两点。 

(1) 使用position属性定位网页元素。  (2) 使用z-index属性设置元素的堆叠顺序。 
9.指导学习:课程总复习 
本章将进行复习总结,把前面章节中学习过的知识进行综合运用,通过制作开心网游戏页面,使大家在巩固HTML标签、CSS知识的同时,对CSS综合运用的能力也有一个大幅度的提高。 
10.项目案例:制作V+网站 
到本章为止,这门课程已接近尾声。通过前面章节的学习和上机训练,相信大家已经可以游刃有余地使用DIV+CSS布局并制作较为复杂的网页了。 为了使大家能够更好地练习使用CSS布局、美化网页,熟练、快速地制作网页,本次课让大家制作凡客诚品旗下“V+”网站,综合运用学习过的知识,巩固使用HTML编辑网页,使用CSS布局并美化网页,牢固掌握学习过的知识和技能点。

时间: 2024-07-29 00:01:42

Web前端基础应用的相关文章

《web 前端基础到实战系列课程》

<web 前端基础到实战系列课程> 摘要: mod_expires&mod_headers可以减少10%左右的重复请求,让重复的用户对指定的页面请求结果都CACHE在本地,根本不向服务器发出请求. 在使用之前,首先要确认一下"mod_expires"模组是否有启用.如果是自己安装Apache来架设网页主机的话,这里我们可以透过编辑Apache的"httpd.conf"设定档来处理 一.浏览器缓存原理 将该行前面的"#"字号删除

进击的Python【第十三章】:Web前端基础之HTML与CSS样式

进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python #coding:utf-8 import socket def handle_request(client): buf = client.recv(1024) client.send("HTTP/1.1 200 OK\r\n\r\n")

web前端基础知识总结

上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 (2) lang: 表示整个文档中所使用的语言,en--英文,zh--中文 (3) version:定义创作文档的HTML的标准版本 2.<head></head>用于封装位于文档头部的其他标签 属性: (1) dir:文本的显示方向 (2)  Lang:语言信息 (3)  Prof

web前端基础知识学习网站推介

内容:一.基础知识及学习资料1. HTML入门学习:http://www.w3school.com.cn/html/index.aspHTML5 入门学习:http://www.w3school.com.cn/html5/index.asp 2. CSS入门学习:http://www.w3school.com.cn/css/index.aspCSS3入门学习:http://www.w3schools.com/css3/default.asphttp://css3-tutorial.com/ 3.

Web前端基础(CSS position的正确用法)

position属性的relative以及absolute的区别是什么? 任何元素的默认position的属性值都为static(静态),但我们在布局的时候也会经常用到relative(相对)以及absolute(绝对)这两种属性. 再分别介绍两种属性之前,我们一定要记住一个重要结论:如果用position来进行布局,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因为它不受父级元素padding的属性影响,当然也可以用relativ

web前端基础知识整理

1.we标准的理解 (1)Web标准规范要求,书写标签必须闭合.标签小写.不乱嵌套(可提高搜索引擎搜索效率,SEO优化). (2)使用外链css和js脚本,从而达到结构与行为.结构与表现的分离,提高页面的渲染速度,能更快地显示页面的内容. (3)样式与标签的分离,使结构与表现分离,更少的代码和组件, 从而降低维护成本.改版更方便 . (4)不需要变动页面内容,便可提供打印版本而不需要复制内容,提高网站易用性 . 2.前端页面的三层结构及其作用 结构层(structural layer)由 HTM

web前端基础知识

#HTML 什么是HTML,和他ML... 网页可以比作一个装修好了的,可以娶媳妇的房子. 房子分为:毛坯房,精装修 毛坯房的修建: 砖,瓦,水泥,石头,石子.... 精装修的房子:在毛坯房的基础上进行粉刷,覆盖,雕琢,修饰等操作.... HTML标签 相当于盖毛坯房用的石子,砖瓦....:房子成功,但是不会很好看. CSS属性  相当于装修时候使用的刷子,涂料,扣板...: 可以让毛坯房变得更加美观 HTML 超文本标记语言. HyperText Markup Language HTML标签的

web前端基础知识-(八)Ajax

Ajax即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,AJAX = 异步 JavaScript和XML(标准通用标记语言的子集),AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. 这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. -----传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页

web前端基础篇⑨

1.web端.app端 目前实现响应式布局,主要用以下两种方式.CSS原生代码响应式布局 @media screen.bootstrap移动设备优先.自带框架. 兼容性 用原生代码的话 根据不同的屏幕尺寸,用@media screen引入不同的值 用bootstrap,js文件自适应,优点是不用分屏幕尺寸,只用改一些小的数据.web和app图不能相同,为了浏览速度最好使用雪碧图. APP端.CSS原生代码写 需要注意:①宽高,使用百分比的方式. ②宽的话,使用rem,不能在一套css里面使用两个