HTML及css入门知识汇总

时间:2021-09-22 14:02:26

HTML及css入门知识汇总

HTML介绍

1.什么是HTML

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

2. .htmlhtm以及.shtml的区别

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

区别:

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

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

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

4)如果在网页中同时存在index.htmlindex.htm,这时浏览器先解释index.html

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

class3 html 3部分以及3DOCTYPE

3.html文档格式

<doctype ...>  

<html>

<head>

</head>

<body>

</body>

</html>

3DOCTYPE的标准:

1)strict.dtd

2)transitional.dtd

3)frameset.dtd

4.xhtmlhtml的区别

xhtmlhtmlxml的一个过渡语言,它比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并排显示,

divcss属性添加: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>

效果图如下:

 HTML及css入门知识汇总

 

7.清除浮动

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

8.新手常犯的几个错误

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

2.id不能为数字

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

9.盒模型-margin讲解

1.margin值介绍:margin值为divdiv之间的间距,

若未指明哪个方向,则默认四个方向都为该值的间距可定义为: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值介绍:borderdiv的边框

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

bordermargin一样也可分别设置四个方向的值

练习使用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的内边距 即文字与边界的距离

paddingmargin一样也有上下左右的设置方法

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

class19 利用margin实现元素的居中

方法为:margin0px 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中的字体大小,若父divfont-size 15px  则子div中的1em15px

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希望有和我一样自学的同学共同学习