前端网页设计的知识点大全必看解析.docx
- 文档编号:5293238
- 上传时间:2023-05-08
- 格式:DOCX
- 页数:50
- 大小:39.34KB
前端网页设计的知识点大全必看解析.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列表信息,带上序号
- 信息
- 信息
......
确定逻辑部分:
逻辑部分是页面上相互关联的一组元素,如栏目版块
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元素分类
块状元素:
、
...、、、、、、、
- 、
- 、
- 、