HTML网页设计基础
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
图 执行结果
3.2 HTML常用标记
3.2.1 段落类标记 1．标题标记 格式： <Hn align = 对齐方式> 标题文字 </Hn> 2．分段标记 格式： <P align = 对齐方式> 文字 </P>
3．换行标记 格式： 文字 <BR> 4．横线标记 格式： <HR size = 粗细 align = 对齐方式 width = 宽 度 color = 颜色> 5．文本块标记 格式： <Blockquote>文字</Blockquote>
3.4.2 HTML网页简单实例
<li> <a href="http://yule.360.cn/content/349842" class="text">娱乐：长江上 空架“天梯”</a> </li> <li> <a href="http://yule.360.cn/content/349815" class="text">奇葩：日本少 女成人礼现场</a> </li> <li> <a href="http://yule.360.cn/content/349799" class="text">真相：最火爆 的六大舞娘盛产地</a> </li> <li> <a href="http://yule.360.cn/content/349766" class="text">好奇：门口有 这物的房子别靠近</a> </li> <li> <a href="http://yule.360.cn/content/349601" class="text">
3.2.2 文字格式标记 1．字体标记 格式： <FONT size = 大小 face = 字体名称 color = 颜色>文字</FONT> 2．特殊字符标记 字符“<”用字符串“<”表示； 字符“>”用字符串“>”表示； 字符“&”用字符串“&”表示； 字符“"”用字符串“"”表示； 空格字符用字符串“ ”表示。
3．<TEXTAREA>标记 格式： < TEXTAREA name = 表单域名称 rows = 行数 cols = 列数> </TEXTAREA>
3.3.3 表单制作举例
图 表单范例执行结果
3.4 HTML常用标记
3.4.1 div盒子模型 格式： <div></div> 从外到内依次包括： margin：外边距、 border：边框、 padding：内补白、 content：内容。
3.4.2 HTML网页简单实例
<ul class="list"> <li>
<a href="http://go.ቤተ መጻሕፍቲ ባይዱ60.cn/top10">特价</a>| <a href="http://go.360.cn/zt/zuche.html">周末出游怎么
3．嵌入JavaScript标记 格式： <JavaScript>JavaScript脚本</JavaScript>
3.3 HTML表单标记
3.3.1 表单定义格式 格式： <FORM action = 被激活程序 method = 信息 传送方式> …… <INPUT type = 表单域类型 name = 表单 域名称 ……> …… </FORM>
<li>
<a href="http://gouwu.360.cn/">购物</a>|
3.4.2 HTML网页简单实例
<a href=" http://gouwu.360.cn/list?q=%E5%8D%AB%E8%A1%A3">新款潮流卫衣热卖一折 起</a> </li> <li> <a href="http://yule.360.cn/">明星</a>| <a href="http://yule.360.cn/content/248433">女星美不美 要看穿露背装</a> </li> </ul> </div> <div class="right"> <ul class="list"> <li> <a href="http://go.360.cn/top10">特价</a>| <a href="http://go.360.cn/zt/zuche.html">周末出游怎么 租车才省钱</a> </li>
第3章 HTML网页设计 基础
3.1 认识和使用HTML 3.2 HTML常用标记 3.3 HTML表单标记
3.1 认识和使用HTML
3.1.1 什么是HTML HTML使用各种不同的标记符号来分 别标识和设定不同的网页元素。每一个网 页元素通常由开始标记（start tag）、结束 标记（end tag），以及夹在这两个标记中 的内容所组成。一个HTML元素的形式可 表示为： <标记名称 属性名称=值 ……> 内容 </标记名称>
3.4.2 HTML网页简单实例
</style> </head> <body> <div class="content"> <div class="Header">Header</div> <div class="left"> <ul class="cat"> <li> <a href="http://yule.360.cn/zt/xiangwangdeshenghuo2.html#floor5" class="text">娱乐：唐嫣意外怀孕？</a> </li> <li> <a href="http://yule.360.cn/" class="text">娱乐：阿娇婚宴酒店曝光 </a> </li>
3.1.2 HTML文档基本架构 <html> <head> <title> 网页标题 </title> </head> <body> <p>这是正文部分！</p> </body> </html>
3.1.3 创建一个简单的HTML文档
图
创建一个简单HTML文档
3.4.2 HTML网页简单实例
<html> <head> <title> 网页标题 </title> <style> *{margin:0px;padding:0px;} .content{margin:0px auto;width:80%;} .Header{width:100%;height:100px;background-color: green;text-align:center;fontsize:45px;font:bold;} .left{float:left;width:26%;height:300px;background-color: orange;} .left .cat{padding-left:22px;padding-top:10px;} .right{float:left;width:37%;height:300px;background-color:pink;} .con{float:left;width:37%;height:300px;background-color:yellow;} .list{padding-left:22px;padding-top:10px;} .Footer{width:100%;}
3.4.2 HTML网页简单实例
<li> <a href="http://edu.360.cn/">教育</a>| <a href="http://edu.360.cn/zt/2018hjznq.html">沪江周年
庆边学习边赚钱</a> </li> <li>
<a href="http://junshi.hao.360.cn/#cid=militery">军情
</a>|
<a href="http://junshi.hao.360.cn/#cid=militery">国际实时 军事资讯</a> </li> <li> <a href="http://go.360.cn/flight">机票</a>| <a href="http://go.360.cn/flight">低价打折机票尽享狂欢 </a> </li>
3.2.5 超链接标记 格式： <A href = URL>用作超链接的文字或图像 </A>
3.2.7 样式标记 格式： <STYLE> HTML标记{属性名称：属性值；属性名称： 属性值……} HTML标记{属性名称：属性值；属性名称： 属性值……} …… < /STYLE>
3.2.3 列表标记 1．无序列表标记 格式： <UL type = 项目符号类型> <LI type = 项目符号类型>列表项1 <LI type = 项目符号类型>列表项2 …… <LI type = 项目符号类型>列表项n </UL>
2．有序列表标记 格式： <OL type = 序号类型 start = 开始序号> <LI type = 序号类型>列表项1 <LI type = 序号类型>列表项2 …… <LI type = 序号类型>列表项n </OL>
3.3.2 常用表单域标记 1．<INPUT>标记 格式： <INPUT type = 表单域类型 name = 表单域名 称 value = 字符串 size = 大小> 2．<SELECT>标记 格式： <SELECT name = 表单域名称 size = 大小> <OPTION>文字</OPTION> <OPTION>文字</OPTION> …… </SELECT>
3.4.2 HTML网页简单实例
好奇：冰冻500年的神秘少女</a> </li> <li> <a href="http://yule.360.cn/content/349494" class="text">奇葩：揭秘诡 异“阴婚”全过程</a> </li> <li> <a href="http://yule.360.cn/zt/xiangwangdeshenghuo2.html#floor4" class="text">综艺：贾静雯让女儿咘咘闻脚</a> </li> <li> <a href="http://yule.360.cn/content/349471" class="text">好奇：人妖小 姐落幕后悲惨生活</a> </li> </ul> </div> <div class="con">
租车才省钱</a> </li> <li> <a href="http://zonghe.hao.360.cn/#cid=youlike">看点 </a>| <a href="http://zonghe.hao.360.cn/#cid=youlike">最新鲜 热点你关注了么</a> </li> <li> <a href="http://edu.360.cn/caikuai/" >财会</a>| <a href="http://edu.360.cn/caikuai/" >注会六科重点章节 汇总</a> </li>
3.2.8 其他标记 1．格式保留标记 格式： <PRE>文本内容</PRE> 2．图像标记 格式： <IMG scr = 图片文件的URL align = 对齐方式 alt = 说明性替代文字 height = 图像高度 width = 图像宽度 hspace = 水平空白 vspace = 垂直空白>
3.4.2 HTML样式 如何使用样式
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下 三种方式来插入样式表： 外部样式表 <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 内部样式表 <head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head> 内联样式 <p style="color: red; margin-left: 20px"> This is a paragraph </p>