01【Web】基础-HTML(P1)

本系列文章，针对Web前端的相关知识进行了详细的介绍

文章目录

  • 01【Web】基础-HTML(P1)
  • Chapter01 HTML概述
    • 1. Internet起源
    • 2. HTML发展过程
    • 3. HTML文档结构
      • 3.1 组成部分
      • 3.2 文档类型声明
        • 3.2.1 头部第一行的定义
        • 3.2.2 头部第二行的定义
        • 3.2.3 头部第三行定义
    • 4. HTML编写注意事项
  • Chapter02 HTML各元素说明
    • 1. head
      • 1.1 title元素
      • 1.2 meta元素
    • 2. 文本元素
      • 2.1 标题标签
      • 2.2 文本修饰符
      • 2.3 特殊字符
    • 3. 文档排版元素
    • 4. 列表元素
      • 4.1 有序列表
      • 4.2 无序列表
      • 4.3 定义列表
    • 5. div与span
      • 5.1 语法格式
      • 5.2 span宽度失效处理
    • 6. 图片标签
    • 7. 超链接标签
      • 7.1 统一资源定位符
      • 7.2 超链接应用
        • 7.2.1 文本连接
        • 7.2.2 锚点连接
        • 7.2.2 图片链接
        • 7.2.4 图片热区链接
        • 7.2.5 其他超链接
    • 8. 表单及内部控件元素
      • 8.1 表单概述
      • 8.2 表单form与表单属性
        • 8.2.1 表单内容
        • 8.2.2 表单语法
        • 8.2.3 表单属性
      • 8.3 表单域
        • 8.3.1 通用属性
        • 8.3.2 input->text
        • 8.3.3 input->password
        • 8.3.4 input->radio;checkbox
        • 8.3.5 input->file
        • 8.3.6 textarea
        • 8.3.7 select->option
      • 8.4 表单按钮
      • 8.5 表单分组
  • Chapter03 表格与框架
    • 1.表格
      • 1.1 表格的组成
      • 1.2 表格的属性
      • 1.3 单元格 td (th)
      • 1.4 行标签 tr
      • 1.5 表格分组
        • 1.5.1 行分组
        • 1.5.2 列分组
      • 1.6 表格的嵌套
    • 2.框架集与框架
      • 2.1 框架集
      • 2.2 框架
      • 2.3 框架集的嵌套
      • 2.4 内联框架iframe
      • 2.5 框架之间的链接

Chapter01 HTML概述

1. Internet起源

  • 20世纪40年代左右，人们希望计算机设备之间互联，实现网络资源共享，但是受Web和Internet底层基础设施的限制，数据交换经常受困。
  • 1960年左右，美国军方ARPA计划启动，联合计算机公司和大学共同研制出ARPnet网络，主要用于军事研究，1969年投入使用，ARPnet成为现代网络诞生的标志。
  • 20世纪80年代左右，Internet几经周转，用户由军方变成了教育机构，于是ARPnet分裂成为军用的MILNET和民用的ARPnet。后来广域网和局域网的篷布发展对Internet的进一步发展起到重要作用

2. HTML发展过程

  • 超文本标记语言（Hyper Text Markup Language，HTML）时Internet上用来编写网页的主要语言，目前为止HTML已经从1.0发展到5.1.并在W3C(万维网联盟)组织的关注下继续不断完善
  • 2001年1月HTML 4.01版本中增加了更加严格的规则，形成了著名的可扩展超文本标记语言(Extensible Hyper Text Markup Language，XHTML)
  • 2010年，HTML5.0版本以其极佳的兼容性和市场的受众程度高而广受新项目的追捧，目前已经是最好的选择（其中HTML5.1于2014年10月推出，距今2022年已8年左右）

3. HTML文档结构

3.1 组成部分

  • HTML的基本组成单位是元素（或者类比其为C#中的控件，Java的Gui），语法结构即：<标签> 内容</标签>，如< div>一个简单页面< /div>
  • HTML文档结构由< html>、< head>、< body>三部分组成
<html>：<!-- HTML文档以<html>标签开始,以</html>标签结束，文档中的所有内容均在此对标签内部 --> <head>：<!-- 放置页面的头部信息：标题,元信息,CSS样式，JavaScript脚本元素等 --><body>：<!-- 网页的正文，是用户在网页窗口中看到信息，图片、表格、段落、视频等内容 -->

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1-01一个简单的HTML界面</title>
</head>
<body><h2>1-1HTML文档结构</h2>网页正文部分<br><img src="./img/logo.png"><img src="./img/hotpic.png"><img><br><table border="" cellspacing="" cellpadding=""><tr><th>Header</th></tr><tr><th>Hello world!</th></tr></table>
</body>
</html>

3.2 文档类型声明

3.2.1 头部第一行的定义

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • 上面的代码被称作DOCTYPE声明，document type (文档类型)的简写，用来说明所使用的xthml或者html是什么版本
  • DTD叫做文档类型，内部包含了文档规则，浏览器根据DTD解释页面标识并加以展示
  • 要建立符合标准的页面，DOCTYOPE是必不可少的关键组成部分，是决定CSS等内容是否生效的协议，需要对xhtml进行正确的定义

3.2.2 头部第二行的定义

<html xmlns="http://www.w3.org/1999/xhtml">
  • xmlns是XHTML namespace的缩写，叫做命名空间。为了解决xmln允许自己定义的标识和其他人定义的标识名称相同但含义不同而带来的冲突，
  • 实现了这一技术理念，即xmln，它采用命名空间，允许用户通过一个网址来识别自己的标识

3.2.3 头部第三行定义

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  • 为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言，我们一般使用gb2312（简体中文）或utf-8，
  • 制作多国语言页面时也可能用到Unicode、ISO-8859-1等

补充：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml4/DTD/xhtml1-transitional.dtd">
  • 上述定义表示采用HTML4.01的过度版本。同时XHTML是区分大小写的所以html要小写
  • 在HTML5中，已经不再需要可以声明版本了，因为W3C希望一份html代码使用所有的HTML版本，代码更加简洁，通用即：
<!DOCTYPE html>

4. HTML编写注意事项

大部分HTML标签是由起始和结束标签两部分构成，如:< p>…< /p>，空标签 是一类特殊的标签，即不包含任何文本也不包含任何子标签,有:'< br/> < hr/> < img />

编写HTML的注意事项：

  • 大小写：HTML不区分大小写，XHTML区分大小写，HTML5又恢复了大小写的不区分，在设计页面中应遵守规范，并建议使用小写提高代码的可读性
  • HTML标签的属性与属性值：标签具有一个或多个属性，属性与其属性值成对出现，如
<img src="walk.jpg" Height="50px" />

  • 标签属性：

    • 理论上简单属性的 属性值 可以不带引号，也能正常显示，但不带引号使用 JS 编写脚本时会出问题；XHTML 规定必须使用引号。属性值最好用单或双引号引起来。

    • **属性值必定要区分大小写，**试想WALK.jpg和walk.jpg指向的图片并不一定是一幅图；因为Linux上的Web服务器对文件名区分大小写，而Windows中不区分大小写。

  • HTML的空格：

    • HTML 文档页面中加多少空格制表符都只显示一个空格。需采用 特殊字符 或者全角方式输入中文空格的办法进行处理。

  • HTML中的注释：

<!--  注释内容   -->
  • 标签可以嵌套使用，但不能出现交叉

Chapter02 HTML各元素说明

1. head

1.1 title元素

设计页面是应为每个页面添加标题，标题要与页面内容具有相关性，且要尽可能简洁

1.2 meta元素

用于向客户传递信息和命令，而不是现实内容，一个head内可以包含多个meta。该标签常用的属性特征描述如下 （Hbulider meta 快捷键 输入 metanocache 回车）

  • name
属性值 描述
keywords； 定义页面的关键词，词之间用逗号隔开
description； 定义页面描述的内容，描述过长会显示成…
robots； 用来告诉搜索引擎页面是否允许索引与查询。
content的参数有all,none,index,noindex,follow,nofollow，默认all
author 标注网页作者
  • http-equiv
属性值 描述
content-type； 设定页面的字符集，
refresh； 自动刷新并转到新页面. 使用content属性提供刷新或跳转的时间以及跳转的地址
set-cookie； 设置页面缓存过期时间。如果网页过期， 那么存盘上的cookie将被删除
expires 用于设定网页的到期时间。如果网页到期， 必须从服务器上从新加载内容
  • context
属性值 描述
Text； 文本描述，一般用于描述name或http-equiv属性的内容 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta http-equiv="refresh" content="5; url=http:101.132.152.252"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="keywords" content="漫步时代广场,时尚，购物，影视，餐饮"><meta name="description" content="游客漫步时尚广场，可以漫步湖畔步行街，可以在国际名品点、时尚金品店徜徉，在电影区感受视听震撼，在咖啡厅，酒吧一条街放松身心，在世界特色餐厅享受到美味"><meta name="author" content="CloudWhales"><meta name="robots" content="all"><title>漫步时尚广场 E &amp;S</title>
</head>
<body><h2>1-03 meta标签的使用</h2>meta标签，5秒进入cloudWhales个人空间
</body>
</html>

2. 文本元素

2.1 标题标签

< h1> 、、< h6>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1-4标题的演示</title>
</head>
<body><h1>1级标题 - CloudWhales Bolg</h1><h2>2级标题 - Walking Fashion</h1><h3>3级标题 - 购物广场</h1><h4>4级标题 - 男装区</h1><h5>5级标题 - 上衣区</h1><h6>6级标题 - 衬衣</h1>
</body>
</html>

2.2 文本修饰符

标签 描述
< font>…< /font> 设置文本字体样式
< b>…< /b>；< strong>…< /strong> 以加粗方式显示内容
< i>…< /i> 斜体方式现实文本内容
< s>…< /s> 为文本内容添加一条删除线
< u>…< /u> 为文本内容添加一条下划线
< sup>…< /sup> 文本内容以上标形式显示
< sub>…< /sub> 文本内容以下标形式显示
< big>…< /big> 比周边字体大一个字体尺寸
< small>…< /small> 比周边字体小一个字体尺寸

2.3 特殊字符

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1-05文本修饰标签与特殊字符</title><link rel="stylesheet" href="./css/democommon.css">
</head><body><h2>1-05-1文本修饰标签与特殊字符</h2><div class='panel_bg'><div class="panel"><h4>1-05-1 font标签修饰字体样式</h4><font face="隶书" size="10" color="blue"> 通过font标签设置字体样式</font><font face="楷书" size="+3" color="#FF0000"> 通过font标签设置字体样式</font><font face="黑体" size="-1" color="gray"> 通过font标签设置字体样式</font><h4>1-05-1 dbo 文本方向标签</h4><bdo dir="ltr">123456789</bdo> <br><bdo dir="rtl">123456789</bdo><h4>1-05-2 文本修饰符</h4>2012年08月25号，<b>我从家乡安徽淮北</b>到<big>河北廊坊</big>防灾科技学院报道，大学的招生<i>办公室</i>工作人员，组织我们进行学籍建立，以及自行决定是否进行<small>校园集体户口</small>的办理。随着事件的推移，2016年从大学毕业，本来规画了一条人生 V<sub>1.0</sub> 版本的学术道路最后未能如愿以偿，走向了一天V<sup>2.0</sup>.这样的选择虽然是不得已，但也是 <u>无怨无悔的付出和努力</u>。人都没有前后眼，面对未来不能想出来，只能走出来，<s>迷茫与内耗只会浪费光阴</s></div><div class="panel"><h4>1-05-3 特殊字符</h4><table width="600" border="1" rules="all"><tr><th>特殊字符</th><th>写法</th><th>特殊字符</th><th>写法</th></tr><tr align="center"><td>左箭头（&larr;）</td><td>& larr ; </td><td>右箭头（&rarr;）</td><td>& rarr ; </td></tr><tr align="center"><td>上箭头（&uarr;）</td><td>& uarr ; </td><td>下箭头（&darr;）</td><td>& darr ; </td></tr><tr align="center"><td>左右箭头（&harr;）</td><td>& harr ; </td><td>↙左下箭头（&crarr;）</td><td>& ararr ; </td></tr><tr align="center"><td>左双箭头（&lArr;）</td><td>& lArr ; </td><td>右双箭头（&rArr;）</td><td>& rArr ; </td></tr><tr align="center"><td>上双箭头（&uArr;）</td><td>& uArr ; </td><td>下双箭头（&dArr;）</td><td>& dArr ; </td></tr><tr align="center"><td>大于号（&lt;）</td><td>& lt ; </td><td>小于号（&gt;）</td><td>& gt ; </td></tr><tr align="center"><td>小于等于（&le;）</td><td>& le ; </td><td>大于等于（&ge;）</td><td>& ge ; </td></tr><tr align="center"><td>交集（&cap;）</td><td>& cap ; </td><td>并集（&cup;）</td><td>& cup ; </td></tr><tr align="center"><td>空格(&nbsp;)</td><td>& nbsp ; </td><td>&号（&amp;）</td><td>& amp ; </td></tr><tr align="center"><td>双引号（&quot;）</td><td>& quot ; </td><td>版权（&copy;）</td><td>& copy ; </td></tr><tr align="center"><td>商标（&trade;）</td><td>& trade ; </td><td>注册商标（&reg;）</td><td>& reg ; </td></tr><tr><td>1/4 分数（&frac14;）</td><td>& frac14 ;</td><td>1/2 分数（&frac12;）</td><td>& frac12 ;</td></tr></table></div></div>
</body>
</html>

3. 文档排版元素

  • 段落标签 < p>< /p>

  • 换行标签 < br/>

    该 标签只是换行功能，而

    标签会在段落之间形成一定的距离

  • 水平线标签< hr/>

    该标签 可以通过size、color、width、noshade和align指定横线的高度、颜色、宽度、是否阴影、对齐方式等

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1-06文档排版标签-p|br|hr</title><link rel="stylesheet" href="./css/democommon.css">
</head><body><h2>1-06-1 文档排版标签</h2><div class="panel_bg"><div class="panel"><h4>1-06-1 段落p标签</h4><p>经常有刚入职的同学搞不清设计师和别的职位如产品经理,在工作内容上有什么区别</p><p>"技能"指的是设计师掌握了项目中其他角色不具备的能力</p><p>设计师的"定位",是随着用户体验受重视而发展起来的.互联网产品最重要的特点是免费</p><h4>1-06-2 换行br标签</h4><p>经常有刚入职的同学搞不清楚设计师和别的职位如产品经理,在工作内容上有什么区别<br>"技能"指的是设计师掌握了项中其他角色不具备的能力</p><p>设计师的定位,是随着用户体验的重视而发展起来的,互联网产品最重要的特点是免费</p><h4>1-06-3 横线hr标签</h4><hr size="3" noshade color="blue" width="400px" align="left"><p>经常有新入职的同学搞不清楚设计师和别的职位如产品经理,在工作内容上有什么区别<br>"技能"指的是设计师掌握了项目中其他角色不具备的能力</p><p>设计师的定位,是随着用户体验的重视而发展起来的,互联网产品最重要的特点是免费....</p></div></div>
</body>
</html>

4. 列表元素

4.1 有序列表

  • type属性取值
取值 前缀显示 取值 前缀显示
1 阿拉伯数字
A 大写字母 a 小写字母
I 大写罗马数字 i 小写罗马数字
  • start 属性取值
“数字” 起始编号

4.2 无序列表

  • type属性
取值 前缀显示 disc 点状
sequare 方形 circle 圆形

4.3 定义列表

<dl><dt>….</dt><dd> ….</dd></dl> <!-- 列表中的每个项目与描述配对显示。-->

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1-09列表标签演示</title><link rel="stylesheet" href="./css/democommon.css">
</head>
<body><h2>1-09 列表标签演示</h2><div class="panel_bg"><div class="panel"><h4>1-09-1 有序列表</h4><ol type="A" start="3"><li>购物区</li><li>男装</li><li>女装</li><li>童装</li><li>休闲装</li><li>运动装</li></ol></div><div class="panel"><h4>1-09-1 无序列表</h4><ul type="disc"><li>购物区</li><li>男装</li><li>女装</li><li>童装</li><li>休闲装</li><li>运动装</li></ul></div><div class="panel"><h4>1-09-1 定义列表</h4><dl><!-- 第一项开始 --><dt>购物区</dt><dd>近年来随着经济社会和现代物流的发展,带动了电子商务的快速发展....</dd><!-- 第二项开始 --><dt>影视区</dt><dd>能够在线收看高清影视剧,体育直播,游戏竞技视频,动漫视频,综艺视频和财经资讯,视频播放流畅完全免费,是网民喜爱的休闲娱乐区</dd><!-- 第三项开始 --><dt>餐饮区</dt><dd>通过互联网消费者可以及时了解餐厅运营，在线点餐，优惠套餐等方式进行网络销售直播，便利充分地实现餐厅服务价值交换</dd></dl></div></div>
</body>
</html>

5. div与span

5.1 语法格式

div用来表达一个逻辑区块，属于块级元素。通过div标签将网页中的某一特定区域用边框围起来，并赋予指定的样式。语法如下：

span标签属于行内元素，用来选择特定文本，以便赋予特殊的样式，当句子或段落中某一部分需要分组时就可以用span标签。语法如下：

常用的是属性

属性名 属性值与描述
style； 多个属性的集合，用于设置div元素的行内样式
align； left 、right、center、justify
class； 首先设值在CSS样式表种，之后再通过标签class属性指定 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1-13div和span标签</title></head>
<body><h2>1-13-01 div的使用</h2><p>div的语法定义</p><code>&lt;div class="类选择器名称" style="块元素样式" align="对齐方式" &gt;<br>&nbsp; &nbsp;内容部分<br>&nbsp;&nbsp;... <br>&lt;/div &gt;</code><div style="border:2px #F00 solid;"><h3>购物车</h3>近年来，随着经济社会的和现代物流的快速发展，带动了<span style="color: #30F;font-weight: bold; font-style: italic;">电子商务<span>的快速发展....</div><div style="border:2px #F00 dotted;"><h3>影视区</h3>能够<span style="font-weight: bold; font-style: italic; text-decoration: underline;">在线收看</span>高清电影电视剧、体育直播、游戏竞技视频、动漫视频、综艺时评、财经资讯。视频播放流畅完全免费，是网民喜爱的休闲娱乐区</div><h2>1-13-02 span的使用</h2><p>span的语法定义</p><code>&lt;span class="类选择器名称" style="块元素样式" align="对齐方式" &gt;<br>&nbsp; &nbsp;内容部分<br>&nbsp;&nbsp;... <br>&lt;/span &gt;</code></body>
</html>

5.2 span宽度失效处理

参阅资料

  • 通过查阅CSS2标准中关于width的定义发现，原来CSS中的width属性并不总是有效的，如果对象是inline对象，width属性就会被忽略。Firefox和IE 实际上是遵循了标准才出现宽度失效的问题。

  • 修改span为block类型并设置float不是完美的解决方案。

    • 在span的CSS中增加display属性，将span设置为block类型的Element，这样宽度的确有效了，不过也把前后文字隔在不同行里面。这样其实span就完全变成了div。
    • 有人建议再增加一个CSS属性float，这样的确在某种条件下能解决问题。比如当下例子中。如果span前面没有文字，那的确是可行的。但是如果有，前后文字就会连在一起，而span跑到了第二行。

  • 再查阅新的标准，在CSS2.1标准草案中display的定义中增加了一个叫 inline-block 的属性值，针对的恰好是我们面对的这种情形。该属性值在各种浏览器的中的兼容情况如下

    • Firefox 的使用方案：

      • 通过display的文档了解到，inline-block在未来的Firefox 3中会实现。
      • 通过Mozllia扩展属性参考了解到，在Firefox 3以前的版本，如在Firefox 2中，可以用**-moz-inline-box**达到同样的效果。
    • IE的使用方案：
      • 通过MSDN中的display文档了解到，inline-block已经实现。实际测试发现IE 6.0以后都没问题。
        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sIMvuG8o-1679665915522)(#pic_center)]

6. 图片标签

语法：< img src=“url” alt=“” />

属性名 描述
src 图像的地址，可以是相对或绝对地址
alt 图像的文本描述；浏览器无法显示图像时，该文本作为图像的替代信息；描述文本可以帮助浏览器更好的对页面索引
height 可以是固定值或百分比
width 可以是固定值或百分比
align 图像的对齐方式：top、bottom、middle、left、right
border 指定图像的边框 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1-14图片标签的使用</title>
</head>
<body><h2>1-14 图片标签的使用</h2> <img src="./img/logo.png" alt="青软实训logo"><br><img src="img/hotpic.png" alt="青软实训logo"><br><img src="img/cloudwhales.png" alt="青软实训logo" width="245"><br><img src="img/cloudwhales.png" border="2" width="30%"><br>
</body>
</html>

7. 超链接标签

7.1 统一资源定位符

  • URL用于指定Web资源所在的位置，如同在网络上的门牌号。URL是Internet上标准的资源地址，又称为网络地址或网址。
  • URL包含3个关键部分：协议，主机地址和文件路径。

    • 协议：

      • 网页通常基于HTTP超文本传输协议传递信息，对应网址基本使用http://
      • 安全性要求高的网站使用https://
      • 文件上传下载时使用ftp://前缀
    • 主机地址一般是网站的域名，如www.itshixun.com;也可以是IP地址，如115.239.210.27
    • 文件路径与网站的目录结果相对应。通过文件路径可以找到页面所需的资源。
  • 文件路径的绝对路径和绝对路径
    • 绝对路径：指一个完整的路径。在Internet中，绝对路径又称绝对URL，是唯一的地址。
    • 相对路径:
      • 相同目录：在index.html页面中引用同一目录下文件可以直接访问，如top.jpg
      • 子目录：在站点FShopping中，images是其子目录，index.html引用时需写成 images/top.ipg；每增加一级子目录均要添加一层文件名和"+",如chapter01/branch/subpage.jpg
      • 父目录：访问父目录中的文件时 使用 “…/”,每增加一级父目录均要添加一层 …/…/images/top.jpg
      • 根目录：根目录从"/"开始，如站点下的chapter01和images下的文件使用，/chapter01/branch/subpage.jpg;/images/top.jpg

7.2 超链接应用

超链接可以将互联网上的各种资源相互连接。当浏览者单机链接时，就可以直接转向对应的网页、图片、文件或者邮件箱等资源。语法：

7.2.1 文本连接

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1-15 文本超链接</title></head>
<body><h2>1-15 文本超链接的使用</h2><p>超链接语法<br>&lt; a href="url" name="" title="" target="" &gt;  &lt;/a&gt; </p><br><a href="./1-01DocumentSructure.html" name="第一个的页面name" title="第一个页面">第一个页面</a> <br><a href="./1-09olDemo.html" title="列表页面">列表页面</a> <br><a href="http://www.baidu.com"></a> <br>
</body>
</html>

7.2.2 锚点连接

通过 href="# id " 链接到指定id所在的位置

分为同一页面的锚点链接和跨页面的锚点链接。两者实现方法相同，仅在链接的url处有差异。如下：

  • 在锚点目标位置处，使用a标签创建锚点标记，此时必须附带 id（推荐使用）或者name（旧版使用）属性
<a id="myanchor">这位是我创建的锚点位置</a>

  • 在链接点击触发处：

    • 相同页面（内部锚点链接）

      <a href="#myanchor">点击到达目标锚点</a>

    • 跨页面（外部锚点链接）

      <a href="1-16anchorLinkDemo.html**#**myanchor">点击到达锚点位置</a>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1-16 内部锚点的使用</title>
</head>
<body><h2>1-16 内部锚点的使用</h2><ul><li><a href="#myanchor">师资力量</a></li><li><a href="#myanchor1">学科建设</a></li><li><a href="#myanchor2">建设成果</a></li><li><a href="#myanchor3">学术资源</a></li></ul><h2 id="myanchor">师资力量</h2><p>截止2021年2月，学校教师队伍中具有硕士、博士学位的教师占专任教师总数的89.4%， <br>高级职称教师占专任教师总数的43.7%。学院拥有一批包括享受政府特殊津贴专家、 <br>全国地震系统先进工作者、省级有突出贡献的中青年专家、省级重点学科带头人、 <br>省级优秀教师等在内的专家和教授。同时，学院作为监测预报、震灾预防和紧急救援培训基地， <br>与中国地震局各研究所及全国地震台站对口共建，实现了优势互补、资源共享， <br>引进了包括汶川地震灾害损失评估首席专家袁一凡在内的10余名专家教授到校任教， <br>聘请了地震系统5位院士为学院顾问，17位研究员、教授为学院客座教授。 <br></p><h2 id="myanchor1">学科建设</h2><p>截至2018年4月，该校建有省部级重点建设实验室（中国地震局防震减灾规划与地震应急救援重点实验室）， <br>与危机响应与管理信息系统国际研究协会签署合作共建灾害信息与应急管理系统国际合作实验室。 <br>建有高教研究所、综合减灾研究所等研究机构</p><h2 id="myanchor2">建设成果</h2><p>截至2018年4月，该校承担了国家自然科学基金、国家社会科学基金、 <br>国家科技支撑计划和科技攻关计划项目、“863”计划课题、国家公益性行业科研专项、 <br>地震科技星火计划项目等多项高水平应用研发项目，取得了可喜的成果 <br>（包括国家科技进步奖二等奖、防震减灾科技成果奖等）。 <br>2013年，该校共获得各类科研项目85项，其中国家自然科学基金面上项目1项、国家自然科学基金青年项目2项、 <br>国家社会科学基金青年项目1项、中国地震局教师科研基金21项、中央高校基本科研业务费青年教师资助计划26项、 <br>河北省社会科学基金项目1项、中国地震局政策法规研究课题8项、河北省教育厅高等学校科学研究计划项目（科技类）5项、 <br>河北省教育厅高等学校科学研究计划项目（人文类）8项、廊坊市科学技术研究与发展计划自筹经费项目2项。 <br></p><h2 id="myanchor3">学术资源</h2><p>截至2019年底，图书馆纸介藏书达97万余册，藏书以地球科学、工业技术、自然科学、 <br>文化科学教育、经济、社会科学类为主，同时还适当采集哲学、心理学、政治法律、文学、 <br>艺术等多种学科类文献。2020年，图书馆订阅期刊1688种、报纸102种。 <br>图书馆购置了“中国知网”“维普”“EBSCO” “汇雅书世界”“库克数字音乐图书馆” <br>“新东方多媒体学习库”“台湾学术文献数据库”等30余个电子资源数据库， <br>包括92万种中外文电子图书、12000余种电子期刊，560余万篇博硕士论文、450万篇会议论文。 <br>图书馆自建了长达4000小时的视频资源数据库并投入使用。 <br></p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1-16 外部锚点的使用</title></head>
<body><h2>1-16 锚点的使用</h2><a href="./1-16linkanchor.html#myanchor">外部锚点</a>
</body>
</html>

7.2.2 图片链接

  • 图片链接：只需将< img />标签放到< a> < /a>标签内即可
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1-17 图片超链接</title></head>
<body><h2>1-17图片超链接</h2><a href="http://101.132.152.252"><img src="img/cloudwhales.png" alt="CloudWhales"></a>
</body>
</html>

7.2.4 图片热区链接

  • 图片热区链接 < map> 与< img> 相结合

  • 热区图片链接相对于图片链接和锚点链接相对于文本链接有异曲同工之效，实现方法如下

    • 通过< map>标签定义一个客户端图像映射（image-map）map可以包含一个或多个area区域，每个区域拥有一个独立的链接
    • 将img标签usemap属性与map标签的name属性相关联，实现图片与映射之间的联系
<body><h2>1-18 图片热区链接示例</h2><map name="myMap"><area shape="circle" coords="15,15,30" href="http://www.baidu.com" alt="baidu"><area shape="rect" coords="32,8,61,30" href="http://101.132.152.252" alt="CloudWhales"><area shape="ploy" coords="64,30,93,8,63,8" href="https://github.com/ChuanmingXie" alt="ChuangmingXie"></map><img src="img/logo.png" usemap="#myMap" border="0" alt="">
</body>

7.2.5 其他超链接

  • 空链接：< a href=“#”>空链接
  • Email链接：< a href=“mailto:chuanmingxie@outlook.com”>联系我们
  • JavaScript链接：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1-19其他链接- 空链接|Email链接|JS链接|</title>
</head><body><h2>1-19-1 空链接</h2><a href="#">空链接</a><h2>1-19-2 Email链接</h2><a href="mailto:chuangmingxie@outlook.com">联系我们</a><br><a href="tel:+86-17356153617">电话</a><br><address>公关路238号</address><h2>1-19-3 JS弹窗链接</h2><a href="JavaScript:alert('你好,欢迎来到Web前端设计课程')">JavaScript链接 弹窗提示</a><br><a href="JavaScript:void(0);" onclick="alert('你好,欢迎来到Web前端设计课程')">JavaScript链接 弹窗提示</a>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AGZ0ulRw-1679666200055)(#pic_center)]

8. 表单及内部控件元素

8.1 表单概述

  • 随着Internet技术的发展，用户对网络的使用需求不仅局限于浏览服务器上的内容，而且还希望将用户的信息发送给服务器实现数据交互。
  • Form表单时HTML的一个重要组成部分，负责采集和提交用户输入的数据。表单主要分为表单标签和表单控件两大类。表单控件又分为表单域和按钮两个部分，常见的表单域包括文本框、密码框、多行文本框、单选按钮、复选框、下拉框等。
  • 在交互界面，用户在表单域录入数据后，可以通过表单的特殊控件将数据传递给服务器端，由服务器端接收表单数据并进行处理

8.2 表单form与表单属性

8.2.1 表单内容

  • 表单标签是包含表单元素的区域，可包含一些表单控件，还可以包含一些HTML标签(如：表格、段落和标题)。
  • 一个页面可以拥有一个或多个表单标签，标签之间相互独立，不能嵌套。
  • 一个页面可以包含多个表单标签，但用户向服务器发送数据时只能提交一个表单中的数据；如果同时提交多个表单，则必须使用JS的异步交互方式来实现

8.2.2 表单语法

8.2.3 表单属性

属性 描述
action； 用于指定服务端用来处理表单程序的URL地址，说明，当提交表单时，该向何处发送数据
method； 规定向服务器端发送数据采用的方式，取值可以为post、get
id； 设置表单对象的唯一标识符
name； 设置表单对象的名称
enctype 表单数据内容类型，说明在发送表单数据之前如何对其进行编码，取值可以为
accept-charset 服务器可处理的表单数据字符集
onreset； 重置表单数据之前，执行其指定的JS脚本程序
onsubmit； 向服务器提交数据前执行的JS脚本
accept； 服务器可以处理的内容类型列表，用逗号隔开，主流服务器和H5不再支持
target； 不建议使用，打开处理URL的目标位置。H5中使用formtarget替代

  • id和name属性：

    • 唯一标识方便CSS或JavaScript引用，早期name用的多，现在在样式方面以id代替。但对于后端开发人员来说仍然需要关注name

  • action 属性

  • method 属性

    • post传值

      • 将数据隐藏在HTTP的数据流中进行传输，请求数据不会出现在地址栏中，安全性比get方式要高，并且对数据长度没有限制
      • post方式请求的数据不会被缓存，不会在浏览器的历史记录中保留，不能被收藏为书签，单击后退或刷新按钮时，数据会被重复提交
      • post数据封装

  • get传值

    • 将数据作为URL的一部分发送给服务器。URL有地址部分和数据部分构成，两者用"?“问号隔开，数据以"名称=值"的方式成对，数据之间通过”&"符号分割。
    • 请求的数据会出现在URL中，因此安全性比较低；而URL地址栏长度有限，最长不能超过255分字符
    • get方式的请求数据会被缓存，能够保留在浏览器历史记录中，可作为书签被收藏
  • target

    • 指定将数据处理结果显示在哪个框架或浏览器之中。
    • 在H4.01中不建议使用此属性，XHTML1.0不支持，在H5中推荐使用formtarget
  • enctype
    • 在表单数据提交之前，需要通过enctype属性说明表单中数据的编码方式。目前支持三种
数性值 描述
默认编码方式，发送至服务器之前按Unicode编码。遇到空格变成加号 +
其他特殊字符将转换为ASCII码格式(即%XX，由百分号和十六进制数字构成）
enctype=“mulitpart/form-data” 常用于表单中含有文件上传控件的情况，部队字符编码
enctype=“text/plain” 遇到空格变加号(+)，不对特殊字符进行编码

8.3 表单域

  • 除对行文本框（< textarea>）和列表选择框(< select>)外，大部分表单域使用< input>标签来创建。各表单域的语法如下：

各控件属性

8.3.1 通用属性

通用属性名 说明
id 设置当前控件的唯一id.用于界面设计时，CSS和JS的使用
name 设置当前控件的名称，像服务器发送数据时，
根据name属性，浏览器 获取对应表单域的值
value 设置表单域的初始值(网页初始时的默认值)
type 用于说明当前控件的类型，必须属性。可取
text、password、radio、checkbox、file、hidden、button、image
maxlength 设置输入文本框中的最大字符数
size 设置输入控件的宽度，单位是字符

8.3.2 input->text

8.3.3 input->password

特殊 说明
type 取值为password 。虽然密码框中显示的内容为掩码的方式，
但是数据传输过程仍然为明文的方式发送到服务器。为了确保安全应使用数据加密技术对数据进行处理

8.3.4 input->radio;checkbox

属性 作用
name； name属性相同的单选按钮为一组，单选框一组只有一个最终选项，复选框组内允许对选
checked； 指定该项默认被选中，可简写为checked

8.3.5 input->file

属性 作用
accept 用于指定文件选择窗口的文件类型过滤。使用file时，form表单的enctype应设置为multipart/orm-data

8.3.6 textarea

  • 用户输入的内容丰富时一般使用富文本插件：ckEditor、kindEditor
属性 作用
rows 用于指定多行文本框的行数
cols 用于指定多行文本框的宽度，单位是字符
wrap off： 默认值，文本域的内容太多时，会在文本域中添加滚动条
soft： 实现文本域内容自动换行，以改善用户的显示，但在传递至服务器时不改变用户实际的换行位置
hard：实现文本域内容的自动换行，并以显示的换行传递至服务器

8.3.7 select->option

  • select
select属性 作用
name 设置列表的名称
size 设置列表中可见选项的数目
multiple 指定列表可以选择多个选项；选择时需要安修Ctrl键选择多个
disabled 设置列表被禁止选择
  • option
option属性 作用
value 设置该项的值，如果选择该项就将值发送至服务器
selected 设置页面初始时，该项被选中
disabled 设置翻该选项被禁用，简记为disabled

8.4 表单按钮

  • 表单的按钮有多种功能，可以用于提交表单，也可以用于清除或重置表单，设置发送客户端脚本。按钮分为：

    • 提交按钮、重置按钮、图片按钮和普通按钮，
  • 可以通过< input>或者< button>标签创建按钮
    • button 标签创建的按钮其 正文内容 可以接受文本、视频、图片等
    • button标签到IE4和NetSpace6才被支持，
    • IE默认按钮类型是button，其他浏览器默认submit；IE浏览器提交button标签的文本内容，其他浏览器提交value值
type取值 作用
submit 创建一个能够提交表单的按钮
reset 创建一个能将表单重置为初始化状态的按钮
button 普通按钮，单机时可以出发JS脚本
image 创建一个图片按钮，单机时也可提交表单
其他属性 取值
name 用于指定按钮的名称
src 可选属性，当type为image时，用来指定图片的URL地址
value 用于指定按钮上显示的文字内容 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3-10 表单按钮</title>
</head>
<body><h2>3-10 表单按钮</h2><code>&lt;input type="button|submit|reset|image" value="" name="" src="" value=""&gt;</code><h3>3-10-1 input类型的按钮</h3><form action="http://101.132.152.252" method="post"><input type="button" value="普通按钮" name="btnNormal" onclick="alert('调用js脚本')"><input type="submit" value="提交按钮" name="btnSubmit"><input type="reset" value="重置按钮" name="btnReset"><input type="image" src="./img/cloudwhales.png" width="100"></form><h3>3-10-2 button类型的按钮</h3><form action="http://101.132.152.252" method="post"><button type="submit" value="提交内容">提交内容</button><button type="reset" value="重置内容">重置内容</button><button value="普通按钮">普通</button><button type="submit"><img src="./img/cloudwhales.png" width="100" alt=""></button></form>
</body>
</html>

8.5 表单分组

大型表单容易在视觉上产生混淆，通过< fieldset>和< legend>标签表单分组实现划分，语法：

 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3-12 表单域分组</title>
</head>
<body><h2>3-12 表单域分组</h2><form action="" method="post"><fieldset><legend>请选择个人爱好</legend><input type="checkbox" name="hobby" id="" value="music"> 音乐 <br><input type="checkbox" name="hobby" id="" value="music"> 音乐 <br><input type="checkbox" name="hobby" id="" value="music"> 音乐 <br></fieldset><fieldset><legend>请选择选修课程</legend><input type="checkbox" name="choice" id=""><input type="checkbox" name="choice" id=""><input type="checkbox" name="choice" id=""></fieldset></form>
</body>
</html>

Chapter03 表格与框架

1.表格

将数据有效组织，并以网格形式展现。除了用于组织数据还可以用于排版。

1.1 表格的组成

  • 表格元素主要由行、列、表头单元格、正文单元格、标题、表头行、正文行、表位行构成。

    • 表格的各组成部分均在< table>标签内
    • 单元格是表格**基本元素，**用< td>标签表示
    • 行时表格水平元素，使用< tr>标签表示
    • 一行可以由一个或多个单元格构成
  • 默认情况下表格的边框是隐藏的
<h2>2-01-1无属性表格-联系方式</h2><table><tr><th>姓名</th><th>部门</th><th>邮箱</th><th>电话</th></tr><tr><td>张三</td><td>市场部</td><td>zhangsan@163.com</td><td>13734723347</td></tr><tr><td>李四</td><td>研发部</td><td>lisi@163.com</td><td>13672584724</td></tr></table><br><h2>2-01-2有属性表格-联系方式</h2><table border="2" cellspacing="5" cellpadding="5" bgcolor="rgb(ff,ff,66)" align="right" width="400" height="100"><tr><th>姓名</th><th>部门</th><th>邮箱</th><th>电话</th></tr><tr><td>张三</td><td>市场部</td><td>zhangsan@163.com</td><td>13734723347</td></tr><tr><td>李四</td><td>研发部</td><td>lisi@163.com</td><td>13672584724</td></tr></table>

1.2 表格的属性

属性 取值 描述
align； left、center、right 设置单元格相对周边元素的对齐方式
bgcolor； Rgb(x,x,x,)、#xxxxxx、colorName 设置单元格背景颜色
border； 像素 设置单元格边框的宽度
cellpadding; 像素或百分比 设置单元格与其内容的距离
cellspacing； 像素或百分比 设置单元格之间的宽度
height; 像素或百分比 设置表格的高度
width; 像素或百分比 设置表格的宽度
rules; None、groups、rows、cols、all 设置表格中的表格线显示方式，默认all
  • frame的取值及效果
frame属性取值 显示效果
void 不显示边框
above 只显示顶部边框
below 只显示底部边框
hsides 显示顶部和底部
vsides 显示左右两边
lhs 只显示左侧
rhs 只显示右侧
box或border 显示表格的所有边框(不指定frame属性时默认)

1.3 单元格 td (th)

属性 描述
align； 设置单元格内容的水平对齐方式：left、center、right、justify、
valign； 设置单元格内容的垂直对齐方式：top、middle、bottom、baseline
rowspan； 设置单元格跨越的行数：指表格内某个单元格在水平方向向右的跨越单元格的列数
colspan； 设置单元格跨越的列数：指单元格在垂直方向向下所跨的行数
scope； 定义将表头数据与单元数据相关联的办法
width； 设置单元格的宽度
height； 设置单元格的高度
bgcolor； 设置单元格背景颜色

1.4 行标签 tr

属性 描述
align； 设置单元格内容的水平对齐方式：left、center、right、justify
valign； 设置单元格内容的垂直对齐方式：top、middle、bottom、baseline
bgcolor； 设置单元格背景颜色
bordercolor； 设置单元格的边框颜色（下面三种颜色同时设置时，本属性将被覆盖）
bordercolordark； 设置单元格内的左上边框颜色
bordercolorlight； 设置单元格内的右下边框颜色 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>2-04 列标签属性</title>
</head>
<body><h2>2-04-1 列标签属性</h2><table border="1" rules="all" width="400"><tr><th>编号</th><th>商品名</th><th>商品类型</th><th>市场价</th><th>进货价</th></tr><tr><td>电子产品1-1</td><td>Dell笔记本</td><td rowspan="3" align="right" valign="bottom" bacolor="#CCCCCC">电子产品</td><td>5399</td><td>4000</td></tr><tr><td>电子产品2-3</td><td>小米手机</td><td colspan="2">588</td></tr><tr><td>电子产品6-8</td><td>苹果电脑</td><td width="85" height="50">6999</td><td>5830</td></tr></table><br><h2>2-04-2 列标签属性-合并单元格</h2><table border="1" rules="all" width="400"><tr><td colspan="2">单元格占两列&nbsp;</td><!-- <td></td> --><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td rowspan="2">单元格占两行&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><!-- <td></td> --></tr></table>
</body>
</html>

1.5 表格分组

1.5.1 行分组

  • 使用< thead>、< tfoot>、< tbody>、< caption>对数据进行横向分组

    • thead定义表格头部
    • tfoot定义表格尾部，创建脚注部分
    • tbody定义表格主体
    • caption定义表格标题，显示在真个表格上方

  • 如果表格数据过长，无法在一版屏幕中显示，使用< thead>、< tfoot>、< tbody>分组可以使浏览器有能力支持独立的表头和表尾的表格正文滚动，当打印一个较长的表格时，表格的表头和表尾会被打印在包含表格数据的每一页中

  • 对于大型数据表而言，尽量将< tfoot>放在< tbody>之前，这样有利于浏览器在接受主体数据之前就能渲染表尾，有利于加快表格显示速度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>2-05 表格的行分组</title>
</head>
<body><h2>2-05 表格的行分组</h2><table border="1" rules="groups" width="400"><caption>企业员工薪水绩效表</caption><thead><tr><th>员工编号</th><th>员工岗位</th><th>基本工资</th><th>本月绩效</th></tr></thead><tfoot><tr><td></td><td></td><td>总计</td><td>10W</td></tr></tfoot><tbody><tr><td>YF0016</td><td>Java高级工程师</td><td>6000</td><td>3000</td></tr><tr><td>YF0017</td><td>Java程序员</td><td>6000</td><td>3000</td></tr></tbody><tbody><tr><td>YF0018</td><td>Web前端工程师</td><td>6000</td><td>3000</td></tr><tr><td>YF0019</td><td>软件测试</td><td>6000</td><td>3000</td></tr></tbody></table>
</body>
</html>

1.5.2 列分组

纵向分组又称列分组，在HTML中使用< colgroup/>标签。该标签将表格按列进行分组，colgroup 标签的属性如下

属性 描述
align； 设置单元格内容水平对齐方式：left、center、right、justify、
valign； 设置单元格内容垂直对齐方式：top、middle、bottom、baseline
span； 规定该列分组可以跨越的列个数，默认值为1
width； 设置列组合的宽度 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>2-06 表格的列分组</title>
</head>
<body><h2>2-06 表格的列分组</h2><table width="400" border="1" rules="all"><colgroup span="2" valign="bottom" align="left"></colgroup><colgroup style="background-color: #CCC;"></colgroup><tr height="100"><th>员工编号</th><th>员工岗位</th><th>基本工资</th><th>本月绩效</th></tr><tr><td>YF0016</td><td>Java高级工程师</td><td>6000</td><td>3000</td></tr><tr><td>YF0017</td><td>Java高级工程师</td><td>6000</td><td>3000</td></tr></table>
</body>
</html>

1.6 表格的嵌套

  • 页面排版比较复杂时，通常使用一个表格从整体上控制布局，内部细节也嵌套一个新的表格进行设计，防止在一个表格中引起列宽高的冲突
  • 多层嵌套时不利于搜索引擎对页面的检索，因此表格嵌套的层数不能过多，一般不要超过3-4层

2.框架集与框架

框架能够让浏览器窗口划分为多个独立的窗格，每个窗格包含一个独立的HTML页。它的出现可以让用户通过框架加载单个窗格的内容，而不需要加载整个窗口。相对于框架而言整个浏览器窗口对应的框架集合称为框架集（frameset）

2.1 框架集

  • HTML中使用框架集标签< frameset>来划分框架，使用属性rows和cols说明框架的行数和列数以及所占窗口的比例，语法如下：
  • 框架集属性包括行、列、边框、边框颜色、空白距离等属性
属性 描述
rows； 设置框架集中包含的行数，以及对应的高度
cols； 设置框架集中包含的列数，以及对应的宽度
frameborder； 设置框架集的边框是否显示，取值为1，0或yes，no，边框本身不能调整宽度
bordercolor； 设置框架集的边款颜色
framespacing； 框架与框架间的空白距离
  • 框架集的rows和cols 属性 及其 四种取值方式

    • 一个frameset可以包含多个frame框架窗口，rows和cols可以单独使用也可以一起使用。rows属性用于设置框架中包含的行数，cols属性用于设置框架中包含的列数，参数个数是两个或两个以时采用逗号分割
    • row和cols的取值
      • 以像素为单位的绝对值

        • 例如rows=“120,580,*”,说明三行高度分别为120像素，580像素，以及占据剩余空间
        • 而当rows="100,300,300"且窗口高度不为600时，则按1：3：2分配
      • 参照浏览器窗口的百分比
        • 同理，如rows=“20%,80%”,说明，两行分别为占据窗口的20%和80%
        • 而当，rows="30%,80%"即超过100%，则按比例分配
      • 行（或列）的相对宽度
        • 参照窗口的另一种方式是 rows=“1*,3*,2*”,说明三行按1：3：2分配
      • 混合度量尺寸
        • 优先级从高到底分别是：像素单位，百分比，相对宽度，通配符
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>2-07-2 框架集基本结构</title>
</head>
<!-- <body></body> --><frameset rows="40%,*,50%"><frame src="./2-01tableAttributeDemo.html" /><frame src="./2-03trAttributeDemo.html" /><frame src="./2-04tdAttributeDemo.html"/>
</frameset>
<noframes><body>该浏览器不支持框架集</body>
</noframes>
</html>

2.2 框架

  • 框架取值属性
属性 描述
name； 设置框架的名称，在设置超链接时用作框架的标记
src； 设置框架中显示的URL界面
frameborder； 设置框架边框是否显示
marginheight； 定义内容与框架山下边缘的高度
marginwidth； 定义内容与框架左右边缘的高度
scrolling； 设置框架是否显示滚动条
noresize； 设置框架不能调整大小取值只有noresize 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>2-08 框架属性</title>
</head>
<frameset><frame src="./2-04tdAttributeDemo.html" scrolling="yes" frameborder="yes" noresize="noresize" margin="40" marginheight="40" marginwidth="60" /><frame src="./2-05tr-groupDemo.html" /><frame src="./2-06td-groupDemo.html" />
</frameset>
<body></body>
</html>

2.3 框架集的嵌套

  • 与table一样，对于复杂的页面结构，需要通过嵌套框架集来实现。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>2-09 框架的嵌套</title>
</head>
<frameset rows="50,*,50"><frameset cols="1*,1*"><frame name="topFrame1" src="frameset/topframe.html" /><frame name="topFrame2" src="frameset/topframe.html" /></frameset><frameset cols="140,*,160"><frame name="leftFrame" src="frameset/leftframe.html" /><frame name="mainFrame" src="frameset/middleframe.html" /><frame name="rightFrame" src="frameset/rightframe.html" /></frameset><frame name="bottomFrame" src="frameset/middleframe.html" /><noframes><body>浏览器不支持框架</body></noframes>
</frameset>
</html>

2.4 内联框架iframe

  • 框架集虽然可以创建一个单独的滚动区域，但是由于框架集固有的行列设计，限制了布局的灵活性。而内联框架（行内框架）可以出现在页面的任何位置，比框架集更加灵活。语法如下：

    <iframe src="" name="" width="" height=""></iframe>
    属性 描述
    align； 设置iframe与周围文本的对齐方式，取值left、right、top、middle、bottom
    frameborder； 设置iframe是否显示边框，取值0 或 1
    marginheight； 顶部和底部的边距
    marginwidth； 左侧和右侧的边距
    height； 高度
    width； 设置iframe的宽度
    scrolling； 设置iframe中是否显示滚动条，取值yes、no、auto
    src； 设置iframe中显示的URL
    name； 设置iframe的名称 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>2-10 内联框架</title>
</head>
<body><h2>2-10 内联框架</h2>iframe一般用来包含别的页面，例如我们可以在自己的网页上加载别人网站的内容，为了更好的效果，可能需要iframe透明效果，那么就需要了解更多的iframe属性。<iframe src="http:/101.132.152.252" name="myFrame" frameborder="0" width="420" height="240" scrolling="yes" align="right"></iframe>不带边框的iframe因为能和晚饭也无缝地结合而是在不刷新页面的情况下更新页面的部分数据成为可能，    但iframe大小却不像层那样可以"伸缩自如",所以带来了使用上的麻烦...
</body>
</html>

2.5 框架之间的链接

通过 a标签 使用target属性指向框架名称，实现框架内对页面的直接链接

01【Web】基础-HTML相关推荐

  1. 【笔记】网易微专业-Web安全工程师-01.WEB基础知识

    课程概述: 本课是基础中的基础,通俗易懂的讲解了Web的本质和Web开发的基础知识.对于Web小白,建议从头开始抓紧学习:对于已经有一定Web基础知识的同学,建议快速的过一遍,夯实基础. 课程大纲: ...

  2. Web全栈~01.HTML基础元素

    Web基本笔记~01.HTML基础元素 一 : 标题 标题(Heading)是通过 < h1 >- < h6 > 标签进行定义的. < h1 > 定义最大的标题. ...

  3. Maven-学习笔记01【基础-Maven基本概念】

    Java后端 学习路线 笔记汇总表[黑马程序员] 黑马程序员(腾讯微云)Maven基础讲义.pdf Maven-学习笔记01[基础-Maven基本概念] Maven-学习笔记02[基础-Maven的安 ...

  4. Java Web基础

    目录 Java Web基础 HTML基础 HTML补充 CSS基础 CSS补充 JavaScript基础 JavaScript补充(例题) Java Web补充 Java Web基础 HTML基础 标 ...

  5. Exp8 web基础 20164323段钊阳

    网络对抗技术 20164323 Exp8 Web基础 回答问题 (1)什么是表单 在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以 ...

  6. C1认证之web基础知识及习题——我的学习笔记

    文章目录 目录 文章目录 前言​​​​​​​ Web基础 十四.语义化标签 知识点 习题 十五.表单标签 知识点 习题 十六.转义字符 知识点 习题 十七.Head头 知识点 习题 十八.CSS引入方 ...

  7. Nginx Web 基础入门

    目录 Nginx Web 基础入门 Nginx快速安装 两种方式部署Nginx 如何升级nginx或者添加功能 使用systemd管理nginx nginx相关配置文件 nginx的配置文件详解 虚拟 ...

  8. 01.Java基础语法

    目录 01.Java基础语法 一,环境搭建 1,Java体系与特点 2,Java跨平台原理 2.1 Java虚拟机(JVM) 2.2 垃圾回收器(GC) 2.3 Java SE组成概念图 2.4 JD ...

  9. 01: tornado基础篇

    目录:Tornado其他篇 01: tornado基础篇 02: tornado进阶篇 03: 自定义异步非阻塞tornado框架 04: 打开tornado源码剖析处理过程 目录: 1.1 Torn ...

  10. Web基础之Servlet+JDBC+JSP项目实战记录（一）

    Web基础之Servlet+JDBC+JSP项目实战记录(一) 一.项目说明: 通过前面的学习,我们已经对Servlet有了一定的了解:接下来我们要结合数据库和JSP技术一步一步完成一个小型的动态we ...

最新文章

  1. 并发测试神器，模拟一次超过 5 万的并发用户
  2. S60 V3版SDK的官方扩展插件
  3. 清华团队综述全面解读图神经网络理论方法与应用
  4. matlab生成wav文件并用python验证
  5. Vue的列表渲染指令
  6. 1026: [SCOI2009]windy数 （按位DP）
  7. setyear java_如何在Java中创建不可变类
  8. [SQL SERVER] 优化SQL Server 2000的设置
  9. 完美安装ubuntu
  10. javascript:访问iframe中的js函数
  11. 用命令行查看mysql,利用命令行查看Mysql数据库
  12. 少数民族预科计算机基础教材答案,少数民族预科高等数学(普通高等学校少数民族预科教材)...
  13. 定时器加状态转移图方式实现DS18B20
  14. win2008安装mysql8.0
  15. 求解立方根 java
  16. python建立数据库连接时出错_python连接数据库
  17. 9招教你防止电脑辐射
  18. ubuntu16.04外接显示器扩展屏幕设置
  19. usb扩展坞同时接键盘鼠标_一种带有扩展坞功能的一体式键鼠的制作方法
  20. mysql -- 基本操作

热门文章

  1. html实现折叠面板,js轻松实现折叠面板
  2. Mysql 解决 sum求和有多位小数
  3. 【方法】STM32F103C8单片机通过定时器DMA测量脉冲宽度，无需CPU干预（以DHT11传感器为例）
  4. ASM原理详解，以及使用附代码，AOP利器
  5. 软考之路--小桥流水人家
  6. win10虚拟内存怎么设置最好_win10系统如何设置虚拟内存，看这里！
  7. 幼儿园计算机维护人员放暑假,幼师有话说｜幼师假期改革了？取消寒暑假，实行“朝九晚五”？...
  8. Linux串口测试工具
  9. ArcGIS聚合容差修正两个shapefile 之间的数字化错误
  10. 360手机安全专家给出了八大安全防范建议