【前端基础】Day 1 HTML

devtools/2025/2/28 14:11:41/
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.ppmy.cn/devtools/163370.html

相关文章

【蓝桥杯嵌入式】各模块学习总结

系列文章目录 留空 文章目录 系列文章目录前言一、LED模块1.1 赛题要求1.2 模块原理图1.3 编写代码1.4 赛题实战 二、LCD模块2.1 赛题要求2.2 模块原理图2.3 编写代码2.4 赛题实战 三、按键模块3.1 赛题要求3.2 模块原理图3.3 编写代码3.4 赛题实战 四、串口模块4.1 赛题要求4…

2004-2024年光刻机系统及性能研究领域国内外发展历史、差距、研究难点热点、进展突破及下一个十年研究热点方向2025.2.27

一.光刻机概述 1.1 定义与原理 光刻机是 集成电路芯片制造的核心设备 ,其工作原理基于 光学成像和化学反应 。它通过 曝光系统 将掩模版上的图形精确地转移到涂覆于硅片表面的光刻胶上。这个过程涉及复杂的物理和化学反应,主要包括以下几个步骤: 涂胶 :在硅片表面均匀涂抹…

C++ | 哈希表

前言 &#x1f493; 个人主页&#xff1a;普通young man-CSDN博客 ⏩ 文章专栏&#xff1a;C_普通young man的博客-CSDN博客 ⏩ 本人giee: 普通小青年 (pu-tong-young-man) - Gitee.com 若有问题 评论区见&#x1f4dd; &#x1f389;欢迎大家点赞&#x1f44d;收藏⭐文章 —…

win32汇编环境,对话框中状态栏的应用示例

;运行效果 ;win32汇编环境,状态栏的应用示例 ;一般放在窗口最下面的栏目&#xff0c;可用来显示一些状态 ;直接抄进RadAsm可编译运行。重要部分加备注。 ;下面为asm文件 ;>>>>>>>>>>>>>>>>>>>>>>>>&g…

网络安全与等保2.0

等保等级标准 信息系统按照重要性和受破坏后的危害性进行分级 第一级自主安全防护级&#xff1a;信息系统受到破坏后&#xff0c;会对公民、法人和其他组织权益造成损害&#xff0c;但不损害国家安全、社会秩序和公共利益。 第二级审计安全保护级&#xff1a;信息系统受到破坏…

【Linux文件IO】系统IO和标准IO介绍

在 Linux 系统中&#xff0c;文件操作主要分为两种&#xff1a;系统 IO 和 标准 IO。这两种 IO 方式各有特点&#xff0c;适用于不同的场景。 一、系统IO 系统 IO 是指操作系统提供给用户程序调用的一组“特殊”接口&#xff0c;通过这些接口&#xff0c;用户程序可以获得操作…

蓝桥杯单片机组第十二届省赛第二批次

前言 第十二届省赛涉及知识点&#xff1a;NE555频率数据读取&#xff0c;NE555频率转换周期&#xff0c;PCF8591同时测量光敏电阻和电位器的电压、按键长短按判断。 本试题涉及模块较少&#xff0c;题目不难&#xff0c;基本上准备充分的都能完整的实现每一个功能&#xff0c;并…

additional-spring-configuration-metadata.json实现springboot自定义提示

在配置additional-spring-configuration-metadata.json文件后&#xff0c;在开发人员的IDE工具使用个人编写的配置读取很有效的在application.properties或application.yml文件下完成提示。 配置元数据文件位于jar下面。 META-INF/spring-configuration-metadata.json它们使用简…