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

HTML定义

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

  • 超文本是什么? 链接
  • 标记是什么? 标记也叫标签,带尖括号的文本

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

HTML基本骨架

  • html:整个网页
  • head:网页头部,用来存放给浏览器看的信息,例如CSS
    • title:网页标题
  • body:网页主体,用来存放给用户看的信息,例如图片、文字

VS Code快速生成骨架

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

标签关系

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

  • 父子关系(嵌套关系)

  • 兄弟关系(并列关系)

  • * 代码格式
    • 父子关系:子级标签换行且缩进(Tab键)
    • 兄弟关系:兄弟标签换行要对齐

注释

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

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

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

标题标签

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

标签名:h1~h6(标签)

<!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:

  1. h1 标签在一个网页中只能用一次,用来放新闻标题网页logo
  2. 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>标签)

<!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>
文本格式化标签

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

<!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:

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

*图像标签

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

<img src="图片的URL">

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

<!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>
图片标签的其他属性

<!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>
    <img src="./images/tupian.jpg" alt="">
</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>
    <img src="../images/tupian.jpg" alt="">
</body>

</html>
  • 不能跨盘符找文件
绝对路径 -从盘符出发查找目标文件

应用场景:友情链接

  • Windows 电脑从盘符出发
  • Mac 电脑从根目录(/)出发

<img src="C:\images\tupian.jpg">
  • Windows 默认是 \ ,其他系统是 /,建议统一写为 /
  • 文件的在线网址:https://www.itheima.com/images/logo.png

*超链接

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

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

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

链接分类:
  • 外部链接,注意要添加协议(https://等)
<!-- 跳转到百度 -->
<a href="https://www.baidu.com">百度</a>
  • 内部链接,注意路径问题
 <a href="./04.段落标签.html">跳转到段落标签</a>
  • 空链接 #(或者空格) 点击完会回到页面顶部(不确定跳转地址)
    <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>
  • 死链接 点击后没有任何效果(适用于不确定跳转地址)
 <a href="javascript:;">死链接</a>
  • *图片标签
<a href="https://www.baidu.com">
        <img src="./tupian.jpg" alt="">
</a>
  • 下载
<a href="下载文件路径">下载</a>
  • 在新窗口打开页面
 <a href="https://www.itcast.cn" target="_blank">传智播客
 </a>
 <a href="图片路径" target="_blank">图片标签
 </a>

音频标签

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

常见属性:

<!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>

视频标签

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

常见属性:

<!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:网页制作思路:从上到下,先整体再局部,逐步分析制作

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

<!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标签 两者结合即可完成)

解答详情步骤:

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

<!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>

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

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

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

文件一:

<!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>

文件二:

<!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>

文件三:

<!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>

文件四:

<!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>

文件五:

<!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>

大家快去试试吧!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/95996.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Facebook message tag 使用攻略

Messenger 讯息传不出去&#xff1f;无法发送FB 讯息给非好友&#xff1f; 2020年3月&#xff0c;Facebook 为了防止用户被过多的推广或垃圾讯息困扰而更新使用条款&#xff0c;现在商家要用FB传讯息给所有人&#xff08;包括非好友&#xff09;&#xff0c;应该使用 Facebook …

C语言每日一练------Day(5)

本专栏为c语言练习专栏&#xff0c;适合刚刚学完c语言的初学者。本专栏每天会不定时更新&#xff0c;通过每天练习&#xff0c;进一步对c语言的重难点知识进行更深入的学习。 今日练习题关键字&#xff1a;错误的集合 密码检查 &#x1f493;博主csdn个人主页&#xff1a;小小u…

HTTP:http上传文件的原理及java处理方法的介绍

为了说明原理&#xff0c;以下提供一个可以上传多个文件的例子&#xff0c;html页面代码如下&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title>http upload file</title> </head> <body>…

字节一面:你能讲一下跨域吗

前言 最近博主在字节面试中遇到这样一个面试题&#xff0c;这个问题也是前端面试的高频问题&#xff0c;作为一名前端开发工程师&#xff0c;我们日常开发中与后端联调时一定会遇到跨域的问题&#xff0c;只有处理好了跨域才能够与后端交互完成需求&#xff0c;所以深入学习跨域…

SpringMVC-学习笔记

文章目录 1.概述1.1 SpringMVC快速入门 2. 请求2.1 加载控制2.2 请求的映射路径2.3 get和post请求发送2.4 五种请求参数种类2.5 传递JSON数据2.6 日期类型参数传递 3.响应3.1 响应格式 4.REST风格4.1 介绍4.2 RESTful快速入门4.3 简化操作 1.概述 SpringMVC是一个基于Java的Web…

我与GPT的一次关于Orb-SLAM3源码(包括2)的深入对话

目录 一、前言二、关于Orb-SLAM3的代码结构三、关于system3.1 关于摄像头初始化3.2 关于摄像头模型化3.2关于初始化 四、关于ORBVocabulary五、关于优化六、小结 一、前言 Orb-SLAM2或者3是一个开源的视觉SLAM框架&#xff0c;里面的一些思想&#xff0c;一些软件工程的设计理…

Java设计模式-状态模式

1.概述 定义&#xff1a; 对有状态的对象&#xff0c;把复杂的“判断逻辑”提取到不同的状态对象中&#xff0c;允许状态对象在其内部状态发生改变时改变其行为。 【例】通过按钮来控制一个电梯的状态&#xff0c;一个电梯有开门状态&#xff0c;关门状态&#xff0c;停止状…

验证go循环删除slice,map的操作和map delete操作不会释放底层内存的问题

目录 切片 for 循环删除切片元素其他循环中删除slice元素的方法方法1方法2&#xff08;推荐&#xff09;方法3 官方提供的方法结论 切片 for 循环删除map元素goalng map delete操作不会释放底层内存go map原理源码CRUD查询新增 操作注意事项map元素是无法取址的map是线程不安全…

亚马逊鲲鹏系统是怎么操作测评的

亚马逊鲲鹏系统可以注册亚马逊买家号、养号、下单留评等&#xff0c;是一款功能比较齐全的测评软件&#xff0c;具体操作如下&#xff1a; 首先我们需要先准备好买家账号&#xff0c;账号可以直接去购买已经注册好了的账号&#xff0c;也可以准备好账号所需要的一些邮箱、ip、…

RealVNC配置自定义分辨率(AlmaLinux 8)

RealVNC 配置自定义分辨率&#xff08;AlmaLinux8&#xff09; 参考RealVNC官网 how to set up resolution https://help.realvnc.com/hc/en-us/articles/360016058212-How-do-I-adjust-the-screen-resolution-of-a-virtual-desktop-under-Linux-#standard-dummy-driver-0-2 …

docker部署nginx,部署springboot项目,并实现访问

一、先部署springboot项目 1、安装docker&#xff1a; yum install docker -y 2、启动docker&#xff1a; service docker start 重启&#xff1a; service docker restart 3、查看版本&#xff1a; docker -v 4、使设置docker.service生效&#xff08;路径&#xff1a;…

国产自主可控C++工业软件可视化图形架构源码

关于国产自主代替的问题是当前热点&#xff0c;尤其是工业软件领域。 “一个功能强大的全自主C跨平台图形可视化架构对开发自主可控工业基础软件至关重要&#xff01;” 作为全球领先的C工业基础图形可视化软件提供商&#xff0c;UCanCode软件有自己的思考&#xff0c;我们认…

uniapp 开发小程序,封装一个方法,让图片使用线上地址

1.在main.js文件中&#xff0c;添加以下代码&#xff1a; 复制使用&#xff1a; // 图片使用网络地址 Vue.prototype.localImgSrc function(img){//项目的地址域名&#xff0c;例如百度return "https://baidu.cn/static/index/images/" img; }2.在页面中直接使用&…

SSM - Springboot - MyBatis-Plus 全栈体系(二)

第一章 Maven 三、Maven 核心功能依赖和构建管理 1. 依赖管理和配置 Maven 依赖管理是 Maven 软件中最重要的功能之一。Maven 的依赖管理能够帮助开发人员自动解决软件包依赖问题&#xff0c;使得开发人员能够轻松地将其他开发人员开发的模块或第三方框架集成到自己的应用程…

MongoDB实验——在MongoDB集合中查找文档

在MongoDB集合中查找文档 一、实验目的二、实验原理三、实验步骤1.启动MongoDB数据库、启动MongoDB Shell客户端2.数据准备-->person.json3.指定返回的键4 .包含或不包含 i n 或 in 或 in或nin、$elemMatch&#xff08;匹配数组&#xff09;5.OR 查询 $or6.Null、$exists7.…

MySQL事物和存储引擎

事务 一、MySQL事务的概念 事务是一种机制、一个操作序列&#xff0c;包含了一组数据库操作命令&#xff0c;并且把所有的命令作为一个整体一起向系统提交或撤销操作请求&#xff0c;即这一组数据库命令要么都执行&#xff0c;要么都不执行。 事务是一个不可分割的工作逻辑单…

基于ssm+vue汽车售票网站源码和论文

基于ssmvue汽车售票网站源码和论文088 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让…

基于RabbitMQ的模拟消息队列之三——硬盘数据管理

文章目录 一、数据库管理1.设计数据库2.添加sqlite依赖3.配置application.properties文件4.创建接口MetaMapper5.创建MetaMapper.xml文件6.数据库操作7.封装数据库操作 二、文件管理1.消息持久化2.消息文件格式3.序列化/反序列化4.创建文件管理类MessageFileManager5.垃圾回收 …

时序预测 | MATLAB实现基于QPSO-BiLSTM、PSO-BiLSTM和BiLSTM时间序列预测

时序预测 | MATLAB实现基于QPSO-BiLSTM、PSO-BiLSTM和BiLSTM时间序列预测 目录 时序预测 | MATLAB实现基于QPSO-BiLSTM、PSO-BiLSTM和BiLSTM时间序列预测效果一览基本描述程序设计参考资料 效果一览 基本描述 1.Matlab实现QPSO-BiLSTM、PSO-BiLSTM和BiLSTM神经网络时间序列预测…

RISC-V 中国峰会 | OpenMPL引人注目,RISC-V Summit China 2023圆满落幕

RISC-V中国峰会圆满落幕 2023年8月25日&#xff0c;为期三天的RISC-V中国峰会&#xff08;RISC-V Summit China 2023&#xff09;圆满落幕。本届峰会以“RISC-V生态共建”为主题&#xff0c;结合当下全球新形势&#xff0c;把握全球新时机&#xff0c;呈现RISC-V全球新观点、新…
最新文章