其他分享
首页 > 其他分享> > 拉钩教育-阶段三，模块一，笔记

拉钩教育-阶段三，模块一，笔记

作者：互联网

1. <hr /> 标签

作用：水平分割线

支持的属性：align color width(宽度) size(粗细)

说明：<hr/>就是画一个水平分割线，所需样式不多，没必要通过css设置，所以要记一下它支持那些属性，以便快捷的设置它的样式。

2. 列表标签

<ol type="A" start="5">
    <li>第一项</li>
    <li>第二项</li>
</ol>
<ul type="square">
    <li>第一项</li>
    <li>第二项</li>
</ul>

注意：

3. <a> 标签

<a href="http://www.baidu.com" target="_blank">百度搜索</a>

target属性的取值：

  1. _blank ：在新浏览器窗口中打开链接文件

  2. _parent ：将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象 _self 参数一。

  3. _self ：在同一框架或窗口中打开所链接的文档。【默认值】

  4. _top ：在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架。

href属性的值：

  1. 目标网址

    注意：访问其他网站内容，要写上协议，如http://``````https://

  2. js代码

  3. 发邮件

    <a href="mailto:136522@163.com">发邮件</a>

  4. 发送QQ消息

    <a href="tencent://message/?uin=2604472717&Menu=yes">发送QQ消息</a>

4. <table>表格标签

**1. <table>：**定义一个表格

**2. <tr>：**表格中的行 （Table Row）

**3. <td>：**表格中的数据单元格 （Table DataCell）

4. <th> 定义表头，表头字体会被加粗，用法同 <td>

5. <form>表单

1. <form>

2. 表单元素<input>

type属性:

h5新增type属性：

其他属性：

2. 表单元素<select name="***">

​ 子元素 <option value=“XXX”> XXX

​ selected=“selected” 表示默认被选中

3. 表单元素 <textarea>

文本域标签（多行文本框） 可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的height 和 width 属性。

4. 表单元素 <button>：

在form表单中，作用和submit一样

不在form表单中，就是普通按钮

5. H5新增表单元素

注意事项：

  1. 所有表单中的元素都要具有名称（否则提交到服务器之后，服务器无法区识别多个元素之间的不 同）
  2. 单选框要想可以一次只选择一个，要具有相同的name值
  3. 所有的复选框以组为单位，组内的每个复选框都应该具有相同的name值

6. <frame>框架

<frameset rows="10%,*,13%">
    <frame name="top" src="top.html"></frame>
    <frameset cols="15%,*">
        <frame name="left" src="left.html"></frame>
    	<frame name="right" src="right.html"></frame>
    </frameset>
    <frame name="foot" src="foot.html"></frame>
</frameset>

注意：frameset与body只能有一个。

7. <meta>标签

<!-- 设置页面字符集 -->
<meta charset="UTF-8">
<!-- 设置显示窗口宽度未屏幕宽度，针对于移动设备 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--  每个电脑内置的IE版本是不一样的，为了兼容所有的版本以最高级模式渲染文档，也就是任何IE版本都以当前版本所支持的最高级标准模式渲染-->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 5庙后，跳转到指定页面 -->
<meta http-equiv="refresh" content="5; url=http://www.lagou.com">

8. 特殊字符

image-20201223173642894

image-20201223173727816

9. 语义化标签

语义化标签，功能上与div一样，好处是 见名知意，使代码结构清晰。

10 <video>标签

属性：

1. 引入方式

  1. 内敛样式表：在要修上的元素上，通过 style 属性，指定样式。

  2. 嵌入样式表：通过 <style> . . . </style>，标签指定样式。

  3. 引入外部样式表：将样式定义在一个CSS文件中，在HTML中的 <style> 标签内，通过 @import url(“CSS问价路径”); 引入。

    <!-- 如：-->
<style>
	@import url("css/test01.css");
</style>

  4. 连接到外部样式表：通过 <link>标签连接到外部样式

    <link rel="stylesheet" type="text/css" href="css/test01.css" />

关于外部导入css使用与@import的区别?

  1. 加载顺序不同 @import方式导入会先加载html，然后才导入css样式，那么如果网络条件不好，就会先看到没有 修饰的页面，然后才看到修饰后的页面。 如果使用link方式，它会先加载样式表，也就是说，我们看到的直接就是修饰的页面；
  2. @import方式导入css样式，它是不支持javascript的动态修改的。而link支持。

三种样式表的优先级：

满足就近原则 内联 > 嵌入 > 外部

2. css选择器

  1. 元素选择器：直接写元素名

  2. 类选择器：点 加 类型

  3. id选择器：# 加 id名

  4. 选择器组：

    • 两个或多个选择器，用逗号隔开，表示对这些选择器应用相同的样式。 如：div, P
    • 两个类选择器连在一起写，表时选择同时具有这两个类的元素。 如：.class01.class02

  5. 派生选择器：两个或多个选择器，用 空格 或 > 隔开

    用空格隔开，表示后代选择器；> 隔开,表示子代选择器，+ 隔开表示兄弟选择器

    div p{
    /* 表示选择div下的所有p标签 */
}
div>p{
    /* 只选择子标签中的p，孙子辈儿 及之后的 就不选了 */ 
}

3. 伪类选择器

1. <a> 标签的伪类选择器：

  1. :link指定连接未被点击前的样式

  2. :visited指定连接被访问后的样式

  3. :hover指定鼠标悬停时的样式

  4. :active指定连接被激活时（也就是被鼠标点住时）的样式

    注意：必须遵照上述顺序，如：visited如果出现在link之前，那么visited就会失效。

2. 表单中的选择器

:focus指定元素获得焦点时的样式。

3. 通用伪类选择器：

4. 属性选择器

[attribute]选择具有指定属性的元素

[attribute=value]选择指定属性为value的元素

[attribute~=value]选择属性包含value的元素

[attribute | =value]选择属性以value开头的元素

5. 文本属性

指定字体：font-family : value;

字体大小：font-size : value; px：像素 em：倍数

字体加粗：font-weight : normal/bold;

文本颜色：color : value;

文本排列：text-align : left/right/center;

文字修饰：text-decoration : none/underline;

行高：line-height : value;

首行文本缩进：text-indent : value （2em）;

6. 背景属性

CSS3新增

7. 列表属性

list-style-type 属性

无序列表：可取值：none、disc【实心圆、默认】、square【方框】、circle【空心圆】

有序列表：可取值：none、decimal【数字、默认】、decimal-leading-zero【前边补0的数字】、lower-roman、upper-roman【罗马数字大小写】、lower-alpha、upper-alpha【字母大小写】

list-style-image 属性

取值为：url(“图片路径”) ol ul 皆可用。

若 type 和 image 都有指定，则 image 生效。

8. 边框及轮廓

边框属性：

border-width: 20px;

border-style: solid; 取值可以为：solid【实线】 dash【虚线】 dotted【点】 double【双线】

border-color: green;

css3属性

border-radius：10px； 大小超过短边的一半，再大也不会变了，设置为50%可以变成圆形或椭圆

border-shadow：5px 5px 3px 1px gray; 参数分别为 水平偏移量，竖直偏移量，模糊半径，扩散半径，阴影颜色。

轮廓：

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline： 取值与border相同。

输入框获得焦点后，出现的黑色框框就是outline，常设置为none以去除此效果。

9. 盒子模型

​ 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。

margin(外边距) - 盒子与盒子之间的距离

border(边框) - 盒子的保护壳

padding(内边距/填充) - 内填充，盒子边与内容之间的距离

content(内容) - 盒子的内容，显示的文本或图像

image-20201225112135489

10. CSS定位

10.1 默认排布

10.2 浮动

float 属性取值：left，right，none【默认】

作用：设置元素向左或向右浮动，浮动之后的元素会脱离原文档流，原文档流中元素会当它不存在，故而其后元素上移，其父元素高度塌陷。

浮动获得元素 Y 坐标 不会变，只是在左右方向上浮动，浮动之后的元素都为行内块级元素。元素浮动不会对其内部元素产生影响，其内部又是一个新的文档流。

文档流：

​ 指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中按从左到右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。让元素脱离文档流的方法有：浮动和定位。

高度塌陷：

​ 当父元素未指定高度时，其高度由子元素计算，由于浮动的子元素已脱离源文档流，计算时其高度也自然会被忽略。从而造成子元素超出父元素的情况。

解决高度塌陷：

10.3 定位

position属性可取值：absolute【绝对定位】、relative【相对定位】、fixed【固定定位】

  1. 相对定位

    position: relative;
top: 20px;
left: 40px;

    元素相对于其原来的位置进行偏移，top表示向下偏移多少，left表示向右偏移多少，取值可为负数。

  2. 绝对定位

    本元素与已定位的祖先元素的距离

    .parent{
    position: relative;
}
.child{
    position: absolute;
    top: 50px;
    left: 50px;
    bottom: 50px;
    right: 50px;
}

    top left可以指定元素相对于，已定位祖先元素的位置。

    ​ 注意：条件是已定位，即只要出现position即可，不一定要求其值非要是absolute。

    ​ 绝对定位的元素会从原文档流脱离，故它无法撑起其父元素。

    可以同时指定 top、left、right、bottom来指定，元素与已定位父元素各边的间隔，从而确定子元素的大小。

    ​ 注意这样的话，就要关注父元素的大小了，向上面这种，如果父元素中没有其他内容，而子元素又撑不起父元素，父元素大小就为0，从而子元素大小也就是0了，这时如果再指定child的overflow为hidden，那么就什么都显示不出来了。

  3. 固定定位

    position设置为fixed，表示固定定位，该方式与的绝对定位相似，不过参照不再是已定位祖先元素，而是窗口。

    作用：常用作广告区域定位。

z-index属性

如果有重叠元素，使用z轴属性，定义上下层次。

注意：

11. 过渡

过渡：从一个状态到另一个状态，中间的“缓慢”过程；

缺点是，控制不了中间某个时间点。 t

ransition｛1 2 3 4｝

1：过渡或动画模拟的css属性

2：完成过渡所使用的时间（2s内完成）

3：过渡函数。。。 linear【匀速】、ease【先快后慢】。。。

4：过渡开始出现的 延迟时间

示例：

transition: width 2s linear 1s;

当宽度发生变化时，要先延时 1S ，然后在接下来的两秒内宽度均匀的逐渐变化。

目前，css3只开发出部分的过渡属性：

image-20201225164702147

12. 动画

从一个状态到另一个状态，过程中每个时间点都可以控制。

关键帧：@keyframes 动画帧 { from{} to{} } 或者{ 0%{} 20%{}… }

动画属性：animation{ 1 , 2 , 3 , 4 , 5 }

1：动画帧 2：执行时间 3：过渡函数 4：动画执行的延迟（可省略） 5：动画执行的次数

示例：

.pp{
	animation: x 3s linear infinite alternate;  /* infinite：无限次、 alternate：来回执行（交替，一去一回） */
}
@keyframes x{
    0%{ margin-left: 0px; }
    25%{ background: yellowgreen; }
    50%{ background: goldenrod; }
    75%{ background: palevioletred;}
    100%{
        background: coral;
        margin-left: 550px;
    }
}

1. 简介

JS组成：

2. JS基本语法

2.1 数据类型

JS中数据类型包括：Number，String，Boolean（基本数据类型），对象，数组。

1. 自动数据类型转换

数字 + 字符串 数字转为字符串

数字 + 布尔类型 布尔类型化为 0 或 1

字符串 + 布尔类型 布尔类型转化为字符串 “true” 或 “false”

布尔类型 + 布尔类型 先转化为 0 或 1 再进行运算

**总结：**字符串参与的运算优先转化为字符串，布尔类型在非逻辑运算中就是0和1，除非遇到字符串

2. 数据类型转换

3. 注意：

  1. JS中直接为未申明的变量赋值没有问题，但直接访问未申明的变量会报错。

2.2 运算符

  1. === 与 !==

    == 与 != 判断时，是不考虑类型的，=== 与 !== 判断时需要考虑类型

  2. ~~常用作取整

  3. && 短路与，也常用与代替 if 语句（这只有JS中可以吧。）

【之后的笔记都写纸上了，就不上传了】

标签：background,标签,元素,指定,笔记,拉钩,模块,选择器,属性
来源： https://blog.csdn.net/mochen20/article/details/111832380