HTML&CSS快速入门
HTML概述
HTML语法
HTML文档的结构
网页中的文本
网页中的注释和实体
什么是CSS及CSS的基本语法
为什么使用CSS
用CLASS和ID属性来定义和使用样式表
几点注意事项
HTML概述
1.HTML语言的起源与发展
a) HTML 起源 SGML
b) HTML语言发展大事记
2. HTML的新特点
a)对动态HTML（脚本语言和对象模型ActiveX）的支持
b)对框架的支持
c)对国际化的支持
d)对级联式样式表（CSS）的支持
3.HTML与W3C组织
万维网组织 W3C
4.HTML相关术语
a)标记
b)元素 开始标记 内容 结束标记
c)属性 属性放在开始标记中 每个属性都有值修饰元素
HTML语法
1.HTML元素
a)块级元素
内容组织 打包其他元素
b)内联元素
内容显示 插入到块级元素的那部分元素
2.编辑HTML
纯文本 可以用任何文本编辑器打开
3. HTML表达方式
三种
4. HTML基本语法
a)<标记>内容</标记>——封闭类型标记
b)<标记 属性1=参数1 属性2=参数2>内容</标记>
属性只能在开始标记中
c) <标记>（空标记）——非封闭
最常用<br>
还有base link meta等
d)标记嵌套
需要注意标记嵌套的顺序
<b></b>：粗体
<i></i>：斜体
HTML文档的结构
1.HTML文档的结构
a)版本信息
b)文件头
c)文件体
2.版本信息
文档类型定义：DTD
3. HTML 4.01规范的DTD的种类
a)HTML 4.01 Strict DTD
不包含“遭到反对”的元素与框架相关的元素
b) HTML 4.01 Transitional DTD
Strict DTD + “遭到反对”的元素
c) HTML 4.01 FrameSet DTD
Transitional DTD+ 框架相关的元素
4.文件头元素
a) <head> </head>
b) 文件头元素语法
希望被搜索引擎找到，要加上
<head>——可选
内容：title、base、meta、script、style、link、object
</head>——可选
c) 文件头元素属性
lang：语言
dir：元素中内容的文本方向
profile：由空格分开的URL列表，页面元数据信息
d)标题元素
<title>
</title>
浏览器顶部，没有属性，head中只出现一次
e)<meta>元数据元素
meta：关于
网页基本信息
搜索引擎对meta元素中数据进行处理
无结束标记
meta属性：
name：特性名
content：指定特性的值
http-equiv：
f)meta的作用举例
i.给网页添加说明
ii.让网页可以按关键字被搜索到 keywords
iii.定期刷新网页 refresh
iv. 让网页始终保持最新 no-cache
5.文档主体元素
<body>——可选
主要元素：
background：图像
text：文本颜色
link：链接颜色
vlink：已访问的链接颜色
alink：激活时的链接颜色
bgcolor：背景色
id、class：样式表
title：提示文字
style：样式信息
</ body>——可选
6. body应用举例
网页中的文本
1. 网页中的文本
标记
2 <p>段落标记元素的语法
a)语法：
<p>——必需
内容
</p>——可选
b)主要属性：id，class，title，lang，dir，style，align
c) 作用：新的段落：体现换行 注意有空行
3. <pre>预定义元素
a)语法：
<pre>——必需
内容
</pre>——必需
b) 主要属性：id，class，title，lang，style，align
4.<br>换行符元素
a) 语法：
<br>——必需
内容
无
b) 主要属性：id，class，title，style，clear
5.<blackquote>缩进元素
a) 语法：
<blackquote>
</blackquote>
b) 无属性
6.div块元素分组
a) 语法：
<div>——必需
</div>——必需
b)主要属性：：id，class，title，lang，style，align
c) 注意事项：用于一行、多行或者若干段，会导致换行
7.<span>内联元素分组
a语法：
<span>——必需
</span>——必需
b)主要属性：：id，class，title，lang，style，align
c)注意事项：用于一行
8.div、span应用举例
9.<hr>水平线元素
a)<hr>的作用：分割文档（单标记）
b)主要属性：width，size，noshade，color
10.加强元素与强调元素
a) 语法：
<strong>>——必需
</strong>>——必需
<em>>——必需
</em>>——必需
b) strong：加强元素 给字体加粗
c) em：强调元素 字体斜线表示
11.文本标题元素
a)语法：
<h#>——必需
内容：文字内联元素
</h#>——必需
b) <h1><h2><h3><h4><h5><h6>标题1——标题6（用于文章标题）
12. 列表元素
a) 列表：相似特征或者具有先后顺序的文字对齐排列
b) <ul>：
i. 语法：
<ul>——必需
</ul>——必需
ii. 主要属性：id，class，title，lang，style，align，type 其中type是列表符号，可取值为disc（实心圆 默认）、square（实心正方体）、circle（空心圆）
c)<ol>
i. 语法：
<ol>——必需
</ol>——必需
ii.主要属性：id，class，title，lang，style，align，type 其中type是列表符号，可取值为1，A，a，i（小写罗马字母），l（大写罗马字母）
start——起始符号
d) <li>
i. 语法：
<li>——必需
</li>——可选
ii.主要属性：id，class，title，lang，style，align，type 其中type是列表符号，可取值为disc（实心圆 默认）、square（实心正方体）、circle（空心圆），1，A，a，i（小写罗马字母），l（大写罗马字母）
value——序列号
13.定义列表、术语、定义元素
a)<dl>
i. 作用：定义一个定义列表
ii. 语法：
<dl>——必需
</dl>——必需
iii.主要属性：id，class，title，lang，style，align
b) <dt>
i.作用：定义列表的术语
ii. 语法：
<dt>——必需
</dt>——可选
iii.主要属性：id，class，title，lang，style，align
c) <dd>
i.作用：为定义列表的术语提供定义，在dt里
ii.语法：
<dd>——必需
</dd>——可选
iii. 主要属性：id，class，title，lang，style，align
网页中的注释和实体
1. 网页中的注释
a) 语法：<!-- --> 忽略执行
b)加入注释好处：有利于HTML代码的可读性
c)提醒：给代码加上注释是一个好习惯
2.网页中的实体
a) 实体类型
i. 有特殊含义的字符
< > & “空格
ii. 键盘上没有的，但常常会使用
版权符号：
注册符号：
商标符号：
b)实体表示方式
i. 一般语法：&号开始，并以分号结束
ii. 第一种：使用转义字符 如：© 不能输入
iii. 第二种：使用十进制符号 在&后加上#和一个十进制数 如：©
iv. 第三种：使用十六进制符号 在&后加上#和一个十六进制数 如：©
什么是CSS及CSS的基本语法
1. 什么是CSS
CSS（Cascading Style Sheets）级联样式表
负责网页中内容显示的外观
2. HTML&CSS工作机制
文档结构和显示分离
网站风格保持一致
3.CSS的语法特点
a)<style>标记在<head>中
b)语法：样式名{([属性：属性值]; [属性：属性值])}
c)属性值没有用引号包围起来，除非多个单词组成
d)一般CSS写在注释里：保持浏览器的兼容性
为什么使用CSS
1.便于修改维护
2.可以节省代码量
3.增强格式化能力
用CLASS和ID属性来定义和使用样式表
1.CLASS和ID属性
a)ID：用来作为页面中某个样式的唯一标识
b)CLASS：用来指定页面中元素属于某一个类
2.CLASS和ID类型的样式表
a) 为CLASS指定样式的语法是在类名前面加上(.)，然后将样式定义写在随后的大括号内
.mystyle{…}
<div class=”mystyle”></div>
b) ID指定样式的语法是用(#)取代(.)作为开头
#div1{…}
<div id=”div1”>
缺点：只有1个标签能使用，不能重复
3.CLASS和ID类型的样式表应用举例
几点注意事项
1. 样式表可放在任何地方
2. 选择器（HTML选择器 类选择器 ID选择器）
3. 尽量选择类选择器，避免冲突（如Form表单的ID和ID选择器的ID）