HTML 学习笔记

html 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

1.HTML文档的后缀名

(1) .html

(2) .htm

这里更推荐使用 ".html ",命名应该遵从含义清晰、简洁、一致性原则。".htm"写法是来源于老的8.3文件格式,DOS操作系统只支持后缀名的长度为三位,现在的版本则没有对命名长度的限制,因此建议选择无限制命名长度的方式" html"。

2.HTML网页结构

下面是一个HTML的叶面结构

只有<body> -</body>之间的白色区域才会在浏览器中显示

示例,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML学习笔记</title>
</head>
<body>
 
<h1>第一个标题</h1>
 
<p>第一个段落</p>
 
</body>
</html>

输出

附加,

doctype 声明不区分大小写,用来告知浏览器页面使用了哪种HTML版本。

3.HTML编辑器

HTML编辑可以使用专业的工具,如VS Code,vim等都可以用来编辑。

同时,每一种操作系统都带有简单的文本编辑器。

  •  Windows 用户可以使用记事本;
  •  Linux 用户可以选择几种不同的文本编辑器,如 vi、vim 或者 emacs ;
  • Mac 用户可以使用 OS X 预装的 TextEdit。

附加,以windows 10 为例,如果记事本在修改文件类型时,类型不能改为html,可能是没有开启文件扩展名,在我的电脑->文件-> 选择查看,在右侧勾选文件扩展名,就可以看到全部的文件名称和类型信息,在进行修改就不是只修改文件名称而不能修改文件类型了。

4.HTML基础
  • HTML标题(heading)是通过<h1> - <h6>标签来定义。
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
  • HTML段落通过<p>来定义。
<p>这是一个段落</p>
<p>这是另一个段落</p>
  • HTML链接通过标签<a>来定义。
<a href="https://blog.csdn.net/m0_62870588?spm=1000.2115.3001.5343">这是一个链接</a>
  • HTML图像通过标签<img>来定义。
  • HTML由<hr>来创建水平线(分割线)
  • HTML用 <!--...--> 来注释

html 相对路径的写法:

  1.  ./:代表文件所在的目录(可以省略不写)如果写成image/background就相当于是在html文件下找image文件夹,当然是找不到的
  2.  ../:代表文件所在的父级目录
  3.  ../../:代表文件所在的父级目录的父级目录
  4.  /:代表文件所在的根目录
        
5.HTML的元素、属性
  1. HTML元素以开始标签起始,已结束标签终止,如<h1> - </h1>。
  2. 没有内容的HTML元素被称为空元素,空元素在起始标签中关闭,<br>就是没有结束标签的空元素。
  3. 下面是适用于大多数 HTML 元素的属性:

    属性描述
    class为html元素定义一个或多个类名(classname)(类名从样式文件引入)
    id定义元素的唯一id
    style规定元素的行内样式(inline style)
    title描述了元素的额外信息 (作为工具条使用)
  4. HTML属性值应始终被包括在引号内,在某些个别情况下,例如,属性本身就含有双引号,那么必须使用单引号,其他则对单引号和双引号不做要求。
  5. 提示,HTML的标签和属性都建议使用小写。
6.HTML文本格式化标签

HTML 文本格式化标签

标签描述
<b>定义粗体文本
<em>定义着重文字
<i>定义斜体字
<small>定义小号字
<strong>定义加重语气
<sub>定义下标字
<sup>定义上标字
<ins>定义插入字
<del>定义删除字

HTML "计算机输出" 标签

标签描述
<code>定义计算机代码
<kbd>定义键盘码
<samp>定义计算机代码样本
<var>定义变量
<pre>定义预格式文本

HTML 引文, 引用, 及标签定义

标签描述
<abbr>定义缩写
<address>定义地址
<bdo>定义文字方向
<blockquote>定义长的引用
<q>定义短的引用语
<cite>定义引用、引证
<dfn>定义一个定义项目。

附加,引用“菜鸟教程”

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

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

相关文章

FPGA 以太网概念简单学习

1 MAC和PHY 从硬件的角度来说&#xff0c;以太网接口电路主要由 MAC &#xff08; Media Access Control &#xff09;控制器和物理层接口 PHY&#xff08;Physical Layer &#xff0c; PHY &#xff09;两大部分构成。 MAC 指媒体访问控制子层协议&#xff0c;它和 PHY 接…

SpringMVC进阶(自定义拦截器以及异常处理)

文章目录 1.自定义拦截器1.基本介绍1.说明2.自定义拦截器的三个方法3.流程图 2.快速入门1.Myinterceptor01.java2.FurnHandler.java3.springDispatcherServlet-servlet.xml配置拦截器4.单元测试 3.拦截特定路径1.拦截指定路径2.通配符配置路径 4.细节说明5.多个拦截器1.执行流程…

刷代码随想录有感(49):找树左下角的值

题干&#xff1a; 用层序遍历方便些&#xff0c;因为只需要把res不断替换成每一层第一个节点值即可&#xff0c;代码如下&#xff1a; class Solution { public:int findBottomLeftValue(TreeNode* root) {queue<TreeNode*>que;if(root ! NULL)que.push(root);int res …

逆向案例三十——webpack登录某游戏

网址&#xff1a;aHR0cHM6Ly93d3cuZ205OS5jb20v 步骤&#xff1a; 进行抓包分析&#xff0c;找到登录接口&#xff0c;发现密码有加密 跟栈分析&#xff0c;从第三个栈进入&#xff0c;打上断点&#xff0c;再次点击登录 明显找到password,它由o赋值&#xff0c;o由a.encode(…

【哈希】Leetcode 面试题 01.02. 判定是否互为字符重排

题目讲解 面试题 01.02. 判定是否互为字符重排 算法讲解 直观的想法&#xff1a;我们找到一个字符串的全排列&#xff0c;然后对比当前的排列是否等于另一个字符串。如果两个字符串如果互为排列&#xff0c;所以我们知道两个字符串对应的字符出现的个数相同&#xff0c;那么…

在config.json文件中配置出来new mars3d.graphic.PolylineCombine({大量线合并渲染类型的geojson图层

在config.json文件中配置出来new mars3d.graphic.PolylineCombine({大量线合并渲染类型的geojson图层 问题场景&#xff1a; 1.浏览官网示例的时候图层看到大量线数据合并渲染的示例 2.矢量数据较大量级的时候&#xff0c;这种时候怎么在config.json文件中尝试配置呢&#x…

高并发内存池: 介绍

一.功能介绍 功能: 用于实现高效的多线程内存管理(替代系统的内存分配相关的函数(malloc, free)) 性能的提升: 池化技术, 锁竞争的减小处理内存碎片: 内碎片, 外碎片 池化技术: 概念:预先向系统申请过量的资源, 自己管理.->提高性能(每次申请资源都有较大的开销, 提前申…

数字文旅重塑旅游发展新生态:以数字化转型为契机,推动旅游产业的创新发展,提升旅游服务的智能化、网络化和个性化水平

目录 一、引言 二、数字化转型推动旅游产业创新发展 1、数字化转型提升旅游产业效率 2、数字化转型拓展旅游产业边界 3、数字化转型促进旅游产业可持续发展 三、提升旅游服务智能化、网络化和个性化水平 1、智能化提升旅游服务体验 2、网络化拓宽旅游服务渠道 3、个性…

OpenHarmony实战开发-多层级手势事件

多层级手势事件指父子组件嵌套时&#xff0c;父子组件均绑定了手势或事件。在该场景下&#xff0c;手势或者事件的响应受到多个因素的影响&#xff0c;相互之间发生传递和竞争&#xff0c;容易出现预期外的响应。 本章主要介绍了多层级手势事件的默认响应顺序&#xff0c;以及…

【大学生电子竞赛题目分析】——2023年H题《信号分离装置》

今年的大赛已临近落幕&#xff0c;笔者打算陆续对几个熟悉领域的题目作一番分析与讨论&#xff0c;今天首先分析H题。 网上有一些关于H题的分析&#xff0c;许多都是针对盲信号分析的。然而本题具有明确的信号频率范围&#xff0c;明确的信号可能频率&#xff0c;明确的信号波…

全栈从0到1 3D旅游地图标记和轨迹生成

功能演示 演示视频 体验地址 Vercel App 开发技术栈&#xff1a; NextJs&#xff08;前端框架&#xff09;React&#xff08;前端框架&#xff09;TailwindCSS &#xff08;CSS样式&#xff09;echart echart gl &#xff08;地图生成&#xff09;shadui&#xff08;UI组件…

HTML5本地存储账号密码

<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>HTML5本地存储账号密码</title> </head…

[论文笔记]SEARCHING FOR ACTIVATION FUNCTIONS

引言 今天带来另一篇激活函数论文SEARCHING FOR ACTIVATION FUNCTIONS的笔记。 作者利用自动搜索技术来发现新的激活函数。通过结合详尽的搜索和基于强化学习的搜索&#xff0c;通过实验发现最佳的激活函数 f ( x ) x ⋅ sigmoid ( β x ) f(x) x \cdot \text{sigmoid}(βx…

Android 学习 鸿蒙HarmonyOS 4.0 第二天(项目结构认识)

项目结构认识 和 了解&#xff1a; 工程目录下的结构如下&#xff1a; 首先能看到有两个.开头的文件&#xff0c;分别是.hvigor 和 .idea。这两个文件夹都是与构建有关系的&#xff0c; 如果你开发过安卓app&#xff0c;构建完会生成一个apk安装包&#xff0c;鸿蒙则是生成hap…

android 分区存储(沙盒存储)适配总结

目录 一、分区存储概念 1.外部存储分类 2.分区存储如何影响文件访问 二、分区适配方案 1. 应用分区存储的文件访问规定 (1).应用专属目录--私有目录 (2).共享目录文件--公有目录 2.MediaStore API介绍 3.Storage Access Framework介绍 三、所有文件访问权限 四、总结…

急急急!微信朋友圈删除了怎么恢复?

微信朋友圈是我们与朋友分享生活点滴的重要平台&#xff0c;但有时候微信出现异常&#xff0c;导致我们编辑好的朋友圈被删除了&#xff0c;这时候该怎么办呢&#xff1f; 幸运的是&#xff0c;微信提供了一种简单的方式来恢复已删除的朋友圈内容。微信朋友圈删除了怎么恢复&a…

react 学习笔记二:ref、状态、继承

基础知识 1、ref 创建变量时&#xff0c;需要运用到username React.createRef()&#xff0c;并将其绑定到对应的节点。在使用时需要获取当前的节点&#xff1b; 注意&#xff1a;vue直接使用里面的值&#xff0c;不需要再用this。 2、状态 组件描述某种显示情况的数据&#…

tkinter中是否有必要使用类

1. 问题背景 在使用tkinter编写事件驱动程序时&#xff0c;Fredrik Lundh的教程中提到&#xff0c;创建一个类&#xff08;App&#xff09;作为框架&#xff0c;并以类的实例运行程序&#xff0c;这样会更好&#xff0c;而不是直接启动程序。 以下是问题&#xff1a; 在tkin…

【Go语言快速上手(五)】文件操作协程操作

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:Go语言专栏⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习更多Go语言知识   &#x1f51d;&#x1f51d; GO快速上手 1. 前言2. GO语言的文件操…

武汉星起航:挂牌上海股权中心,开启资本新篇章助力跨境电商飞跃

2023年10月30日&#xff0c;武汉星起航电子商务有限公司在上海股权托管交易中心成功挂牌展示&#xff0c;标志着这家在跨境电商领域拥有卓越声誉的企业正式迈入了资本市场的大门。对于武汉星起航来说&#xff0c;这不仅是其发展历程中的一个重要里程碑&#xff0c;更是对其业务…
最新文章