1-2_网页设计和布局.pdf资源-CSDN文库

需积分: 3 195 浏览量 2022-01-19 11:21:01 上传评论收藏 6.36MB PDF 举报

网页设计和布局是构建互联网应用的核心技能之一，主要涉及HTML（HyperText Markup Language）和前端技术。本资料详细介绍了HTML的基础知识以及如何利用HTML进行网页布局和交互。 **HTML基础** HTML是创建网页的标准标记语言，它允许我们将文本、图像、链接等元素组织成结构化的页面。HTML入门阶段，我们需要理解基本的语法结构，如标签的使用和闭合规则。第一个HTML页面通常包括`<!DOCTYPE html>`声明、`<html>`根元素、`<head>`头部信息和`<body>`主体内容。在网页设置（head）部分，我们学习如何通过`<title>`标签定义页面标题，`<meta>`标签提供元信息，如字符编码、视口设置等。此外，还可以使用`<link>`引入外部样式表，`<script>`加载JavaScript代码，以增强页面功能。 **HTML常用标签** HTML包含许多预定义的标签，用于创建各种页面元素。例如，`<p>`用于段落，`<a>`定义超链接，`<img>`插入图片，`<h1>`至`<h6>`表示标题等级，`<ul>`和`<ol>`创建无序和有序列表，`<li>`定义列表项。还有`<div>`和`<span>`，它们是布局和样式的容器，分别用于块级和内联元素的组合。 **表单交互** 表单是网页与用户交互的重要工具，用于收集用户输入。`<form>`标签定义了表单区域，其中可以包含多种输入元素，如`<input>`（文本、密码、复选框、单选按钮等）、`<textarea>`（多行文本输入）、`<select>`（下拉菜单）等。表单的提交方式由`method`属性决定，通常有两种：`GET`和`POST`。GET将数据附在URL后面，适用于少量且不敏感的数据；POST则将数据封装在请求体中，更适合处理大量或隐私数据。 **HTML5拓展** HTML5引入了许多新特性，增强了网页的交互性和表现力。例如，`<canvas>`元素用于图形绘制，`<video>`和`<audio>`支持多媒体播放，`<input type="date">`等新的输入类型简化了表单验证，离线存储（`localStorage`和`sessionStorage`）允许在本地保存数据，地理定位API提供了获取用户位置的能力。 **网页布局** 网页布局是通过CSS（Cascading Style Sheets）来实现的。CSS允许我们控制元素的样式、位置和布局。常见的布局模式有流式布局、网格布局、响应式布局等。流式布局使元素随屏幕大小变化而自适应，网格布局通过行和列创建灵活的结构，响应式布局利用媒体查询实现多设备适配。学习完这些基础知识后，开发者可以创建功能丰富、布局合理的网页，并逐步掌握更高级的前端技术，如JavaScript框架（如React、Vue）、CSS预处理器（如Sass、Less）以及现代网页开发的最佳实践。通过上机任务和课后习题的实践，可以巩固理论知识，提高实际操作能力。

资源详情

资源评论

 
1 
目录 
第一章 HTML 基础 ................................................................................................................................................... 3 
一、Html 入门 ............................................................................................................................................................ 4 
二、第一个 Html 页面 ............................................................................................................................................... 6 
三、网页设置（head） ............................................................................................................................................. 8 
四、HTML 常用标签 ................................................................................................................................................. 11 
本章总结 ................................................................................................................................................................... 16 
上机任务 ................................................................................................................................................................... 16 
课后习题 ................................................................................................................................................................... 18 
第二章 表单交互 ................................................................................................................................................... 20 
一、div 与 span ......................................................................................................................................................... 21 
二、表单 ................................................................................................................................................................... 22 
三、method 两种方式区别...................................................................................................................................... 31 
四、h5 拓展 .............................................................................................................................................................. 34 
本章总结 ................................................................................................................................................................... 36 
上机任务 ................................................................................................................................................................... 36 
课后习题 ................................................................................................................................................................... 37 
第三章 数据组织及呈现 ....................................................................................................................................... 39 
一、HTML 表格 ......................................................................................................................................................... 40 
二、序列标签 ........................................................................................................................................................... 42 
三、frame 框架 ......................................................................................................................................................... 43 
本章总结 ................................................................................................................................................................... 45 
上机任务 ................................................................................................................................................................... 45 
课后习题 ................................................................................................................................................................... 47 
第四章 CSS 入门 1 ................................................................................................................................................. 49 
一、从 HTML 到 CSS ................................................................................................................................................. 50 
二、初识 CSS ............................................................................................................................................................ 50 
本章总结 ................................................................................................................................................................... 56 
上机任务 ................................................................................................................................................................... 56 
课后习题 ................................................................................................................................................................... 57 
第五章 CSS 入门 2 ................................................................................................................................................. 60 
一、选择器基础 ....................................................................................................................................................... 61 
二、伪类 ................................................................................................................................................................... 64 
三、选择器分组 ....................................................................................................................................................... 67 
四、选择器合并 ....................................................................................................................................................... 67 
本章总结 ................................................................................................................................................................... 68 
上机任务 ................................................................................................................................................................... 68 
课后习题 ................................................................................................................................................................... 70 
能力扩展部分 ........................................................................................................................................................... 71 
第六章 CSS 布局 1 ................................................................................................................................................. 74 
一、块元素和行内元素 ........................................................................................................................................... 75 
二、CSS 引用方式 .................................................................................................................................................... 76 

 
2 
三、布局基础 ........................................................................................................................................................... 80 
四、浮动布局 ........................................................................................................................................................... 82 
五、定位布局 ........................................................................................................................................................... 84 
本章总结 ................................................................................................................................................................... 87 
上机任务 ................................................................................................................................................................... 87 
课后习题 ................................................................................................................................................................... 89 
能力扩展部分 ........................................................................................................................................................... 90 
第七章  CSS 微观布局 ............................................................................................................................................ 94 
一、页面微观布局实例 ........................................................................................................................................... 95 
二、Spirit 技术 .......................................................................................................................................................... 97 
三、hover 应用 ......................................................................................................................................................... 99 
本章总结 ................................................................................................................................................................. 102 
上机任务 ................................................................................................................................................................. 103 
课后习题 ................................................................................................................................................................. 104 
能力扩展部分 ......................................................................................................................................................... 105 
 
编者寄语： 
各位小伙伴们，网站是大家经常能够接触到的，之前我们都是访问别人做好的网站，你想过有一天自
己去开发一个网站让其他人访问么？这门课程，就是带领大家从完成一个网页开始，再到完成一个网站（一
组网页）。本门课程有两部分组成，①html 部分（前 3 章），完成网页的“主体”；②css 部分（后 4 章），完
成网页的打扮（美化）。 
完成上述章节基础知识的学习之后，会给大家引入一个企业级框架，随后就是将近一周的项目课，大
家可以利用框架来完成自己的第一个网站，同时体会框架的魅力。 
作为大家的第一门真正的技术专业课，本课程内容非常细碎，只有做大量的记忆和上机练习，才能取
得好的学习效果。同时我希望大家在大学的第一个项目上，敢于挑战和付出，做到开门红和首战必胜，为
自己的大学生涯开一个好头儿，并让这种胜利逐渐延续下去直至成为习惯。 
云时代互联网教育研发中心 
2019 年 7 月         
 
   