前端1——入门

发表于 2025-02-15 更新于 2025-06-12 分类于学习，前端阅读次数：

环境

vscode

插件：

HTML CSS Support 写css代码

Live Serve 实时预览html网页

Auto Rename Tag 同步修改标签名称

HTML

html （hyper text markup language）超文本标记语言

网页是又html标签描述出来的

html文件结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">//文档编码格式
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>//文档标题
</head>

<body>//页面内容

</body>

</html>

块元素（block）：块级元素通常用于组织和布局页面的主要结构和内容，例如段落、标题、列表、表格等。它们用于创建页面的主要部分，将内容分隔成逻辑块。

行内元素（inline）：行内元素通常用于添加文本样式或为文本中的一部分应用样式。它们可以在文本中插入小的元素，例如超链接、强调文本等。

常用标签

<h1> </h1>一级标签

<p> </p>段落标签

<b> </b> bold 文本加粗

<u> </u> 下划线

<s> </s> 删除线

无序列表

<ul> <li>1</li> <li>2</li> </ul>

有序列表

<ol> <li>1</li> <li>2</li> </ol>

表格

<table border="1">//边框宽度为1
    <tr>
    	<th>标题1</th>
        <th>标题2</th>
    </tr>
    <tr>
        <td>元素1</td>
        <td>元素2</td>
    </tr>
</table>

html属性基本语法：<开始标签属性名="“属性值”">

<a href="www.zxj-2023.github.io" target="_blank">超链接</a> 超链接，target决定链接打开方式

<br> 换行

<hr> 分割线

<img src="图片路径或链接" alt="代替文本" width="宽度" height="高度"></img> 图片

<div class="名称"></div>块级标签，用于创建页面的布局结构，如导航栏，页眉等

优先级：id>class>标签名

<span></span>包装文本以便对其使用css，js行为或样式等

form标签是html表单的容器

<form action="#">//URL
    <label for="username">用户名：</label>//与span类似，for用于和input的id绑定
    <input type="text" id="username" placehoud="请输入用户名">
	//input其他属性，value：规定input内的值
	<label>密码：</label>
	<input type="password" placehoud="请输入密码">

    <label>性别：</label>
	<input type="radio" name="gender"> 男//单选择 名称一致
    <input type="radio" name="gender"> 女

    <label>爱好：</label>
    <input type="checkbox" name="hobby"> 唱歌//多选
    <input type="checkbox" name="hobby"> 跳舞
    
    <input type="submit">//提交按钮 提交表单数据
</form>

CSS

css cascading style sheets 用于定义网页样式和布局的样式表语言，通过CSS，可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精确的页面设计。

语法：

选择器{

属性1：属性值1；

属性2：属性值2；

}

内部样式表：放在head里面

<head>
    <style>
        p{
            color:bule;
            font-size:16px;//字体大小
            background-color:yellow//背景色
            font-family:'KaiTi'//修改字体，楷体
        }
    </style>
</head>
<body>
    <p>
        内容
    </p>
</body>

外部样式：需在head链接

1
2
3

<head>
    <link rel="stylesheet" href="路径">
</head>

内联样式：标签内

1
2
3

<h1 style="color=red;">
    内容
</h1>

优先级：内联样式>内部样式表>外部样式

css选择器：

元素选择器：标签名

类选择器：.+类名

id选择器：#+id名

通用选择器：*

子代选择器：父+>+子

后代选择器：父+空格+子

相邻元素选择器：1+2 需要满足相邻条件

伪类选择器

css属性：

CSS 参考手册 |菜鸟教程

<h1 style="font: bolder 50px 'KaiTi';">复合属性</h1> font符合属性示例

区分块、行内、行内块元素width和height的差异

通过display转换以上三者(block,inline,inline-block)

1
2
3

.div-inline{
	display:inline;
}

盒子模型：

内容（content）
内边距（padding）：内容与边框之间的空间
边框（border）：盒子的边界上右下左
外边距（margin）：盒子与其他元素之间的空间

浮动：改变元素默认的排列顺序，使网页布局更加灵活多变(letf right)

1
2
3

.son{
	float:left;
}

清除浮动的方式

1
2
3

.father{
	overflow: hidden;
}

定位布局：

相对定位(relative)∶相对于元素在文档流中的正常位置进行定位。

绝对定位(absolute)︰相对于其最近的已定位祖先元素进行定位，不占据文档流。

固定定位(fixed)︰相对于浏览器窗口进行定位。不占据文档流，固定在屏幕上的位置，不随滚动而移动。

.box-relative{
	position: relative;//相对定位
	left:
	right:
	top:
	bottom:
}

JavaScript

JavaScript是一种轻量级、解释型、面向对象的脚本语言。它主要被设计用于在网页上实现动态效果，增加用户与网页的交互性。作为一种客户端脚本语言，JavaScript可以直接嵌入HTML，并在浏览器中执行。与HTML和CSS不同，JavaScript使得网页不再是静态的，而是可以根据用户的操作动态变化的。

客户端脚本:用于在用户浏览器中执行，实现动态效果和用户交互。

网页开发:与HTML和CSS协同工作，使得网页具有更强的交互性和动态性。

后端开发︰使用Node.js，JavaScript 也可以在服务器端运行，实现服务器端应用的开发。

js的导入

内联

1
2
3

<script>
	console.log('hello,world');
</script>

外联

1
2
3

<head>
    <script src="相对路径"></script>
</head>

1 2	console.log('hello,world')//控制台输出 alert('')//内联弹窗

js语句

//变量
var x;//varible
let t=5;//块级作用域
const PI =3.14;//常量
//条件语句
if(){}else{}
//循环，for，while
//函数
function function_name(){
    
    return 返回值;
}

利用html属性触发事件

<body>
    <button onclick="click_event()">
        点击事件
    </button>
    <input type="text" onfocus="focus_event()" onblur="blur_event()">
    <script>
    	function click_event()
        {
            alert('触发点击事件')
        }
        
        function focus_event()
        {
            console.log('获取焦点');
        }
        
        function blur_event()
        {
            console.log('失去焦点');
        }
    </script>
</body>

DOM

当网页被加载时，浏览器会创建页面的文档对象模型，也就是DOM (Document Object Model) .每个HTML或XML文档都可以被视为一个文档树，文档树是整个文档的层次结构表示。

文档节点是整个文档树的根节点。

DOM为这个文档树提供了一个编程接口，开发者可以使用JavaScript来操作这个树状结构。

<body>
    <div id="box1">ID选择器标签</div>
    <div id="box2">类选择器标签</div>
    
    <button>
        点击按钮
    </button>
    
    <scrip>
    	var element_id = document.getElementById('box1');//id唯一，获取的是元素
        console.log(element_id)
		
        var element_class = document.getElementsByClassName('box2')[0];//类不唯一，获取的是数组
        console.log(element_id)
        
        element_id.innerHTML = '修改id标签内容';
        element_id.innerText
        element_id.style.color
        element_id.style.fontSize
        
        //DOM属性绑定事件
        var button_element = document.getElementsByTagName('button');
        
        button_element.onclick = function(){
        	alert('DOM 属性按键触发')
        }
        
        button)element.addEventListener('click',click_event)
        function click_event(){
        	alert('通过addEventListener触发')
        }
    </scrip>
</body>

对象

对象（object）是 JavaScript 语言的核心概念，也是最重要的数据类型

简单说，对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合

var user = {
  name: 'itbaizhan',
  age: '13'
};

对象的每一个键名又称为“属性”（property），它的“键

值”可以是任何数据类型。如果一个属性的值为函数，通常把这个属性称为“方法”，它可以像函数那样调用

var user = {
  getName: function (name) {
    return name;
  }
};
user.getName("itbaizhan") // itbaizhan

参考视频

3小时前端入门教程（HTML+CSS+JS）_哔哩哔哩_bilibili