HTML网页制作基础
HTML网页制作基础 1.HTML 语言简介
2.HTML 语言的基本标签与对应的属性 3.表格与表单 4.框架
5.图像、声音、视频 6.DIV 层与css样式
一.HTML 语言简介
?Html 的全称是”超文本标示语言”(Hyper text Markup Language) 是一种标记语言,不需要编译,
直接由浏览器执行。
?Html 语言规范和标准:HTML语言是不区分大小写的，但一般来说，标记使用大写书写，如
, , 等；标记中的属性一般使用小写。
?HTML的编写环境可以使用txt文本，或使用可视化编辑工具 如Dreamweaver 、 Frontpage 等。 1.HTML 语言简介
?HTML对回车和空格都不敏感，因此可以使用回车或空格，使代码的格式和结构更清晰明了，这样才能易于查看与维护。
?HTML文档的结构：
包括HEAD、TITLE、BODY三部分，下面是基本结构：
标题部分 我的第一个html页面
HTML文档的结构：
?
元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口中显示，但是其之间可以嵌入javascript 和css样式等丰富网页的内容。
?
?
元素定义HTML文档的标题。<title>与之间的内容将显示在浏览器窗口的标题栏。
?
元素表明是HTML文档的主体部分。在与之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。
元素属性的概述 ： ?元素的属性概述 1. Bgcolor 属性标志HTML文档的背景颜色。如:Bgcolor=“＃RRGGBB” 02.html 2. background 属性设置背景图片可使用GIF，JPG 03.html 3. bgproperties=“fixed”使背景图片成固定效果，图片不随滚动条滚动。
1
04.html 4 .text 设置非链接文字的色彩。 5. link、vlink、alink分别对应普通超级链接、访问过的超级链接、当前活动超级链接颜色。 05.html 6. leftmargin和topmargin页面左边的空白距 与上边的空白距。 实例如下： 1.背景颜色：
标题部分 2. 设置背景图片：
标题部分
3. 设置背景图片(不滚动)：
标题部分
设置背景图片
bgproperties=\使背景图片成固定效果，图片不随滚动条滚动
4.插入链接：
标题部分
2
5. 字体颜色与链接：
6.左上距离：
二HTML 语言的基本标签与对应的属性
?文字 ?段落 ?特殊文字 ?超链接 ?列表
HTML 文字设置
?文字是网页设计的基础部分，设置好文字的样式，可以起到事半功倍的效果，通常可以使用两种方法。 第1种方法是直接使用HTML标记进行设置，如:使用粗体标记将文本设置为加粗样式。 第2种方法是使用css，层叠样式表。 HTML定义了6级标题，1-6级，标题文字随级数增大依次减小。 h1的效果
h2的效果
h3的效果
h4的效果
h5的效果
h6的效果
利用align 属性可以实现标题文字水平方向左、中、右的对齐方式。 align=“left / center / right” HTML 文字设置
?设置文字以粗体的方式显示。语法… ? 设置文字以斜体显示。语法… ?效果同语法…
?设置文字以上标文本效果显示。语法… ?设置文字以下标文本效果显示。语法… ?设置文字以下划线显示。语法… ?设置文字以删除线显示。语法…
HTML 文字设置
?控制的字体、大小和文字。
3
语法： … face 控制文字使用的字体 size 控制文字的大小 color 设置文字颜色
HTML段落设置
?
段落标记，一般情况下在每个段落的前面加上一个
标记可以区分段落，又可以换行。 ?
之后的文字将在下一行显视。 ?
设置水平线。
?
标记所有包含的内容，将以居中对齐的方式显示在网页中。 ?< PRE >标签可以把原文件中的空格,回车,换行,tab键表现出来 ?标记将取消浏览器由于窗口大小变化而换行。 ?
<![CDATA[在HTML文档中加入<XMP>标记，使标记内的HTML标记不起作用。 </p><p>HTML的转义字符 HTML 跑动文 </p><p>?<MARQUEE> 标记可使文字产生跑动的效果 direction 文字走动方向 bgcolor 设置文字背景颜色 height 设置跑动文字的高度 width 设置跑动文字的宽度 hspace 设置文字的水平边距 vspace 设置文字的上边距 behavior 设置文字的运动方式 scroll/alternate/slide loop 设置跑动文字的圈数 scrollamount 设置跑动文字移动速度 scrolldelay 设置跑动文字移动延时 </p><p>HTML 超链接 </p><p>?超链接是一个网站的重要元素之一，一个网站由多个页面组成，各页面之间是通过超链接来确定相互关系的，每个页面的地址都不同。 ?格式:这是一个连接 href 设置超链接目标地址URL name 在html文档中建立特定位置的名称 target 设置被链接的网页打开时的窗口_blank/_parent/_self/_top accesskey 设置超链接的快捷键 title 设置超链接的说明文字 style 运用css样式设置超链接文字样式 </p><p>HTML 超链接的锚点 </p><p>?是指同一页面中的不同位置链接。 </p><p>?一个网页的内容很长，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击</p><p>相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。 </p><p>HTML 有序列表 ?列表分成三种类型：有序列表、无序列表和自定义列表。有序列表使用编号来记录项目的顺序，</p><p> 4 </p><p>无序列表使用项目符号来记录无序的项目，自定义列表它由两个部分组成：定义条件和定义描述。 </p><p>?<OL type=\编号样式\编号起始值\ 项目一 项目二 .... </OL> type 1 阿拉伯数字 a 英文小写 A 英文大写 i 罗马小写数字 I 罗马大写数字 start 编号样式的起始数字，如：编号样式设为A，起始值设置为2，则列表的起始值为B </p><p>HTML 无序列表 ?无序列表标记 项目一 项目二 .... </p><p>type circle 空心圆 disc 圆点 square 正方形 </p><p>HTML 自定义列表 </p><p>? <DL> </p><p> 无序列表不以数字为开始，而是使用一个符号作为分项标记的列表。 </p><p> 有序列表使用数字编号，分项带有顺序性质的列表。 </p><p> 定义列表用于解释名词的列表，包含了两种层次，一是名词，一是名词的解释。 </p><p></DL> 实例如下： </p><p>1. (1)文字设置： <HTML> <HEAD> </p><p> <title>标题部分</title> </HEAD> </p><p> <BODY <h1>h1的效果</h1> <h2>h2的效果</h2> <h3>h3的效果</h3> <h4>h4的效果</h4> <h5>h5的效果</h5> <h6>h6的效果</h6> </p><p>alink=\</p><p> 5 </p><p></p>
<br />
<p><script type="text/javascript">s("content-m");</script></p>
</div>
<div class="m-pages"><li><a>共5页: </a></li><li><a href='#'>上一页</a></li><li class="thisclass"><a>1</a></li><li><a href='594984_2.html'>2</a></li><li><a href='594984_3.html'>3</a></li><li><a href='594984_4.html'>4</a></li><li><a href='594984_5.html'>5</a></li><li><a href='594984_2.html'>下一页</a></li></div>
<div class="down-word">
<div class="word-ico"></div>
<div class="word-tit">
<span class="docx">HTML网页制作基础.doc</span>
<span>将本文的Word文档下载到电脑</span>
<span>下载失败或者文档不完整，请联系客服人员解决！ </span>
</div>
<div class="word-pic"><a href="javascript:;">下载这篇word文档</a></div>
</div>
</article>
<div class="art-prenext">
<p>下一篇：<a href="/wenku/zonghe/594983.html">《经济计量学精要》笔记和课后习题详解</a></p>
</div>
<script type="text/javascript">s("like-m");</script>
<div class="main-tab"><a class="on" href="javascript:;">相关阅读</a></div>
<div class="tab-box">
<ul class="main-new on clearfix">
<li><a href="/wenku/zonghe/1263351.html" title="石油大学《化工原理二》2021期末考试答案">石油大学《化工原理二》2021期末考试答案</a></li>
<li><a href="/wenku/zonghe/1157609.html" title="建筑节能检测习题集（84页）">建筑节能检测习题集（84页）</a></li>
<li><a href="/wenku/zonghe/215568.html" title="高考物理(考点解读命题热点突破)专题06 机械">高考物理(考点解读命题热点突破)专题06 机械</a></li>
<li><a href="/wenku/zonghe/215769.html" title="1 2014.10.23第一次财务会计理论与实务课堂笔">1 2014.10.23第一次财务会计理论与实务课堂笔</a></li>
<li><a href="/wenku/zonghe/215778.html" title="通信资源管理系统介绍(GIS)">通信资源管理系统介绍(GIS)</a></li>
<li><a href="/wenku/zonghe/215564.html" title="年产60万吨PTA项目环境影响报告书">年产60万吨PTA项目环境影响报告书</a></li>
<li><a href="/wenku/zonghe/215563.html" title="2016小学生读书笔记范文">2016小学生读书笔记范文</a></li>
<li><a href="/wenku/zonghe/215562.html" title="Dhlrwk谈中学生英语学习策略">Dhlrwk谈中学生英语学习策略</a></li>
<li><a href="/wenku/zonghe/215560.html" title="数电课程设计报告 洗衣机自动控制电路">数电课程设计报告 洗衣机自动控制电路</a></li>
<li><a href="/wenku/zonghe/215558.html" title="2018年最新 湖南省长沙市长郡中学2018届上学">2018年最新 湖南省长沙市长郡中学2018届上学</a></li>
</ul>
</div>
<div class="main-tab"><a class="on" href="javascript:;">本类排行</a></div>
<div class="tab-box">
<ul class="main-new on clearfix">
<li><a href="/wenku/zonghe/175782.html" title="云客服基础考试">云客服基础考试</a></li>
<li><a href="/wenku/zonghe/158762.html" title="《红星照耀中国--》名著阅读练习题及答案">《红星照耀中国--》名著阅读练习题及答案</a></li>
<li><a href="/wenku/zonghe/176003.html" title="红星照耀中国练习题及答案">红星照耀中国练习题及答案</a></li>
<li><a href="/wenku/zonghe/171844.html" title="《红星照耀中国》练习题">《红星照耀中国》练习题</a></li>
<li><a href="/wenku/zonghe/159778.html" title="人教部编版2018-2019学年八年级语文上册第一">人教部编版2018-2019学年八年级语文上册第一</a></li>
<li><a href="/wenku/zonghe/183326.html" title="化工导论试题">化工导论试题</a></li>
<li><a href="/wenku/zonghe/182252.html" title="八年级上册名著导读练习——《红星照耀中国》">八年级上册名著导读练习——《红星照耀中国》</a></li>
<li><a href="/wenku/zonghe/162180.html" title="人教版语文八(上)名著导读《红星照耀中国》练">人教版语文八(上)名著导读《红星照耀中国》练</a></li>
<li><a href="/wenku/zonghe/185266.html" title="2018年江苏省第八届就业创业知识竞赛题库(全7">2018年江苏省第八届就业创业知识竞赛题库(全7</a></li>
<li><a href="/wenku/zonghe/168880.html" title="《红星照耀中国》导读及练习题附答案">《红星照耀中国》导读及练习题附答案</a></li>
</ul>
</div>
</div>
<footer class="footer">
<p class="bt-links"><a href="https://m.77cn.com.cn">手机版</a><span class="v-line">|</span><a href="https://www.77cn.com.cn">PC版</a><span class="v-line">|</span><a href="https://m.77cn.com.cn/fww">范文大全</a></p>
<p>Copyright © 2019-2022 免费范文网 版权所有<br/>
声明 :本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利,请在一个月内通知我们，我们会及时删除。<br/>客服QQ： 邮箱：tiandhx2@hotmail.com<br/>
<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">苏ICP备16052595号-18</a>
</p>
<div style="display:none;">
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?6e245478384fea490ec3a2317ee103ab";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</div>
</footer>
<div class="theme-popover">
<div class="theme-poptit">
<a href="javascript:;" title="关闭" class="close">×</a>
<b>注册会员免费下载</b>（下载后可以自由复制和排版）
</div>
<div class="theme-popbod dform">
<!--<p class="downtit">下载本文档需要支付 <i>7</i> 元</p>-->
<!--<p class="chose"><span>支付方式：</span><span class="pay1"><img src="https://www.77cn.com.cn/img/wxpay.jpg" class="over"></span> <span class="pay2"><img src="https://www.77cn.com.cn/img/alipay.jpg"></span></p>-->
<!--<div class="youke_pay">-->
<!--<div class="wxpay"><a href="javascript:;">微信支付并下载</a></div>-->
<!--<div class="alipay" style="display:none;"><a href="javascript:;">支付宝支付并下载</a>-->
<!--</div>-->
<!--</div>-->
<p class='wxpay'><a href='https://www.77cn.com.cn/user/index.php'>马上注册会员</a></p>
<p class="downtxt">注：下载文档有可能“只有目录或者内容不全”等情况，请下载之前注意辨别，如果您已付费且无法下载或内容有问题，请联系我们协助你处理。<br>微信： QQ：</p>
</div>
</div>
<div class="theme-popover-mask"></div>
<script>
//menu
$(".header .menu").on("click", function(){
$("body").append("<div class=\"mask-bg menu-mask-bg\"></div>");
$(".menu-slide").show();
$("html,body").css({height:$(window).innerHeight(), overflow:"hidden"});
setTimeout(function(){
$(".menu-slide").css({transform:"translateX(-50px)"});
},50)
});
$("body").on("click", ".menu-mask-bg", function(){
$(".menu-slide").css({transform:"translateX(-100%)"});
$(".menu-mask-bg").remove();
$("html,body").removeAttr("style");
setTimeout(function(){
$(".menu-slide").hide();
},300)
});
//search
$(".header .search").click(function(){
if($(".search-box").is(":hidden")){
$(this).children("i").removeClass("search-icon").addClass("close-icon");
$(".search-box").fadeIn("fast");
}else{
$(this).children("i").removeClass("close-icon").addClass("search-icon");
$(".search-box").fadeOut("fast");
}
});
//nav
if($(".nav").length > 0) {
var nav = new Swiper(".nav",{
slidesPerView: "auto"
});
}
</script>
<script>
$(".pay1 img").click(function () {
$(".wxpay").css("display", "block");
$(".alipay").css("display", "none");
$(".pay1 img").addClass("over");
$(".pay2 img").removeClass("over");
});
$(".pay2 img").click(function () {
$(".wxpay").css("display", "none");
$(".alipay").css("display", "block");
$(".pay1 img").removeClass("over");
$(".pay2 img").addClass("over");
});
</script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.word-pic a').click(function(){
$('.theme-popover-mask').fadeIn(100);
$('.theme-popover').slideDown(200);
$(".vip-up").hide();
$(".vip-pay").hide();
var downid = '594984'
$('.wxpay a').click(function(){
var payurl = 'https://www.77cn.com.cn/hupipay/payment_pay_tz.php?payway=wx&aid=';
payurl = payurl.replace('payment', 'youke');
var gotourl = payurl + downid
location.href = gotourl;
});
$('.alipay a').click(function(){
var payurl = 'https://www.77cn.com.cn/hupipay/payment_pay_tz.php?payway=ali&aid=';
payurl = payurl.replace('payment', 'youke');
var gotourl = payurl + downid
location.href = gotourl;
});
})
$('.theme-poptit .close').click(function(){
$('.theme-popover-mask').fadeOut(100);
$('.theme-popover').slideUp(200);
})
})
</script>
<script src="/js/gobacktop.js" type="text/javascript"></script>
</body>
</html>]]>