【前端基础】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>

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

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

相关文章

Android Realm数据库使用与集成指南

本地存储storage集成创建Realm数据模型插入和更新数据模型数据查询统计数据分页查询处理表数据删除操作总结Realm 是一款专为移动端和嵌入式场景设计的高性能、跨平台的 对象数据库(NoSQL),由 MongoDB 团队维护。它的核心思想是将数据模型直接映射到对象(如 Java/Kotlin、S…

(九)趣学设计模式 之 桥接模式!

目录 一、 啥是桥接模式&#xff1f;二、 为什么要用桥接模式&#xff1f;三、 桥接模式的实现方式四、 桥接模式的优缺点五、 桥接模式的应用场景六、 总结 &#x1f31f;我的其他文章也讲解的比较有趣&#x1f601;&#xff0c;如果喜欢博主的讲解方式&#xff0c;可以多多支…

Day8 蓝桥杯acw讲解

首先先给大家看一道这个题&#xff0c; 我真的是太喜欢y总了&#xff0c;如果大家也是最近在准备蓝桥杯或者计算机相关的比赛&#xff0c;但是得加一个前提就是必须最好基础真的很好&#xff0c;要不然其实买了课&#xff0c;也没啥太大的用处&#xff0c;其实就可以以我本人举…

谷云科技iPaaS×DeepSeek:构建企业智能集成的核心底座

2025年&#xff0c;DeepSeek大模型的爆发式普及&#xff0c;正引领软件行业实现 “智能跃迁”。从代码生成到系统集成&#xff0c;从企业级应用到消费级产品&#xff0c;自然语言交互能力已成为新一代软件的核心竞争力。据行业分析&#xff0c;超60%的软件企业已启动大模型适配…

java面试项目介绍,详细说明

金三银四少走弯路,Java岗面试冲刺,你与大厂只差这篇文章包括面试准备,帮助大家少走弯路,成功入职大厂,并快速成长落地。 祝大家拿到满意的offer!(把许愿的offer发在评论区,一定会实现的) 主要从四大方面:掌握的主要知识、算法、项目、简历 掌握的主要知识 下面是我看过的资料和…

计算机毕业设计SpringBoot+Vue.js墙绘产品展示交易平台(源码+文档+PPT+讲解)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

springboot005学生心理咨询评估系统(源码+数据库+文档)

源码地址&#xff1a;学生心理咨询评估系统 文章目录 1.项目简介2.部分数据库结构与测试用例3.系统功能结构4.包含的文件列表&#xff08;含论文&#xff09;后台运行截图 1.项目简介 ​ 使用旧方法对学生心理咨询评估信息进行系统化管理已经不再让人们信赖了&#xff0c;把现…

Linux红帽:RHCSA认证知识讲解(二)配置网络与登录本地远程Linux主机

Linux红帽&#xff1a;RHCSA认证知识讲解&#xff08;二&#xff09;配置网络与登录本地远程Linux主机 前言一、使用命令行&#xff08;nmcli 命令&#xff09;配置网络&#xff0c;配置主机名第一步第二步修改主机名称 二、使用图形化界面&#xff08;nmtui 命令&#xff09;配…

【运维】内网服务器借助通过某台可上外网的服务器实现公网访问

背景&#xff1a; 内网服务器无法连接公网,但是办公电脑可以连接内网服务器又可以连接公网。 安装软件 1、frp 2、ccproxy 配置 1、内网服务器 # 内网服务器启动frp服务配置文件参考vi frps.ini# frps.ini [common] bind_port 7000# 备注: bind_port端口可以随意配置。配置完…

Pytorch实现论文:基于多尺度融合生成对抗网络的水下图像增强

简介 简介:提出了一种新型的水下图像增强算法,基于多尺度融合生成对抗网络,名为UMSGAN,以解决低对比度和颜色失真的问题。首先经过亮度的处理,将处理后的图像输入设计的MFFEM模块和RM模块生成图像。该算法旨在适应各种水下场景,提供颜色校正和细节增强。 论文题目:Und…

基于 DeepSeek LLM 本地知识库搭建开源方案(AnythingLLM、Cherry、Ragflow、Dify)认知

写在前面 博文内容涉及 基于 Deepseek LLM 的本地知识库搭建使用 ollama 部署 Deepseek-R1 LLM知识库能力通过 Ragflow、Dify 、AnythingLLM、Cherry 提供理解不足小伙伴帮忙指正 &#x1f603;,生活加油 我站在人潮中央&#xff0c;思考这日日重复的生活。我突然想&#xff0c…

ShenNiusModularity项目源码学习(12:ShenNius.Common项目分析)

ShenNius.Common项目中主要定义功能性的辅助函数类及通用类&#xff0c;供MVC模式、前后端分离模式下的后台服务使用&#xff0c;以提高编程效率。   ApiResult文件内的ApiResult和ApiResult类定义了通用的数据返回格式&#xff0c;包括状态码、返回消息、返回数据等&#x…

【Python量化金融实战】-第1章:Python量化金融概述:1.1量化金融的定义与发展历程

本小节学习建议&#xff1a;掌握Python编程、统计学&#xff08;时间序列分析&#xff09;、金融学基础&#xff08;资产定价理论&#xff09;三者结合&#xff0c;是进入量化领域的核心路径。 &#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 文章目录 1.1 量化金…

STM32的HAL库开发---单通道ADC采集(DMA读取)实验

一、实验简介 正常单通道ADC采集顺序是先开启ADC采集&#xff0c;然后等待ADC转换完成&#xff0c;也就是判断EOC位置1&#xff0c;然后再读取数据寄存器的值。 如果配置了DMA功能&#xff0c;在EOC位被硬件置1后&#xff0c;自动产生DMA请求&#xff0c;然后DMA进行数据搬运…

eclogy后台运维笔记(写的很乱,只限个人观看)

组织权限&#xff1a; 矩阵管理 这个很重要&#xff0c;比如进行流程操作者的选择时&#xff0c;我们进行需要选择财务部的出纳&#xff0c;会计&#xff0c;总经理。我们不能去直接选定一个人&#xff0c;万一这个人离职了&#xff0c;那所有的流程都要手动修改&#xff0c;…

【网络编程】几个常用命令:ping / netstat / xargs / pidof / watch

ping&#xff1a;检测网络联通 1. ping 的基本功能2. ping 的工作原理3. ping 的常见用法4. ping 的输出解释5. ping 的应用场景6. 注意事项 netstat&#xff1a;查看网络状态 1. netstat 的基本功能2. 常见用法3. 示例4. 输出字段解释5. netstat 的替代工具6. 注意事项 xargs&…

自定义Spring Boot Starter(官网文档解读)

摘要 本文将详细介绍自定义 Spring Boot Starter 的完整过程。要构建自定义 Starter&#xff0c;首先需掌握 Spring Boot 中 Auto-configuration 以及相关注解的工作原理&#xff0c;同时了解 Spring Boot 提供的一系列条件注解。在具备这些知识基础后&#xff0c;再按照特定步…

C++和OpenGL实现3D游戏编程【连载23】——几何着色器和法线可视化

欢迎来到zhooyu的C++和OpenGL游戏专栏,专栏连载的所有精彩内容目录详见下边链接: 🔥C++和OpenGL实现3D游戏编程【总览】 1、本节实现的内容 上一节课,我们在Blend软件中导出经纬球模型时,遇到了经纬球法线导致我们在游戏中模型光照显示问题,我们在Blender软件中可以通过…

我的技术十年

前言 十年一瞬&#xff0c;2014 年毕业至今&#xff0c;刚好十年。《异类》一书曾提到“一万小时定律”&#xff0c;要成为某个领域的专家&#xff0c;需要 10000 小时&#xff0c;按比例计算就是&#xff1a;如果你每天工作八小时&#xff0c;一周工作五天&#xff0c;那么成…

kotlin 知识点一 变量和函数

在Kotlin中定义变量的方式和Java 区别很大&#xff0c;在Java 中如果想要定义一个变 量&#xff0c;需要在变量前面声明这个变量的类型&#xff0c;比如说int a表示a是一个整型变量&#xff0c;String b表 示b是一个字符串变量。而Kotlin中定义一个变量&#xff0c;只允许在变量…