W3C标准
World Wide Web Consortium,万维网联盟
规范
1、标签名称、属性名称必须小写时
2、标签必须严格嵌套,并且必须闭合,即使空元素标签也必须闭合
3、属性值必须用引号引起来
本课目标
掌握HTML标签的应用
掌握CSS的语法结构和在网页中的应用
掌握CSS的语法结构
什么是HTML?
HTML:超文本标记语言(Hyper Text Markup Language)
HTML不是一种编程语言,而是一种标记语言,描述网页的语言
HTML使用标签描述网页中图片、文本、音乐、视频、超链接等
HTML5是什么?
1、字面意义上:HTML技术标准的第5版;
2、广义上是HTML、CSS等的组合;
3、更简单代码创建功能强大的程序,书写更简洁的html代码;
总结:本门课程使用HTML5的网页结构讲解基础的HTML和CSS。
网页结构
讲解HTML5的网页结构,标签<html>、<head>、<title>、<body>
的含义,<!doctype>声明、charset网页字符编码;
HTML基本标签
标题标签 <h1>~<h6>
段落和换行标签 <p>…</p>、<br/>
水平线标签 <hr/>
斜体 <em>…</em>
字体加粗 <strong>…</strong>
什么是CSS以及CSS的优势!
CSS
层叠样式表(CascadingStyle Sheet)
CSS的优势
1、内容与表现分离
2、网页的表现统一,容易修改
3、丰富的样式,使页面布局更加灵活
4、减少网页的代码量,增加网页的浏览速度,节省网络带宽
5、运用独立于页面的CSS,有利于网页被搜索引擎收录
CSS语法 示例
选择器 { 声明1; h1{
声明2; font-size:12px;
声明3; color:red;
…… }
}
选择器的区别
1、标签选择器 p{font-size:16px;color:red;}
2、类选择器 .second{font-size:20px;color:#096;}
3、ID选择器 #third{font-size:24px;color:black;}
相对路径
绝对路径:从盘符出发
相对路劲:相对项目文件路径出发
代码示例
<!DOCTYPE html> <%-- 文档类型声明--%>
<html>
<head>
<meta charset="UTF-8">
<title>第一个网页</title>
</head>
<style>
/*style样式*/
</style>
<body>
<h1>大河之剑天上来</h1>
</body>
</html>