网页设计与制作(代码介绍)
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页设计与制作
一、HTML 基本语言：
1.HTML 基本语法：（如图）
....:表示HTML 文档的开始和结束
…:表示HTML 文档的头部。最常用的标记是
…,
标记中的容对应浏览窗口标题的信息。</p><p><body>…</dody>：<body>标记之的容对应的是浏览器中的容。</p><p>2.<body>标记的使用：（如图）</p><p>Bgcolor="颜色":设置页面背景色。</p><p>Background="图像文件的名字及路径"：设置背景文件。 Text="颜色"：设置页面文字默认颜色。</p><p>标记属性用来对标记之间的容修饰，标记其属性必须放到“．．．．．．．．．．．．．．．．．．．．．．．．．．< >．．”．中，各属性间必须用空．．．．．．．．．．格隔开。．．．．</p><p>色彩的表示方法有两各种：1.RGB 模式，用16进制的红(Red)、绿(Green)、蓝(Blue)的</p><p>值来表示，格式为“#RRGGBB”，字符包括数字0～9和字母A～F，如红色为“#FF0000”</p><p>2.用英文单词表示彩色，如红色“red”。</p><p>二、常用的HTML标记及其属性制作网页①：</p><p>1.页面属性、排版标志</p><p>⑴.标题标记：</p><p>格式：<h#>...<h#>, 其中“#”的取值国为1（字体最大）～6（字体最小）。</p><p>作用：设置文档的各级标题。</p><p>常见属性：align,用于定义标题的对齐方式，默认为左对齐，</p><p>标题标记属性：（如表）</p><p>⑵.版面格式标记</p><p>①.分段与换行：（如表）</p><p>①.以下标记都出现在<body>中出现,标记必须以成对出现，如<body>...</dody>.</p><p>②.文本对齐标记</p><p>可以在<p>标记中使用align属性指定文本对齐方式。另外，居中对齐可以通过居中对齐方式进行设置。</p><p>格式：<center>…<center></p><p>作用：使标记间的容以居中对齐方式显示。</p><p>③.水平线标记</p><p>格式：<hr></p><p>作用：在文档中插入水平线。</p><p>常用水平线标记属性：（如表）</p><p>④.字体标记</p><p>格式：<font>…</font></p><p>作用：设置标记间文体的字体、大小、颜色等。</p><p>常用字体标记属性：（如表）</p><p>⑤.字体修饰标记</p><p>作用：设置标记间文本的样式，如粗体、斜体、下划线等。</p><p>字体修饰标记（如表）</p><p>⑥.特殊字符</p><p>作用：在页面上显示特殊符号。</p><p>特殊字符（如表）</p><p>⑶项目符号标记</p><p>作用：在HTML页面中，合理地使用列表标记，可以起提纲和格式排序文作用。列表分为无序列表和有序列表两类</p><p>无序列表的主要标记为<ul>和<li>.作用：生成没有编号的列表，每一个列表前使用<li>标</p><p>签区分。（格式如右）</p><p><ul>标记的主要属性为type（如表）</p><p>注意：项目符号标记在网页中的应用比较广泛，它能清楚地标注文本的层次结构，使用户浏览网页时能对该网页的架构一目了然。其中，项目符号标记使用<ul>…</ul>时，必须是成对出现的，并且其中，项目插入多对<li>…<li>列表项标记组成完整的列表。</p><p>例：</p><p>结果图为：</p><p>2.超标记</p><p>格式：<a>...</a></p><p>作用：把当前位置的文本或图像连接到其他的页面、文本或图像。</p><p>常用超标记属性（如表）</p><p>属性名称属性含义示例</p><p>target 属性</p><p>绝对路径与相对路径：在网页文档中引用一个文件时，需要给出该文件的路径，这个可以是网络资源，也可以是本地计算机上的文件资源。HTML 有两种路径：绝对路径与相对路径。 1.绝对路径：从协议开始的URL 地址或从驱动名称开始的本地文件路径都称为绝对路径。如.sina..或d:\1\1.html</p><p>2.相对路径：从文件存储位置开始的路径叫相对路径。 在描述相对路径时，需要注意：．．．．．．．．．．．．．．</p><p>⑴．.．如果源文件和引用的文件在同一级目录里，直接写引用文件名即可。．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．</p><p>⑵．.．“．...．．．/．”表示源文件所在目录的上一级，“．．．．．．．．．．．．．．．．...．．．/．...．．．/．”．表示源文件所在目录的上上级目录，以．．．．．．．．．．．．．．．．．此类推。．．．．</p><p>⑶．.．引用下级的文件，直接写下级目录文件的路径即可。例如，站点文件夹中有主页文件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．index.html ．．．．．．．．．．和图像文件夹．．．．．．images,index.html ．．．．．．．．．．．．．．．．．文件中使用了．．．．．．i ．mages ．．．．．文件夹中的．．．．．01.jpg ．．．．．．图．像文件，那么图像．．．．．．．．01.jpg ．．．．．．相对于．．．index.html ．．．．．．．．．．的相对路径就是．．．．．．．imges ．．．．．\．01.jpg ．．．．．． 3.图像标记 格式：<img></p><p>作用：在页面中插入图像或视频文件，图像格式可以是：GIF 、JPG 、PNG 。</p><p>常用图像标记属性（如表）</p><p>当取值为left、right时，可以实现图像</p><p>文字左右绕排的效果</p><p>4.表格标记</p><p>①表格的几种标记</p><p>作用表格是最基本的网页布局的技术</p><p>表格的主要标记（如表）</p><p>标记描述</p><p><table>...</table> 表示整个表格的开始、结束</p><p><caption>...</caption> 用来设置整个表格的名称，表格中可不用此标记<tr>...</tr> 代表表格中一行</p><p><td>...<td> 代表单个普通的单元格，此标记必须放在一对<tr>标记</p><p><th>...</th> 用于定义表头单元格，单元格中的文字将以粗体显示，此</p><p>标签必须放在一对<tr>标记，在表格中也可以不用此标记格式（如图）</p><p><table>标记的主要属性（如表）</p><p>属性名称属性含义</p><p>border 表格边框的宽度（以像素为单位）；若不设置此属性，则边框的宽度默认为0，</p><p>即不显示边框</p>
</div>
</div>
</div>
</div>
</div>
<div id="rightcol" class="viewcol">
<div class="coltitle">相关文档</div>
<ul class="lista">
<li><a href="/doc/055816675.html" target="_blank">网页设计与制作教案</a></li>
<li><a href="/doc/0215026389.html" target="_blank">网页设计与制作讲解</a></li>
<li><a href="/doc/115484925.html" target="_blank">《网页设计与制作》课程概述</a></li>
<li><a href="/doc/2c7083313.html" target="_blank">网页设计与制作第一章概述</a></li>
<li><a href="/doc/301156124.html" target="_blank">网页设计与制作</a></li>
<li><a href="/doc/3e13468568.html" target="_blank">《网页设计与制作》课程教案设计</a></li>
<li><a href="/doc/3d15011861.html" target="_blank">个人网页设计与制作</a></li>
<li><a href="/doc/4b3305979.html" target="_blank">第1章 网页设计与制作概述2要点</a></li>
<li><a href="/doc/6d18521246.html" target="_blank">网页设计与制作(选修课)</a></li>
<li><a href="/doc/6818873710.html" target="_blank">第1章 网页设计与制作概述</a></li>
</ul>
<div class="coltitle">最新文档</div>
<ul class="lista">
<li><a href="/doc/071000073.html" target="_blank">饭店包间名字大全</a></li>
<li><a href="/doc/0d10001030.html" target="_blank">word无法创建工作文件,请检查临时环境变量</a></li>
<li><a href="/doc/0d10001458.html" target="_blank">自行车健身比赛开幕式讲话词</a></li>
<li><a href="/doc/0510001469.html" target="_blank">2018乡村医生个人工作总结</a></li>
<li><a href="/doc/0e10002558.html" target="_blank">MySQL测试题 SQL</a></li>
<li><a href="/doc/0310002568.html" target="_blank">合勤NXC5200</a></li>
<li><a href="/doc/0210004833.html" target="_blank">铁路集中箱空箱调度优化建模案例(案例2)</a></li>
<li><a href="/doc/021000530.html" target="_blank">微分几何教学大纲-复旦大学数学科学学院</a></li>
<li><a href="/doc/031000596.html" target="_blank">人教版九年级数学上册导学案：24.1.1_圆【精品】</a></li>
<li><a href="/doc/0c10006773.html" target="_blank">(整容后办护照用)医院整容证明</a></li>
<li><a href="/doc/0e10006860.html" target="_blank">危险废物管理台账</a></li>
<li><a href="/doc/0310008420.html" target="_blank">2017年终大会会场物料设计方案</a></li>
</ul>
</div>
</div>
<script>
var did = "36911713";
var ext = 'doc';
var docId = '169x84wpu8xnkwweylt2q0yve1m4yxbg';
var totalPage = 14;
const pageNum = '14';
</script>
<div class="clearfloat"></div>
<div id="footer">
<div class="ft_info">
<a href="https://beian.miit.gov.cn">闽ICP备16038512号-3</a> <a href="/tousu.html" target="_blank">侵权投诉</a> ©2013-2023 360文档中心,www.360docs.net | <a target="_blank" href="/sitemap.html">站点地图</a><br>
本站资源均为网友上传分享，本站仅负责收集和整理，有任何问题请在对应网页下方投诉通道反馈
</div>
<script>foot()</script>
</div>
</body>
</html> 