Web学习

Web学习总结(更新中)

备注:web学习中记录的一些知识点,可能并不系统完善,获得更好的阅读体验请前往此处

HTML

表单

input控件

<input type="属性值" value="你好">

属性	属性值	描述
type	text	单行文本输入框
	password	密码输入框
	radio	单选按钮
	CheckBox	复选按钮
	button	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图像形式的提交按钮
	file	文件域
	number	数字框,只能输入数字,右侧多出加减符号
	url	网址输入框
	email	邮箱输入框
name	用户自定义	控件名称
value	用户自定义	默认文本值
size	正整数	控件在页面中的显示宽度
checked	checked	定义选择控件默认被选中项
maxlength	正整数	控件允许输入的最多字符
placeholder	自定义	占位符

label标签

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

语法：

<label for="控件id名称">

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

例子：

<form>
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
 </form>

textarea控件(文本域)

当用户需要在表单中输入大段文字时，需要用到文本输入域。

语法：

<textarea **rows="行数" cols="列数"**>文本</textarea>

1、cols ：多行输入域的列数。

2、rows ：多行输入域的行数。

举例：

<form method="post" action="save.php">
     <label>联系我们</label>
     <textarea cols="50" rows="10" >在这里输入内容...</textarea>
</form>

select下拉列表

下拉列表:

下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。如下代码：

讲解：

1、select和option标签都是双标签，它总是成对出现的，需要首标签和尾标签。

2、select标签里面只能放option标签，表示下拉列表的选项。

3、option标签放选项内容，不放置其他标签。

4、value：

5、selected=“selected”：

设置selected="selected"属性，则该选项就被默认选中。

form表单域

网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

语法：

<form action="服务器文件/url地址" method="传送方式" name="表单名称">

讲解：

1.action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

2.method :数据传送的方式（get/post）。

<form method="post"  action="save.php">
     <label for="username">用户名:</label>
     <input type="text" name="username" />
     <label for="pass">密码:</label>
     <input type="password" name="pass" />
 </form>

注意:

1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 form 标签之间（否则用户输入的信息可提交不到服务器上哦！）。

2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。

CSS

CSS的三种引用方式

1. 内联样式(行内式)
2. 嵌入样式(内部式)
3. 外部样式(外链式)

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便,权重高	没有实现结构和样式相分离	较少	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构和样式相分离	需要引入	最多	控制多个站点

字体

font-family

可同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体

CSS Unicode字体

• 为什么使用Unicode字休

  • 在CSS中设置字体名称，直接写中文是可以的。但是在文件编码(GB2312、 UTF 8等)不匹配时会产生乱码的错误。
  • xp系统不支持类似微软雅黑的中文。

• 解决:

  • 方案一:你可以使用英文来替代。比如font-family: “Microsoft Yahei”。
  • 方案二:在CSS直接使用Unicode编码来写字体名称可以避免这些错误。使用Unicode写中文字体名称，浏览器是可以正确的解析的。

font-weight

• 在html中将字体加粗我们可以用标签来实现
  • 使用b和strong标签进行文本加粗。
• 可以使用CSS来实现，但是CSS 是没有语义的。I

属性值	描述
normal	默认值(不加粗的)
bold	定义粗体(加粗的)
100~900	400等同于normal,而700等同于bold

提倡:
我们平时更喜欢用数字来表示加粗和不加粗。

font-style

• 在html中将字体倾斜我们可以用标签来实现，

  • 字体倾斜可以用i和em标签。

• 可以使用CSS来实现，但是CSS是没有语义的

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下:

属性	作用
normal	默认值，浏览器会显示标准的字体样式(常用)
italic	浏览箭会显示斜体的字体样式。

小技巧:
平时我们很少给文字加斜体，反而喜欢给斜体标签(em, i)改为普通模式。

font综合写法

选择器{font:font-style font-weight font-size/line-height font-family}

• 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

• 其中不需要设置的属性可以省略(取默认值)，但必须保留font-size和font-amily属性， 否则font属性将不起作用。

CSS外观属性总结

属性	表示	注意点
color	颜色	我们通常用十六进制比如而且是简写形式#fff
line-height	行高	控制行与行之间的距离
text-align	水平对齐	可以设定文字水平的对齐方式
text-indent	首行缩进	通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration	文本修饰	记住添加下划线underline 取消下划线none

快捷操作

1.如果想要生成多个相同标签加上*就可以了比如 div*3 就可以快速生成3个div
2.如果有父子级关系的标签，可以用>比如ul>li就可以了
4.如果有兄弟关系的标签，用+就可以了比如div+p
5.如果生成带有类名或者id名字的，直接写.demo 或者#two tab键就可以了
6.如果生成的div类名是有顺序的，可以用自增符号$.

选择器

子元素选择器

• 子元素选择器只能选择作为某元素子元素(亲儿子)的元素。
• 其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个>进行连接

.class>h3{color:red; font-size:14px;}

交集选择器

• 交集选择器由两个选择器构成，找到的标签必须满足:既有标签1的特点， 也有标签2的特点。(不常用)

并集选择器

• 如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简清。

• 各个标签用逗号分开,通常用于集体声明

伪类选择器

• 伪类选择器（简称：伪类）通过冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。

• 伪类的功能和一般的DOM中的元素样式相似，但和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。

• 类选择器是一个点,比如.demo{},而我们的伪类用2个点就是冒号,比如:link{}

• 用于向某些选挥器添加特殊的效果。比如给链接添加特殊效果，比如可以选挥第1个，第n个元素。

链接伪类选择器

• a:link /*未访问的链接*/
• a:visited /*已访问的链接*/
• a:hover /*鼠标移动到链接上*/
• a:active /*选定的链接*/

注意

• 写的时候，他们的顺序尽量不要颠倒,按照lvha的顺序,否则可能引起错误。

• 记忆法

  • love hate 爱上了讨厌
  • lv包包 非常hao

• 因为a链接浏览器具有默认样式，所以我们实际工作中需要给链接单独指定样式。

标签显示模式

块级元素(block-level)

• 常见的块元素有<h1>~<h6>、<p>、 <div>、 <ul>、 <ol>、 <li>等，其中<div>标签是最典型的块元素。

• 块级元素的特点:

  1. 比较霸道，自己独占一行
  2. 高度，宽度、外边距以及内边距都可以控制。
  3. 宽度默认是容器(父级宽度)的100%
  4. 是一个容器及盒子，里面可以放行内或者块级元素。

• 注意:

  • 只有文字才能组成段落,因此p里面不能放块级元素，特别是p不能放div。
  • 同理还有这些标签h1,h2,h3,h4,h5,h6,dt， 他们都是文字类块级标签，里面不能放其他块级元素。

行内元素(inline-level)

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、 <span>等， 其中<span>标签是最典型的行内元素。有的地方也称内联元素。

• 行内元素的特点:

  1. 相邻行内元素在一行上，一行可以显示多个。
  2. 高、宽直接设置是无效的。
  3. 默认宽度就是它本身内容的宽度。
  4. 行内元素只能容纳文本或者其他行内元素。

• 注意:

  1. 链接里面不能再放链接。
  2. 特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。

行内块元素(inline-block)

在行内元素中有几个特殊的标签<img />、<input />、<td>， 可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

• 行内块元素的特点:
  1. 和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙,一行可以显示多个。
  2. 默认宽度就是它本身内容的宽度。
  3. 高度、行高、外边距以及内边距都可以控制。

三种模式总结

标签显示模式转换 display

• 块转行内: display: inline;
• 行内转块: display: block;
• 块、行内元素转换为行内块: display: inline-block;

单行文本垂直居中

行高(基线与基线的距离)我们利用最多的一个地方是:可以让单行文本在盒子中垂直居中对齐。
文字的行高等于盒子的高度即可实现垂直对齐,可近似看作:行高=上距离+内容高度+下距离

行高和高度的三种关系:

• 如果行高等高度文字会重直居中
• 如果行高大于高度文字会偏下
• 如果行高小于高度文字会偏上

CSS背景

背景颜色

语法:

background-color: 颜色值; //默认的值是 transparent 透明的

背景图片

语法:

background-image: none | url(url);

背景平铺

语法:

background-repeat: repeat(默认) | no-repeat | repeat-x | repeat-y;

参数	意义
repeat	平铺
no-repeat	不平铺
repeat-x	横向平铺
repeat-y	纵向平铺

背景位置

语法:

background-position: length || length;
background-position: position || position;

参数	值
length	百分数|由浮点数字和单位标识符组成的长度值
position	center | top | bottom | left | right 方位名词

注意:

• 必须先指定background-image属性
• position后面是x坐标和y坐标，可以使用方位名词或者精确单位。
• 如果只指定了一个方位名词，另一个值默认居中，为50%。
• 如果只指定一个数值,那该数值用于x坐标，另一个默认是y坐标，默认居中
• 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
• 如果指定两个值，精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

背景附着

背景附着就是背景是滚动还是固定的

语法:

background-attachment: scroll | fixed;

参数	作用
scroll	背景图像随对象内容滚动
fixed	背景图像固定

背景简写

背景简写和字体简写不同的是背景简写没有强制要求,建议按下面方式写

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;

背景透明

语法:

background: rgba(0, 0，0，0.3);

• 最后一个参数是alpha透明度取值范围0~1之间
• 我们习惯把0.3的0省略掉这样写background: rgba(0, 0, 0, .3);
• 注意:背景半透明是指盒子背景半透明，盒子里面的内容不受影响
• 因为是CSS3,所以低于ie9的版本是不支持的。

CSS三大特性

层叠性

概念:

• 所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一 个属性层叠掉

原则:

• 样式冲突,遵循的原则是就近原则.那个样式离结构近,就执行那个样式
• 样式不冲突,不会层叠

继承性

概念:

• 子标签会继承父标签的某些样式，如文本颜色和字号。
• 想要设置一个可继承的属性，只需将它应用于父元素即可。

注意:

• 恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了
• 子元素可以继承父元素的样式(text-, font-, line-这些元素开头的可以继承，以及color属性)

优先级

定义CSS样式时，经常出现两个或更多规则成用在同一元素上，此时，

• 选择器相同，则执行层叠性
• 选择器不同，就会出现优先级的问题。

权重计算公式:

标签选择器	权重
继承或 *	0,0,0,0
元素(标签选择器)	0,0,0,1
类,伪类	0,0,1,0
ID	0,1,0,0
行内样式 style=""	1,0,0,0
!important	∞ 无穷大

继承的权重为0

我们修改样式，一 定要看该标签有没有被选中。

1. 如果选中了,那么以上面的公式来计权重.
2. 如果没有选中,那么权重是0,因为继承的权重为0.