【前端基础篇】Day 1

总结:

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/976015.html

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

相关文章

【复习】Redis

数据结构 Redis常见的数据结构 String&#xff1a;缓存对象Hash&#xff1a;缓存对象、购物车List&#xff1a;消息队列Set&#xff1a;点赞、共同关注ZSet&#xff1a;排序 Zset底层&#xff1f; Zset底层的数据结构是由压缩链表或跳表实现的 如果有序集合的元素 < 12…

我与Linux的爱恋:了解信号量+共享内存+消息队列的应用

​ ​ &#x1f525;个人主页&#xff1a;guoguoqiang. &#x1f525;专栏&#xff1a;Linux的学习 文章目录 信号量共享内存应用---Server&Client通信client.ccserver.ccnamepipe.hppShm.hpp 消息队列——实现Client&ServerCom.hppClient.ccServer.cc 信号量 信号量…

跟着李沐老师学习深度学习(十六)

继续学习深度学习&#xff08;十六&#xff09; 继续理解transformer 对于transformer的理解感觉还是云里雾里的&#xff0c;今天又找了一些视频进行一个梳理。 一个浅解 在B站学习发现评论区真的很不错&#xff0c;在沐神讲transformer论文的评论下&#xff0c;有一个评论…

DeepSeek-R1本地部署保姆级教程

一、DeepSeek-R1本地部署配置要求 &#xff08;一&#xff09;轻量级模型 ▌DeepSeek-R1-1.5B 内存容量&#xff1a;≥8GB 显卡需求&#xff1a;支持CPU推理&#xff08;无需独立GPU&#xff09; 适用场景&#xff1a;本地环境验证测试/Ollama集成调试 &#xff08;二&a…

hbase集群部署

1.hbase集群的搭建&#xff08;以及内部逻辑&#xff09; 虽然Hmaster有多个&#xff0c;但是属于热备&#xff0c;起作用的就active上的这个。 部署流程&#xff1a; 因为我配置的hadoop是一个非HA的&#xff0c;所以修改为以下 如果是HA的hadoop一定要做以下这一步。 在启动…

2.1 链路层发现协议(LLDP)

LLDP&#xff08;Link Layer Discovery Protocol&#xff0c;链路层发现协议&#xff09;是一种用于网络设备的链路层协议&#xff0c;用于在局域网&#xff08;LAN&#xff09;中自动发现和通告设备的信息。LLDP是一个开放标准协议&#xff0c;定义在IEEE 802.1AB中&#xff0…

3dtiles平移旋转工具制作

3dtiles平移旋转缩放原理及可视化工具实现 背景 平时工作中&#xff0c;通过cesium平台来搭建一个演示场景是很常见的事情。一般来说&#xff0c;演示场景不需要多完善的功能&#xff0c;但是需要一批三维模型搭建&#xff0c;如厂房、电力设备、园区等。在实际搭建过程中&…

LeetCode 2506 统计相似字符串对的数目

一、问题描述 我们面对的问题是处理一个下标从 0 开始的字符串数组 words。题目中定义了一种字符串相似的规则&#xff1a;如果两个字符串由相同的字符组成&#xff0c;那么就认为这两个字符串是相似的。例如&#xff0c;"abca" 和 "cba" 是相似的&#xf…

【Deepseek高级使用教程】Deepseek-R1的5种高级进阶玩法,5分钟教会你Deepseek+行业的形式进行工作重构的保姆级教程

AI视频生成&#xff1a;小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频https://aitools.jurilu.com/ 最近&#xff0c;有各行各业的小伙伴问我&#xff0c;到底应该怎么将deepseek融入进他们自身的工作流呢&#xff1f;其实这个问题很简单。我就以…

【LeetCode刷题之路】leetcode155.最小栈

LeetCode刷题记录 &#x1f310; 我的博客主页&#xff1a;iiiiiankor&#x1f3af; 如果你觉得我的内容对你有帮助&#xff0c;不妨点个赞&#x1f44d;、留个评论✍&#xff0c;或者收藏⭐&#xff0c;让我们一起进步&#xff01;&#x1f4dd; 专栏系列&#xff1a;LeetCode…

Linux版本控制器Git【Ubuntu系统】

文章目录 **前言**一、版本控制器二、Git 简史三、安装 Git四、 在 Gitee/Github 创建项目五、三板斧1、git add 命令2、git commit 命令3、git push 命令 六、其他1、git pull 命令2、git log 命令3、git reflog 命令4、git stash 命令 七、.ignore 文件1、为什么使用 .gitign…

2025年信息科学与工程学院科协机器学习介绍——机器学习基本模型介绍

机器学习 目录 机器学习一.安装基本环境conda/miniconda环境 二.数据操作数据预处理一维数组二维数组以及多维数组的认识访问元素的方法torch中tenson的应用张量的运算张量的广播 三.线性代数相关知识四.线性回归SoftMax回归问题&#xff08;分类问题&#xff09;什么是分类问题…

pyecharts介绍

文章目录 介绍安装pyecharts基本使用全局配置选项 折线图相关配置地图模块使用柱状图使用 介绍 echarts虑是个由百度开源的数据可视化&#xff0c;凭借着良好的交互性&#xff0c;精巧的图表设计&#xff0c;得到了众多开发者的认可&#xff0c;而Pyhon是门富有表达力的语言&a…

蓝桥杯——lcd显示

一&#xff1a;复制文件 从官方参考文件中复制相关文件&#xff0c;Src中的lcd.c&#xff0c;Inc中的lcd.h&#xff0c;fonts.h复制到自己创建的文件中 二&#xff1a;lcd初始化 在lcd.h中找到四个初始化函数&#xff0c;将其写到main文件中 三&#xff1a;写lcd显示函数 在…

ligerUI在前端层面对于数据的验证拦截

当你的系统框架采用ligerUI的时候&#xff0c;对于常见的数据验证&#xff0c;我们可以采取ligerUI本身的一些API调用来进行前端的数据验证&#xff0c;例如当你想遍历验证每行数据的时候&#xff1a; var rows liger.get("edit_Mtl").getData(); for (var i 0; i…

ubuntu-24.04.1-desktop 中的 QT6.7 QtCreator 调试程序

ubuntu-24.04.1-desktop 中的 QT6.7 QtCreator 中调试程序 &#xff11; 启动调试时提示&#xff1a;The kit does not have a debugger set.&#xff12; CDB配置问题&#xff12;.1 选择 工具 -> 外部 -> 配置&#xff12;.2 配置 CDB 路径 &#xff11; 启动调试时提示…

VSCode ssh远程连接内网服务器(不能上网的内网环境的Linux服务器)的终极解决方案

VSCode ssh远程连接内网服务器&#xff08;不能上网的内网环境的Linux服务器&#xff09; 离线下载vscode-server并安装: 如果远程端不能联网可以下载包离线安装,下载 vscode-server 的 url 需要和 vscode 客户端版本的 commit-id 对应.通过 vscode 面板的帮助->关于可以获…

【C语言基础】基本数据类型和常量介绍

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 博客内容主要围绕&#xff1a; 5G/6G协议讲解 高级C语言讲解 Rust语言讲解 文章目录 基本数据类型和常量介绍一、整数类型 int二、浮点数值类型 f…

【Deepseek】AnythingLLM + Ollama

1. 下载安装 anythingllm 下载地址&#xff1a;https://anythingllm.com/desktop 2. 启动anything 点击 Get started 3.创建工作空间 4.选择Ollama大语言模型 聊天设置 当前只有一个1.5b的模型 下载完成7b模型后 选择后记得点击更新到工作空间&#xff01;&…

vscode settings(一):全局| 用户设置常用的设置项

参考资料 Visual Studio Code权威指南 by 韩骏 一. 全局设置与用户设置 1.1 Vscode支持两种不同范围的设置 用户设置(User Settings)&#xff1a;这是一个全局范围的设置&#xff0c;会应用到所有的Visual Studio Code实例中。工作区设置(Workspace Settings)&#xff1a;设…