零基础学HTML5和CSS3前端开发第一课
Posted tea_year
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了零基础学HTML5和CSS3前端开发第一课相关的知识，希望对你有一定的参考价值。
课程目标：
- 使用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。
<!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>
<!-- 内容，班级帅哥很多，请靓妹关注，微信号：tea_year -->
<!-- kfkasdf
kk
-->
<!-- 这个工具，默认使用的是eclipse,java出来后台开发工具，
如果是后期你要搞Java开发，建议你使用HBuilderX,快捷键都是一样，
学习成本低. -->
</body>
</html>
html:标记性的语言，这里面的元素，主要是标签。
详见视频哦。
6.标签
6.1.格式和常用标签
标签的规范，必须通过尖括号括起来；成对出现；双标记标签和单标记标签；
标签关系：父子关系；兄弟关系；
6.2 HTML标签、Head标签、BODY标签
<!DOCTYPE html>
<!-- html是根标签
head:头部标签；
title：标题标签，就是网页的标题;
body:身体标签
-->
<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:网页字符编码；en;utf-8格式，格式范围宽
meta:标签；charset,name content,这个称为meta标签的属性；
-->
<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,h2,h3,h4,h5,h6:标题标签;
规律：h1最大，h6最小；顺序，从大到小；格式：粗体
hr:横线 ;
快捷键1：注释Ctrl+/
快捷键2：输入完标签h1,h6,hr之后，按Tab键即可出来;
-->
<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>
<!--
p:段落标签；有一个空行;
br:换行标签；只有一行内容，然后针对这行内容做换行操作;
pre：预处理标签;按照复制之前的格式，给照搬过来；
-->
<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>
<!--
无序列表：父子级别的标签组
ul type:是ul标签的类型，表示ul下面符号的格式，值可以使用单引号或双引号引起来。
li
前面都有一个小圆点;和Word的项目符号一样;
-->
<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:是无序列表，默认是实心圆点;
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等标签。
<!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>
<!--
字体标签：
font
属性
size:单位1 2 4 7,越来越大;
color:颜色;
face:楷体|黑体|宋体
b:加粗;I:斜体;u:下划线;
em:斜体;strong:同b标签，都是加粗;
-->
<h1>斗破苍穹</h1>
零基础学HTML5和CSS3前端开发CSS基础