HTML-基础标签

1. HTML初识

        1.1 什么是HTML

        HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，是用来描述网页的一种语言。所谓超文本，因为它可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。

        1.2 HTML骨架
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body></body>
</html><!-- 1. html 标签：所有HTML中标签的一个根节点，根标签2. head 标签：文档的头部（描述了文档的各种属性和信息，包括文档的标题、在web中的位置以及和其他文件的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。注意在head标签中我们必须要设置的标签是title.）3. tutle 标签：文档标题4. body 标签： 文档的主体（包含文档的所有内容如文本、超链接、图片等）5. <!DOCTYPE html> ：文档类型，用于向浏览器说明当前文档使用的是那种HTML或XHTML标准规范6. <meta charset="UTF-8"> ：字符集-->
        1.3 标签分类

                双标签：<标签名>内容</标签名> 该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。          

例如：<body>内容</body>

                 单标签：<标签名/> 单标签也称空标签，是指用一个标签符号既可以完整描述整个功能的标签。

例如：<br/>

    

2. 常用标签

        2.1 标题标签

                HTML提供了六个等级的标题，分别是 ：<h1><h1/>,<h2><h2/>,<h3><h3/>,<h4><h4/>,<h5><h5/>,<h6><h6/>。

                注意：1. 标题标签语义：作为标题使用，并且依据重要性递减

                           2. h1 标签因为重要，尽量少用。一般h1都是给logo或页面中重要的标题信息使用。

        其基本语法格式如下：

    <h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6>

        页面显示：

        2.2 段落标签

               默认情况下，文本在一段中会根据浏览器窗口的大小自动换行。

<p>段落</p>
        2.3 水平线标签

                在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，<hr />就是创建横跨网页水平线的标签。其基本语法格式如下：

<hr/>

  

        2.4 换行标签

                使某段文本强制换行显示，使用换行标签

<br/>
        2.5 div span 标签            

                div span是没有语义的，是我们网页布局主要的2个盒子css+div。

                div就是division的缩写，分割、分区的意思，其实有很多div 来组合网页

                span，跨度、跨距；范围 

<body>文本内容<!-- div独占一行，所以适合做布局操作 --><div>div内容</div><!-- span不独占一行，所以适合做文本操作 --><span>span1内容</span><span>span2内容</span><br><span style="color: red;"><del>原价998</del></span>现价98
</body>

 

        2.6 文本语气化标签

                在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

<body><!-- b 粗体 i 斜体 u 下划线 s 删除线  这几个没有语义表示，只是样式变化--><!-- strong 粗体 em 斜体 ins 下划线 del 删除线这些语义表示更强烈，有利于SEO搜索引擎搜索一下阅读软件在阅读时也会突出语气--><b>粗体</b> &nbsp; <strong>粗体</strong><br><i>斜体</i><em>斜体</em><br><u>下滑线</u><ins>下划线</ins><br><s>删除线</s><del>删除线</del><br>
</body>

        2.7 图片标签
                2.7.1 标签属性

                        属性就是特征，如手机的颜色、手机的尺寸等。

                        使用HTML制作网页时，如果需要HTML标签提供更多的信息，可以使用HTML标签属性加以设置。基本格式如下：

<标签名 属性1="属性值1" 属性2="属性值2"...>内容</标签名>

                        1. 标签可以有多个属性，必须写在开始标签中，位于标签名后面。

                        2. 属性之间不分先后顺序，标签名与属性、属性与属性之间以空格分开。

                        3. 任何标签的属性都有默认值，省略该属性则取默认值。

                2.7.2 图片标签
<body><!-- src 图片源路径:相对路径：./ 当前文件夹下 ../ 父文件夹下  ../../ 父文件夹的父文件夹下绝对路径：D:/xxx/xxxhttp://xxxxxalt 图片加载失败时，显示的文字width 宽度 height 高度 当只设置其中一个时，另一个等比例缩放border 边框--><img src="./img/2.jpg" title="图片" alt="图片" height="600"><img src="./img/1.jpg" title="图片" alt="图片" height="600"><br><img src="https://th.bing.com/th/id/OIP.5cWjcERPRH56xhAIqmoZEAHaEK?rs=1&pid=ImgDetMain" alt="图片" height="300" title="图"><img src="https://img.3dmgame.com/uploads/images/news/20190322/1553247085_178021.jpg" alt="图片" height="300" title="图"></body>

   

        2.8 链接标签

                在HTML中创建朝链接，只需要用标签环绕需要被链接的对象即可，基本语法如下：

<body><!-- href 必须写如果链接不能点击，说明没有href属性，或者href拼写错误target 打开方式_self 当前窗口打开，默认_blank 新窗口打开title 鼠标悬停提示文字--><!-- <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a> --><a href="http://www.taobao.com" target="_blank" title="淘宝">淘宝</a><a href="http://www.baidu.com" target="_blank">百度</a></body>

                注意：1. 外部连接需要添加全域名，如：http://baidu.com

                           2.内部链接直接链接内部页面名称即可，比如< a href="index.html">首页</a >

                     3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

                          4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

                 锚点定位：通过创建锚点连接，用户能够快速定位到目标内容。常用于长页面。

<body><!-- 1.使用<a href="id名">创建链接文本(被点击的)</a> 例如：<a href="#tp"> 2.使用相应的id名标注跳转目标的位置例如：<h3 id="tp">指定位置</h3> --><a href="#tp1">111</a><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p id="tp1">1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
</body>

                base标签：设置整体链接的打开状态，写在<head></head>中。

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><base target="_blank"/> <!-- 给当前文件中所有连接设置打开方式 --><title>Document</title>
</head>
        2.9 特殊字符

        2.10 注释标签

                注释标签不会显示在浏览器窗口，但是会被下载到用户的计算机上。快捷键ctrl + / 或 ctrl + shift + /

<-- 注释语句 -->
        2.11 列表标签

                容器里面装载着文字或图表的一种形式，叫列表。

                列表的最大特点是：整齐、有序。

<body><!-- ul 是无序列表，每一个li是一个列表项 --><!-- 注意：1.  <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。2. <li>与</li>之间相当于一个容器，可以容纳所有元素。3. 无序列表会带有自己样式属性，但是一般不会使用，会使用CSS来定义--><ul><li>第一项</li><li>第二项</li><li>第三项</li></ul><!-- ol 是有序列表，每一个li是一个列表项 --><!-- type 标签可以定义样式 --><ol type="a"><li>第一项</li><li>第二项</li><li>第三项</li></ol><!-- dl 是自定义列表 --><dl><dt>河北省</dt><dd>石家庄</dd><dd>唐山</dd><dt>北京</dt><dd>朝阳</dd><dd>昌平</dd></dl>
</body>

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

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

[Mac软件]Adobe Substance 3D Stager 2.1.4 3D场景搭建工具

[Mac软件]Adobe Substance 3D Stager 2.1.4 3D场景搭建工具

应用介绍 Adobe Substance 3D Stager&#xff0c;您设备齐全的虚拟工作室。在这个直观的舞台工具中构建和组装 3D 场景。设置资产、材质、灯光和相机。导出和共享媒体&#xff0c;从图像到 Web 和 AR 体验。 处理您的最终图像 Substance 3D Stager 可让您在上下文中做出创造性…
阅读更多...
论文阅读：SOLOv2: Dynamic, Faster and Stronger

论文阅读：SOLOv2: Dynamic, Faster and Stronger

目录 概要 Motivation 整体架构流程 技术细节 小结 论文地址&#xff1a;[2003.10152] SOLOv2: Dynamic and Fast Instance Segmentation (arxiv.org) 代码地址&#xff1a;GitHub - WXinlong/SOLO: SOLO and SOLOv2 for instance segmentation, ECCV 2020 & NeurIPS…
阅读更多...
【OpenCV C++】Mat img.total() 和img.cols * img.rows 意思一样吗？二者完全相等吗？

【OpenCV C++】Mat img.total() 和img.cols * img.rows 意思一样吗？二者完全相等吗？

文章目录 1 结论及区别2 Mat img的属性 介绍1 结论及区别 在大多数情况下，img.total() 和 img.cols * img.rows 是相等的，但并不总是完全相等的。下面是它们的含义和一些区别： 1.img.total() 表示图像中像素的总数，即图像的总像素数量。2.img.cols * img.rows 也表示图像中…
阅读更多...
【机器人最短路径规划问题（栅格地图）】基于遗传算法求解

【机器人最短路径规划问题（栅格地图）】基于遗传算法求解

基于遗传算法求解机器人最短路径规划问题&#xff08;栅格地图&#xff09;的仿真结果 仿真结果&#xff1a; 路径长度的变化曲线&#xff1a; 遗传算法优化后的机器人避障路径&#xff1a;
阅读更多...
ky10-server docker 离线安装包、离线安装

ky10-server docker 离线安装包、离线安装

离线安装脚本 # ---------------离线安装docker------------------- rpm -Uvh --force --nodeps *.rpm# 修改docker拉取源为国内 rm -rf /etc/docker mkdir -p /etc/docker touch /etc/docker/daemon.json cat >/etc/docker/daemon.json<<EOF{"registry-mirro…
阅读更多...
yolov9 瑞芯微芯片rknn部署、地平线芯片Horizon部署、TensorRT部署

yolov9 瑞芯微芯片rknn部署、地平线芯片Horizon部署、TensorRT部署

特别说明&#xff1a;参考官方开源的yolov9代码、瑞芯微官方文档、地平线的官方文档&#xff0c;如有侵权告知删&#xff0c;谢谢。 模型和完整仿真测试代码&#xff0c;放在github上参考链接 模型和代码。 之前写过yolov8检测、分割、关键点模型的部署的多篇博文&#xff0c;y…
阅读更多...
flutter 加密安全

flutter 加密安全

前言&#xff1a;数据安全 数据的加密解密操作在 日常网络交互中经常会用到&#xff0c;现在密码的安全主要在于 秘钥的安全&#xff0c;如论 DES 3DES AES 还是 RSA, 秘钥的算法&#xff08;计算秘钥不固定&#xff09; 和 保存&#xff0c;都决定了你的数据安全&#xff1b;…
阅读更多...
电子电器架构新趋势 —— 最佳着力点：域控制器

电子电器架构新趋势 —— 最佳着力点：域控制器

电子电器架构新趋势 —— 最佳着力点&#xff1a;域控制器 我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师&#xff08;Wechat&#xff1a;gongkenan2013&#xff09;。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师…
阅读更多...
wpf 数据绑定 数据转换

wpf 数据绑定 数据转换

1.概要 数据绑定&#xff0c;有时候绑定的数据源和目标的数据类型不同&#xff0c;这时候就需要转换。 2.代码 2.1 xaml(eXtensible Application Markup Language) 可扩展应用程序标记语言 <Window x:Class"WpfApp6.MainWindow"xmlns"http://schemas.mi…
阅读更多...
小白水平理解面试经典题目LeetCode 655. Print Binary Tree【Tree】

小白水平理解面试经典题目LeetCode 655. Print Binary Tree【Tree】

655 打印二叉树 一、小白翻译 给定二叉树的 root &#xff0c;构造一个 0 索引的 m x n 字符串矩阵 res 来表示树的格式化布局。格式化布局矩阵应使用以下规则构建&#xff1a; 树的高度为 height &#xff0c;行数 m 应等于 height 1 。 列数 n 应等于​​xheight1​​ - …
阅读更多...
ROS-Ubuntu 版本相关

ROS-Ubuntu 版本相关

ROS-Ubuntu 版本相关&#xff1a;安装指引 年代ROS1版本Ubuntu 版本2014Indigo14.042016Kinetic16.042018Melodic18.042020Noetic20.04 & 22.04 ROS2兼顾了工业使用上的问题。 年代ROS2版本Ubuntu 版本2022Humble20.04 & 22.042023Iron16.04 相关参考&#xff1a; […
阅读更多...
Linux/Spectra

Linux/Spectra

Enumeration nmap 第一次扫描发现系统对外开放了22&#xff0c;80和3306端口&#xff0c;端口详细信息如下 22端口运行着ssh&#xff0c;80端口还是http&#xff0c;不过不同的是打开了mysql的3306端口 TCP/80 进入首页&#xff0c;点击链接时&#xff0c;提示域名不能解析&…
阅读更多...
【深度学习目标检测】二十一、基于深度学习的葡萄检测系统-含数据集、GUI和源码（python，yolov8）

【深度学习目标检测】二十一、基于深度学习的葡萄检测系统-含数据集、GUI和源码（python，yolov8）

葡萄检测在农业中具有多方面的意义&#xff0c;具体来说如下&#xff1a; 首先&#xff0c;葡萄检测有助于保障农产品质量安全。通过对葡萄进行质量安全专项监测&#xff0c;可以确保葡萄中的农药残留、重金属等有害物质含量符合标准&#xff0c;从而保障消费者的健康。同时&am…
阅读更多...
Ubuntu Mysql Innodb cluster集群搭建+MaxScale负载均衡（读写分离）

Ubuntu Mysql Innodb cluster集群搭建+MaxScale负载均衡（读写分离）

Ubuntu系统版本 20.04.3 LTS (Focal Fossa) 、64位系统。 cat /etc/os-release查看Ubuntu系统是32位还是64位 uname -m如果显示“i686”，则表示安装了32位操作系统。如果显示“x86_64”，则表示安装了64位操作系统。 一、安装MySql 参考： https://blog.csdn.net/qq_3712…
阅读更多...
Idea安装gideabrowser插件

Idea安装gideabrowser插件

Idea安装gideabrowser插件 一、安装二、设置教程 一、安装 gideabrowser链接地址 二、设置教程 在人生的舞台上&#xff0c;奋力拼搏&#xff0c;才能演绎出最精彩的人生之歌。面对挑战和困难&#xff0c;不妥协、不气馁&#xff0c;只争朝夕&#xff0c;方显坚韧与智慧。努…
阅读更多...
10.题号：编号3227 找到最多的数

10.题号：编号3227 找到最多的数

题目&#xff1a; ###本题考察map和枚举 #include<bits/stdc.h> using namespace std; map<int,int> mp; int main(){int n,m;cin>>n>>m;for(int i1;i<m*n;i){int x;cin>>x;mp[x];}for(const auto & [x,y] : mp){if(2*y>n*m/2){cout…
阅读更多...
【MATLAB】 LMD信号分解+FFT傅里叶频谱变换组合算法

【MATLAB】 LMD信号分解+FFT傅里叶频谱变换组合算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~ 展示出图效果 1 LMD分解算法 LMD (Local Mean Decomposition) 分解算法是一种信号分解算法&#xff0c;它可以将一个信号分解成多个局部平滑的成分&#xff0c;并且可以将高频噪声和低频信号有效地分离出来。LMD 分解算…
阅读更多...
osi模型,tcp/ip模型(名字由来+各层介绍+中间设备介绍)

osi模型,tcp/ip模型(名字由来+各层介绍+中间设备介绍)

目录 网络协议如何分层 引入 osi模型 tcp/ip模型 引入 命名由来 介绍 物理层 数据链路层 网络层 传输层 应用层 中间设备 网络协议如何分层 引入 我们已经知道了网络协议是层状结构,接下来就来了解了解下网络协议如何分层 常见的网络协议分层模型是OSI模型 和 …
阅读更多...
应用回归分析：弹性网络回归

应用回归分析：弹性网络回归

弹性网络回归&#xff1a;原理、优势与应用 弹性网络回归&#xff08;Elastic Net Regression&#xff09;是一种广泛使用的线性回归方法&#xff0c;它结合了岭回归&#xff08;Ridge Regression&#xff09;和套索回归&#xff08;Lasso Regression&#xff09;的特点。通过…
阅读更多...
【c语言】内存函数

【c语言】内存函数

欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;欢迎指出~ 目录 memcpy函数的使用和模拟实现 memcpy函数的使用 memcpy函数的模拟实现 memmove的使用和模拟实现 memmove的使用 memmove的模拟实现 memset函数的使用 memcmp函数…
阅读更多...
最新文章

Copyright @ 2022~2023