前端设计之网页开发

最新推荐文章于 2023-04-30 20:11:13 发布

chjjgogogo

最新推荐文章于 2023-04-30 20:11:13 发布

阅读量852

点赞数 2

前端之网页开发

网页开发：前端开发和后台开发

前端：呈现数据后台：管理数据

HTML：网页内容，文字——结构层

css:网页样式 ——表现层

JavaScript：网页交互设计脚本语言

推荐书籍：JavaScript高级程序设计高性能JavaScript 网页ui设计之道

浏览器：内核（渲染引擎、js解析引擎）

渲染引擎：用于渲染html css

js解析引擎：专用于解析JavaScript

内核

Firefox（内核）——gecho

IE（内核）——trident

chrome（内核）——wetkit

safari（内核）——wetkit

opera（内核）——presto blink

HTML文档的结构

<!DOCTYPE html>

<html>

<head>

<title>大家好，这是黄桢的第一网页</title>

</head>

这是一个测试网页，看看网页的标题栏

</body>

</html>

一张网页只有一对HTML标签，head标签，body标签，title标签

HTML语法

单标签<tag/>

写法<tag属性名1="属性值1"属性名2=<"属性值"/>

双标签<tag></tag>

写法<tag属性名1="属性值1"......属性名2="属性值2"...></tag>

HTML注意事项

1必须符合基本语法

2必须定义文档类型<!DOGTYPE html>

3必须定义文档的编码

文档的编码：gb2312:中文简体编码

gbk:中文编码

utf-8：国际编码<meta http-equiv="coutent-type"content="text/html;charset=utf-8"/>必须加在<head></head>之间译义：把content属性值关联到http头部；告诉浏览器准备接受html文档，并且以<utf-8>的字符编码进行编译

4.文档类型编码必须和网页字符编码一致，如果用的记事件，另存为设置编码

5.在编写代码的时候所有字符都必须是英文。而且所有的标签名字，属性名，属性值都必须是小写。

6注重代码的风格，层层缩进

html标签——都是放在body里面。<body></body>

属性：1.text="颜色"表示body标签所有文本颜色

颜色表示方法：

英文三原色：red green blue

十六进制：#ff0000 #00ff00 #0000ff

2bgcolor="颜色”（背景颜色）

3background="背景图的路径”

图片格式： JPG PNG（透明） GIF

绝对路径：标明硬盘的路径（当前图片文件在本地电脑的具体位置)

相对路径：文件相对于网页源文件的位置

同级关系：直接引用文件名

上级关系：..文件夹/文件名/html在文件夹里

下级关系：文件夹名/文件名文件位于文件夹里

文本格式标签 .

<br/>——换行标签

特殊字符标签

< left &lt

> right &gt

空格 &nbsp

" 引号 &quot

电脑的单位

基本单位：字节一字符占一个字节.一个汉字占两个字节最小单位：位（bit）

<hn> ，</hn>:标题标签。n=1——6，逐级变小。

特点：字体加粗自动换行

段落标签

<p></p>自动换行

属性：align=";left/right/center 对齐方式

预编译标签：<pre></pre>

特点：原样输出自动换行

水平分割线

<hr/>

color="颜色" size="5px/5%"设置线的粗细 width<宽> ="5px/5%" 特点：自动换行

字符格式标签——不换行

<b></b>——文本加粗

<i></i>——文本倾斜

<u></u>——下划线

<s></s>——删除线

字体标签<font></font>

size=n,n=1—7，逐级变大，改变字体大小。

color=“颜色”，改变字体颜色。

face=“字体类型”，设置字体类型，默认宋体

图片标签

<img/>

属性：src=“路径”，设置图片路径。width=“100px”设置图片高度，title=“相关提示信息”，设置鼠标悬停时显示的文字描述， alt=“相关提示信息”

html表格

表单元素：用于客户端和服务端进行信息交互的通道

<form></form>:所有的表单元素都应该放在里面

文本输入框：
<input type="text"/>
属性：
name="小狗"，每个表单元素都有name属性
value="值"，每个表单元素都有value属性,value值是随着用户输入而改变
size="5",设置文本输入框的长度
maxlength="10",最多可以输入的字符数
placeholder="提示信息"，提示
readonly="readonly",只读

密码输入框
<input type="password"/>
name/value等属性，属性完全跟文本输入框一致

单选框
<input type="radio"/>
name/value属性
checked="checked",表示被选中

复选框
<input type="checkbox"/>
name/value属性
checked="checked",表示被选中

下拉列表
<select>---选择
<option></option>---项
</select>
select的属性：name/value
multiple="multiple",变成列表框（multiple：多列）
size="2",表示显示2行

option的属性：
selected="selected"，表示哪一项被选中
disabled="disabled",表示禁止被选中
value="值"
------------------------
按钮
普通按钮：
<input type="button"/>
name/value
<button type="button">按钮</button>

<button>按钮</button>
属性：type/name/value
type="button(按钮)/reset(重置)/submit(提交)",默认为button

重置按钮:
<input type="reset" value="重置"/>
<button type="reset">重置</button>

提交按钮：
<input type="submit" value="提交"/>
<button type="submit">提交</button>
提交按钮有页面刷新的效果，同时可以将文本输入框和密码输入框的相关信息提交到地址栏上

文件按钮：
<input type="file"/>---只能选择文件，不能选择文件夹
name/value属性

图片按钮：
<input type="image" src="图片的路径"/>
属性：name/value/width/height

------------------------
隐藏域：
<input type="hidden"/>

文本域：
<textarea></textarea>
有name属性，没有value属性
cols="50"，设置文本域的宽度
rows="5",设置文本域的高度

------------------------
<label></label>
属性：
for="id名"
<label for="admin">账号:<input type="text" id="admin"/></label>
<label for="pwd">密码:</label><input type="password" id="pwd"/>
label标签可以为表单元素定义，使文本和表单元素之间的关系更紧凑

------------------------
<form></form>
属性：
action="路径",跳转到某个页面，将表单元素里面数据提交到某个页面
method="get/post"
get:会将数据显示在地址栏上
post：不会将数据显示在地址栏上

----------------------------
内联框架

<iframe></iframe>
在当前页面中划分出一块区域用来显示另外一个页面
属性：
src="相对路径"
width="1000px/80%",设置显示区域的宽度
height="1000px/80%"，设置显示区域的高度
frameborder="1/0",1---有边框，0---没有边框
scrolling="yes/no/auto(自动)"
yes：表示显示滚动条
no:表示不显示滚动条
auto:表示自动显示滚动条

----------------------------
块级容器标签：<div></div>
空语义标签:没有html属性的标签

行内容器标签:<span></span>
空语义标签
----------------------------
自动换行的标签：
div hn p table form ul li ol dl...

不会自动换行的标签:
span i b font u s img input select button a...

CSS章节

CSS---表现层，修饰和表现html文档，为了解决结构层和表现层分离的问题。
通过CSS极大的提高了工作效率，方便工作人员维护和管理
CSS:层叠样式表，目前用的最广泛的css版本为css2，最新版本是css3

----------------------------------------------------------------

二 CSS的语法

语法：<tag style="css属性1:css属性值1;css属性2:css属性值2;..."></tag>
<tag style="css属性1:css属性值1;css属性2:css属性值2;..."/>

语法：
<style>
选择器{
css属性1:css属性值1;
css属性2:css属性值2;
...
}
</style>

选择器1{
css属性1:css属性值1;
css属性2:css属性值2;
...
}

选择器2{
css属性1:css属性值1;
css属性2:css属性值2;
...
}
每条css属性及属性值后面，都要以分号分割，表示该条css代码结束

----------------------------------------------------------------

三 CSS的选择器

选择器：通过选择可以找到相对应的html元素

选择器分类：简单选择器、关系选择器、属性选择器、伪类选择器、伪对象选择器、组合选择器
选择器也可以叫做选择符

1 简单选择器

a 标签选择器
标签名{ css代码 }--->div{ css代码 }

b class选择器(类选择器)
<p class="pTag"></p>
ps:body及body里面所有的元素都有class这个HTML属性，class的属性值我们叫它类名或者class名
.类名{ CSS代码 }--->.pTag{ CSS代码 }
通过一个类名定义了一套样式，只要html元素里面引用了该类名，那么这套样式都会对元素有影响

如何来取类名：类名只能由数字、字母、下划线构成，但是不能以数字开头
1tag--->错误
tag1 navTagName NavTagName nav_tag_name nav-tag-name nav-tag-name1...

推荐方式：一个单词 tag1 nav-tag-name,所取类名必须要知名见意

<div class="header-container"></div>

ps:类名可以重复

c id选择器
<p id="idName"></p>

#id名{ css代码 }---->#idName{ css代码 }

ps:body及body里面所有的元素都有id这个HTML属性，id的属性值我们叫它id名

id的特性：具有唯一性，也就是id名不能重复，相当于咱们身份证号

如何来取id名：类名只能由数字、字母、下划线构成，但是不能以数字开头
1tag--->错误
tag1 navTagName NavTagName nav_tag_name nav-tag-name nav-tag-name1...

推荐方式：一个单词 tag1 navTagName,所取id名必须要知名见意
尽量采用驼峰命名法：第一个单词全部小写，第二个单词及以上首字母大写
id选择器我们尽量不要使用在css里面

d 全局选择器(*)
*{ css代码 }--->可以让当前页面的所有元素都对全局选择器里面所定义的样式产生影响

------简单选择器的优先级顺序-------
id选择器>class选择器>标签选择器>全局选择器

2 组合选择器
a 标签名.类名
<div class="header-container"></div>
div.header-container{ css代码 }

b 标签名#id名
<div id="headerContainer"></div>
div#headerContainer{ css代码 }

c 逗号选择器(,)
<p></p>
<span></span>
p,span{ css代码 }
总结：选择器1,选择器2...{ css代码 } ---->让选择器1、选择器2等等共享这套样式

3 关系选择器
a 相邻选择器(E+F)----E、F分别泛指所有的css选择器，选择紧贴E元素后面的F元素

b 子代选择器(E>F)----选择E元素里所有的F子元素

c 后代选择器(E F)----选择E元素里面所有的F元素

CSS2属性

一：文本

1.水平对齐方式

test-align:left/right/center;

也可以让img、input、等有水平对齐方式

2.垂直对齐方式

vertical-align:top（顶部）/bottom（底部）/middle（居中）

多用于table

3.设置行高

line-height:px;

如果让文本垂直居中与容器，讲line-height的值设置跟容器的高度一样

只能用于单行文本

4.首行缩进

text-indent:px;

5.内容自动换行(css3)

word-break:break-all——允许在单词内部进行换行

word-break:keep-all;——只在空格处或者连字符处换行

6.词间距

word-spacing:px;——单词与单词之间的间隙，只要有空格出现就认为是一个词的开始

7.字间距

letter-spacing:px;——设置字（字符）之间的间隙

8.设置字体颜色

color:颜色;

9.设置大小字母的转换

text-transform:none/capitalize/uppercase/lowercase;

capitallize:将每个单词的第一个字母大写

uppercase：将单词所有的字母都转换成大写

lowercase：将单词所有的字母都转换成小写

10.文本修饰

text-drcoration:none/underline/line-through/overline;

none：不添加或者去掉文本修饰

underline：添加下划线

line-through：添加删除线

overline：添加上划线

如果要去掉a标签默认的下划线设置text-decoration:none;

二：字体的属性

1.设置字体大小

font-size:px;

2.字体风格

font-style:italic;（斜体）

3.字体加粗

font-weight:bold;

4.设置字体类型

font-family:"黑体"

5.设置小型的大写字母

font-variant:small-caps;

三：边框属性（border）

border-width:px;——设置边框的粗细

border-color:颜色;——设置边框的颜色

border-style:solid（实线）/dotted（点状线）/dashed（块状线）设置边框样式

border-方向:0 onoe; 去掉某一边的边框

缩写：border:空格粗细空格样式空格颜色；

如果给某一边加边框：top right bottom left

border-top-width=px;

boeder-top-color=颜色;

border-top-style=样式;

border-方向值-属性=属性值;

缩写：border-方向值:空格粗细空格样式空格颜色;

四：容器宽高属性（width/height）

width:px;

height:px;

补充：

常见的块级元素：div ul li ol dt dd hn p table form.....

块级元素的特点：可以自动换行，可以直接设置宽高

常见的行内（内联）元素：span a b i s u.......

内联元素的特点：对宽高没有直接作用，不会自动换行

常见的空元素：link meta br hr input img......

空元素的特点：没有内容，在起始标签中闭合

input、img、hr等可以直接设置宽高

max-width:px;设置容器的最大宽度

min-width:px;设置容器的最小宽度

max-height:px;设置容器的最大高度

min-heighr:px;设置容器的最小高度

五：显示（display）

display:none/block/inline/inline-block/line-table/table

n00one：设置元素隐藏

block：以块级元素显示，设置行内元素以块级元素显示

inline：以行内元素显示，设置块级元素以行内元素显示

inline-block：行内元素的宽高都起作用，但是不会换行

table：以表格的方式来显示

inline-table：将行内元素作为表格的方式来显示，而且不会换行,多用于表格table同行显示

六：css的注释

/* 注释内容*/

七：背景（background）
background-color:颜色; 设置容器的背景色

background-image:url（"相对路径"）;设置容器的背景图

backround-repeat:repeat/no-repeat/repeat-x/repeat-y;设置背景图以哪种方式重复显示

repeat：重复显示，默认值

no-repeat：不重复显示

repeat-x：横向重复显示

repeat-y：纵向重复显示

background-position：水平方向的值垂直方向的值; 如果只写一个方向，另外一个默认为center居中

水平方向的值：left right center px %

垂直方向的值：top bottom center px %

默认的为background-position: left top;起始位置为容器的左上角

background-attachment：设置图片是否随着滚动条滚动一般都用于body

scroll：滚动，默认为scroll

fixed：固定

缩写

background: color url("") repeat attachent postion;

background: 颜色背景图路径是否重复是否滚动方向

八.盒模型（框模型）

页面上任何一个元素我们都可以看成一个盒子，盒子会占用一定的空间和位置，他们之间相互制约，就形成了网页的布局

w3c的盒模型的构成：content border padding margin

1.padding 内边距（内部填充距）

padding-方向:px;

缩写：

padding: 上右下左;

padding: top right bottom left;

从12点钟方向开始，顺时针

padding:psx; 表示四个方向的值都设置成一样

padding: （上下）（左右）;表示上下的值都一样，左右的都一样

padding: 上（左右）下;表示上下值不一样，左右值一样

2.margin：外边距，元素与元素之间的距离

margin-方向:px;

缩写

margin: 上右下左;

margin:px;表示四个方向值都一样

margin: （上下）（左右）上下值一样，左右值一样

margin: 上（左右）下; 表示上下值不一样，左右值一样

如果让一个容器水平方向居中

margin:（上下值） auto;

margin值垂直方向的重叠，取值取较大的值

*{margin:0;padding:0;}初始化浏览器给元素自动添加的默认值

九.浮动

文档流：正常的文档流是块级元素从上到下，行内元素从左到右顺序显示

给一个元素赋值浮动后，该元素就会脱离正常的文档流进行左右浮动，知道它本身的外边缘碰到包含框或另一个浮动框的左右。

float:left/right;

left——向左浮动

right——向右浮动

/*注意*/

加了浮动过后的元素会导致父元素高度陷塌，加了浮动过后元素导致的，脱离了正常文档流

如果将多个同辈元素设置或向右浮动过后，会让这些元素倒着排序

解决元素高度陷塌的方法

1.设置父元素的高度

2.清除浮动

浮动的作用：可以让块级元素同行显示

十.列表属性（li ）

list-style-type:disc（实心圆）/circle（空心圆）/square（方块）/none（不设置或者去掉）

list-style-image:url("图片路径") 可以用背景图来设置项目符号

list-style-postion:outside(外面) /inside（里面）;设置项目符号的位置，在li的框里或者框外

缩写

list-style-postion:type/image postion;

list-style:none; 去掉项目符号

十一表格属性（table ）

border-collapse:separate（表格独立）/collapse（相邻边合并）

border-spacing:px; 设置td与td之间的距离

十二隐藏和显示
visibility:visible/hidden
visible:可见的
hidden:隐藏
display:none与visibility:hidden的区别
前者的位置都没有了，后者将会保留位置

十三溢出处理
overflow:visible/auto/scroll/hidden
visible:默认值，当内容超出时，会显示在父元素框外
auto:自动，当内容超出时，会出现滚动条
scroll:无论内容有没有超出，都会出现滚动条
hidden:当内容超出时，超出部分直接隐藏

overflow-x:visible/auto/scroll/hidden,表示横向的溢出处理
overflow-y:visible/auto/scroll/hidden,表示纵向的溢出处理

十四 a标签的css属性
1 text-decoration:none;去掉a标签的下划线
2 outline:0 none;去掉a标签点击时出现的虚线，也可以去掉表单元素获取焦点时出现的边框
3 <a href="#">回到顶部</a>---如果href的属性值为"#",有一个回到顶部的效果
4 如何去掉a标签给图片添加的边框？
在img的css属性加上border:0 none;
5 a标签的伪类选择器
css的伪类选择器：用来添加一些选择器的特殊效果，且该样式不是作用于标签上，而是作用于该标签的行为上
a:link{},未访问时出现的状态
a:visited{},访问后出现的状态
a:hover{},鼠标悬停时出现的状态---body里面的所有元素都有hover这个伪类
a:active{},鼠标按下时出现的状态---body里面的所有元素都有active这个伪类

如果a标签都要写上这四个伪类的样式，顺序应该为：L -->V -->H -->A

十五给元素添加手势
cursor:pointer;

十六定位(position)
position:static/fixed/relative/absolute/inhret
1 static:正常文档，默认值，忽略top/bottom/left/right/z-index
2 fixed:固定定位，脱离了文档流，以浏览器为坐标始（浏览器的左上角位置）终固定在浏览器窗口的某个坐标上，不会随着滚动条滚动
3 定位方式通常要配合：left/right/top/bottom
4 relative:相对定位，不会脱离文档流，以自己的原始位置为坐标进行偏移，偏移后该元素的原始位置将会保留
5 absolute:绝对定位，脱离了文档流，以浏览器为坐标进行偏移（浏览器的左上角位置）
但是如果该元素最近的已定位的祖先元素设置了定位方式了（除了static）,那么就以这个祖先元素为起始坐标
-----------
z-index:层叠顺序
z-index:5;数字大的元素在数字小的元素上面
z-index只适用于定位属性所产生的重叠

如何让一个元素始终居中与另一个元素？
left:50%;top:50%;margin-left:-width/2;margin-top:-height/2;

CSS3章节知识点

选择器
简单选择器
关系选择器
组合选择器
属性选择器
伪类选择器
伪元素选择器
...
css2选择器：
属性选择器：
1 E[att]:E泛指所有元素，选择具有att属性的E元素---IE7
2 E[att="val"]:选择具有att属性且属性值为val的E元素---IE7
3 E[att~="val"]:选择具有att属性且属性值为用空格分隔的字词列表，其中一个等于val的E元素---IE7
4 E[att|="val"]:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素---IE7
字符串：凡是用单引号或者双引号包着内容，我们都可以叫做字符串
伪类选择器：
1 E:first-child:匹配父元素的第一个子元素E。
注意：要使该属性生效，E元素必须是某个元素的子元素
2 E:link E:visited E:hover E:active---ie6
E:focus 在输入焦点时发生的样式变化，一般用于表单元素---ie8

****************华丽分割线*****************
css3选择器

一关系选择器
1 兄弟选择器(E~F):选择E元素后面的所有兄弟元素F(ie7)
二属性选择器
1 E[att^="val"]:选择具有att属性且属性值以val开头的字符串的E元素(ie7)
2 E[att$="val"]:选择具有att属性且属性值以val结尾的字符串的E元素(ie7)
3 E[att*="val"]:选择具有att属性且属性值包含val的字符串的E元素(ie7)
三伪类选择器
1 E:not(s):匹配不含有s选择器的元素E---(ie9)
2 E:last-child:匹配父元素的最后一个子元素E---(ie9)
3 E:only-child:匹配父元素仅有的一个子元素E---(ie9)
4 E:nth-child(n):匹配父元素的第n个子元素E---(ie9)
odd:奇数
even:偶数
以上伪类选择器只能写在子元素上面，不能写在父元素上面
5 E:empty:匹配没有任何子元素的元素E---(ie9)
其中子元素中如果有文本的话，那么认为文本也是子元素
6 E:enabled：匹配用户界面上处于可用状态的元素E---(ie9)
E:disabled：匹配用户界面上处于禁用状态的元素E---(ie9)
7 E:checked：匹配用户界面上处于选中状态的元素E---(ie9)

四伪元素选择器---(ie8)
1 E:before
2 E:after

chjjgogogo

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
前端设计之网页开发

前端之网页开发网页开发：前端开发和后台开发前端：呈现数据后台：管理数据HTML：网页内容，文字——结构层css:网页样式 ——表现层JavaScript：网页交互设计脚本语言推荐书籍：JavaScript高级程序设计高性能JavaScript 网页ui设计之道浏览器：内核（渲染引擎、js解析引擎）渲染引擎：用于渲染html cs
复制链接

扫一扫