网页设计与制作(代码介绍)和实验报告1-DIV+CSS网页设计_第1页
网页设计与制作(代码介绍)和实验报告1-DIV+CSS网页设计_第2页
网页设计与制作(代码介绍)和实验报告1-DIV+CSS网页设计_第3页
网页设计与制作(代码介绍)和实验报告1-DIV+CSS网页设计_第4页
网页设计与制作(代码介绍)和实验报告1-DIV+CSS网页设计_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页设计与制作一、HTML基本语言：1.HTML基本语法：（如图）<html>....</html>:表示HTML文档的开始和结束<head>…</head>:表示HTML文档的头部。最常用的标记是<title>…</title>,<title>标记中的内容对应浏览窗口标题的信息。<body>…</dody>：<body>标记之内的内容对应的是浏览器中的内容。2.<body>标记的使用：（如图）Bgcolor="颜色":设置页面背景色。Background="图像文件的名字及路径"：设置背景文件。Text="颜色"：设置页面文字默认颜色。标记属性用来对标记之间的内容修饰，标记其属性必须放到“<>”中，各属性间必须用空格隔开。色彩的表示方法有两各种：1.RGB

模式，用16进制的红(Red)、绿(Green)、蓝(Blue)的值来表示，格式为“#RRGGBB”，字符包括数字0～9和字母A～F，如红色为“#FF0000”2.用英文单词表示彩色，如红色“red”。二、常用的HTML标记及其属性制作网页①.以下标记都出现在<body>中出现,标记必须以成对出现，如<body>...</dody>.①.以下标记都出现在<body>中出现,标记必须以成对出现，如<body>...</dody>.1.页面属性、排版标志⑴.标题标记：格式：<h#>...<h#>,其中“#”的取值范国为1（字体最大）～6（字体最小）。作用：设置文档的各级标题。常见属性：align,用于定义标题的对齐方式，默认为左对齐，标题标记属性：（如表）值表示的对方试示例left左对齐<h1align="left">文字内容<h1>right右对齐<h1align="right">文字内容<h1>center居中对齐<h1align="center">文字内容<h1>⑵.版面格式标记①.分段与换行：（如表）标记名称格式作用段落标记<p>...</p>或者<p>使标记后面的内容另起一段。常用属性：align,用于定义段落的对齐方式，与标题标记类似换行标记...<br>使标记后面的文字内容换行显示②.文本对齐标记可以在<p>标记中使用align属性指定文本对齐方式。另外，居中对齐可以通过居中对齐方式进行设置。格式：<center>…<center>作用：使标记间的内容以居中对齐方式显示。③.水平线标记格式：<hr>作用：在文档中插入水平线。属性名称属性含义示例align定义水平线的对齐方式，默认为“center”右对齐水平线:<hralign="right">color定义水平线的颜色绿色水平线：<hrcolor="green">noshade定义水平线为无阴影无阴影水平线：<hrnoshadecolor="green">size定义水平线的宽度，单位默认为像素宽度为4像素的水平线:<hrsize="4">width定义水平线的长度，单位为像素或百分比（相于页面宽度）占页面宽度80%的水平线：<hrwidth="80%">常用水平线标记属性：（如表）④.字体标记格式：<font>…</font>作用：设置标记间文体的字体、大小、颜色等。常用字体标记属性：（如表）属性名称属性含义示例face设置标记间文本的字体<fontface="隶书">文字内容</font>size设置标记间文本的大小，取值范围为1～7<fontsize="2">文字内容</font>color设置标记间文本的颜色<fontcolor="red">文字内容</font>title设置鼠标指向文本时，出现的提示信息<fonttitle="信息">文字内容</font>⑤.字体修饰标记作用：设置标记间文本的样式，如粗体、斜体、下划线等。字体修饰标记（如表）功能格式粗体<b>...</b>或者<strong>...</strong>斜体<i>...</i>下划线<u>...</u>上标<sup>...</sup>下标<sub>...<sub>删除线<s>...</s>或者<strike>...</strike>大字体<big>...</big>小字体<small>...</small>⑥.特殊字符作用：在页面上显示特殊符号。字符名称显示结果 空格<<（小于号）>>(大于号)""(双引号)©©®®××（乘号）特殊字符（如表）⑶项目符号标记作用：在HTML页面中，合理地使用列表标记，可以起提纲和格式排序文作用。列表分为无序列表和有序列表两类无序列表的主要标记为<ul>和<li>.作用：生成没有编号的列表，每一个列表前使用<li>标签区分。（格式如右）<ul>标记的主要属性为type（如表）值代表disc实心加点（默认）circle空心圆square实心小方块。注意：项目符号标记在网页中的应用比较广泛，它能清楚地标注文本的层次结构，使用户浏览网页时能对该网页的架构一目了然。其中，项目符号标记使用<ul>…</ul>时，必须是成对出现的，并且其中，项目插入多对<li>…<li>列表项标记组成完整的列表。例：结果图为：2.超链接标记格式：<a>...</a>作用：把当前位置的文本或图像连接到其他的页面、文本或图像。常用超链接标记属性（如表）属性名称属性含义示例href指定链接的目标地址，可以是站内的文件，也可以某个网站<ahref="a.html">...</a><ahref="">...<a>target指定链接的目标窗口，其值是一个窗口的名称，也可以是_blank、_parent、_self、_top,默认为_self<ahref="a.html"target="_blank”...</a>title鼠标指向链接时，所显示的信息<ahref="a.html"title="信息"...</a>target属性target取值作用_blank在新窗口中打开_parent在上一级窗口中打开_self在当前窗口中打开，此项为默认值_top在浏览器的整个窗口中打开，忽略任何框架绝对路径与相对路径：在网页文档中引用一个文件时，需要给出该文件的路径，这个可以是网络资源，也可以是本地计算机上的文件资源。HTML有两种路径：绝对路径与相对路径。1.绝对路径：从协议开始的URL地址或从驱动名称开始的本地文件路径都称为绝对路径。如或d:\1\1.html2.相对路径：从文件存储位置开始的路径叫相对路径。在描述相对路径时，需要注意：⑴.如果源文件和引用的文件在同一级目录里，直接写引用文件名即可。⑵.“.../”表示源文件所在目录的上一级，“.../.../”表示源文件所在目录的上上级目录，以此类推。⑶.引用下级的文件，直接写下级目录文件的路径即可。例如，站点文件夹中有主页文件index.html和图像文件夹images,index.html文件中使用了images文件夹中的01.jpg图像文件，那么图像01.jpg相对于index.html的相对路径就是imges\01.jpg3.图像标记格式：<img>作用：在页面中插入图像或视频文件，图像格式可以是：GIF、JPG、PNG。常用图像标记属性（如表）属性名称属性含义示例src指定插入图像名称或路径<imgsrc="a.gif">或者<imgsrc="images\a.gif">alt替换文本，当浏览器不能显示图像时、在鼠标指向图像时、或图像加载时间过长时，所要显示的文本使标记后面的文字进行换行显示width指定图像宽度，单位是像素<imgsrc="images\a.gif"width="100"height="200">height指定图像高度，单位是像素border指定图像边框，默认为0hspace指定图像左右两侧与其他对象（如文本）之间的距离，单位为对象<imgsrc="images\a.gif"hspace="30"vspace="20"vspace指定图像上下两端与其他对象（如文本）之间的距离，单位为像素align指定图像与文本的对齐方式，取值有：top、middle、bottom、left、right。当取值为left、right时，可以实现图像文字左右绕排的效果<imgsrc="images\a.jpg"align="left">4.表格标记①表格的几种标记作用表格是最基本的网页布局的技术表格的主要标记（如表）标记描述<table>...</table>表示整个表格的开始、结束<caption>...</caption>用来设置整个表格的名称，表格中可不用此标记<tr>...</tr>代表表格中一行<td>...<td>代表单个普通的单元格，此标记必须放在一对<tr>标记内<th>...</th>用于定义表头单元格，单元格中的文字将以粗体显示，此标签必须放在一对<tr>标记内，在表格中也可以不用此标记格式（如图）<table>标记的主要属性（如表）属性名称属性含义border表格边框的宽度（以像素为单位）；若不设置此属性，则边框的宽度默认为0，即不显示边框bordercolor表格边框颜色background设置表格的背景图像bgcolor设置表格的背景颜色width表格宽度；其值可用像素表示，也可用占窗口的百分比表示height表格高度；其值可用像素表示，也可用占窗口的百分比表示align表格在页面的水平位置；取值为：left、right、center;默认为在对齐cellspacing单元格之间的间距；其值可用像素来表示cellpadding单元格内容与单元格边界之间的距离;其值可用像素来表示<tr>标记属性属性名称属性含义align行内容的水平对齐方式；取值为：left、right、center；默认为左对齐valign行内容的垂垂直对齐方式；取值为：top、middle、bottom；默认为局中对齐height行高；其值可用像素或表格高度百分比表示title鼠标指向该行时，显示的指示信息bgcolor行的背景颜色bordercolor行的边框颜色nowrap本行所有单元格内容不能自动换行<td>和<th>标记主要属性属性名称属性含义align单元格内容的水平对齐方式；取值为：left、right、center；默认为左对齐（若与<tr>标签的属性冲突时，以单元格自身的设置为主valign单元格内容的垂直对齐方式；取值为：top、middle、bottom;默认为垂直居中（若与<tr>标签的属性冲突时，以单元格自身的设置为主）（续表）属性名称属性含义width单元格的宽度，可用像素值或表格宽度的百分比来表示height单元格的高度，可用像素值或表格高度的百分比来表示bgcolor单元格的背景颜色bordercolor单元格的边框颜色nowrap单元格内容不能自动换行rowspan单元格所占的行数colspan单元格据占的列数②合并单元格若需要建立不规则表格，就要用到<td>标记的rowspan属性和colspan属性来合并单元格。如实现下图①到下图②的转化。进行单元格合并时，需要遵循如下几条原则：⑴.整个表格中，每行的列数要相同。⑵.若某个单元格中，设置了属性colspan="2"，表示该单元格在横向占据了两个单元格的位置，所以，在当前行<tr>中，就需要少写一个<tr>标签（如B3单元格）.依此类推，若设置了属性colspan="3",当前行<tr>中，就需要少写两个<td>标签（如C2单元格）。⑶.若某个单元格中，设置了属性rowspan="2",表示该单元格在纵向占据了两个单元格的位置，所以，在下一个<tr>中，该列处就需要少写一个<td>标签（如A2单元格）。若设置了属性rowspan="3"在下两行<tr>中，该列处都需要少一个<td>s标签，依此类推。合并后的表格代码为：5.框架标记框架的主要标记有：<frameset>和<frame>,分别表示整个框架和单个框架。⑴框架集标记<frameset>的几种常用属性有cols、rows、frameborder.cols:创建纵向分割框架时，通过该属性指定各框架的列宽，取值可以是“像素”和“%”，分割左右窗口，用“*”表示剩余部分。rows:创建横向分割框架时，通过该属性指定各框架的行高，取值可以是“像素”和“%”，分割左右窗口，用“*”表示剩余部分。Frameborder:指定框架周围是否显示边框，取值为“0”或“no”表示不显示边框，取值为“1”或“yes⑵.框架标记<frame>的几种常用属性有src、name、frameborder、scrolling.src:设置此框架中要显示的网页的文件名（路径），每个框架对应一个网页。name:设置该框架的名称，当有超链接指定要打开的页面在此框架中显示时，需要使用到target="框架"，此时如果省略了框架名就无法链接了。frameborder:指定框架周围是否显示边框，“0”是不显示，“1Scrolling:设置是否显示滚动条，“yes”表示显示，“no”表示不显示，“auto”表示自动调整（默认值）。在包含框架HTML文档中，要使用框架标记<frameset>取代<body>s标记，然后通过框架标记<frame>定义单个框架。除了以上所学到的标记之外，HTML中还包含可以让文本移动的标记<marquee>...</marquee>；用于在网页中插入音乐、视频和动画的标记<embed>；背景音乐标记<bgsound>等，如果要实现页面之间的过渡效果，可以通过<meta>标记的属性来实现。HTML语言拥有许多功能丰富标记，由于时间与能力有限，就不在介绍了。学生实验报告学期：学年第二学期班级：计算机科学与技术学号：姓名：课程编号：课程名称：网页设计与制作填写说明1、填写实验报告须字迹工整,使用黑色钢笔或签字笔填写。2、课程编号和课程名称必须和教务系统中保持一致，实验项目名称填写须完整规范，不能省略或使用简称。3、每个实验项目应填写一份实验报告。如同一个实验项目分多次进行，可在实验报告中写明。4、如果实验报告页面不够，可分成两个实验报告填写。实验目录及成绩登记序号实验日期实验项目名称实验成绩备注1234567891011121314151617实验报告最终成绩：指导教师签名：说明：实验项目顺序和名称由学生填写，必须前后保持一致；实验成绩以百分制计，由实验指导教师填写并签名，一般不能涂改，确有涂改的，应在备注栏说明原因；实验报告部分最终成绩为所有实验项目成绩的平均值。

人人文库> 全部分类> 专业文献 > 工程机械

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论