前端入职学习笔记-第一周第二天（HTML与CSS基础）

学习路径

HTML与CSS基础

1、HTML基础

1.1 HTML文档声明

根标签 <html></html> 有且只有一个（祖先标签）

子标签<head></head> <body></body>

后代标签<title></title>

由于HTML有多个版本，需要用doctype声明，来判断浏览器网页的版本。

中文浏览器一般用GB2312进行解码，需要使用meta改成UTF-8；

meta标签用来设置网页的一些元数据，比如网页的字符集、关键字、简介；

meta是一个自结束标签，编写自结束标签时，可以在开始标签中添加 /

1.2 常用标签

h1~h6；逐步减小

一般一个页面中只能写一个h1

一般页面标签只使用h1、h2、h3，h3以后的一般不用

p标签 用p标签来表示一个段落；其中文字，默认会独占一行，并且段与段之间会有间距；

在HTML中，再多的空格浏览器也只会当成一个空格解析，

br标签 可以被使用来表示换行，br标签是一个自结束标签；

hr标签 是一个自结束标签，可以生成一条水平线；

span标签 用来组合行内元素，以便通过样式来格式化它们。

1.3 实体（转义符）

在HTML中，如< >的特殊字符是不能被直接使用的；

需要使用一些特殊符号来表示这些字符，这些特殊字符称为实体，又称为转义字符。

< <

> >

空格 &nbsp；

版权符号 &copy；

更多见 W3School；

1.4 图片

src 设置外部图片路径；

alt 可以设置在图片不能显示时，对图片的描述；

搜索引擎可以通过alt属性来识别不同的图片；

一般开发中除了自适应的页面，不建议使用width和height；

src路径为相对路径，如需返回上一级目录，可以使用 ../

图片的格式

JPEG(JPG)

　　- JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明；

　　- 一般JPEG图片来保存照片等颜色丰富的的图片；

GIF

　　- 支持的颜色少，只支持简单的透明，并支持动态图；

　　- 图片颜色单一或者为动态图时，使用GIF；

PNG

　　- PNG支持的颜色多，并且支持复杂透明；

　　- 可以用来显示颜色复杂的透明图片；

图片的使用原则：

　　- 效果不一致使用效果好的；

　　-效果一致使用小的；

1.5 meta标签

使用meta标签可以设置网页的关键字；

name的值是对content的描述：

还可以用来指定网页的描述：

使用meta可以用来做请求的重定向：

<meta http-equiv="refresh" content="秒数;url-目标路径" />

1.6 xhtml的语法规范

1、HTML中不区分大小写，但是一般都使用小写；

2、HTML中的注释不能嵌套；

3、HTML必须结构完整，成对出现或自结束标签；

4、HTML标签可以嵌套，但是不能交叉嵌套；

5、HTML中的属性必须有值，但是值必须加引号；双引号单引号都行；

1.7 内联框架

在现实开发中，不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索；

1.8 超链接

使用超链接可以从一个页面跳转到另一个页面；

　　- href：指向跳转地址；可以是一个相对路径，也可以是一个完整地址；

　　　　　如果讲链接地址设置为 # ，则会跳转到当前页面顶部；

　　　　　发送电子邮件的超链接 href="mailto:邮件地址"；

　　- a标签中target属性值用来指定打开链接的位置；

　　　　_self 表示在当前窗口中打开（默认值）；

　　　　_blank 表示一个新的窗口中打开链接；

　　　　可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开；

<center></center>

center标签中的内容会默认在页面中居中显示；

1.9 文本标签

<em></em> 表示一段内容中的着重点；（斜体）

<strong></strong> 表示一个内容的重要性；（默认粗体显示）

<i></i>　斜体

<b></b> 加粗

<small></small> 标签中的内容会比它父元素中的文字要小一些（表示一些细则内容）

<cite></cite> 网页中所有加书名号的内容都可以用cite

<q></q> q标签中的内容，浏览器会默认加上引号

<blockquote></blockquote> 表示一个长引用（块级元素）

<sub></sub> 使用sub用来表示下标

<sup></sup> 使用sup来设置上标

<ins></ins> 使用ins表示一个插入内容，会自动添加下划线

<del></del> 使用del来表示删除内容，会自动加删除线

<pre></pre> pre是一个预格式标签，它会保留代码中的格式

<code></code> 专门用来表示代码的

一般用pre和code来表示一段代码

1.10 列表与表格

列表标签

<ul></ul> 无序列表；

<li></li> ul中的列表项；通过type属性可以修改无序列表的项目符号

　　　　　　　　　　 disc 默认值，实心圆点

　　　　　　　　　　 square 实心方块

　　　　　　　　　　　circle 圆圈

<ol></ol> 有序列表；有序列表使用有序序号作为项目符号（块级元素）

　　　　　　　　　　type属性可以指定序号的类型

　　　　　　　　　　1 默认值，阿拉伯数字

　　　　　　　　　　A 大写字母

　　　　　　　　　　a 小写字母

　　　　　　　　　　i 罗马数字

　　　　　　　　　　I 大罗马数字

列表之间可以相互嵌套

定义列表

用来对一些词汇和内容进行定义

<dl>

</dl>

dl用来建立一个定义列表

dt：被定义的内容

dd：对定义内容的描述

长度单位

em em和百分比类似，相对于当前元素的字体大小来计算；

　　1em = 1font-size

表格

<table></table> 用table来创建表格；是一个块元素；

<tr></tr> 用tr表示表格中的一行；

<th></th> 用th来表示表头；

<td></td> 用td来创建一个单元格；

<td colspan="2"></td> colspan可以横向合并单元格；

<td rowspan="2"></td> rowspan可以纵向合并单元格；

border-spacing 可以用来调节单元格之间的距离；

border-collapse: collapse; 可以用来设置表格边框的合并；

隔行变色：

tr:nth-child(odd){

}

<thead></thead> 表头，永远显示在表格头部；

<tbody></tbody> 表身，永远显示在表格中间；

<tfoot></tfoot> 表尾，永远显示在表格尾部

2、CSS基础

2.1 选择器

复合选择器（交集选择器）

　　- 作用：可以选中同时满足多个选择器的元素；

　　- 语法：选择器1选择器2选择器N{ }

　　- 如： span.p3{

　　　　　background-color : yellow;

}

子元素选择器

　　- 作用：选中指定父元素的指定子元素；

　　- 语法：父元素 > 子元素

　　- 如：div > span{

　　　　　background-color : yellow;

}

伪类

专门用来表示元素的一种特殊状态；

比如访问过的超链接，比如普通的超链接，比如获取焦点的文本框等；

当需要为处在这些状态的特殊元素设计样式时，就可以使用伪类；

a:link{ } 正常链接；

a:visited{ } 访问过的链接；由于涉及到用户隐私问题，所以使用visited伪类只能设置字体的颜色；

a:hover{ } 鼠标划过的链接；

a:active{ } 正在点击的链接；

:hover和:active也可以为其他元素设置；

其他伪类

:focus{ } 获取焦点；

:before{ } 指定元素前；

:after{ } 指定元素后；

::selection{ } 选中的元素；（在火狐中需要采用另一种方式编写 ::-moz-selection{ }

伪元素

用来表示元素中的一些特殊的位置；

:first-letter{ } 首字母；

:first-line{ } 首行；

:before{ } 表示元素最前边的部分；一般before需要结合content一起使用，通过content可以向before和after添加一些内容

　　　　例： p::before

　　　　　　　　content:"我会出现在元素的最前边"

　　　　　　　　　color:red;

}

:after{ } 表示元素最后边的部分；

属性选择器

title 当鼠标移入到元素上时，title属性的值将会作为提示属性

　　例： <p title="hello"></p>

　　　　样式设置：

　　　　p[title]{

　　　　}

　　　　p[title="hello"]{

　　　　　　background-color: yellow;

　　　　}　

　　　　为title属性值以ab开头的元素设置背景颜色:

　　　　p[title^="ab"]{

　　　　　　backgro

　　　　为title属性值以c结尾的元素设置背景颜色:

　　　　p[title$="ab"]{

　　　　　　background-color: yellow;

　　　　}

　　　　为title属性值存在c的元素设置背景颜色:

　　　　p[title*="c"]{

　　　　　　background-color: yellow;

　　　　}

子元素的伪类:first-child{ } 选择第一个子标签；

:last-child{ } 选择最后一个子标签；

:nth-child(i){ } 选择第i个子标签；even表示偶数位置，odd表示奇数位置（从1开始计数）;

p:first-of-type{ } 以所有p元素类型计数的第一个子标签;

p:last-of-type{ } 以所有p元素类型计数的最后一个子标签;

p:nth-of-type{ } 以所有p元素类型计数的第n个子标签;

后一个兄弟元素选择器

作用：可以选中一个元素后紧挨着的指定的兄弟元素

语法：前一个 + 后一个

例： span + p{

　　　　background-color: yellow;

　　 }

　　~ 表示后边所有

　　span ~ p{

　　　　background-color: yellow;

　　 }

否定伪类

作用：可以从已选元素中剔除某些元素；

语法： :not(选择器)

例： p:not(.hello)

　　　　background-color： yellow；

　　}

2.2 样式继承

继承

祖先元素的样式会被后代元素继承；

利用继承可以将一些基本样式设置给祖先元素；

并不是所有元素属性都会被继承，比如背景、边框、定位等；

选择器的优先级

使用不同的选择器选中同一个元素，并且设置相同的样式时，

优先级：

内联元素 1000；

id选择器 100；

类和伪类 10；

元素选择器 1；

统配* 0；

继承没有优先级；

当选择器中包含多种选择器时，需要将多种选择器的优先级相加再进行比较，不会超过其最大的数量级；

并集选择器的优先级会单独计算。

当样式最后添加 !important 时，此时样式优先级最高。

2.3 字体

font-style

normal 正常

italic 斜体

oblique 倾斜

font-variant

nomal 默认值

small-caps 以小型大写字母显示

字体单行设置方法

font: small-caps bold italic 60px "微软雅黑";

行高

line-height 设置行高，单位px

　　　　　　文字会默认在行高居中显示

　　　　　　设置为百分比时，会相对于字体大小计算；

　　　　　　传数值则为字体大小的倍数；

font: 30px/50px "微软雅黑"; 在font中也能设置行高为50px；

2.4 盒子模型

盒子模型(box model)

当border-width指定四个值时：上、右、下、左；

当border-width指定三个值时：上、左右、下；

当border-width指定两个值时：上下、左右；

边框样式

none 无边框；

solid 实线边框；

dotted 点状边框；

dashed 虚线边框；

double 双线边框；

内边距

背景会延申到内边距；

内边距的大小会影响盒子的大小；

盒子的大小由内边距，内容，边框宽度同时决定。

外边距

它不会影响可见框大小，而会影响到盒子的位置；

可以为负值；

垂直方向的外边距设置auto不会居中，默认设置为0；

垂直外边距

在网页中垂直方向相邻的外边距会发生外边距的重叠；

所谓外边距的重叠指兄弟元素之间的相邻外边距会取最大值而不是取和；

如果父子元素的外边距重合了，则子元素的外边距会设置给父元素

附：

box-sizing:border-box
设置box-sizing:border-box后，就会将padding、border、margin的值算入width和 height里面去了，使得总元素的宽度 = width的值、总元素的高度 = height。
box-sizing: content-box
其实就是默认的，将padding、border、margin的值不算入width和 height里面去。

2.5 内联元素

内联元素不能设置width和height；

可以设置水平方向的内边距；

内联元素可以设置垂直方向的内边距，但是不会影响页面的布局；

内联元素可以设置边框；

垂直边框不会影响页面布局，水平边框会影响；

内联元素支持水平方向外边距；

相邻水平方向外边距不会重合；

内联元素垂直不支持外边距。

2.6 常用属性

display

inline 内联元素

block 块元素

inline-block 行内块元素

　　　　　　可以使一个元素既有行内元素的特点，又有块元素的特点；

　　　　　　既能设置宽高，又不会独占一行；

none 不显示，元素不会在页面中继续占有位置。

visibility

visible 元素会默认在页面中显示

hidden 元素会隐藏，但会在页面中继续占有位置；

overflow

visible 默认可见

hidden 溢出内容不可见

scroll 内容会被修剪，但会有滚动条，方便查看其余内容

　　　不管有没有溢出，均会加上滚动条；

auto 根据需求自动添加滚动条；

2.7 文档流

文档流处在网页最底层，他表示的是一个页面的位置；

我们创建的元素默认都在文档流里

块元素块元素在文档流中会独占一行，默认自上向下排列；

　　　块元素在文档流中默认宽度是父元素的100%；

　　　块元素在文档流中高度默认被内容撑开；

内联元素内联元素只占自身的大小，默认自左向右排列；

　　　　如果一行不够，则会换到下一行；

内联元素在文档流中宽度和高度默认被内容撑开。

float

当一个元素设置float属性后会立即脱离文档流

元素设置浮动后会尽量向页面的左上或者右上浮动；

直到遇到父元素的边框或者其他浮动元素；

如果浮动元素上面是一个没有浮动的块元素，则不会超过块元素；

浮动元素不会超过其上边的兄弟元素；

浮动的元素不会盖住文字，文字会自动环绕浮动元素周围；

当块元素脱离文档流之后，高度和宽度都会被内容撑开；

内联元素脱离文档流以后会变成块元素；

高度塌陷问题

在页面中元素都有一个隐含属性Block Formatting Context；

简称BFC，默认是关闭的；

开启元素BFC后，元素将会具有：

1、父元素的外边距不会与子元素重叠；

2、开启BFC的元素不会被浮动元素覆盖；

3、开启BFC的父元素可以包含子元素；

如何开启BFC：

1、设置元素浮动；

2、设置元素绝对定位；

3、设置元素display为inline-block；

4、讲overflow设置为一个非visible值；

推荐方式：hidden是副作用最小的方式；

IE6中虽然没有BFC，但是具有另一个隐藏的属性hasLayout，可以通过开启hasLayout来解决；

直接将zoom设置为1即可，zoom表示放大倍数，只在IE中支持。

clear

清除浮动元素对当前元素的影响；

both 表示清除两侧浮动元素的影响；

2.8 定位position

定位指的是将指定元素摆放到页面任意位置；

static 默认值，没有开启定位；

relative 开启元素相对定位；

　　　　相对定位不会脱离文档流；

　　　　相对定位会使元素提升一个层级；

　　　　相对定位不会改变元素的块或内联性质；

absolute 开启元素绝对定位；

　　　　绝对定位会使元素脱离文档流；

　　　　开启绝对定位如果不设置偏移量则元素位置不发生变化；

　　　　绝对定位是相对于开启了相对定位的离他最近的祖先元素进行定位的；

　　　　如果所有祖先元素均没开启，则相对于浏览器进行定位；

　　　　一般开启子元素绝对定位后，都会将其父元素开启相对定位；

　　　　绝对定位会使元素提升一个层级；

　　　　绝对定位会改变元素的性质；内联元素会变成块元素，块元素的宽和高会被内容撑开；

fixed 开启元素固定定位；

　　　固定定位也是一种绝对定位，它的大部分特点和绝对定位一样；

　　　不同的是固定定位永远都会相对于浏览器窗口定位的；

　　　固定定位会固定在浏览器窗口的某个位置，不会随滚动条滚动；

IE6不支持固定定位。

2.9 元素层级、背景设置

元素的层级

　　如果定位元素的层级是一样的，则下边元素会往上盖；

　　通过z-index可以设置元素的层级；

　　对于没有开启定位的元素，不能使用z-index；

　　父元素的层级再高也不会盖住子元素；

背景设置

　　background-image: url(img/2.jpg);

　　如果背景图片小于元素大小，会采用平铺充满元素；

　　background-repeat用于设置背景图片的重复方式；

　　　　repeat 双方向重复；

　　　　no-repeat 不重复；

　　　　repeat-x 沿水平方向重复；

　　　　repeat-y 沿垂直方向重复；

　　background-position用于定位背景图像；

　　background-attachment用来设置背景图像是否随页面一起滚动；

　　　　scroll 随页面滚动

　　　　fixed 不随页面滚动，永远相对于浏览器窗口定位；

CSS-Sprite 雪碧图

2.10 表单

　　密码<input type="password" name="password" />

　　性别<input type="radio" name="gender" value="male" />男

　　　　<input type="radio" name="gender" value="female" />女

　　爱好<input type="checkbox" name="hobby" value="footba" />足球

　　　　<input type="checkbox" name="hobby" value="basketba" />篮球

　　　　<input type="checkbox" name="hobby" value="badminton" />羽毛球

　　　　<input type="checkbox" name="hobby" value="table-tennis" />乒乓球

　　你喜欢的明星<select name="star">

　　　　　　　　　　</optgroup>

　　　　　　　　　　</optgroup>　　　　　　　　　　

　　　　　　　　</select>

　　自我介绍<textarea name="info"></textarea>

</form>

form标签中必须指定一个action属性，指向的是一个服务器地址；

用input来创建一个文本框，它type属性是text；

如果希望表单中数据提交到服务器，需要添加name属性,用户填写的信息会附在url地址的后边以查询字符串的格式传给服务器；

url地址？属性名1=属性值1&属性名2=属性值2；

使用input创建一个提交按钮，它的type属性是submit；

用input来创建一个单选按钮，type属性为radio；

通过name属性进行分组，设为同一组达到单选的效果；

像这种需要用户选择但不需要用户直接填写内容的表单项，还必须指定value属性

用input来创建一个多选框，type属性设置为checkbox；

用select创建下拉列表，用option添加选项；

下拉列表name属性指定给select，value指定给option

注：

如果希望单选或多选设置默认选项，可以在指定选项添加属性checked="checked";

下拉列表同理添加属性selected="selected";

当select中添加属性multiple="multiple"时，下拉列表变为多选下拉列表。

在select中可以使用otpgroup对选项进行分组，用label属性来指定分组名字；

用textarea来创建多行文本域；

用input来创建重置按钮，设置type属性为reset；

用input设置一个单纯的按钮，设置type属性为button；

注：

在表单中可以使用fieldset来为表单项进行分组；

在fieldset中可以使用legend来指定组名；

2.11 Flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}

行内元素也可以使用 Flex 布局。

.box{
  display: inline-flex;
}

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

2.11.1 flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。


.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

它可能有4个值。

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

2.11.2 flex-wrap属性

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。


.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

它可能取三个值。

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

2.12.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。


.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

2.12.4 justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。


.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start（默认值）：左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

2.12.5 align-items属性

align-items属性定义项目在交叉轴上如何对齐。


.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

2.12.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。


.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

该属性可能取6个值。

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

更详细Flex布局内容见：Flex 布局教程：语法篇 - 阮一峰的网络日志

Flex布局示例见：Flex 布局教程：实例篇 - 阮一峰的网络日志

2.13 动画

animation

语法：animation: name duration timing-function delay iteration-count direction;

name（需要绑定到选择器的 keyframe 名称）
duration（完成动画所花费的时间，以秒或毫秒计）
function（动画的速度曲线）
delay（动画开始之前的延迟）
count（动画应该播放的次数）
direction（是否应该轮流反向播放动画）

div {
  width: 100px;
  height: 100px;
  background: #1199ff;
  position: relative;
  animation: mymove 5s infinite;
  -webkit-animation: mymove 5s infinite;
}
@keyframes mymove {
  from {
      left: 0px;
  }
  to {
      left: 200px;
  }
}
@-webkit-keyframes mymove {
  from {
      left: 0px;
  }
  to {
      left: 200px;
  }
}

transition（过渡）

语法：transition: property duration timing-function delay

property（设置过渡效果的 CSS 属性的名称）
duration（完成过渡效果需要多少秒或毫秒）
function（速度效果的速度曲线）
delay（过渡效果何时开始）

div {
  width: 100px;
  height: 100px;
  background: #ee1166;
  transition: width 2s;
  -moz-transition: width 2s;
  /* Firefox 4 */
  -webkit-transition: width 2s;
  /* Safari and Chrome */
  -o-transition: width 2s;
  /* Opera */
}
div:hover {
  width: 300px;
}

transform（变形）

语法：transform: none|transform-functions;
functions提供多种方法，如：skewX(angle)沿着 X 轴的 2D 倾斜转换，translate3d(x,y,z)3D 转换，rotate(angle)2D 旋转，在参数中规定角度等等

/**css*/
ul {
  margin: 20px 0 0 20px;
  padding: 0;
  list-style: none;
}
li {
  float: left;
  width: 100px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  margin-right: 4px;
  background: #ee1166;
  -webkit-transform: skewX(30deg);
}
a {
  text-decoration: none;
  -webkit-transform: skewX(-30deg);
  display: block;
  color: #fff;
}
li:hover{
  background: #008cf4;
}
/**html*/
<ul>
    <li><a href="#">Javan的博客</a></li>
    <li><a href="#">今日头条</a></li>
    <li><a href="#">慕课网</a></li>
    <li><a href="#">开源中国</a></li>
</ul>

posted @ 2020-07-14 17:30 kyrie1 阅读(322) 评论(0) 收藏举报

刷新页面返回顶部

kyrie1

前端入职学习笔记-第一周第二天（HTML与CSS基础）

2.11.1 flex-direction属性

2.11.2 flex-wrap属性

2.12.3 flex-flow

2.12.4 justify-content属性

2.12.5 align-items属性

2.12.6 align-content属性

animation

transition（过渡）

transform（变形）

公告