web网页:网站中用于承载信息的页面,主要由文字、图像和超链接等元素构成,除了这些元素,网页中还可以包含音频、视频以及flash等。
web标准:Web标准不是某一个标准,而是由W3C和其他标准化组织制定的一系列标准的集合。 包含我们所熟悉的HTML、CSS、JavaScript等等。
(1)结构标准:HTML(Hyper Text Markup Language 超文本标记语言,网页布局、整体架构、内容)
(2)表现标准:CSS(Cascading Style Sheets层叠样式表。页面更漂亮:页面的字体、大小、颜色、对齐方式、背景色、背景图片、边框样式、图片的宽高等等)
(3)行为标准:JavaScript(页面的动态效果:轮播图、按钮的点击操作、淘宝左侧分类展示子分类的效果)
Html文档基本格式:文档后缀名.html或者.htm
<!doctype html> 必须用在开头:用于向浏览器说明当前文档使用的哪种HTML规范标准
<html>:根标记,用于告知浏览器本文件是个html文档
<head>:头部信息,主要用来放置其他位于头部的标记,像<title>、<meta>、<link>、<style>等
<meta>:描述HTML文档的描述,关键词,作者,字符集等。
<body>:主体标记。网页上要显示的所有内容都写在此处
HTML标记或者标签
通常成对出现:<html></html>、<p></p>
标签对的第一个标签叫开始标签(开放标签),第二个是结束标签(闭合标签)
标签也分单标签和双标签:<img /> <hr />
标签上有自己属性:比如id,写法:属性=“值”
注释:<!-- 我是注释 -->
标签:<div>:用来划分区域的
<p>:段落
<h1>~<h6>:标题从大到小
Html中引用样式三种方式(样式使用的顺序:行内样式—内嵌式—外链式)
行内样式:在html标签上写样式(不建议,后期不好维护)
内嵌式:在html文档的头部<head>中添加<style>,在style标签里面写样式
外链式:新建一个css样式文件,引入到html中(推荐)
href:要引入的css文件
type:要引入的文件的类型text/css代表引入的是
个样式表文件
rel:当前文档与引入文档的关系,stylesheet代表被引入的是一个样式表文件
CSS的写法(基本语法) 选择器 {
属性1 : 属性1的值 ;
属性2 : 属性2的值 ; … …
}
CSS的选择器
id选择器:#id名 {属性1 : 属性1的值 ; }
class选择器:.class名{属性1 : 属性1的值 ; }
标签选择器:标签名 {属性1 : 属性1的值 ; }
以下是css三种选择器的使用实例:
@charset "utf-8";
/* CSS Document */
#txt{
background-color:#f00 !important;
width:800px;
}
.myclass{
text-align:center;
color:#FFF;
font-family:楷体;
font-style:italic;
}
p{
color:#FFF;
text-indent:2em;
line-height:35px;
}
上课练习:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<!--行内样式-->
<style type="text/css">
#txt{
background-color:#9CF !important;
width:800px;
}
</style>
</head>
<body>
<div id="txt" style="width:770px; background-color:#F90; margin:0
auto;">
<h1> 你好,秋天 </h1>
<p>zhaoqi @ 2018-10-08</p>
<p>春天是一把琴,将优美琴声带给世人,叫他们脱去衣袄,重新奔跑在温暖的大地中;夏天是一把扇,扇去炎热,以热情的脸庞去温抚他人;冬天时一雪花,飘飘而来,为人们带来雪的姿态,但是秋天的叶则更令我喜欢。</p>
<p>秋天的叶是凄凉的飘飘洒洒的落叶如一只蝴蝶,飞舞着,飘到大地母亲的怀抱里。</p>
<p>秋天的叶是一位化妆师,把世界渲染,把大地变成金黄色;秋天的叶,默 默无闻,春天夏天,树叶的绿叶衬托使鸟儿莺歌燕舞,秋天的你,默默而去, 但你不伤心,因为你熟知"落红不是无情物,化作春泥更护花。"</p>
<p>秋日的叶是富有诗意的,你好,秋天,你好!</p>
<p>浏览[1051]|评论[105]</p>
<p>注:文字摘自网络</p>
</body>
</html>