一、什么是HTML?
HTML是用来描述网页的一种语言
·HTML指的是超文本语言(Hyper Text Makedown Language);
·HTML是一种标记语言,而不是一种编程语言;
·标记语言是一套标记标签
二、网页的组成部分
HTML(结构)、CSS(表现)、JS(行为);
三、HTML的基本语法
1、常规标记,也叫双标记;
格式:<标记 属性=“属性值” 属性=“属性值”><标记/>
例如:<head><head/>
2、空标记,也叫单标记
格式:<标记 属性=“属性值” 属性=“属性值”>
例如:<br/>
3、常用标签
(1)、文本标签(h1-h6)
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
(2)、段落标签
<p>段落</p>
(3)、换行
<br/>
(4)、水平线
<hr/>
例如:<hr color=“red” width="300px" align(对齐方式)="right">
(5)、加粗(推荐strong)
<b>加粗内容</b>
<strong>加粗强调</strong>
(6)、倾斜(推荐em)
<em>倾斜强调</em>
<i>倾斜文本</i>
(7)、删除线(推荐del)
<s>内容</s>删除线
<del>内容</del>删除线
(8)、扩展
<u>文本<u/>下划线
<sub>文本<sub/>下标
<sup>文本<sup/>上标
4、特殊符号
5、div标签和span标签
<div>内容</span>用来划分页面的区域,独占一行
<span>内容</span>应用在对文本独立修饰的时候,内容有多宽就占用多宽的空间距离
6、列表
7、图片标签
·图片标签的路径
·图片标签的属性
8、超链接标签
9、表格table
·表格的创建
·表格属性
·行tr属性
`单元格td属性
·表格合并列(colspan)
·表格合并行(rowspan)
10、表单标签
·表单的作用:收集用户信息
·表单的属性格式
Form中method的get和post区别
四、CSS基础知识
1、什么是CSS
2、CSS语法
(1)、每个CSS样式由两部分组成,即选择符和声明,声明又分为属性和属性值;
(2)、属性必须放在花括号中,属性和属性值用冒号连接;
(3)、每条声明用分号结束;
(4)、当一个属性有多个属性值时,属性值与属性值不分先后顺序,用空格隔开;
(5)、在书写样式中,空格、换行等操作不影响属性的显示
例如:
3、CSS的写法
内部样式、外部样式、行内样式
(1)、内部样式
(2)、外部样式
Link和import之间的区别
推荐用link
(3)、行内样式
4、样式表的优先级
行内样式>内部样式>外部样式
5、CSS选择器
为什么要使用选择器?要使用CSS对HTML页面中元素实现一对一,一对多,多对一的控制
(1)、元素选择器/类型选择器(element选择器)
例如:div{width:100px;height:100px;background:red}
(2)、class选择器/类选择器
(3)、 id选择器
(4)、通配符/通配选择器
(5)、群组选择器
(6)、包含选择器
(7)、伪类选择器
(8)、选择器的权重
6、文本属性
检索大小写
7、列表属性
8、背景属性
9、浮动属性
10、盒子模型
·定义:盒模型是CSS布局的基石,它规定了网页元素如何显示以及元素间的相互关系。CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间,即包含边框、边界、内容。
·padding属性
·border属性
·margin属性
11、溢出属性
12、元素显示类型
13、定位
14、CSS sprites(精灵图)-图片整合技术
·将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合成一张整图,然后用background-position来实现背景图片的定位技术。
·图片整合的优势:
(1)、通过图片整合来减少对服务器的请求,从而提高加载速度;
(2)、通过整合图片来减少图片的体积;