HTML标记语言
HTML基础
1.HTML编辑器
VS Code 和 Sublime Text 可以配合 Emmet 插件提高编码效率
1. VS Code
2.Sublime Text
3.HBuilder-X
2.基本概念
- 名称：超文本标记语言(HyperText Markup Language)
- 后缀：html或htm（没有区别）
- 作用：创建网页的标准标记语言
- 网页：功能上将其分为头部和主体两部分
- 1.页面的声明：指页面开头由
<!DOCTYPE>声明的内容- 2.页面的头部：指
<head></head>所包含部分，用于设计网页标题，字符集，关键字等内容- 3.页面的主体：指
<body></body>所包含部分，用于展示页面内容
1.前置知识
1.HTML元素
- 语法：HTML元素一般以开始标签起始，以结束标签终止
- 内容：元素内容是开始标签和结束标签之间的内容
- 空元素：没有内容的 HTML 元素被称为空元素，空元素是在开始标签中关闭的（例：
<br/>）- 大小写：HTML 标签对大小写不敏感，
<P>等同于<p>，推荐使用小写
2.HTML属性
- 语法：HTML 元素可以设置属性，属性一般描述于开始标签，属性一般以名称/值对的形式出现
- 引号：属性值应该始终被包括在引号内，双引号最常用，也可使用单引号
- 注意：如果属性值本身就含有双引号，那么必须使用单引号
<p name='John "ShotGun" Nelson'></p>- 大小写：属性和属性值对大小写不敏感，推荐小写属性
2.页面声明
<!DOCTYPE>
- 声明有助于浏览器中正确显示网页
- 针对不同的文件，正确声明HTML的版本，浏览器才能正确显示网页内容。
- DOCTYPE声明不区分大小写的
// 推荐HTML5 <!DOCTYPE html>
3.页面头部
<head>
<head>元素是所有头部元素的容器<head>元素必须包含文档的标题（title），可以包含脚本、样式、meta 信息以及其他信息<head>元素支持HTML全局属性
标记 描述 title 定义浏览器标题栏中的标题；显示在收藏夹中的标题 base 定义页面中所有(src)默认的链接地址 meta 定义网页的字符集，关键字，描述信息等内容 style 设置CSS层叠样式表的内容 link 设置对外部CSS文件的连接 script 设置页面脚本或链接外部脚本文件 noscript 定义脚本未被执行时的替代内容
1.标题标记
<title>
- 基本语法:
<title>...</title>例： <!DOCTYPE html> <html> <head> <title>测试标题</title> </head> <body> </body> </html>- 语法结果：
- 语法说明：
<title></title>标记对之间的内容就是页面的标题- 该标签是必须的，且只能有一个
- 该标签支持HTML全局属性
2.默认链接
<base>
- 基本语法:
<base/>
属性 描述 属性值 href 规定页面中所有相对链接的基准URL URL target 规定页面中所有超链接和表单在何处打开，该属性会被每个链接中的target属性覆盖 _blank || _parent || _self || _top || framename 例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>默认链接</title> <base href="../images/" target="_blank"/> </head> <body>   <img src="01.jpg" width="400"><br/> <ul> <li>注意这里设置图片的相对地址</li> <li>能正常显示是因为我们在<b>head</b>部分设置了<b>base</b>标签</li> <li>该标签指定了页面上所有链接的默认<b>URL</b></li> <li>所以该图片的访问地址为 "../images/01.jpg"</li> </ul>   <a href="../images/01.jpg">默认链接测试</a><br/> <ul> <li>注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性</li> <li>因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"</li> </ul> </body> </html>- 语法结果：
- 语法说明：
- 该标签支持HTML全局属性
<base>标签为页面上的所有的相对链接规定默认 URL 或默认目标- 文档中最多使用一个
<base>元素且必须位于<head>元素内部。- 将 标签排为 中第一个元素，使head 区域中其他元素可以使用 中的信息
- 使用
<base>标签，必须具备 href 属性或 target 属性或两个属性都具备- 扩展：href和src的区别
- 1.href(Hypertext Reference)超文本引用，用来建立当前元素和文档之间的链接(常用于link,a)
- 2.src(source)资源引入，用来将指向的内容嵌入到文档中当前标签所在位置(常用于img，script，iframe)
- 3.当浏览器解析到href时不会停止对当前文档的处理(异步)；当浏览器解析到src时会暂停浏览器的渲染直到该资源加载完毕
3.元信息标记
<meta>
基本语法：
<meta/>
属性 描述 属性值 charset 定义文档的字符编码 utf-8 || gbk等 http-equiv 以键/值对的形式设置一个HTTP标题信息；键：指定设置项目，由http-equiv属性设置；值：由content属性设置 name 以键/值对的形式设置页面描述信息；键：指定设置项目，由name属性设置；值：由content属性设置 content 设置http-equiv或name属性设置项目对应的值 语法说明：
- http-equiv: 类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确地显示网页内容
< meta>是页面头部区域中的一个辅助性标签，用于提供HTTP标题信息和页面描述信息的设置
每一个< meta>实现一种功能，可以在html文件的头部区域中包含任意数量的< meta>标记，以实现多种功能
键 说明 content-type 字符集 default-style refresh 刷新
- name： 用于描述网页，以便搜索引擎机器人查找，分类
键 说明 keywords 关键字(提高网页在搜索引擎被搜索到的概率) description 描述(描述页面的主要内容，可作为搜索结果返回给浏览者) author generator application-name
1.设定网页关键字
- 基本语法：
<meta name="keywords" content="关键字1，关键字2，..." />例1： <html> <head> <title>设定网页关键字</title> <meta name="keywords" content="关键字,Brackets,html,css,javascript" /> </head> <body> </body> </html>- 语法说明：
- keywords表示关键字设置项目，content中设置具体的关键字，不同的关键字使用逗号分隔
2.设定网页描述信息
- 基本语法：
<meta name="description" content="网页描述信息" />例2： <html> <head> <title>设定网页描述信息</title> <meta name="description" content="本节内容学习HTML，CSS，Javascript，通过Brackets软件展示" /> </head> <body> </body> </html>- 语法说明：
- 当页面发布到Internet上后，在搜索引擎中搜索输入关键字搜索相应的页面，返回中结果中最上面显示的是页面的title，下面显示的是网页的描述信息，可以根据页面的title和描述信息确定要找的页面
3.设定网页字符集
- 基本语法：
<meta http-equiv="content-type" content="text/html; charset=某种字符集" />结果例3： <html> <head> <title>设定网页字符集</title> <meta http-equiv="content-type" content="text/html;charset=gb18030" /> </head> <body> 中文乱码示例 </body> </html> 或 <html> <head> <title>设定网页字符集</title> <meta http-equiv="content-type" content="text/html;charset=gb2132" /> </head> <body> 中文乱码示例 </body> </html> 或 <html> <head> <title>设定网页字符集</title> <meta http-equiv="content-type" content="text/html;charset=uft-8" /> </head> <body> 中文乱码示例 </body> </html>
- 语法说明：
- 设定页面使用的字符集（即编码），用以说明页面制作所使用的文字语言，浏览器会根据此来调用相应的字符集来显示页面内容
- 中文操作系统下IE浏览器的默认字符集是gb2132，也可以使用uft-8编码，目前最新的国标汉字码是gb18030(IE浏览器不支持)
- 如果页面中没有显示指明字符集，将使用浏览器默认的字符集显示
- 当页面的编码和显示页面内容的编码不一致时，页面中的中文将显示乱码
4.设定网页自动刷新
- 基本语法：
<meta name="refresh" content="刷新时间间隔" />结果例4： <html> <head> <title>设定网页自动刷新</title> <meta http-equiv="content-type" content="text/html; charset=gb2132" /> <meta http-equiv="refresh" content="3" /> </head> <body> 页面每三秒刷新一次 </body> </html>
- 语法说明：
- refresh表示刷新功能，content用于设定刷新间隔的时间，单位是秒
5.设定网页自动跳转
- 基本语法：
<meta name="refresh" content="刷新时间间隔; url=页面地址" />结果例5： <html> <head> <title>设定网页自动跳转</title> <meta http-equiv="content-type" content="text/html; charset=uft-8" /> <meta http-equiv="refresh" content="3; url=http://www.sina.com.cn" /> </head> <body> <p>本页面3秒后自动跳转到新浪网</p> </body> </html>
- 语法说明：
- refresh表示刷新功能，content用于设定刷新间隔的时间，单位是秒，url指定跳转的地址
4.页面主体
3.页面的主体标记< body>
- 基本语法：
<body 属性1 属性2 ...>...</body>
属性 描述 text 设置网页正文颜色 bgcolor 设置网页背景颜色 background 设置网页背景图片 bgproperties 设置网页背景图片的特性 link 设置未访问状态下的链接文字颜色 vlink 设置访问过后状态下的链接文字颜色 alink 设置正在访问状态下的链接文字颜色 leftmargin 设置页面内容与浏览器左边框的间距 rightmargin 设置页面内容与浏览器右边框的间距 topmargin 设置页面内容与浏览器上边框的间距 bottommargin 设置页面内容与浏览器下边框的间距
1.设置网页正文颜色与背景颜色
- 基本语法：
<body bgcolor="颜色值" text="颜色值">...</body>结果例1： <html> <head> <title>设置网页正文颜色与背景颜色</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body bgcolor="#336699" text="white"> <h2>设定网页的背景颜色为深蓝色，文字颜色为白色</h2> </body> </html>
- 语法说明：
- 网页正文的颜色默认是黑色，背景颜色默认为是白色
- 设置网页正文颜色可使用< body>标记的text属性，网页背景颜色可以使用< body>标记的bgcolor属性
- HTML页面中，颜色值可以是：
- 1.颜色的英文名称
- 2.#RRGGBB表示的十六进制的RGB颜色值；RGB颜色值中的R，G，B分别表示颜色中的红，绿，蓝三原色，每种颜色用两位十六进制表示（例：#ffffff表示白色）
2.添加网页背景图片
- 基本语法：
<body background="背景图片的URL" bgproperties="fixed">...</body>结果例1： <html> <head> <title>添加网页背景图片</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <body background="F:\Brackets\HTML\html1\images\Demo1.jpg" bgproperties="fixed"> <h2>添加网页背景图片</h2> <hr /> <p>测试页面1</p> <p>测试页面2</p> </body> </html>
- 语法说明：
- 网页正文的颜色默认是黑色，背景颜色默认为是白色
- 设置网页正文颜色可使用< body>标记的text属性，网页背景颜色可以使用< body>标记的bgcolor属性
- HTML页面中，颜色值可以是：
- 1.颜色的英文名称
- 2.#RRGGBB表示的十六进制的RGB颜色值；RGB颜色值中的R，G，B分别表示颜色中的红，绿，蓝三原色，每种颜色用两位十六进制表示（例：#ffffff表示白色）
- 通常使用深色的背景图片配合浅色的文本或使用浅色的背景图片配合深色的文本
- 默认情况下，背景图片会随页面的滚动而滚动，设置< body>标记的bgproperties=“fixed”,可以使背景图片固定不动
- background用于指定背景图片的路径和文件名
3.设置网页链接文字颜色
- 基本语法：
<body link="颜色值" vlink="颜色值" alink="颜色值">...</body>结果例3： <!DOCTYPE html> <html> <head> <title>设置网页链接文字颜色</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body link="#0011FF" alink="#00FF00" vlink="#FF0000" align="center"> <h2>设定不同的网页链接颜色</h2> <hr /> <p><a href="https://www.qq.com">QQ网页链接</a></p> <a href="https://y.qq.com/download/download.html">QQ音乐网页链接</a> <p><a href="http://tv.cctv.com/lm/xwzk">CCTV网页链接</a></p> </body> </html>
- 语法说明：
- link：设置未访问状态下的链接文字颜色（例：第一个）
- alink: 设置正在访问状态下的链接文字颜色（例：第三个）
- vlink: 设置访问过后状态下的链接文字颜色（例：第二个）
4.设置网页边距
- 基本语法：
<body leftmargin="边距值" rightmargin="边距值" topmargin="边距值" bottommargin="边距值">...</body>结果例4： <!DOCTYPE html> <html> <head> <title>设置网页边距</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body leftmargin="50" rightmargin="100" topmargin="100" bottommargin="100"> <p>页面上边距为100个像素，下边距为100个像素</p> <p>页面左边距为50个像素，右边距为400个像素</p> </body> </html>
- 语法说明：
- leftmargin：设置页面内容与浏览器左边框的间距
- rightmargin：设置页面内容与浏览器右边框的间距
- topmargin：设置页面内容与浏览器上边框的间距
- bottommargin：设置页面内容与浏览器底边框的间距
- 边距值以像素为单位，默认边距大致是8个像素
- 如果是从上往下左对齐的文本一般取决于左边框和上边框的间距
4.文字标记
标记 描述 文字内容 包括普通文字，空格及特殊符号等 标题字标记 以某几种固定的字号显示文字，共分为6个级别（h1~h6），对应着6种字号 文字的修饰标记 通过这些修饰标记，可设定文字的不同格式 字体标记 设定文字的字体，字号，颜色等
1.设置文字内容的输入
- 普通文字
- 特殊文字
- 注释语句
- 空格
1.普通文字的输入
- 普通文字包括英文和汉字等字符，这些字符可直接通过键盘输入或从其他地方拷贝到< body>< /body>标记对之间的指定位置
<!DOCTYPE html> <html> <head> <title>普通文字的输入</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> 普通文字 普通文字 普通文字 普通文字 </body> </html>2.特殊文字的输入
- 基本语法：
&实体名称;
特殊符号 字符实体 “ " ; & & ; < < > > • · X × § § ¢ ¢ ¥ ¥ £ £ © © ® ® ™ &trade <!DOCTYPE html> <html> <head> <title>普通文字的输入</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> "<br/> &<br/> <<br/> ><br/> ·<br/> ×<br/> §<br/> ¢<br/> ¥<br/> £<br/> ©<br/> ®<br/> ™<br/> </body> </html>- 语法说明：
- 一些字符无法通过通过键盘输入，这些字符对于网页来说都属于特殊字符
- 注意以&开始且字符实体后面需要带上英文分号
- 无需记住这些字符，一些软件提供相应的字符（例：Brackets中输入&可以选择相应的字符）
3.注释语句
- 基本语法：
<!-- 注释内容 --><!DOCTYPE html> <html> <head> <title>注释语句</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <!--普通文字直接在光标处输入即可--> 对于页面的普通文字直接在主体标记对之间输入即可 <!-- 第一条语句注释 第二条语句注释--> </body> </html>- 语法说明：
- 浏览器解析页面时会忽略注释，因此注释语句不会显示在浏览器中，但查看源代码时可以看到
- 注释语句可以是多条语句
4.空格
- 基本语法：
结果<!DOCTYPE html> <html> <head> <title>空格</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> 此句 有4个空格<br/> 此句 也有4个空格，却只显示一个空格 </body> </html>
- 语法说明：
- 通常情况下，制作网页时通过空格键输入的多个空格键在浏览器只保留一个空格，其余空格都被自动截掉
- 一个  ;表示一个半角空格，需要多个空格时需要连续输入多个
- nbsp表示空格对应的实体名称，& 和 ; 表示引用字符实体的前缀和后缀
2.设置文字的字体，字号和颜色值
- 基本语法：
<font face="字体名称" size="字号" color="颜色值">文字内容</font>
属性 描述 face 设置字体;中文文字的字体默认为宋体 size 设置字号：取值范围从1到7[或从+1到+7，从-1到-7（正负号取值相对于页面默认字号）超出取值范围的与取值范围最近的值的效果相同];默认字号为3号字 color 设置文字颜色；默认颜色为黑色 <!DOCTYPE html> <html> <head> <title>设置文字的字体，字号，颜色</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <font face="楷体,黑体,宋体,隶书">默认3号字黑色，字体族</font> <hr/> <font size="0">不存在0号字</font><br/> <font size="1">默认黑色宋体，1号字</font><br/> <font size="2">默认黑色宋体，2号字</font><br/> <font size="3">默认黑色宋体，3号字</font><br/> <font size="4">默认黑色宋体，4号字</font><br/> <font size="5">默认黑色宋体，5号字</font><br/> <font size="6">默认黑色宋体，6号字</font><br/> <font size="7">默认黑色宋体，7号字</font><br/> <font size="8">不存在8号字</font> <hr/> <font size="-1">默认黑色宋体，-1号字</font><br/> <font size="-2">默认黑色宋体，-2号字</font><br/> <font size="-3">默认黑色宋体，-3号字</font><br/> <font size="+1">默认黑色宋体，+1号字</font><br/> <font size="+2">默认黑色宋体，+2号字</font><br/> <font size="+3">默认黑色宋体，+3号字</font><br/> <font size="+4">默认黑色宋体，+4号字</font><br/> <font size="+5">默认黑色宋体，+5号字</font><br/> <hr/> <font face="隶书">默认3号字黑色，隶书</font><br/> <font face="宋体">默认3号字黑色，宋体</font><br/> <font face="黑体">默认3号字黑色，黑体</font><br/> <font face="楷体">默认3号字黑色，楷体</font> <hr/> <font color="#2200ff">默认3号字宋体，深蓝色</font><br/> <font color="#ff0022">默认3号字宋体，深红色</font> </body> </html>- 语法说明：
- 默认情况下，中文网页中的文字是黑色，宋体，3号字的效果
- face属性可以同时设置多个字体（字体族），不同字体之间使用英文逗号分隔
- 使用字体族时，浏览器解析页面时会首先使用第一个字体去显示文字，如果计算机中没有第一个字体，则使用第二个字体显示，以此类推，如果所以字体都不存在，则显示为默认字体
- color可使用十六进制RGB形式或颜色的英文名
- +1表示比默认字号大一号，实际字号为4；-1表示比默认字体小一号，所以实际字号为2号；其余同理；
3.设置文字的格式
- 基本语法：
<font face="字体名称" size="字号" color="颜色值">文字内容</font>
标记 描述 < b>< /b>,< strong>< /strong> 设置粗体格式 < i>< /i>,< cite>< /cite>,< em>< /em>,< var>< /var> 设置斜体格式 < sup>< /sup> 设置上标 < sub>< /sub> 设置下标 < big>< /big> 设置为大字号 < small>< /small> 设置下划线 < u>< /u> 设置下划线 < s>< /s>,< strike>< /strike> 设置删除线 - 语法说明：
- 注意斜体格式中的< em>< /em>标记下会空出一行
4.设置标题字及其对齐方式
基本语法：
<hn align="对齐方式">标题字</hn>
标记 描述 < h1>< /h1> 一级标题设置 < h2>< /h2> 二级标题设置 < h3>< /h3> 三级标题设置 < h4>< /h4> 四级标题设置 < h5>< /h5> 五级标题设置 < h6>< /h6> 六级标题设置
对齐方式 描述 left 局左对齐 center 居中对齐 right 居右对齐 <!DOCTYPE html> <html> <head> <title>设置标题字及其对齐方式</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <h0>不存在零级标题</h0> 默认三号字体 <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <h7>不存在七级标题</h7> 默认三号字体 <hr/> <h1 align="left">一级标题</h1> <h2 align="center">二级标题</h2> <h3 align="right">三级标题</h3> </body> </html>
语法说明：
- 标题字加粗显示并与下文产生一空行的间隔特性
- 根据字号的大小分为6级，分别用标记字h1~h6表示，字体的大小随数字的增大而递减
- 默认标题字居左对齐，如果要改变标题字的对齐方式，可以使用标题字的属性进行设置，对齐方式可以分别取left,center,right3种值
5.段落标记
标记 描述 < p>< /p>，< p> 段落标记 < br/> 换行标记 < hr/> 水平线标记 < pre>< /pre> 预格式化标记 < center>< /center> 居中标记 < blockquot>< /blockquot> 缩排标记
1.段落标记
- 基本语法：
<p align="对齐方式">段落内容</p> 或 <p align="对齐方式">段落内容<!DOCTYPE html> <html> <head> <title>设置段落标记</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> 普通内容 <p>双标记段落的内容</p> 普通内容 <p>标记段落的内容 普通内容 <hr> <p align="left">居左对齐</p> <p align="center">居中对齐</p> <p align="right">居右对齐</p> <p align="left">居左对齐 <p align="center">居中对齐 <p align="right">居右对齐 </body> </html>- 语法说明：
在HTML中既可以使用单标记也可以使用双标记；但在XHTML中只能使用双标记
单标记和双标记的相同点是：
- 都能创建一个段落
单标记和双标记的不同点是：
- 单标记创建的段落会跟上文产生一行的间隔
- 而双标记创建的段落则与上下文同时有一空行的间隔
段落标记也具有对齐属性，对齐方式分别可以取left，center，right，默认左对齐
2.换行标记
- 基本语法：
<br/><!DOCTYPE html> <html> <head> <title>设置换行标记</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> 普通内容 普通内容 <br/> 普通内容 <br/> 普通内容 </body> </html>- 语法说明：
- 段落之间是隔行换行的，文字的行间距较大，可以使用< br/>换行使文字比较紧凑
- 没有换行标记的换行只显示一个空格间距
3.水平线标记
- 基本语法：
<hr 属性/>
属性值 描述 width 设置水平线宽度，单位为像素或浏览器窗口的百分比 size 设置水平线高度，单位为像素 align 设置水平线相当于浏览器窗口的水平对齐方式，可以取left，center，right，默认居中对齐 noshade 设置水平线为实心的不带阴影 color 设置水平线颜色，显示颜色时水平线将显示为实心效果，默认为空心灰色 <!DOCTYPE html> <html> <head> <title>设置标题字及其对齐方式</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <p>默认水平线</p> <hr/> <p>水平线宽度为100像素</p> <hr width="100" /> <p>水平线宽度为500像素</p> <hr width="500" /> <p>水平线宽度为浏览器窗口的50%</p> <hr width="50%" /> <p>水平线宽度为浏览器窗口的100%</p> <hr width="100%" /> <p>水平线高度为10像素</p> <hr size="10"> <p>水平线高度为20像素</p> <hr size="20"> <p>水平线居左对齐</p> <hr width="500" align="left"/> <p>水平线居中对齐</p> <hr width="500" align="center"/> <p>水平线居右对齐</p> <hr width="500" align="right"/> <p>水平线高度为20像素且实心不带阴影</p> <hr size="20" noshade/> <p>水平线高度为20像素且颜色为红色</p> <hr size="20" color="red"/> <p>水平线高度为20像素且颜色为蓝色</p> <hr size="20" color="blue"/> <p>水平线高度为20像素且颜色为橙色</p> <hr size="20" color="orange"/> </body> </html>- 语法说明：
- 默认情况下，< hr/>标记产生的是一条占满整个窗口的带阴影的空心立体效果的水平线
6.列表标记
- 有序列表
- 无序列表
- 嵌套列表
1.有序列表
- 以数字或字母等可以表示顺序的符号为项目前导符来排序列表项的列表，称为有序列表
- 1.有序列表的前导符设置
属性值 说明 type=“1” 前导符为数字1,2,3… type=“a” 前导符为小写字母a,b,c… type=“A” 前导符为大写字母A,B,C… type=“i” 前导符为小写罗马数字i,ii,iii… type=“I” 前导符为大写罗马数字I,II,III… - 2.有序列表的前导符起始编号设置
- 基本语法：
<ol type="前导符" start="起始编号位序"> <li>列表项</li> <li>列表项</li> ... <ol><!DOCTYPE html> <html> <head> <title>有序列表</title> <meta http-equiv="content-type" content="gb2132"/> </head> <body> <ol> <li>默认列表项一</li> <li>默认列表项二</li> <li>默认列表项三</li> </ol> <ol type="1"> <li>数字列表项一</li> <li>数字列表项二</li> <li>数字列表项三</li> </ol> <ol type="a"> <li>小写字母列表项一</li> <li>小写字母数字列表项二</li> <li>小写字母数字列表项三</li> </ol> <ol type="A"> <li>大写字母列表项一</li> <li>大写字母数字列表项二</li> <li>大写字母数字列表项三</li> </ol> <ol type="i"> <li>小写罗马数字列表项一</li> <li>小写罗马数字列表项二</li> <li>小写罗马数字列表项三</li> </ol> <ol type="I"> <li>大写罗马数字列表项一</li> <li>大写罗马数字列表项二</li> <li>大写罗马数字列表项三</li> </ol> <hr color="orange"/> <ol type="a" start="3"> <li>起始标号列表项一</li> <li>起始标号列表项二</li> <li>起始标号列表项三</li> </ol> </body> </html>- 语法说明：
- 默认情况下有序列表用阿拉伯数字作为列表项的前导符
- 默认情况下有序列表的前导符是从排序符号的第一位开始排序
- 默认情况下有序列表的起始编号为1，起始编号位序表示列表项的开始编号所处的位置序号（例：编号c的位序为3）
2.无序列表
- 以无次序含义的符号（●,○,■）为前导符来排序列表项或没有任何符号作前导符的列表，称为无序列表
- 无序列表包含如下两种
- 1.项目列表：列表项前面必须包括前导符
- 2.定义列表：列表项前没有任何前导符
1.项目列表
- 1.项目列表的前导符设置
属性值 说明 type=“disc” 前导符实心圆点●（默认前导符） type=“circle” 前导符为空心圆点○ type=“square” 前导符为实心小方块■ - 基本语法：
<ul type="前导符"> <li>列表项</li> <li>列表项</li> ... <ul><!DOCTYPE html> <html> <head> <title>无序列表</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <body> <h4>无序列表1</h4> <ul> <li>无序列表项1</li> <li>无序列表项2</li> <li>无序列表项3</li> </ul> <hr/> <h4>无序列表2</h4> <ul type="disc"> <li>无序列表项1</li> <li>无序列表项2</li> <li>无序列表项3</li> </ul> <hr/> <h4>无序列表3</h4> <ul type="circle"> <li>无序列表项1</li> <li>无序列表项2</li> <li>无序列表项3</li> </ul> <hr/> <h4>无序列表4</h4> <ul type="square"> <li>无序列表项1</li> <li>无序列表项2</li> <li>无序列表项3</li> </ul> </body> </html>- 语法说明：
- 默认情况下无序列表的前导符是实心圆点●
2.定义列表
- 定义列表用于对名词解释，是一种具有两个层次的列表，其中名词为第一层次，解释为第二层次
- 定义列表的列表项前没有任何前导符，解释相对于名词有一定位置的缩进
- 基本语法：
<dl> <dt>名词1</dt> <dd>解释1</dd> <dd>解释2</dd> ... <dt>名词2</dt> <dd>解释1</dd> <dd>解释2</dd> ... ... <dl><!DOCTYPE html> <html> <head> <title>定义列表</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <body> <dl> <dt>名词1</dt> <dd>解释1</dd> <dd>解释2</dd> <dt>名词2</dt> <dd>解释1</dd> <dd>解释2</dd> </dl> </body> </html>- 语法说明：
- 首先使用< dl>< /dl>标记声明定义列表，然后再< dl>< /dl>标记中使用< dt>< /dt>定义需要解释的名词，接着使用< dd>< /dd>解释名词
- 一个名词可以有多条解释，每条解释使用一个< dd>< /dd>标记对
3.嵌套列表
- 嵌套列表指在一个列表的定义中嵌套了另一个列表的定义
<!DOCTYPE html> <html> <head> <title>嵌套列表</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <body> <h4>无序列表嵌套有序列表</h4> <ul> <li>无序列表项 <ol> <li>有序列表项</li> <li>有序列表项</li> <li>有序列表项</li> </ol> </li> <li>无序列表项 <ol> <li>有序列表项</li> <li>有序列表项</li> <li>有序列表项</li> </ol> </li> </ul> <hr/> <h4>有序列表嵌套无序列表</h4> <ol> <li>有序列表项 <ul> <li>无序列表项</li> <li>无序列表项</li> <li>无序列表项</li> </ul> </li> <li>有序列表项 <ul> <li>无序列表项</li> <li>无序列表项</li> <li>无序列表项</li> </ul> </li> </ol> </body> </html>
- 语法说明：
- 嵌套的列表在上一个列表的< li>< /li>中
7.图片标记
- 网页常用图片格式有JPEG，GIF，PNG
- JPEG/JPG格式：（Joint Photographic Experts Group，联合图像专家组标准）支持数百万种色彩，主要用于显示照片等颜色丰富的精美图像。JPEG是质量有损耗的格式，这意味着在压缩时会丢失一些数据（很少）而降低了最终文件的质量
- GIF格式：（Graphics Interchange Format ，图形交换格式）是网页中很流行的格式。它最多使用256中色彩，最适合显示色调不连续或具有大面积单一颜色的图像。GIF还包含透明区域和多帧动画，可以用于卡通，导航条，Logo带有透明区域的图形和动画等
- PNG格式：（Portable Network Graphics，可移植网络图形）既融合了GIF格式透明显示的颜色又有JPEG处理精美图像的优势
1.插入图片
- 基本语法：
<img src="图片文件路径"><!DOCTYPE html> <html> <head> <title>插入图片</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <body> <img src="F:\Brackets\HTML\html1\images\Demo1.jpg"> </body> </html>- 语法说明：
- src属性指定需要插入的图片文件路径，这是一个必设属性
2.设置图片的大小
- 基本语法：
<img src="图片文件路径" width="宽度" height="高度"><!DOCTYPE html> <html> <head> <title>设置图片大小</title> <meta http-equiv="content-type" content="text/html; charset=gb2132"/> </head> <body> <img src="F:\Brackets\HTML\html1\images\Demo1.jpg" width="500" height="500"> <img src="..\images\Demo1.jpg" width="50%" height="40%"> </body> </html>- 语法说明：
- 宽度和高度可以是像素值也可以是百分数；如果是像素值则，直接写数值即可；如果是百分数，则是相对于浏览器窗口的一个比例
3.设置图片提示文本
- 基本语法：
<img src="图片文件路径" alt="图片未成功显示时提示文本"> 或 <img src="图片文件路径" title="提示文本"><!DOCTYPE html> <html> <head> <title>设置图片提示文本</title> <meta http-equiv="content-type" content="text/html; charset=gb2132"/> </head> <body> <img src="F:\Brackets\HTML\html1\\Demo1.jpg" width="500" height="500" alt="桌面背景图片"> <img src="..\images\Demo1.jpg" width="50%" height="40%" title="桌面背景图片"> </body> </html>- 语法说明：
- alt：当网页图片无法显示时的提示文本
- title： 图片的提示文本，无论图片是否成功显示鼠标放在图片上都会显示提示文本
- 提示文本中的内容也可以包括空格，标点以及一些特殊字符
4.设置图片与周围对象的间距
- 基本语法：
<img src="图片文件路径" hspace="水平间距" vspace="垂直间距"><!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2132"/> </head> <body> <img src="F:\Brackets\HTML\html1\\Demo1.jpg" width="500" height="500" alt="桌面背景图片"> <img src="..\images\Demo1.jpg" width="50%" height="40%" title="桌面背景图片" hspace="50" vspace="50"> 《安全和可信通信网络法》于2019年提出，2020年3月12日经美国时任总统签署后生效。按规定FCC在该法生效后1年内将发布对国家安 ，并列出“黑名单”公司将面临的限制。本月12日，FCC在一年期限的最后一天发布这份清单。 <img src="..\images\Demo1.jpg" width="50%" height="40%" title="桌面背景图片" hspace="50" vspace="50"> 《环球时报》记者注意到，FCC此前就曾打压上述五家中企，依据是《国防授权法案》。中国信息通信研究院相关研究团队14日对记者分 析称，美国已着手清除更换中国网络设备，此次将2019年《安全和可信通信网络法》作为行动依据，意味着美国从立法上正式禁止官方购 买中国部分企业的网络设备。 通信行业资深专家项立刚14日告诉《环球时报》记者，FCC近年来对中国通信企业的打压主要集中在禁止使用联邦基金（政府补贴）采 购被列入“黑名单”的中企的产品和服务，但因美国国内主流运营商已经基本放弃使用中国产品和服务，因此受FCC最新行动影响的 主要是美国边远地区的一些小运营商。 </body> </html>- 语法说明：
- 默认情况下，图片与周围对象的水平间距和垂直间距都为0
- 间距的单位是像素
5.设置图片的对齐方式
- 基本语法：
<img src="图片文件路径" align="对齐方式">
对齐方式 描述 top 图片顶端与周围对象的顶端对齐 bottom 图片底端与周围对象的底端对齐 middle 图片的中间线与周围对象底端对齐 left 图片在后面对象的左边 right 图片在后面对象的右边
- 语法说明：
- 默认情况下，插入的图片在水平方向放置在后面对象的左边，在垂直方向与周围对象的底端对齐
6.设置图片的边框
- 基本语法：
<img src="图片文件路径" border="边框宽度"><!DOCTYPE html> <html> <head> <title>设置图片的边框</title> <meta http-equiv="content-type" content="text/html; charset=gb2132"> <meta http-equiv="refresh" content="20"> </head> <body> <img src="F:\Brackets\HTML\html1\images\Demo1.jpg" width="250" height="250" > <img src="F:\Brackets\HTML\html1\images\Demo1.jpg" width="250" height="250" border="0"> <img src="F:\Brackets\HTML\html1\images\Demo1.jpg" width="250" height="250" border="1"> <img src="F:\Brackets\HTML\html1\images\Demo1.jpg" width="250" height="250" border="2"> <img src="F:\Brackets\HTML\html1\images\Demo1.jpg" width="250" height="250" border="200"> </body> </html>- 语法说明：
- 默认情况下，图片是没有边框的
- 边框宽度的单位是像素，最小值是1
8.在网页中嵌入多媒体内容
标记 描述 marquee 设置文字等对象在页面中的滚动效果 embed 在网页中嵌入MP3，视频等多媒体内容 applet 在页面中插入java applet小程序 bgsound 设置页面的背景音乐 object 在页面中嵌入Flash页面
1.设置滚动字幕
- 基本语法：
<marquee>滚动文字</marquee><!DOCTYPE html> <html> <head> <title>设置滚动字幕</title> <meta http-equiv="content-type" content="text/html; charset=gb2132"> <meta http-equiv="refresh" content="20"> </head> <body> <marquee><img src="F:\Brackets\HTML\html1\images\Demo1.jpg" width="250" height="250" ></marquee> <marquee>滚动字幕<big>滚动字幕</big></marquee> </body> </html>- 语法说明：
- 默认情况下，使用< marquee>标记得到的滚动内容是从右向左移动的
- 默认情况下，滚动字幕以一定的速度从右向左循环往复移动
2.设置滚动字幕的滚动方向
- 基本语法：
<marquee direction="滚动方向">滚动文字</marquee>
滚动方向 描述 up 设置文字从下往上滚动 down 设置文字从上往下滚动 left 设置文字从右往左滚动（默认滚动方向） right 设置文字从左往右运动 <!DOCTYPE html> <html> <head> <title>设置滚动字幕</title> <meta http-equiv="content-type" content="text/html; charset=gb2132"> <meta http-equiv="refresh" content="20"> </head> <body> <marquee><img src="F:\Brackets\HTML\html1\images\Demo1.jpg" width="250" height="250" ></marquee> <marquee direction="up"><big>从下往上滚动</big></marquee> <marquee direction="down"><big>从上往下滚动</big></marquee> <marquee direction="left"><big>从右往左滚动</big></marquee> <marquee direction="right"><big>从左往右滚动</big></marquee> </body> </html>
3.设置滚动字幕的滚动行为
- 基本语法：
<marquee behavior="滚动行为">滚动文字</marquee>
滚动行为 描述 scroll 设置文字循环往复滚动（默认行为） slide 设置文字只进行一次滚动 alternate 设置文字循环交替往返进行滚动 <!DOCTYPE html> <hteml> <head> <title>设置滚动字幕的滚动行为</title> <meta http-equiv="content-type" content="gb2132"> <meta http-equiv="refresh" content="20" </head> <body> <marquee><img src="F:\Brackets\HTML\html1\images\Demo1.jpg" width="250" height="250"></marquee> <marquee behavior="scroll"><b>往复运动</b></marquee> <marquee behavior="slide"><strong>只进行一次滚动</strong></marquee> <marquee behavior="alternate"><i>循环交替往返滚动</i></marquee> </body> </html>
4.设置滚动字幕的滚动速度和滚动延迟特性
- 基本语法：
<marquee scrollamount="滚动速度值" scrolldelay="延迟时间">滚动文字</marquee>
滚动行为 描述 scrollamount 设置文字滚动速度，取值为某个数字，数字越大滚动速度越快，默认的速度值是6 scrolldelay 设置文字文字滚动过程中延迟一段时间，单位是毫秒，值越小越快，默认值是0ms <!DOCTYPE html> <html> <head> <title>设置字幕的滚动速度和滚动延迟特性</title> <meta http-equiv="content-type" content="text/html; charset=gb2132"> </head> <body> <marquee><cite>文字以默认速度值从由往左滚动</cite></marquee> <marquee scrollamount="6">文字以速度6从右往左滚动</marquee> <marquee scrollamount="3">文字以速度3从右往左滚动</marquee> <marquee scrollamount="1">文字以速度1从右往左滚动</marquee> <marquee scrollamount="0">文字以速度0从右往左滚动</marquee> <marquee scrollamount="">文字以速度1000从右往左滚动</marquee> <hr/> <marquee>文字以默认速度值从右往左滚动,延迟为默认值</marquee> <marquee scrolldelay="100">文字以默认速度值从右往左滚动,延迟为100ms</marquee> <marquee scrolldelay="150">文字以默认速度值从右往左滚动,延迟为150ms</marquee> <marquee scrolldelay="0">文字以默认速度值从右往左滚动,延迟为0ms</marquee> </body> </html>- 语法说明：
- scrollamount：设置文字的滚动速度，默认滚动速度为6，最小的滚动速度为0（即不滚动停留在页面最左边），当接近4000左右时看不到文字内容
- scrolldelay：设置滚动文字的延迟特性，会降低滚动速度，默认值是0ms，值越大滚动越慢
5.设置滚动字幕的滚动区域及其背景颜色
- 基本语法：
<marquee bgcolor="颜色值" width="滚动区域宽度" height="滚动区域高度">滚动文字</marquee>
属性 描述 width 设置文字滚动区域的宽度，可以是数字，此时单位为像素；也可以是百分比数值，此时表示相对于浏览器窗口宽度的百分比大小 height 设置文字滚动区域的高度，可以是数字，此时单位为像素；也可以是百分比数值，此时表示相对于浏览器窗口高度的百分比大小 bgcolor 设置文字滚动区域的背景颜色，既可以取英文颜色单词，也可以使用十六进制表示的颜色值 <!DOCTYPE html> <html> <head> <title>设置字幕的滚动区域以及其背景颜色</title> <meta http-equiv="content-type" content="text/html; charset=gb2132"/> </head> <body> <marquee direction="up" bgcolor="#0000ff">默认</marquee> <marquee direction="up" height="200" bgcolor="#0000ff">蓝色，宽度默认，高200</marquee> <marquee width="500" height="100" bgcolor="#ff0000">红色，宽500，高100</marquee> <marquee width="500" height="50" bgcolor="#00ff00">绿色，宽500，高50</marquee> </body> </html>- 语法说明：
- 默认情况下，字幕将在一个与浏览器等宽的白色背景颜色的区域中进行滚动，该区域的高度跟滚动对象的高度相同
6.设置字幕的滚动区域与周围对象的间距
- 基本语法：
<marquee hspace="水平间距" vspace="垂直间距">滚动文字</marquee><!DOCTYPE html> <html> <head> <title>设置字幕的滚动区域与周围对象的间距</title> <meta http-equiv="content-type" content="text/html; charset=gb2132"> </head> <body> <marquee>文字从默认区域从上往下滚动</marquee> <marquee direction="down" width="400" height="200" bgcolor="blue">文字从高度为200，宽度为400，背景颜色为蓝色从上往下滚动</marquee> <marquee direction="down" width="400" height="200" bgcolor="blue" hspace="20" vspace="40">文字从高度为200，宽度为400，背景颜色为蓝色，水平间距为10，垂直间距为20从上往下滚动</marquee> </body> </html>- 语法说明：
- 水平间距和垂直间距的单位是像素
- 可以使字幕滚动区域和浏览器窗口在水平和垂直方向分别产生一定的间距
7.嵌入音视频文件?
- 基本语法：
<embed src="file_url"> </embed>
属性 描述 src 指定嵌入式对象的文件路径 width 以像素为单位定义嵌入式对象的宽度 height 以像素为单位定义嵌入式对象的高度 loop 设置嵌入式对象的播放是否循环不断，取值true时循环不断，否则只播放一次，默认值是false hidden 设置多媒体播放软件的可视性，默认值是false <!DOCTYPE html> <html> <head> <title>嵌入音视频文件</title> <meta http-equiv="content-type" content="text/html; charset=gb2132"/> </head> <body> <embed src="F:\Brackets\HTML\html1\music\2.wav"></embed> <embed src="F:\Brackets\HTML\html1\music\Do It Right.mp3"></embed> <hr/> <embed src="F:\Brackets\HTML\html1\music\2.wav" width="400" height="500"></embed> <embed src="F:\Brackets\HTML\html1\music\Do It Right.mp3" width="400" height="500" hidden="true"></embed> </body> </html>- 语法说明：
- src属性指定多媒体文件，这是一个必设属性
- 多媒体文件是wav，mp3时会出现多媒体播放软件
- 多媒体文件是mkv，midi，avi时会下载文件到本地
- 打开网页时音乐不会自动播放
- hidden设置true时会隐藏多媒体播放软件
8.嵌入Flash动画?
- 基本语法：
<object classid="clsid_value" codebase="url" width="宽度值" height="高度值" <param name="movie" value="file_name"> <param name="quality" value="high"> <embed pluginspage="" src="file_name" quality="high" type="application/x-shockwave-flash" width="value" height="value"> </object><!DOCTYPE html> <html> <head> <title>嵌入音视频文件</title> <meta http-equiv="content-type" content="text/html; charset=gb2132"/> </head> <body> <embed src="F:\Brackets\HTML\html1\music\2.wav"></embed> <embed src="F:\Brackets\HTML\html1\music\Do It Right.mp3"></embed> <hr/> <embed src="F:\Brackets\HTML\html1\music\2.wav" width="400" height="500"></embed> <embed src="F:\Brackets\HTML\html1\music\Do It Right.mp3" width="400" height="500" hidden="true"></embed> </body> </html>- 语法说明：
- src属性指定多媒体文件，这是一个必设属性
- 多媒体文件是wav，mp3时会出现多媒体播放软件
- 多媒体文件是mkv，midi，avi时会下载文件到本地
- 打开网页时音乐不会自动播放
- hidden设置true时会隐藏多媒体播放软件
9.设置背景音乐?
- 基本语法：
<bgsound src="file_url" loop=""循环次数><!DOCTYPE html> <html> <head> <title>嵌入音视频文件</title> <meta http-equiv="content-type" content="text/html; charset=gb2132"/> </head> <body> <embed src="F:\Brackets\HTML\html1\music\2.wav"></embed> <embed src="F:\Brackets\HTML\html1\music\Do It Right.mp3"></embed> <hr/> <embed src="F:\Brackets\HTML\html1\music\2.wav" width="400" height="500"></embed> <embed src="F:\Brackets\HTML\html1\music\Do It Right.mp3" width="400" height="500" hidden="true"></embed> </body> </html>- 语法说明：
10.嵌入Java Applet?
- 基本语法：
<applet code=".class" width="" height=""></applet><!DOCTYPE html> <html> <head> <title>嵌入音视频文件</title> <meta http-equiv="content-type" content="text/html; charset=gb2132"/> </head> <body> <embed src="F:\Brackets\HTML\html1\music\2.wav"></embed> <embed src="F:\Brackets\HTML\html1\music\Do It Right.mp3"></embed> <hr/> <embed src="F:\Brackets\HTML\html1\music\2.wav" width="400" height="500"></embed> <embed src="F:\Brackets\HTML\html1\music\Do It Right.mp3" width="400" height="500" hidden="true"></embed> </body> </html>- 语法说明：
9.使用框架结构
- 框架的作用：
- 把浏览器窗口划分成若干个小窗口，每个小窗口可以分别显示不同的网页，不同的窗口相互独立
- 注意框架页面中不涉及页面的具体内容，所以该页面中不需要使用< body>< /body>标记
- 基本语法：
<frameset> <frame/> <frame/> ... </frameset>- 语法说明：
- frameset:表示框架集标记，是双标记
- frame：表示框架标记，是单标记
- 一个框架集中可以包含多个框架，每个框架窗口显示的页面由框架的src属性指定
1.框架集标记< frameset>
框架集标记的作用主要是定义浏览器窗口的分割方式，各分割窗口的大小，以及设置框架边框的颜色和粗细等属性
框架集标记对浏览器窗口的分割方式存在不同的方式，主要存在：
- 1.左右分割
- 2.上下分割
- 3.嵌套分割
属性 描述 border 设置边框粗细 bordercolor 以RGB十六进制颜色值或颜色英文名设置框架边框颜色 frameborder 设置框架是否显示边框，可取值0或1（yes或no），默认显示边框 framespacing 设置框架之间的间距 rows 使窗口按行，即上下的方式分隔 cols 使窗口按列，即左右的方式分隔 1.左右分割窗口
- 基本语法：
<frameset cols="value1,value2..."> <frame> <frame> ... </frameset><!DOCTYPE html> <html> <head> <title>左右分割窗口</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <frameset cols="200,*"> <frame/> <frame/> </frameset> </html>- 语法说明：
- cols属性值的个数决定了< frame>标记的个数，即分割的窗口个数
- 各个值之间用逗号隔开，各个值定义了相应框架窗口的宽度，可以是数字（单位是像素），也可以是百分比和以*号表示的剩余值
- 剩余值表示所以窗口设定之后的浏览器窗口的大小剩余部分，当出现一次时，表示对应框架窗口的大小将根据浏览器窗口的大小自动调整；当出现一次以上时，剩余值将等比分给每个对应的窗口（例：< frameset cols="100,200,* ">表示第一个和第二个窗口的大小分别为100像素和200像素，第三个窗口的大小等于浏览器窗口的大小减去300后的值；而< frameset cols="200,* ,* ">则表示第一个窗口的大小是200像素，第二和第三个窗口的大小相等，值是浏览器窗口减去200像素后的大小的一半）
2.上下分割窗口
- 基本语法：
<frameset rows="value1,value2..."> <frame> <frame> ... </frameset><!DOCTYPE html> <html> <head> <title>上下分割窗口</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <frameset rows="20%,200,*,*"> <frame/> <frame/> <frame/> <frame/> </frameset> </html>- 语法说明：
- rows属性值的个数决定了< frame>标记的个数，即分割的窗口个数
- rows定义了窗口的高度，取值与cols属性的取值完全一样
3.嵌套分割窗口
- 基本语法：
<frameset rows="value1,value2..."> <frame/> <frameset cols="value21,value22,..."> <frame/> <frame/> ... </frameset> ... </frameset><!DOCTYPE html> <html> <head> <title>嵌套分割窗口</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <frameset rows="20%,*,10%"> <frame/> <frameset cols="30%,*"> <frame/> <frame/> </frameset> <frame/> </frameset> </html>- 语法说明：
- 浏览器窗口既存在左右分割又存在上下分割，这种分割方式称为嵌套分割
- 这种方式的分割需要在< frameset>标记对内部嵌套< frameset>标记，子标记< frameset>和其直接父标记的分割方式不同（也可以相同，不会出错但无意义）
- 嵌套的< frmaeset>标记将会把父标记< frameset>分割的对应窗口再按自己所指定的分割方式进行第二次分割。嵌套的
- 用< frameset>代替一个< frame/>标签嵌套的< frameset>标记替换了需二次分割的框架
4.使用< frameset>标记设置框架边框
- 基本语法：
<frameset frameborder="0|1|no|yes" framespacing="边框间距" border="边框宽度" bordercolor="边框颜色" rows="value1,value2..."> <frame/> <frameset cols="value21,value22,..."> <frame/> <frame/> ... </frameset> ... </frameset><!DOCTYPE html> <html> <head> <title>嵌套分割窗口</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <frameset frameborder="1" framespacing="50" border="6" bordercolor="#0000ff" rows="20%,*,10%"> <frame/> <frameset frameborder="1" framespacing="100" border="10" bordercolor="#00ffff" rows="50%,*"> <frame/> <frame/> </frameset> <frame/> </frameset> </html>- 语法说明：
- 默认情况下框架会显示边框,frameborder属性可以取值0和1或者no和yes，其中0和no表示不显示边框，1和yes表示显示边框，默认值是1
- framespacing和border属性的设置效果是一样的，都是对边框宽度的设置（一般使用border属性）
- bordercolor设置边框的颜色
2.框架标记< frame/>
- < frameset>分割得到的每个子窗口都需要显示不同的页面内容,这些页面内容由< frame>标记来设置
- < frame>是单标记，他必须放在框架集frameset中，< frameset>分割了几个子窗口就必须对应几个< frame>标记
- 框架中显示的页面及框架的其他特性都是通过设置< frame>标记的相应属性得到的
属性 描述 src 设置在框架中显示的页面URL地址 bordercolor 设置边框颜色 frameborder 指示边框是否要显示，取值1或0，no或yes，默认值是1 border 设置边框粗细 name 设置框架名称，可作为超链接的target的属性值 noresize 使用时表示不能调整窗口的大小，省略时表示可调整 scorlling 设置窗口是否要显示滚动条，可取值yes，no和auto，默认是auto，表示根据需要自动出现，yes表示显示，no表示不显示 marginwidth 设置内容与框架窗口左右边框的距离 marginheight 设置内容与框架窗口上下边框的距离 1.设置框架显示内容
- 基本语法：
<frameset cols="value1,value2..."> <frame src="需显示页面的URL"> <frame src="需显示页面的URL"> ... </frameset><!DOCTYPE html> <html> <head> <title>设置框架显示内容</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> </head> <frameset rows="80,*"> <frame src="head.html" /> <frameset cols="20%,*"> <frame src="left.html" /> <frame src="right.html" /> </frameset> </frameset> </html><!DOCTYPE html> <html> <head> <title>头部页面</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <p align="center">头部页面</p> </body> </html><!DOCTYPE html> <html> <head> <title>内容页面</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <p>内容页面</p> <p>内容页面</p> <p>内容页面</p> <p>内容页面</p> <p>内容页面</p> </body> </html>- 语法说明：
- 使用框架的主要目的是为了在一个浏览器窗口中同时显示不同页面的内容，指定要在框架中显示某个页面的内容需要使用< frame>的src属性
- src属性值是需要在框架窗口中显示的页面的URL，该URL可以是绝对址，也可以是相对地址
2.使用< frame>标记设置框架边框
- 基本语法：
<frame frameborder="0|1|no|yes" bordercolor="颜色值"><!DOCTYPE html> <html> <head> <title>使用frame标记框架边框设置</title> <meta http-equiv="content-type" content="text/html;charset=gb2132"/> </head> <frameset cols="20%,*" frameborder="1" border="15" bordercolor="#0099FF" > <frame src="left.html"> <frame src="right.html"> </frameset> </html>- 语法说明：
- 使用frameset设置frameboder，border，bordercolor属性
3.设置框架名称
- 基本语法：
<frame name="框架名称"><!DOCTYPE html> <html> <head> <title>设置框架名称</title> <meta http-equiv="content-type" content="text/html;charset=gb2132"/> </head> <frameset cols="20%,*" frameborder="1" border="15" bordercolor="#0099FF" > <frame src="left.html"> <frame src="right.html" name="main"> </frameset> </html>- 语法说明：
- 超链接通过名称来引用框架，因而我们创建框架时需要给框架命名，这样该框架就可以被超链接作为一个目标窗口来引用
4.设置框架窗口固定大小
- 基本语法：
<frame noresize="noresize"><!DOCTYPE html> <html> <head> <title>设置框架名称</title> <meta http-equiv="content-type" content="text/html;charset=gb2132"/> </head> <frameset cols="20%,*" frameborder="1" border="15" bordercolor="#0099FF" > <frame src="left.html" noresize="noresize"> <frame src="right.html" name="main"> </frameset> </html>- 语法说明：
- 默认情况下，用户可调节框架窗口的大小
- 通过框架的noresize属性可以实现窗口大小固定
- 在HTML中noresize并不需要设置，但在XHTML时，所有属性都必须有值，noresize的值就是它本身
5.设置框架滚动条
- 基本语法：
<frame scrolling="auto|no|yes"><!DOCTYPE html> <html> <head> <title>设置框架名称</title> <meta http-equiv="content-type" content="text/html;charset=gb2132"/> </head> <frameset cols="20%,*" frameborder="1" border="15" bordercolor="#0099FF" > <frame src="left.html" noresize="noresize"> <frame src="right.html" name="main" scrolling="auto"> </frameset> </html>- 语法说明：
- 默认情况下，框架的滚动条会自适应页面内容
- scrolling属性可取auto，no，yes中的任意一个；其中auto会根据页面内容自动显示滚动条，这是一种默认行为可省略；no表示永远不会显示滚动条，yes会一直显示滚动条
6.设置框架边距
- 基本语法：
<frame marginheight="上下边距" marginwidth="左右边距"><!DOCTYPE html> <html> <head> <title>设置框架名称</title> <meta http-equiv="content-type" content="text/html;charset=gb2132"/> </head> <frameset cols="20%,*" frameborder="1" border="15" bordercolor="#0099FF" > <frame src="left.html" noresize="noresize"> <frame src="right.html" name="main" scrolling="auto" marginheight="20" marginwidth="30"> </frameset> </html>- 语法说明：
- 框架是用来显示页面内容的，当页面没有设置边距时，页面内容与框架的上下边距默认是15像素，与框架的左右边距默认是10像素
3.不支持框架标记< noframes>
- 一些早期版本的浏览器不支持框架，使用框架时将会显示一个空白页面
- < noframes>标记能告诉用户该浏览器不支持该框架技术，当浏览器不能加载框架集文件时，会检索到< noframes>标记，并显示标记中的内容
- 基本语法：
<noframes> <body> ...显示内容 </body> </noframes><!DOCTYPE html> <html> <head> <title>设置框架名称</title> <meta http-equiv="content-type" content="text/html;charset=gb2132"/> </head> <frameset cols="20%,*" frameborder="1" border="15" bordercolor="#0099FF" > <frame src="left.html" noresize="noresize"> <frame src="right.html" name="main" scrolling="auto" marginheight="20" marginwidth="30"> </frameset> <noframes> <body> 抱歉，您的浏览器版本太低，不支持框架，无法看到页面内容，请使用较新的浏览器来浏览 </body> </noframes> </html>
4.浮动框架标记< iframe>
- 基本语法：
<iframe 属性 >
属性 描述 src 设置浮动框架中显示的页面URL width 设置浮动框架的宽度 height 设置浮动框架的高度 name 设置浮动框架的名称,以便于其他对象引用它 align 设置浮动框架相对于浏览器窗口的对齐方式 frameborder 设置浮动框架边框显示与否 scrolling 设置浮动框架滚动条是否显示 noresize 设置浮动框架尺寸是否可调整 bordercolor 设置浮动框架边框颜色 marginheight 设置页面内容与浮动框架上下边框的间距 marginwidth 设置页面内容与浮动框架左右边框的间距 1.在页面中嵌入浮动框架
- 基本语法：
<iframe src="源文件地址"><!DOCTYPE html> <html> <head> <title>在页面中嵌入浮动框架</title> <meta http-equiv="content-type" content="text/html;charset=gb2132"/> </head> <body> <p>一些早期版本的浏览器不支持框架，使用框架时将会显示一个空白页面标记能告诉用户该浏览器不支持该框架技术，当浏览器不能加载框架集文件时，会检索到标记，并显示标记中的内容</p> <iframe src="left.html" /> </body> </html>- 语法说明：
- 浮动框架就像HTML页面中其他对象一样，可以出现在页面中的任何一个位置，但与其他对象不同的是，浮动框架在页面中构建一个区域，在这个区域中可以显示另一个HTML页面的内容，区域中显示的页面使用属性src来指定
- 源文件地址是指需要在浮动框架中显示的页面地址，可以是绝对路径，也可以是相对路径
2.浮动框架的大小
- 基本语法：
<iframe src="源文件地址" height="高度" width="宽度"><!DOCTYPE html> <html> <head> <title>在页面中嵌入浮动框架</title> <meta http-equiv="content-type" content="text/html;charset=gb2132"/> </head> <body> <p>一些早期版本的浏览器不支持框架，使用框架时将会显示一个空白页面标记能告诉用户该浏览器不支持该框架技术，当浏览器不能加载框架集文件时，会检索到标记，并显示标记中的内容</p> <iframe src="left.html" height="730" width="1000"/> </body> </html>- 语法说明：
- 浮动框架的默认宽度是200像素，高度是100像素
- height和width属性值是一个数值，单位是像素
3.浮动框架的对齐方式
- 基本语法：
<iframe src="源文件地址" align="对齐方式"><!DOCTYPE html> <html> <head> <title>在页面中嵌入浮动框架</title> <meta http-equiv="content-type" content="text/html;charset=gb2132"/> </head> <body> <p>一些早期版本的浏览器不支持框架，使用框架时将会显示一个空白页面标记能告诉用户该浏览器不支持该框架技术，当浏览器不能加载框架集文件时，会检索到标记，并显示标记中的内容</p> <div align="center"><iframe src="left.html" height="500" width="500"/></div> </body> </html>- 语法说明：
- 浮动框架的默认宽度是200像素，高度是100像素
- height和width属性值是一个数值，单位是像素
4.浮动框架的对齐方式
- 基本语法：
<iframe src="源文件地址" align="对齐方式"><!DOCTYPE html> <html> <head> <title>在页面中嵌入浮动框架</title> <meta http-equiv="content-type" content="text/html;charset=gb2132"/> </head> <body> <p>一些早期版本的浏览器不支持框架，使用框架时将会显示一个空白页面标记能告诉用户该浏览器不支持该框架技术，当浏览器不能加载框架集文件时，会检索到标记，并显示标记中的内容</p> <div align="center"><iframe src="left.html" height="500" width="500"/></div> </body> </html>- 语法说明：
- 浮动框架就好比html页面中的一个图片，图片相对于周围对象的对齐方式有垂直方向和水平方向，浮动框架也同样存在这两个方向的对齐方式
- align属性设置浮动框架相对于周围对象的对齐方式，对齐方式在水平方向可取left，right两个值，其中left是默认值;如果要使浮动框架在水平方向居中对齐，需要将浮动框架放到一个div标记对中，然后对div元素设置水平居中对齐；在垂直方向上可取top，middle，bottom3个值，其中bottom是默认值
5.框架与超链接
- 框架应用的一个重要目的是在一个浏览器窗口中同时存在一个导航栏窗口和对应的导航目标窗口，该目的通过超链接目标窗口的设置可以很容易实现
- 实现方法：将框架名作为超链接的target的属性值即可使用框架作为超链接的目标窗口
1.框架作为超链接的目标窗口
- 基本语法：
<!DOCTYPE html> <html> <head> <title>框架作为超链接目标窗口</title> <meta http-equiv="content-type" content="text/html;charset=gb2132"/> </head> <frameset cols="20%,*"> <frame src="link.html" name="left"> <frame name="right"> </frameset> </html><!DOCTYPE html> <html> <head> <title>创建菜单超链接</title> <meta http-equiv="content-type" content="text/html;charset=gb2132"/> </head> <body> <menu> <li><a href="left.html" target="right">left.html</a></li> <li><a href="right.html" target="right">right.html</a></li> <li><a href="demo.html" target="right">demo.html</a></li> </menu> </body> </html>
10.在网页中创建超链接
- 浏览器通过单击文本或图片对象，可以从一个页面跳到另一个页面，或者从另一个位置跳到另一个位置，实现这样功能的对象称为超链接
1.创建超链接
- 基本语法：
<a href="目标端点">源端点</a>
属性 属性值 描述 href 超链接文件路径 指定连接路径(必设属性),用于设置超链接的目标端点 name 书签名 定义书签名 target 目标窗口名称 在指定的目标窗口中打开连接文档 title 提示文字 设置链接提示文字 <!DOCTYPE html> <html> <head> <title>创建基本超链接</title> <meta http-equiv="content-type" content="text/html;charset=gb2132"/> </head> <body> <a href="right.html">这是我的第一个超链接</a> </body> </html>- 语法说明：
- 创建超链接使用的标记是< a>
- 超链接要能正确地进行连接跳转，需要同时存在两个端点，即源端点和目标端点
- 源端点是指网页中提供链接单击的对象（如：文本链接或图像链接）；目标端点是指链接跳过去的页面或位置（如：某网页，书签等）
- 超链接的目标端点使用< a>标记的href属性来指定，源端点则通过< a>标记的内容来决定
1.设置超链接目标窗口
- 基本语法：
<a href="目标端点" target="目标窗口名称">源端点</a>
属性 描述 _blank 在新窗口中打开连接文档 _self 在同一个框架或统一同窗口中打开链接文档（默认属性） _parent 在上一级窗口中打开，一般在框架页面中经常使用 _top 在浏览器的整个窗口中打开，忽略任何框架 框架名称 在指定的框架窗口中打开链接文档 - main.html
<!DOCTYPE html> <html> <head> <title>框架集文件</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <frameset cols="146,*" framespacing="0" frameborder="yes" border="1"> <frame src="menu.html" name="menu" scrolling="no" noresize="noresize"/> <frame src="target.html" name="right"> </frameset> <noframes> <body> </body> </noframes> </html>- menu.html
<!DOCTYPE html> <html> <head> <title>设置链接目标窗口</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <p><a href="target_top.html" target="_top">_top目标窗口</a></p> <p><a href="target_blank.html" target="_blank">_blank目标窗口</a></p> <p><a href="target_self.html" target="_self">_self目标窗口</a></p> <p><a href="target_parent.html" target="_parent">_parent目标窗口</a></p> <p><a href="target_default.html">默认目标窗口</a></p> <p><a href="target_frame.html" target="right">框架窗口</a></p> </body> </html>- target.html
<!DOCTYPE html> <html> <head> <title>初始页面</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <font color="red" face="隶书"><h3>初始页面，测试超链接的目标窗口</h3></font> </body> </html>- target_blank.html
<!DOCTYPE html> <html> <head> <title>_blank目标页面</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <font color="red" face="隶书"><h3>_blank目标窗口</h3></font> </body> </html>- target_self.html
<!DOCTYPE html> <html> <head> <title>_self目标页面</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <font color="red" face="隶书"><h3>_self目标窗口</h3></font> </body> </html>- target_parent.html
<!DOCTYPE html> <html> <head> <title>_parent目标页面</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <font color="red" face="隶书"><h3>_parent目标窗口</h3></font> </body> </html>- target_default.html
<!DOCTYPE html> <html> <head> <title>_default目标页面</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <font color="red" face="隶书"><h3>_default目标窗口</h3></font> </body> </html>- target_top.html
<!DOCTYPE html> <html> <head> <title>_top目标页面</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <font color="red" face="隶书"><h3>_top目标窗口</h3></font> </body> </html>- target_frame.html
<!DOCTYPE html> <html> <head> <title>frame目标页面</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <font color="red" face="隶书"><h3>frame目标窗口</h3></font> </body> </html>- 语法说明：
- Edge浏览器首先运行框架集文件
- 单击_top目标窗口页面会在整个浏览器打开
- 单击_self目标窗口页面跳转到当前窗口打开
- 单击_blank目标窗口页面在新打开的窗口中显示
- 单击_parent目标窗口页面在上一级窗口中打开
- 单击框架窗口页面会在name名为right的框架打开
- 单击默认目标窗口页面会在当前窗口中打开
2.超链接的链接路径
- 每个文件都有一个指定自己所处的位置的标识。对于网页来说，这个标识就是URL，而对于一般的文件则是它的路径，即所在的目录和文件名
- 链接路径就是在超链接中用于标识目标端点的位置标识，常见的链接路径主要有两种类型
- 绝对路径:文件的完整路径
- 相对路径：相对于当前文件的路径
- 相对路径包含以下三种情况
- 1.两文件在同一目录下：只需要输入链接文件名称
- 2.链接文件在当前文件的下一级目录：需要在链接文件名前添加下一级目录名/
- 3.链接文件在当前文件的上一级目录：需要早链接文件名前添加 . ./
1.相对路径：
<!DOCTYPE html> <html> <head> <title>框架集文件</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <frameset cols="146,*" framespacing="0" frameborder="yes" border="1"> <frame src="../menu.html" name="menu" scrolling="no" noresize="noresize"/> <frame src="text/target.html" name="right"> </frameset> <noframes> <body> </body> </noframes> </html>2.绝对路径：
<!DOCTYPE html> <html> <head> <title>框架集文件</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <frameset cols="146,*" framespacing="0" frameborder="yes" border="1"> <frame src="F:\Brackets\samples\root\Getting Started\html2\menu.html" name="menu" scrolling="no" noresize="noresize"/> <frame src="https://www.baidu.com/" name="right"> </frameset> <noframes> <body> </body> </noframes> </html>
3.超链接的类型
- 根据目标端点的内容，可以将链接分成以下几种类型：
- 1.内部链接
- 2.外部链接
- 3.书签链接
- 4.脚本链接
- 根据源端点的内容，可以将链接分成以下几种类型
- 1.文本链接
- 2.图像链接
- 3.图像映射
1.内部链接
- 基本语法：
<a href="file_url">源端点</a>- 语法说明:
- 内部链接是指在同一个网站内部，不同网页之间的链接关系
- 通过href属性指定链接文件,即目标端点，file_url表示链接文件的路径，一般使用相对路径
- 源端点既可以是文本也可以是图片
2.外部链接
- 基本语法：
<a href="URL">源端点</a>
URL格式 服务 描述 http:// www 进入万维网 mailto: 启动邮件发送系统 ftp: FTP 进入文件传输服务器 telnet:// Telnet 启动远程登录方式 news:// News 启动新闻讨论组 <!DOCTYPE html> <html> <head> <title>创建内部和外部链接</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <p><a href="demo2.html">内部超链接</a></p> <p><a href="http://www.baidu.com">链接到外部网站</a></p> <p><a href="mailto:3292912010@qq.com?subject=意见或建议&cc=3292912010@qq.com&bcc=3292912010@qq.com&body=你好">意见或建议(邮件链接)</a></p> </body> </html>- 语法说明:
- 外部链接是指跳转到当前网站外部，和其他网站中的页面或其他元素之间的链接关系
- 一般情况下URL使用绝对路径
3.书签链接
- 书签链接指的是目标端点为网页中的某个书签的链接
- 创建书签涉及两个步骤
- 1.创建书签
- 2.创建书签链接
- 创建书签
基本语法：<a name="书签名">文字/图片</a>- 创建书签链接
基本语法：1.链接到同一页面的书签，称为内部书签链接 <a href="#书签名">源端点</a>2.链接到其他页面中的书签，称为外部书签链接 <a href="file_url#书签名">源端点</a><!DOCTYPE html> <html> <head> <title>创建书签链接</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <h3><a name="HTML">HTML教程</a></h3> <p><a href="#first">HTML基础</a></p> <p><a href="#second">HTML头部标记</a></p> <p><a href="#third">HTML主体标记</a></p> <pre> 根据目标端点的内容，可以将链接分成以下几种类型： 1.内部链接 2.外部链接 3.书签链接 4.脚本链接 根据源端点的内容，可以将链接分成以下几种类型 1.文本链接 2.图像链接 3.图像映射 </pre> <a name="first">HTML基础</a> <pre> 1.基本概念 Internet（因特网/互联网）： 指全球最大的，开放的，由众多网络互联而成的计算机网络 Internet提供的服务： WWW，FTP，E-mail，BBS，TeInet 一个网页，可以从功能上将其分为头部和主体两部分 页面的头部是指由< head>< /head>所包含的部分，主要用于设计当前网页的网页标题，字符集，关键字，描述信息等内容 </pre> <a name="second">HTML头部标记</a> <pre> 当页面发布到Internet上后 在搜索引擎中搜索输入关键字搜索相应的页面 返回中结果中最上面显示的是页面的title 下面显示的是网页的描述信息 可以根据页面的title和描述信息确定要找的页面 </pre> <a name="third">HTML主体标记</a> <pre> 标记 描述 title 设定显示在浏览器标题栏中的内容 meta 定义网页的字符集，关键字，描述信息等内容 style 设置CSS层叠样式表的内容 link 设置对外部CSS文件的连接 script 设置页面脚本或链接外部脚本文件 </pre> <h3><a href="#HTML">返回</a></h3> </body> </html>- 语法说明:
- 书签名不能包含有空格
- 如果书签与书签链接在同一页面，则链接路径为#号加上书签名；
- 如果书签和书签链接分处在不同的页面，则必须在书签名及#号前加上书签所在的页面路径
4.脚本链接
- 基本语法：
<a href="javascript..">源端点</a><!DOCTYPE html> <html> <head> <title>脚本链接</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <a href="javascript:alert('您好，欢迎访问我的站点！')">欢迎访问</a> </body> </html>- 语法说明:
- 脚本链接指使用脚本作链接目标端点的链接
- 在javascript：后面编写的就是具体的脚本
5.文件下载
- 基本语法：
<a href="file_url">链接内容</a><!DOCTYPE html> <html> <head> <title>文件下载</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <p><a href="text1.doc">文档文件下载</a></p> <p><a href="text2.zip">压缩文件</a></p> </body> </html>- 语法说明:
- 当链接的目标文档类型属于.doc，.rar，.cab，.zip，.exe等，可以获得文件下载链接
- 要创建文件下载，只要在链接地址处输入文件路径即可。当用户单击链接后浏览器会自动判断文件类型作出不同情况的处理
6.文本链接
- 基本语法：
<a href="file_url"><img src="img_url"></a>- 语法说明:
- 文本链接是指源端点为文本的超链接
7.图片链接
- 基本语法：
<a href="file_url"><img src="img_url"></a>- 语法说明:
- 图片链接是指源端点为图片文件的超链接
- file_url指明了链接目标端点,img_url指明了图片文件路径
- 默认情况下，图片链接中图片会显示蓝色边框线,如果不想显示边框，应设置图片的border=0
8.图像映射
- 基本语法：
<img src="img_url" usemap="#map_name"> <map name="map_name"> <area shape="rect" coords="x1,y1,x2,y2" href="链接地址1"> <area shape="circle" coords="x,y,z" href="链接地址2"> <area shape="poly" coords="x1,y1,x2,y2,x3,y3,..." href="链接地址3"> ... </map>
shape coords 描述 rect(矩形) x1,y1,x2,y2 (x1,y1)为矩形左上顶点坐标,(x2,y2)为矩形右下顶点的坐标 circle(圆形) x,y,r (x,y) poly(多边形) x1,y1,x2,y2… (x1,y1),(x2,y2)…分别为多边形的各个顶点坐标，各顶点按单击生成的先后顺序 <!DOCTYPE html> <html> <head> <title>文件下载</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <img src="images/BlueDream_4k.jpg" width="500" height="500" border="0" usemap="#Map"> <map name="Map"> <area shape="poly" coords="107,86,258,69,182,52,126,54,102,79" href="demo2.html" title="欧洲"> <area shape="rect" coords="200,200,400,400" href="#asia" title="亚洲"> <area shape="circle" coords="336,81,44" href="#n_american" title="北美洲"> </map> </map> </body> </html>- 语法说明:
- 图像映像是指源端点为图像热区的超链接，一幅图像被切分成不同的区域，每个区域可以链接到不同的地址，这些区域称为图像的热区
- img标记中的usemap属性用于激情映射
- < map>标记用于定义图像映射中包含热点的映射
- < area>标记用于在图像映射中定义一个热区，其中包含了3个必须设置的属性：shape，coords，href
- shape属性：设置热区形状；图像映像包括3种形状的热区：矩形，圆形和多边形
- coords属性：设置热区坐标，热区形状决定了coords的取值
- href属性：用于设置每个热区的链接路径，可以是#开头的说明，也可以是链接的路径
11.在网页中使用表格
- HTML表格中的单元格可以放进任何的网页元素，用于排版页面内容(例：导航条，文字，图像，动画等)
- 表格属于结构性对象，一个表格包括行，列和单元格3个组成部分
- 其中行时表格中的水平分隔，列是表格的垂直分隔，单元格是行与列相交所产生的区域
- 整个表格至少需要3个标记来表示，分别是< table>,< tr>,< td>,其中< table>用于声明一个表格对象，< tr>用于声明一行，< td>用于声明一个单元格
- 基本语法：
<table> <tr> <td>单元格内容</td> ... </tr> ... </table><!DOCTYPE html> <html> <head> <title>表格基本结构</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <table> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </table> </body> </html>- 语法说明：
- 表格中的所有< tr>标记对都必须放到< table>标记对之间，一个< table>可以包含一个或多个< tr>,而< td>标记对需要放到< tr>标记对之间，一个< tr>可以包含一个或多个< td>
- 注意所有需要在表格中显示的内容包括嵌套表格都是放在单元格< td>标记对之间
1.表格标记< table>
- 使用< table>可以设置表格宽度，高度，边框线，对齐方式，背景颜色，背景图片，单元格间距和边距等表格属性
1.设置表格的边框
- 基本语法：
<table border="边框宽度" bordercolor="边框颜色"> ... </table><!DOCTYPE html> <html> <head> <title>设置表格边框</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <table border="3" bordercolor="lightblue"> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </table> </body> </html>- 语法说明：
- 默认情况下创建的表格没有边框，使用表格的border属性可以设置边框的粗细，显示边框时还可以通过bordercolor属性设置边框颜色，默认的边框颜色是黑色
- 表格边框的宽度值是一个数值，单位为像素，数值越大，边框越粗。当值为0时不显示边框
- 边框颜色可以使用英文颜色单词表示，也可以使用十六进制的颜色值
2.设置表格的宽度和高度
- 基本语法：
<table width="表格宽度" height="表格高度"></table><!DOCTYPE html> <html> <head> <title>表格基本结构</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <table border="3" bordercolor="lightblue" width="500" height="200"> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </table> </body> </html>- 语法说明：
- 默认情况下，创建的表格的宽度和高度将根据单元格中的内容自动调整
- 表格的高度和宽度既可以是像素值也可以是百分数，这个百分数是相对于表格的上一级对象的一个值
3.设置表格在窗口中的对齐方式
- 基本语法：
<table align="对齐方式"></table><!DOCTYPE html> <html> <head> <title>设置表格的对齐方式</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <table border="3" bordercolor="lightblue" width="600" height="200" align="center"> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </table> </body> </html>- 语法说明：
- 默认情况下，创建的表格在窗口中居左对齐，使用align属性可以修改表格的对齐方式
- 对齐方式有3种取值：left（居左对齐），center（居中对齐）right（居右对齐）
4.设置表格的背景颜色
- 基本语法：
<table bgcolor="背景颜色"></table><!DOCTYPE html> <html> <head> <title>设置表格的对齐方式</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <table border="3" bordercolor="#662343" width="600" height="200" align="center" bgcolor="#33AA20"> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </table> </body> </html>- 语法说明：
- 默认情况下，创建的表格的背景颜色是白色，可以通过bgcolor属性修改背景颜色为其他颜色
- 背景颜色既可以使用英文颜色单词表示，也可以使用十六进制的颜色值
5.设置表格的背景图片
- 基本语法：
<table background="背景图片路径"></table><!DOCTYPE html> <html> <head> <title>设置表格的对齐方式</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <table border="3" background="images/text1.jpg" bordercolor="#662343" width="600" height="200" align="center" bgcolor="#33AA20"> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </table> </body> </html>- 语法说明：
- 背景图片路径一般使用相对路径
6.设置单元格内容与单元格边框之间的边距
- 基本语法：
<table cellpadding="边距值"></table><!DOCTYPE html> <html> <head> <title>设置表格的对齐方式</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <table border="3" cellpadding="20" background="images/text1.jpg" bordercolor="#662343" width="600" height="200" align="center" bgcolor="#33AA20"> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </table> </body> </html>- 语法说明：
- 边距值的单位是像素，值越大，单元格内容和边框的间距越大
7…设置单元格与单元格之间的间距
- 基本语法：
<table cellspacing="间距值"></table><!DOCTYPE html> <html> <head> <title>设置表格的间距</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <table border="3" cellspacing="20" cellpadding="20" background="images/text1.jpg" bordercolor="#662343" width="600" height="200" align="center" bgcolor="#33AA20"> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </table> </body> </html>- 语法说明：
- 单元格和单元格之间默认情况下存在2个像素大小的间距
- 间距值的单位是像素，值越大，单元格之间的间距越大，默认是2个像素，设置为0即不存在间距
8.设置表格的标题
- 基本语法：
<caption>表格标题</caption><!DOCTYPE html> <html> <head> <title>设置表格的标题</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <table border="3" cellspacing="20" cellpadding="20" background="images/text1.jpg" bordercolor="#662343" width="600" height="200" align="center" bgcolor="#33AA20"> <caption>表格测试</caption> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </table> </body> </html>- 语法说明：
- 表格标题默认情况下在表格上面居中显示
2.< tr>标记
- 使用< table>可以从总体上设置表格属性，根据网页布局的需要，还可以单独对表格中的某一行和某个单元格进行属性设置
- 基本语法：
<tr height="行高" align="水平对齐方式" valign="垂直对齐方式" bordercolor="边框颜色值" bgcolor="背景颜色值"> ... </tr>
属性 描述 height 设置行高度，单位是px align 设置行中各单元格内容相对于单元格水平对齐方式，可取left，center和right，默认值是left（左对齐） valign 行中各单元格内容相对于单元格的垂直对齐方式，可取top，middle和bottom，默认值是middle（垂直居中对齐） bgcolor 设置行中单元格的背景颜色 bordercolor 设置行中各个单元格的边框颜色 <!DOCTYPE html> <html> <head> <title>设置表格行属性</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <table border="3" cellspacing="20" cellpadding="20" background="images/text1.jpg" bordercolor="#662343" width="600" height="200" align="center" bgcolor="#33AA20"> <caption>设置表格行属性</caption> <tr bgcolor="#6FC9D2" valign="bottom"> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr align="center" > <td>第二行第一列</td> <td>第二行第二列</td> </tr> <tr align="right" bordercolor="#FF0000"> <td>第三行第一列</td> <td>第三行第二列</td> </tr> </table> </body> </html>
3.< td>和< th>标记
扫一扫
962
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
