您的位置：首页 > Web前端 > CSS

HTML及css入门知识汇总

2016-01-26 17:12 706 查看

HTML及css入门知识汇总

HTML介绍

1.什么是HTML

HTML指的是超文本标记语言(Hyper Text Markup Language)

2. .html与htm以及.shtml的区别

SHTML不是HTML而是一种服务器API，shtml是服务器动态产生的html，虽然两者都是超文本格式，但shtml是一种用于SSI技术的文件，也就是Server Side Include-SSI服务器端包含指令。

区别:

1).htm与.html没有本质上的区别，表示的是同一种文件，只是适用于不同的环境之下

2）DOS仅能识别8+3的文件名，所以*.htm的命名方式可以被DOS识别，而*.html的文件命名方式不能被识别。

3）在UNIX系统中，网页必须使用.html扩展名，如果是htm，在浏览器中打开时则出现源代码；Windows中支持两种扩展名。也可以说htm和html是Windows和UNIX对抗的产物

4）如果在网页中同时存在index.html与index.htm，这时浏览器先解释index.html

5）.shtml是一种用于SSI技术的文件，在web在服务器提供的一种功能，并在服务器端执行。一般来说，要完成较复杂的任务：如聊天室/留言板等，必须设计专门的CGI或ASP。

class3 html 3部分以及3种DOCTYPE

3.html文档格式

<doctype ...>

<html>

<head>

</head>

<body>

</body>

</html>

3种DOCTYPE的标准：

1)strict.dtd

2)transitional.dtd

3)frameset.dtd

4.xhtml与html的区别

xhtml是html向xml的一个过渡语言，它比html严谨性高一些，但基本语言都还是沿用的html的标签。

5.网页布局之切切豆腐

1.进行网页开发时，首先从大处着眼，将整个页面划分成几个方块，使用div标签将其划分好，之后再再每个div里面进行内部装修

2.css控制div显示

例如在bode标签中定义了三个div如下：

<body>

<div></div>

<div></div>

<div></div>

</body>

则在head标签中定义css来控制div

<style>

div{

//这里面填写div的相关属性

width:300px;

height:200px;

background:blue;

}

</style>

为了区分每一个div，需将div取别名id如下

<div id="main">有别名的div</div>

此时在css中定义方法为：

#main{

//定义相关属性

}

6.浮动布局

将几个div并排显示，

将div的css属性添加：float属性即浮动属性值为:left(左浮) right(右浮)

使用float属性即可将div漂浮到普通div上方

小练习：使用浮动布局的方法实现田字格的布局

思路：使用一个大div当背景，再在大div中划分4个小div，都设置成浮动布局，代码如下:

<head>

<title>完成田字格的布局</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content="chance" />

<style>

#bg{

width: 500px;

height: 500px;

background: orange;

}

#topleft{

width: 250px;

height: 250px;

background: pink;

float: left;

}

#toprside{

width: 250px;

height: 250px;

background: green;

float: right;

}

#bottomleft{

width: 250px;

height: 250px;

background: gray;

float: left;

}

#bottomrise{

width: 250px;

height: 250px;

background: blue;

float: right;

}

</style>

</head>

<body>

<div id="bg">

<div id="topleft">第一区间</div>

<div id="toprside">第二区间</div>

<div id="bottomleft">第三区间</div>

<div id="bottomrise">第四区间</div>

</div>

</body>

效果图如下:






7.清除浮动

在不想有div浮动在其上方的普通div属性中加入属性值clear即可，其值可取:left(去除左浮) right(去除右浮) both(去除所有的浮动)

8.新手常犯的几个错误

1.不加doctype --导致低版本IE解析效果不一样

2.id不能为数字

3.文件编码与charset声明不一致

9.盒模型-margin讲解

1.margin值介绍：margin值为div与div之间的间距，

若未指明哪个方向，则默认四个方向都为该值的间距可定义为：margin-top(上边距) margin-right(右边距) margin-bottom(下边距) margin-left(坐边距)

若margin只给了两个值 margin:10px 20px;则上下为10px，左右为20px；

若magin给三个值 margin:10ox 20px 30px;

则上右下为:10px 20px 30px 左边取对边的值即20px

10.盒模型border讲解

1.border值介绍：border为div的边框

border三要素为:宽度(border-width) 形状(border-style 实线/虚线/立体) 颜色(border-color)

border和margin一样也可分别设置四个方向的值

练习使用border画出一个三角形

css代码如下:

<style>

#trip{

width: 0;

height: 0;

border-top: 100px solid red;

border-right: 100px solid green;

border-bottom: 100px solid pink;

border-left: 100px solid blue;

}

</style>



11.盒模型之padding介绍

1.padding值为div的内边距 即文字与边界的距离

padding与margin一样也有上下左右的设置方法

盒子与盒子之间的距离用margin 盒子与文字之间的距离用padding

class19 利用margin实现元素的居中

方法为：margin：0px auto;



12.内联元素介绍

span元素即为内联元素

span元素的使用：单独为某些文字设置css，但不能设置宽高等。

内联元素与块状元素的区别

独占一行

能否设置宽高

竖直方向上的margin padding

块状元素

是

是

有 可以设置

内联元素

否

否

没有 不可设置

内联元素与块状元素可以相互转换

方法为

Display:block 强制声明某元素为块状元素

Display:inline强制声明某元素为内联元素

Display:none 设置之后 该元素和该元素的子元素不在显示，等同于这段代码被删除，在页面内一点空间都不占



13.css控制段落

使用p标签控制文字段落

方法如下：

<p id="content">这里输入段落的内容</p>

其中css中有：

text-indent:20px; 设置段首缩进

text-align:center; 设置文字居中

text-decoration:none;设置下划线 其中值有

none :默认值

blink :闪烁

underline:下划线

line-through：贯穿线

overline：上划线

14.css控制文字

颜色控制:color

字型设置:font-style : italic; //斜体

文字大小设置:font-size

文字加粗:font-weight

文字行高:line-height

字体设置:font-family:"微软雅黑";



15.设置背景图片

使用img标签

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

设置background-repeat:repeat-x; //在水平方向铺

repeat-y:在竖直方向平铺

no-repeat:不重复

background-attachment:fixed;//固定住图片出现的位置

精确控制背景图片位置;

background-position:center top;

或者使用坐标：

background-position:100px 100px;

16.css选择器

#对应的为 id 为id选择器

.对应的为 class 为类选择器

标签则不需要加前缀 标签选择器

17.css的四中引入方式

1.外部链接一个css文件，在html头部标明:<link rel="stylesheet" href="./css/test.css" />

2.头部直接写入css

3.外接多个css文件，例如a.css中引用b.css则需在a.css之前使用语句: @import url(b.css);

4.直接在html标签里写对这个标签的css控制

18.img标签

使用方法如下：

<img src="pic.jpg" alt="图片" title="鼠标放上去显示的内容">

img为内联元素，因此有时候需要强制转换成块状元素

19.有序列表和无序列表

无序列表为：

<ul>

<li>无序列表1</li>

<li>无序列表2</li>

<li>无序列表3</li>

<li>无序列表4</li>

<li>无序列表5</li>

</ul>

有序列表为

<ol>

<li>无序列表1</li>

<li>无序列表2</li>

<li>无序列表3</li>

<li>无序列表4</li>

<li>无序列表5</li>

</ol>

其中可设置list-style:属性

20.整齐的表格:

<table>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

</tr>

<tr></tr>

<tr></tr>

</table>

其中可设置属性border-collapse:collapse;

该属性应在table属性里设置

跨列的方法:

<td colspan="2"></td>

跨行的方法:

<td rowspan="2"></td>

21.超链接:

<a href="www.baidu.com" target="_blank">链接</a>

target属性为:点击的超链接新打开另一个窗口

title属性为:鼠标放上去的显示内容

22.锚点：

可将a标签当锚点用

<a name="p1"></a>

将该语句放到你想要放置锚点的代码的前一行

用#号来指向页面内的锚点

23伪类:

可将超链接标签不同的状态设置不同的属性

a:link{

//未操作之前

}

a:visited{

//鼠标点击后

}

a:hover{

//鼠标放上去时

}

a:active{

//鼠标点击的一瞬间

}

active一般不必写

以上四中状态设置顺序不可改变：lvha！！！

24.字符实体

在html开发中，有一些字符不适合直接写出如 大于> 小于< 双引号" 版权符号© 空格 商标® 乘号× 除号&drivde; 元¥

25.颜色的表示:三种表示方法

1.英文：red blue等

2.三原色：rgb(100,100,100);

3.十六进制：#EEEEEE

其中前2位表示red的数值 中间2位为green的数值 后2位为blue的数值

16进制表示时，若6个字符全相等，可只写3个，例如#EEEEEE简写为#EEE

26尺寸的表示：三种表示方法

1.像素

2.百分比

3.em表示 ：一个单位的em为父div中的字体大小，若父div中font-size 为15px 则子div中的1em为15px；

27.用css画圆角：

border-radius:5px;即可

28.div的相对定位与绝对定位：

使用position标签

position:relative 相对定位

top:10px;

left:10px;

相对于自己原先的位置进行移动



绝对定位：

将该div定位到任意的某一个位置：

position:absolute 相对定位

top:10px;

left:10px;



29.overflow溢出处理

在div中添加overflow属性即可

overflow:auto;

30.表单

<form action="">

<p>

</p>

</form>

这里直接用一个小练习来总结：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

<head>

<title>表单介绍</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content="表单练习" />

</head>

<body>

<form action="form.html" method="post">

<p>用户名:<input type="text" name="username" /></p>

<p>密 码:<input type="password" name="password"></p>

<p>

性别:男:<input type="radio" name="xingbie" value="男" checked="checked"/>

女:<input type="radio" name="xingbie" value="女"/>

</p>

<p>

爱好:<input type="checkbox" name="habby" value="篮球"/>篮球

<input type="checkbox" name="habby" value="足球"/>足球

<input type="checkbox" name="habby" value="桌球"checked="checked"/>桌球

<input type="checkbox" name="habby" value="手游"/>手游

</p>

<p>

<select name="xieli">

<option value="大学" >大学</option>

<option value="高中" selected="selected">高中</option>

<option value="初中">初中</option>

</select>

</p>

<p>

<textarea name="intro" id="" cols="30" rows="10"></textarea>

</p>

<p>

上传文件:<input type="file" name="pic" />

</p>

<p>

<input type="submit" />

</p>

</form>

</body>

</html>

总结:

花了三四天看燕十八的html视频，然后自己开始整理自己的资料，值得说明的是:看视频确实比看书学得多得多，在此也推荐我在自学的网站视频地址:www.zixueit.com希望有和我一样自学的同学共同学习
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航