前端小白的福利

做为一名想学习前端技能的小白，仅仅看视频是不够的，更要用真实案例去实践，才能真正学到，这是我最近几天整理的小笔记，期间也写了几个小案例，包括：用div堆积木、写三角形等等。在篇幅的最后会附上截图，如果有写的不对的地方，还请大家多多指教。。。

一、什么是HTML

可扩展超文本标记语言，是HTML语言向XML过渡的一种语言

二、XHTML页面结构

1.定义文档类型

DOCTYPE.文档类型，该元素的名称和属性必须大写

2.XHTML 1.0提供的三种DTO文档类型

(1)过渡型(Transitional):允许继续使用HTML4的元素

(2)严格型(Strict):不能使用任何描述性的元素和属性

(3)框架型(Frameset):针对的是框架页面设计

3.声明命名空间

Xmlns, 命名空间，名字空间，名称空间

4.meta头元素

本标签用于网页的<head> </head>中，有属性name和http-equiv.

声明一种合适的编码语言，页面上的文本内容才能在浏览器中正常显示。

编码语言声明的代码如下：

Gb2312是简体中文在页面中常用的语言编码。当在制作不同语种的页面时，要声明不同的语言编码。

例中：英文中可以使用”ISO-8859-1” “UTF-8”

(1)关键字(keywords)：是为搜索引擎提供的关键字

结构：<meta name=”keywords” content=”关键词1, 关键词2, …”>

说明：各关键词间用” , ”分隔开。

(2)简介(description)：简介用来为搜索引擎声明网站的主要内容。

结构：<meta name=”description” content=”网站简介”>

(3)站点作者信息(author)：站点作者信息是为站点声明作者。

结构：<meta name=”author” content=”八维”>

(4)站点版权信息(copyright)：站点版权信息时为站点声明版权

结构：<meta name=”copyright” content=”陈刚所有”>

(5)刷新页面：<meta http-equiv=”refresh” content=”n;url=http:/19/urlink”>定时让网页在一定的时间n内，跳转到页面http://yourlink;

三、XHTML规范

1.区分大小写；

2.正确嵌套所有元素；

3.元素必须要结束；空标签在结束方法<标记 />

4.属性必须加上双引号；

5.明确所有属性的值；

6.特殊字符要用编码表示：©

7.使用页面注释:

8.推荐使用外部链接来调用样式及脚本

四、XHTML基本语法

1.在文档开始要定义文档类型

2.在根元素中应声明命名空间

3.所有标签需闭合的，空标签加” / ”来关闭

4.所有属性值必须用””括起来

5.所有标签必须合理嵌套

6.所有的属性都必须被赋值

7.所有的元素和属性都必须小写

8.注释语句：

五、XHTML常用元素: div, p, span, ul li, dl dt dd, a, img, h, strong, em.

1.div

<div> 划分结构规划网页 </div>

2.p

<p>大段的说明性文字，用来写网页中的内容页</p>

P { line-height:1.5; text-indent:2em; }

3.Span

<span> 没有任何作用，只是用来挂css样式（处理一小段文字） </span>

4.ul

<ul>

<li> 导航和新闻列表 </li>

<li>

<ul>

</ul>

</li>

</ul>

5.dl

<dl>

<dd> 可以是左图右字，也可以是上图下字 </dd>

</dl>

<dl>

</dl>

6.h

<h1> 一个页面当中只能有一个 </hl>

<h2> 用来做标题性的文字，注意：不能使用默认字体大小 </h2>

7.加粗和倾斜

备注:当标签用就是倾斜；在文本中用于首行缩进时，就是单位

六、css基本语法

层叠样式表，用于控制网页样式的一种标记性语言

1.使用css可以简单概括为：

(1)选择符

(2)选择属性

(3)定义属性值；

2.每个css样式都必须由两部分组成：

3.语法

选择符selecor {属性property：属性值value;}

4.说明：

(1)属性必须要包含在{ }号之中

(2)属性和属性值之间用“：”分隔

(3)当有多个属性时，用“；”进行区分

(4)在书写属性时，属性之间使用空格换行等，并不影响属性的显示

(5)如果一个属性有几个值，则每个属性值之间用空格分隔开

七、样式表的定义

1.内联样式（嵌入式样式，行间样式表）

语法：<标记 style=”属性:属性值属性:属性值;”> </标记>

2.内部样式

语法：<style type=”text/css”>

选择符{属性:属性值; 属性:属性值;}

</style>

说明：①内部样式表必须定义在<head>和</head>;

②页面所有样式都可以写在<style>和</style>之间

3.外部样式

(1)使用link元素

说明：rel=”stylesheet”指这个link和href之间的关联样式为样式表文件

type=”text/css”指文件类型是样式表文本

(2)使用@inport

说明: @import的调用方法也可以写在css文件中，用来调用其他的css

八、选择符

1.通配符

语法:*{属性:属性值;} （如：text{font-size:15px;}）

说明：通配选择符的写法是”*”，其含义就是所有元素。

2.类型选择符

语法：元素名称{属性:属性值;}

说明：

1) 类型选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符，例如:body、div、p等；

2) 所有的页面元素都可以作为类型选择符。

用法：

1) 改变某个元素的默认样式

ul{margin:0; list-style:none;}

2) 当统一文档某个元素的显示效果时

body{font-size:12px;line-height:18px;}

3.ID选择符

语法：#ID名{属性:属性值;}

应用：<div id=”id选择符名称”></div>

说明：

1) id选择符的语法格式是”#”加上自定义的id名称

2) 当使用id选择符时，应先为每个元素定义一个id属性，<div id=”red”></div>

3) 一个id名称只能对应于文档中一个具体的元素对象，因为id只能定义页面中某一个唯一的元素对象

4.class选择符

语法：.类名{属性:属性值;}

应用：<div class=”类选择符名称”> </div>

说明：

1) 类选择符的语法格式是” . ”加上自定义的类名称

2) 当我们使用类选择符时，应先为每个元素定义一个类属性，如<div class=”red”> </div>

注意：一个标记上可以同时使用多个类，语法为<标记 class=”类名类名”>，即：在一个标记上同时使用多个类时，类名与类名之间用空格隔开

5.群组选择符

语法：选择符1, 选择符2, 选择符3{属性: 属性值;}

说明：当多个选择符应用相同的样式，可以将选择符用英文逗号分隔的方式，合并为一组

6.包含选择符

语法：选择符1 选择符2{属性:属性值;}

说明：选择符1和选择符2之间用空格隔开，含义就是所有选择符1中包含的选择符2

7.伪类选择符

语法：

1) a:link{属性:属性值:}

2) a:visited{属性:属性值:}

3) a:hover{属性:属性值:}

4) a:active{属性:属性值:}

说明：

为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中
当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正确顺序如下：a:link, a:visited, a:hover, a:active,错误的顺序有时会使超链接的样式失败
a:link可以定义未访问过的超链接样式，有些浏览器会把它解析为任何超链接，包括访问过的和未访问过的，因此，我们可以使用a选择符样式来代替a:link选择符样式
使用与超链接相关的伪类选择符时，应为a元素定义href属性

十、关于文本的css样式

1.文本大小：{font-size:12px;}

说明：

1) 属性值为数值时，必须给属性值加单位，属性值加0除外

2) 单位还可以是pt, 9pt(点数)=12px;

3) 使用绝对大小关键字

4) 为了减小系统间的字体显示差异，IE浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字体大小默认值

5) 1em=16px

0.75em=12px;

2.文本颜色：

{color:#f5e5f5;}

3.文本字体：

{font-family:字体1,字体2,字体3;}

当字体是中文字体时需加引号
当英文字体中有空格时需加引号如”Times New Roman”;
中文默认体为宋体或新宋体，英文字体默认为Arial

4.加粗

{font-weight:bolder/bold/normal;}

说明：

1) 字体的粗细分为9个等级，100-900，100最轻，900最重

2) 一般400=normal, 700=bold

5.倾斜

{font-style: normal(无) / italic(倾斜) / oblique(倾斜);}

说明：italic和oblique都表示倾斜，后者幅度更大，但一般浏览器对它们的区分不是很明显

6.首行缩进

{text-indent:24px;}{text-indent:2em}

说明：

text-indent可以取负值
Text-indent属性只对第一行起作用，不受换行符<br/>影响

7.水平对齐方式 {text-align:left/right/center;}

说明：text-align属性作用于块元素

8.垂直对齐方式

{verlical-align:top/bottom/middle;}

9.行高

{line-height:normal/数值;}

说明：

当行高=容器高时，可实现垂直中齐效果
当行高<容器高时，可实现文本内容在垂直中齐以上任意位置的定位
当行高>容器高时，将撑大容器

10.字间距

{letter-spacing:10px;}控制英文字母和汉字的字距

{word-spacing:10px;}控制英文单词字距

11.下划线

text-decoration: none / overline / underline / line-through

去掉下划线上划线下划线删除线

十一、cursor属性用来定义当鼠标在元素上悬念时鼠标显示的样式

cursor: auto / crosshair / hand / move / help / wait / text / pointer

默认 + 手十字箭头帮助等待忙 Ⅰ 手

说明：hand和pointer同为手的状态，但pointer兼容性很强

十二、背景的设置

1.背景颜色

语法：background-color:#ff0000;

2.背景图片的位置

语法：background-image:url(路径及全称)

3.背景图片不平铺

语法：background-repeat:no-repeat/repeat/repeat-x/repeat-y

4.背景图片的位置

语法：background-position: right/loft/center水平方向的对齐方式

background-position: top.bottom垂直方向的对齐方式

说明：

1) 属性取值的数目是两个，前者代表横向位置的值，后者代表纵向位置的值

2) Background-position属性所使用的两个值之间用空格分隔开

5.背景图的固定

语法：background-attachment: scroll(滚动) / fixed(固定)

6.各属性的缩写

语法：bakcground:背景颜色/背景图像/背景位置/背景重复/背景附件

注意：各个值的顺序是可以随意交换的

十三、列表

1.有序列表

<ol>

</ol>

2.无序列表

<ul>

</ul>

3.自定义列表

<dl>

</dl>

4.定义列表符号样式

(1)list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/none(无)

常用的几个值的含义介绍：

disc: 实心圆	circle: 空心圆	square: 实心方块
decimal:阿拉伯数字	lower-roman小写罗写字	upper-roman大写罗马字
lower-alpha小写英文	upper-alpah大写英文	none不使用项目符号

(2)使用list-style-position：属性

结构：list-style-position: outside / inside

项目符号放置在文本以内文本以内

(3)使用图片作为列表符号:list-style-image:url(路径及全称)

(4)缩写

list-style:list-style-type/list-style-image/list-style-position

十四、浮动属性详解

语法：float:none / left / right

注意：相邻的多个元素会按照出现的顺序和各自的属性值排列在同一行，直到宽度超出包含它们的容器宽度时才换行显示

十五、XHTML元素分类

1.块状元素(block element):

块元素是指div/dl/from/h1-h6/ol/ul/li/p等这样的元素

特点：每个块元素都是以新的一行开始，一般可以包含其他的块元素和内联元素，可以设置宽和高等。（在css中，可以给块元素加上浮动等属性，控制块元素的显示位置，而不是总是以新的一行开始）

2.内联元素(inlink element)：

内联元素是指如:a/b/br/em/i/img/input/span/strong/sub/sup等这样的元素

特点：不必在新的一行开始，同时，也不强迫其他的元素在新的一行显示（内联元素可以做其他元素的子元素，没有固定的形状，定义它的width和height属性无效，但它会遵循模型基本规则，如可以定义边界、补白和边框，可以定义背景，它的最小内容单元也会呈现矩形形状，但它显示的高度和宽度只能根据所包含内容的高度和宽度来确定）

3.可变元素

转换元素：display:block/inline/none; display:inline-block;

说明：

在内联元素中，加入display:block;即可成为块状元素，设定宽高起作用
在内联元素中，加入display:inline-block;在不成为块状元素的情况下，也能起到块状元素的作用
在块状元素中，加入display:inline;可成为内联元素。给设定的宽高将不起任何作用

十六、边框

border,网页中很多修饰性线条都是由边框来实现的

1.边框样式属性

结构：border-style: none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset;

none: 没有边框即忽略所有边框的宽度
hidden: 隐藏边框(IE不支持)
dotted: 点线	groove : 3D凹槽
dashed : 虚线	ridge : 菱形边框
solid : 实线	inset : 3D凹边
double : 双线	outset: 3D凸边
备注：加下划线部分这四个属性是和边框颜色属性有关，并且IE浏览器并不以能正常显示

2.边框宽度

结构：border-width:medium/thin/thick/长度值

medium: 默认值	thin: 比默认值细
thick: 比默认值粗	长度值：可以使用所有长度值
注意：使用medium、thin、thick时，并没有一个确定的值，其显示效果和用户的设置有关，所以建议使用长度值

3.边框颜色

结构：border-color:颜色值

4.边框的综合定义

在css中，可以使用border属性定义边框的所有属性，语法结构如下：

border:border-style; border-width; border-color;

其中，各个属性的顺序可以随意交换，每个属性之间用空格分隔

5.单侧边框的综合定义

该属性包含4个具体属性：

border-top:属性	说明：同border属性一样，其中每个属性的顺序可以随意交换，每个属性间用空格分隔开
border-right:属性
border-bottom:属性
border-left:属性

十七、边界属性

margin,在元素外边的空白区域，被称为边界

语法：margin:auto / 长度值 / 百分比值

当取值为百分比值时是相当于元素所在的父元素的密度

1.水平auto值：达到水平方向居中显示

2.垂直auto值：垂直的auto值，一般会被处理为0（即没有边界）

十八、补白

padding,在元素内容与边框之间的空白边框，也称填充

结构：

padding:长度值/百分比值（百分比是相对于父元素来说的）
padding-top: 属性	padding-bottom: 属性
padding-left: 属性	padding-right: 属性
总结： margin可以定义负值，但padding和border不支持负值 margin是透明的，padding也是透明的，但是padding受背景影响，能够显示背景色和背景图像

十九、关于元素宽和高的定义

元素的总宽度=左边界+左边框+左填充+右填充+右边框+右边界

元素的总高度=上边界+上边框+上填充+下填充+下边框+下边界

说明：凡是加在了当前div中的属性，都归当前div管；规定了宽高的div, 如果还加了padding值的话，必须从宽高里减去padding的值

二十、定位

position: absolute | relative

定位绝对相对

定位属性只能对块元素定义：

static: 不定位（默认）

fixed: 固定定位，固定在视图窗口中，IE不支持

absolute: 绝对定位，将元素从文档流中拖出来，然后使用left/right/top/bottom属性对于其最接近的一个具有定位属性的父元素进行绝对定位。如果不存在这样的父元素，则相对于body元素，即根据浏览器窗口

relative: 相对定位，它通过left/right/top/bottom属性对于其原位置进行定位，原位置还保留不变

1.绝对定位

层叠定位属性（即z-index属性）用来定义元素层叠的顺序

结构：z-index:”数字值”

注意：z-index属性的取值为没有单位的数字值，它的默认值是0，值越大越靠前显示

2.相对定位

3.不占位的相对定位

注意：父元素必须设定有效的宽高值，否则将参照父元素中最后一个元素的右上角位置进行定位（常用的定位方法）

二十一、表单<from></from>是块元素(block)

1.块元素

有固定大小（可直接设置宽width和高height）

常见的块元素：div, ul, li, p, h1, h2, h3, h4, h5, h6, dl, dt, dd.

表单的属性：3个

value属性值根据type类型的不同表达的意义也不一样

当type类型为hidden和possword时它代表了标签的初始值

当type类型为botton, reset和submit时，它代表了标签的显示内容

当type类型为checkbox, image, rodio时他的标签

2.表单的内部结构

(1)文本框

文本框(单行文本框)：<input type=”text” name=”user”/>
密码框<input type=”password” name=”pwd”/>
文本区域(多行文本框)<textarea></textarea>

(2)按钮

提交：<input type=”submit” value=”提交”/>
重置按钮：<input type=”reset” value=”消除”/>
交互按钮：<input type=”button” value=”验证”/>

(3)单选按钮及复选框

单选按钮：<input type=”radio” name=”sex”/>
复选框：<input type=”checkbox” name=”sport”/>

(4)列表菜单

表单项：<option>北京</option>

Checked=”checked” (初始值设定)

(直接写在input)

当鼠标经过文本框内容被选中onmousever=”this.select();”

当鼠标被点击时清空内容onclick=”this.value=’ ’ ”;

实例一：用div写三角形

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>triangle</title>

<style>

.sanjiao{width:0px;height:0px;
　　　　　　　border-bottom: 100px red solid;
　　　　　　　border-top: 100px yellow solid;
　　　　　　　border-left: 100px blue solid;
　　　　　　　border-right: 100px green solid;
　　　　　　　margin-bottom: 50px; }

　　.sanjiao-2{width:0px;height:0px;
　　　　　　　border-bottom: 100px #fff solid;
　　　　　　　border-top: 100px #fff solid;
　　　　　　　border-left: 100px #f85087 solid;
　　　　　　　border-right: 100px #fff solid;}
</style>

</head>
<body>

<div class="sanjiao"></div>

</body>

</html>

实例二：用div堆积木

posted @ 2016-09-29 15:11 suoxiuli 阅读(343) 评论(0) 收藏举报

刷新页面返回顶部

suoxiuli

前端小白的福利

公告