自己总结的一些入门的前端相关知识

一HTML基本常识

url:统一资源定位符

HTML:超文本标记语言

超文本：狭义的超文本指页面上可以点击的文字，广义的超文本：文字、图片、视频、音频。

标记：语言的语法特征，由一对对标签组成。

双标记：<标记名称>标记内容</标记名称>

单标记

渲染：依靠浏览器逐行解析代码并且最终呈现到页面上。

:文档类型声明，告诉浏览器按照什么样的标准规范解析html代码。

目前指定的是按照html5的规范解析。

Head标记：定义了页面的头部信息，包括但不限于界面的标题、以及编码等属性信息。

软件结构

B/S :浏览器/服务器：客户端安装的浏览器，软件项目本身位于服务器上

\1. 维护升级方便

\2. 服务器端的压力大

C/S：客户端/服务器 客户端安装了软件本身，或者说安装了软件的核心功能，共享数据位于服务器端。

\1. 维护升级麻烦

\2. 客户端压力大。

B/S结构的项目： （重点）

1.内容层技术 HTML

HTML :将页面上的内容放上去，内容层技术

CSS：对界面进行修饰和美化， 表现层技术。

JAVASCRIPT：给界面加动态交互的效果，交互层的技术。

服务器技术：数据库 、JAVA、PYTHON 、PHP

1.1单标记

Br:换行

Hr:水平线标记。

Size:粗细

Width:宽度

Color:颜色

Align:居中方式

Img:图片标记

Src:图片的路径

Width:宽度

Height:高度

Alt:图片不可见的提示信息

Title:鼠标悬停的图片上的提示信息

Align:表示图片和后面内容的相对位置

Top|absmiddle|bottom|left|right

1.2双标记

P:段落标记，跟前后内容在垂直方向上有空白Align:left|center|right

HN:标题标记，跟前后内容在垂直方向上有空白,n指从1到6的数字，字体依次从大到小。

Align:left|center|right

A:超链接

Href:链接的路径，如 news.html 或者http://www.baidu.com

Target:目标窗口,_self(自身窗口)或者_blank(新窗口)_parent(父窗口)_top(顶层窗口)

锚标记：

1：内容

2.文字内容

背景图片、背景色：

在body标记上加:

Bgcolor

Background

路径：相对路径（…代表上一层目录） （网络）绝对路径：适用于引用项目之外的图

片

可以换行的叫块级标记（元素） 列如：

不能换行的行内标记（元素） 列如：

1.3特殊符号：

空格： &nbsp后缀；

<:<

>:>

版权符号：© &copy

属性：属性是对标记的进一步说明。

< 标记 属性名称=”属性值” 。。。。。。></标记>

以下标记请你了解

(双标记)Font:

(双标记)B：加粗

(双标记)I：倾斜

(双标记)U：下划线

(双标记)Em：倾斜

(双标记)Strong:加粗图片标记的align属性

注意事项：

1.p hn hr不要互相嵌套使用

2.同一个站点注意风格的统一性

3.代码提示键：alt+/

4.代码缩进，正确封闭

1.4 表格

表格作用：局部内容布局

表格

Table 表格

Tr 行

Td（th） 单元格

Table标记常用属性：针对整个表格修饰

Border:边框线粗细

Bgcolor:背景色

background:背景图片

align: 表格整体的水平位置

width:宽度

height:高度

cellpadding:单元格填充距离

cellspacing:单元格间距

tr标记常用的属性：

Bgcolor:背景色

background:背景图片

align: 正行内容的水平居中方式

valign:正行位置的垂直居中方式

height:可以单独设置每行的高度。

Td标记的常用属性

Bgcolor:背景色

background:背景图片

align: 正行内容的水平居中方式

valign:正行位置的垂直居中方式width:单独设置每一列（td所处列）的宽度。

Rowspan:跨行合并

Colspan:跨列合并。

**注意事项：

\1. td标记是真正放置内容的容器

\2. tr的高度不受限于表格整体的高度。

\3. td的宽度受限于表格整体的宽度。

需要多练习的是表格布局。

1.5：表单 (重点)

表单：用于收集客户端的信息并提交给服务器

Form:将控件包围住不破坏其他标记的完整性。

属性：

Action:服务器路径（地址）

Method:表单提交方式 get|post.。默认是get.优先选用post

Get:将表单中的信息会跟到url的后面，不安全

Post:会将表单中的信息进行加密传输给服务器

表单中所包含的控件

文本框 :

Value:默认值

密码框：

Value:默认值

单选框：

\1. 一组单选按钮的名称需要一样

\2. 能够提交到服务器端的是value属性的属性值

\3. 使用 checked=”checked”设置默认选中项

复选框：

\1. 一组复选按钮的名称需要一样

\2. 能够提交到服务器端的是value属性的属性值

\3. 使用 checked=”checked”设置默认选中项

下拉菜单：

123

……..

Size:下拉菜单展开之后展示多少行文本区域：

按钮：

普通按钮:

重置按钮:

提交按钮:

补充控件：

文件域：

数字框:

隐藏域：

Href和src的区别

1.请求资源类型不同

（1） href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之

间的链接。常用的有：link、a。

（2）在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script、img 、

iframe；

2.作用结果不同

（1）href 用于在当前文档和引用资源之间确立联系；

（2）src 用于替换当前内容；

3.浏览器解析方式不同

（1）若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不

会停止对当前文档的处理。

（2）当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执

行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把

js 脚本放在底部而不是头部的原因。

二.表现层技术CSS

2.1、CSS:层叠样式表(串联式样式表)

2.2、三种样式表：根据css书写的位置

内部样式表：在head标记书写一对style标记，在style标记中书写css代码，

外部样式表：专门建立一个css文件，在css文件中书写css代码

需要在html文件的head标记中如下引用：

优点：可以在不同文件中多次引用，提高代码的复用性

内嵌样式表：

<html标记 style=”css属性：css属性值;……”>

三种样式表如果共存，遵循的是就近原则。

三、三种基础选择器：

选择器语法：

选择器{

Css属性:css属性值;………

}

\1. ID选择器：如果多个标记的样式各不一样，可以考虑使用ID选择器

#id属性值{ //一般是段落标签（p）

Css属性:css属性值;………

}

\2. 标签选择器:标签名称相同的多个标记如果样式相同，可以考虑使用标签选择器。

标签名称（a/p/b/del）{

Css属性:css属性值;………}

\3. 类选择器:非常灵活，如果标签名称不同的多个标记如果样式一样，可以考虑使用

类选择器。如果多个标签的样式各不一样，页可以考虑使用类选择器。

.自定义名称{

Css属性:css属性值;………

}

4.内嵌模式优先级最高 <标记 class=”自定义名称”>…….

2.3三种选择器的优先级：ID》类》标签

2.4、其他css属性

2.4.1伪类：

可以针对标记的不同状态做修饰

选择器:伪类名称

a:link{

css属性

}

Link:未被访问的时候

Hover:鼠标悬停的时候

Active:鼠标处于激活状态的时候

Visited:链接被访问过后

Div:是一个html标记，双标记，容器功能的标记，多个div呈垂直分布，高度默认靠内容撑开。

2.4.2常用css属性：

2.4.2.1背景的属性：

Background-color:背景色

Background-image:背景图片

background-repeat:no-repeat ;/背景的平铺方式/

background-size:1200px 200px ;背景大小

background-position: center;背景位置

2.4.2.2文字的常用CSS属性：

Color:字体颜色Font-size:字体大小

Font-family:字体类型

Font-weight:字体粗细

Text-decoration:文字的修饰线 ：none|underline

Text-align:left|center|right

Line-height:行高

超链接字体颜色设置是通过css来设置，a链接的颜色设置常用的有以下两种，1、超链接a的初始状态颜色，2、超链接字体的鼠标滑过颜色，还有两种病不常用：3、超链接字体的已访问颜色，4、超链接字体在按下鼠标时的颜色

四中超链接状态分别对应的css属性：a{}、a:hover{} 、a:visited{}、a:active{}，通常只写a{}、a:hover{}即可，如果你需要其他两种字体颜色设置请参照一下顺序来书写

a{color:red;}
a:visited{color:green;}
a:hover {color:yellow;background:blue;}
a:active {color:lime;background:red;}

2.4.2.3盒模型相关css属性

Border：边框线 粗细 线型 颜色

Border -left

Border -right

Border -top

Border -bottom

border-radius:边框线弧度

Margin:边距 （上 右 下 左|上下 左右|上 左右 下）

Margin-left

Margin-right

Margin-top

Margin-bottom

Padding:填充距离 （上 右 下 左|上下 左右|上 左右 下）

Padding -left

Padding -right

Padding -top

Padding –bottom

Width:宽度

Height:高度

2.4.2.4盒模型的尺寸：

内容区域+填充距离（内边距）+边框+外边距

box-sizing: content-box|border-box;

content-box:我们设置的宽度或者高度仅仅指内容区域

border-box：设置的宽度或者高度包含了内容区域+填充距离+边框线

注意Margin:

父子标记之间：子标记距离父标记之间的距离，对于子标记来说叫外边距

兄弟标记之间：标记之间的距离，外边距

如果父标记没有border,那么子标记的外边距将作用到父标记上

如果父标记有Border，就会作用到子标记上

Padding:标记的内容距离标记边框之间的距离，内容也可能是其他的标记

父子标记之间：子标记距离父标记之间的距离，对于父标记来说叫填充距离

2.4.2.5定位方式：

浮动相关css属性：

Float:left|right

脱离文档流，朝指定的方向浮动，可以解决DIV水平排列的问题。

2.4.2.6表格css属性：

Border-spacing:表单单元格间距

Border-collapse:collapse 边框线合并。

vertical-align:垂直居中

2.4.2.7列表常用css属性

list-style-type 列表中添加图片

list-style-image

Padding:标记的内容距离标记边框之间的距离，内容也可能是其他的标记

父子标记之间：子标记距离父标记之间的距离，对