Html

Internet 互联网是一种系统架构，通过允许世界各地的各种计算机网络互连。

Internet 服务指的是为用户提供的互联

1. 远程登录服务(Telnet)

2. 文件传输服务(FTP)

3. 电子邮件服务(E-Mail)

4. 网络新闻服务(Usenet)

5. 名址服务(Finger、Whois、X.500、Netfind)

6. 文档查询索引服务(Archie、WAIS)

7. 信息浏览服务(Gopher、WWW)

8. 其它信息服务(Talk、IRC、MUD)

2. web 万维网

“万维网”（World Wide Web）www，也就是我们现在所熟知的 Web。万维网用链接的方法能非常方便地从互联网上的一个站点访问另一个站点，

从而主动地按需获取信息。万维网中每个站点都存放了许多文档（文件、多媒体文件、图片等），供互联网上的主机查阅。

3. 前端开发和 web

前端开发流程就是创建一个 web 页面或者一个 app 应用的过程，它涉及三种语言分别是 html、css、JavaScript。

三者的关系

网页前台分三个层次：内容层，样式层，行为层。

- 内容层用 HTML 表现

- 样式层用 CSS 规定

- 行为层用脚本 JavaScript 控制

4. 前端的历史

（1）前端⼯程的开端

（2）web1.0 时代

1993 年，美国国家超级电脑应用中心推出了一款叫做 Mosaic（马赛克）的浏览器，它最大的特点是第一次将图片直接嵌入到了网页里来。

1994 年，Mosaic 项目的核心成员马克·安德森离职并创办了 Netscape（网景）公司。navigator 浏览器不但体验更加友好，

而且速度比 Mosaic 还要快 10 倍，navigator 浏览器很快就超过 Mosaic 成为了第一大浏览器。

1994 年底，伯纳斯·李万创办了维⽹联盟（W3C）并担任万维⽹联盟的主席。标志着万维⽹进⼊了标准化发展的流程。

这个时候的⽹⻚是纯静态⽹⻚，以图⽚和⽂字为主，⽤户以浏览⽹⻚为主。

（3）第⼀次浏览器战争

1995 年，⽹景公司让⼯程师布兰登·艾奇开发⼀种可以嵌⼊⽹⻚的“胶⽔语⾔”，⽤来控制⽹⻚的交互⾏为。他花了仅仅 10 天时间就把语⾔设计了出来，取名叫做 LiveScript，不过后来⽹景想借⽤ Java 的名

⽓推⼴，于是把名字正式改成了 JavaScript。

1995 年 5 ⽉ 26 ⽇，⽐尔盖茨向微软所有员⼯发送了⼀份名为“互联⽹潮汐”的备忘录，从此，盖茨宣布

集中公司所有的⼒量进军互联⽹。微软直接购买 Mosaic 浏览器的原型代码，稍加修改后，并仿造

JavaScript 搞出了⼀个 JScript，嵌⼊到 Internet Explorer 1.0 浏览器中，随后 IE1.0 发布。

因为，IE 强⾏绑定到 window 系统使得市场占有率飙升，导致⽹景浏览器的市场占有率下降，⽹景还是率先将 JavaScript 作为草案，

提交给欧洲计算机制造商协会（ECMA），希望能将 JavaScript 做成⾏业的标准。虽然第⼀次浏览器⼤战 IE 取得了胜利，但⽹景的 JavaScript 标准则主导了 w3c 的官⽅标准。

（4）动态⻚⾯

以 php 为⾸的后端实现了动态交互和数据及时读取，促使了 web 的功能更加丰富。

（5）web2.0 时代

Ajax 的流⾏开启了 web2.0 时代，因为后端的数据更新需要通过刷新浏览器来完成，2004 年，⾕歌通过 ajax 利⽤ JavaScript ⽆需通过刷新就可以执⾏异步 http ⽹络请求。

（6）前端兼容框架

Firefox 和 Opera 浏览器⼀起对战 IE，因为不同浏览器不利于兼容开发，于是具有兼容性的前端 js 框架产⽣，他的代表是 jquery。

（7）第⼆次浏览器⼤战

2012 年，W3C 推出了⼀个新的编辑团队，负责创建 HTML 5.0 推荐标准。2014 年 w3c 正式发布

html5.0 标准。在 html5 新规范的指引下，各⼤浏览器⼚商为了⽀持 h5 不断的改进⾃⼰的浏览器，这时

⾕歌浏览器脱颖⽽出。

（8）Node.js问世

（9）前端 mv*架构的应⽤

随着代码交互的功能越多，代码的复杂度越来越⾼，⽤于后端的 mv*框架开始出现在前端部分。2010 年后相应的前端框架开始出现，这些框架是前端界⾯进化为 web APP。

（10）移动 web 应⽤

安卓和 ios 使得针对移动端的 app 进⼊了新的时代。

（11）⼤前端时代

前端技术系统的形成标志的⼤前端时代的到来。

5. 客户端和服务器端

（1）客户端——浏览器

（1）客户端

⽹⻚浏览器（web browser），常被简称为浏览器，是⼀种⽤于检索并展示万维⽹信息资源的应⽤程序。这些信息资源可为⽹⻚、图⽚、影⾳或其他内容，它们由统⼀资源标志符标志。

微软在 2021 年 5 ⽉发布消息，将于 2022 年 6 ⽉ 15 ⽇彻底结束 IE 浏览器的使命，让它由 Microsoft

Edge 取⽽代之。

（2）服务器端

6. 搜索引擎

搜索引擎指⾃动从因特⽹搜集信息，经过⼀定整理以后，提供给⽤户进⾏查询的系统。常⻅的搜索引擎有：⾕歌、百度、搜狗、必应、360 等。

四、HTML 概述

1. HTML 概念

（1）HTML 含义

HTML 的英文全称是 Hyper Text Markup Language，超文本标记·。

HTML 是构建页面的标记，它用于承载网站的内容，如：文本、图片、音频、视频等。

（2）HTML和网页

HTML 的标签和纯文本按规则的组成成为一个“网页”。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>这是⼀个⻚⾯</title>

</head>

<body>

<h1>这是⼀个简单的⻚⾯</h1>

<p>⻚⾯中是⼀个游戏《使命召唤》</p>

<h2>宣传海报</h2>

<img src="../1.jpg" alt="使命召唤宣传海报" width="600" />

<h2>宣传⽚</h2>

<video src=".使命召唤8-预告⽚.mp4"></video>

</body>

</html>

（3）HTML 的规则

- 文档结构规则

- 标签书写规则

- 属性书写规则

- 文件加载规则

- 标签嵌套规则

- HTML 注释规则

2.⽂档结构规则

`<!DOCTYPE html>`不是 html 语言标签，是文档声明，是指定了 web 浏览器关于页面使用哪个 html 版本进行编写指令，html 是 html5 的版本。

 

`<html></html>`整个文档的内容 lang 属性的意思是告诉浏览器文档语言，en 是英文内容，中文 zh。

 

`<head></head>`标签的作用和它里面的标签，描述用的标签，链接样式表等。

 

`<meta/>`标签是 head 部的一个辅助性标签。它并不会显示在页面上，可用于浏览器（如何显示内容或重新加载页面）、搜索引擎（SEO）、或其他 web 服务。其中`<meta charset="UTF-8">`网页制作所使用的字符集，就是网页使用何种文字以及语言。

 

`<title>文档标题</title>`文档标题，显示在浏览器标签栏中，搜索引擎会比较在意这个标签的内容，它会是搜索引擎判断的依据。

 

`<body></body>`标签的作用和主要承载标签，显示给用户的内容

3. 标签书写规则

- 标签名使用小写

- 双标签成对出现，建议关闭所有 HTML 元素

- 单标签在 html5 规范中可以省略`/`

（1）标签样式

<div>我是一个块级元素，我自己占一行</div>

<p>我也是一个块级元素，我自己占一行</p>

<span>我是一个内联元素，我不自占一行</span>

<i>我也是一个内联元素，我也不自占一行</i>

4. 属性书写规则

html 标签的属性可以配置元素或者以各种方式来调整元素的行为，进而满足用户所需的标准。

- 标记和属性用空格隔开，属性与属性值用`=`（等号）链接，属性值要写在""(双引号内),等号两侧尽量不用空格

- 使用小写属性名

- 一个标记可以没有属性也可以有多个不同属性，属性与属性之间不分先后顺,一个属性也可以有多个属性值

5. 文件加载规则

浏览器有专门的 html 解析器，浏览器是自上而下解析的。顺序加载，整个页面的标签。

6. 标签嵌套规则

- 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素

- 块级元素不能放在`<p>`里面,p 标签是段落标签。

- 有几个特殊的块级元素，它们内部只能包含内联元素，不能再包含块级元素 `h1、h2、h3、h4、h5、h6(标题)、p（段落）、dt（列表标题）`

- 空行和空格在页面上都代表一个空格的大小

- 缩进，标签缩进可以让结构（包裹嵌套关系）更加清晰，也是书写规范。

7. html 注释规则

8. HTML 字符实体

- 像“<”和“>”这类符号已经用来表示 HTML 标签，因此就不能直接当作文本中的符号来使用。

- 有些字符在 ASCII 字符集中没有定义，因此需要使用转义字符串来表示。

常用元素和属性

五、基础元素

1. 基础元素

所有需要显示在页面上的标签都需要写在`<body></body>`标签中

（1）标题标签

- h1~h6 标签，用于书写标题。

- `<h1>文本</h1>`标题标签是双标签，可以包裹文本

- 属于`块级元素`，在浏览器中自占一行的标签

- 浏览器自行渲染时标题标签和其他的标签保持一定的上下距离，并有自定义的加粗效果

- 级别是数字越小级别越大

重点注意：标题标签是双标签，并且是块级标签（自己独占一行） -->

原则上一个页面只能出现一个h1 标签所有的h标题标签内都不能包裹其它的块级元素，只能放内联（行内）元素

（2）段落标签

- `<p></p>`标签，用于书写段落或大段文字

- `<p>段落</p>`标题标签是双标签，可以包裹文本

- 属于`块级元素`，在浏览器中自占一行的标签

- 浏览器自行渲染时 p 标签和其他的标签保持一定的上下距离

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

（3）换行标签

- `<br/>`标签，用于在段落中将文字换行。

- `<br/>`标签单标签，属于`块级元素`自占一行的标签,在 html5 标准中可以省略`/`,直接写`<br>`

- 换行标签多用于段落中的换行，一般不用于布局。

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br />

Ab assumenda atque dolor earum error, <br />pturi exercitationem explicabo. </p>

（4）分隔符

- `<hr/>`标签用于将标题和段落，或其他需要分开的段落用一条横线分开。

- `<hr/>`标签单标签，属于`块级元素`自占一行的标签,在 html5 标准中可以省略`/`,直接写`<hr>`

- hr 是单标签，自占一行的标签。

- 一般不用于布局。

<hr />

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

（5）预格式化标签

- `<pre></pre>`标签可定义预格式化的文本，浏览器会完整保留设计者在源文件中所定义的格式，包括各种空格、缩进以及其他特殊格式。

- `<pre>段落</pre>`标题标签是双标签，可以包裹文本和其他标签

- 属于`块级元素`，在浏览器中自占一行的标签

- 如果想在页面中显示标签，则需要搭配实体符号解决，比如`"<" 代表 "<"，">" 代表 ">"`

- pre 标签的一个常见应用就是用来表示计算机的源代码

（6）格式化⽂本标记

- 具有一定格式的文本标记，专门用于修饰文字

- 均为双标签，内联元素，不自占一行

<u>定义下划线</u>

<del>定义删除线 </del>

<strong>定义着重⽂字，与b效果相同</strong>

<em>定义加重语⽓，与i效果相同</em>

（7）按钮标签

- `<button>按钮</button>`普通的按钮标签，不具备任何功能，可以自主赋予功能具有自己的样式，可以自定义修改。

- 双标签，按钮内部可以包裹文本。“特殊的”内联元素，可以设置宽度高度，不自占一行。

2. 分区元素

（1）div 标签

- `<div></div>`标签，双标签，可以包裹任何标签和文本。

- 为块级元素，自身没有任何样式。

- 经常作为容器和分区域的包裹标签使用，在布局中应用广泛。

<div>直接写⼀段⽂字是可以的</div>

<div>

</div>

（2）span 标签

- `<span></span>`标签，双标签，可以包裹文本。

- 为内联元素，自身没有任何样式。

- 常作为容器使用，用于包裹特殊的文字和图标。

<p>html的重要性？评论⼈数：<span style="color: red;">10</span></p>

六、全局属性

全局属性是所有 HTML 元素共有的属性。它们可以用于所有元素，即使属性可能对某些元素不起作用。

要满足属性的书写规则：

- 标记和属性用空格隔开，属性与属性值用`=`（等号）链接，属性值要写在""(双引号内),等号两侧尽量不用空格

- 使用小写属性名

- 一个标记可以没有属性也可以有多个不同属性，属性与属性之间不分先后顺,一个属性也可以有多个属性值

1. style 属性

- style 属性，含要应用于元素的样式声明，可以给元素指定样式。

- 可以设置多个样式，每个属性值用分号隔开。

- 注意，该属主要用于快速样式化，用于测试目的。

<p style="color: blue;font-size: 20px;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>

简单介绍一些样式：

- `color: red;` 字体颜色，色值可以是英文（部分生效）

- ` `背景颜色，色值可以是英文（部分生效）

- `font-size: 20px;`字体大小，px 是像素单位

- `text-align: center;`块级标签中的文字和图片居中显示

- `width: 100%;`设置元素的宽度，百分比单位是参照父级元素的

- `height: 100px;`设置元素的高度

2. id 属性

- 定义唯一标识符（ID），在该页面上一个标签只能有一个不重复的 id 名，它具有唯一性。

- id 属性的值不能是数字开头，不建议写中文。值的书写规范如：

- id="abc" 纯字母

- id="abc123" 字母+数字

- id="head-logo" 中横线链接

- id="head_logo" 下横线链接

- id="headLogo" 驼峰式

3. class 属性

- class 类属性，可以将元素进行分类后给予相同的样式，减少了代码的书写量

- 该页面上可以有多个元素拥有此类名，一个元素也可以有多个类。

- class 选择器名称不能是数字开头，不建议写中文，可以是多个类名用空格隔开。

- 值的书写规范与 id 相同

4. data-*⾃定义属性

- `data-*`是自定义数据属性，可以通过 JavaScript 与 HTML 之间进行专有数据的交换

- `data-*` 这里的`*`可以替换为自定义的有意义的字母或单词,如：`data-buy`

<p data-price="yes">需要将这个标签设置为价格</p>

5. title 标题属性

- 包含表示与其所属元素相关信息的文本。

- 这些信息通常可以作为提示呈现给用户,但不是必须的。

<p title="李⽩将进酒">天⽣我材必有⽤，千⾦散尽还复来。</p>

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>古诗词赏析</title>

</head>

<body>

  <h1>古诗赏析</h1>

  <!-- 第一首古诗所有的内容 -->

  <div>

    <h2>《静夜思》</h2>

    <h3 style="color: gray;">李白 <span style="color: blue;">（唐代）</span></h3>

    <p>床前明月光，疑是地上霜。<br>举头望明月，低头思故乡。</p>

  </div>

  <!-- 第二首古诗所有的内容 -->

  <div>

    <h2>《绝句》</h2>

    <h3 style="color: gray;">杜甫 <span style="color: blue;">（唐代）</span></h3>

    <p>两个黄鹂鸣翠柳，一行白鹭上青天。<br>窗含西岭千秋雪，门泊东吴万里船。</p>

  </div>

  <!-- 第三首古诗所有的内容 -->

  <div>

    <h2>《题西林壁》</h2>

    <h3 style="color: gray;">苏轼 <span style="color: blue;">（宋代）</span></h3>

    <p>横看成岭侧成峰，远近高低各不同。<br>不识庐山真面目，只缘身在此山中。</p>

  </div>

  <!-- 第四首古诗所有的内容 -->

  <div>

    <h2>《相思》</h2>

    <h3 style="color: gray;">王维 <span style="color: blue;">（唐代）</span></h3>

    <p>红豆生南国，春来发几枝。<br>愿君多采撷，此物最相思。</p>

  </div>

</body>

</html>

常用的功能元素

七、功能元素

1. 目录结构

（1）文件夹和文件的路径

（2）路径的地址

2. URL

- URL 统一资源定位符 Uniform Resource Locator，我们俗称的“网址”。可以用来标识网络上的任何资源

- 也可以叫做“路径”，找到目标位置的路线

- 路径在 web 页面的三种主要形式

- 绝对路径

- 相对路径

- 根相对路径

（1）绝对路径

完整的描述文件位置的路径就是绝对路径。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。

访问网络资源：在网站中类似以`http://www.zyncode.net/index.html`种方式来确定文件位置的方式也是绝对路径。

<img

src="http://img3.imgtn.bdimg.com/it/u=2074778619,2802428734&fm=26&gp=0.jpg"

访问本机资源从盘符位置处⼀层⼀层查找，直到找到⽂件名为⽌

E:\HTML5BASIC\Images\login.png

以上这种方式不可以用在项目中的路径

（2）相对路径

相对路径就是相对于当前⽂件的路径，相对路径不带有盘符，通常是以 HTML ⽹⻚⽂件为起点，通过层级关系描述⽬标图像的位置。

同⼀⽂件夹图像⽂件和 html ⽂件位于同⼀⽂件夹：只需输⼊图像⽂件的名称即可或 ./ ，

如 <img src="./logo.gif"/> ，在 html ⽂件中可以不加 ./

下⼀级⽂件夹图像⽂件位于 html ⽂件的下⼀级⽂件夹：输⼊⽂件夹名和⽂件名，之间⽤"/"隔开，

如: <img src="images/logo.gif"/>

上⼀级⽂件夹

图像⽂件位于 html ⽂件的上⼀级⽂件夹：在⽂件名之前加⼊"../"，如果是上两级，则需要使⽤"../../"，以此类推，如 <img src="../logo.gif">

（3）根相对路径

永远都是从 web 站点所在的根⽬录处开始查找形式： /路径/⼦路径/...

3. 超链接

- `<a></a>`标签，定义超链接，用于从一个页面链接到另一个页面。

- 最重要的属性是 `href` 属性是必填属性，它指示链接的目标。href 属性可以填写多种路径和其他目标方式。

- a 标签是双标签，可以包含文字等，`<a href=""></a>`是内联元素,不自一行

（1）href 属性

- href 是表示超文本引用。用来建立当前元素和文档之间的链接。

- 绝对 URL 路径,指向一个站点，如：`href="http://www.taobao.com"`,那么点击时就会直接跳转到这个链接的页面。

- 相对 URL 路径,指向站点内的某个文件，如`href="./2.html"`，当浏览器可以识别并打开该文件时，则会直接打开窗口展现（图片文件、html 文件、视频音频文件、txt 文件等）

- 当 href 属性的路径浏览器不能识别并显现时，那么点击时就会直接下载该文件（zip、exe，dmg 等文件）

- 锚 URL,此时指向页面中的锚，如:`href="#top"`，那么点击时就会到当前页面中 id="top"的这个锚点，实现当前页面的所谓跳转。用的最多就是在可滚动页面中，添加菜单，可以直接回到页面中的某个部分的内容。

<a href="#abc">跳到abc</a>

<a href="#nav">跳到nav</a>

（2）空链接

a 标签是存在默认事件的，就是点击后将会发生跳转，如果不需要 a 链接发生跳转，可以采用一些方法：

- `<a href="#"></a>`#是标签内置的一个方法，代表 top 的作用。所以用这种方法点击后网页后返回到页面的最顶端。

- `<a href="javascript:void(0);"></a>`void 是一个操作符，void(0)返回 undefined，地址不发生跳转。

- `<a href="javascript:;"></a>`javascript:;执行了一条空的 js 代码。

（3）target 属性

- `<a href="#"></a>`

- `target`属性规定在何处打开链接文档。(常用的俩个)

- `_blank`：浏览器总在一个新打开、未命名的窗口中载入目标文档。

- `_parent`：这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。

<a href="http://www.baidu.com" target="_blank">百度⾸⻚blank</a>

<a href="http://www.baidu.com" target="_parent">百度⾸⻚parent</a>

4.图像

- `<img src=""/>`图片标签,可以通过图片文件所在的路径引入 src 属性中，在页面上展示一张图

- img 标签有两个默认的属性：src 属性和 alt 属性。src 是必要属性代表路径，alt 代表图片的描述可省略

- `<img src=""/>`标签是单标签，为“特殊的”内联元素，属于内联元素中的内联块，具有设置宽度和高度的特质，但仍属于内联元素

常⻅的图⽚，图⽚的后缀名 .png、.jpg、.jpeg、.gif,在⻚⾯中分别展示的效果

</div>

5.多媒体（四阶段内容）

- 多媒体标签包括视频和音频标签，均为双标签，块级元素自占一行，依赖路径在页面上展示多媒体文件

- 视频标签`<video src="视频路径"></video>`

- 音频标签`<audio src="音频路径"></audio>`

- `src="路径"`属性指定视频文件和音频文件的路径

- `controls`属性提供播放、暂停和音量的控件

- `loop`属性提供循环播放

- `width`属性可以直接控制多媒体文件的宽度

- `<video><source src="xxx.mp4"/></video>`source 标签可以插入多个格式的多媒体文件

- IE8 及更早 IE 版本不支持。

- `<video>`元素支持三种视频格式：MP4、WebM、ogg。

- `<audio>`元素支持三种视频格式:wav、MP3、ogg、acc、WebM。

八、列表标签

html 中有有序列表(ol)，无序列表(ul)和自定义列表(dl)。不管何种列表，其中只能涵盖列表项标签（li），dl 标签除外。

1. 有序列表

- `<ol></ol>`有序列表标签，双标签，第一层嵌套内只能包含`<li></li>`列表项标签，单独存在没有意义，块级元素可以自占一行显示

- `<li></li>`列表项标签，为双标签可以包裹任何标签和文本，块级元素。

- 列表项前有数字顺序，type 类型 1、A、a、i、I 用来更改列表项的数字。type 属性可以设置：

- `type="1"` 默认的

- `type="a"` 小写字母

- `type="A"` 大写字母

<li>JavaScript</li>

</ol>

2. 无序列表

- `<ul></ul>`无序列表标签，双标签，第一层嵌套内只能包含`<li></li>`列表项标签，单独存在没有意义，块级元素可以自占一行显示

- `<li></li>`列表项标签，为双标签可以包裹任何标签和文本，块级元素。

- type 类型 disc、square、circle 用来更改列表项的形状。type属性可以设置：

- `type="disc"` 默认的

- `type="circle"` 空心圆点

- `type="square"` 小正方形（实心的）

</ul>

3. 自定义列表

- `<dl></dl>`自定义列表不仅仅是一列项目，而是项目及其注释的组合。双标签，块级元素。

- 每个自定义列表项可以指定 `<dt></dt>` 列表标题，只能包裹文本。

- 每个自定义列表项使用`<dd></dd>`双标签包裹文本和元素。

<dl>

</dl>

4.嵌套列表

当需要多级⽬录，或多级列表时，可采取列标签套的⽅法，写法与普通列表书写⽅法⼀样，只是在列表项中再增加列表。列表嵌套结构因嵌套复杂，容易出错，因此在书写中需要格外注意。

<ol type="1">


<li> 认识web <ol type="I">


<li>


互联⽹介绍 


<ul>


<li>互联⽹</li>


<li>web和互联⽹的关系</li>


</ul>


</li>


<li>浏览器介绍</li>


<li>web的⼯作原理</li>


</ol>


</li>


</ol>

九. 表格

1.表格标签

- `<table></table>`表格标签。双标签可以包裹表格系列的标签，块级元素，自占一行

- 对于表格往往应用于 pc 端部分布局，手机端不可用 table 标签布局

- `<caption></caption>`表格标题标签，双标签，只可以包裹文本。块级元素，自占一行，可以指定表格的标题，只能有一个，可以省略不写。如书写一定在`<table></table>`标签内嵌套的第一行出现。

- `<thead></thead>`表头标签，可以指定表格的列表表头，可不写

- `<tbody></tbody>`表体标签，可以指定表格的主体部分，可不写

- `<tfoot></tfoot>`表尾标签，可以指定表格的尾部说明，可不写。`<tfoot>` 标签必须被用在以下情境中：作为 `<table> `元素的子元素，出现在 `<caption>`和 `<thead> `元素之后，`<tbody>` 和 `<tr>` 元素之前。

2. 表格的行列

- `<tr></tr>`行标签，双标签只能包裹列标签和加粗列标签，可存在在表头、表体和表尾中，属于结构，代表一行的范围。

- `<th></th>`加粗列标签，一般放在表头，当作列标题使用。

- `<td></td>`表格单元列标签，放置内容如文本和其他标签。

<table border="1px">

    <caption>月收入表</caption>

    <thead>

      <tr>

        <th>月</th>

        <th>收入</th>

      </tr>

    </thead>

    <tfoot>

      <tr>

        <td>总和</td>

        <td>$180</td>

      </tr>

    </tfoot>

    <tbody>

      <tr>

        <td>一月</td>

        <td>$100</td>

      </tr>

      <tr>

        <td>二月</td>

        <td>$80</td>

      </tr>

    </tbody>

  </table>

  <br><br><br><br>

  <table border="1px">

    <caption>王者荣耀英雄表</caption>

    <thead>

      <tr>

        <th>序号</th>

        <th>英雄名字</th>

        <th>职业</th>

        <th>阵营</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>1</td>

        <td>程咬金</td>

        <td>坦克</td>

        <td>长安</td>

      </tr>

      <tr>

        <td>2</td>

        <td>老夫子</td>

        <td>战士</td>

        <td>稷下学院</td>

      </tr>

      <tr>

        <td>3</td>

        <td>甄姬</td>

        <td>法师</td>

        <td>魏地</td>

      </tr>

      <tr>

        <td>4</td>

        <td>橘右京</td>

        <td>刺客</td>

        <td>扶桑</td>

      </tr>

    </tbody>

  </table>

3.表格标签的相关属性

- `<table>`标签下的属性

- `border` 像素表格边框宽度

- `height` 像素、百分比表格整体高度

- `width` 像素、百分比表格整体宽度

- `border-collapse` 值`collapse` 除去缝隙，需要写在 style 样式中`style="border-collapse: collapse;"`

- `cellpadding` 像素、百分比边框与单元格的距离

- `cellspacing` 像素、百分比单元格边框宽度

- `align` left、center、right 对齐方式

- `bgcolor` 英文、16 进制、rgba 表格背景颜色

- `background` url 表格的背景图片

- `<th> <td>`标签下的常用属性

- `width` 像素、百分比设置单元格的宽

- `height` 像素、百分比设置单元格的高

- `align` left、center、right 水平移动

- 拆分、合并单元格

- `colspan` 数字（占据的列数）

合并列（左右相邻合并）

- `rowspan` 数字（占据的行数）

合并行（上下相邻合并）

<table border="1" style="border-collapse: collapse;">

<tr>

<td colspan="9" align="center">讲台</td>

</tr>

<tr>

<td rowspan="4" align="center">过道</td>

<td align="center">凌华沛</td>

<td align="center">易文祥</td>

<td align="center">吴柏豪</td>

<td rowspan="4" align="center">过道</td>

<td align="center">黄学雄</td>

<td align="center">邓报华</td>

<td align="center">张伟康</td>

<td rowspan="4" align="center">过道</td>

</tr>

<tr>

<td align="center">郑雨浓</td>

<td align="center">庄杰鸿</td>

<td align="center">朱谭飞</td>

<td align="center">林锐彬</td>

<td align="center">林财文</td>

<td align="center">邓文杰</td>

</tr>

<tr>

<td align="center">吴俊超</td>

<td align="center">赵宏青</td>

<td align="center">黄世荣</td>

<td align="center">鲁荣豪</td>

<td align="center">梁纪洪</td>

<td align="center">林钢</td>

</tr>

<tr>

<td align="center">朱盈盈</td>

<td align="center">许佳曼</td>

<td align="center">梁锦添</td>

<td align="center">许慕栒</td>

<td align="center">李琦雯</td>

<td align="center">练岚金</td>

</tr>

<tr>

<td colspan="9" align="center">过道</td>

</tr>

</table>

十、表单元素

1. 表单标签

- `<form></form>` 表单标签是 HTML 表单用于搜集不同类型的用户输入

- 双标签，一般情况下不能单独使用，需要在 form 元素中加入 input 等标签共同使用

- 常用属性

- name属性主要是对这个form进行标记

- methood=”get/post”， get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限。get安全性非常低，post安全性较高。但是执行效率get安全性非常低，post安全性较高。但是执行效率却比post方法好。

- action，处理表单提交的 URL（可以为node中的路由接口地址）。

- enctype属性，当method属性值为post时，enctype 就是将表单的内容提交给服务器的媒体类型。application/x-www-form-urlencoded：未指定属性时的默认值。

<form action="提交地址" method="提交⽅式">n个需求的表单内容 ……</form>

2. input 标签及控件

- `<input/>`元素是最重要的表单元素。它有很多形态，根据不同的 type 属性。

- input 标签是单标签，主要依靠控件，input 的 type 类型就是用于书写控件的属性。它的控件有很多种类，从而达到我们要的需求。

- input 标签是内联元素，但属于特殊的内联元素，可以定义宽度高度，单不自占一行

（1）文本框

- `type="text"`定义单行文本输入域，用户可在其中输入文本

- `value=""`代表初始值，用户输入后可通过事件获取该属性的值

- `placeholder="xxx"` 占位符，可用来作为对用户的提示文字

- `name=""`可与服务器交互数据的元素标示，可以在服务器端根据其 name 取得元素提交的值

- `maxlength` 属性配合使用，可创建合法值范围，直接写数字

（2）密码框

- `type="password"`定义密码输入域，用户在该域中输入的字符不直接显示，而是显示星号或实心圆。

- 具有`value、placeholder、name`属性

（3）单选框

- `type="radio"`定义单选框，用户只能在多个选项中选择其中一个。

- 单选框有一个很重要的属性，name 属性。name 属性相同则可以让单选框变为一组，从而达到单选的目的 name="值"，值相同的单选框，都会被作为一组单选框，一组单选框的选项只能选择其一。

- `checked` 属性代笔表默认被选中的,可以不用写值

<input type="radio" name="sex" checked />男 <input type="radio" name="sex" />⼥

（4）复选框

- `type="checkbox"`定义复选框，用户可以在多个选项中选择一个或多个。

- 复选框有一个很重要的属性，name 属性。name 属性相同则可以让复选框变为一组，从而达到记录复选内容的目的。

- `checked` 属性代笔表默认被选中的,可以不用写值，多选可以有多个默认被选中的项

<input type="checkbox" name="eat" checked />吃⾯

<input type="checkbox" name="eat" />吃饭

<input type="checkbox" name="eat" checked />吃⼟

（5）按钮

- `type="submit"`定义提交按钮，提交按钮会把表单数据发送到服务器，数据会被发送到在 from 表单的 action 属性中规定的 URL。不定义文字内容，会显示“提交”

- `type="reset"`重制表单里所有的内容会被清空，默认按钮文字为重制

- `type="button"`普通按钮没有功能，需要 value 属性指定按钮文字

（6）文件上传

- 使用 `type="file"` 的`<input>` 元素使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上

- `multiple`属性表示允许选择多个文件。当这个属性存在在标签中，则可以同时上传多个文件。

（7）html5 新增 type 属性

- `type="number"`用于输入数字的字段，其中 min 设定允许的最小值；max 设定允许的最大值；value 规定默认值；还有 step 可规定合法数字间隔；

- `type="email"`专用于 email 的输入，省去了正则表达式的编写

- `type="color"`使用 color 属性能直接调用系统的颜色调节窗口，默然为黑色

- `type="range"`定义用于精确值不重要的输入数字的控件；min 属性指定最小值限制，max 属性指定最大值限制，step 属性规定合法数字间隔，value 属性规定默认值，

- `type="date"`可用来选择或输入日期，包括（年/月/日）不包括时间

<input type="color" id="color"﹥

3. 标记标签

- `<label></label>` 标记标签标签不会向用户呈现任何特殊效果。双标签，内联元素，不自占一行

- 它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。label 标签的"for" 属性可把 label 绑定到另外一个元素。把 "for" 属性的值设置为相关元素的 id 属性的值。

<input type="checkbox" id="mianmi" /><label for="mianmi">30天免密码登录</label>

4.菜单标签

- `<select></select>` 下拉菜单标签,双标签，但不能单独存在，只能包裹`<option></option>` 标签是选项标签

- `<option></option>`的`value`属性是可以获取并且得到该下拉菜单用户选择的是哪一项

- `multiple`属性代表该下拉菜单可以多选。

</select>

5.文本域

- `<textarea></textarea>`文本域标签具有滚动条的多行文本输入控件，与单行文本框 text 控件不同

- 它不能通过 maxlength 属性来限制字数，为此必须寻求其他方法来加以限制以达到预设的需求。

- 文本域禁止缩放的样式`resize:none;`

<h1>欢迎注册</h1>

<table>

<tr>

<td height="40"><span>*</span>证件类型</td>

<td>

<input type="radio" name="zhengming" value="0" />身份证 

<input type="radio" name="zhengming" value="1" />银⾏卡 

</td>

<td></td>

</tr>

<tr>

<td height="40"><span>*</span>身份证/卡号</td>

<td>

<input type="text" />

</td>

<td></td>

</tr>

<tr>

<td height="40"><span>*</span>登录密码</td>

<td>

<input type="password" />

</td>

<td></td>

</tr>

<tr>

<td height="40"><span>*</span>确认密码</td>

<td>

<input type="password" />

</td>

<td></td>

</tr>

<tr>

<td height="40"><span>*</span>动态验证码</td>

<td>

<input type="text" />

</td>

<td>

<button>点击发送动态验证码</button>

</td>

</tr>

<tr>

<td height="40" colspan="3" style="text-align: center;">

<input type="checkbox" id="xuan" />

<label for="xuan">我已阅读并同意</label>

<a href="#">《商城⽤户注册协议》</a>

</td>

</tr>

<tr>

<td height="40" colspan="3" style="text-align: center;">

<button style="width: 200px;">⽴即注册</button>

</td>

</tr>

</table>

十一、iframe

- `<iframe></iframe>`标签是一个内联框架，即用来在当前 HTML 页面中嵌入另一个文档的，且所有主流浏览器都支持 iframe 标签

- 简单用法的属性

- `src` iframe 页面地址，有同域跨域之分

- `height` iframe 高度

- `width` iframe 宽度

- `name` iframe 命名

- `scrolling`用来设置框架是否需要滚动条，取值可以是`yes,no,auto`

- `auto`在需要的情况下出现滚动条（默认值）

- `yes`始终显示滚动条（即使不需要）

- `no`从不显示滚动条（即使需要）

- 优势和劣势

- 程序调入静态页面比较方便;

- iframe 有不好之处：样式/脚本需要额外链入，会增加请求

- 有同步和异步之分

- 样式不好控制

scrolling="yes">

您的浏览器不⽀持嵌⼊式框架，或者当前配置为不显示嵌⼊式框架。

</iframe>

十二、结构化标签

1.语义化功能

搜索引擎去抓取页面的内容的时候，它只能猜测你的某个 div 内的内容是文章内容容器，或者是导航模块的容器，或者是作者介绍的容器等等。也就是说整个 HTML 文档结构定义不清晰，HTML5 中为了解决这个问题，专门添加了：页眉、页脚、导航、文章内容等跟结构相关的结构元素标签。

2.部分新增结构标签（了解）

- `<section></section>`标签，定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。它用来表现普通的文档内容或应用区块，通常由内容及其标题组成。

- `<nav></nav>`导航的链接组，使 html 代码在语义化方面更加精确，同时对于屏幕阅读器等设备的支持也更好。

- `<aside></aside>`aside 标签用来装载非正文的内容,例如广告，成组的链接，侧边栏等等的包裹型标签。

- `<header></header>`标签定义文档的页眉，通常是一些引导和导航信息。它不局限于写在网页头部，也可以写在网页内容里面。

- `<footer></footer>`标签定义网页的页脚

posted @ 2021-09-28 20:08 野居青年阅读(222) 评论(0) 收藏举报

刷新页面返回顶部

野居青年

野居青年每日一更！0.0

Html

公告

野居青年

野居青年 每日一更！0.0

Html

公告

野居青年每日一更！0.0