前端基础 | 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>
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/419358.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

git submodule子模块的使用

子模块的使用 添加子模块 添加子模块 git submodule add <子仓库URL> <子仓库路径> 例子&#xff1a; git submodule add http://192.168.100.181/guideir/poco.git 3rdparty/poco 若子模块存在好几个分支&#xff0c;可以在添加子模块时&#xff0c;指定分支 g…

两个月冲刺软考——访问位与修改位的题型(淘汰哪一页);内聚的类型;关于码制的知识点;地址映射的相关内容

1.访问位与修改位的题型(淘汰哪一页) 访问位&#xff1a;为1时表示在内存期间被访问过&#xff0c;为0时表示未被访问&#xff1b;修改位&#xff1a;为1时表示该页面自从被装入内存后被修改过&#xff0c;为0时表示未修改过。 置换页面时&#xff0c;最先置换访问位和修改位为…

mac安装spark

参考&#xff1a;在Mac上安装Spark apache-spark-3.5.1_mac安装spark-CSDN博客 几个需要用到的路径&#xff1a; hadoop的bin目录&#xff1a;/opt/homebrew/Cellar/hadoop/3.4.0/bin spark的conf目录/opt/homebrew/Cellar/apache-spark/3.5.2/libexec/conf spark的bin目录&am…

iOS——retain和release底层原理

retain实现原理 retain的源码&#xff1a; //使用此方法等价于使用[this retain] inline id objc_object::retain() {//确保对象不是tagged pointerASSERT(!isTaggedPointer());return rootRetain(false, RRVariant::FastOrMsgSend); }ALWAYS_INLINE id objc_object::rootR…

VR虚拟展厅的应用场景有哪些?

虚拟展厅作为一种利用虚拟现实技术构建的三维展示空间&#xff0c;其应用场景广泛且多样。视创云展为企业虚拟展厅搭建提供技术支持。以下是一些主要的应用场景&#xff1a; 1. 博物馆和艺术展览 文物保护与展示&#xff1a; 在博物馆中&#xff0c;为了保护珍贵的文物和艺术…

数据结构与算法学习day20-二叉树的最大深度、最小深度、完全二叉树的节点个数、平衡二叉树、二叉树所有路径

一、二叉树的最大深度 1.题目 104. 二叉树的最大深度 - 力扣&#xff08;LeetCode&#xff09; 2.思路 2.1递归法 二叉树节点的深度&#xff1a;指从根节点到该节点的最长简单路径边的条数或者节点数&#xff08;取决于深度从0开始还是从1开始&#xff09;二叉树节点的高度…

【Python 学习】Pandas基础与应用(1)

题目 1 Pandas 简介1.1 主要特征1.2 Pandas 安装 2 Pandas中的数据结构2.1 Series 数据结构和操作2.1.1 Series的数据结构2.1.2 Seres的操作 2.2 DataFrame 数据结构和操作2.2.1 DataFrame 数据结构2.2.2 Dataframe 操作2.2.3 DateFrame 的特殊操作 2.3 Series 和 DataFrame 的…

Linux——网络基础Socket编程

目录 一计算机网络背景 二协议 1初始协议 1.1协议分层 1.2OSI七层模型 1.3TCP/IP五层模型 2再始协议 2.1为什么要有TCP/IP协议 2.2TCP/IP与OS的关系 2.3所以什么是协议 三网络传输基本流程 1局域网&#xff08;以太网&#xff09;通信原理 1.1认识mac地址 2同…

【牛站 / USACO2007】

题目 思路 离散化&#xff08;降低空间复杂度&#xff09; 点的编号 ∈ [ 1 , 1000 ] &#xff0c;但是点的个数最多为 2 ⋅ T ∈ [ 4 , 200 ] 点的编号 \in [1, 1000]&#xff0c;但是点的个数最多为 2 \cdot T \in[4, 200] 点的编号∈[1,1000]&#xff0c;但是点的个数最多为…

python文件自动化(4)

接上节课内容&#xff0c;在开始正式移动文件到目标文件夹之前&#xff0c;我们需要再思考一个问题。在代码运行之前&#xff0c;阿文的下载文件夹里已经存在一些分类文件夹了&#xff0c;比如图例中“PDF文件”这个文件夹就是已经存在的。这样的话&#xff0c;在程序运行时&am…

电脑硬盘数据丢失了怎么恢复?简单实用的硬盘数据找回的方法

我们的电脑使用硬盘作为存储设备来保存数据&#xff0c;硬盘里的数据是存储在扇区上&#xff0c;这些存储数据的单元则位于表面有磁性材料的旋转的盘片上。硬盘内部的磁头悬浮于高速旋转的盘片上&#xff0c;用于读写和检索数据。 假如我们使用电脑时不小心删除了某个文件&…

【B题第二套完整论文已出】2024数模国赛B题第二套完整论文+可运行代码参考(无偿分享)

2024数模国赛B题完整论文 摘要&#xff1a; 随着电子产品制造业的快速发展&#xff0c;质量控制与成本优化问题成为生产过程中亟待解决的核心挑战。为应对生产环节中的质量不确定性及成本控制需求&#xff0c;本文结合抽样检测理论和成本效益分析&#xff0c;通过构建数学模型…

ELK笔记

要搞成这样就需要钱来买服务器 开发人员一般不会给服务器权限&#xff0c;不能到服务器上直接看日志&#xff0c;所以通过ELK看日志。不让开发登录服务器。即使你查出来是开发的问题&#xff0c;费时间&#xff0c;而且影响了业务了&#xff0c;就是运维的问题 开发也不能登录…

2024国赛数学建模C题论文:基于优化模型的农作物的种植策略

大家可以查看一下35页&#xff0c;包含结构完整&#xff0c;数据完整的C题论文&#xff0c;完整论文见文末名片 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 添加图片注释&#xf…

Computer Exercise

每日一练 单选题 &#xff08;     D     &#xff09; 的作用是在外界中断供电的情况下&#xff0c;及时给计算机等设备供电。 A.WPS     B.USB     C.UBS     D.UPS&#xff08;    B     &#xff09;广泛应用于精密仪器、医疗设备等对电流稳定性要求较高的场…

Unity之获取Avpro视频画面并在本地创建缩略图

一、效果 获取StreamingAssets文件夹下的所有视频&#xff08;包含其子文件夹&#xff09;&#xff0c;获取指定时间的视频画面&#xff0c;然后将图片保存到本地磁盘中。 二、关于Avpro的事件监听 当指定视频时间进度时会触发FinishedSeeking&#xff0c;代表加载完成这时我们…

fpga系列 HDL:Relu激活函数实现与仿真

代码实现对OUTPUT_NODES个32位浮点数进行RELU操作。32位浮点数的二进制表示遵循 IEEE 754 标准&#xff0c;通常称为单精度浮点数。这个标准定义了浮点数的表示方法&#xff0c;具体分为三个部分&#xff1a; 符号位 (1 bit): 用于表示浮点数的正负。&#xff08; 0 表示正数&a…

全国糖酒会,就这5个字。“会天下美味”

“全国糖酒会&#xff0c;会天下美味”&#xff0c;是全国糖酒会的品牌口号。这个品牌口号来的非常偶然。 两年前&#xff0c;全国糖酒会准备更新标志之时&#xff0c;也设计了一个品牌口号。新标志发布前几天&#xff0c;临时作了调整&#xff0c;最终变成了“全国糖酒会&…

linux下oracle启动及关于pfile和spfile启动参数文件的配置

在现代企业环境中&#xff0c;Oracle数据库作为关键的业务支撑平台&#xff0c;承载着大量的数据处理和事务管理任务。 无论是对于DBA&#xff08;数据库管理员&#xff09;还是开发人员来说&#xff0c;掌握Oracle数据库的基本操作和配置技巧都是至关重要的。本文提供了一份全…

Flutter基本组件Text使用

Text是一个文本显示控件&#xff0c;用于在应用程序界面中显示单行或多行文本内容。 Text简单Demo import package:flutter/material.dart;class MyTextDemo extends StatelessWidget {const MyTextDemo({super.key});overrideWidget build(BuildContext context) {return Sca…