【前端基础】Day 1 HTML

news/2025/2/26 16:30:17
htmledit_views">

总结:

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快捷键

html"><!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标题标签 

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

2.2.2段落和换行标签

 

html"><body>
    <p>在全球化背景下,大国关系格局<br />的构建成为国际政治中的重要议题。作为世界第二大经济体和联合国安理会常任理事国,中国在构建大国关系格局中发挥着举足轻重的作用。本文旨在探讨中国构建大国关系格局的路径与策略。</p>

    <p>中国构建大国关系格局的首要原则是坚持和平共处五项原则,即互相尊重主权和领土完整、互不侵犯、互不干涉内政、平等互利、和平共处。这些原则不仅是中国外交政策的基础,也是处理大国关系的基本准则。中国主张通过对话和协商解决国际争端,反对任何形式的霸权主义和强权政治,致力于维护国际秩序的稳定性和连续性。
    </p>
</body>

2.2.3文本格式化标签

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

</body>

 

2.2.4div和span标签

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

2.3.1 图像标签和路径

html"><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路径

html"><body>
    <img src="图像标签1.jpg" height="300" />
    <img src="images/下一级路径.jpg" height="300" />
    <img src="../上一级路径.jpg" height="300" />

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

</body>

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

2.3.3超链接标签

html"><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特殊字符

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

http://www.niftyadmin.cn/n/5868934.html

相关文章

【前沿探索篇九】【DeepSeek具身智能:机器人操作学习框架】

第一章 具身智能的"五感觉醒" 1.1 多模态感知的神经交响乐 我们的多模态编码器就像机器人的大脑皮层,把不同传感器数据拧成一股绳: class MultimodalEncoder(nn.Module):def __init__(self):sel

电脑不能正常启动了怎么办?查看解决方法

电脑是我们日常生活和工作中不可缺少的工具&#xff0c;但有时候我们可能会遇到电脑不能正常启动的问题&#xff0c;这会给我们带来很多麻烦和困扰。那么&#xff0c;电脑不能正常启动的原因有哪些&#xff0c;又该如何解决呢&#xff1f;本文将为你介绍几种常见的情况和对应的…

STM32【3】芯片的底层组成概论

关于单片机的组成 单片机的意思是&#xff0c;小小计算电脑&#xff0c;麻雀虽小&#xff0c;五脏俱全&#xff0c;里面包含了CPU&#xff0c;ROM&#xff0c;RAM&#xff0c;各种外设。 CPU地位最高&#xff0c;可以访问ROM和RAM&#xff0c;Flash&#xff0c;GPIO等外设&…

面试基础----ReentrantLock vs Synchronized

ReentrantLock vs Synchronized&#xff1a;源码级解析与高并发场景下的锁博弈 引言&#xff1a;多线程编程中的锁为何重要&#xff1f; 业务背景&#xff1a;北京互联网大厂的高并发场景&#xff08;如电商秒杀、支付交易、实时推荐系统&#xff09;对线程安全和性能的极致要…

医疗UI的特殊法则:复杂数据可视化的“零错误”设计守则

在当今医疗技术日新月异的时代&#xff0c;医疗UI设计不仅关乎用户体验&#xff0c;更直接关联到患者的生命健康。尤其是在处理复杂数据时&#xff0c;如何确保可视化的准确性和无误性&#xff0c;成为医疗UI设计的一大挑战。以下&#xff0c;我们将深入探讨医疗UI在复杂数据可…

城电科技|会追日的智能花,光伏太阳花开启绿色能源新篇章

当艺术与科技相遇&#xff0c;会碰撞出怎样的火花&#xff1f;城电科技推出的光伏太阳花&#xff0c;以其独特的设计与智能化的功能&#xff0c;给出了答案。这款产品不仅具备太阳能发电的实用功能&#xff0c;更是一件充满科技属性的艺术性光伏产品&#xff0c;吸引了广泛关注…

如何去除word页眉上面的横线

问题&#xff1a;如何去除页眉上面的横线 也就是字上面的这一条线 解决方法&#xff1a; 双击选中&#xff0c;然后光标会定位到页眉上&#xff0c;点击下图中的无格式&#xff0c;就可以消除了 消除后的情况如下

FFMpegCore:.NET 中进行音视频处理解决方案

简介 FFMpegCore 是一个基于 .NET Standard 的 FFMpeg/FFProbe 封装库&#xff0c;用于轻松将媒体分析和转换功能集成到应用程序中。它支持同步和异步调用。 安装和配置 1. 安装库 Install-Package FFMpegCoreFFMpegCore 库本身不包含 FFmpeg 可执行文件&#xff0c;因此需…