HTML详解连载(1)

HTML详解连载(1)

    • HTML
      • 定义
      • HTML 超文本标记语言
      • 标签语法
      • 注意
      • 拓展
    • HTML基本骨架
      • 解释
      • VS Code 快速生成骨架:
      • 标签的关系
        • 父子关系(嵌套关系)
        • 兄弟关系(并列关系)
      • 代码格式
      • 注释
    • 标题标签
    • 标签名:h1-h6(双标签)
      • 经验:
    • 段落标签
      • 标签名:p(双标签)
      • 显示特点:独占一行、段落之间存在间隙
    • 换行和水平线标签
    • 文本格式化标签
      • 作用:
    • 图像标签-基本使用
      • 强调
      • 图像标签-属性
      • 属性名=“属性值”
    • 路径
      • 路径分类:
        • 相对路径
          • 强调
        • 绝对路径
    • 注释

HTML

定义

Hyper TextMarkup Language。
在这里插入图片描述

HTML 超文本标记语言

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

标签语法

<strong> 需要加粗的文字 </strong>
<strong>--开始标签
</strong>--结束标签

注意

标签成对出现,中间包裹内容
<>里面放英文字母(标签名)
结束标签比开始标签多/

拓展

双标签:成对出现的标签
单标签:只有开始标签,没有结束标签
<br>:换行
<hr>:水平线

HTML基本骨架

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

在这里插入图片描述

解释

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

VS Code 快速生成骨架:

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

标签的关系

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

父子关系(嵌套关系)

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

兄弟关系(并列关系)

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

代码格式

父子关系:子集标签换行且缩进
兄弟关系:兄弟标签换行要对齐

注释

注释中...是注释内容

快捷键: Ctrl + /

在这里插入图片描述

标题标签

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

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

显示特点:文字加粗、字号逐渐减小、独占一行(换行)

经验:

h1标签再一个网页中只能用一次,用来放新闻标题或者网页的logo
h2-h6没有使用的限制

段落标签

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

标签名:p(双标签)

显示特点:独占一行、段落之间存在间隙

换行和水平线标签

  换行<br>(单标签)水平线<hr>(单标签)

文本格式化标签

作用:

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

  效果		标签名1		标签名2加粗		strong		b倾斜		em			i下划线	ins			u删除线	del			s

strong em ins del标签自带强调含义(语义)。
在这里插入图片描述

图像标签-基本使用

作用:在网页中插入图片

<img src=”图片的URL”>

强调

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

图像标签-属性

属性作用说明
alt替换文本图片无法显示的时候显示文字,可以不影响图片浏览
title提示文本鼠标悬停再图片上的时候显示的文字
width图片的宽度值为数字,没有单位 默认等比缩放
height图片的高度值为数字,没有单位

属性名=“属性值”

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

路径

路径值得是查找文件是,从起点到终点经历的路线。

路径分类:

相对路径

从当前文件位置出发查找目标文件

强调

/表示进入莫格文件夹里面
.表示当前文件所在文件夹
…表示当前文件的上一个文件夹

绝对路径

从盘符出发查找目标文件
Windows默认是\,其他系统是/

注释

自己通过黑马课程并通过自己整合其他资料总结的笔记,希望能帮助大家。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

分布式数据库视角下的存储过程

存储过程很好呀&#xff0c;那些用不好的人就是自己水平烂&#xff0c;不接受反驳&#xff01;我就有过这样念头&#xff0c;但分布式数据库&#xff0c;更倾向少用或不用存储过程。 1 我从C/S时代走来 C/S架构时代的末期最流行开发套件是PowerBuilder和Sybase数据库&#xf…

unity vscode 代码关联 跳转 BUG

一早打开电脑发现代码关联失效了&#xff0c;目测可能跟昨天一些插件更新有关 结论 就这货&#xff0c;开了就没法提示代码关联&#xff0c;估计预览版全是BUG。 另一个坑 同期有个unity插件也是预览版&#xff0c;“非常好使”&#xff0c;当场去世。评论点开有好几个人说用…

【C++面向对象】--- 继承 的奥秘(上篇)

个人主页&#xff1a;平行线也会相交&#x1f4aa; 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 平行线也会相交 原创 收录于专栏【C之路】&#x1f48c; 本专栏旨在记录C的学习路线&#xff0c;望对大家有所帮助&#x1f647;‍ 希望我们一起努力、成长&…

第三篇|金融人数据来源有哪些

数据对于金融行业真的很重要&#xff0c;那么金融人有哪些途径查数据呢&#xff1f; 国内&#xff1a; 1. 国家统计局 这个应该是无论什么行业都使用最频繁的网站&#xff0c;每个月都会固定发上个月资产投资数据 、工业增加值和利润数据等常规数据&#xff0c;其他数据也会…

半关闭、端口复用与IO多路复用

文章目录 半关闭端口复用IO多路复用&#xff08;IO多路转接&#xff09;模型解决措施 sellect缺点 poll应用缺点 epoll应用工作模式 半关闭 使用close(fd);所对应的文件描述符写和读都关闭了。 端口复用 可以解决绑定失败的问题。 IO多路复用&#xff08;IO多路转接&#…

【二分+贪心】CF1665 C

Problem - C - Codeforces 题意&#xff1a; 思路&#xff1a; 一开始想太简单wa6了 只想到先感染大的分量&#xff0c;然后最后把最大的分量剩下的染色 但是可能会有别的分量更大&#xff08;因为最后给最大的染色之后可能不再是最大的&#xff09; 可以用堆维护&#xf…

加载并绘制时间域内的心电图信号,并实施Q因子为1的陷波滤波器以去除50 Hz频率研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

Cadvisor+InfluxDB+Grafan+Prometheus(详解)

目录 一、CadvisorInfluxDBGrafan案例概述 &#xff08;一&#xff09;Cadvisor Cadvisor 产品特点&#xff1a; &#xff08;二&#xff09;InfluxDB InfluxDB应用场景&#xff1a; InfluxDB主要功能&#xff1a; InfluxDB主要特点&#xff1a; &#xff08;三&#…

SpringBoot案例-部门管理-删除

目录 查看页面原型&#xff0c;明确需求 页面原型 需求 阅读接口文档 思路分析 功能接口开发 控制层&#xff08;Controllre类&#xff09; 业务层&#xff08;Service类&#xff09; 持久层&#xff08;Mapper类&#xff09; 接口测试 前后端联调 查看页面原型&a…

AWS-自定义ami的S3存取使用

需要提前配置好aws-cli哈 对应的区域 要统一 示例&#xff1a;即AWS-CLI 和 EC2、AMI、S3以上资源均要使用同已区域&#xff0c;以下拿新加坡举例 1.新建自定义AMI 2.查看ami状态 确认是可用状态&#xff0c;才能开始操作 3.aws-cli 开始存入s3 只能使用桶的根目录 开始上…

Python-OpenCV中的图像处理-直方图

Python-OpenCV中的图像处理-直方图 直方图统计直方图绘制直方图Matplotlib绘制灰度直方图Matplotlib绘制RGB直方图 使用掩膜统计直方图直方图均衡化Numpy图像直方图均衡化OpenCV中的直方图均衡化CLAHE 有限对比适应性直方图均衡化 2D直方图OpenCV中的2D直方图Numpy中2D直方图 直…

Glide 的超时控制相关处理

作者&#xff1a;newki 前言 Glide 相信大家都不陌生&#xff0c;各种源码分析&#xff0c;使用介绍大家应该都是烂熟于心。但是设置 Glide 的超时问题大家遇到过没有。 我遇到了&#xff0c;并且掉坑里了&#xff0c;情况是这样的。 调用接口从网络拉取用户头像&#xff0c…

在外SSH远程连接Ubuntu系统

在外SSH远程连接Ubuntu系统【无公网IP】 文章目录 在外SSH远程连接Ubuntu系统【无公网IP】前言1. 在Ubuntu系统下安装cpolar软件2. 完成安装后打开cpolar客户端web—UI界面3. 创建隧道取得连接Ubuntu系统公网地址4. 打开Windows的命令界面并输入命令 前言 随着科技和经济的发展…

解锁Python集合的妙用:常用函数与实例深度解析

Python的集合&#xff08;Set&#xff09;是一种无序且不重复的数据结构&#xff0c;拥有强大的去重和集合运算功能。在这篇博客中&#xff0c;我们将深入探讨集合的常用函数&#xff0c;并通过实际案例为你展示其灵活应用。 创建集合​ 集合可以通过花括号来创建&#xff0c…

golang拥有wireshark数据包解析能力

golang拥有wireshark数据包解析能力 1. 功能和实现 wireshark拥有世界上最全面的协议解析能力并且还在不断更新中&#xff0c;通过调研&#xff0c;没有办法找到与wireshark同水平的解析工具。 为了使得golang语言可以拥有wireshark一样强大的协议解析能力&#xff0c;库 gowir…

生态系统服务(InVEST模型)

第一天&#xff1a; 1. 生态系统服务理论联系实践案例讲解 2. InVEST模型的开发历程、不同版本的差异及对数据需求的讲解 3. InVEST所需数据的要求&#xff08;分辨率、格式、投影系统等&#xff09;、获取及标准化预处理讲解 4. InVEST运行常见问题及处理解决方法讲解 5.…

微信小程序实现当前页面更新上一个页面

日常项目中需要实现的一个价格脱敏功能&#xff1a;通过点击页面二中的查看完整信息 点击回退按钮实现页面一中的价格显露出来 通过查询了大量资料发现 大多数都是通过调用上一个接口的onload 或者onshow 实现视图更新 经测试后 发现 无法实现 只能更改数据 无法更新视图 实现…

解决:django设置DEBUG=false时出现的问题

首先&#xff0c;我用的是django4.2&#xff0c;python3.10版本 本来&#xff0c;如果在settings.py中使用 DEBUG True&#xff0c;那么什么问题也没有&#xff0c;当然&#xff0c;这属于调试模式。 DEBUG True TEMPLATE_DEBUG DEBUGSTATIC_URL /static/ STATICFILES_DI…

【C++】开源:ceres和g2o非线性优化库配置使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍ceres和g2o非线性优化库配置使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&…

大模型落地金融业,想象力在哪?

金融大模型的难点在于&#xff0c;能否在产业中扎得更深&#xff1b;其颠覆性也更建立在&#xff0c;纵深到产业中去&#xff0c;赋能金融行业的长尾场景发展&#xff0c;以及重拾“金融信任”。 作者|思杭 编辑|皮爷 出品|产业家 “从经济角度讲&#xff0c;整个金融业…