【前端基础】Day 1 HTML

总结:

1. Web标准的构成

2. 基本标签

目录

1. Web标准的构成

2. 基本标签

2.1快捷键

2.2.1标题标签 

2.2.2段落和换行标签

2.2.3文本格式化标签

2.2.4div和span标签

2.3.1 图像标签和路径

2.3.2路径

2.3.3超链接标签

2.4注释标签

2.5特殊字符


1. Web标准的构成

 

2. 基本标签

2.1快捷键

<!DOCTYPE html>
<!-- 文档类型声明标签,非HTML标签,位于文档最前面,作用是告诉浏览器用哪种HTML版本来显示网页,
此处表示:当前页面采取的是HTML5版本来显示网页 --><html lang="zh-CN">
<!-- 用来定义当前文档的显示语言,
en定义语言为英语(英文网页),zh-CN定义语言为中文(中文网页),定义为en的文档可以显示中文,定义为zh-CN的文档也可以显示英文,
此属性对浏览器和搜索引擎有作用(翻译) --><head><meta charset="UTF-8"><!-- 字符集(Character set),以便计算机能识别和存储各种文字,在<head>标签内,可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码,UTF-8被称为万国码,基本包含了全世界所有国家需要用到的字符,避免乱码 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我利用vscode创建的第一个页面</title>
</head><body><script>/* 快速复制一行:shift + alt + 下箭头(上箭头)选定多个相同的单词:ctrl + d向上/下移动光标:ctrl + alt + 上/下箭头全部替换相同单词:ctrl + H多行注释:shift + alt + A或ctrl + /选择某个区块:shift + alt 然后拖动鼠标放大/缩小页面:ctrl + +/-快速定位到某行:ctrl + G*/</script><p>今天天气很好</p></body></html>

2.2.1标题标签 

<body><h1>标题标签</h1><h1>标题一共六级选</h1><h2>文字加粗一行显</h2><h3>由小到大依次减</h3><h4>从重到轻随之变</h4><h5>语法规范书写后</h5><h6>具体效果刷新见</h6>------pink老师
</body>

2.2.2段落和换行标签

 

<body><p>在全球化背景下,大国关系格局<br />的构建成为国际政治中的重要议题。作为世界第二大经济体和联合国安理会常任理事国,中国在构建大国关系格局中发挥着举足轻重的作用。本文旨在探讨中国构建大国关系格局的路径与策略。</p><p>中国构建大国关系格局的首要原则是坚持和平共处五项原则,即互相尊重主权和领土完整、互不侵犯、互不干涉内政、平等互利、和平共处。这些原则不仅是中国外交政策的基础,也是处理大国关系的基本准则。中国主张通过对话和协商解决国际争端,反对任何形式的霸权主义和强权政治,致力于维护国际秩序的稳定性和连续性。</p>
</body>

2.2.3文本格式化标签

<body>我是<strong>加粗</strong>的文字我是<b>加粗</b>的文字我是<em>倾斜</em>的文字我是<i>倾斜</i>的文字我是<del>删除线</del>我是<s>删除线</s>我是<ins>下划线</ins>我是<u>下划线</u></body>

 

2.2.4div和span标签

<body><div>日化区</div><div>食品区</div><span>薯片</span><span>辣条</span><span>面包</span>
</body>

2.3.1 图像标签和路径

<body><h4>图像标签</h4><img src="图像标签1.jpg" /><h4>alt替换文本</h4><img src="图像标签2.jpg" alt="加载出错" /><h4>title提示文本</h4><img src="图像标签1.jpg" alt="加载出错" title="看得懂的人有福了" /><h4>width /height,修改其中任意一个等比例缩放</h4><img src="图像标签1.jpg" width="300" /><h4>border 边框</h4><img src="图像标签1.jpg" border="10" />
</body>

2.3.2路径

<body><img src="图像标签1.jpg" height="300" /><img src="images/下一级路径.jpg" height="300" /><img src="../上一级路径.jpg" height="300" /><img src="C:\Users\spring\Desktop\前端基础\案例\图像标签1.jpg" height="300" /><img src="https://ylsy.hnu.edu.cn/images/stories/weixintupian_20250219092247.jpg" height="300" /></body>

注意:相对路径图片都应该在vscode的资源管理器中,否则加载不出来

2.3.3超链接标签

<body><h4 id="head">1.外部链接</h4><a href="http://www.itcast.cn">传智播客</a>target默认值是_self,即当前页面打开<br /><a href="http://www.qq.com" target="_blank">腾讯</a>target值为_blank,新窗口打开<br /><a href="#tail">去往底部</a><h4>2.内部链接:网站内部页面之间的相互链接</h4><a href="01-第一个页面.html" target="_blank">第一个页面(在同一个目录下)</a><h4>3.空链接:#</h4><a href="#" target="_blank">deepseek的住址</a><h4>4.下载链接:地址链接的是文件.exe或者zip等压缩包形式</h4><a href="图像标签1.zip" target="_blank">下载文件</a><h4>5.网页元素的链接</h4><a href="http://www.baidu.com" target="_blank"> <img src=" img1.jpg" /> </a><h4 id="tail">6.锚点链接</h4><a href="#head">回到开头</a>
</body>

2.4注释标签

2.5特殊字符

<body><!-- 我要     学习<br /> -->我要&nbsp;&nbsp;&nbsp;&nbsp;学习<br /><!-- <p> 是一个段落标签 -->&lt; p &gt; 是一个段落标签
</body>

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

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

相关文章

推荐3个背景渐变色的wordpress主题

干净、清爽、背景渐变色的wordpress企业主题 ​ 服务类公司wordpress企业主题https://www.jianzhanpress.com/?p8255 红色大气的wordpress企业主题&#xff0c;适合服务行业的公司搭建企业官方网站使用。 ​ wordpress询盘型独立站主题https://www.jianzhanpress.com/?p8258…

LlamaFactory-webui:训练大语言模型的入门级教程

LlamaFactory是一个开源框架&#xff0c;支持多种流行的语言模型&#xff0c;及多种微调技术&#xff0c;同时&#xff0c;以友好的交互式界面&#xff0c;简化了大语言模型的学习。 本章内容&#xff0c;从如何拉取&#xff0c;我已经搭建好的Llamafactory镜像开始&#xff0…

微信小程序-二维码绘制

wxml <view bindlongtap"saveQrcode"><!-- 二维码 --><view style"position: absolute;background-color: #FFFAEC;width: 100%;height: 100vh;"><canvas canvas-id"myQrcode" style"width: 200px; height: 200px;ba…

Python—Excel全字段转json文件(极速版+GUI界面打包)

目录 专栏导读1、背景介绍2、库的安装3、核心代码4、完整代码(简易版)5、进阶版(GUI)总结专栏导读 🌸 欢迎来到Python办公自动化专栏—Python处理办公问题,解放您的双手 🏳️‍🌈 博客主页:请点击——> 一晌小贪欢的博客主页求关注 👍 该系列文章专栏:请点击——…

游戏引擎学习第124天

仓库:https://gitee.com/mrxiao_com/2d_game_3 回顾/复习 今天是继续完善和调试多线程的任务队列。之前的几天&#xff0c;我们已经介绍了多线程的一些基础知识&#xff0c;包括如何创建工作队列以及如何在线程中处理任务。今天&#xff0c;重点是解决那些我们之前没有注意到…

Sqlserver安全篇之_启用TLS即配置SQL Server 数据库引擎以加密连接

官方文档 https://learn.microsoft.com/zh-cn/sql/database-engine/configure-windows/configure-sql-server-encryption?viewsql-server-ver16 https://learn.microsoft.com/zh-cn/sql/database-engine/configure-windows/manage-certificates?viewsql-server-ver15&pre…

hbase笔记总结1

hbase是nosql的一种&#xff0c;非关系型数据库&#xff0c;not only sql&#xff0c;可处理大规模、高并发的数据&#xff0c;是web2.0以后的产物hbase的扩展性和灵活性更好&#xff0c;而且筛选能力相较于MySQL更优nosql的四大特点&#xff1a; 灵活的数据模型 &#xff08;1…

RabbitMq高级

目录 1.发送者的可靠性 1.1 .生产者重试机制 1.2.生产者确认机制 1.3.实现生产者确认 1.3.1.开启生产者确认 1.3.2.定义ReturnCallback 1.3.3.定义ConfirmCallback 2.MQ的可靠性 2.1.数据持久化 2.1.1.交换机持久化 2.1.2.队列持久化 2.1.3.消息持久化 2.2.LazyQueu…

kafka-web管理工具cmak

一. 背景&#xff1a; 日常运维工作中&#xff0c;采用cli的方式进行kafka集群的管理&#xff0c;还是比较繁琐的(指令复杂&#xff1f;)。为方便管理&#xff0c;可以选择一些开源的webui工具。 推荐使用cmak。 二. 关于cmak&#xff1a; cmak是 Yahoo 贡献的一款强大的 Apac…

Android应用app实现AI电话机器人接打电话

Android应用app实现AI电话机器人接打电话 --安卓AI电话机器人 一、前言 【Dialer3.0智能拨号器】Android版手机app&#xff0c;由于采用蓝牙电话的方式来调用手机SIM卡发起呼叫、接听来电&#xff0c;并接收和处理通话的声音&#xff0c;通常我们以“蓝牙电话方案”来称呼它。 …

docker简介-学习与参考

docker Docker 是一个开源的应用容器引擎&#xff0c;基于 Go 语言并遵从 Apache2.0 协议开源。 Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中&#xff0c;然后发布到任何流行的 Linux 机器上&#xff0c;也可以实现虚拟化。 容器是完全使用沙箱…

【leetcode hot 100 42】接雨水

错误解法&#xff1a;若height[left]>height[right]则代表有坑 class Solution {public int trap(int[] height) {int left 0;int area 0;while(left<height.length-1){// 找坑int right left1;while(right<height.length-1 && height[left]>height[ri…

Octave3D 关卡设计插件

课程参考链接 这位大佬有在视频合集中有详细的讲解&#xff0c;个人体验过&#xff0c;感觉功能很强大 https://www.bilibili.com/video/BV1Kq4y1C72P/?share_sourcecopy_web&vd_source0a41d8122353e3e841ae0a39908c2181 Prefab资源管理 第一步 在场景中创建一个空物体…

llama.cpp 一键运行本地大模型 - Windows

文章目录 llama.cpp 一键运行本地大模型 - Windows嘿&#xff0c;咱来唠唠 llama.cpp 这玩意儿&#xff01;gguf 格式是啥&#xff1f;咱得好好说道说道基座模型咋选&#xff1f;所需物料&#xff0c;咱得准备齐全咯核心命令&#xff0c;得记牢啦运行方式咋选&#xff1f;测试应…

SQLark 数据迁移|断点续迁已上线(Oracle-达梦)

数据迁移是 SQLark 最受企业和个人用户欢迎的功能之一&#xff0c;截止目前已帮助政府、金融、能源、通信等 50 家单位完成从 Oracle、MySQL 到达梦的全量迁移&#xff0c;自动化迁移成功率达 96% 以上。 在 Oracle 到达梦数据库迁移过程中&#xff0c;SQLark V3.3 新增 断点续…

sklearn中的决策树-分类树:剪枝参数

剪枝参数 在不加限制的情况下&#xff0c;一棵决策树会生长到衡量不纯度的指标最优&#xff0c;或者没有更多的特征可用为止。这样的决策树 往往会过拟合。为了让决策树有更好的泛化性&#xff0c;我们要对决策树进行剪枝。剪枝策略对决策树的影响巨大&#xff0c;正确的剪枝策…

基于SSM实现的bbs论坛系统功能实现四

一、前言介绍&#xff1a; 1.1 项目摘要 随着互联网技术的不断进步和普及&#xff0c;网络社区已成为人们获取信息、交流意见、分享经验的重要场所。BBS&#xff08;Bulletin Board System&#xff0c;电子公告板系统&#xff09;论坛系统作为网络社区的一种重要形式&#xf…

git - study

文章目录 git - study概述可以用 git gui工具来添加快捷命令工具如果要在提交日志中搜索&#xff0c;可以用gitk的view编辑功能实验环境直接用git自带环境进行git操作的好处查看git所有配置配置全局数据配置项目专用的数据查询配置数据的原始值配置git使用的文本编辑器获取某个…

事故02分析报告:慢查询+逻辑耦合导致订单无法生成

一、事故背景与现象 时间范围 2022年2月3日 18:11~18:43&#xff08;历时32分钟&#xff09; 受影响系统 系统名称角色影响范围dc3订单数据库主库订单生成、事务回滚dc4订单数据库从库数据同步、容灾切换 业务影响 核心业务&#xff1a;手机点餐、C扫B支付订单无法推送至…

ONES 功能上新|ONES Copilot、ONES Project 新功能一览

ONES Copilot 智能 AI 助手模型可配置多种类型模型&#xff0c;服务提供方 Dashscope 的模型列表中新增 DeepSeek V3 与 DeepSeek R1&#xff1b;选择自定义模型配置时&#xff0c;填写私有部署的 DeepSeek 模型相关参数即可。 应用场景&#xff1a; 企业内部自部署或在模型服务…