2 网站设计与开发-HTML基础
第2章 网页设计与制作-HTML语言基础
由“<”和“>”组成的就是标记。在HTML 语言中标记分“单标记”和“双标记”。
2.1 HTML概述
2.2 文本的编辑
2.2.3 标题显示等级
语法格式为：
<hn>…</hn>
n：表示不同级别的标题，n值可以是1-6中 的任意数字，其中1表示的标题字体最大。
可以用align属性设置对齐方式，常用的有 左对齐，居中，右对齐三种对齐方式。
2.2 文本的编辑
2.2.4 列表
在HTML中，列表常用的有“有序列表”和 “无序列表”。
2.2 文本的编辑
2.2.4 列表
2．无序列表 基本语法结构为：
<ul type=“n”>
<li>项目1</li> <li>项目2</li>
……
<li>项目n</li>
</ul>
Type:设置符号形状，有实心圆、小正方形、 空心圆三种，具体如下：
n=disk：符号为实心圆。 n=square：符号为正方形。 n=circle：符号为空心圆。
绝对路径：完整的描述文件位置的路径就 是绝对路径。对于绝对路径可以不需要知道其 他任何信息就可以判断出文件的位置。
相对路径：所谓相对路径,顾名思义就是当 前文档与目标的相对位置。例<src = "1.bmp">.
网页设计与制作试题(HTML基础)有答案
1.HTML 文件必须使用htm 或者（B)作为文件扩展名。
A.docB. htmlC. jsp D。
aspx2.HTMl是指（A）。
A.超文本标签语言B。
汇编语言C。
服务端端语言 D.脚本语言3.WWW是（B）的意思。
A．网页B．万维网C．浏览器D．超文本传输协议4.在网页中显示特殊字符,如果要输入“<”，应使用（D）。
A．lt; B．＆Lt；C．＆lt D．＆lt；5.以下说法中，错误的是：（D）.A．获取WWW服务时，需要使用浏览器作为客户端程序。
B．WWW服务和电子邮件服务是Internet提供的最常用的两种服务。
C．网站就是一系列逻辑上可以视为一个整体的页面的集合。
D．所有网页的扩展名都是。
htm。
6.以下说法中,错误的是:（B）。
A．网页的本质就是HTML源代码。
B．网页就是主页。
C．使用“记事本”编辑网页时，通常应将其保存为.htm 或.html 后缀。
D．本地网站通常就是一个完整的文件夹。
7.浏览网页时，通常使用以下协议：(C）.A．mailto B．FTP C．HTTP D．TCP/IP8.在网页中显示特殊字符，如果要输入空格,应使用(D)。
A．nbsp; B．&Nbsp；C．＆nbsp D．＆nbsp；9.以下软件中，不能直接用来编辑HTML 文件的是:（C）。
A．记事本B．FrontPage C．Flash D．Dreamweaver10.以下有关HTML 标记符的属性的说法中,错误的是：（C）。
A．在HTML中，所有的属性都放置在开始标记符的尖括号里。
B．属性与HTML标记符的名称之间用空格分隔。
C．属性的值放在相应属性之后,用等号分隔；而不同的属性之间用分号分隔。
D．HTML 属性通常也不区分大小写.二、填空题1.如果要为网页指定黑色的背景颜色,应使用以下html语句：〈body __bgcolor=”black”或bgcolor="＃000000”_______〉。
HTML CSS JavaScript网页制作(第2版)
04
6.4设置背 景
06
6.6设置表 格样式
05
6.5图文混 排
6.7设置表单样式
6.8使用CSS设置常 用样式修饰的综合案
例
6.9实训——制作梦 想橱柜商务安全中心 页面
习题6
7.1使用CSS设置链 接
7.2用CSS设置列表
7.3创建导航菜单
7.4使用CSS设置链 接与导航菜单综合案 例
7.5实训——梦 想商务平台技 术支持页面
习题7
8.2在网页中调用 JavaScript
8.1 JavaScript简 介
8.3常见的网页特 效
8.4实训——制 作二级纵向列 表模式的导航 菜单
习题8
9.1网站的开发流程 9.2设计首页布局
9.3首页的制作 9.4制作产品中心页
9.6制作新闻资讯 页
9.5制作产品明细 页
习题9
10.1制作后台管理 登录页面
精彩摘录
这是《HTML+CSS+JavaScript网页制作（第2版）》的读书笔记模板，可以替换为自己的精彩内容摘录。
感谢观看
3.6实训——制作 梦想橱柜联系信息
表单
3.5换行标签<br/>
习题3
1
4.1 CSS概述
2
4.2 CSS语法 基础
3
4.3 CSS的属 性单位
4 4.4 CSS与
HTML文档的结 合方法
5
4.5 HTML文档 结构
4.7实训——制作 梦想橱柜行业资讯
页面
4.6元素类型
习题4
5.1 Web标准
5.2认识Div+CSS布 局
5.3 CSS盒模型 5.4盒子的定位
第2章 HTML语言基础
<head> <script src="path/to/script.js" language="javascript" type="text/javascript"> </script> </head>
引用外部 文件
2.2.3 HTML中样式表的书写
级联样式表CSS可以精确指定网页元素位置，控制网页 外观以及创建特殊效果。 在网页上使用样式表有三种方法： ① 应用内嵌样式到各个网页元素。 ② 在网页上创建嵌入式样式表。 ③ 将网页链接到外部样式表。 1．内嵌样式 使用内嵌样式以应用层叠样式表属性到网页元素上。 例如段落标记符的内嵌样式属性如下： <p style="border-style: solid">
2.2.3 HTML中样式表的书写
2．嵌入式样式表 若只是定义当前网页的样式，可使用嵌入的样式表。
<HEAD><TITLE>字体属性示例</TITLE> <STYLE> <!-.s1{ font-family:黑体;font-size:x-large; font-style:italic } .s2{ font-size:larger} .s3{ font-variant:small-caps} .s4{ font-weight:bolder} .s5{ font:bolder italic 楷体_gb2312} --> </STYLE> </HEAD>
图2-1 简单的HTML文档
2.2 HTML文件的整体结构
2.2.1 HTML文件结构
一个完整的HTML文件结构如下: <html> 头部 <head>头部信息</head> <body>正文信息</body> 正文 </html>
第2章 HTML语言基础
2.1.2 HTML文件
【例2-1】简单的HTML文件。 <HTML> <HEAD> <TITLE> 简单的HTML文件 </TITLE> </HEAD> <BODY> 最简单的网页 </BODY> </HTML>
17
2.2 HTML语言的段落、超链接、图片标记
2.2.1 简单标记的认识与使用
表2-2 16种标准颜色
23
2.2.1 简单标记的认识与使用
例2-2 使用网页的背景色（bgcolor）属性，可以设定整个 网页的背景颜色；使用网页的文本色（text）属性，可以设 定整个网页文字的颜色。 <HTML> <HEAD> 这是主体之外的文本 <TITLE> 试试BODY标记的属性 </TITLE> </HEAD> <BODY bgcolor=greenyellow text=blue>
就其本质而言，是一个基于文本的编码标准，用于指示浏
览器以什么方式显示信息。 HTML是一种用于网页制作的排版语言，是Web最基本的构 成元素。HTML并非一种编程语言。 组成HTML的“命令”就是标记，它用符号“<”和“>”括起
来。
3
2.1.1 HTML概述
2. HTML的作用
① 格式化文本。 ② 建立超链接。
注意： ①并不是所有的标记都有属性，如换行标记<BR>。 ②根据需要可以用该标记的所有属性，也可以只用 需要的几个属性，在使用时，属性之间没有顺序。多 个属性之间用空格隔开。 属性和标记一样，都不区分大小写。但为了阅读方 便，本书用大写字母表示标记，小写字母表示属性。
《网页设计与制作基础》实验指导书(2010-2011-2)-实验1
实验一网页的认识实验目的1、掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件；2、利用记事本来编辑HTML文档并浏览。
3、配置网站运行环境。
实验环境WindowsXP操作系统，内部组成局域网，外连Internet互联网。
实验重点及难点◆熟悉使用浏览器进行浏览、搜索、下载。
◆熟悉HTML的结构、语法。
◆创建与管理站点实验内容1、浏览新浪主页并保存，观察其保存结果（其中包括哪些文件和文件夹）。
2、从网上（如网页制作大宝库等）下载网页制作时需要的小图片、动画及flash等网页制作素材。
3、收集你认为比较好的网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析网页。
4、制作一个简单的网页sy1-1.htm，用记事本编辑，网页标题为“我的第一个网页”，内容为司空曙的《江村即事》（要求加入文档类型声明），如下图所示。
5、使用Dreamweaver建立一个本地站点。
6、注：站点名称用你的名字的首字母，如方清华用fqh。
1）在网站根文件夹下创建文件夹sy12）打开“文件”面板并上传，类似于下图注：请利用“管理站点”的“导入”和“导出”功能保存和恢复站点设置，减少重复配置操作。
3）配置IIS。
打开控制面板>管理工具>internet信息服务。
注：如果“管理工具”中没有“internet信息服务”，请利用“控制面板”的“添加/删除程序”工具添加（在“添加/删除组件”选项中设置）。
4）配置本地intranet附录2 课程设计报告模板《网页设计与制作基础》课程设计报告任课教师专业班级班级代码组号第组组长学号姓名设计主题《网页设计与制作基础》课程组制评语（由任课教师答辩时填写）分工情况表（该表后两列由教师填写外，其余部分由学生填写）员的最后课程设计成绩是小组课程设计成绩与个人附加分之和。
指导教师（签名）：年月日一、设计目的（正文字体为“仿宋_GB2312”，字号为四号字）二、设计环境（正文字体为“仿宋_GB2312”，字号为四号字）三、设计步骤（各主要设计流程如确立主题、规划网站以及网页架构、素材准备、制作网页等的具体步骤）（正文字体为“仿宋_GB2312”，字号为四号字）四、设计结果（各相关网页的截图）（正文字体为“仿宋_GB2312”，字号为四号字）五、心得（通过此次课程设计说说你在设计过程中遇到的问题和解决方法，以及有何收获）（正文字体为“仿宋_GB2312”，字号为四号字）实验报告课程名称实验项目名称班级与班级代码实验室名称（或课室）专业任课教师学号：姓名：实验日期：年月日广东商学院教务处制姓名实验报告成绩评语：指导教师（签名）年月日说明：指导教师评分后，实验报告交院（系）办公室保存。
《网页设计与开发》实例教程 第二版课 清华大学出版社 后习题答案
习题1．HTML指的是（ A ）。
A超文本标记语言（Hyper Text Markup Language）B家庭工具标记语言（Home Tool Markup Language）C超链接和文本标记语言（Hyperlinks and Text Markup Language）2．web标准的制定者是（ B ）。
A 微软B万维网联盟（W3C）C网景公司（Netscape）3．用HTML标记语言编写一个简单的网页，网页最基本的结构是（ D ）。
A <html> <head>…</head> <frame>…</frame> </html>B <html> <title>…</title> <body>…</body> </html>C <html> <title>…</title> <frame>…</frame> </html>D <html> <head>…</head> <body>…</body> </html>4．从IE浏览器菜单中选择____查看 源文件______命令，可以在打开的记事本中查看到网页的源代码。
5．实现网页交互性的核心技术是_______ JavaScript _______________。
6．CSS的全称是________ Cascading Style Sheet __________ ______。
7．写出你了解的专业网页编辑制作工具_____Dreamweaver_，_ EditPlus___________。
8．URL的全称是____Uniform Resource Locator_____________________________。
网页-实验目录2
实训一站点的资源管理【实训目标】1、掌握站点的创建方法2、掌握站点的上传方法3、掌握空间站点的管理方法【实训内容】1、站点的创建、2、申请网上个人主页空间3、上传、下载站点4、个人空间管理实训二HTML基础与文本格式【实训目标】1、了解HTML的作用及其写法和规则2、掌握常见的HTML语句3、会在代码窗口编写简单的html语句，并输出生成页面【实训内容】用记事本或者是通过Dreamweaver代码窗口编写代码完成以下实训：1．用HTML编写一个简单的基本页面2．创建一个使用图像作为背景图案的网页3．创建一个页面，对文本进行设置4. 插入背景音乐实验三表格与超链接【实训目标】1、会利用表格对网页进行布局2、理解和掌握超链接的含义3、掌握几种超链接的创建方法4、掌握热区的创建和使用方法【实训内容】运用表格的嵌套等技术对所给的图片和文字进行定位。
创建网页文本链接；创建网页图片链接；创建电子邮件链接；创建脚本链接；创建锚点链接；给链接添加提示及管理链接。
实训四表单【实训目标】1、掌握表单项目的创建方法【实训内容】1、制作一个用户注册页面实训五框架【实训目标】会利用框架网页进行布局掌握框架网页的创建方法；掌握保存方法；掌握框架网页的编辑方法。
【实训内容】1、制作一个框架集网页，要求整个框架集包含3个页面2、制作一个能在页面内指定位置打开网页的页面实训六层与行为【实训目标】1、掌握插入层与绘制层的方法3、掌握层与行为特效的使用方法【实训内容】1、绘制层2、利用行为特效控制层的显示与隐藏效果实训七Fireworks 实例制作【实训目标】1、熟练认识与掌握fireworks矢量工具的使用2、掌握矢量图形与位图的区别3、理解和掌握路径与填充的特点4、掌握路径组合的特点和方式【实训内容】1、十字梅花按钮效果2、文字曲线动画3、Loading实例制作4、冬之韵逐字动画《网页设计》综合作业一、实训目的1.了解各类网站的制作方法。
认识HTML和CSS网页设计语言
认识HTML和CSS网页设计语言第一章：HTML的介绍和基本语法HTML（HyperText Markup Language）是一种用于创建网页的标记语言。
它包含一系列的标记，这些标记用于描述网页的结构和内容。
HTML的基本语法由标签、元素和属性组成。
1.1 标签HTML中的标签是一对尖括号包围的关键字，它们定义了元素的开始和结束。
例如，<head>和</head>标签用于定义网页的头部部分。
1.2 元素在HTML中，元素是由起始标签、内容和结束标签组成的。
起始标签用于定义元素的开始，结束标签用于定义元素的结束。
元素的内容位于起始标签和结束标签之间，可以包含文本、图片、链接等。
1.3 属性HTML中的属性用于为元素提供额外的信息。
属性通常包含在起始标签中，由属性名和属性值组成。
例如，<imgsrc="image.jpg">中的src属性指定了图片的链接地址。
第二章：HTML常用标签和属性2.1 文本标签HTML中的文本标签用于定义文本的样式和结构。
常用的文本标签包括<p>（段落）、<h1>-<h6>（标题）、<strong>（加粗）、<em>（斜体）等。
2.2 图片标签图片标签用于在网页中插入图片。
<img>标签是HTML中用于插入图片的标签，它需要指定图片的链接地址、宽度、高度等属性。
2.3 链接标签链接标签用于创建网页之间的链接。
<a>标签用于定义链接，它需要指定链接的目标地址，可以是其他网页、文件或者锚点。
2.4 列表标签列表标签用于创建有序或无序的列表。
<ul>标签用于创建无序列表，<ol>标签用于创建有序列表，<li>标签用于定义列表项。
第三章：CSS的介绍和基本语法CSS（Cascading Style Sheets）是用于描述网页样式的语言。
二、网页设计基础
2.1.3 插入水平线
水平分隔线标签 <hr> 是一个单标签，其作用是在标签所在位置插入 一条水平线，用以分割页面中的不同部分. 属性有：align, size, width（宽度）, color, noshade 例如： <hr align = “center” size = “6” color = “blue” width = “60%”noshade >
2.3 插入图像
图像插入 尺寸定位 文字说明 图像边框 图像布局
2.3.1 图像插入
插入图像标签 <img> 是一个单标签. 语法格式为： <img src = 参数值 alt =参数值 border =参数值 align =参数值 height =参数值 width =参数值 vspace =参数值 hspace =参数值> <img>的属性有src, alt, border,align, height/width, vspace/hspace等。
2.1.4 插入特殊符号
HTML常见特殊字符及其代码表
特殊或专用字符 < 数字代码 < 字符代码 <
>
& “ ! © ：
>
& " ! © ;
>
& "
©
® 空格
®
®
标签小总结
1.2.1 页面美化效果
பைடு நூலகம்
第二章HTML基础
例：
无序列表
例：
有序列表
1. 计算机一班 2. 计算机二班
1.无序列表
无序列表由两个标记组成，语法如下：
<ul>
<li> <li> 计算机一班 计算机二班
</ul>
<ul></ul> 表示中间的内容为无序列表 <li> 表明为一个列表项
例：
<html><body> <ul> <li>第一章 <li>第二章 <li>第三章 </ul> </body></html>
问其它的信息资源。
HTML文件大致结构
<HTML> <HEAD> <TITLE>网页标题</TITLE> </HEAD>
<BODY>
网页的内容 </BODY>
</HTML>
一个完整的html文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "/TR/REC-html40/strict.dtd"> <HTML> <HEAD> <TITLE>The document title</TITLE> </HEAD> <BODY> <H1>Main heading</H1> <P>A paragraph.</P> <P>Another paragraph.</P> </BODY> 运行结果 </HTML>
网站设计与前端开发作业指导书
网站设计与前端开发作业指导书第1章网站设计基础 (3)1.1 网站设计概述 (3)1.2 设计原则与规范 (3)1.2.1 设计原则 (3)1.2.2 设计规范 (4)1.3 设计工具与技术 (4)1.3.1 设计工具 (4)1.3.2 前端技术 (4)第2章前端开发技术概览 (4)2.1 前端开发概念 (4)2.2 HTML/CSS/JavaScript简介 (4)2.2.1 HTML (4)2.2.2 CSS (5)2.2.3 JavaScript (5)2.3 常用前端框架与库 (5)2.3.1 常用前端框架 (5)2.3.2 常用前端库 (5)第3章网站结构设计 (6)3.1 网站布局与导航 (6)3.1.1 网站布局 (6)3.1.2 网站导航 (6)3.2 网站信息架构 (7)3.2.1 信息分类 (7)3.2.2 信息组织 (7)3.3 用户体验设计 (7)3.3.1 界面设计 (7)3.3.2 内容呈现 (7)3.3.3 功能设计 (7)第4章网页视觉设计 (8)4.1 色彩与字体设计 (8)4.1.1 色彩选择与搭配 (8)4.1.2 字体设计 (8)4.2 图标与图片处理 (8)4.2.1 图标设计 (8)4.2.2 图片处理 (8)4.3 动画与交互设计 (9)4.3.1 动画设计 (9)4.3.2 交互设计 (9)第5章 HTML基础 (9)5.1 HTML文档结构 (9)5.1.1 文档类型声明（Doctype） (9)5.1.3 头部（Head） (9)5.1.4 主体（Body） (10)5.1.5 注释 (10)5.2 标签与属性 (10)5.2.1 标签 (10)5.2.2 属性 (10)5.3 表单与表格 (10)5.3.1 表单 (10)5.3.1.1 输入类型 (10)5.3.1.2 标签和字段集 (10)5.3.2 表格 (10)5.3.2.1 表格标题和表头 (10)5.3.2.2 行和单元格 (11)第6章 CSS样式与布局 (11)6.1 CSS选择器与优先级 (11)6.2 常用CSS样式属性 (11)6.3 布局方法与响应式设计 (12)第7章 JavaScript编程基础 (12)7.1 JavaScript语法与数据类型 (12)7.1.1 语法规则 (12)7.1.2 数据类型 (13)7.2 函数与对象 (13)7.2.1 函数 (13)7.2.2 对象 (13)7.3 事件处理与DOM操作 (13)7.3.1 事件处理 (13)7.3.2 DOM操作 (14)第8章前端框架应用 (14)8.1 Bootstrap框架 (14)8.1.1 Bootstrap优势 (14)8.1.2 Bootstrap使用方法 (14)8.2 Vue.js框架 (15)8.2.1 Vue.js优势 (15)8.2.2 Vue.js使用方法 (15)8.3 React.js框架 (15)8.3.1 React.js优势 (15)8.3.2 React.js使用方法 (15)第9章网站优化与调试 (16)9.1 页面功能优化 (16)9.1.1 优化资源加载 (16)9.1.2 优化页面渲染 (16)9.1.3 优化JavaScript执行 (16)9.1.4 优化浏览器缓存 (16)9.2.1 优化HTTP请求 (16)9.2.2 优化传输内容 (16)9.2.3 优化服务器响应 (17)9.3 常用调试工具与技巧 (17)9.3.1 浏览器开发者工具 (17)9.3.2 功能分析工具 (17)9.3.3 命令行工具 (17)9.3.4 代码调试技巧 (17)第10章前端工程化与部署 (17)10.1 版本控制与协同开发 (17)10.1.1 版本控制概述 (17)10.1.2 Git的使用 (17)10.1.3 团队协同开发 (18)10.2 自动化构建与部署 (18)10.2.1 自动化构建 (18)10.2.2 构建工具的选择 (18)10.2.3 自动化部署 (18)10.3 前端安全防护策略 (18)10.3.1 前端安全问题概述 (18)10.3.2 防护策略 (18)10.3.3 加密与认证 (18)第1章网站设计基础1.1 网站设计概述网站设计是指通过对网站的整体布局、色彩搭配、版面结构、交互效果等方面进行创意和规划，以实现用户界面美观、功能完善、易于使用的设计过程。
网页设计与制作(HTML+CSS)-题库带答案
网页设计与制作（HTML+CSS）-题库带答案1、URL 称为（）。
A、统一资源定位符B、客户机C、网络服务商D、远程访问答案： A2、万维网WWW以（）方式提供世界范围的多媒体信息服务。
A、文本B、信息C、超文本D、声音答案： C3、W3C（英文World Wide Web Consortium的缩写），中文译为“万维网联盟”是（）。
A、国际最著名的标准化组织B、欧洲计算机制造商协会C、中国计算机行业协会D、中国计算机学会答案： A4、网站是有多张网页组成的，请问正确吗？答案：正确5、网页包括静态网页和动态网页，请问正确吗？答案：正确6、下面哪个不属于标记？（）A、 pB、 h1C、 fontD、 color答案： D7、将某段文本应用font标记设置为微软雅黑，16px，是设置font标记中哪两个属性？（）A、 font-family sizeB、face sizeC、 font-family font-sizeD、 face font-size8、( )不属于元信息标记 <meta/>的属性。
A、 nameB、 contentC、 http-equivD、 url答案： D9、html文档的基本格式包括哪些标记？（）A、！DoctypeB、 htmlC、 bodyD、 head答案： ABCD10、设置边框颜色是哪个属性A、 border-colorB、 vC、 dD、 f答案： A11、请问面向对象的三大特征是什么？答案：12、下面哪个不属于标记？（）A、 pB、 h1C、 fontD、 color答案： D13、将某段文本应用font标记设置为微软雅黑，16px，是设置font标记中哪两个属性？（）nA、 font-family sizeB、face sizeC、 font-family font-sizeD、 face font-size答案： B14、以下方式哪个实现将水平线粗细设置为2，宽度设置为500px?A、 <hr font-size=”2”width=”500%”/>B、<hr size=”2”width=”500%”/>D、 <hr size=”2”width=”500px”/>答案： D15、制作网页时，网页素材名、保存网页素材的文件夹名、网页文件名不可以以中文命名，而只能以英文、数字或下划线，或是三者的组合命名，这句话是对还是错？答案：正确16、对于初学者，计算机上必备的三大浏览器分别是（）。
accpt教程,使用HTML语言开发商业站点(HTML)2
跨多行的表格
查看源代码
rowspan =“n” 属性表示跨多少行？ 属性表示跨多少行？
<TABLE border="1"> <TR> <TD rowspan=“3” >早上菜谱 </TD> 早上菜谱 <TD >食物 食物</TD> 食物 <TD >鸡蛋 鸡蛋</TD> 鸡蛋 </TR> <TR> <TD >饮料 饮料</TD> 饮料 <TD >牛奶 牛奶</TD> 牛奶 </TR> <TR> <TD>甜点 甜点</TD> 甜点 <TD>开心粉 开心粉</TD> 开心粉 </TR> </TABLE>
如何设置表格的填充属性
查看源代码
<TABLE cellspacing=“5” cellpadding=“10” border=“1" “ ” “ ” “ background="images/type_back.jpg" > <TR> cellspacing属性用来设 属性用来设 置表格内框宽度 <TD colspan="6"> </TD> 置表格内框宽度 </TR> cellpadding属性用来 属性用来 设置表格内填充距离 <TR bgcolor="#EBEFFF"> <TD colspan="3" align="center" >笔记本电脑 笔记本电脑</TD> 笔记本电脑 <TD colspan="3" align="center" >办公设备、文具、耗材 办公设备、 办公设备 文具、耗材</TD> </TR> …. </TABLE> 填充之后 的效果
网页设计与制作知识点整理总结
第1章网页设计概述1.1 Internet 与WWW1.1.1 InternetInternet，译为“因特网”，又叫做“国际互联网”。
Internet 为用户提供了多种服务：•万维网服务（WWW）•电子邮件服务（E-mail ）•远程登录服务（Telnet ）•文件传输服务（FTP）1.1.2 WWWWWW，是“World Wide Web”的缩写，简称Web，译为“万维网”。
WWW 是运行在Internet 之上的超文本信息浏览系统。
WWW 的核心部分由三个标准构成：HTML / URL / HTTP1．HTML：超文本标记语言，用于定义超文本文档（网页）的结构。
2．URL：统一资源定位符，用于标识万维网上信息资源的地址（网址）。
3．HTTP：超文本传输协议，是客户端浏览器与Web 服务器之间的通信协议。
1.1.3 W3C万维网联盟（World Wide Web Consortium，W3C），又称W3C 理事会。
W3C 致力于对web 进行标准化。
W3C 制定了包括XHTML 和CSS 等众多影响深远的标准规范。
1.2 网页设计1.2.1 网页网页是用超文本标记语言HTML 书写的一种纯文本文件。
网页需要通过浏览器对其进行解释，才生成包含文字、图像、声音、视频和动画等多媒体信息的页面。
1.2.2 网页的类型静态网页：网页内容固定不变。
文件扩展名是.htm 或.html。
动态网页：网页内容由服务器端运行的程序动态生成。
文件扩展名是.aspx、.jsp、.php等。
1.2.3 网页布局设计按页面大小划分，网页布局分为：•固定宽度布局（常见的网页宽度是780px，或1000px）•可变宽度布局（常见的网页宽度是屏幕的100%）按页面版式划分，网页布局分为：•单栏布局•两栏布局•三栏布局•多栏布局•变化布局1.3 服务器与浏览器1.3.1 Web 服务器Web 服务器也称为WWW 服务器，主要功能是提供超文本信息浏览服务。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
--html file structure
---------------------------------------------------------------------------------------------------------------------
-------------------------------------------------
字符集与编码
-------------------------------------------------
？？？
乱码问题
（1）源文件保存时的编码 （2）源文件声明<meta charset="编码方式">
（1）和（2）编码不一致，就会出现乱码
END -----------------------------------------------
标签与属性
-------------------------------------------------
• 标签属性
（1）一个标签可能有多个属性
（2）属性先后顺序无关
值1
值2
<img src="logo.jpg" alt="站标" />
属性1
属性2
考拉 喜爱的食物：桉树叶 喜欢做的事：睡觉
---------------------------------------------------------------------------------------------------------------------
标准文档结构
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <title></title>
</head> <body>
</body> </html>
文档类型：符合HTML5标准
lang属性：提供给搜索引擎 - 英文网页=en - 中文网页=zh
<img />
-------------------------------------------------
标签嵌套
-------------------------------------------------
• 结构特点
标签之间呈现嵌套结构关系
• 编写方式
采用一定的缩进明了结构
<html><body></body></html> <html><body></html></body>
标签与元素
-------------------------------------------------
• 标签特征
（1）由尖括号包围，e.g. <title> （2）通常是成对出现的
元素<title>一下，你就知道</title>
开始标签
内容
结束标签
（3）自闭合标签，self-closing，e.g.
--------------------------------------------
Thank You
HTML概述
-------------------------------------------------
• 定义
HTML（Hyper Text Makeup Language），中文“超文本标记语言”，
是制作网页的标准语言。HTML不区分大小写。
标签
-------------------------------------------------
WebStorm 工程使用
Dreamweaver 早期
Visual Studio Code 实验课
-------------------------------------------------
HTML文件结构
-------------------------------------------------
HTML文件结构
-------------------------------------------------
文件命名格式
.htm 或 .html 文件
文件内容结构
<html> <head> <title></title> </head>
头部：浏览器、搜索引擎所需信息
<body>
主体：网页中包含的具体信息
</body> </html>
-------------------------------------------------
HTML文件结构
-------------------------------------------------
HTML编辑器
记事本
Sublime Text3 emmet插件
字符
英文：Character。由文字与符号构成。
e.g. 123 abc 一二三 !,%@#
字符集
英文：Charset。字符的集合。
字符集————语言文字 e.g. 英文字符集、汉字字符集、日文汉字字符集
编码
作用：将字符和二进制码对应起来
e.g.
a
ASCII编码
01100001
-------------------------------------------------
• HTML DOM 树
DOM：Document Object Model (文档对象模型)
<html>
<head>
</head> <body>
文档 html
</body> </html>
head
body
-------------------------------------------------
网站设计与开发
2. HTML基础 -------------------------------
-----------------------------
主 讲 人： XXX 所在单位：XXX学院
XXX University
© 2020-2023 莆田学院 版权所有
---------------------------------------------------------------------------------------------------------------------
字符集与编码
-------------------------------------------------
ASCII
数字、英文字母、符号进行编码
GB2312 简体中文，国标2312（国家标准）
Unico主流
-------------------------------------------------
<html>
外层：父元素
<head> 内层：子元素
</head> <body> 内层：子元素
同级： 兄弟元素
</body> </html>
-------------------------------------------------
标签嵌套
-------------------------------------------------
HTML概述
--introduction
---------------------------------------------------------------------------------------------------------------------
-------------------------------------------------
<meta>：元数据，提供给浏览 器和搜索引擎的一些信息，e.g. 字符集编码方式、网页关键字...
charset属性：字符集编码方式 提供给浏览器：UTF-8，是国际 编码
-------------------------------------------------
字符集与编码
-------------------------------------------------