1200字范文 > 零基础学HTML5和CSS3前端开发第一课

零基础学HTML5和CSS3前端开发第一课

时间：2020-09-25 02:21:31

课程目标：

使用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服务器上的页面。是一个由许多互相链接的超文本组成的系统，通过互联网访问。

发明者：蒂姆·伯纳斯·李 (他是“互联网之父”、“千年技术奖”首位获奖者，他是被全球人赞扬的英国科学家。他，是蒂姆·伯纳斯·李。他是万维网的发明者，南安普顿大学与麻省理工学院教授。，他因“发明万维网、第一个浏览器和使万维网得以扩展的基本协议和算法”而获得度的图灵奖。)

2.2 W3C

World Wide Web Consortium（万维网联盟）

成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构

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 lang="en"><head> <title>Document</title></head><body>身体</body></html>

5.第一个小程序

第一个小程序，都是“Hello World”。

使用记事本写个网页，显露一把。

使用更为快捷的开发工具：EditPlus、HBuilderX、VSCode。

<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title></head><body>我是使用Editpuls的网页页面。！好处：可以锻炼你记忆标签的能力,不会自动出来一些提示标签。<div></div><span></span></body></html>

<!DOCTYPE html><html><head><meta charset="utf-8"><title>第三个页面，使用HBuilderX</title></head><body></body></html>

html:标记性的语言，这里面的元素，主要是标签。

详见视频哦。

6.标签

6.1.格式和常用标签

标签的规范，必须通过尖括号括起来；成对出现；双标记标签和单标记标签；

标签关系：父子关系；兄弟关系；

6.2 HTML标签、Head标签、BODY标签

<!DOCTYPE html><html><head><title>标题三</title></head><body>缺点就是太快了，单词你记不住。</body></html>

6.3.meta

meta:标记信息；

charset:表示字符编码，utf-8;en;GBK;

name=“author”:作者

name=“Keywords”:关键字;一般是baidu、谷歌搜索的时候，利于搜索喂食；

name=“description”:描述上面这些对应的另外内容是content直接使用content="内容"来写;也是搜索用；

<!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"><meta name="author" content="张老师"><meta name="keywords" content="HTML5，CSS3，Java，前端学习"><meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家"><title>meta标签的讲解!</title></head><body></body></html>

6.4 H1–>h6及hr标签

<!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>H1到H6标签及其Hr标签</title></head><body><h1></h1><hr><h1>HTML5学习开始了</h1><h2>张老师开始上课</h2><hr><h3>曾同学，表现良好</h3><h4>HTML5学习开始了</h4><h5>HTML5学习开始了</h5><h6>HTML5学习开始了</h6></body></html>

6.5 p、br、pre标签

<!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>p标签br标签pre标签</title></head><body><h1>满江红</h1><h2>岳飞</h2><hr><p>怒发冲冠，凭栏处潇潇雨歇。<br>抬望眼，仰天长啸，壮怀激烈。<br>三十功名尘与土，八千里路云和月。<br>莫等闲白了少年头，空悲切。<br><br>靖康耻，犹未雪；臣子恨，何时灭！<br>驾长车踏破贺兰山缺。<br>壮志饥餐胡虏肉，笑谈渴饮匈奴血。<br>待从头收拾旧山河，朝天阙。</p><p>【注释】：作者其它作品：更多>></p><p>来讲解这段宋词</p><p>这段宋词的时代背景</p><hr><pre>怒发冲冠，凭栏处潇潇雨歇。抬望眼，仰天长啸，壮怀激烈。三十功名尘与土，八千里路云和月。莫等闲白了少年头，空悲切。靖康耻，犹未雪；臣子恨，何时灭！驾长车踏破贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头收拾旧山河，朝天阙。</pre></body></html>

6.6无序列表和有序列表

<!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></head><body><h1>清朝中兴四大名臣</h1><hr><ul type="disc"><li>曾国藩</li><li>左宗棠</li><li>胡林翼</li><li>彭玉麟</li></ul><hr><ul type='circle'><li>曾国藩</li><li>左宗棠</li><li>胡林翼</li><li>彭玉麟</li></ul><hr><ul type='square'><li>曾国藩</li><li>左宗棠</li><li>胡林翼</li><li>彭玉麟</li></ul></body></html>

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 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 type="A"><li>冠军</li><li>亚军</li><li>季军</li><li>四军</li></ol></body></html>

6.7 字体标签

b、I、U、strong、em等标签。

<!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></head><body><h1>斗破苍穹</h1><hr><b>天蚕土豆</b>天蚕土豆<i>萧炎</i><u>药老</u><em>心潮澎湃，无限幻想，迎风挥击千层浪，少年不败热血</em><br><strong>心潮澎湃，无限幻想，迎风挥击千层浪，少年不败热血</strong><p><font size='3' color='pink' face='楷体'>讲述了天才少年萧炎在创造了家族空前绝后的修炼纪录后突然成了废人，<br>种种打击接踵而至。就在他即将绝望的时候，<br>一缕灵魂从他手上的戒指里浮现，一扇全新的大门在面前开启，<br>经过艰苦修炼最终成就辉煌的故事。</font></p></body></html>

6.8居中标签

center

6.9 图片标签

图片路径是重点，首先是找到图片，把图片放到和网页同一个文件夹，并且你要测试没有这个图片会出来叉号的效果.

<!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></head><body><center><h1>斗破苍穹</h1></center><hr><img src="斗破.jpg" alt="请查找图片路径" title="斗破苍穹"><img src="./斗破.jpg" alt="请查找图片路径" title="斗破苍穹" width="400px" height="250px"><img src="../美女.jpg" alt="请查找图片路径" title="斗破苍穹" width="250px" height="400px"><img src="/qd/images/logo.beebc.png" alt=""><img src="D:\html55555\美女.jpg" alt=""></body></html>

title：当光标放上去的时候，会出来这个提示信息。

src：source来源

加上宽width

高 height;

格式：width/height=“数字 px” px:就是计算机或者手机，多少像素；

新的图片类型：bmp、png、jpg、gif、jfif、webp

WebP（发音：weppy）是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式，派生自影像编码格式VP8，被认为是WebM多媒体格式的姊妹项目，是由Google在购买On2 Technologies后发展出来，以BSD授权条款发布。

WebP最初在发布，目标是减少文件大小，但达到和JPEG格式相同的图片质量，希望能够减少图片档在网络上的发送时间。11月8日，Google开始让WebP支持无损压缩和透明色（alpha通道）的功能，而在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可以被用来无失真地储存照片，但是档案太大让它不适合在网页上放照片）。

6.10超链接

网站：有很多内容来组成，这些就是网页组成，网页与网页之间、关联就是通过超链接，来实现。

打开到新窗口: target="_blank"

锚点案例

连接到邮箱联系我

<!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>Document</title></head><body><h1>网址导航</h1><hr><a href="demo02.html">百度</a><a href="demo03.html" target="_blank">网易</a><a href="demo04.html">新浪</a><a href="demo08.html" target="_blank">搜狐</a><a href="#">空链接</a><a href="mailto:83193980@">联系作者</a></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>Document</title></head><body><h1><center><a id='top'>黎明之劫</a></center></h1><hr><font size='2'>作者：未来少女</font><p>起点中文网创建于2002年5月，是国内最大文学阅读与写作平台之一，是国内领先的原创文学门户网站，隶属于数字内容综合平台——阅文集团（(股票代码：0772.HK)）旗下，总部位于上海。</p><p>起点中文网创建于2002年5月，是国内最大文学阅读与写作平台之一，是国内领先的原创文学门户网站，隶属于数字内容综合平台——阅文集团（(股票代码：0772.HK)）旗下，总部位于上海。</p><p>起点中文网创建于2002年5月，是国内最大文学阅读与写作平台之一，是国内领先的原创文学门户网站，隶属于数字内容综合平台——阅文集团（(股票代码：0772.HK)）旗下，总部位于上海。</p><p>起点中文网创建于2002年5月，是国内最大文学阅读与写作平台之一，是国内领先的原创文学门户网站，隶属于数字内容综合平台——阅文集团（(股票代码：0772.HK)）旗下，总部位于上海。</p><p>起点中文网创建于2002年5月，是国内最大文学阅读与写作平台之一，是国内领先的原创文学门户网站，隶属于数字内容综合平台——阅文集团（(股票代码：0772.HK)）旗下，总部位于上海。</p><p>起点中文网创建于2002年5月，是国内最大文学阅读与写作平台之一，是国内领先的原创文学门户网站，隶属于数字内容综合平台——阅文集团（(股票代码：0772.HK)）旗下，总部位于上海。</p><p>起点中文网创建于2002年5月，是国内最大文学阅读与写作平台之一，是国内领先的原创文学门户网站，隶属于数字内容综合平台——阅文集团（(股票代码：0772.HK)）旗下，总部位于上海。</p><p>起点中文网创建于2002年5月，是国内最大文学阅读与写作平台之一，是国内领先的原创文学门户网站，隶属于数字内容综合平台——阅文集团（(股票代码：0772.HK)）旗下，总部位于上海。</p><p>起点中文网创建于2002年5月，是国内最大文学阅读与写作平台之一，是国内领先的原创文学门户网站，隶属于数字内容综合平台——阅文集团（(股票代码：0772.HK)）旗下，总部位于上海。</p><p>起点中文网创建于2002年5月，是国内最大文学阅读与写作平台之一，是国内领先的原创文学门户网站，隶属于数字内容综合平台——阅文集团（(股票代码：0772.HK)）旗下，总部位于上海。</p><p>起点中文网创建于2002年5月，是国内最大文学阅读与写作平台之一，是国内领先的原创文学门户网站，隶属于数字内容综合平台——阅文集团（(股票代码：0772.HK)）旗下，总部位于上海。</p><p>起点中文网创建于2002年5月，是国内最大文学阅读与写作平台之一，是国内领先的原创文学门户网站，隶属于数字内容综合平台——阅文集团（(股票代码：0772.HK)）旗下，总部位于上海。</p><p>起点中文网创建于2002年5月，是国内最大文学阅读与写作平台之一，是国内领先的原创文学门户网站，隶属于数字内容综合平台——阅文集团（(股票代码：0772.HK)）旗下，总部位于上海。</p><p>起点中文网创建于2002年5月，是国内最大文学阅读与写作平台之一，是国内领先的原创文学门户网站，隶属于数字内容综合平台——阅文集团（(股票代码：0772.HK)）旗下，总部位于上海。</p><p>起点中文网创建于2002年5月，是国内最大文学阅读与写作平台之一，是国内领先的原创文学门户网站，隶属于数字内容综合平台——阅文集团（(股票代码：0772.HK)）旗下，总部位于上海。</p><p>起点中文网创建于2002年5月，是国内最大文学阅读与写作平台之一，是国内领先的原创文学门户网站，隶属于数字内容综合平台——阅文集团（(股票代码：0772.HK)）旗下，总部位于上海。</p><p>起点中文网创建于2002年5月，是国内最大文学阅读与写作平台之一，是国内领先的原创文学门户网站，隶属于数字内容综合平台——阅文集团（(股票代码：0772.HK)）旗下，总部位于上海。</p><p>起点中文网创建于2002年5月，是国内最大文学阅读与写作平台之一，是国内领先的原创文学门户网站，隶属于数字内容综合平台——阅文集团（(股票代码：0772.HK)）旗下，总部位于上海。</p><p>起点中文网创建于2002年5月，是国内最大文学阅读与写作平台之一，是国内领先的原创文学门户网站，隶属于数字内容综合平台——阅文集团（(股票代码：0772.HK)）旗下，总部位于上海。</p><p>起点中文网创建于2002年5月，是国内最大文学阅读与写作平台之一，是国内领先的原创文学门户网站，隶属于数字内容综合平台——阅文集团（(股票代码：0772.HK)）旗下，总部位于上海。</p><p>起点中文网创建于2002年5月，是国内最大文学阅读与写作平台之一，是国内领先的原创文学门户网站，隶属于数字内容综合平台——阅文集团（(股票代码：0772.HK)）旗下，总部位于上海。</p><p>起点中文网创建于2002年5月，是国内最大文学阅读与写作平台之一，是国内领先的原创文学门户网站，隶属于数字内容综合平台——阅文集团（(股票代码：0772.HK)）旗下，总部位于上海。</p><a href="#top"><img src='./img/toTop.jpg' /></a></body></html>

6.11 多媒体

了解多媒体包含的类型：音频、视频、动画、图片等

视频video

video,指定视频来源、是否播放。

<!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>Document</title></head><body><video src="./video/movie.mp4" controls width="400" autoplay muted></video><hr><video controls autoplay><source src="./video/video.webm" type="video/webm"><source src="./video/video.mp4" type="video/mp4"></video></body></html>

音频audio

声音格式

MP3是一种音频压缩技术，其全称是动态影像专家压缩标准音频层面3（Moving Picture Experts Group Audio Layer III），简称为MP3。它被设计用来大幅度地降低音频数据量。如果你的站点是音乐类型的，你可以选择mp3格式。

<!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>Document</title></head><body><audio src="music/music.mp3" controls></audio><hr><audio controls><source src="music/music.mp3" type="audio/mpeg"><source src="music/music.ogg" type="audio/ogg"></audio></body></html>

6.12 特殊符号

6.13 块元素和行内元素

块元素

无论内容多少，该元素独占一行（p、h1-h6…）

行内元素

内容撑开宽度，左右都是行内元素的可以排在一行(a、strong、em…)

7.重点

图片的插入

超链接的使用

8.难点

需要按照固定的步骤，把文件夹、图片、网页放到固定的目录。

9.作业

1.制作宋词《满江红》；

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>虾米音乐排行榜</title></head><body><h1>虾米音乐排行榜    <a href='demo音频.html'><font size='3'>更多</font></a></h1><hr><ul><li><img src="img/1.jpg" alt="" width="300"><p>推荐音乐金榜，No.1 双节棍</p></li><li><img src="img/2.jpg" alt="" width="300"><p>推荐音乐金榜，No.1 双节棍</p></li><li><img src="img/3.jpg" alt="" width="300"><p>推荐音乐金榜，No.1 双节棍</p></li><li><img src="img/4.jpg" alt="" width="300"><p>推荐音乐金榜，No.1 双节棍</p></li></ul></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。