5天学会HTML及HTML5

Day01

一、计算机基础

1.1 计算机

1.2 软件和硬件

1.3 软件

1.4 应用软件

1.5 服务端和客户端

1.6 C/S 结构和 B/S 结构

二、代码编辑器和浏览器介绍

2.1 代码编辑器

2.2 浏览器

三、HTML概述

3.1 什么是HTML？

3.2 HTML 发展历史

3.3 相关国际组织

四、 Markdown 的用法

4.1 Markdown介绍

4.2 markdown 格式

4.3 typora - markdown 编辑工具

五、 HTML 基本语法

5.1 HTML 文件

5.2 HTML 标签

5.3 HTML 标签属性

5.4 如何掌握一个 HTML 标签

5.5 HTML代码格式

5.6 HTML 注释

5.7 文档声明

5.8 基本页面模板

六、 HTML 常用标签

6.1 主体结构标签

6.2 HEAD 中的标签

6.3 格式排版标签

Day1练习：写一个自我介绍的网页

Day2

一、文本标签

二、图片

2.1 img 标签

2.2 常见的图片格式

三、相对路径和绝对路径

3.1 绝对路径

3.2 相对路径

3.3 HTML 中使用路径的场景

四、超链接和锚点

4.1 a 标签

4.2 超链接

4.3 锚点

Day2练习：写一个使用多个相对路径的网页

Day3

一、列表

1.1 无序列表

2.2 有序列表

2.3 定义列表（了解）

2.4 列表标签总结

二、表格标签

2.1 表格的结构

2.2 表格整体样式设置

2.3 单元格样式设置

2.4 单元格跨行和跨列（重要）

2.5 表格标签总结

三、表单

3.1 表单总体设置

3.2 表单控件

3.3 表单控件的属性

3.4 label 标签的使用

3.5 表单标签总结

Day3练习：完成以下表单的网页制作

Day4

一、框架标签

二、 HTML 字符实体

三、 HTML 全局属性

四、 meta 元信息

五、附录 vscode 使用技巧

Day5

一、HTML5 概述

1.1 HTML5 的由来

1.2 HTML5 优势

1.3 两套标准

1.4 兼容性

二、 HTML5 新增标签

2.1 新增页面结构标签（最重要）

2.2 新增状态标签（了解）

2.3 新增注音标签

2.4 新增文本标签

三、 HTML5 表单新增功能

3.1 表单控件新增属性

3.2 input 标签的 type 属性新增的值(新增的表单控件类型)

3.3 form 标签新增属性

四、 HTML5 音视频

4.1 音视频标签

4.2 浏览器支持的音视频格式

五、 HTML5 新增全局属性

六、 HTML5 兼容性方案

6.1 设置元信息

6.2 html5shiv.js 让IE8以及以下的浏览器支持H5新标签

Day01

一、计算机基础

1.1 计算机

计算机（computer）俗称电脑，是现代一种用于高速计算的电子计算机器，可以进行数值计算，又可以进行逻辑计算，还具有存储记忆功能。是能够按照程序运行，自动、高速处理海量数据的现代化智能电子设备。

现在的计算机被称之冯·诺依曼式计算机，由运算器、控制器、存储器、输入设备、输出设备五大部分组成。

冯·诺依曼（John von Neumann，1903年12月28日-1957年2月8日），美籍匈牙利数学家、计算机科学家、物理学家，被后人称为“现代计算机之父”、“博弈论之父”。

艾伦·图灵（Alan Mathison Turing，1912年6月23日—1954年6月7日），英国数学家、逻辑学家，被后人称为“计算机科学之父”，“人工智能之父”。

1.2 软件和硬件

计算机系统由软件和硬件组成。

硬件： 硬件是看得见、摸得着的物理部件或设备。

软件：软件是以程序和文档的形式存在，通过在计算机上运行来体现他的作用。

1.3 软件

计算机软件总体分为系统软件和应用软件两大类。

系统软件：包括各类操作系统，如windows、Linux、UNIX等，还包括操作系统的补丁程序及硬件驱动程序。

应用软件：为了某种特定的用途而被开发的软件。

1.4 应用软件

应用软件也可以称为应用程序，有很多种分类方式。

根据所实现的功能，可以分为文字处理软件、数据管理软件、图像处理软件等。

根据应用程序所运行的载体不同，可以分为服务端程序和客户端程序。

根据设计结构不同，可以分为 C/S结构程序和 B/S结构程序 。

1.5 服务端和客户端

服务端程序： 也可以称之为后端程序，指的是运行在服务器上的程序。

客户端程序： 指的是运行在客户端计算机上的程序，可以分为 WEB应用、PC桌面应用、Mac桌面应用、Linux桌面应用、IOS应用、安卓应用、小程序等。

1.6 C/S 结构和 B/S 结构

C/S结构： Client/Server（客户机/服务器）结构，客户端程序直接运行在操作系统上，需要安装。

B/S结构： Browser/Server（浏览器/服务器）结构，客户端程序运行在浏览器上，无需安装。

二、代码编辑器和浏览器介绍

2.1 代码编辑器

代码编辑器是程序员用于编写计算机程序的文本编辑器。它通常是一个独立的应用程序，或是作为集成开发环境的一部分存在，或者是一个运行于浏览器中的网页编辑器。由于程序员的主要任务就是编写代码，因此代码编辑器也就成为了最为重要的开发工具。

VSCode （推荐）
WebStorm
HbuilderX
Sublime Text
Atom
Brackets
NodePad++
EditPlus
Vim
Dreamweaver

2.2 浏览器

主流浏览器：Chrome、FireFox、Safari、IE、Opera

其他浏览器： 360安全浏览器、360极速浏览器、搜狗浏览器、UC浏览器、猎豹浏览器、夸克浏览器、海豚浏览器、傲游浏览器、QQ浏览器、2345浏览器等

三、HTML概述

3.1 什么是HTML？

HTML是用来制作网页的标记语言
HTML是Hypertext Markup Language的英文缩写,即超文本标记语言
HTML语言是一种标记语言,不需要编译,直接由浏览器执行
HTML文件是一个文本文件,包含了一些HTML元素,标签等
HTML文件必须使用.html或.htm为文件名后缀
HTML是大小写不敏感的,HTML与html是一样的
HTML是由W3C的维护的
HTML 是通向 WEB 技术世界的钥匙。
TML负责 WEB 页面的结构

“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

3.2 HTML 发展历史

HTML是从2.0版本开始的，实际上没有1.0的官方规范,在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准） HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1997年1月14日，W3C推荐标准
HTML 4.0——1997年12月18日，W3C推荐标准
HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
HTML 5——2014年10月28日，W3C推荐标准

3.3 相关国际组织

IETF(The Internet Engineering Task Force)

国际互联网工程任务组（The Internet Engineering Task Force，简称 IETF）
互联网工程任务组，成立于1985年底，是全球互联网最具权威的技术标准化组织，主要任务是负责互联网相关技术规范的研发和制定，当前绝大多数国际互联网技术标准出自IETF。

W3C(World Wide Web Consortium)

万维网联盟(World Wide Web Consortium)
万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（标准通用标记语言下的一个应用）、可扩展标记语言（标准通用标记语言下的一个子集）以及帮助残障人士有效获得Web内容的信息无障碍指南（WCAG）等，有效促进了Web技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。

WHATWG(Web Hypertext Application Technology Working Group)

网页超文本应用技术工作小组是一个以推动网络HTML 5 标准为目的而成立的组织。
在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。

四、 Markdown 的用法

4.1 Markdown介绍

Markdown 是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。

Markdown是程序员写作必备神器。

为什么推崇 Markdown 写作? 而非 Word 类文档呢？

Markdown 是一段纯文本，使用任何文本编辑器都可以打开，而要打开 Word 文档，必须要先安装 Office 软件。
Markdown 可以很轻松的对文档进行排版，而使用 Word，排版要花费大量的精力。
Markdown 可以很轻松的转为 Html、Word、PDF 文件以及电子书。
现有的大多数媒体平台都已支持 Markdown。

4.2 markdown 格式

# 一级标题                                          标题      
### 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题


前端要学什么？                                       列表
* HTML 超文本标记语言      
* CSS 级联样式表
* JavaScript 浏览器脚本语言


今天我们学习了**前端开发**我很开心                    强调

***                                               分隔线

```
这是代码块                                          代码块
```

4.3 typora - markdown 编辑工具

可去下载typora安装至本地即可使用markdown编辑工具

五、 HTML 基本语法

5.1 HTML 文件

将扩展名为 .html 的文件称为 html 文件或者网页文件
网页文件使用代码编辑工具进行编辑，使用浏览器进行查看效果

5.2 HTML 标签

网页就是由 HTML 标签组成，HTML 标签可以嵌套，形成了结构
HTML 标签具有语义，语义决定什么地方使用什么标签
HTML 标签分为双标签和单标签双标签由起始标签和结束标签组成 <title></title> 单标签也称为自闭和标签 <hr /> 可以省略 / 写为 <hr>
HTML 标签不区分大小写，推荐使用小写

5.3 HTML 标签属性

属性是属于标签的，不同的标签具有不同的属性
属性由属性名和属性值组成，属性值使用单引号或双引号包裹，或者不包裹
一个标签可以设置多个不同的属性，多个属性直接使用空格分隔一个标签如果设置多个相同的属性，后面的不生效
属性不区分大小写

语法格式如下：

<标签名 属性名1="属性值" 属性名2="属性值" ... 属性名N="属性值">
  <!– 输出内容…  -->
</标签名>

5.4 如何掌握一个 HTML 标签

要掌握一个 HTML 标签，我们需要记住以下几点：

标签的语义、功能。
该标签有哪些属性，属性的值是怎样的。
该标签是单标签还是双标签。

5.5 HTML代码格式

任何回车或空格在源代码中都是起作用的，所以在编写HTML代码时，都可以使用回车或者空格进行代码排版，这样可以使代码清晰，也便于团队合作。

必须保持严格的缩进规则，以Tab键为准。

5.6 HTML 注释

<!-- 注释内容 -->
<!--
    这里全是注释
    都是注释
-->

注释的作用：

1. 对代码进行解释说明
2. 调试过程中，可以将不需要执行的代码暂时注释

5.7 文档声明

你可使用此声明在 Internet Explorer 6 及以后版本中切换为严格的标准兼容模式。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html>

作用：告诉浏览器使用标准模式渲染解析页面！

5.8 基本页面模板

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>老年人的第一个网页</title>
    </head>
    <body>
      
    </body>
</html>

六、 HTML 常用标签

6.1 主体结构标签

标签名	语义和功能	单标签还是双标签
html	根标签	双
head	页面头部	双
body	页面主体	双

6.2 HEAD 中的标签

标签名	语义和功能	属性	单标签还是双标签
meta	设置页面元信息	charset：设置字符串编码，推荐utf-8	单
title	设置标题栏标题		双

6.3 格式排版标签

标签名	语义和功能	单标签还是双标签
h1 ~ h6	一级标题 ~ 六级标题	双
p	段落	双
hr	分隔线	单
br	换行	单
pre	原格式显示	双
div	无语义	双

代码练习：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>格式排版标签</title>
    </head>
    <body>
        <!-- 标题标签 -->
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>
        <!-- <h7>七级标题</h7> 不存在的标签-->
        对比文字


        <!-- 分隔线 -->
        <hr>

        <!-- 段落标签 -->
        <p>新华社北京9月8日电 </p>
        <p>新华社北京9月8日电，并在北师大建校120周年和第三十八个教师节来临之际，向该校师生员工、广大校友表示祝贺和问候，向全国广大教师致以节日的祝福。</p>
        <hr>

        <!-- 换行标签  br   -->
        静夜思                                        李白 <br>
        床前明月光 <br>
        疑是地上霜 <br>
        举头望明月 <br>
        低头思故乡 
        <hr>

        <!-- 原格式显示标签 pre -->
        <pre>
            静夜思                                        李白 
床前明月光 
            疑是地上霜 
            举头望明月 
            低头思故乡 
        </pre>
        <hr>

        <!-- HTML中最常用的标签  div 无语义-->
        <div>时代路科技来看</div>
        <div>
            <div></div>
            <div>
                <div></div>
                <div></div>
            </div>
            <div></div>
        </div>
        
    </body>
</html>

Day1练习：写一个自我介绍的网页

Day2

一、文本标签

标签名	语义和功能	单标签还是双标签
em	表示强调，默认表现为斜体字	双标签
strong	表示强调，默认表现为粗体字	双标签
del	表示删除的内容，默认表现为加删除线	双标签
ins	表示增加的内容，默认表现为加下划线	双标签
sub	表示下标字	双标签
sup	表示上标字	双标签
span	无语义	双标签

以上为常用标签，以下文本标签仅作为了解

<cite>          用于引证、举例、(标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题)通常                为斜体字
<dfn>           定义一个定义项目
<code>          定义计算机代码文本
<samp>          定义样式文本 标签并不经常使用。只有在要从正常的上下文中将某些短字符序列提取出来，对它们加以                强调的极少情况下，才使用这个标签。
<kbd>           定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<abbr>          定义缩写 配合title属性  (IE6以上)
<bdo>           来覆盖默认的文本方向 dir属性 值: lrt  rtl
<var>           定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<small>         标签定义小型文本（和旁注）
<b>             粗体字标签 根据 HTML 5 的规范，<b> 标签应该做为最后的选择，只有在没有其他标记比较合适时                才使用它。
<i>             斜体字标签 标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。
<u>             下划线字体标签 标签定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词。 请                尽量避免使用该标签为文本加下划线，用户会把它混淆为一个超链接。
<q>             签定义一个短的引用。浏览器经常会在这种引用的周围插入引号。(小段文字)
<blockquote>    标签定义摘自另一个源的块引用。浏览器通常会对 <blockquote> 元素进行缩进。(大段文字) (块                状元素)
<address>       定义地址 通常为斜体 (注意非通讯地址)  块状元素
<font>          H5已删除 字体标签，可以通过标签的属性指定文字的大小、颜色及字体等信息
<tt>            H5已删除 打字机文字
<big>           H5已删除 大型字体标签
<strike>        H5已删除 添加删除线
<acronym>       H5已删除 首字母缩写 请使用<abbr>代替

HTML 参考手册_w3cschool

二、图片

2.1 img 标签

标签名	语义和功能	属性	单标签还是双标签
img	图片	src：设置图片文件地址。 alt：设置图片代替文字。 width：设置图片宽度。 height：设置图片高度	单标签

总结：

1. 在图片无法正常显示的会显示 alt 标签所设置的代替文字
2. 单独设置图片的宽高，另一个会根据比例自动计算；同时设置宽和高需要计算好比例，否则图片会拉伸

2.2 常见的图片格式

jpg / jpeg
png
gif
bmp
....

三、相对路径和绝对路径

当前文件： 当前所书写代码的文件。

目标文件： 当前文件中要引用的文件。

3.1 绝对路径

网络绝对路径： 在互联网上的绝对地址，也称为 URL （统一资源定位符），前端开发中的绝对径路主要指网络绝对路径。如 https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png

本地绝对路径： 在某台电脑上的绝对地址，如 D:\Library\SH220907\Day02_HTML\课堂案例\02-图片标签\安妮私房照.jpg，前端开发中并不建议使用。

3.2 相对路径

./ 开头的路径： 目标文件在当前文件的同级或者下级以及更下级； ./的意思是当前文件所在的目录，可以省略。
../ 开头的路径： 目标文件在当前文件的上级或者必须通过上级才能找到； ../的意思是当前文件的上一级目录。

3.3 HTML 中使用路径的场景

1. img 标签引入图片
2. video 标签引入视频
3. audio 标签引入音频
4. iframe 标签引入多种资料
5. script 标签引入 js 文件
6. a 标签设置超链接
7. link 标签关联 css 文件
...

四、超链接和锚点

4.1 a 标签

标签名	语义和功能	属性	单标签还是双标签
a	超链接	href：设置目标文件的地址。 target：设置目标文件在哪个窗口打开。	双标签

总结：

1. 如果 a 标签没有 href 属性，不能被称为超链接
2. target 属性的默认值是 _self，表示目标文件在本窗口打开，如果值设置为 _blank，表示目标文件在新窗口打开

4.2 超链接

① 目标文件是网页

<a href="http://www.baidu.com/index.html">百度</a><br>
<a href="../02-图片标签/01-图片标签.html" target="_blank">图片标签实例页面</a>

点击超链接直接打开目标文件

② 目标文件是网页以外的其他类型文件

<a href="resouces/小乐老师的业余生活.jpg" target="_blank">[图片]小乐老师的业余生活</a><br>
<a href="resouces/小乐老师的性福生活.mp4" target="_blank">[视频]小乐老师的性福生活</a><br>
<a href="resouces/小乐老师的私房照片.7z" target="_blank">[压缩文件]小乐老师的私房照片</a><br>
<a href="resouces/如何拥有百亿资产.docx">[word文档]如何拥有百亿资产</a><br>
<a href="resouces/如何30岁之前走上人生巅峰.pdf" target="_blank">[pdf文档]如何30岁之前走上人生巅峰</a>

1. 如果目标文件是浏览器可以打开的文件类型，点击超链接直接打开
2. 如果目标文件是浏览器无法打开的文件类型，点击超链接直接下载

③ 超链接的其他特殊功能（打开应用）

<a href="mailto:fuming@atguigu.com">发邮件</a> <br>
<a href="tel:18618176338">打电话</a> <br>
<a href="sms:18618176338">发短信</a> <br>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=840937370&amp;site=qq&amp;menu=yes">打开QQ</a>

④ href 的值是空的点击刷新

<a href="">刷新</a>

4.3 锚点

① 如何设置锚点

给标签设置 id 属性，该标签就可以作为锚点，id 属性的值就是锚点名

② 如何跳转到锚点（通过超链接跳转到锚点）

<!-- 跳转到本页面的锚点 -->
<a href="#锚点名"> </a>

<!-- 跳转到指定页面的锚点 -->
<a href="页面的地址#锚点名"> </a>

<!-- 返回页面顶部 -->
<a href="#"> </a>

Day2练习：写一个使用多个相对路径的网页

Day3

一、列表

1.1 无序列表

<ul>
    <li>超文本标记语言</li>
    <li>层叠样式表</li>
    <li>JavaScript</li>
    <li>Vue</li>
    <li>React</li>
    <li>小程序</li>
</ul>

<ul>
    <li>
        <a href="#">实施创新驱动发展战略</a>
    </li>
    <li>
        <a href="#">中国跨度！“我们这十年”主题宣传片发布</a>
    </li>
</ul>

无序列表可以用网页中的文章列表、新闻列表、导航条等等...

2.2 有序列表

<ol>
     <li>小乐</li>
     <li>马云</li>
     <li>马斯克</li>
     <li>马化腾</li>
</ol>

有序列表适合表示一组有顺序的列表，如各类排行榜等...

2.3 定义列表（了解）

<!-- 一个 dt 对应一个 dd -->
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
    <dt>JavaScript</dt>
    <dd>一种浏览器脚本语言</dd>
</dl>

<!-- 一个 dt 对应多个 dd -->
<dl>
    <dt>如何掌握一个 HTML 标签？</dt>
    <dd>该标签的语义和功能</dd>
    <dd>该标签的属性以及属性值如何设置</dd>
    <dd>该标签是双标签还是单标签</dd>
</dl>

2.4 列表标签总结

标签名	功能和语义	单标签还是双标签
li	列表项	双
ul	无序列表	双
ol	有序列表	双
dl	定义列表	双
dt	定义列表标题	双
dd	定义列表描述	双

建议：

1. ul、ol 中只直接包裹 li 标签； li 标签也只被 ul 标签或 ol 标签包裹。
2. li 标签就可以包裹任何标签（li 不要直接再包裹 li）

二、表格标签

2.1 表格的结构

<table border="1">
    <!-- 表格的标题 -->
    <caption>用户信息表</caption>

    <!-- 表格头 -->
    <thead>
        <!-- 行 -->
        <tr>
            <!-- 表头单元格 -->
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>电话</th>
            <th>地址</th>
        </tr>
    </thead>

    <!-- 表格体 -->
    <tbody>
        <!-- 行 -->
        <tr>
            <!-- 单元格 -->
            <td>1</td>
            <td>曹操</td>
            <td>男</td>
            <td>18754321349</td>
            <td>纽约</td>
        </tr>
        <tr>
            <td>2</td>
            <td>刘备</td>
            <td>男</td>
            <td>18754321348</td>
            <td>伦敦</td>
        </tr>
        <tr>
            <td>3</td>
            <td>孙权</td>
            <td>男</td>
            <td>18754321347</td>
            <td>莫斯科</td>
        </tr>
        <tr>
            <td>4</td>
            <td>高小乐</td>
            <td>男</td>
            <td>18754321346</td>
            <td>新德里</td>
        </tr>

    </tbody>

    <!-- 表格脚 -->
    <tfoot></tfoot>
</table>

table
    cpation
    thead
        tr
            th/td
    tbody
        tr
            td/th
    tfoot
        tr
            td/th

如果省略 thead、tbody、tfoot，table 直接包裹 tr，浏览器会自动添加一个 tbody 包裹所有的 tr

2.2 表格整体样式设置

给 table 标签设置如下属性：

width: 设置表格总宽度
height： 设置表格总高度
border: 设置边框的宽度
cellspacing： 设置单元格之间的距离
cellpadding:  设置单元格边框与里面的文本内容的距离

2.3 单元格样式设置

① 设置单元格中内容对齐方式

1. thead、tbody、tfoot、tr、th、td 这些标签可以设置 align 属性，属性的值： left、right、center，该属性可以设置单元格中内容的水平对齐方式
2. thead、tbody、tfoot、tr、th、td 这些标签可以设置 valign 属性，属性的值： top、bottom、middle，该属性可以设置单元格中内容的垂直对齐方式

② 设置单元格宽高

1. 给 td/th 设置 width 属性，可以设置所在列的列宽
2. 给 td/th 设置 height 属性， 可以设置所在行的行高； tr 也具有 height 属性可以设置行高。

2.4 单元格跨行和跨列（重要）

1. 给 td/th 设置 rowspan 属性，可以设置跨越的行数，默认值是 1，可以设置为其他数字。
2. 给 td/th 设置 colspan 属性，可以设置跨越的列数，默认值是 1，可以设置为其他数字。

2.5 表格标签总结

标签名	功能和语义	属性	单标签还是双标签
table	表格	width height border cellspacing cellpadding	双标签
caption	表格标题		双标签
thead	表格头	align valign	双标签
tbody	表格体	align valign	双标签
tfoot	表格脚	align valign	双标签
tr	行	align valign height	双标签
td	单元格	align valign width height rowspan colspan	双标签
th	表头单元格	align valign width height rowspan colspan	双标签

三、表单

3.1 表单总体设置

<form action="https://www.baidu.com/s" target="_blank">
    <input type="text" name="wd">
    <button>提交</button>
</form>

3.2 表单控件

① 文本输入框

<input type="text"> <br>
<input type="text" maxlength="6"> <!-- maxlenth 可以设置最大可输入长度 -->
<input type="text" value="高小乐..."> 
<input> <!-- type 的默认值是 text -->
<input type="sb"> <!-- 给 type 设置了不存在的值，相当于 text -->

② 密码输入框

<input type="password"> 
<input type="password" maxlength="10" value="hello"> <!-- maxlenth 可以设置最大可输入长度 -->

③ 单选框

<input type="radio" name="gender" value="male">男 
<input type="radio" name="gender" value="female">女  
<input type="radio" name="gender" value="else" checked>其他

1. value 的值才是真正提交到后端的数据
2. 如果想实现单选效果，必须给多个单选框 input 设置相同的 name 属性值
3. 设置 checked 属性可以默认选中，该属性不需要值

④ 复选框

<input type="checkbox" name="hobby" value="1" checked> 吃饭 
<input type="checkbox" name="hobby" value="2"> 睡觉 
<input type="checkbox" name="hobby" value="3"> 发呆 
<input type="checkbox" name="hobby" value="4" checked> 敲代码

1. value 的值才是真正提交到后端的数据
2. 设置 checked 属性可以默认选中，该属性不需要值

⑤ 提交按钮

<!-- input 标签实现 value 属性可以设置按钮上的文字-->
<input type="submit">
<input type="submit" value="登录">

<!-- button 标签实现 , button 标签 type 属性的默认值是 submit -->
<button type="submit">免费注册</button>
<button>搜索</button>

⑥ 重置按钮

<!-- input 标签实现 -->
<input type="reset" value="重置">

<!-- button 标签实现 -->
<button type="reset">重置</button>

⑦ 普通按钮

<!-- input 标签实现 -->
<input type="button" value="按钮">
            
<!-- button 标签实现 -->
<button type="button">按钮</button>

⑧ 文本域

<textarea rows="10" cols="60">我是文本域...</textarea>

属性 rows 可以设置默认显示的行数，实际影响高度
属性 cols 可以设置默认显示的列数（每行的字数），实际影响宽度

⑨ 下拉选项

<select>
    <option value="1">新疆维吾尔自治区</option>
    <option value="2">广西壮族自治区</option>
    <option value="3" selected>内蒙古自治区</option>
    <option value="4">香港特别行政区</option>
</select>

1. option 的 value 属性设置的是真正提交的数据；如果没有设置 value，会将双标签所包裹的内容提交
2. option 设置 selected 属性可以默认选中，该属性不需要设置值

3.3 表单控件的属性

① name 属性

1. 为该表单控件设置一个标识，提交到后端之后使用
2. 多个单选框如果要实现单选功能，需要设置相同的 name 值
3. 下拉选项需要将 name 设置到 select 标签

② value 属性

1. 文本输入框、密码输入框可以设置默认输入的内容
2. 单选框、复选框设置真正提交的数据
3. input 标签实现的按钮，可以设置按钮上的文字
4. option 可以设置真正提交的数据
5. select、textarea 没有 value 属性

③ disabled 属性

1. 表单控件设置该属性之后，变为不可用状态
2. 该属性不需要设置值
3. 下拉选项，select 设置 disabled 属性，整个下拉选项不可用； option 设置 disabled 属性，只有该选项不可选

3.4 label 标签的使用

<!-- label 标签的 for 属性值与表单控件的 id 属性值一致 -->
<!-- 适合于文本输入框、密码输入框、文本域、下拉选项-->
<label for="usernameInp">用户名：</label> 
<input type="text" id="usernameInp"> <br>

<!-- label 标签将表单控件与文字一起包裹起来 -->
<!-- 适合于单选框和复选框 -->
性别：
<label>
    <input type="radio" name="gender">男
</label>
<label>
    <input type="radio" name="gender">女
</label>
<label>
    <input type="radio" name="gender">其他
</label>

3.5 表单标签总结

标签名	语义和功能	属性	单标签和双标签
form	表单	action：设置提交地址。 target：递交地址的打开窗口。 method：提交的请求方式。	双标签
input	多种类型的表单控件	type：设置表单控件类型。 value：表单控件的值。 disabled：设置表单控件不可用。 maxlength: 设置最大可输入长度。 checked：设置默认选中	单标签
button	按钮	type：设置按钮的类型 disabled：设置表单控件不可用。	双标签
textarea	文本域	rows：设置默认显示的行数。 cols：默认显示的列数。 disabled：设置表单控件不可用。	双标签
select	下拉选项框	disabled：设置表单控件不可用。	双标签
option	下拉选项的选项	value: 实际提交的值。 selected：默认选中 disabled：设置表单控件不可用。	双标签
label	关联表单控件	for：值与表单控件的id一致	双标签

1. input 标签的 type 属性的值有 text、password、radio、checkbox、submit、reset、button，默认值是 text
2. button 标签的 type 属性的值有 submit、reset、button，默认值是 submit

Day3练习：完成以下表单的网页制作

Day4

一、框架标签

标签名	功能和语义	属性	单标签还是双标签
iframe	内联框架	src：目标文件地址。 frameborder：是否有边框，值0或者1。 width：宽度。 height：高度	双标签

1. 使用 iframe 可以在当前页面中嵌入其他类型的文件，包括网页、图片、视频等
2. 使用 iframe 加广告
3. iframe 可以作为超链接和form的target值

二、 HTML 字符实体

空格      &nbsp;
<        &lt;
>        &gt;
&        &amp;

¥        &yen;
©        &copy;
x        &times;
÷        &divide;

三、 HTML 全局属性

title       设置提示文字
name        设置名字
id          设置唯一标识，标签的id属性值必须是唯一的
class       设置类名
style       设置样式
lang        设置语言

四、 meta 元信息

<!-- 网页字符集编码 -->
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8">

<!-- 网页关键字 -->
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">

<!-- 网页描述信息 -->
<meta name="description" content="80字以内的一段话，与网站内容相关">

<!-- 页面刷新 -->
<!-- <meta http-equiv="refresh" content="3">     -->
<meta http-equiv="refresh" content="3;url=http://www.atguigu.com">

<!-- 告诉IE使用最新的引擎渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 设置完美视口，给移动端的浏览器设置的 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

五、附录 vscode 使用技巧

1. 相关设置
   ① 目录结构的缩进距离：  Tree:Indent
   ② 空目录收缩显示：  Compact Folders
   ③ 文件图标主题
   
2. 相关扩展推荐
   Live Server      web服务器方式打开网页
   Open in Browser  本地方式打开网页（与双击打开是一致的）
   chinese lorem    中文乱数假文扩展
3. 英文假文：lorem； lorem300（300个单词）
   中文假文：jw; jw800(800个字)   
4. vscode 内置 emmet 插件

Day5

一、HTML5 概述

HTML5 是下一代 HTML 标准，2014年10月由万维网联盟（W3C）完成标准制定。

1.1 HTML5 的由来

HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。
HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”
2013年5月6日， HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。
2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。

1.2 HTML5 优势

提高可用性和改进用户的友好体验；
有几个新的标签，这将有助于开发人员定义重要的内容；
可以给站点带来更多的多媒体元素(视频和音频)；
可以很好的替代FLASH和Silverlight；
当涉及到网站的抓取和索引的时候，对于SEO很友好；
将被大量应用于移动应用程序和游戏；
可移植性好。

1.3 两套标准

W3C 更新到了 HTML5.2 ： HTML Standard

WHATWG 称之为 HTML 现行标准（HTML Standard） HTML Standard

2019年5月28日，W3C 与 WHATWG 就共同开发 HTML 与 DOM 规范达成协议

传送门：W3C 与 WHATWG 就共同开发 HTML 与 DOM 规范达成协议 - W3C中国

1.4 兼容性

chrome、Safari、opera、Firefox以及各种以wekkit（chromium）为内核的国产浏览器。
Internet Explorer 9 以及以上版本

二、 HTML5 新增标签

2.1 新增页面结构标签（最重要）

标签名	语义和功能	单标签还是双标签
header	页头	双标签
footer	页脚	双标签
nav	导航	双标签
section	页面中的一部分或文章中一段	双标签
aside	侧边栏	双标签
article	文章、新闻、博客	双标签
main	页面主要内容	双标签

1. aside 和 article 相当于特殊的 section
2. main 标签 whatwg 标准不支持，IE不支持，其他浏览器都可以使用
3. hgroup 表示标题（h1~h6）的包裹标签, w3c 不支持，了解，不常用

2.2 新增状态标签（了解）

标签名	语义和功能	属性	单标签还是双标签
meter	静态度量	max、min、value 等	双标签
progress	动态进度	max、value	双标签

meter 和 progress 什么区别：

1. meter 表示静态的度量，如温度、湿度、磁盘容量、电池电量等
2. progress 表示动态的进度

2.3 新增注音标签

标签名	语义和功能	属性	单标签还是双标签
ruby	包裹标签		双标签
rt	具体注音		双标签

<ruby>
     饕餮
     <rt>taotie</rt>
</ruby>

2.4 新增文本标签

标签名	语义和功能	属性	单标签还是双标签
mark	标记		双标签

可用于搜索结果中关键字的标记！

三、 HTML5 表单新增功能

3.1 表单控件新增属性

旧标准存在的表单控件属性：

name
value
disabled

新标准增加的表单控件属性：

placeholder     设置文字提示（用于文本输入类）
required        表示必填或必选（不需要设置值）
autofocus       自动获取焦点（不需要设置值）
autocomplete    设置浏览器是否记录输入历史 on：记录； off 表示不记录， 默认值是 on
pattern         设置正则验证表单

3.2 input 标签的 type 属性新增的值(新增的表单控件类型)

旧标准 input 标签 type 属性的值：

text、password、radio、checkbox、submit、reset、button

① 输入框类（5个）

<!-- 邮箱 -->
<input type="email" placeholder="请输入邮箱">


<!-- 数字 -->
<input type="number" placeholder="请输入数字"> <br>
<input type="number" max="10000" min="-200" placeholder="请输入数字"> <br>
<input type="number" max="1" min="0" step="0.1" placeholder="请输入小数"> <br>


<!-- 网址 url -->
<input type="url" placeholder="请输入网址">


<!-- 电话 不会验证，移动端浏览器打开，点击会弹出数字按键-->
<input type="tel" placeholder="请输入电话号码">


<!-- 搜索框 -->
<input type="search" placeholder="搜索...">
② 范围选择框（1个）

<input type="range" class="range-input" min="0" max="10" step="0.01">

③ 颜色选择框（1个）

<input type="color">

④ 日期时间选择框类（5个）

<!-- 选择年月日 -->
<input type="date"> <br>

<!-- 选择年月 -->
<input type="month"> <br>

<!-- 选择哪一年的第几周 -->
<input type="week"> <br>

<!-- 选择时间 -->
<input type="time"><br>

<!-- 选择日期+时间 -->
<input type="datetime-local">

3.3 form 标签新增属性

novalidate      设置该属性可以阻止表单验证（不需要设置值）

四、 HTML5 音视频

4.1 音视频标签

标签名	功能和语义	属性	单标签还是双标签
video	引入视频	src：设置视频文件地址。 width：设置宽度。 height：设置高度。 controls：显示控制条，不需要值。 muted：默认静音，不需要值。 autoplay：自动播放，不需要值。 loop：循环播放，不需要值。 preload：预先加载，不需要值。 poster：设置封面图的地址	双标签
audio	引入音频·	src：设置视频文件地址。 controls：显示控制条，不需要值。 muted：默认静音，不需要值。 autoplay：自动播放，不需要值。 loop：循环播放，不需要值。 preload：预先加载，不需要值。	双标签
source	引入音频或视频	src：音视频文件地址。 type：音视频文件类型	单标签

4.2 浏览器支持的音视频格式

① 视频格式
mp4（推荐）
webm
ogg
② 音频格式
mp3（推荐）
wav
ogg

五、 HTML5 新增全局属性

旧标准中的全局属性：

name
id
class
style
title
lang

HTML5 标准新增的全局属性

hidden      隐藏元素，不需要设置值

a 标签新增的属性：

download    点击下载，不需要设置值；

1. 不论文件浏览器是否能打开，点击都会下载
2. 只有与网页文件同服务器的目标文件，才能实现此功能

六、 HTML5 兼容性方案

6.1 设置元信息

<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
<meta name="renderer" content="webkit">

6.2 html5shiv.js 让IE8以及以下的浏览器支持H5新标签

<!--[if lt ie 9]>
    <script src="../js/html5shiv.js"></script>
<![endif]-->

5天学会HTML及HTML5

Day01

一、计算机基础

1.1 计算机

1.2 软件和硬件

1.3 软件

1.4 应用软件

1.5 服务端和客户端

1.6 C/S 结构和 B/S 结构

二、 代码编辑器和浏览器介绍

2.1 代码编辑器

2.2 浏览器

三、HTML概述

3.1 什么是HTML？

3.2 HTML 发展历史

3.3 相关国际组织

四、 Markdown 的用法

4.1 Markdown介绍

4.2 markdown 格式

4.3 typora - markdown 编辑工具

五、 HTML 基本语法

5.1 HTML 文件

5.2 HTML 标签

5.3 HTML 标签属性

5.4 如何掌握一个 HTML 标签

5.5 HTML代码格式

5.6 HTML 注释

5.7 文档声明

5.8 基本页面模板

六、 HTML 常用标签

6.1 主体结构标签

6.2 HEAD 中的标签

6.3 格式排版标签

Day1练习：写一个自我介绍的网页

Day2

一、 文本标签

二、 图片

2.1 img 标签

2.2 常见的图片格式

三、 相对路径和绝对路径

3.1 绝对路径

3.2 相对路径

3.3 HTML 中使用路径的场景

四、 超链接和锚点

4.1 a 标签

4.2 超链接

4.3 锚点

Day2练习： 写一个使用多个相对路径的网页

Day3

一、 列表

1.1 无序列表

2.2 有序列表

2.3 定义列表（了解）

2.4 列表标签总结

二、 表格标签

2.1 表格的结构

2.2 表格整体样式设置

2.3 单元格样式设置

2.4 单元格跨行和跨列（重要）

2.5 表格标签总结

三、 表单

3.1 表单总体设置

3.2 表单控件

3.3 表单控件的属性

3.4 label 标签的使用

3.5 表单标签总结

Day3练习：完成以下表单的网页制作

Day4

一、 框架标签

二、 HTML 字符实体

三、 HTML 全局属性

四、 meta 元信息

五、附录 vscode 使用技巧

Day5

一、HTML5 概述

1.1 HTML5 的由来

1.2 HTML5 优势

1.3 两套标准

1.4 兼容性

二、 HTML5 新增标签

二、代码编辑器和浏览器介绍

一、文本标签

二、图片

三、相对路径和绝对路径

四、超链接和锚点

Day2练习：写一个使用多个相对路径的网页

一、列表

二、表格标签

三、表单

一、框架标签