零基础学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基础