初识前端及一些基本操作

To Shine

已于 2023-04-17 23:55:20 修改

阅读量81

点赞数

分类专栏：前端文章标签：前端 html html5

于 2023-04-12 12:56:57 首次发布

本文链接：https://blog.csdn.net/m0_73282576/article/details/130104119

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

标签语法

标签是啥？其实就是HTML的基本语言，这个有个大概的了解就行。
标签分为单标签和双标签

需要包裹内容的就是双标签

<strong>内容<\strong>
<br>:换行  html不识别enter的换行
<hr>:水平线

HTML基本骨架

<html>
	<head>
		<title>标题</title>
	网页头部
	</head>
	<body>
	网页主体内容
	</body>
</html>

vs code快速生成骨架(好腻害的)

在html文件(.html)中，!(英文)配合enter / tab

比如只敲一个html然后回车vs code也会帮我们生成相应语句

标签的关系

父子关系

<html>
	<head></head>
</html>

兄弟关系

<head></head>
<body></body>

代码格式：

父子关系：子级标签换行，缩进(tab)

兄弟：换行且对齐

注释

<!--...-->
快捷键注释:ctrl + / 
光标放在哪一行，哪一行就加注释

标题标签

h1 ~ h6 双标签，独占一行
h1一般只用一次 新闻标题/logo
h2~h6无使用次数

段落标签

p(双标签) 段落之间有间隙

案例：

在这里插入图片描述

    <p>尤雨溪大学专业并非是计算机专业,在大学期间他学习专业是室内艺术和艺术史,后来读了美术设计和技术的硕士,正是在读硕土期间,他偶然接触到了JavaScript ，从此被这门编程语言深深吸引，开启了自己的前端生涯</p>
    <p>2014年2月,开发了一个前端开发库Vue.js。Vue.s 是构建 Web 界面的 JavaScript 框架,是一个通过简洁的API提供高效的数据绑定和灵活的组件系统</p>

文本格式化标签(strong em常用)

在这里插入图片描述
strong,em,ins,del自带强调

<html>
    <head>
        <title> 标题</title>
    </head>
    <!-- 注释 -->
    <body>
        <strong>strong 加粗</strong>
        <b>b 加粗</b>
        <em>倾斜</em>
        <i>倾斜</i>
        <ins>ins下划线</ins>
        <u>下划线</u>
        <del>del删除</del></del>
        <s>删除</s>
    </body>
</html>

运行结果：

在这里插入图片描述

图像标签

图片放到一个目录里面，按 ./ 可以进行索引(见下图)

<img src="图片的URL">
src 用于指定图像的位置和名称，是<img>的必须属性

在这里插入图片描述

图像标签-属性

alt:以前网速慢，图片可能显示不出来，不想影响网页内容的浏览

<img src="./微信图片_20230411133230.jpg" alt="朋友">
<img src="./微信图片_20230411133230.jpg" title="朋友">
//浏览器缩放图片默认等比例
<img src="./微信图片_20230411133230.jpg" width="朋友">
<img src="./微信图片_20230411133230.jpg" height="朋友">

路径

分类

相对路径:从当前盘符出发查找目标文件(一般用这个来找自己电脑上的文件)

. 表示当前文件所在文件夹
.. 表示当前文件上一级文件文件夹
/ 进入某个文件夹里面

    <img src="./微信图片_20230411133230.jpg" alt="">
    <img src="../线性表思维导图.png" width="600"> 上一级

绝对路径:从盘符出发查找

<img src="E:/笔记/前端/微信图片_20230411133230.jpg" alt="">
还有一种方式:在网上找一张图片，右键保存图片链接
<img src="将链接粘贴到这里面">

绝对路径应用场景:友情链接

超链接标签

<a href=""></a>
href属性值是跳转地址，是超链接的必须属性
<a href="https://www.nyist.edu.cn/">学校官网</a>

在这里插入图片描述

如图，点击这四个字就能条到学校官网

也可以用超链接标签跳转到本地文件(还是用 ./ 来找文件)

<a href="./微信图片_20230411133230.jpg">跳转到图片</a>

但是吧，这样有一个小问题。就是点"学校官网"进行跳转的时候他没有新建一个标签页，想查看原有内容只能手动点箭头返回，还挺麻烦的。

别慌，解决办法他来了

target="_blank 新窗口跳转页面

<a href="./微信图片_20230411133230.jpg" target="_blank">跳转到图片</a>

就是在前一个尖括号里面加一个 target=“_blank” (这个敲个tar 然后回车会有提醒的)

tips:如果不知道超链接的跳转地址，href属性写#，表示空链接，不跳转

如果在一个段落里面加超链接标签,先按一个空格，然后光标往前移，让光标后有一个空格此时在按 a(这时候才会有提示，直接回车)

音频标签

在这里插入图片描述

写法如下：

<audio src="./忘记时间.flac">忘记时间</audio>
俩括号中间写文字好像没啥用

但是点进去浏览器不会自动播放，所以加个控制面板(同样是在前面那个<>里面加的)

<audio src="./忘记时间.flac" controls></audio>

效果如图:

在这里插入图片描述

循环播放写法

    <audio src="./忘记时间.flac" controls loop></audio>

自动播放

浏览器其实是把这个功能禁止了的，为了良好的用户体验

    <audio src="./忘记时间.flac" controls loop autoplay></audio>

tips:

在html5里如果属性名和属性值完全一样，可以简写为一个单词

<audio src="./忘记时间.flac" controls="controls"></audio>

视频标签

在这里插入图片描述

写法和上面一样   
<video src="./第六章 贪心算法（一）.mp4" controls></video>

<video src="./第六章 贪心算法（一）.mp4" controls loop muted autoplay></video>
muted 和 autoplay 配合使用
无muted 视频不会自动播放