【前端基础】Day 1 HTML

news2025/2/26 11:44:12

总结:

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.coloradmin.cn/o/2306338.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【前端基础】Day 2 HTML

目录 1.表格标签 2.列表标签 3.表单标签 4.综合案例 5.查阅文档 1.表格标签 <body><table align"center" border"1" cellpadding"0" cellspacing"0" width"500" height"100"><thead> …

若依前后端分离框架修改3.8.9版本(重点在安全框架讲解与微信小程序登录集成)

若依模板改造&#xff08;3.8.9&#xff09; 1、基础改造 下载代码 从[RuoYi-Vue: &#x1f389; 基于SpringBoot&#xff0c;Spring Security&#xff0c;JWT&#xff0c;Vue & Element 的前后端分离权限管理系统&#xff0c;同时提供了 Vue3 的版本](https://gitee.co…

selenium爬取苏宁易购平台某产品的评论

目录 selenium的介绍 1、 selenium是什么&#xff1f; 2、selenium的工作原理 3、如何使用selenium&#xff1f; webdriver浏览器驱动设置 关键步骤 代码 运行结果 注意事项 selenium的介绍 1、 selenium是什么&#xff1f; 用于Web应用程序测试的工具。可以驱动浏览…

kubernetes-完美下载

话不多说&#xff0c;直接开始从0搭建k8s集群 环境&#xff1a;centous7.9 2核 20G k8s-master 192.168.37.20 k8s-node1 192.168.37.21 k8s-node2 192.168.37.22 一&#xff1a;设置主机名 #设置主机名 hostnamectl set-hostname k8s-master hostnamectl set-h…

【初阶数据结构】树和二叉树

目录 前言树的概念与结构树的概念树的相关概念树的表示 二叉树的概念及结构二叉树的概念几种特殊的二叉树1.满二叉树2.完全二叉树 二叉树的性质二叉树的存储结构1、顺序存储2、链式存储 前言 前面我们学习了顺序表&#xff0c;单链表&#xff0c;栈和队列&#xff0c;它们在逻…

【中等】59.螺旋矩阵Ⅱ

题目描述 给你一个正整数 n &#xff0c;生成一个包含 1 到 n2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;[[1,2,3],[8,9,4],[7,6,5]]示例 2&#xff1a; 输入&#xff1a;n…

Spring Boot + Vue 接入腾讯云人脸识别API(SDK版本3.1.830)

一、需求分析 这次是基于一个Spring Boot Vue的在线考试系统进行二次开发&#xff0c;添加人脸识别功能以防止学生替考。其他有对应场景的也可按需接入API&#xff0c;方法大同小异。 主要有以下两个步骤&#xff1a; 人脸录入&#xff1a;将某个角色&#xff08;如学生&…

JAVA中包装类和泛型 通配符

目录 1. 包装类 1.1 基本数据类型和对应的包装类 1.2 装箱和封箱 1.3 自动自动装箱和封箱 2. 什么是泛型 3. 引出泛型 3.1 语法 4. 泛型类的使⽤ 4.1 语法 4.2 ⽰例 4.3 类型推导(Type Inference) 5 泛型的上界 5.1 语法 6. 通配符 6.1 通配符解决什么问题 6.2…

Qt TCP服务端和客户端程序

1、服务端程序 利用QtCreator新建QMainWindow或QWidget工程&#xff0c;绘制UI如下所示。 mainwindow.h代码如下&#xff1a; #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> #include <QTcpServer> #include <QTcpSocket> #include &l…

level2Day5

Makefile make是工程管理器 先写了1个f1.c里面写了一个函数 然后f2.c里面也写了一个函数 还有一个头节点 又写了一个makefile的函数 输入make编译&#xff0c;但是我没装make需要装一下。 sudo apt install make 然后make&#xff0c; Makefile变量的使用 通过赋值&#xff…

minio作为K8S后端存储

docker部署minio mkdir -p /minio/datadocker run -d \-p 9000:9000 \-p 9001:9001 \--name minio \-v /minio/data:/data \-e "MINIO_ROOT_USERjbk" \-e "MINIO_ROOT_PASSWORDjbjbjb123" \quay.io/minio/minio server /data --console-address ":90…

redis小记

redis小记 下载redis sudo apt-get install redis-server redis基本命令 ubuntu16下的redis没有protected-mode属性&#xff0c;就算sudo启动&#xff0c;也不能往/var/spool/cron/crontabs写计划任务&#xff0c;感觉很安全 #连接到redis redis-cli -h 127.0.0.1 -p 6379 …

计算机视觉(opencv-python)入门之图像的读取,显示,与保存

在计算机视觉领域&#xff0c;Python的cv2库是一个不可或缺的工具&#xff0c;它提供了丰富的图像处理功能。作为OpenCV的Python接口&#xff0c;cv2使得图像处理的实现变得简单而高效。 示例图片 目录 opencv获取方式 图像基本知识 颜色空间 RGB HSV CV2常用图像处理方…

ActiveMQ之VirtualTopic

一句话总结&#xff1a; VirtualTopic是为了解决持久化模式下多消费端同时接收同一条消息的问题。 现实中多出现这样一个场景&#xff1a; 生产端产生了一笔订单&#xff0c;作为消息MessageOrder发了出去。 这笔订单既要入订单系统归档&#xff0c;又要入结算系统收款&#x…

UE5 Computer Shader学习笔记

首先这里是绑定.usf文件的路径&#xff0c;并声明是用声明着色器 上面就是对应的usf文件路径&#xff0c;在第一张图进行链接 Shader Frequency 的作用 Shader Frequency 是 Unreal Engine 中用于描述着色器类型和其执行阶段的分类。常见的 Shader Frequency 包括&#xff1a…

2.1部署logstash:9600

实验环境&#xff1a;关闭防火墙&#xff0c;完成java环境 yum -y install wget wget https://d6.injdk.cn/oraclejdk/8/jdk-8u341-linux-x64.rpm yum localinstall jdk-8u341-linux-x64.rpm -y java -version 1.安装logstash tar xf logstash-6.4.1.tar.gz -C /usr/local…

SQL笔记#集合运算

目录 一、表的加减法 1、什么是集合运算 2、表的加法——UNION 3、集合运算的注意事项 4、包含重复行的集合运算——ALL运算 5、选取表中公共部分——INTERSECT 6、记录的减法——EXCEPT 二、联结(以列为单位对表进行联结) 1、什么是联结(JOIN) 2、内联结——INSER…

多模态人物视频驱动技术回顾与业务应用

一种新的商品表现形态&#xff0c;内容几乎存在于手淘用户动线全流程&#xff0c;例如信息流种草内容、搜索消费决策内容、详情页种草内容等。通过低成本、高时效的AIGC内容生成能力&#xff0c;能够从供给端缓解内容生产成本高的问题&#xff0c;通过源源不断的低成本供给倒推…

多功能免费网络测速及问题诊断工具

​软件介绍 在日常网络使用中&#xff0c;网络问题常常难以即时察觉&#xff0c;很多时候&#xff0c;只有当视频卡顿、网页加载半天没反应&#xff0c;乃至无法连接部分服务时&#xff0c;我们才惊觉网络出状况了。 这里有一款免费工具&#xff0c;专为家庭、办公以及跨国网…

【算法设计与分析】(一)介绍算法与复杂度分析

【算法设计与分析】&#xff08;一&#xff09;介绍算法与复杂度分析 前言一、什么是算法&#xff1f;二、算法的抽象机制三、描述算法四、复杂度分析4.1 时间复杂度4.2 空间复杂度 前言 从搜索引擎的高效检索&#xff0c;到推荐系统的个性化推荐&#xff0c;再到人工智能领域…