川川Rookie自学前端笔记

川川Rookie

已于 2023-07-23 21:49:19 修改

阅读量140

点赞数 1

文章标签：前端笔记

于 2023-07-23 00:11:11 首次发布

本文链接：https://blog.csdn.net/Sunday_Jzh/article/details/131874112

版权

这篇博客详细介绍了HTML的基础内容，包括HTML文档结构、标题、段落、文本格式化、图片、路径、音频、视频、超链接、表格、表单等元素的使用，并通过多个案例帮助读者理解和实践。

摘要由CSDN通过智能技术生成

一、HTML基础内容

1.HTML文档基础结构

<!--html语言中的注释-->
<!doctype html><!--html文档的文档类型声明：这是一个html的文档，版本是5-->
<html><!--html标签：html文档正式开始-->
<head><!--html文档的头部区域开始，主要是用来说明html文档的一些相关属性或者设置-->
	<meta charset="utf-8"><!--meta标签：元信息标签，用来给网页添加一些相关信息或设置。charset:字符集。指定此网页的编码为UTF-8-->
	<!--常见的编码：国际化——utf-8,中文编码——GBK-->
	<title>无标题文档</title><!--title标签：设定此网页的标题-->
</head><!--html文档的头部区域结束-->
 
<body><!--body标签：表示html文档的主体区域开始，对应浏览器的对应呈现窗口-->
</body><!--body标签：表示html文档的主体区域结束-->
</html><!--html标签：html文档正式结束-->

HTML语法结构

1种符号：<> 所有的HTML语言diamante都必须被括在其中

2种标签格式：

双标签：成对出现。<标签名>开始，</标签名>结束。如：<title>无标题文档</title> 通常用于包含内容的元素。

单标签：只存在开始标签，不需要结束。如：<meta charset="utf-8"> 表示无内容元素。
3个组成部分：标签、属性、值：

语法结构：<标签名属性=“值” 属性=“值”>...</标签名> 如：<meta charset="utf-8">

标签可以拥有属性，属性和值都卸载开始标签的尖括号中。
标签和属性之间用空格分割，多个属性之间也用空格分隔。
如果属性有对应的值，则属性和值之间是等式关系，且值需要写在英文引导中。
HTML编写规范

标签名和属性都使用小写
属性的值用双引号括起来
标签的使用符合嵌套规则
这里就简单的借用别人写好的复制过来给大家看，我没有准备开始部分，原文出处：https://blog.csdn.net/pxhdky/article/details/81268125

2.HTML标题标签

标题标签：h1~h6 双标签

<!--作者：川川Rookie-->
<!--时间：2023.07.22-->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<!--    特点：独占一行 文字都有变大 逐渐变小 -->
    <h1>欢迎来到前端世界</h1>
    <h2>欢迎来到前端世界</h2>
    <h3>欢迎来到前端世界</h3>
    <h4>欢迎来到前端世界</h4>
    <h5>欢迎来到前端世界</h5>
    <h6>欢迎来到前端世界</h6>
</body>
</html>

他就相当于我们平时看书的目录，运行看看效果：

3.HTML段落标签

段落标签：就是我们平时看到的一篇文章分成几段，用小写p表示双标签

<!--作者：川川Rookie-->
<!--时间：2023.07.22-->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<!--    换行标签 br是强制换行并且没有标签间隔 p标签有间隔-->
    <h1>这是文章标题</h1>
<!--    hr 水平分割线 单标签-->
    <hr>
    <p>阿卡贝拉（意大利：Acappella )即无伴奏合唱。<br>
    其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例：
        阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》</p>
    <p>“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带来不一样的风格。视频示例： 有一种悲伤（翻唱）-《A Kind of Sorrow》</p>
</body>
</html>

你想把谁分成一段，就在这段文字的开头与结尾分别加上p标签，运行看看效果：

4.HTML文本格式化标签

格式化标签：就是强调语意用的标签，简单知道就好。双标签 <br>单标签

<!--作者：川川Rookie-->
<!--时间：2023.07.22-->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <b>加粗标签 strong</b>
    <u>下划线 ins</u>
    <i>倾斜 em</i>
    <s>删除线 del</s>
</body>
</html>

<br>是强制换行，它不同于p是他没有标签之间的间隔，小b和strong都可以使文字加粗，如果是强调语意strong更合适，其他的依此类推，运行看看效果：

5.HTML图片标签

图片标签：img 单标签

<!--作者：川川Rookie-->
<!--时间：2023.07.22-->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<!--src属性名 ""属性值 alt属性图片不显示的时候显示文字 title属性鼠标放到相对应的地方显示文字 width属性控制图片宽度 height属性控制高度-->
 <img src="image/cat.gif" alt="这是一只猫" title="这是一只猫" width="100px"><br>
 <img src="image/dog.gif" alt="这是一只狗" title="这是一只狗" width="50px">
</body>
</html>

alt属性：当图片不显示就会显示设置的属性值，title属性：鼠标停留在图片上会显示设置的属性值，width属性：设置图片宽度，height属性：设置图片高度，运行看看效果：

因为我设置了宽度所以图片变小了，自己可以尝试修改。

6.路径

6.1绝对路径（了解就好）

<!--作者：川川Rookie-->
<!--时间：2023.07.22-->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<!-- 页面需要加载图片，需要找到对应的图片 从盘符出发D:\day01\ima