码迷,mamicode.com
首页 > Web开发 > 详细

HTML + CSS

时间:2017-06-18 10:39:30      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:add   清除浮动   block   sel   地方   hid   单击   删除线   wait   

第一章
一、HTML定义:超文本标签语言
作用:制作网页

二.结构:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>放网页标题</title>
<meta name="keywords" Content="搜索引擎关键字内容" />
<meta name="description" Content="搜索引擎描述内容" />
<meta http-equiv="Content-Type" Content="text/html; Charset=utf-8"><!-- 用 来设置字符编码 -->
<!-- utf-8国际通用的中英转码gb2312 也是中英转码,通用 性没有utf-8强 -->
<!--meta标签可以省略不写-->
</head>
<body>
网页的内容部分
</body>
</html> QQ:1416890750 电话:18873301563

三.标签
<>是标签,<>里的东西是标签名称
标签的种类
a.有主体的标签
<标签名>主体内容</标签名>
例:<html>.....</html>
<title>网页标题 </title>
b.无主体的标签 自身闭合
<标记名/> 例:<br/> <hr />
c.有主体有属性的标签
<标签名 属性1=“值1” 属性2=“值2”></标签名>
例:<table border="1"></table>
d.无主体有属性的标签
<标签名 属性1="值1" 属性2="值2"/>
例:<img src="....." />

1.网页标题标签:<title></title>
2.内容标题标签:<h1>-<h6>
3.段落标签:<p></p>
4.换行标签:<br/>
5.水平线:<hr/>
6.加粗 :<strong></strong>
7.倾斜:<em></em>
8.下划线:<u></u>
9.注释: <!--注释的内容-->

四、网页中特殊符号的表现形式
1、空格:&nbsp;
2、<: &lt;
3、>: &gt;
4、&: &amp;
5、版权符:&copy; 6、双引号:&quot;

 

五、图片标签
<img src="图片的地址" align="水平对齐方式" hspace="水平间距" vspace="垂直间距" height="图片的高度" width="图片的宽度" alt="替代文本,图片无法正常显示的时候显示的文字" title="鼠标悬浮提示文字" />

注意:src:相对路径和绝对路径
1、相对路径:是从当前打开网页的目录开始查找。通过../找到上一级目录,有几个上 级目录就有几个../
2、绝对路径:盘符\文件夹名称\图片名 是从指定的盘符开始查找

六、链接
1.超链接:页面与页面间的链接
<a href="链接文件的路径" target="目标文件显示方式"></a>
target="_self" 打开自身的窗口
target="_blank" 新建窗口
2.锚链接
a.同一页面间的:
在目的地做标记:<a name="标记名">目的地</a>
在要点击的地方:<a href="#标记名">点击的地方</a>
b.不同页面间的:
在目的地做标记:<a name="标记名">目的地</a>
在要点击的地方:<a href="页面路径#标记名">点击的地方</a>
3.功能性链接
邮箱:<a href="mailto:邮箱地址">联系我们</a>
QQ:<a href="Tencent://Message//uin=QQ号">QQ</a>
4.伪链接(空链接)
<a href="#">内容</a>

 

第二章
列表
1.有序列表
<ol type="1">
<li></li>
<li></li>可以有多个li,所有的内容必须 放入li中
</ol>
type值:1 数字,
A/a 字母大小写
I/i罗马文
不设置type默认是数字模式

2.无序列表
<ul>
<li></li>
<li></li>可以有多个li,所有的内容必须 放入li中
</ul>
type值:disc实心圆形,(默认值)
circle空心的圆形,
square实心的正方形


3.定义列表:对某文字或图片进行描述的时候使用
<dl>
<dt>被描述的内容</dt>
<dd>描述的内容</dd>可以有多个
</dl>

4.列表嵌套
a.无序列表:在<li>标签中再嵌套其他的列表 ,嵌套时要先声明列表(不能直接嵌套li标签)
效果:无序列表与嵌套的列表成父子关系,子列表会有缩进效果,并且如果嵌套的是无序列表,那么列表的符号会递减(实心圆-空心圆-方形)
b.有序列表:和无序列表同理,只能在li标签中嵌套其他列表,并且嵌套时要先声明列表
效果:有序列表嵌套有序列表,子列表会缩进,,但是符号不会递减

 

表格
1.优点:结构清晰简单稳定,使用方便
2.表格结构
<table border="1" height="500" width="300" cellspacing="0" cellpadding="0">----------表格
<tr bgcolor="表格背景色">-----------行
<td></td>---单元格
</tr>
</table>
border:表格的边框;
height:设置表格的高度;
width:设置表格的宽度

3.注意:有多少行就有多少对tr,有多少单元格(列)就有多少对td
cellpadding:用于隔开单元格内容到单元格边框的距离
cellspacing:表示单元格与边框的距离
4.表格跨行:rowspan="跨行的数目" 跨行永远从上往下跨
跨列:colspan="跨列的数目" 从左往右跨
5.单元格对齐:align(水平对齐属性):center居中 /left左对齐/right右对齐
valign(垂直对齐属性):top顶端对齐/middle 居中对齐/bottom底端对齐/baseline基线对齐
如果作用在table上,那整个table会根据设置的值而改变
6.设置单元格边框颜色:bordercolor="颜色"
7.表格背景图片:background="图片地址"
8.表格标题:
<caption>标题内容</caption>(放在<table>底下第一行)

框架:
1.为什么使用框架
使网页的头部和底部能重用,过多的使用框架不利于搜索,所以商用少,多用于企业管 理网站
注意:<frameset>和<body>不能同时出现
网页分割后每一块都是一个<frame>,每一个<frame>可以放一个独立的网页
2.语法:
<frameset rows="25%,50%,*"(纵向分割成25%,50%,25%) bordercolor="red" border="5" cols=""(横向分割)>
<frame src=".....the_first.html" name="top"/>
<frame src=".....the_second.html" name="middle"/>
.........
</frameset>
横向分割为cols 纵向分割为:rows

3.嵌套:
<frameset rows="50%,50%">
<frame src="xxxxx"/>
<frameset cols="xx,xx">
<frame src="xx"/>
<frame src="xx"/>
</frameset>
</frameset>

4.框架中的target属性
在框架需要打开网页的<frame>里设置name属性(name属性的设置需要有意义),然后 在我们链接目标的<a>标签中设置target=“框架name名字”
效果:可以在目标<frame>当中打开链接的目标网址
语法:
<frameset cols="50%,*">
<frame src="页面路径" name="path"/>
<frame src="页面路径" name="path2"/>
</frameset>
<a href="页面路径" target="path">打开第一个网页</a>

5.内联框架
<iframe>内联框架(页中页)</iframe>要在<body>里
<iframe src="path"(引用页地址)
name="框架标识名" frameborder="1/0(框架是否有边框)"
scrolling="yes/no"(框架是否有滚动条)
width="宽度" height="高度">
</iframe>
注意:如果要实现点击链接在内联框架中跳转页面,将链接
的target属性设置成内联框架的标识名。

 

表单

一.表单:用来提交信息
1.<form id="form1" method="get/post" action="提交地址"></form>
ID:表单标识(类似身份证)
get:显示提交方式,不安全,提交信息在地址栏上显示
提交的数据有限制,大小最大为1kb
post:隐式提交方式,安全,信息不会在地址栏上显示
提交的数据理论上没有限制

2.表单元素
1.文本框:<input type="text" />
name:定义单行文本框名称
size:定义单行文本框的宽度
maxlength:定义单行文本框可以输入的最大字 符/字节数
value:定义单行文本的初始值,上传给服务器的值
2.密码框:<input type="password" />属性和文本框一样

3.按钮:普通按钮:<input type="button" value="普通" />
提交按钮:<input type="submit" value="提交" />
重置按钮:<input type="reset" value="重置" />
图片按钮:<input type="image" src="路径" />

4.复选框:<input type="checkbox" checked="checked" /> (checked:设置默认选项)
注意:可以选择多个,也可以不选,但是同一组的复选框 name属性要一致

5.单选按钮:<input type="radio" name="" /> (name用来设 置选择其中某一个单选按钮)

6.文件域:<input type="file" />
在文件域之前的<form>标签里加上
<form method="post" action="XXXXX" nctype="multipart/form-data">
因为文件的信息量较大

7.下拉列表框:<select >(selected设置默认选项)
<option selected="selected">内容 </option>
</select>

8.多行文本域:<textarea cols="宽(字节数)" rows="高">
内容</textarea>

9.隐藏域:<input type="hidden" />

二.只读和禁用
1.只读(readonly):颜色不会发生变化,只能读取,不能操作
2.禁用(disabled):颜色变灰色,无法使用

三.语义化(把表单中的元素用框框起来):
1.作用:结构合理代码简单
便于浏览器识别
便于搜索引擎搜索
符合W3C规范
2.域和域标题
<fieldset>--------域
<legend>标题</legend>----域标题
放其他内容
</fieldset>
3.文本标签:
<label for="标识名"></label>
注意:标识名要和按钮(单选/复选)中的id名相同,点击<label>标签中间的文本也可以选中按钮,增强鼠标的可用性

 

 


第四章 CSS样式
一、字体样式
font-style:字体风格:正常normal/倾斜oblique/意大利体italic
font-weight:字体粗细bold
font-size:字体大小
font-family:字体类型

font在一个声明中设置所有字体属性
font:italic bold 36px "宋体";
font设置顺序:风粗大类
字体风格-->字体粗细-->字体大小-->字体类型

二.CSS:层叠样式表
1.优势:使页面更加美观
页面和样式分离
使代码更加简洁
利于搜索引擎搜索
符合W3C的规范

2.选择器:
a.标签选择器:整个文档中所有的该标签内容都实现该样式
语法:标签名{样式1;
样式2;
}

b.类选择器:出现特殊情况,使用多次的样式
语法:.类名{样式1;
样式2;
}
c.ID选择器:只能使用一次的样式
语法:#id名{样式1;
样式2;
}
3.选择器的优先级:(有相同样式按优先级,没有相同样式都会使用)
ID选择器 > 类选择器 > 标签选择器


三.样式表
1.行内样式表:写在标签内
使用方便,不利于后期维护
2.内部样式表:写在<head></head>中
只设置一个网页的样式
3.外部样式表:新建一个CSS文件
多个网页可以共用一个css页面
<link href="css页面的路径" type="text/css" rel="stylesheet" />

<style type="text/css">
@import url("css页面的路径");
</style>

4.样式表的优先级:(就近原则)
行内样式表 > 内部样式表 > 外部样式表

 

第五章 美化网页元素
一.<span>范围标签</span>,本身不自带任何样式
<div></div>块级标签,独占一行

二.文本样式
color:文本颜色
line-height:行高,作用:垂直居中或设置行距
text-decoration:文本修饰,加下划线underline
中划线line-through(删除线)
上划线overline
闪烁blink(只在Firefox浏览器中有效)
不加线none
text-align:水平对齐方式,left:左 center:中 right:右
vertical-align:垂直对齐方式,居上top
居中middle
居下bottom
文本首行缩进设置:text-indent:2em;
长度单位:px,em(中文网页通常用em作为缩进单位)
文本不换行:white-space:nowrap;

 


三.超链接伪类样式
a:link 超链接未访问
a:visited 超链接访问后
a:hover 超链接悬浮
a:active 超链接单击未释放

四.鼠标形状样式:可以作用于任何标签
cursor: default:默认光标
pointer:超链接的指针(一只手)
wait:正忙(漏斗)
help:帮助(问号)
text:文本(光标)
crosshar:十字状

 

五、背景样式+div标签
<div></div>是一个块级标签,具有高度和宽度
经常使用div布局,div+table经典布局之一

background-color:设置背景色
background-image:url(图片名称.后缀名);
background-repeat:设置图片平铺方式
有4个值:
background-repeat:repeat //表示水平和垂
直两个方向平铺(水平和垂直方向图片都重复)
background-repeat:no-repeat//表示不平铺(只显示一次)
background-repeat:repeat-x //表示只沿水平方向平铺
background-repeat:repeat-y //表示只沿垂直方向平铺

background-position:背景定位两种方式
background-position :30% 30%;//通过百分比的方式定位第一个参数表示水平方向 ,第二个参数是垂直方向
background-position:left top;
水平方向有 left(左) right(右) center(中)
垂直方向有 top(上) middle bottom(下)

background:颜色 图片 位移 平铺;
简写:background:#c00 url(图片地址) 205px 10px no-repeat;
顺序:背景颜色-背景图片-背景定位-背景重复方式


六、列表样式
list-style-type
none无标记符号 disc实心圆(默认类型)
circle空心圆 square实心正方形
decimal数字

列表图片代替标记
list-style-image:url(图片地址)

列表图片定位
list-style-position
两个值:inside outside
inside:表示标记图片在文本以内,且环绕文本标记对齐
outside:是默认值,它保持在标记文本的左侧,列表项标记放置在文本外,且环绕文本不根据标记对齐。

 

第六章 盒子模型
一.盒子模型:包含border,padding,margin属性

二.border:边框(top、right、bottom、left)
1.border-width:宽度(border-top-width:上边框的宽度) 1px
thin:细的
medium:加粗
thick:更粗
2.border-style:样式(实线solid,虚线dashed,双线double,点dotted...)
3.border-color:颜色(四条边颜色不同,顺时针)
4.border:缩写,顺序可以打乱
例:border:1px solid red;

三.margin和padding
1.margin:设置盒子以外的间距(外间距)
2.padding:设置内容和盒子边框的间距(内间距)
3.缩写:margin和padding一样
padding:10px;(四个方向都是10px间距)
padding:10px 20px;(10px:上下 20px:左右)
padding:10px 20px 30px;(10px:上 20px:左右 30px:下)
padding:10px 20px 30px 40px(上 右 下 左)顺时针方向

四.display:
1.display:block;/*将内联元素转换为块级元素,显示元素内容*/
2.display:inline;/*将块级元素转换为内联元素*/
3.display:none;/*隐藏元素*/

 

 

 

 


浮动
一.浮动:float
float:left;向左浮动
right;向右浮动
none;不浮动
特性:脱离标准文档流
将块级元素转换为内联元素
文字将会环绕浮动元素显示

二.clear:清除浮动(不是去掉浮动,让后面的元素不受上面浮动元素的影响)
left:清除上一个浮动元素的左浮动
right:清除上一个浮动元素的右浮动
both:清除所有的浮动


三.overflow:溢出处理:它规定当内容溢出盒子时发生的事情,例如内容不会被修剪而呈现在盒子之外,内容会被修剪,修剪内容隐藏等
visible:默认的,超出的部分继续显示
hidden:超出部分不显示(隐藏)
scroll:显示滚动条(横向和纵向都会出现)
auto:自动调整滚动条的出现(纵向出现)

 

定位
一.定位方式position:
1.absolute;绝对定位:相对浏览器而言(上一级元素而言)
2.relative;相对定位:相对于自己原来的位置而言
3.fixed;固定定位:定位到一个位置,位置将不会发生变化,少用,很多浏览器不识别
4.static:静态定位,默认
5.注意:一个元素有绝对定位,它的上级有定位,则这个元素不再相对浏览器定位,而是相对于上级有定位的元素定位

二.z-index:处理层次
1.值越大越在上层,值越小越在下层
2.z-index结合定位用,如果没有定位的元素默认
z-index:0;(注:值为整数)

三.背景元素透明度(一般设置时前两种同时设置为了兼容不同版本的浏览器)
1.opacity:x x值为0-1 值越小越透明(ie9之前的版本不支持)
2.filter:alpha(opacity=x)x值为0-100值越小越透明
3.html5之后设置背景元素透明度
background:rgba(0,0,0,0.4) a为不透明度 值为0-1
rgb值可以设置颜色 值为0-255

 

HTML + CSS

标签:add   清除浮动   block   sel   地方   hid   单击   删除线   wait   

原文地址:http://www.cnblogs.com/blogscc/p/7043411.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!