前端基本知识
计科2301叶蔚琳 2024-10-13 10:33:01 阅读 96
前端入门
一.应用软件
我选择的VS code 和 谷歌浏览器
（两个直接网页搜索官网下正版的就行）最新版本，不要下盗版的！！！
vs code链接：https://code.visualstudio.com/docs/?dv=win64user
谷歌链接：https://www.google.cn/chrome/next-steps.html?statcb=1&installdataindex=empty&defaultbrowser=0
配置：
1.vs code 要去配置扩展 Chinese和open in browser
2.在一个田字格那个标志搜索下载配置
3.记得设置谷歌为默认浏览器
4.网页文件后缀为 .html
二.基本快捷键
ctrl加+或者—可以改变字体大小
ctrl+S 保存内容
ctrl+B 收起文件栏
alt+B 运行
Ctrl+/ 表示添加/删除注释
三.基本标签
1、<! DOCTYPE html> 是文档声明，写在最前面。
2、<html> 根标签，所有代码都要写在根标签里面；一个页面只有一个根标签。
3、<head>头部标签，帮助浏览器编译页面信息，里面的内容不会显示在页面当中。
4、<body>身体标签，显示网页的主题内容，都写在body标签里面的内容在页面中显示。
5、<title>标题标签，是网页的标题，出现在网页的标题栏中。
6、<meta>是一个自结束标签/单标签，用于设置头标签信息。
注意：标签分为单标签/自结束标签和双标签，双标签必须成双成对出现。
例如：双标签<titlt>,<titlt>开始，</title>结束
！！！快速生成基本框架快捷键：先输入一个英文的 ! ，然后按 Enter 或者 Tab;
7.标题标签
h1~h6：表示一级标题到六级标题，字体皆加粗，字体大小依次减小，自带换行效果
！！！h1只能用一次，其他标题无限制次数
8.段落标签(双标签)
标签名：<p></p>
显示效果：独占一行
段落之间有空隙
9.换行和水平线标签(单标签）
换行：<br>
水平线：<hr> (---------------------------------------------------------------------------------)
10.文本格式化标签
一般用左边的的标签，当然右边也可以用。
11.图像标签
1.作用：在网页中插入图片
2.标签：<img src="图片1">
3.!!! <img> 是必须属性，src指定图像位置和名称（可以是图片链接地址或者文件路径）
4.快捷键
直接打出 img ＋ Enter ，VS自动显示<img src=" " alt=" ">
然后在 " " 里面打出 ./ 可以直接选取文件夹中的图片插入（前提是提前把需要的照片挪进了文件夹）
5.属性
实验一下：
可以动手试一下！！！
四.路径
分为绝对路径和相对路径
1.一般使用相对路径
/ 进入文件夹
./ 进入相对路径所在的文件夹
../ 进入上一级的文件夹
../../ 进入上上级文件夹
2.绝对路径
从盘符出发找文件
五.超链接表标签
标签：<a herf="地址链接||文件路径> 标题 </a>
herf是跳转链接属性，是超链接的必须属性
点击蓝色的就可以去往。
如果开发初期不知道链接是什么，可以先填一个#表示空连接： <a herf=" ">空连接</a>
如果要在新窗口打开，则加上： target="_blank" (比如去京东官网点击家具就是进入另外一个网页）
如上所示，新开了一个窗口打开哔哩哔哩。
六.音频标签
1.音乐标签：<audio src=" "></audio>
格式支持MP3，ogg
2.浏览器不会自动播放,需要放置播放窗口
加 controls 属性显示播放控制面板
即： <audio src=" " controls></audio>
另外一种写法: <audio src=" " controls="controls"></audio>
在HTMLS里面，如果属性名和属性值完全一样，可以简写为一个单词。
2.循环播放 loop
<audio src=" " controls loop></audio>
3.自动播放 autoplay
但是一般浏览器会禁止自动播放，需要手动播放
4.视频标签：<video src=" "></video>
格式支持：MP4，Ogg，WebM
5.跟音乐差不多
controls 显示控制面板播放视频
loop 循环播放
autoplay 自动播放（为了用户体验，在静音状态下可以自动播放，所以需要配合muted才能使用autoplay）
7.静音播放 muted
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。