前端学习笔记

1. HTML标签

概述：html标签用于定义网页中的元素。

<html></html>  <!--定义html文档-->

<head></head>  <!--定义文档信息-->

<h1></h1> ~ <h6></h6>  <!--定义标题，由h1~h6字体大小减小-->

<p></p>  <!--定义段落-->

<div></div>  <!--划分区域-->

<span></span>  <!--定义文档中的节，即单独分离出来的一段-->

<header></header>  <!--定义网页头部-->

<nav></nav>  <!--定义网页导航栏-->

<footer></footer>  <!--定义网页尾部-->

<br>  <!--换行-->

<hr>  <!--水平线-->

<b></b>  <!--定义粗体-->

<a *href="指向的链接" target="页面打开方式"></a>  <!--定义超链接-->

<img *src="路径" alt="加载失败时显示">  <!--定义图片-->

<audio *src="音频路径" controls(显示音频控件) loop(循环播放) autoplay(自动播放) muted(静音播放)></audio>  <!--定义音频-->

<video *src="音频路径" controls(显示视频控件) loop(循环播放) autoplay(自动播放) muted(静音播放)></video>  <!--定义视频-->

<button disabled(禁用)>按钮上显示的文字</button>  <!--按钮-->

<form></form>  <!--定义表单-->

<input type="表单种类">  <!--输入控件-->
<!--type:
button 按钮，不会刷新页面，用于触发JS脚本
text 文本框，用于输入单文本
password 密码框，输入的内容显示为黑点点●●●
radio 单选，name属性相同的单选视为处于同一单选框
checkbox 多选，name属性相同的单选视为处于同一单选框
file 文件选择，用于上传文件
submit 提交按钮，配合JS脚本，form标签使用-->

<select> <!--下拉菜单-->
    <option value="选项一值" selected(默认选中该选项)>选项一显示的文字</option>
    <option value="选项二值">选项二显示的文字</option>
    <option value="选项三值">选项三显示的文字</option>
</select>

<textarea placeholder="文本初始占位值"></textarea> <!--文本域-->

<table border="边框宽度">  <!--表格-->
    <caption>表格标题</caption>
    <thead> <!--表头-->
    <tr> <!--行1-->
        <th>列标题1</th>
        <th>列标题2</th>
    </tr>                       <!--        表格标题         -->
    </thead>                    <!--   列标题1     列标题2   -->
    <tbody>  <!--表格体-->       <!--   列1行2     列2行2    -->
    <tr> <!--行2-->             <!--    列1行3     列2行3    -->
        <td>列1行2</td>          <!--   列1行4     列2行4    -->
        <td>列2行2</td>
    </tr>
    <tr> <!--行3-->
        <td>列1行3</td>
        <td>列2行3</td>
    </tr>
    </tbody>
    <tfoot>  <!--表尾-->
    <tr> <!--行4-->
        <td>列1行4</td>
        <td>列2行4</td>
    </tr>
    </tfoot>
</table>

...

2. CSS

概述：css用于改变网页元素的外观样式。

css引入方式

内嵌式

用style属性直接在元素标签内设定css。例：

<p style="color:red"></p>

定义该标签内字体颜色为红色。

定义style标签

用标签在标签中或者网页尾部设置css属性。例：

<style>
    .a{
      color:red;
    }
</style>

外联式

另写一个文件名.css文件, 然后在标签内使用标签引入。例：

/*文件名.css 内容*/
.a{
  color:red;
}

<head>
    <link rel="stylesheet" href="文件名.css的相对路径">
</head>

css选择器

概述：css选择器用于让css在指定的元素上生效。

选择器优先级：行内样式 > id选择器 > 类选择器 > 标签选择器

标签选择

p{
  color:red;
}

该css会选择所有标签为p的元素。

类名选择

.a{
  color:red;
}

该css会选择所有类名为a的元素。类名为a的元素：<p class="a">

id选择

#a{
  color:red;
}

该css会选择所有id为a的元素。id为a的元素：<p id="a">

css复合选择器

概述：css允许复合选择器选择方法。

子代选择器

.class1 > #id1{...}

包含类名为class1的元素中仅有id为id1的元素会被选中。

后代选择器

p .class1{...}

所有p标签中包含类名为class1或class1的后代(包括子代，子代的子代...)都会被选中。

交集选择器

#id2.class2{...}

所有id为id2并且类名包含class2的元素会被选中。

并集选择器

.class3,#id3{...}

所有id为id3或者类名包含class3的元素会被选中。

css样式汇集

文本属性：

background：

background-color : 背景颜色
background-image : 背景图片
background-size : 背景大小

display：

display : block(块级元素) | inline-block(行内块元素) | inline(行内元素) | flex(弹性) | none(无显示)

-flex：

flex-direction : row(行) | row-reverse | column(列) | column-reverse 块内元素排序方向
flex-wrap : wrap | nowrap 是否允许块内元素换行
justify-content : 主轴上排列方式
center(居中对齐)
flex-start(主轴起始位置布局)
flex-end(主轴末尾位置布局)
space-between(先两边贴边，再平分剩余空间)
space-around(直接平分剩余空间)
space-evenly(子元素空隙相等)

align-items : 交叉轴上排列方式
normal
center(居中对齐)
flex-start(交叉轴起始位置对齐)
flex-end(交叉轴末尾位置对齐)
baseline(项目的第一行文字基线对齐)
stretch(如果项目未设置高度或设为auto，将占满整个容器的高度；如果设置了则无变化)

align-self : 子元素自身排序设置

定位布局：

position : absolute(绝对) | relative(相对) | fixed(固定)
top : 距离顶端长度
bottom : 距离底端长度
left : 距离左端长度
right : 距离右端长度

float : left(将元素浮动到左侧) | right(将元素浮动到右侧) | none | inherit(继承父元素的浮动属性)

css盒子模型：

盒子模型由内而外对应着 content内容区域、 padding内边距、 border边框、 margin外边距

width : 内容区域的宽度
height : 内容区域的高度

padding : 内边距距离
px(上下左右)
px(上下) px(左右)
px(上) px(左右) px(下)
px(上) px(下) px(左) px(右)

border : 同padding 边框宽度

border-radius : 圆角边框度数(同样能给四个角分别设置)
border-color : 边框颜色
border-style : 边框样式

margin : 同padding 外边距距离

box-sizing : border-box(元素宽高包括内边距及边框) | border-content(元素宽高由内容区域宽高决定)

...

伪类与伪元素

概述：伪类与伪元素使css选择对象在特定情况下发生样式改变。

伪类

概述：伪类使元素在特定情况下呈现特定效果。
例：

.a{
  color:orange;
}
.a:hover{
  color:blue
}

当鼠标悬停在包含类名为a的元素时字体颜色由橙色变成蓝色。

此外，伪类还有：: click : 被点击时; checked : 表单元素被选中时; focus : 焦点聚集在表单元素上时
...

伪元素

概述：伪元素使元素中的子元素在特定情况下呈现特定效果。
例：

.a{
  background-color:orange;
}
.a::first-line{
  background-color:blue;
}

包含类名a的元素的第一行文本的背景为蓝色。

此外，伪元素还有：: :selection : 被鼠标选中的内容; :before : 该元素之前插入子元素; :after : 该元素之后插入子元素
...

3. Javascript

概述：一种用于编写网页和应用程序的脚本语言。通常用于与网页交互，修改网页内容、处理用户输
入和操作，以及与后端进行数据交互。

js引入方式

定义script标签

用标签在标签中编写js。例：

<script>
    function fun{
        console.log("关注永雏塔菲谢谢喵!");
    }
</script>

外联式

另写一个文件名.js文件, 然后在标签内使用标签引入。例：

/*文件名.js 内容*/
function fun{
    console.log("关注永雏塔菲谢谢喵!");
}

<head>
    <script src="文件名.js"></script>
</head>

js基本语法

定义变量：

var a = 1;  //可重复定义，默认值为undefined。函数中所有的var声明会被提升至开头，但仅仅是声明被提升。
let b = 2;  //不可提升，不能重复定义，比var更严格
const c = 3;  //定义常量

js在定义变量时无需声明变量类型，程序会自动识别。

定义函数：

function fun(a,b){
    console.log(a+b);  //在控制台输出a+b的值
    return a-b;  //返回a-b的值
}

js中给函数传入数据或返回值时无需声明参数类型，程序会自动识别。

js的调用

直接调用：

function fun1(){
    console.log("koish");
}
function fun2(){
    fun1();
    fun1();
}

其中fun2被调用时，fun1就会被fun2直接调用两次，即在控制台输出两个 koish 。

用html事件调用：

<input type="button" onclick="fun()">

onclick为点击事件，当该button被点击时将调用该函数。

除此之外，html事件还有：
onchange : 元素被改变并失去焦点后触发
oninput : 元素接收到上传信息后立刻触发
onload : 元素加载完成后触发
onmouseover : 鼠标悬停于元素之上时触发
...

koishi

软件园学生在线

前端二黄瑞择

前端学习笔记

1. HTML标签

2. CSS

css引入方式

css选择器

css复合选择器

css样式汇集