前端学习1

学习视频来自B站：
https://www.bilibili.com/video/BV1Kg411T7t9?p=11&spm_id_from=pageDriver&vd_source=51d15aaa7e2e1f72f87356e06140ae6b

1、web标准

在这里插入图片描述
HTML决定了框架与结构，CSS决定样式，JavaScrpt使网页有动态效果等

2、HTML：超文本标记语言

（1）构建基本网页
使用记事本构建html文件：

新建一个txt文件，修改后缀名为.html
在这里插入图片描述

（2）HTML骨架结构规则：
<html>与</html>表示网页主体
<head>与<body>表示网页的头与身体

HTML骨架标签：

3、VS Code的使用

新建网页并添加骨架：
新建网页后缀名设置为html，输入感叹号后回车，自动添加骨架代码
在这里插入图片描述
白色圆点表示没有保存

安装插件 open in brower

之后再在新建的文件中右键可以看到使用默认浏览器打开的标签，快捷键为alt+b

4、HTML语法规则

（1）注释
快捷键：ctrl+/
(2)标签的构成
双标签：开始标签+内容+结束标签
有些特殊标签为单标签，无法包裹内容，例如<br>用来换行

标签的关系可以分为兄弟标签（并列关系）与父子标签（嵌套关系）

1 标题标签：
h系列标签
在这里插入图片描述
只有六级标题标签
在VS中只输入h，不用输入：<h1></h1>会自动形成标题标签

例如：选中标题标签中的数字3，CTRL+D多次，可以同时修改选中的内容为4
ctrl+d连选相同的数字
在这里插入图片描述

2 段落标签：p

<p>段落标签</p>
1

VS中可以自动换行，在查看工具栏

3 换行标签
br标签
4 横线标签
hr
--------------------------------------------------------------------
5 文本格式化标签
在这里插入图片描述
在代码编写过程中，如果要突出重要性的强调语境，一般是使用右边的代码，这样其他程序员或者自己再看代码时，就能知道这里的强调语境。但是左右两种代码在网页上的表现样式是完全一样的。
----------------------------------------=------------------
6 媒体标签

在这里插入图片描述
src是标签属性，表示路径和图片名。./表示当前文件夹，如果图和网页文件在同一个路径，可以使用./也可以直接添加图片文件名。如果图和文件不在一个文件夹中，使用文件的路径+文件全名的方式

alt是替换文本，当图片不能正常显示的时候，就会显示alt中的文本

title是提示属性，当用户的鼠标悬停在图片上时，就会显示悬停的文字
width和height可以控制图片的高和宽，只设置一个会自动等比例缩放

相关阅读:
【PAT B-1038】统计同成绩学生
【硬件产品经理】汽车A样设计
Hexo博客进阶：为 Next 主题的 Hexo 博客内容添加文章过期/时效提示
vscode electron安装环境
《软件工程导论（第六版）》张海藩复习笔记
Python采集某网站数据实现简单可视化效果, webpack Js逆向解密
Python读取TCP的4字节浮点数
记录一下 ThinkPHP 使用JWT进行身份验证
javaScript 中的宏任务、微任务
计算机服务器中了mkp勒索病毒如何解密，mkp勒索病毒解密流程

原文地址：https://blog.csdn.net/weixin_43416590/article/details/125362373