第一周知识总结
1:网页的组成:
结构、表现、行为
2:计算机语言
结构(html)
表现(css)
行为(js)
3:web标准:规范(一系列标准的集合)
w3c 制定了 结构 和 表现得 标准
ECMA 制定了 js 标准
**4:HTML的基本结构:**分为两个区域(描述区)、(内容区)
< !DOCTYPE html>表示文档类型
< html lang=”en”>根标记
< head>描述区
< meta charset=”UTF-8” >字符编码格式,UTF-8国际性编码格式
< title>< /title>当前网页标题,显示在状态栏上面
< /head >内容区
< body >
< /body >
< /htm l>
5:html语法:
(1)HTML标签分为两类:单标签和双标签(成对出现的标签为双标签)
(2)语法:单标签(标签名称 属性名=“属性值”)
双标签(标签名称 属性名=“属性值”)/双标签
(3)HTML语法说明:
在尖角号后面的第一个单词就是标签名称
在标签后面用空格隔开的就是属性
属性和属性值之间用等号连接
属性值放在引号里面(单双引号都可以)
如果一个标签拥有多个属性时,属性和属性之间需用空格隔开
6:常用标记:< h 1> </ h 1 >
< h2>
< h3>
< h4>
< h5>
< h6>
< p>
7:html列表:
(1)无序列表:
< ul>
< li>< /li>
< /ul>
(2)有序列表
< ol>
< li>< /li>
< /ol>
拓展:改变列表符号的样式
Type=“”
属性值:a/A
属性值:i/I
改变列表符号开始符号
Start=“”
属性值为数字几的时候,表示从第几个开始
(3)自定义列表
< dl>
< dt>一般情况下放的是图片< /dt>
< dd>放的是对图片的解释< /dd>
< /dl>
8:超链接:< a>< /a> a里面的属性:herf=“跳转的地址”
Target=””
属性值 :_self(默认值,在当前窗口打开)
_blank(创建一个新窗口打开)
Title=“”提示信息
**9:图片:**图片展示有两种:一种是img标签导入的图片,另一种是通过css添加的背景图片
Img标签的应用:img标签属性
Src=“图片路径”
Alt=“文本替换图片”
Alt说明:(alt属性即使为空也不要删除)
当图片加载失败的时候,alt里面的文本将会替换图片;
有利于seo优化,方便搜索引擎对图片进行检索
Title=“”
Title说明:(1)提示信息;
(2)作为图片的小标题;
Width 图片宽;height 图片的高;border 图片的边框;
10:相对路径总结:
1 同级找同级 ./目标名称
2 父级找子集 ./父级名称/目标文件名称
3 子集找父级 …/返回上一级
**11:表格:**作用:显示数据
每一个表格都是用table来表示
行 tr
列 td
表格的html属性:
Width 宽
Height 高
Border 边框
Bordercolor 边框颜色
Cellspacing 边框间距
Cellpadding 文字与边框之间的间距
Align=“” 水平对齐方式
Right 右边 center 中间 left左边
Valign=“” 垂直对齐方式
Top 上 bottom 下 middle 中
合并单元格:
Rowspan=“合并单元格的数量” 合并行
Colspan=“合并单元格的数量” 合并列
注:只要跨行的都是合并行,反之是合并列
无论合并行还是合并列,都是作用在 td上面
**12:表单:**作用:收集用户信息(收集数据)
表单标签(表单域):
属性:action=“url” 表单提交的路径
Method=“get/post” 数据传输的方式
Name=“表单的名称”
表单控件:
标签:input
属性:type=“” 指定input生成的类型(输入框、提交按钮、重置按钮、空按钮。。。。。。)
Value=“”根据type类型不同,作用也不同
文本框(输入框):<input type=”text”>
密码框:< input type=”password”>
提交按钮:<input type=”submit”>
重置按钮:<input type=”reset”>
空按钮:<input type=”button”>
13:css(层叠样式表):
作用:渲染网页
语法:
选择符{属性:属性值;}
比如:div{ width:200px}
Css属性:width/height/border/color/background/…
Css属性值:(分为常规属性值和法定属性值)
常规属性值:100px/200px/300px/…
法定属性值:官方指定某一个单词,具有某种意义。
注:所有css代码都要放在css样式表里面
14:css样式表:
(1)内部样式表:
< style type=”text/css” >
Css内部样式表
< /style >
注:内部样式表尽量放在head描述区里面
(2)外部样式表:
创建一个后缀名为.css的文件
外部样式表导入:
第一种: < link rel=”stylesheet” herf=”css样式表的连接路径url ”> rel=”stylesheet” 建立关联性
第二种:
< style >
@import url(“”);
< /style >
(3)内联样式表:
<标签 style=”内联样式”></标签>
比如: < div style=”width:200px;height:100px;background:red;”>< /div>
15:css样式表的权重关系:
内联样式表权重最大!
内部样式表和外部样式表的权重和书写的前后顺序有关!(放在后面的会把前面的覆盖掉,覆盖只能是相同的属性样式,不同的属性样式会继续执行)。
!Important;当前声明具有最高权重(大于内联样式表权重) 语法:background:red!important;
**16:div网页布局:
**先做上下排版,再做左右排版,然后由外到里排版。
17:css选择符:(给标签起名字)
(1)类型选择符(标签选择符)
所有的html标签都可以直接当选择符来应用。
比如:div/p/b/em/i/…
语法:标签{属性:属性值;}
特点:能选中当前结构里的全部同名标签。
应用:相统一某一个标签样式的时候或者清除某个标签默认样式的时候。
(2)ID选择符:
语法:起名字 <标签 id=“名字”></标签>
用名字写样式 #名字{属性:属性值;}
特点:唯一性!在同一个网页里面,一个id名字只能用一次。
应用:用来划分网页外围结构。
(3)class选择符(类选择符):
语法:起名字 < 标签 class=“名字1 名字2 名字3.,”></标签>
用名字写样式 .名字{属性:属性值;}
特点:a:一个元素可以有多个类名,类名可以重复出现。b:可以制定一类样式。
(4)群组选择符:
语法:以逗号隔开的方式,把多个选择器组成一组,给整租添加样式。
选择符1,选择符2,选择符3{属性:属性值;}
(5)包含选择符(子代选择符/后代选择符)(通过父元素找子元素):语法:父元素 子元素{属性:属性值;}
(6)伪类选择符:
a:link{color:red} 未访问连接状态
a:vidited{color:red} 已访问连接状态
a:hover{color:red} 鼠标滑过连接状态
a:active{color:red} 鼠标按下时连接状态
语法:a{color:red;}
a:hover{color:yellow;}
(7)通配符:
语法:*{ } *选择页面中所有的元素。
*{
Margin:0;盒子外间距清零
Padding:0;盒子内间距清零
}
18:css选择符权重:
Id选择符>class选择符>标签选择符(!important权重最高)
四个数字表示权重:
内联样式表 1000
Id 100
Class 10
标签 1
伪类选择符 10
通配符 0
包含选择符的权重为权重之和。
比如:.class .id .标签{} 10 + 100 +1 = 111
群组选择符的权重不会发生变化,保持原来的权重值。
:19:css样式的层叠性:权重!!!
产生权重关系,必然体现css样式的层叠性。
a:!important 最重要的样式,权重最高。
b:选择符的权重:id>class>标签
c:开发者样式权重>读者样式权重>浏览器样式权重
d:当权重相同时,后写的样式会将前面的样式覆盖掉
:20:css文本属性:
Css文本语法:
(1)font-size:;控制文本大小
a:为了消除系统之间显示差异,规定:16px为标准(默认)字体大小。
b:文本设置的大小,必须是偶数。
c:PC端项目,设置大小尽量不小于12px;
d:从ps软件中获取文本大小,汉字量取文本高度。
e:文本单位: px/em/pt(磅;常用于印刷领域) 12px=9pt
em:(相对大小单位,相对于父元素的font-size值而定;默认情况下,1em==16px)
f:(了解)
xx-small=9px
x-small=11px
small=13px
medium=16px
large=19px
x-large=23px
xx-large=27x
(2):color:;控制网页中的文本颜色
颜色值:
a:十六进制表示颜色值:
十六进制数字:0-9 a-f
颜色值:#ff0000
6个数字:前两个表示红色,中间两个表示绿色,后两个表示蓝色
b:RGB(250,0,0)模式
拓展:rgba(250,0,0,0.5);a表示的是文本的透明度。
(3):font-family:;控制的是网页中字体类型。
默认的字体类型是“微软雅黑”
系统能支持的字体:web安全字体:微软雅黑、宋体、楷体…
英文默认的字体:Arial
语法:
font-family:字体1,字体2,字体3,…
注:a:中文字体必须放在引号里。
b:如果一个字体是由多个单词组成,也要放在引号里。
c:如果字体是一个单词,那不需要引号。
d:先写英文字体,后写中文字体。
(4):font-width:;控制文本是否加粗。
属性值:
bold 加粗
bolder 加粗
normal 清除加粗,回复常规文本
100-900 100-500是不加粗状态,600-900是加粗状态。
(5):font-style:;控制文本的倾斜。
属性值:
ltalic 倾斜
oblique 倾斜(倾斜幅度更大,但一般不会有明显变化)
normal 恢复常规文本
(6):line-height;;控制文本的行高。
a:从ps设计图上:怎么获取行高:从第一行开始量到第二行开始。
b:单行文本:
如果让单行文本在容器里面上下居中,line-height设置容器高度即可。
显示状态:
小于容器高度的时候,文本向上移动
大于容器高度的时候,文本向下移动
(7):text-align:;控制文本的水平对齐方式。
属性值:
center 居中对齐
left 左对齐
right 右对齐
justify 两端对齐
(8):text-decoration:;文本修饰(上划线、下划线、删除线)
属性值:
none 清除下划线
underline 添加下划线
overline 添加上划线
line-through 添加删除线
(9):text-indent:;首行缩进
text-indent:2em;首行缩进两个单位
Text-indent:;能设置负值,文字向左走。(悬挂式缩进)
(10):字间距、词间距
letter-spacing:; 字间距
word-spacing:; 词间距
(11):text-transform:;控制文本大小写
uppercase 大写
lowercase 小写
capitalize 每个单词的首字母大写
21:浮动:
属性:
float:
属性值:
Left 左浮动
Right 右浮动
None 没有浮动
特点:
A:添加浮动之后,元素不占空间。
B:如果让多个元素横向进行排列,所有的排列的元素,都必须添加浮动。
C:如果子元素添加的动,宽度大于父元素的时候,后面的元素会被挤到下一行。