课程目标：
- 使用HTML5进行网站布局
- 使用CSS3进行网站美化
- 开发精美的商业网站
第一章 HTML5基础
概念：
网页 ：互联网的基础，网络页面,网页：文字、图片、声音、视频、VR虚幻等；
网站：淘宝网、京东、亚马逊、腾讯、新浪、网易、哔哩哔哩等，网站就是网页的集合。
浏览器：查看网页的工具；主浏览器：谷歌浏览器Chrome、火狐浏览器、IE（Edge);360、2345、百度等这些浏览器上述三种的；
1.HTML
HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup language)，是网页制作所必备的。“超文本**”**就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 目前版本是第5代，简称为HTML5，该 技术结合了 HTML4.01 的相关标准并革新 。
2.WWW
2.1 www来源
WWW是环球信息网的缩写，（亦作“Web”、“WWW”、“‘W3’”，英文全称为“World Wide Web”），中文名字为“万维网”，"环球网"等，常简称为Web。 分为Web客户端和Web服务器程序。 WWW可以让Web客户端（常用浏览器）访问浏览Web服务器上的页面。 是一个由许多互相链接的超文本组成的系统，通过互联网访问。
发明者：蒂姆·伯纳斯·李 (他是“互联网之父”、“千年技术奖”首位获奖者，他是被全球人赞扬的英国科学家。他，是蒂姆·伯纳斯·李。他是万维网的发明者，南安普顿大学与麻省理工学院教授。2017年，他因“发明万维网、第一个浏览器和使万维网得以扩展的基本协议和算法”而获得2016年度的图灵奖。)
2.2 W3C
World Wide Web Consortium（万维网联盟）
成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
http://www.w3.org/
http://www.chinaw3c.org/
2.3W3C标准
结构化标准语言（XHTML 、XML）：网页结构html
表现标准语言（CSS）:CSS
行为标准（DOM、ECMAScript ）：JS
3.协议
3.1http:
3.2 https:
HTTPS （全称：Hyper Text Transfer Protocol over SecureSocket Layer），是以安全为目标的 HTTP 通道，在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性
4.HTML的基本结构
理解网页结构：
<!DOCTYPE html><!--告诉浏览器使用什么规范,html超文本规范-->
<html lang="en"><!--表示使用的语言是en,英文;utf-8-->
<head>
<title>Document</title>
</head>
<body>
身体
</body>
</html>
5.第一个小程序
第一个小程序，都是“Hello World”。
使用记事本写个网页，显露一把。
使用更为快捷的开发工具：EditPlus、HBuilderX、VSCode。
html:标记性的语言，这里面的元素，主要是标签。
VSCode离线插件：https://marketplace.visualstudio.com/vscode，进去输入需要的插件，点安装会打开VScode。
6.标签
6.1.格式和常用标签
标签的规范，必须通过尖括号括起来；成对出现；双标记标签和单标记标签；
标签关系：父子关系；兄弟关系；
6.2 HTML标签、Head标签、BODY标签
title:
6.3.meta
meta:标记信息；
charset:表示字符编码，utf-8;en;GBK;
name=“author”:作者
name=“Keywords”:关键字;一般是baidu、谷歌搜索的时候，利于搜索喂食；
name=“description”:描述上面这些 对应的另外内容是content
直接使用content="内容"来写;也是搜索用；
6.4 H1–>h6及hr标签
H1标题最大，H6标题最小;
6.5 p、br、pre标签
6.6无序列表和有序列表
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。
无序列表：没有顺序的列表，默认有个小圆点。
应用场景：一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="张晨光">
<meta name="keywords" content="HTML5的介绍，全球直播">
<meta name="description" content="比尔盖茨，扎克伯格，马云，马化腾亲自主持">
<title></title>
</head>
<body>
<!-- ul:是无序列表，默认是实心圆点;
ul:un order list
ul的属性是type;属性是描述该标签干嘛;
值：
circle:空心圆
square:实心正方形
disc:实心圆，默认格式，不写也会有
-->
<ul type="circle">
<li>华为</li>
<li>三星</li>
<li>一加</li>
</ul>
<ul type="square">
<li>华为</li>
<li>三星</li>
<li>一加</li>
</ul>
<ul type="disc">
<li>华为</li>
<li>三星</li>
<li>一加</li>
</ul>
</body>
</html>
有序列表：
场景：一般用于排序类型的列表，如试卷、问卷选项等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有序列表</title>
</head>
<body>
<!-- 有序列表：
ol:order list
type: 默认数字
值:
1 后面1 2 3
A 后面A B C
I 后面I II III IV
reversed="reversed" 倒序
start:表示从哪个开始,用于数字;
-->
<ol type="A">
<li>冠军</li>
<li>亚军</li>
<li>季军</li>
<li>四军</li>
</ol>
</body>
</html>
6.7 字体标签
b、I、U、strong、em等标签。
<!--
font标签：
属性：
size：大小
face:字体样式
color:颜色
-->
<font size="1">学院开始进行篮球比赛</font><br>
<font color="red">学院开始进行篮球比赛</font><br>
<font face="楷体">学院开始进行篮球比赛</font>
6.8居中标签
center
6.9 图片标签
<img 空格 src=‘图片的路径’ title=‘’/>
图片路径是重点，首先是找到图片，把图片放到和网页同一个文件夹，并且你要测试没有这个图片会出来叉号的效果
正确效果：
title：当光标放上去的时候，会出来这个提示信息。
src：source来源
加上宽width
高 height;
格式：width/height=“数字 px” px:就是计算机或者手机，多少像素；
新的图片类型：bmp、png、jpg、gif、jfif、webp
WebP（发音：weppy）是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式，派生自影像编码格式VP8，被认为是WebM多媒体格式的姊妹项目，是由Google在购买[On2 Technologies](https://baike.baidu.com/item/On2 Technologies)后发展出来，以BSD授权条款发布。
WebP最初在2010年发布，目标是减少文件大小，但达到和JPEG格式相同的图片质量，希望能够减少图片档在网络上的发送时间。2011年11月8日，Google开始让WebP支持无损压缩和透明色（alpha通道）的功能，而在2012年8月16日的参考实做libwebp 0.2.0中正式支持。根据Google较早的测试，WebP的无损压缩比网络上找到的PNG档少了45%的文件大小，即使这些PNG档在使用pngcrush和PNGOUT处理过，WebP还是可以减少28%的文件大小。
图片存储格式之一，由JPEG格式衍生而来，后缀为".jfif"。
JPEG本身只有描述如何将一个图像转换为字节的数据串流（streaming），但并没有说明这些字节如何在任何特定的储存媒体上被封存起来。一个由独立JPEG小组（Independent JPEG Group）所建立的额外标准，称为JFIF（JPEG File Interchange Format，JPEG档案交换格式），详细说明如何从一个JPEG串流，产出一个适合于电脑储存和传输（像是在因特网上）的档案。当有人称呼一个"JPEG档案"，一般而言他是意指一个JFIF档案，或有时候是一个Exif JPEG档案。然而，也有其他以JPEG为基础的档案格式，像是JNG。
JPEG/JFIF是最普遍在万维网（World Wide Web）上被用来储存和传输图片的格式。它并不适合于线条绘图（drawing）和其他文字或图示（iconic）的图形，因为它的压缩方法用在这些图形的型态上，会得到不适当的结果（PNG和GIF格式通常是用来针对这种目的之图形；GIF每一像素只有8位元，并不很适合于用在彩色照片，PNG可以被用来无失真地储存照片，但是档案太大让它不适合在网页上放照片）。
路径问题：
<body>
<!--
1.访问图片;src='en.jpg'
2.src=./en.jpg; .:当前目录; ./：当前目录下;
3.访问上级目录下的图片;
当前目录：day01；
../: 上级是html
../shangji: html目录下的shangji问价夹
-->
<img src="en.jpg" width="300" height="200">
<img src="./en.jpg" width="302" height="201">
<img src="img/2.png" width="302" height="201">
<img src="../shangjiimg/js.jpg" width="302" height="201">
<img src="../shangjiimg/js.jpg" width="302" height="201">
</body>
6.10超链接
网站：有很多内容来组成，这些就是网页组成，信息孤岛。网页与网页之间、关联就是通过超链接，来实现。
<a href='网址'></a>
打开到新窗口: 属性target=“_blank”
连接到邮箱<a href=‘mailto:xx@yy.com’>联系我<a>
锚点案例
6.11 多媒体
了解多媒体包含的类型：音频、视频、动画、图片等
视频video
video,指定视频来源 、是否播放。
| 浏览器格式 | IE | Firefox | opera | Chrome | Safari |
|---|---|---|---|---|---|
| Ogg | 不支持 | 3.5+ | 10.5+ | 5.0+ | 不支持 |
| MPEG4 | 9.0+ | 不支持 | 不支持 | 5.0+ | 3.0+ |
| WebM | 不支持 | 4.0+ | 10.6+ | 6.0+ | 不支持 |
| 格式 | 文件 | 描述 |
|---|---|---|
| AVI | .avi | AVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式，但非 Windows 计算机并不总是能够播放。 |
| WMV | .wmv | Windows Media 格式是由微软开发的。Windows Media 在因特网上很常见，但是如果未安装额外的（免费）组件，就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放，因为没有合适的播放器。 |
| MPEG | .mpg.mpeg | MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的，得到了所有最流行的浏览器的支持。 |
| QuickTime | .mov | QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式，但是 QuickTime 电影不能在没有安装额外的（免费）组件的 Windows 计算机上播放。 |
| RealVideo | .rm.ram | RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下（在线视频、网络电视）的视频流。由于是低带宽优先的，质量常会降低。 |
| Flash | .swf.flv | Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。 |
| Mpeg-4 | .mp4 | Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上，YouTube 推荐使用 MP4。YouTube 接收多种格式，然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4，将其作为 Flash 播放器和 HTML5 的因特网共享格式。 |
<video controls>
<source src="video/video.webm" type="video/webm"/>
<source src="video/video.mp4" type="video/mp4"/>
</video>
<!-- 视频;播放不能播放；在谷歌浏览器要播放，需要设置muted；但是muted是静音播放；
如果需要有声音，必须通过js来操作，放置声音。
-->
<video src="./第九章-9.1.0-知识点概述.mp4" width="900" height="600"
controls="controls" autoplay="autoplay" id="video" muted="muted"></video>
<button id="btn" onclick="play()">播放</button>
<script type="text/javascript">
function play(){
document.getElementById('video').muted=false;
//如果设置非muted,不自动播放，则这里换成
//document.getElementById('video').play();
}
</script>
音频audio
声音格式
MP3是一种音频压缩技术，其全称是动态影像专家压缩标准音频层面3（Moving Picture Experts Group Audio Layer III），简称为MP3。它被设计用来大幅度地降低音频数据量。如果你的站点是音乐类型的，你可以选择mp3格式。
<audio controls>
<source src="music/music.mp3" type="audio/mpeg"/>
<source src="music/music.ogg" type="audio/ogg"/>
你的浏览器不支持audio元素
</audio>
| 格式 | 文件 | 描述 |
|---|---|---|
| MIDI | .mid.midi | MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备（比如合成器和声卡）的格式。MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。点击这里播放 The Beatles。因为 MIDI 格式仅包含指令，所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小，但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。 |
| RealAudio | .rm.ram | RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流（在线音乐、网络音乐）。由于是低带宽优先的，质量常会降低。 |
| Wave | .wav | Wave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器（除了 Google Chrome）都支持它。 |
| WMA | .wma | WMA 格式 (Windows Media Audio)，质量优于 MP3，兼容大多数播放器，除了 iPod。WMA 文件可作为连续的数据流来传输，这使它对于网络电台或在线音乐很实用。 |
| MP3 | .mp3.mpga | MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它。 |
6.12 特殊符号
6.13 块元素和行内元素
块元素
无论内容多少，该元素独占一行（p、h1-h6…li ul）
行内元素
内容撑开宽度，左右都是行内元素的可以排在一行(a、strong、em…)
7.重点
图片的插入
超链接的使用
8.难点
需要按照固定的步骤，把文件夹、图片、网页放到固定的目录。
9.作业
1.制作宋词《满江红》；
2.制作小米超链接；
3.音乐排行榜
第二章 表格和表单
知识点：
1.表格
2.表单
重点：
1.表格
web1.0当时比较火的标签元素，行、列结构。
excel,电子表格。
默认格式：
<table>
<thead>
<tr><th>...</th></tr>
</thead>
<tfoot><tr><td></td></tr></tfoot>
<tbody><tr>...</tr></tbody>
</table>
table里面的居中：指的是table在网页中的居中
要设置字体的居中，tr td
去除间隙：
cellspacing=“0”,cell 单元格，spacing,单元格;
cellpadding:内部填充;
跨越多列：colspan
跨越多行：rowspan
<!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>作业一</title>
<style>
a{
text-decoration: none;}
</style>
</head>
<body>
<table>
<tr>
<td width="50"><a href="#">游戏</a></td>
<td width="120">一刀9999亿</td>
<td width="120">冰雪私服</td>
<td width="120"><font color="red">0元充值私服</font></td>
<td width="120">超变999999亿</td>
<td width="120"><font color="red">页游前十名</font></td>
<td width="120">超变单职业</td>
<td width="120"><font color="#888888" size="1">换一换</font></td>
</tr>
<tr>
<td><a href="#">推荐</a></td>
<td>Max.超变版</td>
<td>今日一线头条</td>
<td>高爆打金服</td>
<td>爱奇艺</td>
<td>爱淘宝</td>
<td
最低0.47元/天 解锁文章
946
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
