html、css

心弄影

于 2015-12-01 09:42:04 发布

阅读量431

点赞数 1

分类专栏：前端

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html

HTML概念

HTML 4.01版

概念

      1.超文本标记语言hyper text mark-up language
      2.是由浏览器解析
      3.后缀名是 html 或 htm ,没有区别
      4.用作展示页面

标签写法

  1.<>中包裹一个英文单词
    2.所有标签不区分大小写(推荐使用小写)
  3.标签分为两类

1>围堵标记=> 有开始标签有结束标签 :<a 属性> 标签体 </a>
2>自闭合标签 => 例如 <br/>
注意:所有标记语言,标签中的英文单词没有以数字开头的.<11error>
注意:HTML中不支持 : 空格回车制表符.都会被解析成一个空白字符.转义

常用的标签

　注释:＜！－－　　－－　＞

文件标签:

html标签:
声明当前网页为html页面
子标签:
<head></head>
<body></body>
head:用来存放当前页面的重要信息,一般不展示在html页面上
常见的子标签:
<title></title> 网页的标题
body:
要展示的数据放在body中

标题标签:

<hn></hn>
n取值 :1~6
h1最大 h6最小
自动换行且留白默认加粗
常用属性:　align:对齐方式
left:左 right:右 center:居中
格式:
<h2 align="center"></h2>

排版标签

字体标签

<font>,<strike>过时线,<u>下划线,<b>加粗,<i>斜体

转义字符

< , > ,  

清单标签

      有序列表: ol li 属性 type: A a 1
      无序列表: ul li 属性 type: disc,square
      定义列表: dl dt dd

超链接标签

<a> href="www.xx.com" href="#"跳自己 target = _self , _blank 新界面,

图片标签

<img> 常用属性: src:图片的路径; alt:替代文字; title:移上去显示的文字 ;width:宽;height:高

大小的写法: 像素:123px 百分比:20%
路径的写法: 相对路径:
./ 或者什么都不写当前目录
../ 上一级目录
绝对路径:
带协议的绝对路径: http://www.itheima.com

表格标签

<table> :border width height bgcolor

<th>表头 :居中加粗

<tr>行

<td>列 colspan:列合并 rowspan

框架标签

frameset , frame

表单标签

          form
          input
type属性: text password radio checkbox submit file Reset hidden button image
          select
          textarea
          meta标签
          <meta>: Content-type , refresh

选择器

id 对应 # class 对应 .

div定位：
1.浮动：多个div float:left; 设置成一行，使用后要清除 clear:both 不影响后面的显示
2.相对定位：position:relative; left:60%;没有脱离文档流[原来的位置还是被其占有]
3.绝对定位：position:absolute; right:0px;脱离文档流[原来的位置让出来了] //一般相对浏览器边框，如果父类设置了相对定位，就绝对于父类

display:none 不显示
#xx:hover{ cursor:hand; } 鼠标移动到上面

margin:0px 1px 5px; 上0 右1 下5 左1
padding:0px;

font-size、color、backgroud-color、margin、padding、overflow:hidden[滚动条]、border:1px solid red;、text-align:center、width

<a href="javascript:void(0)" οnclick="xxx()"> 去掉链接效果 </>

css

cascade style sheet 层叠样式表

1.概念

决定页面的样式.
1>.配色
2>.布局

2.CSS与 HTML的结合方式

1> style属性 style="color:red"

2> style标签 <style type="text/css"> p[选择器]{color:red;} </style >

3> link标签引入 <link type="text/css" rel="stylesheet" href="xx.css">

3.CSS的选择器

1>标签选择器标签{属性key:value}

2>id选择器（不可重复） #id {属性key:value}

3>class选择器（可重复） .className{属性key:value}

4>选择器分组(共用) #id,.className,....{属性key:value}

5>伪类选择器 :某标签的某种状态，常见4中：l,v,h,a(link,visited,hover,active)

l:没有点击的状态

v:放过的

h:鼠标在标签上

a:激活状态，鼠标点下去没有松

<style type="text/css">
	a:link {
		color:red;
	}
	a:visited {
		color:green;
	}
	a:hover {
		color:blue;
	}
	a:active {
		color:yellow;
	}
</style>

4.CSS的基本语法

选择器 {

属性键:属性值;
属性键:属性值1 属性值2 ....;

}

注释:与java中多行注释相同
/* 注释内容 */

5.CSS的常用属性

单位:

颜色单位: Color Units

#RRGGBB rgb ( R,G,B ) Color Name

长度单位 Length Units

em ex px像素(常用) pt pc in cm mm

单位换算：1in = 2.54cm = 25.4 mm = 72pt = 6pc

属性:

字体属性.
  背景系列.
  尺寸系列. width height
  边框系列.
  边距系列.
      内边距 padding
      外边距 margin

color ==> 文字颜色

字体：

  font-family ==> 文字样式(黑体...)
  font-size ==> 文字大小(12px)
  font-style => 文字样式( italic ) (斜体...)
  font-weight => 文字加粗(100)
  font-variant => 异性字(small-caps)

背景：

background-color:red;

background-image:url("../images/xx.jpg");

background-repeat:no-repeat;

background-attachment:fixed;