第一章知识总结

第一周知识总结

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>

< br> < hr> < div> < img> < a> < b> < i> < span>   © Border：10px；solid（实线） red；

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：如果子元素添加的动，宽度大于父元素的时候，后面的元素会被挤到下一行。