HTML基础
1.1HTML文件的基本结构和W3C标准
1.1.1HTML简介
HTML是一种描述网页的语言,一种超文本标记的语言!
1.1.2HTML文件的基本结构
- 头部(head)
头部是网页的标题等基本信息
- 主体(body)
主题包括网页的内容信息
注意标签必须成对出现
1.2网页的基本标签
每个标签都有一对尖括号,此处省略
- 标题标签
h1 h2 h3 h4 h5 h6 (字体样式依次变小)
- 段落和换行标签
p br
- 水平线标签
hr: 表示能产生一条水平线
- 字体样式标签
strong:能对字体进行加粗
em:能对字体进行倾斜处理
- 注释和特殊符号
注释:!--内容--
特殊符号:
- 空格:
- 大于号:>
- 小于号:&Lt
- 引号:"
- 版权符号:?
1.3图像标签
语法:<img src="图片地址" alt="图像代替文字" title="鼠标悬浮的文字" width=“图像宽度” height="图像高度">
1.4链接标签
- 超链接的基本用法
<a href="链接地址" target ="目标窗口的位置" >链接的文本或图像</a>
- 超链接的应用场合
- 页面间链接
- 锚链接
- 功能性链接
列表 表格 框架
2.1列表
- 无序列表
无序列表是一个项目列表使用项目符号标记无序列表。没有等级之分
无序列表由: ul 和 li 组成
- 有序列表
有序列表时由一个个列表组成,列表项由数字或字母组成有序列表由:ol 和 li 组成
- 定义列表
定义列表是项目和注释的组合定义列表由:dl dt dd组成
2.2表格
- 为什么使用表格
简单通用
结构稳定
- 表格的基本结构
单元格:表格的最小单元行:一个或多个单元格横向堆叠而成
列:单元格的纵向排列
- 表格的基本语法
- 表格标签:table
- 行标签(可以有多行):tr
- 列标签(可以有多个单元格):td
- 表格的对齐方式
- 水平方向
- 左对齐:align=“left”
- 右对齐:align=“right”
- 居中对齐:align=“center”
- 垂直方向
- 顶端对齐:valign="top"
- 下端对齐:valign="bottom"
- 居中端对齐:valign="middle"
- 基线端对齐:valign="baseline"
- 水平方向
2.3框架
表单
3.1表单
- 表单的标签和属性
form标签来实现表单 input标签是辅助form的一个标签设定各种输入
form的属性值:
- action:表示提交的地址,如果为空,表示本页
- method
- 服务器发送数据的方法:post/get
- post:表单上的数据作为数据块发送,不适用请求字符型 get:浏览器会创建一个请求,会返回指定的脚本
- 表单元素和格式
- 文本框(text)
例:<input type="text" name="fname">
- 密码框(password)
例:<input type="password" name="fname"> - 单选按钮(redio)
例:<input type="redio" > - 复选框(checkbox)
例:<input type="checkboc" > - 列表框(selected option)
例: <seleceted> <option value="内容"></option> </selected> - 按钮
- submit提交按钮
点击.内容会提交 - reset重置
点击此按钮,实现重置 - bottom普通
- 多行文本域
语法:<input type=”image“ src=”images/login.jpg“> - 文件域
实现文件的选择语法:<input type="file" name="files">
3.2表单的高级应用
- 设置表单的隐藏域
将type的值设置成hidden时,这时就可以隐藏文件的隐藏
- 表单的只读和禁用设置
- 只读场景:网站服务器不希望用户修改数据,这些数据在表单元素中显示。(属性设置readonly=“readonly“)
- 只有满足这个条件时,才能使用此功能。(disabled=“disabled”)
3.3语义化的表单
- 关于语义化
语义化:达到结构简单,代码简单。
- 语义化表单
- 域
fieldest:这标签实现域的定义。把元素放到这个标签内时,浏览器就会以特殊的方式显示出来,这些表单就可能有一个边界。
- 域标题
legend:标签就是给域设置的一个标题,
- 通常是这两个标签结合着使用。实现语意话表单
- 表单元素的注释
- 定义:使用一个标签对内容注释了,当用户点击此内容时,浏览器会自动聚焦到相应的表单元素上。
- 语法:<label for=”表单元素的id“>标注的文本</label>
- 注意:需要在输入的input标签中定义属性:id 并赋值
初识CSS
4.1使用css的意义
- 什么是CSS
全称:层叠样式表,又称风格样式表,它是用来网页设计的,使网页漂亮,清晰!!
- CSS在网站中的应用
可以设置字体的样式,大小,颜色,可以使图像,文本居中,超链接不同的效果,美化网页
- CSS的优势
- 内容与表现分离。可以用css样式独占一个文件(便于维护)
- 表现统一
- 具有丰富的样式
- 减少网页的代码量
- 运用独立的css,便于搜索引擎收录
4.2css的基本语法
- css的基本语法结构
css由两部分组成,即选择器和声明,声明必须放在大括号中,可以是多条,每条声明由属性和值组成,属性和值用冒号隔开,语句以英文分好结束。
语法:选择器{属性:值;}
- 认识<style标签>
STYLE标签是引入css样式的标签。此标签位于head标签中还要给此标签的头部属性赋值:type=”text/css“
- css的选择器
- 标签选择器
- 所有的标签都可以使用标签选择器
语法:标签{属性:值;}
- 所有的标签都可以使用标签选择器
- 类选择器
- 当希望某个段落是另一种情况时,就最好引入类选择器
- 语法:.类名{属性:值;}
- ID选择器
- 当页面只需要使用一次时,选择id选择器!
- 语法:#id的名称{属性:值;}
4.3在HTML中引入css样式
- 行内样式
就是在html中的标签直接使用
没有实现内容与表现分离,没有体现css得到优势(不推荐使用)
- 内部样式
把css的代码直接写在head的style标签中,与html的文件位于通一个文件中 - 外部样式
单独创建一个css后缀的文件名,然后使用的时候直接通过链接式或导入式- 链接外部样式表
必须在html的文件中使用link标签才能链接
语法:<link href="css/文件名.css" rel="stylesheet" type="text/css"/>
- 导入外部样式
<style type="text/css">[email protected] url("style.css");--
- 链接外部样式表
- 样式的优先级
- 行内样式>类部样式>外部样式
- ID选择器>类选择器>标签选择器
4.4css的高级应用
- css复合选择器
- 后代选择器
后代选择器就是把外层的标签写在前面,内层的写在里面,之间用空格分离。当标签发生嵌套时,内层就是外层的后代。
按标签进行嵌套
按选择器进行嵌套
3种互相嵌套
- 交集选择器
交集选择器是由两个选择器直接构成的,其结果是选中二则各自元素范围的交集。其中第一个必须是标签选择器,第二个必须是类选择器或者ID选择器。两个之间不能有空格,必须连续书写这种方式构成的选择器,将选中同时满足的两则定义的元素。也就是前者所定义的标签选择器,并且制定了后者的类型或者ID元素。
- 并集选择器
同时选中各个基本选择器所选择的范围。任何形式的选择器都可以作为并集选择器的一部分。并集选择器是由多个选择器通过逗号链接而成的。
- 后代选择器
- css的继承特性
- 继承的关系
所有的css都是由各个标签之间继承关系的。可以称之为父子关系
- 继承的应用
css继承子标签都会继承父标签的样式,风格,可以在父标签样式风格的基础上修改,产生新的样式,而子标签不会影响父标签
- 继承的关系
CSS美化网页元素
5.1使用css编辑网页文本
- 文本在网页中的意义
- 有效的传递页面信息
- 使用css美化过的页面文本,是页面漂亮美观
- 可以很好的突出页面主题
- 具有良好的用户体验
- <span标签>
为了突出文字或语句,就得使用span标签 <span></span> - 字体的样式
font-family
font-size
font-style
font-weight
font设置字体的类型
设置字体的大小
设置字体的风格
设置字体的粗细
在一个声明中同时进行 - 使用css网页排版文本
color
text-align
text-indent
line-height
text-decoration设置文本的颜色
设置元素水平对齐方式
设置首行文本缩进
设置文本的行高
设置文本的装饰
5.2使用css设置超链接
- 超链接伪类
a{属性:值;}
a:hover{属性:值;}
- 使用css设置鼠标形状
default
pointer
wait
help
text
crosshair
默认光标
超链接指针
指示程序正在忙
指示可用的帮忙
指示文本
鼠标呈现十字状
5.3背景的样式
- 认识<div>标签
div可以把html文档分割成独立的,不同的部分,是用来进行网页布局
<div>网页内容</div>
- 背景属性
- 背景颜色
- 背景图像
- 背景图像 background-image:url(图像地址);
- 背景重复方式
- repeat:沿水平和垂直方向平铺
- no-repeat:不平铺
- repeat-x:沿水平方向平铺
- repeat-y:沿垂直方向平铺
- 背景
直接使用background:来给属性赋值;
- 设置超链接背景
5.4列表的样式
- list-style-type列表标记类型
- none:无标记符号
- disc:实心圆,默认类型
- circle:空心圆
- square:实心正方形
- decimal:数字
- list-style-image使用图像代替列表项标记 list-style-image:url(图片地址);
- list-style-position设置在何处放标记;
这个属性有两个值:inside和outside - list-style:统一设置列表的样式,直接加属性值就行!!
第六章:盒子模型
6.1盒子模型
- 6.1.1什么是盒子模型
div与盒子有一定的距离,这些距离与div构成了盒子模型的结构!盒子模型具有属性:内边距,外边距,边框
边框:相当于盒子的纸盒,一般具有一定的厚度!
内边距:位于边框内部,是内容与边框的距离!
外边距:位于边框外部,是边框与周围的间隙
- 6.1.2边距
具有三个属性:color width style设置方法:border-color: border-width: border-style:
一般统一设置:border:color(颜色) width(宽度 ) style(类型/solid/dashed):代表设置四边的颜色-类型-宽度一样
如果要分别设置:就是border-top-color: border-top-width: border-top-style: 依次类推
- 6.1.3外边距
定义:与其他盒子之间的距离。也就是指网页元素与元素的距离
常见的方法有:margin-top:z设置上外边距
常见的方法有:margin-right设置下外边距
常见的方法有:margin-left:设置左外边距
常见的方法有:margin-right:设置右外边距
合并:margin:?px;
margin:?px ?px;
- 6.1.4内边距
定义:内容与边框之间的距离,以便精确的控制内容的位置
padding-top:上内边距
padding-bottom:下内边距
padding-left:左内边距
padding-right:右内边距
- 6.1.5盒子模型的尺寸
盒子模型的尺寸:内边距+外边距+边框的宽度+内容的宽度
6.2标准文档流
- 标准文档流
组成:标准文档流:块级元素和内联元素组成!
块级元素:每一个元素都独占一个矩形区域,左右撑满,并且相邻的元素会想竖子方向排列。
内联元素:内容会横向排列,不会独占一个矩形区域。到最有端自动换行!!
- display属性
block: | 默认为块级元素,会带有换行符 |
inline: | 内联元素:默认没有换行符 |
none: | 设置元素不显示 |
第七章:浮动
7.1网页布局
网页布局分为多种:最常见的有3种
7.2浮动
- 浮动在网页中的应用
可以实现全局布局:可以对导航条,内容,标题进行布局。使用float属性!
- float属性
left | 元素向左浮动 |
right | 元素向右浮动 |
none: | 元素不浮动 |
例:float : left
7.3清楚浮动
- 清楚浮动影响
left | 清楚左浮动 |
right | 清楚右浮动 |
both | 清楚左,右浮动 |
- 扩展盒子模型
在所有div盒子的后面加一个div
css那边设置{clear:both margin:0px padding:0px}
7.4溢出问题
- overflow属性
解决内容溢出后的处理
visible: | 默认值,内容不会被修剪,会呈现在盒子外面 |
hidden: | 内容超出会被修剪,其余部分不看见 |
scroll | 内容会被加上滚东条,会被修剪 |
auto | 如果被修剪会出现滚动条(自动) |
- overflow属性的妙用
扩展盒子的高度:这样盒子就会被撑开
例:overflow:hidden: