web前端

html
css(cascading style sheet)层叠样式表
- 如何使用样式:
css样式语法规范:
css选择器:
border样式:
背景:
文本格式:
页面元素定位:
列表样式:

html

html中有很多的标签/标记/对象/元素/节点
html应该遵守xml规范
xml中的节点是由程序员自定义的,但html中的标记是固定的
html中内容是由文本组成的,且都有默认的样式,可以用css来改动
最终在浏览器中解析并显示
是以.html或.htm文件为结尾

html的文档结构

必须以<html>为根节点
html节点有两个子节点:<head>和<body>

放置网页的头信息
放置的是网页的内容,这些内容都显示在浏览器页面中
节点的前面添加html文档声明
<!DOCTYPE>用来声明html版本现阶段常用版本 html4,html5

列表元素

分区元素

:可以说成div层,div块,更多用户做网页布局和网页的内容,按照块来显示 ,可以自动换行,行间距不大
:可以行内块,一般用于处理一个大块文字中的部分文字

行内元素

:用来定义斜体文字
:用来给文字加粗
~~:给文字带有删除线~~
:给文字添加下划线

空格折叠

默认情况下html中的多个空格,多个制表符,多个换行符都会压缩成空格

文字换行

:换行,此元素没有</br>

特殊符号的使用

图像显示

图片元素 :显示图片,没有</img>
属性:

src:指定图片的源
width:指定图片的宽度
height:指定图片的高度

多媒体元素

:可以显示视频或音频
src:指定播放源
width:宽度
height:高度

超链接元素

分类:

a标记超链接
属性:
href=”超链接目的地”
target=”目标打开方式”
_blank:在一个新空白窗口打开
_self:在当前的浏览器窗口打开
其他frame的名字
a标记锚点
定义:

   <a name="自定义的锚点的名字">网页中显示文字</a>
   <a href="#锚点的名字">网页中显示的文字</a>

表格

table表格元素
border:边框
width:宽度
height:高度
align:对齐方式
cellpadding:单元格边框与内容之间的距离(像素值或百分比)
cellspacing:单元格之间的距离
tr行元素
align:水平对其 left center right
valign:垂直对齐 top middle bottom
td单元格元素
align:水平对其
valign:垂直对其
width:宽度
height:高度
colspan:列合并
rowspan:行合并
th单元格元素(表头)

thead表头
tbody表格内容
tfoot表尾

在body中显示表单

用来显示和收集信息,把收集的信息提交给服务器,表单可以由两部分组成<form>元素和表单控件元素

元素,用来定义一个表单 action:表单要提交到那个目的地 method:表单的提交方式: post提交:传递数据量大,地址栏不显示,安全 get提交:传送数据量小,地址栏显示,不安全 enctype:表单提交的编码方式
表单控件
文本框
密码框
单选框
多选框
按钮
提交按钮
重置按钮
隐藏
文件框
其他表单控件
下拉列表框

多行多列的文本框

元素的属性
type:类型
name:名称
value:值
maxLength:限制输入字符数
readonly:设置为只读
单选框和多选框的常用属性
value:值
name:名称
checkd:设置默认选中
按钮的属性
value:按钮上显示的字

css(cascading style sheet)层叠样式表

css样式: 什么是css样式: css层叠样式(Cascading Style Sheet )

如何使用样式:

内联样式,行内样式: 样式定义在单个的html元素中比如:

    <span style="color:xxx;">小小鸟</span>  

特点:只能在当前的元素中使用

内部样式表: 样式定义在html页面的<head>元素中
比如

  <head>
	<style>
		/*所有span中的文字都变成red*/
		span{
			color:xxx;
		}
	</style>
  </head>

特点:样式作用域是当前整个html文档,在当前html中可以重复使用

外部样式,外联样式: 是定义在一个外部的css文件中(.css文件)
在html中引入这个css文件
比如:

    style.css文件
	内容如下:
	span{
	   color:xxx;
	}
    ...

html文件中

	<head>
	<link rel="stylesheet" type="text/css" href="style.css"/>
    </head>

css样式语法规范:

css可以由多个样式规则组成
每个样式的规则有两个部分选择器和样式声明
比如:

   h1      {color:xxx;font-weight:bold;}

h1是选择器
样式必须用大括号括起来
大括号中所有样式,都必须用”;”分号间隔,多个样式是样式叠加
样式包括两部分,样式的属性和样式的值
样式的属性和样式的值用”:”冒号间隔

css样式规则特性
继承性:父元素的css的声明可以被子元素继承
层叠性:同一元素存在多个css,不冲突,就叠加
优先级:同一个元素存在多个css,有冲突的,优先级高的生效
浏览器缺省设置外部样式或内部样式内联样式
由低到高

css选择器:

元素选择器通过元素的名称来选择css作用的目标比如

   span{
          /*所有的span的字都是红色*/
          color:xxx;
        }

类选择器: 类选择器允许以一种独立于文档元素的方式来指定样式
语法:
.className{样式的定义} 所有能够附带class属性的元素都可以使用此样式声明

如果页面中有过个不同的元素需要重用同样的样式效果
可以是用类选择器
比如:

     .divclass{
		font-weight:bold;
	 }
	 <div class="divclass">测试div</div>

补充:
可以将类选择器和元素选择器结合起来使用,以实现对某种元素中不同演示的细分控制
语法:
元素选择器.className{}
比如:

  h1.cn1{
	/*cn1只能在h1的元素中使用*/
  }

id选择器: id选择器以一种独立于文档元素的方式来指定样式
他作用于id属性值
语法为:

     #id{
	    样式定义
	 }

比如:

    #divid{
		background-color:xxx;
	}
  
    <div id="divid"></div>

派生选择器
- 子选择器:用于选择指定标签的第一代子元素符号是>
  语法:
  某个选择器>某个子元素的名称{}
  比如:

       .food>li{
			 border:1px solid blue;
	   }

后代选择器:用于选择指定标签元素下后辈元素符号是空格
语法:
某个选择器某个子元素的名称{}
比如:

      .food li{
		border:1px solid blue;
	  }

伪类选择器: 伪类用于设置同一个元素的不同状态下的样式
常用的伪类:
:link 向未被访问的超链接添加样式
:visited 向已经访问的超链接添加样式

:active 向激活的元素添加样式
:hover 当鼠标悬停至元素上方时,向该元素添加样式
:focus 当元素获取焦点时,向该元素添加样式

border样式:

border属性是用来设置元素的边框

四边设置:
-border:width值 style值 color值;
比如:

     border:1px solid  blue;  

单边设置:
border-left:width值 style值 color值;
border-right:width值 style值 color值;
border-top:width值 style值 color值;
border-bottom:width值 style值 color值;

box盒子模型:处理元素框的内容,内边距,边框,外边框的方式

<!--演示盒子模型-->
<div class="borderclass">
	<div class="box">
		这是演示盒子模型
	</div>
</div>   
/*演示盒子模型*/
.borderclass{
	border:1px solid blue;
	width:200px;
}

.box{
	border:2px dotted green;
	width:70px;
	/*四边设置*/
	margin:30px;
	padding:10px;
}
.box1{
	border:2px dotted green;
	width:70px;
	/*单边设置 上右下左*/
	margin:10px 20px 30px 40px;
	padding:10px 20px 30px 40px;
	margin
}
.box2{
	border:2px dotted green;
	width:70px;
	/*单边设置 上下   左右*/
	margin:20px 30px;
	padding:20px 30px;
}
.box3{
	border:2px dotted green;
	width:70px;
	/*单边设置 当左右为auto时候,水平居中*/
	margin:20px auto;
	padding:20px 30px;
}

背景:

背景色:
background-color:red;
注意red还可以用#6位16进制数来替代
背景图片:
background-image:url(‘图片的路径(相对或绝对)’);
注意:
默认值是none,表示没有没有背景图片
如果设置图片就用url方式指定图片路径

默认情况下,背景图片在水平和垂直方向上重复出现
background-repeat属性可以控制背景图片的平铺效果
background-repeat的取值:
-repeat:在垂直方向和水平方向重复
-repeat-x:仅在水平方向重复
-repeat-y:仅在垂直方向重复
-no-repeat:仅显示一次

文本格式:

指定字体: font-family:value1,value2,value3;
value指的是字体(前提当前系统中存在字体)
指定大小: font-size:value;
value是一个具体像素值
指定加粗 font-weight:normal/bold/100-900
文本颜色: color:value
value是一个具体颜色的单词,也可以是一个#6位16进制数
文本排列 text-align:left|right|center;
文本修饰:
underline 下划线
text-decoration:none|underline;
行高: line-height:value
value是一个具体的数值
首行文本缩进: text-indent:value
value是一个具体的数值
表格样式: 表格同样可以使用box模型(边框,内边距,宽,高)
以及文本样式
表格特有的样式属性如果设置了单元格的边框,相邻单元格的边框会单独显示
类似于双线边框
border-collapse属性:合并相邻的边框
设置是否将表格边框合并为单一边框
属性的值:border-collapse:separate|collapse;

补充内容th:也是单元格,代表表头,表头的内容是黑体加粗居中

页面元素定位:

定义元素框相对于其正常位置应该出现的位置,
或者相对于父元素,另一个元素甚至浏览器窗口本身的位置

流定位(推荐) 从上到下顺序排列,<div>是从上到下
从左到右排列是从左到右
浮动定位(推荐) 让元素脱离普通的流定位
将浮动元素放置在父元素的左边或右边
浮动元素依旧位于父元素内
浮动的框可以向左或向右移动,直到他的外边框边缘碰到父元素
或另一个浮动的边框位置
经常浮动定位做网页的布局
float:none|left|right
相对定位
绝对定位
固定定位

列表样式:

list-style-type属性用于控制列表中列表项的样式
无序列表ul:出现在各列表左边的原点取值:

none 无符号
disc 实心圆默认
circle 空心圆
square 实心方块有序列表ol:可能是字母,数字,或其他的计数体系符号取值:
none 无标记
dicimal 数字(1,2,3…)
lower-roman 小写罗马(i,ii,iii…)
upper-roman 大写罗马(I,II,III…)

list-style-image属性使用图像来替换列表项的标记
取值:
list-style-image:url(‘图片的路径’);