HTML5：超文本标记语言

01 准备

浏览器

使用的浏览器

谷歌浏览器/火狐

自行百度下载安装即可

学习方法

多敲代码记笔记
少看视频多思考
反复沟通多交流百度

02 程序员岗位介绍

2.1 概念区分

日常生活中，很多网页呈现出来的简洁布局、精心设计以及各种灵动效果总是让我们赞叹不已，而创造这些酷炫体验的，正是背后的 web 开发者。
早在3年前，互联网就囊括了六亿八千多万的页面，这个数字还在持续快速增长。这意味着，web开发的人才需求空前繁盛。
据估计，web开发方面的人才需求在接下来十年还会20%的增长，大大超过所有行业的平均水平。

2.2 前端（web前端）

Web前端就是使用HTML、CSS、JavaScript等专业技能和工具将产品的UI设计稿实现成网站产品，涵盖用户PC端、移动端（手机,平板）等网页，处理视觉和交互问题。
在Web前端这个岗位兴起之前，html+css的工作是被视觉人员所承担的，而js这部分则是由后端完成的。随着智能手机和移动互联网的普及，PC端、手机端等五花八门的应用占领着每个人的手机，随之而来各种定制化的UI风格让兼容问题变得越来越头疼。因此，有企业开始把html+css+js这部分工作独立出来，由一个新的岗位来处理，成为了一个处理视觉和交互的综合岗位，这才有了Web前端这个岗位的出现。
因此，Web前端开发行业是伴随Web兴起而细分出来的行业。实际上，Web前端是最接近产品和设计的工程师，起到衔接产品和技术的作用，它存在在互联网的每个角落，我们使用的微信里面的各种功能、小程序等都离不开web前端技术。
一名优秀的Web前端工程师，需要

JavaScript语言基础扎实，具有良好的规范开发习惯；
熟悉常用的设计模式，熟练使用Vue、Angular技术栈开发；
能够熟练使用angular、vue、echarts、jquery、react等框架进行传统开发；
要熟悉MVVM、MVC开发模式；
熟悉前端工程化、自动化技术，可以根据需求配置Gulp文件及更改Webpack配置文件；
熟练使用git版本管理工具。
此外，还要熟悉HTML5、CSS3的新特性，了解不同浏览器之间的差异，制作出的页面能够有很好的兼容性。

目前前端的薪资水平：

2.3 后端

是什么给网站前端提供支持？数据存放在哪里？这就涉及后端内容了。网站后端包括服务器、应用还有数据库。后端开发者构建并维护这些组件，为网站提供多方面支持。
为了让服务器、应用、数据库能够彼此交互，后端工程师需要具有如下技能：

用于应用构建的服务器端语言： PHP, Ruby,Python, Java, .Net 等；
数据相关工具： MySQL, Oracle, SQLServer,MongoDB,Redis 等；
版本控制工具：SVN, CVS , Git 等；
还要熟练使用 Linux 作为开发和部署环境。

目前java工程师的薪资水平：

2.4 全栈

有时前后端之间并没有明确的界限，“前端开发者通常需要额外学习后端技巧，反之亦然，尤其在特定市场条件下”，Matranga 说“开发者需要跨领域知识，有时甚至需要成为全才。”
全栈工程师，最初是6年多以前由 Facebook 带动的概念。全栈的核心，是指这批开发者能够承担包括前端、后端在内的所有功能开发任务，他们拥有一个技能全家桶。“能够同时承担服务器端和客户端工作会为你带来更多机会，” Grovo 的全栈工程师 Federico Ulfo 说 “当然这也就意味着更多的挑战。以厨艺作类比，掌握烹饪和烘焙都需要时间与经验积累，同时掌握两者要花费更多精力。照着菜谱做谁都可以，我此处所说的是做出真正美味东西的能力。”
具体工具依项目和客户需求而定，全栈开发者需要对 Web 架构的每一个层次都有足够的了解：搭建和配置 Linux 服务器，编写服务器端 API，利用客户端 Javascript 代码驱动应用，将设计层面的东西转化到实际的 CSS 代码。掌握并使用大量工具的同时，全栈开发者需要敏捷地分配服务器端和客户端任务，提供解决方案并对比不同方案的优劣。

目前全栈工程师的薪资水平：

2.5 关系总结图

2.6 其他

以后我们同学可能做到的职位：

java工程师
前端工程师
DBA
测试
产品/项目经理
运维
架构师（架构师职位都具备全栈技能）

03 互联网技术概念入门

3.1 CS/BS模式

互联网软件的两种模式：

Client/Server（也就是客户端/服务器模式），特点有

需要下载安装客户端
软件有客户端和服务端两部分组成
软件更新比较麻烦所有的客户端都需要更新
运算压力可以分摊给各个终端，服务器承担的运算压力可以大大减轻

C/S模式的例子：

王者荣耀、手机QQ、手机微信、极品飞车系列、使命召唤系列、CF

Browser/Server（浏览器/服务器模式）

不需要下载安装客户端只需要有一个浏览器即可
软件全部部署在服务器端
软件更新比较简单只要更新服务器即可(对用户来讲无感知更新)
运算压力基本在服务端一般用来做页游而不是大型游戏

B/S的例子：

各种网站、b站、尚学堂官网、京东、淘宝

一般来说，现在的手机大多是 C/S，而PC一般是B/S

3.2 互联网三大基石

三大基石（以上是互联网软件相互依赖的三种基础技术）：

URL

在WWW上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫URL（Uniform Resource Locator,统一资源定位符），它是WWW的统一资源定位标志，就是指网络地址。

HTTP协议

http是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII码形式给出；而消息内容则具有一个类似MIME的格式。这个简单模型是早期Web成功的有功之臣，因为它使得开发和部署是那么的直截了当。

HTML

HTML称为超文本标记语言

假设小明给小红传纸条

URL : 小红的地址小红的座位
HTTP协议: 以中文发送 “中文”就是一个共同遵守的解析数据的规范
HTML: 就是纸条上的内容，也就是说HTML是信息的载体，比如在此例子中，所传递的信息就是“晚上去看电影呀”

如果自己想要开发网站

服务器IP——39.156.69.79
域名—— quercus.top
DNS解析

04 HTML5入门

4.1 什么是HTML

HTML（HyperText Markup Language），中文翻译是超文本标记语言，是用来描述网页的一种语言，那么它的特点是：

超文本：也就是比普通文本更牛逼的文本，不仅仅可以展示文字，可以展示各种媒体内容、图片、视频
一般由前端工作人员来完成，后台研发人员不需要编写
标记：或者叫标签或者元素，标记通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
封闭类型标记（也叫双标记），必须成对出现,如<p></p>

标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

非封闭类型标记，也叫作空标记，或者单标记，如<br/>

浏览器解析html文档的过程

总结：

我们学习HTML就是学习各种各样的标签，可以达到比普通文本更厉害的功能。
那么后续浏览器可以对html文件做解析，就可以在浏览器上展示好看的效果。

4.2 HTML的作用

通过使用HTML的各种标签，然后生成一个HTML文件，这个文件可以被浏览器解析，浏览器内部有一个专门的HTML的解析器，解析后我们就可以看到炫酷的页面。
网页文件的拓展名为.html 或者.htm 的纯文本文件

4.3 HTML版本

4.4 H5与H4的区别

上面两条内容都是来自于百度百科。我们要学习的H5是当下的主流技术，也是实际工作中使用最多的技术。

H4和H5的区别有哪些

简化的语法，H5语法更加简洁。

新的<canvas>标记代替flash

Flash给Web开发者带来了很多麻烦，因为想要在网页上播放Flash需要一堆代码和插件。<canvas>标签使得开发者只要使用一个标签就能和用户产生UI交互。
虽然目前<canvas>标签还不能实现Flash的所有功能，但是相信很快就会颠覆并代替flash。

新的<header>与<footer>标记

HTML5的设计是要更好的描绘网站的解剖结构。
这就是为什么一些像<header>和<footer>这样的新标记会出现，它们是专门为标志网站的这些部分设计的。用来明确表示网页的结构。

新的<section>与<article>与标记

跟<header>与<footer>标记相似，HTML5中引入的新的 <section>和 <article>标记可以让开发人员更好的标注页面上的这些区域。有利于清晰化网页的结构，更有利于SEO。

新的<audio> 和 <video>标记

新的<audio> 和<video> 标记可能是HTML5中增加的最有用处的两个东西了。正如标记名称，它们是用来嵌入音频和视频文件的。
除此之外还增加了新的多媒体的标记和属性，例如<track>，它是用来提供跟踪视频的文字信息的。

4.4 HTML的标准结构

开始写代码：

新建一个文本文档，将文本文档的后缀改为.html。下图是Windows操作显示文件拓展名

右键-用记事本打开，编写代码

<html>

<head>

<title>这是我的第一个小页面</title>

</head>

<body>

这是我的第一个html页面，入门页面，就是最基本的结构

</body>

</html>

选择文本文档，右键-打开方式-谷歌浏览器
展示页面效果

HTML5的标签使用说明：

根标签<html>最外层的标签所有其他的标签都放入该标签中
<html>根标签有两个一级子标签

分别是head body
head中一般放的是不显示在网页上但是又比较重要的信息（给浏览器看的）
body中一般放的是显示在页面上的内容（给用户看的），前端工程师工作的重点是在body中做工作。
Head 和 body 是可以互换位置的，但是一般不建议这样做

浏览器只是用来解析html文档，不能反向编辑
标签使用英文半角的符号

4.5 IDE介绍

辅助程序员编写源代码的工具，它类似word，我们写文档会打开word文档来编写。
写代码也一样，需要借助工具来开发。
常见的编码工具有记事本、sublime Text、notepad++

集成开发环境

英文名IDE，Integrated Development Environment
用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具。
集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。所有具备这一特性的软件或者软件套（组）都可以叫集成开发环境。
如微软的Visual Studio系列，Borland的C++ Builder、Delphi系列等。
IDE可以独立运行，也可以和其它程序并用，多被用于开发HTML应用软件。例如，许多人在设计网站时使用IDE（如webstorm、DreamWeaver等），因为很多项任务会自动生成。

4.6 用Hbuilder开发步骤

将这里的Hbuilder.zip压缩包解压
在解压后的文件夹中找到Hbuider.exe，直接双击使用，无需安装
用邮箱注册，用的功能会更多一点
选择视觉效果(选择你能看到的最浅的颜色)
新建项目：

在项目下新建一个html文件：

编写代码：

<!DOCTYPE html>

<head>

<title>this is second</title>

</head>

<body>

this is my second html...

</body>

</html>

用谷歌浏览器运行：

在浏览器上可以看到效果：

4.7 HTML基本结构

HTML标签

定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。

<html>

<head>

<title>我的第一个 HTML 页面</title>

</head>

<body>

</body>

</html>

head标签

Head标签用于定义文档的头部，它是所有头部元素的容器。
<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给用户。
下面这些标签可用在 head 部分：

<title>、<meta>、<link>、<style>、 <script>。

应该把 <head> 标签放在文档的开始处，紧跟在 <html> 后面，并处于 <body> 标签之前。
文档的头部经常会包含一些 <meta> 标签，用来告诉浏览器关于文档的附加信息。

title标签

可定义文档的标题。
它显示在浏览器窗口的标题栏或状态栏上。
title写和你网页相关的关键词有利于SEO优化

<html>

<head>

<!--

标签 html 的标记

元素: HTML上一个完整的标签(包含开始标签和结束标签和子元素)称之为一个元素(Element)

单标签只有开始标签没有结束标签标签之中不需要放任何内容,往往写成单标签

开始标签后,书写一个/ <标签名 />

双标签既有开始标签又有结束标签标签之间要书写其他内容,必须写成双标签

属性: 属性是依附于标签而存在的一种对标签进行特征设置的一种手段往往在开始标签中

在开始标签中属性名="属性值"

在HTML中一般不区分'' 和""

-->

<title>second page</title>

</head>

今天天气很凉快

<!-- 你好

注释:给人看的一种提示性文字

注释是不会被浏览器显示

-->

<!--

ctrl +shift + /

-->

</body>

</html>

SEO是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求，从而提高自己网站被搜索引擎平台录取的几率，从而把精准用户带到网站。网站都有目标群体，通过title、meta标签可以让目标群体通过关键词找到你的网站，所以你定义的关键词决定了会吸引什么样的群体。

meta标签

META标签用来描述一个HTML网页文档的属性，此处的charset="utf-8"是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8，或是gbk，这些都是编码格式。

元素可提供有关页面的元信息（meta-information），用来向浏览器或搜索引擎描述页面。

比如文档的描述和关键词。它只可以放在head中。属于元信息标签。

常见的meta有：

<!--

http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，

以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

下面指的是5秒后刷新打开百度

-->

代码：

<html>

<head>

<!--

title 标题标签定义显示在网页左上角的标题

-->

<title>第一个小网页</title>

<!--meta

一般定义一些当前网页的特殊属性

通过meta标签的属性定义页面的特征

<标签名属性1='' 属性2=''></标签名>

charset属性定义当前页面的字符集告诉浏览器以什么字符集解析当前页面

name属性一般用于定义当前网页的一些简单描述便于在搜索引擎上根据描述搜索到当前网页

keywords 关键字

author 作者

description 描述一段陈述文字,描述当前网页

html 属性值使用单引号或者是双引号皆可

-->

<!--

link 学习 CSS样式的引入外部CSS样式文件

script 学习 js 脚本语言引入脚本语言文件

-->

</head>

<!--

注释:给人看的提示不显示出来的内容不执行的代码

选中文字按 ctrl +shift + / 注释/取消注释

-->

武汉加油

</body>

</html>

05 HTML常见基础标签

5.1 HTML专业词汇和概念

在线帮助文档 https://www.w3school.com.cn/

查看全部标签地址 https://www.w3school.com.cn/tags/index.asp

标签 Tag

单标签有：meta

双标签有：html head body title

标记(签)是HTML语言的基本部分
标签是分层次的；多数标记总是成对出现，包括开始标签和结束标签；
根标签是html，包括两个子标签head和body
标签不区分大小写。例<html><HTML>都可以

属性和属性值 Attribute

附属于标签，对标签的特征进行设置
属性的值可以用双引号引起来（单引号也可以）
属性和属性值不区分大小写
属性之间无先后次序，属性也可省略（即取默认值）
属性都是写在开始标签中

文本 text

标签的内容可以是子标签或者普通文本
最内层标签的内容称为文本
外层标签的内容也可以统称为文本

元素 element

<p align="center">HTML文档包括两部分：头部部分和主体部分</p>

元素的组成：开始标记+中间内容+结束标记
一个完整的标签我们也称之为为网页上的一个元素

5.2 标题标签和段落标签

标题标签

<body>

<h1 align="right">湖南消费投诉;未办理彩铃套餐中国移动“一直扣钱”</h1>

<h2 align="center">湖南消费投诉;未办理彩铃套餐中国移动“一直扣钱”</h2>

<h3>湖南消费投诉;未办理彩铃套餐中国移动“一直扣钱”</h3>

<h4>湖南消费投诉;未办理彩铃套餐中国移动“一直扣钱”</h4>

<h5>湖南消费投诉;未办理彩铃套餐中国移动“一直扣钱”</h5>

<h6>湖南消费投诉;未办理彩铃套餐中国移动“一直扣钱”</h6>

</body>

段落标签

<!--

hr 好人标签横线

p 段落

br 换行

-->

<p>7月4日上午，网友在黑猫投诉湖南站反映称：“未办理过彩铃套餐，

向移动公司反映一直没处理”。<br/>网友在官方系统查询也没有“彩铃业务”

扣费详情上却显示“一直在扣钱。”移动公司客服让网友耐心等待而网

友并未收到电话或短信处理。</p>

<p>7月4日上午，网友在黑猫投诉湖南站反映称：“未办理过彩铃套餐，

向移动公司反映一直没处理”。网友在官方系统查询也没有“彩铃业务”

扣费详情上却显示“一直在扣钱。”移动公司客服让网友耐心等待而网

友并未收到电话或短信处理。</p>

格式化标签

w3school在线文档 https://www.w3school.com.cn/

文档地址 https://www.w3school.com.cn/html/html_formatting.asp

<body>

我们不一样,不是所有的人都没有对象<br />

<b>我们不一样,不是所有的人都没有对象</b> <br />

<big>我们不一样,不是所有的人都没有对象</big> <br />

<small>我们不一样,不是所有的人都没有对象</small> <br />

<i>我们不一样,不是所有的人都没有对象</i> <br />

<em>我们不一样,不是所有的人都没有对象</em> <br />

<strong>我们不一样,不是所有的人都没有对象</strong> <br />

<ins>我们不一样,不是所有的人都没有对象</ins> <br />

<del>我们不一样,不是所有的人都没有对象</del> <br />

<!--

sub 下标字

sup 上标字

-->

log<sub>2</sub>n 2<sup>3</sup>

<!--

标签嵌套

-->

<pre>

public static void main(String[] args){

}

</pre>

</body>

字符实体

字符实体查询地址 https://www.w3school.com.cn/html/html_entities.asp

06 超链接和多媒体标签

6.1 超链接标签

<a href="http://www.bjsxt.com">北京尚学堂</a>

基本使用

<body>

<!--

href

用于指向具体的资源路径

可以是本地资源

也可以是网络资源

也可以是一个锚点

target

资源的打开方式

_self在当前页打开默认值

_blank新建一页打开资源

-->

</body>

设置锚点

一般我们在进行相同页面不同位置的跳转的时候，我们需要只用超链接的锚点功能，
应用场景：当页面过长的时候一般会使用这个功能

<body>

顶部 <a name="top" href="#middle">跳转至中部</a>

中部 <a name="middle" href="#bottom">跳转至底部</a>

底部 <a name="bottom" href="#top">回到顶部</a>

</body>

另一个页面设置锚点：从一个页面跳转到另一个页面的制定位置：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<a href="6.模拟页面导航栏.html#middle">跳转到第6个页面里面的图书锚点</a>

</body>

</html>

6.2多媒体标签

图片标签img

<body>

<!--

img 图片

src 图片的路径

可以是本地图片,也可以是网络图片

width 宽度

height 高度

title 当鼠标悬停时显示的文字

alt 图片加载失败时显示的文字

路径问题

/ 代表一层目录

../ 代表上一层目录

-->

<img src="http://img.yzt-tools.com/20200327/549203c6260af66500df4e8465717091.jpg"

width="300px"

height="300px" alt="图片加载失败"/>

</body>

音频标签audio

<!DOCTYPE html>

<html>

<head>

</head>

<body><!--

audio：播放音频

controls:显示控制面板

loop:进入单曲循环

autoplay：自动播放 google浏览器禁止了此功能

muted:默认静音

-->

您的浏览器不支持播放音频文件

</audio>

</body>

</html>

视频标签video

<!DOCTYPE html>

<html>

<head>

</head>

<body><!--

video 播放视频文件

src:视频的地址

width:视频播放窗口的宽度

height:视频播放窗口的高度

loop：循环播放视频

muted: 静音播放

autoplay:自动播放

poster:视频播放前加载的图片

--><video controls src="img/dy.mp4" width="400px" height="600px" loop muted poster="img/兵马俑.jpg" autoplay>

您的浏览器不支持播放视频

</video>

</body>

</html>

07 列表标签

7.1 有序列表

<!--

有序列表 :

type:可以指定排序的列表名称

1 阿拉伯数字

a 小写字母

i 小写罗马数字

I 大写罗马数字

A 大写字母

--><ol type="I">

<li>WEB前端</li>

</ol>

7.2 无序列表 Unorder list

<!DOCTYPE html>

<head>

</head>

<body><!--

无序列表 ul

type:

circle 空心圆

disc 实心圆（默认的样式）

square: 实心的正方形

--><p>您的爱好都有什么？</p>

</ul>

</body>

</html>

7.3 列表嵌套

<!DOCTYPE html>

<html>

<head>

</head>

<body><!--

你的爱好是什么？

唱歌

1.清嗓子

2.看有没有人抢话筒

3.青藏高原压压嗓子

4.纸短情长

5.结束

跑步

看书

--><ul>

<li>唱歌

<ol>

<li>看有没有人抢话筒</li>

<li>青藏高原压压厂子</li>

</ol>

</li>

</ul>

<hr />

</body>

</html>

7.4 定义列表 Defination list

一般用于图文混排

<!--

defination list

一般用于图文混排

dt 一般放图片

dd 一般用于放文字

-->

<dl>

<dt>

</a>

</dt>

<dd>

<p>

沐秋polo衫男士短袖t恤<br />

男宽松纯棉半袖男生大码<br />

体恤衫翻领休闲潮牌胖子<br />

带领有领

</font>

</p>

</dd>

</dl>

08 表格标签

8.1 表格特点

表格在数据展示方面非常简单，并且表现优秀，通过与CSS的结合，可以让数据变得更加美观和整齐。

行、列、单元格单元格特点：同行等高、同列等宽。

表格的基本语法：

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

8.2 thead tbody tfoot th

整个表格分为thead、tbody、tfoot
这三个标签本身没有任何的展示内容和展示效果，仅仅是帮助我们将表格划分为多个不同的部分
theadtfoot 如果不写,浏览器在解析代码时,不会自动添加；但是tbody 如果不写,浏览器在解析时,会自动添加 ,自动将所有tr放入tbody中
th一般用于替换 td，th自带加粗和居中效果 一般用作用户表格的列名

<!DOCTYPE html>

<html>

<head>

</head>

<body >

<tr >

</tr>

</thead>

<tr >

</tr>

<tr >

</tr>

<tr >

</tr>

</tbody>

<tr>

</tr>

<tr >

</tr>

</tfoot>

</table>

<tr >

</tr>

<tr >

</tr>

<tr >

</tr>

<tr >

</tr>

<tr>

</tr>

<tr >

</tr>

</table>

</body>

</html>

8.3 表格的跨行和跨列

<!DOCTYPE html>

<html>

<head>

<title>表格的合并</title>

</head>

<body>

<!--

th:自带加粗居中的效果

rowspan:行合并

colspan:列合并

-->

<tr>

<th colspan="3">学生成绩单</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

8.4 表格的嵌套(了解)

<body>

<tr>

<th colspan="3">学生成绩单</th>

</tr>

<tr>

</tr>

<tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

</table>

</body>

09 框架

9.1 内嵌框架 iframe

内嵌框架是用于在网页中嵌入另一个网页html并让它在当前网页中显示.
添加内嵌框架的语法:<iframe src=" URL "></iframe>

URL 指定独立网页的路径.

我们可以通过案例来感受内嵌框架：iframe结合超链接标签实现页面内容动态变化：

代码实现

<body>

</body>

练习-邮箱页面案例

邮箱首页：05内嵌框架.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

邮箱顶部页面:head.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

邮箱左侧页面:left.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ol>

</ol>

</body>

</html>

邮箱右侧页面:main.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

您好,你有***封未读邮件

</body>

</html>

邮箱底部页面:foot.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p align="center">北京尚学堂科技有限公司</p>

地址:经海路赛蒂科技工业园    

电话:12345678

</p>

</body>

</html>

https://blog.csdn.net/qq_36595013/article/details/80916629 builder快捷键

9.2 框架集合 frameset

frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。
在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。
在使用frameset框架集时,当前页面不能再使用body标签,也不能再定义其他内容,只能作为引入其他页面来使用

练习-邮箱页面案例

<html>

<head>

</head>

<!--

frameset不能放在body中

rows 上下分成多少行

cols 左右分成多少列 clos="第一列宽度,第二列宽度,... ...,*"

-->

<!--<frameset cols="20%,60%,*">

</frameset>-->

<!--<frameset rows="20%,60%,*">

</frameset>-->

</frameset>

</frameset>

</html>

10 Form表单

10.1 Form表单介绍

介绍

表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。
一般是将表单设计在一个Html 文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的 ASP 或 PHP 等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。
这里我们只讲怎样使用Html 标志来设计表单。

所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。

表单是由窗体和控件组成的，一个表单一般应该包含用户填写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。

-name：表单提交时的名称

-action：提交到的地址

-method：提交方式，有get和post两种，默认为get

代码

form表单标签

帮助我们向服务器提交输入的信息的标签
没有任何的展示效果
帮助我们确定数据提交的范围

向哪里提交?

action属性,用于指定提交的服务器的地址

数据如何提交数据提交的方式

method属性,确定提交的方式,默认是get

只能提交文字信息
提交的数据通过地址栏提交
地址栏长度有限,提交的数据量不大
数据会出现在地址栏上,相对不安全

post

既能提交文字又能提交文件
数据单独打包发送
一般来说,提交的数据量没有上限
数据不会出现的地址栏上,相对安全

需要提交数据的输入标签必须具备name属性
url携带参数的语法

url组成部分：协议+主机名/ip+端口号+具体的资源

?代表参数的开始，?参数名=值&参数名=值&参数名=值

步骤：

准备form表单标签
确定提交的地址 action https://www.baidu.com/s
确定提交的方式 method get
在form表单内准备输入标签，确保输入标签一定有name属性 name属性帮助后台接收数据的
在form表单被准备一个提交按钮

<html>

<head>

</head>

<body>

请输入关键字:<input type="text" name="wd"/>

</form>

</body>

</html>

模拟百度搜索功能

疑问：百度搜索功能，用的是get方式还是post方式？

答案：get方式

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</form>

</body>

</html>

拓展

完成360搜索功能（https://www.so.com/s?q=bjsxt）
完成必应搜索功能（https://cn.bing.com/search?q=bjsxt）

<body>

</form>

</form>

</body>

10.2 表单元素

文本框

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>

First name: <input type="text" name="firstname">

<br>

Last name: <input type="text" name="lastname">

</form>

浏览器显示如下：

密码框

密码字段通过标签<input type="password"> 来定义:

<form>

Password: <input type="password" name="pwd">

</form>

浏览器显示效果如下:

注意:密码字段字符不会明文显示，而是以星号或圆点替代。

单选按钮

<input type="radio"> 标签定义了表单单选框选项,name属性定义相同的值可以实现单选框互斥效果

<form>

<input type="radio" name="sex" value="male">Male

<br>

<input type="radio" name="sex" value="female">Female

</form>

浏览器显示效果如下:

复选框

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>

<input type="checkbox" name="vehicle" value="Bike">I have a bike

<br>

<input type="checkbox" name="vehicle" value="Car">I have a car

</form>

浏览器显示效果如下:

文件

定义文件选择字段和 "浏览..." 按钮，供文件上传：

选择一个文件: <input type="file" name="img">

隐藏域

定义隐藏字段，隐藏字段对于用户是不可见的。隐藏字段常常存储默认值，或者由 JavaScript 改变它们的值：

提交按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。
表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

Username: <input type="text" name="user">

</form>

浏览器显示效果如下:

重置按钮

定义重置按钮（重置所有表单值为默认值）：

提示：请谨慎使用重置按钮！对于用户来说，不慎点击了重置按钮是件很恼火的事情。

按钮

没有任何功能的按钮

图像图片按钮

定义图像作为提交按钮：

下拉列表

<select> 元素用来创建下拉列表。

<option> 标签定义下拉列表中的一个选项（一个条目）。

<option value="volvo">Volvo</option>

<option value="mercedes">Mercedes</option>

</select>

<optgroup> 标签经常用于把相关的选项组合在一起。

如果你有很多的选项组合, 你可以使用<optgroup> 标签能够很简单的将相关选项组合在一起。

<option value="volvo">Volvo</option>

</optgroup>

<option value="mercedes">Mercedes</option>

</optgroup>

</select>

多行文本框(文本域)

<textarea> 标签定义一个多行的文本输入控件。
文本区域中可容纳无限数量的文本。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

我是一个文本框。

</textarea>

代码实例

<html>

<head>

</head>

<body>

姓名:<input type="text" name="realname" value="请填入真实姓名" /> <br />

密码:<input type="password" name="pwd" /><br />

<!--单选框

具有互斥效果的单选框,name属性值要相同

单选框提交的数据要通过value属性去定义

-->

前台<input type="radio" name="position" value="1" />

财务<input type="radio" name="position" value="2" />

文员<input type="radio" name="position" value="3" checked />

保安<input type="radio" name="position" value="4" /><br />

<!--

复选框

-->

爱好:

篮球:<input type="checkbox" name="hobby" value="1"/>

足球:<input type="checkbox" name="hobby" value="2"/>

乒乓球:<input type="checkbox" name="hobby" value="3"/>

羽毛球:<input type="checkbox" name="hobby" value="4"/>

各种球:<input type="checkbox" name="hobby" value="5"/><br />

上传头像:<input type="file" name="photo" /><br />

<!--

隐藏域

不显示在页面上,无法修改,无法删除

但是在提交的时候会携带数据

-->

<br />

籍贯:

</optgroup>

<option value="4">Havana</option>

</optgroup>

</optgroup>

</select>

<br />

自我介绍:<br />

</form>

</body>

function test1(){

alert("是不是傻")

}

</script>

</html>

案例

以下是部分代码：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</html>

10.3 HTML5新增type类型

html5版本新增了很多类型，我们挑一些常用的进行展示：

详细学习地址可以参照w3c进行学习：

https://www.w3school.com.cn/html5/att_input_type.asp

email

定义用于 e-mail 地址的字段（当提交表单时会自动对 email 字段的值进行验证）

E-mail: <input type="email" name="usremail">

如果你邮箱填写的不对，那么在提交的时候就会报错误提示

url

定义用于输入 URL 的字段：

添加你的主页: <input type="url" name="homepage">

如果格式错误，那么提交的时候就会报错

color

从拾色器中选取颜色：

选择你喜欢的颜色: <input type="color" name="favcolor">

number

定义用于输入数字的字段（您可以设置可接受数字的限制）：

数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">

请使用下面的属性来规定限制：

max - 规定允许的最大值。
min - 规定允许的最小值。
step - 规定合法数字间隔。
value - 规定默认值。

range

定义用于精确值不重要的输入数字的控件（比如 slider 控件）。您也可以设置可接受数字的限制：

请使用下面的属性来规定限制：

max - 规定允许的最大值。
min - 规定允许的最小值。
step - 规定合法数字间隔。
value - 规定默认值。

date

定义选择日、月、年控件：

生日: <input type="date" name="bday">

month

选择月、年（不带时区）：

生日 ( 月和年 ): <input type="month" name="bdaymonth">

week

定义选择周、年控件（不带时区）：

选择周: <input type="week" name="week_year">

代码

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<br />

请添加你喜欢的网站：

1<input type="range" min="1" max="10" name="myrange" step="2"/>10

<br />

</form>

</body>

</html>

10.4 HTML5新增属性

autofocus 属性

autofocus 属性规定在页面加载时，域自动地获得焦点。
注释：autofocus 属性适用于所有 <input> 标签的类型。

User name: <input type="text" name="user_name" autofocus />

multiple 属性

multiple 属性规定输入域中可选择多个值。

你的国籍：

</select>

placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

required 属性

required 属性规定必须在提交之前填写输入域（不能为空）。

Name: <input type="text" name="usr_name" required />

代码

<body>

<!--

email 校验数据是否符合邮箱语法不够严谨

readonly 只读只能选中读取不能修改可以提交

disabled 不可以用的,只能看,不能选中和复制,不会提交的

-->

邮箱:<input type="email" name="email" autofocus placeholder="aaa"/><br />

<!--

url 验证语法是否符合url结构不够严谨

-->

输入锁定主页:<input type="url" name="myUrl" value="" readonly><br />

选择喜欢的颜色:<input type="color" name="favcolor" /><br />

请输入第一个红球号:<input type="number" name="red1" max="32" min="1" step="2" required/><br />

请输入范围:1<input type="range" name="blue" max="16" min="1" step="1"/>16<br />

请输入生日:<input type="date" name="birthday" disabled/><br />

请输入年月:<input type="month" name="m" /><br />

请输入信息:<input type="week" name="w" /><br />

</form>

</body>

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

HTML5学习笔记

HTML5：超文本标记语言

01 准备

浏览器

学习方法

02 程序员岗位介绍

2.1 概念区分

2.2 前端（web前端）

2.3 后端

2.4 全栈

2.5 关系总结图

2.6 其他

03 互联网技术概念入门

3.1 CS/BS模式

3.2 互联网三大基石

04 HTML5入门

4.1 什么是HTML

浏览器解析html文档的过程

4.2 HTML的作用

4.3 HTML版本

4.4 H5与H4的区别

H4和H5的区别有哪些

4.4 HTML的标准结构

HTML5的标签使用说明：

4.5 IDE介绍

集成开发环境

4.6 用Hbuilder开发步骤

4.7 HTML基本结构

HTML标签

head标签

title标签

meta标签

05 HTML常见基础标签

5.1 HTML专业词汇和概念

标签 Tag

属性和属性值 Attribute

文本 text

元素 element

5.2 标题标签和段落标签

标题标签

段落标签

格式化标签

字符实体

06 超链接和多媒体标签

6.1 超链接标签

基本使用

设置锚点

6.2多媒体标签

图片标签img

音频标签audio

视频标签video

07 列表标签

7.1 有序列表

7.2 无序列表 Unorder list

7.3 列表嵌套

7.4 定义列表 Defination list

08 表格标签

8.1 表格特点

8.2 thead tbody tfoot th

8.3 表格的跨行和跨列

8.4 表格的嵌套(了解)

09 框架

9.1 内嵌框架 iframe

练习-邮箱页面案例

9.2 框架集合 frameset

练习-邮箱页面案例