HTML+CSS基础课程
第1章 Html介绍
1.2 Html和css的关系
1.HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
2.CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。
所有这些用来改变内容外观的东西称之为表现。
3.JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。
还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。
1.3 认识html标签
<img src="1.jpg">
1.5 认识html文件基本结构
<html>
<head>...</head>
<body>...</body>
</html>
1.6 认识head标签
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">__定义编码标识
<title>hello world</title>
</head>
--------显示网页名称标题
1.7 HTML的代码注释
<!--注释文字 -->
--------------------------------------------------------------------------------------------------------
第2章 认识标签(第一部分)
2.3 段落
<p>段落文本</p>
2.4 标题
<hx>标题文本</hx> (x为1-6)
2.5 加入强调语气
<em>需要强调的文本</em> __斜体
<strong>需要强调的文本</strong>__粗体
2.6 为文字设置单独样式
<span>文本</span>
例:
<style>
span{
color:blue;
}
</style>----放在<head>中
<span>美国梦</span>----放在<body>中
2.7 短文本引用
<q>引用文本</q> __浏览器会对q标签自动添加双引号" "
2.8 长文本引用
<blockquote>引用文本</blockquote>___缩进样式
2.9 分行显示文本
<br />
2.10 添加一些空格
2.11 添加水平横线
<hr />
2.12 为网页加入地址信息
<address>联系地址信息</address>
2.13 加代码
<code>代码语言</code>
2.14 网页加入大段代码
<pre>语言代码段</pre>
------------------------------------------------------------------------------------------------------
第3章 认识标签(第二部分)
3.1 使用ul,添加新闻信息列表
<ul>
<li>.....</li>
</ul>
例:
.
.
.
3.2 使用ol,添加图书销售排行榜
<ol>
<li>信息</li>
......
</ol>
例:
1.
2.
3.
3.3 认识div在排版中的作用
<div>…</div>
3.4 给div命名,使逻辑更加清晰
-----分出独立的逻辑部分 class.style.id .name不会显示在页面
<div id="版块名称">…</div>
3.5 table标签,认识网页上的表格
创建表格的四个元素:table、tbody、tr、th、td
<tbody>…</tbody>等表格内容全部下载完才会显示
<tr>…</tr>:表格的一行
<td>…</td>:表格的一个单元格
<th>…</th>:表格的头部的一个单元格,表格表头
例:
<table>
<tbody>
<tr>
<th>班级</th>
<th>学生数</th>
<th>平均成绩</th>
</tr>
</table>
</tbody>
运行结果:
班级 学生数 平均成绩
一班 30 89
3.6 用css样式,为表格加入边框
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
3.7 caption标签,为表格添加标题和摘要
<caption>标题文本</caption>
<table summary="表格简介文本">----摘要不会显示在页面
-------------------------------------------------------------------------------------------------
第4章 认识标签(第三部分)
4.1 使用<a>标签,链接到另一个页面
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
4.2 在新建浏览器窗口中打开链接
<a href="目标网址" target="_blank">链接显示的文本</a>
4.3 使用mailto在网页中链接Email地址
<a href="mailto:yy@imooc.com?subject=主题名称&body=邮件内容">
4.4 认识<img>标签,为网页插入图片
<img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" title="电影介绍" >
--------------------------------------------------------------------------------------------------