下载文档原格式
网页的基本构成-网页设计组成元素-基本结构介绍不同性质、不同类别的网站，其页面内容的安排是不同的。
一般网页的基本内容包括标题、网站LOGO、页眉、页脚、导航、主要内容等。
如果想具体了解网页的基本构成，那无妨接着往下看吧!1、网页标题网页标题是对一个网页的高度概括。
网站中的每一个页面都有一个标题，用来表示该页面的主要内容。
它的主要作用是引导访问者清楚地浏览网站的内容。
2、网站的LOGO在IT领域，LOGO意味着标志、标识。
它的主要用途是与其他网站链接，让其他网站链接到该标志和门户，代表一个网站或网站的某个部分。
LOGO的图形形式，特别是动态的LOGO，比文字形式的链接更引人注意。
为了促进互联网上的信息传播，一个统一的国际标准是必要的。
目前，关于网站的LOGO有三种规格：(1) 88×31像素，这是互联网上最常见的LOGO规格。
(2) 120×60像素，这种规格用于一般大小的LOGO。
(3) 120×90像素，这种规格用于大型LOGO。
3、网页页眉网页页眉是指页面顶部的部分，有些页面划分得比较显然，有些页面则没有明确的区分。
通常状况下，页头的〔制定〕风格与页面整体风格一致，富有变化的页眉与网站的标志LOGO具有相同的作用。
页眉的位置比较吸引人，大多数网站制在这里设置网站的目的、口号、广告语等。
4、网页页脚网页页脚位于页面底部，通常用来标注站点所属公司的名称、地址、网站版权、电子邮件地址等信息，使用户能够了解网站所有者的基本状况。
5、网页导航网页导航是指通过一定的技术手段，为访问者提供一定的网页浏览方式，使他们能够方便地获取所必须内容。
网页导航在每个网页中的位置是不同的。
网页导航的表现形式是网页上的栏目菜单设置、辅助菜单和其他在线帮助。
6、网页的主体内容主体内容是〔网页制定〕的元素。
它一般是二级链接内容的标题，或是内容。
html5 web前端期末考试复习题一、单选题（每小题2分）1. 用HTML标记语言编写一个简单的网页，网页最基本的结构是A、<HTML> <title>…</title><body>…</body> </HTML>B、<HTML> <title>…</title><frame>…</frame> </HTML>C、<HTML> <head>…</head><body>…</body> </HTML>(正确答案)D、<HTML> <head>…</head><frame>…</frame> </HTML>2. 在HTML语言中，设置表格中文字与边框距离的标签是A、<TABLE border=#>B、<TABLE cellpadding=#>(正确答案)C、<TABLE width=#>D、<TABLE cellspacing=#>3. 下面关于HTML描述不正确的是？A、HTML称为超文本标记语言B、HtML代码由各种标签组成C、HTML文档的扩展名以.html结尾D、HTML是一种编译型的编程语言(正确答案)4. 以下标记符中，没有对应的结束标记的是A、<HTML>B、<body>C、<title>D、<br>(正确答案)5. A文件夹与b.html文件是同级，其中A下有a.html，现在我们希望在a.html文件中创建超链接，链接到b.html，应该在a.html页面代码中如何描述超链接href属性？（）A、../../b.htmlB、./b.htmlC、../b.html(正确答案)D、b.html6. 在HTML中，（）标签用于在网页中创建表单。
一、实验目的1. 熟悉网页编辑的基本工具和功能。
2. 掌握HTML和CSS的基本语法。
3. 能够运用网页编辑软件进行简单的网页设计。
二、实验环境1. 操作系统：Windows 102. 网页编辑软件：Dreamweaver CC3. 浏览器：Google Chrome三、实验内容1. 网页基本结构2. HTML标签的使用3. CSS样式表的使用4. 网页布局设计四、实验步骤1. 网页基本结构（1）新建一个HTML文件，命名为“index.html”。
（2）在Dreamweaver中打开该文件，输入以下代码：```html<!DOCTYPE html><html><head><title>网页标题</title></head><body><!-- 网页内容 --></body></html>```（3）保存文件。
2. HTML标签的使用（1）在`<body>`标签内添加一个标题标签`<h1>`，并设置文本内容为“欢迎访问我的网站”。
（2）在标题下方添加一个段落标签`<p>`，并设置文本内容为“这里是我的个人网站，欢迎您的访问和交流。
”。
（3）保存文件。
3. CSS样式表的使用（1）在`<head>`标签内添加一个`<style>`标签，用于编写CSS样式。
（2）设置标题标签`<h1>`的字体大小为40px，颜色为红色。
（3）设置段落标签`<p>`的字体大小为18px，颜色为蓝色。
（4）保存文件。
4. 网页布局设计（1）在`<body>`标签内添加一个`<div>`标签，并设置其样式，如宽度、高度、边框等。
（2）在`<div>`标签内添加一个`<img>`标签，设置图片路径为本地图片“example.jpg”。
网页的基本结构
网页是互联网应用的一种形态，它是将一组超文本标记语言（Hypertext Markup Language，简称HTML）写成的文档，在Web浏览器上呈现友好的用户界面。
它是以标准（XHTML或HTML 5）语言制作而成，使用HTML标记来表示界面上出现的元素，用Cascading Style Sheet（CSS）来描述网页外观和布局，还融合脚本语言形成的客户端和服务器端脚本来实现网页的动态功能等。
网页的结构大致可以分为四部分：Doctype声明、html元素、head元素和body 元素。
Doctype声明告诉浏览器HTML这种文档的版本信息；Html元素是网页的
根元素，将网页的内容包含在它的起止标签中，界定了HTML文档的拓展范围；Head元素包含网页中的一些重要信息，如文档title、meta信息、脚本等，它们约
定了网页的语言，定义了网页外观与布局；Body元素则是网页真正的内容展现部分，就是我们看到的网页正文部分，它放置着网页页面中展示的内容信息，如文本、图片、表单、链接等。
要想创建一个网页，首先要了解网页的基本结构，其次要了解HTML标记语
言和CSS样式语言的相关知识，同时还要掌握脚本语言才能真正将网页充分利用
起来。
每一部分内容都是紧密相连的，遵循标准实现内容到形式的简洁转换，这样才能使网页具有良好的可读性和可访问性。
三佳专注--网页设计培训、平面设计培训、网站建设网页基本代码结构认识1、web结构：<!DOCTYPE html >：这是一个标准网页的声明<html xmlns="/1999/xhtml">：xmlns属性是用来定义xml namespace（命名空间）的。
该属性可以放置在文档内任何元素的开始标签中。
该属性的值类似于 URL，它定义了一个命名空间，浏览器会将此命名空间用于该属性所在元素内的所有内容。
如果需要使用符合 XML 规范的 XHTML 文档，则应该在文档中的<html> 标签中至少使用一个 xmlns 属性<head></head>：是文档的头部<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />：meta是html中的元标签，其中包含了对应html的相关信息，客户端浏览器或服务器端的程序会根据这些信息进行处理。
content（内容类型）：重要！！这个网页的格式是文本的，网页模式charset（编码）：特别重要！！！这个网页的编码是utf-8，中文编码，需要注意的是这个是网页内容的编码，而不是文件本身的，其他类型的编码中文可能会出现乱码。
三佳专注--网页设计培训、平面设计培训、网站建设<title></title>:是网页的名称，每张网页都有可以有个固定的名字，但也可以没有<title>标签在html语言中，就是标题的意思在<title>与</title>之间的文字就是该网页的名字。
<body></body>:是HTML语言的标签. 意思是主体。
网页的主体布局就在body里面进行。
2、标签的认识：（块级元素、行内元素、其他元素）大多数标签是成对出现的①、块级元素标签有：块元素一般都从新行开始，它可以容纳内联元素和其他块元素.如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。
网站的基本概念和组织结构1、主页Home Page主页Home Page它是一个网页，是进入一个网站的开始画面，就同“瘟酒吧”的蓝天白云一样。
也就是说，主页是一个网站的门面，要想设计出一个优秀的网站，就必须有一个“要让浏览者想不看都难”的主页，它必须引人入胜，能吸引每一个来访者的注意力，引发人们的好奇心，能让人产生一种深入探索你的网站的冲动。
优秀的主页是一个好的网站必须具备的第一要素。
2、网页Web Page网页就是、、、、很难懂的概念，极其抽象，看得见摸不着，你为什么到互联网去，你在WWW上看到的就是网页。
它是由HTML编写的文件，上面有贴图，有音乐、、、3、超级链接Hyperlink超级链接是WWW的神经系统，它也是向导，把你从一个网页带到另一个网页，或者从网页的某一部分引导到另一部分。
超级链接是用特殊的文本或图象来实现链接的，单击它就可以实现它的功能。
4、超文本HyperText超文本是一种新的文件形式，指一个文件的内容可以无限地与相关资料链接。
超文本是自然语言文本与计算机交互、转移和动态显示等能力结合，超文本系统允许用户任意构造链接，通过Hyperlink来实现。
5、超文本语言Hyper Text Markup Language超文本语言HTML是制作编写网页、包含超级链接的超文件的标准语言，它由文本和标记组成。
超文本文件的扩展名一般为 .html或.htm1、线性结构这是网站最简单的一种结构，它是以某种顺序组织的，可以是时间顺序，也可以是逻辑甚至是字母顺序。
通过这些顺序呈线性地链接。
如一般的索引就采用线性结构。
线性结构是组织网页的基本结构，复杂的结构也可以看成是由线性结构组成的。
2、网状结构这是最复杂的组织结构，它完全没有限制，网页组织自由链接。
这种结构允许访问者从一个信息栏目跳到另一个栏目去，其目的就是充分利用网络资源和充分享受超级链接。
整个互联网就是一个超级大的“网”状结构。
3、等级结构等级结构由一条等级主线构成索引，每一个等级点又由一条线性结构构成。
用html标记语言编写一个网页的最基本结构HTML（HyperText Markup Language）是一种用于创建网页的标记语言，它由一系列的标签构成，可以让网页呈现出文字、图片等内容。
HTML 标记语言编写一个网页的最基本结构包括：1. DOCTYPE声明在 HTML5 中，DOCTYPE 的声明方式很简单，只需要写上：<!DOCTYPE html>就可以了，这条声明可以放在网页的最前面，它的作用是告诉浏览器当前的文档是采用的什么样的 HTML 标准。
2. html根元素 html根元素是一个名为 <html> 的标签，它用来定义一个网页文档，所有的其他标签都应该在html 标签内部，它可以写成：<html>……</html>，其中，“……”代表网页文档的内容。
3. head元素 head 元素是一个名为 <head> 的标签，它用来定义网页文档的头部信息，如网页标题、编码方式等，它可以写成：<head>……</head>，其中，“……”代表网页文档的头部信息。
4. body元素 body 元素是一个名为 <body> 的标签，它用来定义网页文档的主体内容，如文字、图片等，它可以写成：<body>……</body>，其中，“……”代表网页文档的主体内容。
总而言之，利用 HTML 标记语言编写一个网页的最基本结构就是：<!DOCTYPE html> <html> <head> ……</head> <body> …… </body> </html>以上就是用 HTML 标记语言编写一个网页的最基本结构。
实际上，上面的结构只是一个空的网页，它并不能显示任何内容，要想让网页显示出内容，还需要添加更多的标签。
10.3 页布局的基本类型 页的布局不可能像平⾯设计那么简单，除了上⽂提到过的可操作性外，技术问题也是制约页布局的⼀个重要因素。
虽然页制作已经摆脱了HTML时代，但是还没有完全做到挥洒⾃如，这就决定了页的布局是有⼀定规则的，这种规则使得页布局只能在左右对称结构布局、“同”字型结构布局、“回”字型结构布局、“匡”字型结构布局、“⼚”字型结构布局、⾃由式结构布局、“另类”结构布局等⼏种布局的基本结构中选择。
10.3.1 左右对称结构布局 左右对称结构是页布局中最为简单的⼀种。
“左右对称”所指的只是在视觉上的相对对称，⽽⾮⼏何意义上的对称，这种结构将页分割为左右两部分。
⼀般使⽤这种结构的站均把导航区设置在左半部，⽽右半部⽤作主体内容的区域。
左右对称性结构便于浏览者直观地读取主体内容，但是却不利于发布⼤量的信息，所以这种结构对于内容较多的⼤型站来说并不合适。
10.3.2 “同”字型结构布局 “同”字结构名副其实，采⽤这种结构的页，往往将导航区置于页⾯顶端，⼀些如⼴告条、友情链接、搜索引擎、注册按钮、登陆⾯板、栏⽬条等内容置于页⾯两侧，中间为主体内容，这种结构⽐左右对称结构要复杂⼀点，不但有条理，⽽且直观，有视觉上的平衡感，但是这种结构也⽐较僵化。
在使⽤这种结构时，⾼超的⽤⾊技巧会规避“同”字结构的缺陷。
10.3.3 “回”字型结构布局 “回”字型结构实际上是对“同”字型结构的⼀种变形，即在“同”字型结构的下⾯增加了⼀个横向通栏，这种变形将“同”字型结构不是很重视的页脚利⽤起来，这样增⼤了主体内容，合理地使⽤了页⾯有限的⾯积，但是这样往往使页⾯充斥着各种内容，拥挤不堪。
10.3.4 “匡”字型结构布局 和“回”字型结构⼀样，“匡”字型结构其实也是“同”字型结构的⼀种变形，也可以认为是将“回”字型结构的右侧栏⽬条去掉得出的新结构，这种结构是“同”字型结构和“回”字型结构的⼀种折中，这种结构承载的信息量与“同”字型相同，⽽且改善了“回”字型的封闭型结构。
网页说明书作为互联网时代的标志，网页在我们日常生活中扮演着重要的角色。
无论是商业网站、社交媒体平台还是个人博客，网页的设计和功能都对用户体验和信息传递起着重要的作用。
本文将详细介绍网页的基本构成和设计原则，帮助读者更好地理解和创建各类网页。
一、网页的基本构成一个网页可以概括为以下几个基本组成部分：1. 头部：网页的头部通常包含网站的标志和导航菜单。
标志用于展示网站的品牌和识别度，导航菜单则方便用户在网站中导航和查找信息。
2. 导航栏：导航栏位于网页的顶部或侧边，常用于快速浏览网站的不同页面或功能模块。
合理的导航栏设计可以提升用户的使用体验。
3. 内容区域：内容区域是网页的核心部分，用于呈现各类信息、文章、图片和视频等内容。
内容应该具有结构清晰、易于阅读的特点，并且需要适配不同的屏幕尺寸和设备。
4. 侧边栏：侧边栏通常位于网页的一侧，用于展示额外的信息、广告或者相关链接。
侧边栏可以提供更多的导航选项和推广内容，但过多的内容可能会分散用户的注意力。
5. 尾部：尾部包含了网页的版权信息、联系方式和隐私政策等重要内容。
在合规要求下，用户可以在脚注中放置相关声明和其他法律条款。
二、网页的设计原则网页设计需要遵循以下原则，以提供更好的用户体验和信息传递效果：1. 简洁明了：网页应该尽量简洁明了，避免使用过多的文字和冗余的功能。
简洁的设计可以更容易吸引用户的注意力，并使信息更易于被理解和消化。
2. 色彩搭配：色彩搭配在网页设计中起着重要的作用。
合理的色彩搭配可以增强网页的视觉吸引力，并帮助用户更好地理解页面的信息结构。
3. 响应式设计：由于不同设备的屏幕尺寸和分辨率不同，网页应该采用响应式设计，以适配不同的设备。
响应式设计可以提供更好的用户体验，无论是在大屏电脑上还是在小屏手机上访问网页都能获得良好的效果。
4. 导航清晰：网页的导航应该清晰明了，便于用户快速定位和访问所需内容。
导航菜单的设计需要考虑易用性和可扩展性，以提供更好的用户导航体验。
网页的基本结构<html> <head><title><title></head><body></body></html>文本标签标题标签<h1></h1>……..<h6></h6>段落标签<p align=’center,left,right’><font color,face,size>字体标签</font></p> 换行标签<br/>水平线标签<hr size=’20px’color=’red’width=’100%’/> (<)< (>)>图片标签<img src=”图片路径” alt=’图片提示信息’ height,width,align=’文本与图片的对齐方式’/>滚动标签<marquee direction=’up’></marquee>超链接<a href=’连接到页面的地址’ target=’blank’(在新的选项卡打开)></a>锚点连接：进行页面定位<a href=’#名称’></a>定义锚点<a name=’’></a>排列网页内容无序列表<ul type=’项目符号’><li></li></ul>有序列表<ol type=’a’><li></li></ol>定义列表：用于产品的解释用于图文混合的布局<dl><dt>标题</dt><dd></dd></dl>表格标签<table border=’1’width=’500px’,height=’300’,bgcolor=’red’background=”背景颜色”cellspacing=”单元格间距”cellpadding=’单元格与内容的间距（填充）’><tr align=’center,left,rigth’><td colspan=’3’>跨列</td><td rowspan=’1’>跨行</td></tr></table>DIV标签（层标签）<div></div><span>行内标签</span>作为文本容器传递网页数据表单的使用<form name method action><inupt type=”text” name/></form>Get与post的区别：post不会显示用户的密码并且提交数据的长度没有限制常见的表单元素：文本框<input type=”text”name=”username” />密码框<input type=”password”>单选按钮<input type=”radio” value=”男” name=”sex”>复选框<input type=”checkbox” value=”篮球” checked=”checked”/>文件域<input type=”file” name/>下拉列表<select name=””size（显示的行数）=”3”> <option value=”湖北省”selected=”selected”>湖北省</option> </select>多行文本域：自我介绍<textarea name cols=’列’rows=”行”></textarea>提交按钮<input type=”submit” value=按钮显示的值” name/>重置按钮<input type=”reset”value=”重置” name/>框架组合网页框架结构介绍框架集使用：没有body部分<frameset cols/rows(页面按行割)=”25%,50%,*”bordercolor=”red”border=”5”><frame src/></frameset>行列混合的页面<frameset rows=”25,*”><frame src=”top.html”/><frameset cols=”25%,*”><frame/></frameset></frameset>内嵌框架<iframesrc=””name=””frameborder=”1”scrolling=”auto”width=”700px”height=”300px”></iframe>CSS样式表的使用<ul> <li class=”red”>fdjkjifd</li> <li id=”news”>fdjkjifd</li> <li>fdjkjifd</li> <li>fdjkjifd</li> </ul><style type="text/css">Li(标签选择器){ color:#DF0E11;font-size:9px;font-family:黑体;}.red(类选择器){Color:red;}#news（id选择器）{Background-color:red;}</style>选择器的优先级ID选择器》类选择器》标签选择器文本和字体属性<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style typ="text/css">p{color:red;font-size:20px;font-family:微软雅黑;letter-spacing:10px; /*字符间距*/text-align:right;/*文本的对齐方式*/text-decoration:underline;/*文本修饰*/line-height:30px;/*文本行高*/font:bold 20px 微软雅黑;}</style></head><body><p>css是一种页面修饰梅花技术</p></body></html>CSS盒子模型<style type="text/css">#box1{border-width:5px;border-color:red;border-style:dashed;/*边框的风格*/border:5px solid red;padding-top:20px;/*填充*/width:300px;只有块级元素才能修饰height:600px;background-repeat:no-repeat;/*背景的平铺方式*/background-color:red;background-image:url();}body{margin:0px;}#box2{margin-top:30px;/*盒子之间的间距*/border:5px solid red;</style>}</head><body><div id="box1"><img src="images/2015.03.14.jpg" height="500" width="300"></div><div id="box2">盒子2</div></body>网页布局设计标准文档流行内元素从左到右解析文档块级元素从上到下解析元素Display属性可以改变元素的性质盒子的定位title>盒子的定位</title><style type="text/css">#wrapper{border:3px solid black;}#box1,#box2,#box3{border:3px solid black;margin:5px;height:40px;width:300px;}#box1{background-color:red;color:yellow;position:absolute;/*绝对定位脱离标准文档流*/top:30px;left:100px;}#box2{background-color:green;color:white;position:relative;/*相对原来的位置进行偏移*/left:50px;top:-20px;}#box3{background-color:yellow;color:black;position:fixed;/*固定定位*/top:30px;left:100px;}</style></head><body><div id="wrapper"><div id="box1">第一个层</div><div id="box2">第二个层</div><div id="box3">第三个层</div></div></body>盒子的浮动Float:left;Clear:both; overflow：hidden解决浮动塌陷常用流行布局的实现自适应width：80% 当改变窗口的大小时，页面内容始终是窗口的80%JavaScript基础知识定义函数<script type="text/javascript">function getArea (width,height){v ar re=width*height;r eturn re;/*document.write("面积："+re);*/}var area=getArea(3,4);document.write(area);</script>系统函数<script type="text/javascript">var r=parseInt("123")+parseFloat("456");document.write(r);</script>var x="ABC";var y=123;document.write(isNaN(y));输入x返回true表示x不是数字Var r=””1+2+3+4;r=eval(r);document.write(r);eval返回运算数的计算结果匿名函数(function (width,height){document.write("面积："+width*height);}) (3,4)函数也是一种数据类型function类型匿名函数作为函数的参数来传递Var area=function(width,height){Document.write(“面积：”+width*height);};Area(3,4);常用事件、<script type="text/javascript">function fun(obj){o bj.style.fontSize="30px";}</script><p onClick="fun(this)">事件绑定</p>This表示事件源p；window.onload=function(){alert("欢迎来到美淘网");}<body onUnload="alert('触发onload事件')"><marquee direction="right" onMouseOver="stop()" onMouseOut="start()"> <img src="images/psb (1).jpg" width="300" height="300" alt="1"/></marquee>浏览器默认处理程序<script type="text/javascript">function Check(){e vent.returnValue=false;}</script><body><form action="index.html" onSubmit="return false;"><input type="submit" value="确定"/></form>function Check(){var username=document.getElementById("name").value;if(username==""){a lert("请输入用户名");r eturn false;}r eturn true;}</script><body><form action="index.html" onSubmit="return Check();"><input type="text" id="name"/><input type="submit" value="确定"/></form></body>window对象window.alert();var name=window.prompt("请输入姓名："); window.alert("欢迎"+name);确认对话框var flag=window.confirm("确认删除吗？");if(flag)window.alert("执行删除操作");elsewindow.alert("取消删除操作");var newWin;window.onload=function(){newWin=window.open("index.html","index","");}</script><body><a href="javascript:newWin.close()">关闭窗口</a>闹钟函数/*setTimeout("alert('Hello')",2000);*/setInterval("alert('Hello')",6000);。
