前端基础---HTML笔记汇总一

HTML定义

HTML超文本标记语言------HyperText Markup Language。

超文本是什么？链接
标记是什么？标记也叫标签，带尖括号的文本

标签分类

单标签:只有开始标签，没有结束标签(<br>换行 <hr>水平线 <img> 图像标签)
双标签:成对出现的标签(但凡需要包裹内容的都是双标签因为需要包裹内容需要开头和结束 )
标签成对出现，中间包裹内容
<>里面放英文字母(标签名)
结束标签比开始标签多/

HTML基本骨架

html：整个网页
head：网页头部，用来存放给浏览器看的信息，例如CSS

- title：网页标题

body：网页主体，用来存放给用户看的信息，例如图片、文字

VS Code快速生成骨架：

在HTML文件(.html)中，!(英文)配合Enter/Tab键

标签关系

作用：明确标签的书写位置；让代码格式更整齐

父子关系（嵌套关系）

兄弟关系（并列关系)

* 代码格式

- 父子关系：子级标签换行且缩进（Tab键）
- 兄弟关系：兄弟标签换行要对齐

注释

作用 :对代码的解释说明,能提高代码的可读性.(学习和工作中,关键代码都需要加注释)

html 复制代码

<!-- 这是注释，不显示在浏览器 -->

在 VS Code 中，添加 / 删除注释的快捷键：Ctrl + / .

标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。

标签名:h1~h6(双标签)

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    
    <!-- h1标签在一个网页中只能使用一次，用来放新闻标题或者网页logo -->
    <!-- h2~h6没有使用次数限制 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

显示特点：

• 文字加粗

• 字号逐渐减小

• 独占一行（换行）

tips:

h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo
h2 ~ h6 没有使用次数的限制

段落标签

一般用在新闻段落、文章段落、产品描述信息等等

标签名：p（双标签）

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    
    <!-- 段落之间有空隙 -->
    <!-- p标签 段落的意思 -->
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
</body>

</html>

显示特点：

• 独占一行

• 段落之间存在间隙

换行和水平线

换行：<br>（单标签）

浏览器不识别代码中的 Enter 键换行

水平线：<hr>（单标签）

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- br强制换行 -->
    <p>天苍苍野茫茫， <br>我是隔壁的老王</p>
    <!-- hr 水平线 了解即可 -->
    <hr>
</body>

</html>

文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、++下划线++ 、删除线等。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- strong 加粗 -->
    <!-- i经常用于制作小图标  icon-->
    <!-- del 删除线 -->

    <strong>加粗</strong>
    <b>加粗</b>

    <em>倾斜</em>
    <i>倾斜</i>

    <ins>下划线</ins>
    <u>下划线</u>

    <del>删除线</del>
    <s>删除线</s>
</body>
</html>

strong、em、ins、del 标签自带强调含义（语义）。

important:

strong 加粗
i经常用于制作小图标 icon
del 删除线

*图像标签

作用：在网页中插入图片.

html 复制代码

<img src="图片的URL">

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

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 元素>>>标签 -->
    <!-- 属性alt src... -->
    <!-- 属性值 引号里面的内容 -->
    <!-- 属性='属性值'   键值对 -->

    <!-- src 图片的路径 -->
    <img src="tupian.jpg">
</body>

</html>

图片标签的其他属性

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片其他属性</title>
</head>

<body>
    <!-- src 图片路径 -->
    <!-- alt图片加载失败时，替换的文本 -->
    <!-- title 鼠标悬停在图片上显示的文本 -->
    <!-- width 宽度，当写一个值的时候，另一个会等比缩放 -->
    <!-- height高度，当写一个值的时候，另一个会等比缩放 -->
    <img title='图片' src="tupian.jpg" alt="这是一张图片" width="500" height="500">

    <h1 title="真不错">我</h1>

    <!-- title是属性时，属性值是：鼠标悬停在图片上显示的文本 -->
    <!-- title是标签/元素时，title是网页名 -->
</body>

</html>

属性名="属性值"
属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

路径

路径指的是查找文件时，从起点到终点经历的路线

路径分类：

相对路径：从当前文件位置出发查找目标文件

绝对路径：从盘符出发查找目标文件(Windows 电脑从盘符出发 Mac 电脑从根目录出发)

*相对路径---从当前文件位置出发查找目标文件

. /表示当前文件所在文件夹
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
.. /表示当前文件的上一级文件夹
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
不能跨盘符找文件

绝对路径 -从盘符出发查找目标文件

应用场景:友情链接

Windows 电脑从盘符出发
Mac 电脑从根目录（/）出发

<img src="C:\images\tupian.jpg">

Windows 默认是 \ ，其他系统是 /，建议统一写为 /
文件的在线网址：https://www.itheima.com/images/logo.png

*超链接

作用：点击跳转到其他页面。

href 属性值是跳转地址，是超链接的必须属性。

超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现新窗口打开页面

链接分类:

外部链接,注意要添加协议(https://等)

html 复制代码

<!-- 跳转到百度 -->
<a href="https://www.baidu.com">百度</a>

内部链接,注意路径问题

html 复制代码

 <a href="./04.段落标签.html">跳转到段落标签</a>

空链接 #(或者空格) 点击完会回到页面顶部(不确定跳转地址)

html 复制代码

    <a href="#">空链接</a>
    <h1>跳转</h1>
    <h2>跳转</h2>
    <h2>跳转</h2>
    <h2>跳转</h2>
    <h2>跳转</h2>
    <h2>跳转</h2>
    <h2>跳转</h2>
    <h2>跳转</h2>
    <h2>跳转</h2>
    <h2>跳转</h2>
    <h2>跳转</h2>
    <h2>跳转</h2>
    <h2>跳转</h2>
    <h2>跳转</h2>

死链接 点击后没有任何效果(适用于不确定跳转地址)

html 复制代码

 <a href="javascript:;">死链接</a>

*图片标签

html 复制代码

<a href="https://www.baidu.com">
        <img src="./tupian.jpg" alt="">
</a>

下载

下载
在新窗口打开页面

传智播客

 图片标签

音频标签

html 复制代码

<audio src="音频的 URL"></audio>

常见属性:

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- src 路径 -->
    <!-- controls 控制面板-->
    <!-- loop 循环播放 -->
    <!-- autoplay 自动播放 一般浏览器会禁止自动播放 -->
    <!-- 书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词 -->
    <audio src="./media/music.mp3" controls loop autoplay></audio>

    <!-- 以下是为了以前照顾兼容性写法 现在不需要了 -->
    <audio>
        <source src="./media/music.mp3">
        <source src="./media/music.ogg">
        <source src="./media/music.wav">
        你的浏览器版本也太low了，赶紧更新一个吧 <a href="">点我啊</a>
    </audio>
</body>

</html>

视频标签

html 复制代码

<video src="视频的 URL"></video>

常见属性:

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- muted 静音 可以用来设置视频的自动播放 搭配 autoplay -->
    <video src="./media/vue.mp4" controls loop autoplay muted width="500"></video>
</body>

</html>

案例一:

目的:制作如下网页(tips:网页制作思路：从上到下，先整体再局部，逐步分析制作

分析内容 → 写代码 → 保存 → 刷新浏览器，看效果)

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>尤雨溪</h1>
    <hr>
    <p>尤雨溪，前端框架<a href="javascript:;">Vue.js</a>的作者，<a href="javascript:;">HTML5</a>版Clear的打造人，独立开源开发者。曾就职于Google
        Creative Labs和Meteor
        Development
        Group。由于工作中大量接触开源的项目<a href=" ">JavaScript</a>，最后自己也走上了开源之路，现全职开发和维护<a href="javascript:;">Vue.js</a>。
    </p>

    <img src="./photo.jpg" alt="">

    <h2> 学习经历</h2>
    <p>尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，任职于纽约Google Creative Lab。
    </p>

    <h2>主要成就</h2>
    <p>
        尤雨溪<strong>大学专业并非是计算机专业</strong>，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士， <ins>正是在读硕士期间，他偶然接触到了JavaScript
            ，从此被这门编程语言深深吸引，开启了自己的前端生涯 。</ins>
    </p>

    <p>
        2014年2月，开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 JavaScript 框架，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。
    </p>

    <h2>社会任职</h2>
    <p>
        2016年9月3日，在南京的JSConf上，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队，尤雨溪称他将以技术顾问的身份加入Weex团队来做 Vue 和 Weex 的 JavaScript runtime
        整合，目标是让大家能用
        Vue 的语法跨三端。
    </p>
</body>

</html>

案例二

目的:实现图片页面跳转(tips:实现图片页面跳转需要用到img标签和a标签两者结合即可完成)

解答详情步骤:

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
  <!-- 可以先建一个超链接页面,里面先放空链接(因为此时我们还不确定跳转地址) -->
    <a href="#">搜索</a>
    <a href="#">目录</a>
    <a href="#">详情</a>
    <a href="#">登录</a>
</body>

</html>

先建一个超链接页面,里面先放空链接(因为此时我们还不确定跳转地址,浏览器显示画面如下,此时我们点击链接没有任何变化

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="#"><img src="图片路径"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
</body>

</html>

再建一个搜索图片界面,之后我们返回第一个建的页面,将图片界面文件路径加到刚才我们填的空链接(<a href="#">搜索</a>),点击发现能够实行跳转

3.再建一个目录图片界面,之后我们返回第一个建的页面,将目录图片文件路径加到刚才我们填的空链接(<a href="#">目录</a>),点击发现能够实行跳转(剩下两个界面也是如此)

完整代码如下(需要分为五个文件,第一个文件用来做跳转页面首页,剩下四个分别是各自的超链接图片标签):

文件一:

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="./work2.html" target="_blank">搜索</a>
    <a href="./work3.html" target="_blank">目录</a>
    <a href="./work4.html" target="_blank">详情</a>
    <a href="./work5.html" target="_blank">登录</a>
</body>

</html>

文件二:

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="#"><img src="../images/index.png"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
</body>

</html>

文件三:

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="#"></a>
    <a href="#"><img src="../images/list.png"></a>
    <a href="#"></a>
    <a href="#"></a>

</html>

文件四:

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"><img src="../images/details.png"></a>
    <a href="#"></a>

</body>

</html>

文件五:

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"><img src="../images/login.png"></a>

</body>

</html>

大家快去试试吧!