前端网页设计的知识点大全必看解析.docx
《前端网页设计的知识点大全必看解析.docx》由会员分享，可在线阅读，更多相关《前端网页设计的知识点大全必看解析.docx（50页珍藏版）》请在冰点文库上搜索。
前端网页设计的知识点大全必看解析
head定义文档头部，包含：
title,script,style,link,meta
body是网页主要内容，包含：
h1,h2-h6,p,a,img
2.认识head标签：
...网页标题
4.认识body标签：
段落文本
有三段就放三个
标题文本
h1-h6共6个标题分级
斜体文本（强调）斜体文本内容
粗体文本粗体显示文本内容
单独样式文本没有语义的，它的应用就是为了设置单独的格式用的
引用的文本
引用的文本内容，会自动加上双引号
大段引用
引用大段的文本内容，文本前后会加上缩进
换行
水平横线
空格
地址信息地址信息，通常用于公司地址显示
代码内容代码，通常是一行内
多行代码
多行代码,你需要在网页中预显示格式时都可以使用它
ul-li列表信息，以圆点显示- 信息1
- 信息2
......
ol-li列表信息，带上序号- 信息
- 信息
......
排版内容
排版中使用，相当于一个容器
确定逻辑部分：
逻辑部分是页面上相互关联的一组元素，如栏目版块
…
div带上ID号，使之更清晰
创建表格
标题文本为表格添加标题文本
...若加此标签后，表格会一次性显示出来（而非网页加载一点显示一点）
表格一行
表格中的一行
表格单元格 | 表格中的一个单元格
表格表头 | 表格头部的一个单元格，表格表头
...为表格添加摘要，但不会被浏览器显示出来
链接显示文本链接标签
target="_blank"网页将在新窗口中打开
mailto:
网页中邮件地址，可带多个参数
mailto:
邮箱地址
cc=抄送地址
bcc=密抄地址
;多个邮箱地址
subject=邮件主题
body=邮件内容
完整举例:
yy@?
cc=aa@&bcc=bb@&subject=主题&body=邮件内容">发送邮件
5.与用户交互：
语法：
举例：
用户名:
密码:
表单控件：
文本框、文本域、按钮、单选框、复选框
method:
post/get
1.文本框（文本/密码）
type：
有“text”和“password”两种类型
name：
为文本框命名，方便后台ASP和PHP使用
value：
文本框默认值，一般起提示作用
2.文本域（多行文本）
默认文本内容
cols：
多行输入域的列数
rows：
多行输入域的行数
3.单选框、复选框
type：
radio单选，checkbox复选框
value：
提交数据到服务器的值，后台PHP处理使用
name：
为控件命名，以备后台程序ASP和PHP使用
checked：
checked="checked"时，此选项默认被选中
注意：
同一组的单选按钮，name取值一定要一致
4.下拉列表框
看书
看书
旅游
运动
购物
value：
向服务器提交值
selected：
设置selected="selected"时，默认选中
multiple：
multiple="multiple"时，可以使用Ctrl多选，但很丑
label：
为了改进鼠标易用性，鼠标点击文本时，选择上Radio
6.认识CSS样式：
CSS：
层叠样式表（CascadingStyleSheets），主要用于定义HTML内容在浏览器内的显示样式
语法：
选择符{属性:
值}
举例：
p{color:
blue}
选择符：
又称选择器，指明要应用样式规则的元素，如、
、
、
、![]()
...
声明：
指的是冒号”:
“
多条声明：
使用分号”;“隔开，最好每行都加上分号
注释：
CSS使用/**/，HTML注释则使用
--内容-->
7.CSS样式分类：
1.内联式
red;font-size:
12px">这里文字是红色。
2.嵌入式
较通用的一类，CSS样式放置在
3.外部式
把CSS代码写到一个单独的外部文件中，以.css扩展名结尾，在
内使用
标签引入，如：
href:
.css文件路径
rel和type:
rel="stylesheet"type="text/css"是固定写法，不能改
三种方法的优先级：
内联式>嵌入式>外部式
就近原则，嵌入式>外部式有一个前提：
嵌入式css样式的位置一定在外部式的后面
以上规则适用于相同权值的情况
8.CSS类选择器
语法：
.类选器名称{css样式代码;}
举例：
.stress{
color:
red;
}
注意：
前边的小圆点是必须要有的
使用：
胆小如鼠
9.CSSID选择器
语法：
#ID选择器名称{css样式代码}
举例：
#setGreen{color:
green;}
胆小如鼠
区别：
起始于'.'与'#'
调用时class=与id=
ID选择器只能在文档中使用一次，类选择器则可以使用多次
一个元素可以使用多个类选择器同时设置多个样式，而ID选择器是不可以的，如三年级
10.CSS子选择器
还有一个比较有用的选择器子选择器，即大于符号（>）,用于选择指定标签元素的第一代子元素。
举例：
.food>li{border:
1pxsolidred;}
若大于符号换成空格（）,用于选择指定标签元素的所有后辈元素，举例：
.firstspan{border:
1pxsolidred;}
11.CSS通用选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素：
*{color:
red;}
此时，所有元素的字体都为红色
12.CSS伪类选择符
伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
a:
hover{color:
red;}
此时，把鼠标放置到元素上边，颜色就会切换为红色
13.CSS分组选择符
多个标签使用逗号隔开：
h1,span{color:
red;}
相当于：
h1{color:
red;}
span{color:
red;}
14.CSS继承
CSS的某些样式是具有继承性的，那么什么是继承呢？
继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代
如：
p{color:
red;}/*可被span继承*/
p{border:
1pxsolidred;}/*此时，span将不继承，边框显示红色*/
15.CSS特殊性（权值）
权值：
p{color:
red;}/*权值为1*/
pspan{color:
green;}/*权值为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:
"宋体";}
body{font-family:
"MicrosoftYahei";}
2.字号，颜色
body{font-size:
12px;color:
#666}
3.粗体
pspan{font-weight:
bold;}
a{font-weight:
bold;}
4.斜体
pa{font-style:
italic;}
p{font-style:
italic;}
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:
50px;}/*分别是字母、单词间距*/
19.对齐
h1{text-align:
center;}/*left、right和center*/
17.CSS元素分类
块状元素：