前端网页设计的知识点大全必看解析Word格式.docx
《前端网页设计的知识点大全必看解析Word格式.docx》由会员分享，可在线阅读，更多相关《前端网页设计的知识点大全必看解析Word格式.docx（50页珍藏版）》请在冰点文库上搜索。
空格
address>
地址信息<
/address>
地址信息，通常用于公司地址显示
code>
代码内容<
/code>
代码，通常是一行内
pre>
多行代码<
/pre>
多行代码,你需要在网页中预显示格式时都可以使用它
ul>
ul-li列表信息，以圆点显示
li>
信息1<
/li>
信息2<
......
/ul>
ol>
ol-li列表信息，带上序号
信息<
/ol>
div>
排版内容<
排版中使用，相当于一个容器
确定逻辑部分：
逻辑部分是页面上相互关联的一组元素，如栏目版块
divid="
版块名称"
>
…<
/div>
div带上ID号，使之更清晰
table>
表格内容<
/table>
创建表格
caption>
/caption>
为表格添加标题文本
tbody>
/tbody>
若加此标签后，表格会一次性显示出来（而非网页加载一点显示一点）
tr>
表格一行<
/tr>
表格中的一行
td>
表格单元格<
/td>
表格中的一个单元格
th>
表格表头<
/th>
表格头部的一个单元格，表格表头
tablesummary="
表格摘要"
为表格添加摘要，但不会被浏览器显示出来
ahref="
目标网址"
title="
鼠标滑过时显示文本"
链接显示文本<
/a>
链接标签
target="
_blank"
网页将在新窗口中打开
mailto:
网页中邮件地址，可带多个参数
邮箱地址
cc=抄送地址
bcc=密抄地址
;
多个邮箱地址
subject=邮件主题
body=邮件内容
完整举例:
mailto:
yy@?
cc=aa@&
bcc=bb@&
subject=主题&
body=邮件内容"
发送邮件<
imgscr="
图片地址"
alt="
下载失败时替换文本"
提示文本"
/>
5.与用户交互：
语法：
formmethod="
传送方式"
action="
服务器文件"
/form>
举例：
post"
save.php"
labelfor="
username"
用户名:
/label>
inputtype="
text"
name="
pass"
密码:
password"
表单控件：
文本框、文本域、按钮、单选框、复选框
method:
post/get
1.文本框（文本/密码）
form>
text/password"
名称"
value="
文本"
type：
有“text”和“password”两种类型
name：
为文本框命名，方便后台ASP和PHP使用
value：
文本框默认值，一般起提示作用
2.文本域（多行文本）
textarearows="
行数"
cols="
列数"
默认文本内容<
/textarea>
cols：
多行输入域的列数
rows：
多行输入域的行数
3.单选框、复选框
radio/checkbox"
值"
checked="
checked"
radio单选，checkbox复选框
提交数据到服务器的值，后台PHP处理使用
为控件命名，以备后台程序ASP和PHP使用
checked：
checked="
时，此选项默认被选中
注意：
同一组的单选按钮，name取值一定要一致
4.下拉列表框
formaction="
method="
>
label>
爱好:
selectmultiple="
multiple"
book>
看书<
optionvalue="
看书"
id="
book"
/option>
旅游"
旅游<
运动"
运动<
购物"
购物<
/select>
submit"
提交"
reset"
重置"
向服务器提交值
selected：
设置selected="
selected"
时，默认选中
multiple：
multiple="
时，可以使用Ctrl多选，但很丑
label：
为了改进鼠标易用性，鼠标点击文本时，选择上Radio
6.认识CSS样式：
CSS：
层叠样式表（CascadingStyleSheets），主要用于定义HTML内容在浏览器内的显示样式
选择符{属性:
值}
p{color:
blue}
选择符：
又称选择器，指明要应用样式规则的元素，如<
html>
、<
body>
img>
...
声明：
指的是冒号”:
“
多条声明：
使用分号”;
“隔开，最好每行都加上分号
注释：
CSS使用/**/，HTML注释则使用<
!
--内容-->
7.CSS样式分类：
1.内联式
pstyle="
color:
red;
font-size:
12px"
这里文字是红色。
2.嵌入式
较通用的一类，CSS样式放置在<
标签中，而<
通常要放置在<
内
styletype="
span{
color:
blue;
font-size:
12px;
}
3.外部式
把CSS代码写到一个单独的外部文件中，以.css扩展名结尾，在<
内使用<
标签引入，如：
linkhref="
base.css"
rel="
href:
.css文件路径
rel和type:
是固定写法，不能改
三种方法的优先级：
内联式>
嵌入式>
外部式
就近原则，嵌入式>
外部式有一个前提：
嵌入式css样式的位置一定在外部式的后面
以上规则适用于相同权值的情况
8.CSS类选择器
.类选器名称{css样式代码;
}
.stress{
前边的小圆点是必须要有的
使用：
spanclass="
stress"
胆小如鼠<
9.CSSID选择器
#ID选择器名称{css样式代码}
#setGreen{color:
green;
spanid="
setGreen"
区别：
起始于'
.'
与'
#'
调用时class=与id=
ID选择器只能在文档中使用一次，类选择器则可以使用多次
一个元素可以使用多个类选择器同时设置多个样式，而ID选择器是不可以的，如<
stressbigsize"
三年级<
10.CSS子选择器
还有一个比较有用的选择器子选择器，即大于符号（>
）,用于选择指定标签元素的第一代子元素。
举例：
.food>
li{border:
1pxsolidred;
若大于符号换成空格（）,用于选择指定标签元素的所有后辈元素，举例：
.firstspan{border:
11.CSS通用选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素：
*{color:
red;
此时，所有元素的字体都为红色
12.CSS伪类选择符
伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
a:
hover{color:
此时，把鼠标放置到元素上边，颜色就会切换为红色
13.CSS分组选择符
多个标签使用逗号隔开：
h1,span{color:
相当于：
h1{color:
span{color:
14.CSS继承
CSS的某些样式是具有继承性的，那么什么是继承呢？
继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代
如：
p{color:
}/*可被span继承*/
p{border:
}/*此时，span将不继承，边框显示红色*/
15.CSS特殊性（权值）
权值：
}/*权值为1*/
pspan{color:
}/*权值为1+1=2*/
.warning{color:
white;
}/*权值为10*/
pspan.warning{color:
purple;
}/*权值为1+1+10=12*/
#footer.notep{color:
yellow;
}/*权值为100+10+1=111*/
还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
层叠：
相同权值时，最后一个将被应用
重要性：
相同权值时，使用!
important将得到最高权重，如p{color:
red!
important;
样式优先级为：
浏览器默认的样式<
网页制作者样式<
用户自己设置的样式，使用!
important优先级比用户自己设定还高
16.CSS文字排版
1.字体
body{font-family:
"
宋体"
;
MicrosoftYahei"
2.字号，颜色
body{font-size:
#666}
3.粗体
pspan{font-weight:
bold;
a{font-weight:
4.斜体
pa{font-style:
italic;
p{font-style:
5.下划线
pa{text-decoration:
underline;
6.删除线
.oldPrice{text-decoration:
line-through;
7.缩进
p{text-indent:
2em;
}/*2em表示两倍文字大小*/
8.行间距
p{line-height:
1.5em;
9.字间距、字母间距
h1{letter-spacing:
50px;
word-spacing:
}/*分别是字母、单词间距*/
19.对齐
h1{text-align:
center;
}/*left、right和center*/
17.CSS元素分类
块状元素：
h6>
dl>
、<
内联元素：
a>
br>
i>
var>
cite>
内联块状元素：
input>
1.块状元素：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
a{display:
block;
}/*可以把内联元素a转换为块状元素*/
2.内联元素：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
display:
inline可以转换成内联元素
3.内联块状元素：
inline-block可以转换成内联块状
18.CSS盒模型
1.边框
div{border:
2pxsolidred;
div{
border-width:
2px;
border-style:
solid;
border-color:
dashed（虚线）|dotted（点线）|solid（实线）
#888;
//前面的井号不要忘掉。
有thin|medium|thick（但不是很常用），最常还是用象素（px）
2.上下左右边框：
div{border-bottom:
}/*top、bottom、left和right*/
3.高度和宽度
width:
200px;
/*宽度*/
height:
30px;
/*高度*/
padding:
20px;
/*元素到边框的距离，又名为“填充”*/
border:
margin:
10px;
/*两盒子距离，又名为“边界”*/
19.CSS布局模型
元素有三种布局模型：
1、流动模型（Flow）
网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示
2、浮动模型（Float）
现在我们想让两个块状元素并排显示
任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动，如div、p、table、img等元素都可以被定义为浮动
#div1{float:
left;
#div2{float:
right;
3、层模型（Layer）
就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧
层模型有三种形式：
1、绝对定位（position:
absolute）
需要设置position:
absolute（表示绝对定位），这条语句的作用将元素从文档流中拖出来
然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位
如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口
xxxx:
yyyy;
position:
absolute;
right:
100px;
top:
2、相对定位（position:
relative）
relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置
相对定位完成的过程是首先按static（float）方式生成一个元素（并且元素像层一样浮动了起来），
然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动
#div1{
2pxredsolid;
relative;
left:
}
div1"
3、固定定位（position:
fixed）如弹窗广告
fixed：
表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身
它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，
因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响
fixed;
Relative与Absolute组合使用：
1、参照定位的元素必须是相对定位元素的前辈元素
box1"
--参照定位的元素（前辈）-->
box2"
相对参照元素进行定位<
--相对定位元素-->
2、参照定位的元素必须加入position:
#box1{
3、定位元素加入position:
absolute，便可以使用top、bottom、left、right来进行偏移定位了
#box2{
20.代码简写：
1.盒模型：
相当于margin:
10px10px10px10px;
（上右下左顺序）
10px40px;
10px40px10px40px;
（上右下左顺序）
padding,border和margin是一致的；
2.颜色值：
#000000;
}相当于p{color:
#000;
#336699;
#369;
3.字体：
body{
font-style:
font-variant:
small-caps;
font-weight:
line-height:
font-family:
sans-serif;
编写为：
body{font:
italicsmall-capsbold12px/1.5em"
1、使用这一简写方式你至少要指定font-size和font-family属性，其他的属性未指定将自动使用默认值。
2、在缩写时font-size与line-height中间要加入“/”斜扛。
21.长度值
1.像素
像素为什么是相对单位呢？
因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）
2.em
假定font-size设定14px，那么1em=14px
3.百分比
p{font-size:
line-height:
130%}
一，html+css基础
1-1
Html和CSS的关系
学习web前端开发基础技术需要掌握：
HTML、CSS、JavaScript语言。
下面我们就来了解下这三门技术都是用来实现什么的：
1.HTML是网页内容的载体。
内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2.CSS样式是表现。
就像网页的外衣。
比如，标题字体、颜色变化，或为标题加入背景图片、边框等。
所有这些用来改变内容外观的东西称之为表现。
3.JavaScript是用来实现网页上的特效效果。
如：
鼠标滑过弹出下拉菜单。
或鼠标滑过表格的背景颜色改变。
还有焦点新闻（新闻图片）的轮换。
可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
1-2
1，HTML标签不区分大小写，<
和<
H1>
是一样的，但建议小写，因为大部分程序员都以小写为准。
1-3
一个HTML文件是有自己固定的结构的。
/body>
/html>
代码讲解：
1.<
称为根标签，所有的网页标签都在<
中。
2.<
标签用于定义文档的头部，它是所有头部元素的容器。
头部元素有<
、<
等标签，头部标签在下一小节中会有详细介绍。
3.在<
标签之间的内容是网页的主要内容，如<
等网页内容标签，在这里的标签中的内容会在浏览器中显
升级会员 