职业方向规划定位:
web
前端开发工程师web
网站架构师web
前端开发的前景展望:
IT
行业企业需求最多的人才html5
抢占移动端的市场web
开发成为企业的宠儿和核心web
职业发展目标:
HTML
css
(层叠样式表)js
ps
切图
第二、分解目标(起步阶段、提升阶段、成型阶段)
起步阶段:
提升阶段:
HTML
基本标签和属性css
的基本语法和使用html
+css
+js
开始系统项目的开发DIV
+CCS
布局css
样式表控制html
标签js
制作动态网站的效果认识HTML:
html
不是一种编程语言,是一种标志语言html
使用标签来描述网页html
结构:<html>
<head></head>
<body></body>
</html>
不成对出现的标签
<br>
<hr>
<meta>
<img>
<input..>
<option..>
<link>
HTML 基本标签的讲解:
<html>
<head>
<body>
标签<h1>
----<h6>
仅仅用于标题文本,不要为了产生粗体文本使用它们<p>
标签 段落标签<strong><b>
标签
都会让文字产生加粗效果
<strong>
用于强调文本,强度更深,表示重要文本--->用于SEO
优化<b>
只是视觉加粗效果--->单纯为了产生加粗<em>
<i>
标签em
用于强调文本i
只是视觉斜体效果<strong>
比<em>
强调更强 
; ---->空格>
; --->大于号<
;--->小于号"
;--->引号©
;-->版权号
HTMl
基本标签:
span
标签
<pre>
标签
<a>
标签--->他有一个必不可少的属性 href
target
属性:_self
(在原来页面打开) _blank
(新窗口打开)_top
(打开时忽略所有的框架) _parent
(在父窗口中打开)创建锚点和锚链接
<a name="锚点名称"></a>
<a href="#锚点名称">内容</a>
marquee
标签
<marquee direction="down" loop="4" onmouseover=this.stop() onmouseout=this.start()></marquee>
direction
表示滚动方向,取值有(left,right,up,down,默认left)loop
表示滚动循环的次数,默认为无限循环onmouseover=this.stop() onmouseover=this.start() scrollamout="1"(滚动速度)
图片标签与路径:
jpg
png
gif
Gif
(只支持全透明)Jpeg
/jpg
Png
半/全透明都支持图片标签写法 :
<img src="" alt="" width="" height="" />
图片四要素:
src=""
图片路径alt=""
图片含义width=""
图片宽度 和图片大小保持一致height=""
图片高度 和图片大小保持一致title=""
路径知识:
相对路径、绝对路径:
<img src="" …… align="" />
align
属性--设置图片与后面文字的位置关系top
、bottom
、middle
、absmiddle
、left
、right
在静态页面中:
/
开头表示根目录;
./
表示当前目录;(斜画线前面一个点)
../
上级目录;(斜画线前面两个点)
直接用文件名不带/也表示同一目录
<ul>
无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
标签。每个列表项始于 <li>
标签。<ol>
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
</ol>
列表符号
无序列表-列表符号:
type="circle"
空心圆 type=“disc”
实心圆 默认值 type="square"
方块符
type="A"
A B C Dtype="a"
a b c dtype="1"
1 2 3 4 默认值type="I" I II III type="i" i ii iii
列表嵌套
<ul>
<li>柚子
<ul>
<li>沙田柚</li>
<li>蜜柚</li>
</ul>
</li>
<li>荔枝</li>
<li>苹果</li></ul>
<ol>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
<li>果汁</li>
<li>牛奶</li></ol>5、定义列表
定义列表不仅仅是一列项目,而是项目及其注释的组合。定义列表以 <dl>
标签开始。每个定义列表项以 <dt>
开始。每个自定义列表项的定义以 <dd>
开始。
<dl>
<dt>pc网页制作</dt>
<dd>学费1580,学习DIV+CSS JS JQ 项目实战</dd>
<dt>手机网页制作</dt>
<dd>内部VIP学费900,非VIP学1380</dd>
</dl>
dd
是对dt
的解释
< dl>< /dl>
用来创建一个普通的列表,< dt>< /dt>
用来创建列表中的上层项目,< dd>< /dd>
用来创建列表中最下层项目,< dt>< /dt>
和< dd>< /dd>
都必须放在< dl>< /dl>
标志对之间。<dl>
<dt>中国城市</dt>
<dd>北京 </dd>
<dd>上海 </dd>
<dd>广州 </dd>
<dt>美国城市</dt>
<dd>华盛顿 </dd>
<dd>芝加哥 </dd>
<dd>纽约 </dd>
</dl>
dl
是definition list
的缩写dt
是definition title
的缩写dd
是definition description
的缩写
list-style
属性具有三个属性分量:list-style-position
:设置列表项图标的位置,位于文本内或者文本外list-style-type
: 设置列表项图标的类型list-style-image
:使用图像设置列表项图标表单标签:
<form>
表单标签
<form>
表单是一个包含表单元素的区域,包括起来的都是表单的内容
<form>
<input type="text"/>
</form>
Action
和确认按钮:
<form action="html.do" method="get">
username: <input type="text" name="user" />
<input type="submit" value="提 交" />
</form>
HTML
标签 - 隐藏域隐藏标签:
<form>
<input type="hidden" name="hid" value="value">
</form>
<input>
标签的掌握
常用type
类型:
<input type="" name="" value="" />
type="text"
单行文本输入框type="password"
密码(maxlength=""
)type="radio"
单项选择(checked="checked"
) type="checkbox"
多项选择 type="button"
按钮type="submit"
提交 type="image"
图片提交type="file"
上传文件type="reset"
重置type="hidden"
隐藏<input type="text" name="" value="今天心情不错" />
<input type="radio" name="" value="" checked="checked">
<input type="checkbox" name="" value="" checked="checked">
<select name="" >
<option value=""></option>
<option value="" selected="selected"></option>
<select>
textarea
没有默认值
<label>
标签的使用
<label></label>
label
元素不会向用户呈现任何特殊效果。label
元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label>
标签的for
属性应当与相关元素的 id
属性相同。
<p>单向选择</p>
<label for="male">男:</label><input type="radio" name="sex" id="male"/>
<label for="nv">女:</label><input type="radio" name="sex"checked="check"/>
<textarea>
文本域标签<textarea>
标签:<textarea></textarea>
是文本域标签,可以在其中插入一段文字内容,它有两个常用属性rows
和cols
注意:
rows
表示这个文本域有多少行cols
表示这个文本域有多少列除了这两个属性它还有readonly
(只读,文本域的内容无法改变,相当于协议)和title
(鼠标放上提示)
<select>
标签的掌握
<select>
表单数据提交给服务器时包括 name
属性
<form>
<select name="" id="">
<option value="1">1月</option>
<option value="2">2月</option>
</select>
</form>
常用到的属性:disabled=“disabled” name="sel" size="2"
<table>
表格标签<table>
表格标签:<table>
是表格标签,可以用它定义一个表格。
<table border="1">
<tr>
<td>姓名</td>
<td>性别</td>
</tr>
</table>
注意:<table>
的border
属性不能少
<tr>
<td>
标签的使用
<tr>
行标签:
<tr>
可以定义表格中的一行,一个<tr></tr>
表示一行。<table border="1">
<tr>
<td>姓名</td>
<td>性别</td>
</tr>
<tr>
<td>姓名</td>
<td>性别</td>
</tr>
</table>
<td>
单元格标签:
<td>
可以定义表格中的一个单元格,<td></td>
表示一个单元格。
<table border="1">
<tr>
<td >姓名</td>
<td>性别</td>
<td>爱好</td>
</tr>
</table>
border-collapse
属性设置是否将表格边框折叠为单一边框:border-collapse:collapse
;colspan
左右合并rowspan
上下合并第一部分总结:
head
meta
style
scrpit.
..img
div
span
a
ul
li
...css
改变它meta
link
base
img
input
br
hr
双标签:html
head
body
div
a
p
span
..ul
li
ol
dl
....
常用可视化标签
div
href
*属性:设置跳转的网页地址target
属性:设置跳转的目标a
标签img
src
*属性用来设置图片的url数据alt
提供给搜索引擎搜索的width
height
table
caption
tr
td (th)
rowspan
)colspan
)HTML部分导图总结
css
基础知识:
css
样式表的定义css
:(Cascading Style Sheets)层叠样式表;-head
区域style
标签里面
css
内的注释:/*
注释内容*
/css
样式表的语法
CSS
规则由两个主要的部分构成:要添加样式的盒子名或者标签名、和要添加的样式。
盒子名或者标签名{属性:值;}
#
开头16
进制6
位数(两两相同可以缩写)rgb(0,0,0)
内部样式表(单单做一个页面时)
<style></style>
标签在文档<head></head>
里面定义内部样式表
<head>
<style type="text/css" >
p{color:red;}
</style>
</head>
head
标签里面) 当样式需要应用于很多页面时,就需要用到外部样式表,首先需要创建一个css
文件,然后引用到我们的页面中。
Link
样式表式: <link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路径)>
Html
式: <style type="text/css">@import url("css.css");></style>
内联样式表(优先级高)
写在标签里面的样式
<p style="color:red;"></p>
表示给p
标签里面的文字颜色设置为红色
区别:外链样式与导入样式
link
标签是属于xhtml
范畴,而@import
则是css2.1
中特有的。link
标签除了可以加载CSS
外,还可以做很多其它的事情,比如定义RSS
,定义rel
连接属性等,@import
就只能加载CSS
了。
加载的顺序的区别,link
加载的css
时,是一种并行(没有尝试是否是这样)加载CSS
方式,而@impor
则在整个页面加载完成后才加载。
兼容性的区别,因@import``CSS2.1
才特有的,所以对于不兼容CSS2.1
的浏览器来说,无效。
javascript
操作DOM
)的区别,此时@import
就无能为力了。css
选择器:
class
类选择器可以重复利用 id
选择器唯一选择器{属性:值;属性:值;}
标签选择器:页面中所有的标签都是一个选择器 p{color:red;}
ID
选择器
id
命名的元素 以 #
开头 #p1{color:#0f0;}
class
选择器,选择clas
命名的元素 以.
开头 .first{color:#00f;}
css
代码写完后上线前要经过压缩处理 css
版本(备份)压缩后注释都清除,空间体积减少
#main,.first,span,a,h1{color:red;}
p
span{color:red;}
属性选择器
a[title]{color:red;}
选择包含title
的a
标签a[title][href]{color:red;}
选择包含title
和href
的a
标签>
+
选择器子类选择器:只选择子元素(只选择儿子)(相当于包含元素)
p > span{color:red;}
相邻兄弟选择器:只选择后面的相邻兄弟元素
p + span{color:red;}
<a>
伪类选择器
a:link {color:#FF0000;}
/ 未访问的链接 / (只用于a标签)a:visited {color:#00FF00;}
/ 已访问的链接 / (只用于a标签)a:hover {color:#FF00FF;}
/* 鼠标移动到链接上*/
(可和其他标签结合一起用)a:active {color:#0000FF;}
/ 选定的链接 /输入伪类选择器(针对表单)
input:focus{color:red;}
/ 键盘输入焦点 /其他伪类选择器
p:first-child{color:red;}
/* 第一个p *
/:before
在元素之前添加内容。:after
在元素之后添加内容。css
优先规则
ID
选择器—> Class
类选择器->标签选择器背景属性:
背景的添加 :
background:red;
backgronnd-color:red;
background:url(“images/1.jpg”);
backgronnd-image:url(“images/1.jpg”);
background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
background-position
来实现background-position
的取值可为英文单词或者数值和百分值。background-positon
的英文单词取值top left
top center
top right
center left
center center
center right
bottom left
bottom center
ottom right
background-positon
的数值取值 background-position:x y;
positon
的百分值取值 background-position:x% y%;
背景图片的大小可以通过属性background-size
来设置background-size
的取值可为数值和百分值。
background-size
的数值取值 background-size:x y;
background-size
的数值取值 background-size:x% y%;
背景图片是否随着内容的滚动而滚动由background-attachment
设置
background-attachment:fixed;
固定,不随内容的滚动而滚动 background-attachment:scroll;
滚动,随内容的滚动而滚动css
文字文本属性:
文字属性
color:red;
文字颜色font-size:12px
; 文字大小font-weight:“bold”
文字粗细(bold/normal
)font-family:“宋体”
文字字体font-variant:small-caps
小写字母以大写字母显示
文本属性
text-align:center;
文本对齐(right
/left
/center
)line-height:10px;
行间距(可通过它实现文本的垂直居中)text-indent:20px;
首行缩进text-decoration:none;
none
/underline
/overline
/line-through
)letter-spacing
: 字间距
html
标签都是盒子模型div
标签自定义盒子模型所有的标签都是盒子模型
class
和id
的主要差别是:class
用于元素组(类似的元素,或者可以理解为某一类元素),而id
用于标识单独的唯一的元素。width
、height
宽高padding
border
边框线margin
外边距border
边框
border:1px solid #f00;
border-width
:border-style:
dotted
点状虚线dashed
(虚线)solid
(实线)double
(双实线)border-color
(颜色)padding
内边距
值:像素
/厘米
等长度单位、百分比
padding:10px;
上下左右padding:10px 10px;
上下 左右padding:10px 10px 10px;
上 左右 下padding:10px 10px 10px 10px;
上 右 下 左(设置4个点-->顺时针方向)单独属性:
padding-top:
padding-right:
padding-bottom:
padding-left:
当设置内边距的时候会把盒子撑大,为了保持盒子原来的大小,应该高度和宽度进行减小,根据width
和height
减小
margin 外边距
值:与padding
相同
padding
相同行块转换
display:none
; 不显示display:block
; 变成块级元素display:inline
; 变成行级元素display:inline-block
; 以块级元素样式展示,以行级元素样式排列溢出
overflow:hidden
; 溢出隐藏overflow:scroll
; 内容会被修剪,浏览器会显示滚动条overflow:auto
; 如果内容被修剪,则产生滚动条white-space:nowrap
;长单词换行:word-wrap:break-word
;
常见块元素和行内元素
块元素(block element
)
address
地址center
举中对齐块div
- 常用块级容易dl
定义列表form
交互表单 (只能用来容纳其它块元素)h
标签hr
水平分隔线ol
无需列表ul
有序列表p
段落pre
格式化文本内联元素:
a
- 锚点b
- 粗体(不推荐)br
- 换行code
- 计算机代码(在引用源码的时候需要)em
- 强调i
- 斜体img
- 图片(特殊的内联元素,同时是内联替换元素,替换元素可以设置宽高)img
的css
为{margin:0;display:block;border:0px}
input
- 输入框label
- 表格标签select
- 项目选择strong
- 粗体强调textarea
- 多行文本输入框u
- 下划线var
- 定义变量img
一样的设置方法)
<img>
、<input>
、<textarea>
、<select>
<object>
都是替换元素,这些元素都没有实际的内容static
静态定位(不对它的位置进行改变,在哪里就在那里)
top
,bottom,
left, right
或者 z-index
声明)。fixed
固定定位(参照物--浏览器窗口)---做 弹窗广告用到
"left"
, "top"
, "right"
以及 "bottom"
属性进行规定。 relative
(相对定位 )(参照物以他本身)
absolute
(绝对定位)(除了static
都可以,找到参照物-->与它最近的已经有定位的父元素进行定位)
static
定位以外的第一个父元素进行定位。left"
, "top"
, "right"
以及 "bottom"
属性进行规定z-index
z-index
属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。一切皆为框
div
、h1
或p
元素 即:显示为一块内容称之为 “块框“ ;span
,strong
,a
等元素 即:内容显示在行中称 "行内框";display:block
; 让行内元素设置为块级元素,display:none;
没有框相对定位:
.adv_relative { position: relative; left: 30px; top: 20px; }
.adv_absolute { position: absolute; left: 30px; top: 20px; }
frameset
框架:
<frameset>
---- 用来定义一个框架;双标签<body>
一起使用rows
、cols
属性
rows
定义行表示框架有多少行(取值 px
/%
/ *
)cols
定义列表示框架有多少列(取值px
/ %
/ *
)frame子框架
frame
> ---- 表示框架中的某一个部分;单标签,要跟结束标志src
显示的网页的路径name
框架名frameborder
边框线(取值 0 / 1)
<noframes
>属性
noframes
> 提供不支持框架的浏览器显示body
的内容;双标签<frameset>
<frame src=“” />
<frame src=“” />
<frame src=“” />
<noframes>
<body>内容</body>
</noframes>
</frameset>
<iframe>
内联框架
iframe
元素会创建包含另外一个文档的内联框架(即行内框架)body
一起使用width
宽(取值 px / %)height
高(取值 px / %)name
框架名frameborder
边框线(取值 0 / 1)src
显示的网页的路径opacity
透明属性
opacity
IE6/7/
,使用filter:alpha(opacity:值;
) 值为0-100
Webkit
,Opera
,Firefox
,IE9+
,使用opacity
:值; 值为0-1
-moz-opacity
:值; 值为0-1
{
opacity:0.5;
filter:alpha(opacity:50);/*0-100*/
-moz-opacity:0.5; /*取值0-1*/-->针对早起版本的火狐兼容问题的解决
}
border-radius
圆角边框属性
div
元素添加圆角边框
border-radius:10px
;box-shadow
阴影属性
box-shadow
属性向框添加阴影效果,后面跟4个参数。
box-shadow:0px 0px 10px #000;
<embed>
属性
是HTML5
中新增的标签,媒体嵌入插件标签,可以通过<embed>
插入音频或视频
<embed src=“media/music.mp3” />
.mid
.wav
.mp3
等2024 - 快车库 - 我的知识库 重庆启连科技有限公司 渝ICP备16002641号-10
企客连连 表单助手 企服开发 榜单123