前端相关html和css

时间:2020-12-20 22:53:47

#请参考http://www.cnblogs.com/pycode/p/5792142.html

#html css js说明

##1.什么是html

HTML(HyperText MarkUp Language)超文本标记语言,通过使用标记来描述文档结构和表现形式的一种语言,由浏览器进行解析,然后把结果显示在网页上,通俗的讲它就是服务器发送的字符串到浏览器,通过浏览器能解析的规则用HTML来描述, 它是网页构成的基础,你见到的所有网页都离不开HTML,所以学习HTML是基础中的基础

* HTML语言是一种标记语言,不需要在服务端编译,直接由浏览器解释执行

* HTML文件是一个文本文件,包含了HTML自己的所有元素

* HTML文件必须使用html或htm为文件名后缀

* HTML不区分大小写,所以HTML与html是一样的

## 2. html css js关系

html是一个网页的主题,是由多个元素组合成的,但是这写元素保留的是基本默认属性,css就是这个网页的样式,css定义了元素的属性,js是通过jacascript语言,实现在一个页面上展现不同的css样式。

它们的关系通俗讲就是 html是一个赤裸裸的人,css是人的衣服,js作用是让人动起来

# HTML

##结构

```

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

```

html中元素是成对存在的,前面叫开始标签,后边叫闭合标签,如< html></ html>,还有一种不需要成对出现的标签,又称为自闭合标签

##Doctype

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档

有和无的区别

* BackCompat:标准兼容模式未开启(或叫怪异模式[Quirks mode]、混杂模式)

* CSS1Compat:标准兼容模式已开启(或叫严格模式[Standards mode/Strict mode])

这个属性会被浏览器识别并使用,但是如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面,那么,在不同的浏览器就会显示不同的样式。如果你的页面添加了那么,那么就等同于开启了标准模式,那么浏览器就得老老实实的按照W3C的标准解析渲染页面,这样一来,你的页面在所有的浏览器里显示的就都是一个样子了。

有,用什么?

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则。

如下就是列举出来的部分解析html的规则。

![](media/14710084930338.jpg)

##head信息

###1.Meta(metadata information)

提供有关页面的元信息,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

* 页面编码(告诉浏览器是什么编码)

```

<meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

<meta charset="UTF-8">

```

* 刷新和跳转

```

<meta http-equiv=“Refresh” Content=“30″>

<meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />

```

* 关键词

关键字作用一般是让爬虫之类的收录程序,当他们在爬你的网站的时候,如果你有关键字,那么他们会优先把关键字收录到他们的记录中,比如百度:如果他们收录之后,他们搜索你的关键字的时候,就能找到咱们的网站

```

<meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >

```

* 描述

例如:cnblogs

```

<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来,博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,推动并帮助开发者通过互联网分享知识,从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">

```

* X-UA-Compatible 浏览器兼容类型

```

X-UA-Compatible  这个是IE8特有的,知道即可,因为做前端的同学都很害怕IE因为他们问题比较多各个版本问题很诡异,当IE8的时候微软想把各个版本的统一,那么这个参数就出现了,他为了向下兼容,如下的代码如果使用IE8的时候他会以IE7的模式运行。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

```

### 2. TITLe

网页头部信息

```

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>这是头部标题</title>

</head>

<body>

</body>

</html>

```

效果:

![](media/14710088563151.jpg)

###3. Link

引入外部文件

* css

```

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

```

* icon  图标

```

<link rel="shortcut icon" href="image/favicon.ico">

```

![](media/14710090061517.jpg)

* Style

在页面中写样式

例如:

```

<style type="text/css" >

.bb{

background-color: red;

}

</style>

```

* Script

* 引进文件

```

<script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

```

* 写js代码

```

<script type="text/javascript" > ... </script >

```

##body主体

body主体是由多个标签组成,标签一般分为两种:

* 块级标签:显示外观按块显示,有一定的宽度和高度,并占据一行,如标题标签、段落标签、水平线标签、列表标签、分区标签(div)

* 行内标签:内嵌标签,类似于文本,按行逐一显示,只有本行完事之后,才继续下一行。如图像标签、超链接标签、范围标签、换行标签等

###特殊符号

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

###常用标签

* h 标题标签 h1--h6表示不同等级的标题

```

<h1>标题1</h1>

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

```

效果:

![](media/14710101008227.jpg)

* 行控制标签

* br/ 换行

* p 段落

* hr/  水平线

* span  范围

```

<p>这是P标签</p>

<p>这是换行效果sdafafa<br/>asfafafafafafafaf</p>

asdasdasdada<hr/>

<span>fuzj</span>

```

效果:

![](media/14710104270440.jpg)

* 上标和下标

上标:< sub></ sub>

下标:< sup></ sup>

* a  超链接标签

* 页面链接

< a href="b.html"> </a>

* url连接

< a href="http://www.autohome.com.cn"> </a>

* 锚连接

1.命名标记  id=1  id需要唯一

2.锚连接   < a href="#1"> </a>

```

<a href="http://www.baidu.com">百度1</a>

<a href="http://www.baidu.com" target="_blank">百度2</a>

#以上两个代码都是跳转到百度页面,唯一在于,加target又重新打开一个标签页面,第一句是在自身页面打开的

<!--寻找页面中id=i1的标签,将其标签放置在页面顶部-->

<a href="#i1">第一章</a>

<a href="#i2">第二章</a>

<a href="#i3">第三章</a>

<!--id没有一个标签的id属性值不允许重复,id属性可以不写-->

<div id="i1" style="height: 500px";>第一章内容</div>

<div id="i2" style="height: 500px";>第二章内容</div>

<div id="i3" style="height: 500px";>第三章内容</div>

```

* 表单 form

* 概念

作用:收集客户端的信息,实现交互

结构:

表单域  < form> < /form>

表单元素 < input />

* 表单域

action 数据提交的目标地址

method 提交方式 get post

* 表单元素

* 文本域  type='text'

* 密码框  type='password'

* 单选框  type='redio' 注意同表单中name需要指定,并且保持一致,并设置不同的选定值 value

* 复选框 type='checkbox' 需设定选定值value

* 列表菜单 select

< select>

< option>选项1< /option>

< option>选项2< /option>

< /select>

* 提交按钮  type='submit'

* 重置按钮 type='reset'

* 普通按钮 type='butten'

* 图片按钮 type='image' src='图片'

* 文本区域  < testarea>< /testarea>

* 文件域 type='file'

```

<form>

<input type="text" value="文本框" />

<input type="password" value="密码框" />

<br> 男 <input type="radio" value="man" name="chice" />

<br> 女 <input type="radio" value="woman" name="chice" />

<br> 北京 <input type="checkbox" value="Beijing" name="bj" />

<br> 上海 <input type="checkbox" value="Shanghai" name="sh" />

<br> 广州 <input type="checkbox" value="Guangzhou" name="gz" />

<br> 深圳 <input type="checkbox" value="Shenzhen" name="sz" />

<select>

<option>北京</option>

<option>上海</option>

<option>广州</option>

</select>

<select>

<optgroup label="华北">

<option>北京</option>

<option>天津</option>

<option>石家庄</option>

</optgroup>

<optgroup label="东北">

<option>辽宁</option>

<option>吉林</option>

<option>黑龙江</option>

</optgroup>

</select>

<input type="button" value="普通按钮" />

<input type="submit" value="提交按钮" />

<input type="reset" value="重置按钮" />

</form>

```

* 列表

* 无序列表

< ul>

< li>< /li>

< li>< /li>

< /ul>

* 有序列表

< ol>

< li>< /li>

< li>< /li>

< /ol>

* 定义列表

< dl>

< dt>标题1< /dt>

< dd>选项1< /dd>

< dd>选项2< /dd>

< dt>标题2< /dt>

< dd>选项1< /dd>

< dd>选项2< /dd>

< /dl>

* 表格

* 格式:

< table>

< tr>   一列

< td>< /td>  一行

< td>< /td>  二行

< /tr>

< tr>   二列

< td>< /td>  一行

< td>< /td>  二行

< /tr>

< /table>

* 合并单元格:

跨列(横向合并):< td cospan=列数>。。。< /td>

跨行(纵向合并): < tr rowspan=行数>。。。< /tr>

注意:合并多少,需在下一列或行减去对应的行数或列数

* 高级

* 标题 < caption>...< /caption>

* 表头 < th>..< /th>

* 页眉 < thread>...< /thread>

* 页脚 < tfoot>..< /tfoot>

# CSS

##选择器

```

标签选择器

div{ background-color:red; }

<div > </div>

class选择器

.bd{ background-color:red; }

<div class='bd'> </div>

id选择器

#idselect{ background-color:red; }

<div id='idselect' > </div>

关联选择器

#idselect p{ background-color:red; }

<div id='idselect' > <p> </p> </div>

组合选择器

input,div,p{ background-color:red; }

属性选择器

input[type='text']{ width:100px; height:200px; }

```

优先级:

ID选择器>类选择器>标签选择器

按照代码的上下顺序,下面的优先级更高

内层标签>外层标签

行内标签优先级高于所有样式表

##CSS常用属性

###background  背景

* 1.background-color  背景颜色

```

<div style=" 红色背景</div>

```

效果:

![](media/14715232853270.jpg)

* 2.background-image  背景图片

```

<div style="background-image: url(saf.jpg); height: 100px;width: 100px"></div>

```

效果:

![](media/14715236977419.jpg)

发现当图片大小小于div时,图片默认会复制多个进行填充,看下面解决办法

* background-repeat  设置是否及如何重复背景图像

```

<div style="background-image: url(saf.jpg); height: 100px;width: 100px;background-repeat: no-repeat"></div>

```

![](media/14715238838277.jpg)

* background-position 图片移位

```

<div style="background-image: url(saf.jpg); height: 100px;width: 100px;background-repeat: no-repeat; background-position: bottom"></div>

```

![](media/14715240012225.jpg)

### border 边框

设置边框,分为实线、虚线、点的线形式如下代码

```

<!--第一种:设置一个线粗2像素、实线、红色、框高20像素(不写框高线就重叠了)、框里面的内容为实线-->

<div style="border: 2px solid red;height: 20px">实线</div>

<!--第二种:设置线粗2像素、点形式的线、黑色、框高20像素,框里面的内容为 虚线-->

<br /><div style="border: 2px dotted black;height: 20px">虚线</div>

<!--第三种:设置线粗2像素、虚线、蓝色、框高20像素,框里面的内容为虚线-->

<br/><div style="border: 2px dashed blue;height: 20px">粗虚线</div>

```

![](media/14715242065369.jpg)

### cursor

设置鼠标停留的形状

```

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>鼠标小手</title>

</head>

<body>

<p  style="cursor:pointer">停放在这里显示小手(pointer)</p>

<p style="cursor:help">停放在这里显示问号(help)</p>

<p style="cursor:wait">停放在这里显示一个圈正在加载形状(wait)</p>

<p style="cursor:move">停放在这里显示移动(move)</p>

<p style="cursor:crosshair">停放在这里显示定位(crosshair)</p>

</body>

</html>

```

###float 浮动

默认块级元素占一整行,如果想要并排显示,可以使用float属性

float属性分左浮动、右浮动

默认:

```

<div style="border:  1px solid  black">

<div style=" width: 50px ;height: 50px"> </div>

<div style=" width: 50px ;height: 50px"> </div>

</div>

```

效果:

![](media/14715247300110.jpg)

如果想要红色的div和蓝色div并排显示,可以加入float属性

```

<div style="border:  1px solid  black">

<div style=" width: 50px ;height: 50px ; float: left"> </div>

<div style=" width: 50px ;height: 50px;float: left"> </div>

</div>

```

![](media/14715248152636.jpg)

已经达到我们的效果,通过效果发现,float起来之后,最外边的div没有里面div的支撑,已经没有了高度,如果我们既需要并排显示,也需要将float之后重新支撑最外边的div,可以进行如下配置

```

<div style="border:  1px solid  black">

<div style=" width: 50px ;height: 50px ; float: left"> </div>

<div style=" width: 50px ;height: 50px;float: left"> </div>

<div style="clear: both"></div>

</div>

```

![](media/14715250495964.jpg)

或者利用伪类进行操作:

```

<style>

.clearfix:after {

content: '.';

clear: both;

display: block;

visibility: hidden;

height: 0;

}

</style>

<div style="border:  1px solid  black" class="clearfix">

<div style=" width: 50px ;height: 50px ; float: left"> </div>

<div style=" width: 50px ;height: 50px;float: left"> </div>

</div>

```

关于伪类的扩展:

before 在标签前加属性

after 在标签后加属性

```

<style>

.c1:before {

content: '666';

}

.c2:after {

content: '888';

}

</style>

<div>

<div class="c1">777</div>

<div class="c2">000</div>

</div>

```

效果:

![](media/14715255835869.jpg)

这种用法常用于设置整个页面的背景颜色

###边距 marginpadding

* margin 即外边距 ,用于设置对象标签之间距离间隔

* padding 即内边距,用于设置本标签内部间距

使用:

默认:

```

<div style="border: 1px solid red">

<div style="width: 50px;height: 50px;">123</div>

<div style="width: 50px;height: 50px;">456</div>

</div>

```

效果:

![](media/14715260888692.jpg)

使用边距移动:

```

<div style="border: 1px solid red ;height: 150px; width: 150px;">

<div style="width: 50px;height: 50px; margin: 10px 0px 0px 20px;padding: 10px 10px 10px 10px">123</div>

<div style="width: 50px;height: 50px;">456</div>

</div>

```

效果:

![](media/14715262015726.jpg)

说明:

* margin: 10px 0px 0px 20px  是蓝色div 距外边框上面10px、右边0px、下边0px、左边20px ,所以蓝色边框距原来的位置移动了

* padding: 10px 10px 10px 10px  是蓝色div内部,通过增加内边距,将123 向上、右、下、左各增加了10px,所以123就出现了边框中间

margin和padding 也支持单独对某个边进行设置

margin-left 对象左边外延边距 (margin-left:5px; 左边外延距离5px)

margin-right 对象右边外延边距 (margin-right:5px; 右边外延距离5px)

margin-top 对象上边外延边距 (margin-top:5px; 上边外延距离5px)

margin-bottom 对象下边外延边距 (margin-bottom:5px; 下边外延距离5px)

padding同样

###定位

常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现。

position参数:

* fixed:特殊的absolute,即fixed总是以body为定位对象的,按照浏览器的窗口进行定位,滚动鼠标位置不移动

* absolute :  将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。按照浏览器的窗口进行定位,滚动鼠标,位置会跟着移动

* relative :  单独写没有什么什么效果,给absolute 结合才能出现化学反应,可以固定在指定的哪个框里面的位。

fixed示例:

```

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>定位</title>

</head>

<body>

<div style="height: 1000px"></div>

<!--在浏览器窗口右上角固定位置,鼠标怎么滚动位置都不会变-->

<div style="position: fixed;right:30px;top:30px;height: 50px;width: 100px">

返回顶部

</div>

</body>

</html>

```

![](media/14715265809276.jpg)

absolute用法:

单独使用absolute用法给fixed语法一样区别在于,固定的浏览器窗口位置会随着鼠标的滚动而移动。

```

<div style="height: 100px;width: 200px">

<!--在浏览器窗口右上角固定位置,随着鼠标滚动而滚动-->

<div style="position: absolute;right:30px;top:30px;height: 50px;width: 100px">

返回顶部

</div>

```

效果:

![](media/14716137224302.jpg)

relative + absolute用法:

relative为absolute指定了固定位置的参照标签,如上图,我需要将红色div放在左边的框里

```

<div style="height: 100px;width: 200px;position: relative">

<!--在外边div右上角固定位置,随着鼠标滚动而滚动-->

<div style="position: absolute;right:30px;top:30px;height: 50px;width: 100px">

返回顶部

</div>

```

效果:

![](media/14716138593718.jpg)

###滚动条overflow

Overflow可以实现隐藏超出对象内容,同时也有显示与隐藏滚动条的作用。

应用场景,有这么一种情况,在一个div内有很多的的内容,如果div的框体不是很大超出去了怎么办?

如下图我不想把"Tom"超出我定义的边框样式:

![](media/14716140560990.jpg)

使用overflow

```

<div style="height: 100px;width: 500px;overflow: auto">

123<br/>

123<br/>

123<br/>

123<br/>

123<br/>

123<br/>

123<br/>

123<br/>

123<br/>

123<br/>

123<br/>

123<br/>

123<br/>

123<br/>

123<br/>

123<br/>

123<br/>

123<br/>

123<br/>

123<br/>

123<br/>

123<br/>

</div>

```

效果:

![](media/14716143912474.jpg)

###display显示与隐藏

我们常常会用到display对应值有block、none、inline这三个值

* 使用display:none;来隐藏所有信息(无空白位占据)

* display:block;用来把内联标签变成块级标签

* display:inline;用来把块级标签变成内联标签

* display:inline-block;把内联标签可以运用样式如:高度,或宽度

```

<!--把内联标签变成块级标签-->

<p style="display:inline;height: 50px;">

块级标签转成内联标签

</p>

<div style="display: none"> display: none此标签隐藏</div>

<span style="display:block;height: 50px;">内联标签转换成块级标签</span>

<span style="display: inline-block;height: 50px; ">内联标签可以运用样式如:高度、宽度</span>

```

效果:

![](media/14716149402000.jpg)

##补充属性

* 背景属性

* background-color 规定要使用的背景颜色。

* background-position 规定背景图像的位置。

* background-size 规定背景图片的尺寸。

* background-repeat 规定如何重复背景图像。

* background-origin 规定背景图片的定位区域。

* background-clip 规定背景的绘制区域。

* background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。 1

* background-image 规定要使用的背景图像。

* inherit 规定应该从父元素继承 background 属性的设置。

* 边框属性

* border 简写属性,用于把针对四个边的属性设置在一个声明。

* border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。

* border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。

* border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。

* border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。

* border-bottom-color 设置元素的下边框的颜色。

* border-bottom-style 设置元素的下边框的样式。

* border-bottom-width 设置元素的下边框的宽度。

* border-left 简写属性,用于把左边框的所有属性设置到一个声明中。

* border-left-color 设置元素的左边框的颜色。

* border-left-style 设置元素的左边框的样式。

* border-left-width 设置元素的左边框的宽度。

* border-right 简写属性,用于把右边框的所有属性设置到一个声明中。

* border-right-color 设置元素的右边框的颜色。

* border-right-style 设置元素的右边框的样式。

* border-right-width 设置元素的右边框的宽度。

* border-top 简写属性,用于把上边框的所有属性设置到一个声明中。

* border-top-color 设置元素的上边框的颜色。

* border-top-style 设置元素的上边框的样式。

* border-top-width 设置元素的上边框的宽度。

* outline  在一个声明中设置所有的轮廓属性

* outline-color  设置轮廓的颜色

* outline-style 设置轮廓的样式

* outline-width  设置轮廓的宽度

* 文本属性

* color  设置文本颜色

* direction   设置文本的方向、书写方向

* letter-spacing 设置字符间距

* line-height 设置行高

* text-align  设置文本的水平对齐方式

* text-decoration 设置添加到文本的装饰效果

* text-indent 设置缩进

* text-shadow   设置添加到文本的阴影效果

* word-spacing  设置单词间距

* 外边距属性

* margin  在一个声明中设置所有的外边距属性

* margin-bottom  设置下外边距属性

* margin-left 设置左外边距属性

* margin-right  设置右外边距属性

* margin-top  设置上外边距属性

* 内边距属性

* padding  在一个声明中设置所有的外边距属性

* padding-bottom  设置下内边距属性

* padding-left 设置左内边距属性

* padding-right  设置右内边距属性

* padding-top  设置上内边距属性

* 定位属性

* position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

* top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

* right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。

* bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。

* left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。

* overflow 设置当元素的内容溢出其区域时发生的事情。

* clip 设置元素的形状。元素被剪入这个形状之中,然后显示出来。

* vertical-align 设置元素的垂直对齐方式。

* z-index 设置元素的堆叠顺序。

* cursor  设置光标类型

* display  是否显示

* float   设置浮动

##其他技巧:

* 拐角:

效果:

![](media/14716161566567.jpg)

代码:

```

<style>

.jianjiao{

display: inline-block;

border-top: 15px solid red;

border-bottom: 15px solid yellow;

border-right:15px solid green;

border-left:15px solid blue;

}

}

</style>

<div class="jianjiao">

</div>

```

* 跑马灯:

```

<div id="i1" style="color: white ; display: inline-block"> 欢迎暴强莅临指导</div>

<script>

//    方式1

//    setInterval("f1()",1000)

//    function f1() {

//

//        var tag = document.getElementById("i1");

//        var text = tag.innerText;

//        var a = text.charAt(0)

//        var sub = text.substring(1,text.length)

//

//        var new_str = sub + a

//        tag.innerText = new_str

//

//    }

//    方式2

setInterval(function () {

var tag = document.getElementById("i1");

var text = tag.innerText;

var a = text.charAt(0)

var sub = text.substring(1,text.length)

var new_str = sub + a

tag.innerText = new_str

},1000);

```