前端基础 | HTML基础:HTML结构,HTML常见标签
文章目录
- HTML
- 1、HTML结构
- 1.1HTML标签
- 1.1.1标签
- 1.1.2标签含义
- 1.2HTML文件基本结构
- 1.3标签层次结构
- 1.4 快速生成代码框架
- 2、HTML常见标签
- 2.1注释标签
- 2.2标题标签:h1–h6
- 2.3段落标签:p
- 2.4 换行标签:br
- 2.5格式化标签
- 2.6 图片标签:img
- 2.7超链接标签:a
- 2.7.1 链接的几种形式
HTML
1、HTML结构
1.1HTML标签
1.1.1标签
HTML代码是由“标签”构成的,<>中的就是标签。
形如等是双标签,双标签有开始有结束
例如:
<body>hello</body>
-
标签名body放在<>中
-
大部分标签成对出现,为开始标签,为结束标签
-
少数标签只有开始标签,称为“单标签“
-
开始标签和结束标签之间,写的是标签的内容hello
-
开始标签可能会带有”属性“ id属性相当于给这个标签设置了一个唯一的标识符(身份证号码),例如:
<body id = "myID">helloc</body>
1.1.2标签含义
- html:html文件的根标签
- head:编写页面相关的属性
- title:页面标题
- body: 页面内容展示信息
每一个标签相当于一个节点,所有标签构成一个DOM树,所有的标签都是html子标签,head和body是兄弟标签,head和title是父子标签。
1.2HTML文件基本结构
<html><head><title>第一个页面</title></head><body>hello world</body>
</html>
- html 标签是整个 html 文件的根标签(最顶层标签)
- head 标签中写页面的属性
- body 标签中写的是页面上显示的内容
- title 标签中写的是页面的标题.
1.3标签层次结构
-
父子关系
-
兄弟关系
<html><head><title>第一个页面</title></head><body>hello world</body> </html>
- head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
- title 是 head 的子标签
- head 是 title 的父标签. head 和 body 之间是兄弟关系
1.4 快速生成代码框架
在IDRA中创建文件xxx.html,直接输入!,按Tab键或者回车键,此时能够自动生成代码的主体框架。
一些细节:
<!DOCTYPE html>
称为DTD(文档类型定义),描述当前的文件是一个HTML5的文件<html lang="en">
其中lang属性表示当前页面是一个“英语页面”,有些浏览器会提示是否进行自动翻译<meta charset="UTF-8">
描述页面的字符编码方式,没有这一行可能会导致中文乱码<meta name="viewport" content = "width=device-width, initial-scale=1.0">
name = "viewprot"
其中viewport指的是设备的屏幕上能用来显示我们的网页的那一块区域content = "width = device-width, initial-scale=1.0"
在设置可视区和设备宽度等宽,并设置初始缩放为不缩放(对于移动端开发较为常见)
2、HTML常见标签
2.1注释标签
注释不会显示在界面上面,目的是提高代码的可读性
<!-- 这是一个注释 -->
CTRL + / 快捷键可以快速进行注释和取消注释
2.2标题标签:h1–h6
有六个标签,h1–h6,数字越大,字体越小
<h1>这是标题</h1>
<h2>这是标题</h2>
.....
<h6>这是标题</h6>
可以看到不同标题的效果如下
2.3段落标签:p
将一段较长的文本粘贴导html中,会发现并没有分成段落
-
p标签表示一个段落
<p>这是一个段落</p>
例子:
<p>这是第一个段落</p>
<p>这是另一个段落</p>
可以看到下面的段落效果:
2.4 换行标签:br
br是break的缩写,表示换行
- br是一个单标签(不需要结束标签)
- br标签不想p标签那样带有一个很大的空袭
<br/>
是规范写法,不建议写成
举例:
这是第一行<br/>这是第二行
可见下面的效果示意图,会发现两行中的间隙会比换段落的间距要窄一点:
2.5格式化标签
- 加粗: strong 标签 和 b 标签
- 倾斜: em 标签 和 i 标签
- 删除线: del 标签 和 s 标签
- 下划线: ins 标签 和 u 标签
举例:
<strong>keep coding</strong> keep coding <b>keep coding</b>
效果如图:
<u>keep coding</u> 或 <isn>keep coding</isn>
效果如图:
<i>keep coding</i> 或 <em>keep coding</em>
效果如图:
<s>keep coding</s> 或 <del>keep coding</del>
效果如下:
2.6 图片标签:img
img标签必须带有src属性,表示图片的路径,可以是绝对路径,也可以是相对路径
<img src="rose.jpg">
img标签的其他属性:
- alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字
- title: 提示文本. 鼠标放到图片上, 就会有提示
- width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡
- border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定
关于目录结构:
对于一个复杂的网站, 页面资源很多, 这种情况可以使用目录把这些文件整理好.
- 相对路径: 以 html 所在位置为基准, 找到图片的位置.
- 同级路径: 直接写文件名即可 (或者 ./)
- 下一级路径: image/1.jpg
- 上一级路径: …/image/1.jpg
- 绝对路径: 一个完整的磁盘路径, 或者网络路径. 例如
- 磁盘路径 D:\rose.jpg
- 网络路径 https://images0.cnblogs.com/blog/130623/201407/300958470402077.png
2.7超链接标签:a
- href: 必须具备, 表示点击后会跳转到哪个页面.
- target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开
2.7.1 链接的几种形式
-
外部链接:href引用其他网站的地址
<a href="http://www.baidu.com">百度</a>
-
内部链接:网站内部页面之间的连接,写相对路径即可
在一个目录中,先创建一个 1.html,再建一个 2.html
<!-- 1.html --> 我是 1.html <a href="2.html">点我跳转到 2.html</a> <!-- 2.html --> 我是 2.html <a href="1.html">点我跳转到 1.html</a>
-
空链接: 使用 # 在 href 中占位
<a href="#">空链接</a>
-
下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)
<a href="test.zip">下载文件</a>
-
网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中
<a href="http://www.sogou.com"><img src="rose.jpg" alt=""> </a>
-
锚点链接: 可以快速定位到页面中的某个位置
<a href="#one">第一集</a> <a href="#two">第二集</a> <a href="#three">第三集</a> <p id="one">第一集剧情 <br>第一集剧情 <br>... </p> <p id="two">第二集剧情 <br>第二集剧情 <br>... </p> <p id="three">第三集剧情 <br>第三集剧情 <br>... </p>
相关文章:

前端基础 | HTML基础:HTML结构,HTML常见标签
文章目录 HTML1、HTML结构1.1HTML标签1.1.1标签1.1.2标签含义 1.2HTML文件基本结构1.3标签层次结构1.4 快速生成代码框架 2、HTML常见标签2.1注释标签2.2标题标签:h1–h62.3段落标签:p2.4 换行标签:br2.5格式化标签2.6 图片标签:i…...

宏任务和微任务+超全面试真题
概念 微任务和宏任务是在异步编程中经常使用的概念,用于管理任务的执行顺序和优先级。 宏任务:setTimeout, setInterval,I/O 操作和 UI 渲染等。微任务: Promise 回调、async/await等 微任务通常比宏任务具有更高的优先级。 执…...

针对SVM算法初步研究
归纳编程学习的感悟, 记录奋斗路上的点滴, 希望能帮到一样刻苦的你! 如有不足欢迎指正! 共同学习交流! 🌎欢迎各位→点赞 👍 收藏⭐ 留言📝心态决定高度,细节决定成败…...
Java中的`String`不可变性详解
在Java中,String类具有不可变性(immutable),这意味着一旦String对象被创建,它的值将无法更改。所有对字符串的修改操作(如拼接、替换等)实际上都会生成一个新的字符串对象,而不会修改…...
c# SMTP发送邮件
string from ""; string fromAlias "MIS-TC"; string[] to { "" }; string subject "问题提交"; string body sb.ToString(); string ipaddr "smtp.email.qq.com"; int port 25; string credit ""; strin…...
GPU基础 -- 并行化与阿姆达尔定律
并行化与阿姆达尔定律 并行化是将计算任务分割成多个部分,使这些部分能够在多个处理器或核心上同时运行,从而加速任务的完成时间。阿姆达尔定律(Amdahl’s Law)则揭示了并行化所能带来的加速效果的限制。 阿姆达尔定律公式 阿姆…...
Lua热更
Lua 热更 前提 Lua是轻量级,可以解释执行的编程语言、性能好 基本原则 1.场景空 代码控制物体加载释放 2.场景一个 3.节点不手动挂代码 4.AssetsBundle资源管理 5.Lua开发框架 6.调试模式、发布模式 XLua 热更框架 XLua是C#环境下Lua的解决方案 1.Lua虚拟…...
提升汽车行业软件质量:ASPICE培训的关键实践方法
ASPICE(汽车行业软件过程改进和能力确定)培训是一种针对汽车行业软件开发和维护过程的标准化培训。 该培训旨在帮助组织提高其软件开发和维护过程的质量和效率。以下是ASPICE培训的一些最佳实践方法: 1. 理解ASPICE框架:首先&…...

2024 全新智能识别 API 接口震撼登场
近年来,随着人工智能技术的快速发展,智能识别技术逐渐成为了各个领域的热门应用。在这个大背景下,2024 年的全新智能识别 API 接口横空出世,为我们的生活带来了更多的便利。本文将为大家详细介绍这个全新智能识别 API 接口&#x…...

《UniVS: Unified and Universal Video Segmentation with Prompts as Queries》要点提炼
论文来源:https://arxiv.org/abs/2402.18115 《UniVS: Unified and Universal Video Segmentation with Prompts as Queries》是2024CVPR中的一篇关于视频分割的论文, 主要内容: 论文提出了一个名为UniVS的新型统一视频分割架构,…...

计算机毕业设计选题推荐-推拿知识互动平台-Java/Python项目实战
✨作者主页:IT毕设梦工厂✨ 个人简介:曾从事计算机专业培训教学,擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…...

基于SpringBoot+Vue+MySQL的瑜伽馆管理系统
系统展示 用户前台界面 管理员后台界面 系统背景 本系统采用SpringBoot作为后端框架,Vue.js构建前端用户界面,MySQL作为数据库存储系统,实现了瑜伽馆的全面数字化管理。系统涵盖会员管理、课程预约、教练排班、收入统计等功能模块,…...

【MySQL】EXPLAIN(执行计划)关键字是什么?
简介: explain是一个强大的 SQL 命令,用于分析和优化查询性能。通过查看数据库执行计划,我们可以理解查询是如何被处理的,包括表的访问顺序、使用的索引、连接类型等。这对于找到潜在的性能瓶颈非常重要。 目录 一、基本含义 二…...
Mybatis两种方式来调用sql语句
使用Mybatis时,有两种方式来调用sql语句: 方式一(直接通过Session对象调用sql语句): SqlSession sqlSession sqlSessionFactory.openSession(); User user sqlSession.selectOne("userTest.selectUser"…...

第十八节:学习统一异常处理(自学Spring boot 3.x的第五天)
这节记录下如何通过AOP方式统一处理异常拦截。 第一步: 新建一个exception包,创建一个ExcetionHandler.java(名字随意取) package cn.wcyf.wcai.exception;import cn.wcyf.wcai.common.Result; import org.springframework.web…...
flink中slotSharingGroup() 的详解
在 Apache Flink 中,slotSharingGroup() 是一个用于控制算子(operator)之间资源共享的机制。它允许多个算子共享相同的 slot(即资源容器)。Slot 是 Flink 中的资源单位,slot 共享可以提高资源利用率&#x…...
ASPF 技术介绍
...
77-java 装饰器模式和适配器模式区别
Java中的装饰器模式和适配器模式虽然都涉及到对象的组合和包装,但它们的应用场景和目的有所不同。 装饰器模式的目的是在不修改原始对象的基础上,动态地添加功能或行为。它允许用户通过创建一个包含原始对象的包装类(装饰器ÿ…...
5. Fabric 设置画布大小
1. 设置宽度 canvas.setWidth(width)2. 设置高度 canvas.setHeight(height)3. 设置大小 canvas.setDimensions({width,height })4. 画布的缩放 canvas.on(mouse:wheel, (opt) > {const delta opt.e.deltaY // 滚轮,向上滚一下是 -100,向下滚一下…...

240912-通过Ollama实现网站知识总结
A. 最终效果 B. 准备工作 报错: USER_AGENT environment variable not set, consider setting it to identify your requests.-CSDN博客 C. 完整代码 # https://coreyclip.github.io/Ollama-Web-Summaries/import os os.environ[USER_AGENT] Mozilla/5.0 (Windows NT 10.…...

SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
基于算法竞赛的c++编程(28)结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中,结构体可以嵌套使用,形成更复杂的数据结构。例如,可以通过嵌套结构体描述多层级数据关系: struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
Vue记事本应用实现教程
文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展:显示创建时间8. 功能扩展:记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

大话软工笔记—需求分析概述
需求分析,就是要对需求调研收集到的资料信息逐个地进行拆分、研究,从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要,后续设计的依据主要来自于需求分析的成果,包括: 项目的目的…...
如何为服务器生成TLS证书
TLS(Transport Layer Security)证书是确保网络通信安全的重要手段,它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书,可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
【决胜公务员考试】求职OMG——见面课测验1
2025最新版!!!6.8截至答题,大家注意呀! 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:( B ) A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...
C++.OpenGL (10/64)基础光照(Basic Lighting)
基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...
【HTTP三个基础问题】
面试官您好!HTTP是超文本传输协议,是互联网上客户端和服务器之间传输超文本数据(比如文字、图片、音频、视频等)的核心协议,当前互联网应用最广泛的版本是HTTP1.1,它基于经典的C/S模型,也就是客…...

Java面试专项一-准备篇
一、企业简历筛选规则 一般企业的简历筛选流程:首先由HR先筛选一部分简历后,在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如:Boss直聘(招聘方平台) 直接按照条件进行筛选 例如:…...