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

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

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

零基础,如何自学前端?

web前端的内容多吗?好学不?

零基础学习前端开发要怎么开始